<template>
|
<div class="detail-view">
|
<el-drawer
|
:visible.sync="detailConfig.visible"
|
size="80%"
|
:before-close="handleClose"
|
:wrapperClosable="false"
|
:append-to-body="true"
|
>
|
<template slot="title">
|
<div class="header">
|
<span class="header-label">销售明细单</span>
|
<span class="header-title">{{ detailConfig.infomation.number }}</span>
|
</div>
|
</template>
|
<div class="content">
|
<div class="top">
|
<ul>
|
<li v-for="(item, i) in topList" :key="i">
|
<div class="left1">
|
<div class="content-title">{{ item.left1Str + "：" }}</div>
|
<div class="content-data">{{ item.left1Value ? item.left1Value : "--" }}</div>
|
</div>
|
<div class="left2">
|
<div class="content-title">{{ item.left2Str + "：" }}</div>
|
<div class="content-data">{{ item.left2Value ? item.left2Value : "--" }}</div>
|
</div>
|
<div class="right1">
|
<div class="content-title">{{ item.right1Str + "：" }}</div>
|
<div class="content-data">{{ item.right1Value ? item.right1Value : "--" }}</div>
|
</div>
|
<div class="right2">
|
<div class="content-title">{{ item.right2Str + "：" }}</div>
|
<div class="content-data">{{ item.right2Value ? item.right2Value : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="tab-view">
|
<el-tabs v-model="activeName" @tab-click="tabsClick">
|
<el-tab-pane label="详情" name="first"></el-tab-pane>
|
<el-tab-pane label="收款计划" name="collection">
|
<!-- <template slot="label">
|
<div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
|
</template> -->
|
</el-tab-pane>
|
<el-tab-pane label="收款单" name="receipt"></el-tab-pane>
|
<el-tab-pane label="销售发票" name="invoice"></el-tab-pane>
|
<el-tab-pane label="销售退货单" name="return"> </el-tab-pane>
|
<el-tab-pane label="服务合同" name="serviceContract"></el-tab-pane>
|
<!-- <el-tab-pane label="销售退款单" name="refundForm"></el-tab-pane> -->
|
</el-tabs>
|
</div>
|
<div v-if="activeName === 'first'" class="detail">
|
<!-- 基本信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('basic')">
|
<i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">基本信息</span>
|
</div>
|
<div v-show="isBasicExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in basicInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 动态信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('dynamic')">
|
<i v-if="isDynamicExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">动态信息</span>
|
</div>
|
<div v-show="isDynamicExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in dynamicInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 收货信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('delivery')">
|
<i v-if="isDeliveryExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">收货信息</span>
|
</div>
|
<div v-show="isDeliveryExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in deliveryInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 条件与条款 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('termsConditions')">
|
<i v-if="isTermsConditionsExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">条件与条款</span>
|
</div>
|
<div v-show="isTermsConditionsExpand" class="basic-info-content">
|
<div class="termsConditions">
|
<div class="content-title">{{ "条件与条款" + "：" }}</div>
|
<div class="content-termsConditions">
|
{{ "\n" + detailConfig.infomation.conditions }}
|
<!-- <ul>
|
<li v-for="(item, index) in Status.termsConditions" :key="index">{{ item }}</li>
|
</ul> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 备注信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('remark')">
|
<i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">备注信息</span>
|
</div>
|
<div v-show="isRemarkExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "备注：" }}</div>
|
<div class="content-data">{{ "" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 附件信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('annex')">
|
<i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">附件信息</span>
|
</div>
|
<div v-show="isAnnexExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "附件：" }}</div>
|
<div class="content-data">{{ "" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 产品管理 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('product')">
|
<i v-if="isProductExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">产品管理</span>
|
<span style="margin-left: 30px">{{ "币种：" + "人民币(￥)" }}</span>
|
</div>
|
<div v-show="isProductExpand" class="basic-info-content">
|
<CommonFormTableView
|
:detail-enter="true"
|
:show-summary="showSummary"
|
:product-table-list="productTableList"
|
/>
|
</div>
|
</div>
|
</div>
|
<div v-if="activeName === 'collection'" class="second">
|
<CollectionPlan :isDetail="true" :add-config="addConfig" :source-type="1" />
|
</div>
|
<div v-if="activeName === 'receipt'" class="second">
|
<Receipt :isDetail="true" :add-config="addConfig" :source-type="1" />
|
</div>
|
<div v-if="activeName === 'invoice'" class="second">
|
<SaleInvoice :isDetail="true" :add-config="addConfig" :source-type="1" />
|
</div>
|
<div v-if="activeName === 'return'" class="second">
|
<SalesReturn :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'serviceContract'" class="second">
|
<ServiceContract :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'refundForm'" class="second">
|
<RefundForm :isDetail="true" :add-config="addConfig" />
|
</div>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import SalesReturn from "@/views/sales/salesReturn"
|
import ServiceContract from "@/views/service/serviceContract"
|
import RefundForm from "@/views/sales/refundForm"
|
import Status from "@/common/const/salesFixedStatus"
|
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
|
import CollectionPlan from "@/views/other/payment/collectionPlan"
|
import Receipt from "@/views/other/payment/receipt"
|
import SaleInvoice from "@/views/other/payment/saleInvoice"
|
export default {
|
name: "DetailSpecification",
|
props: {
|
specificationDetail: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
infomation: {}
|
}
|
}
|
}
|
},
|
components: { SalesReturn, ServiceContract, RefundForm, CommonFormTableView, CollectionPlan, Receipt, SaleInvoice },
|
computed: {},
|
data() {
|
return {
|
Status: Status,
|
detailConfig: this.specificationDetail,
|
activeName: "first",
|
topList: [],
|
isLabelExpand: true, // 标签
|
isBasicExpand: true, // 基本信息
|
basicInfoList: [],
|
isDynamicExpand: true, // 动态信息
|
dynamicInfoList: [],
|
isDeliveryExpand: true, // 收货信息
|
deliveryInfoList: [],
|
isTermsConditionsExpand: true, // 条件与条款
|
isRemarkExpand: true, // 备注信息
|
isAnnexExpand: true, // 附件信息
|
isProductExpand: true, // 产品管理
|
showSummary: {
|
show: true,
|
total: true,
|
sumProp: ["amount", "price", "total"],
|
mergeNumber: 1
|
},
|
productTableList: {},
|
addConfig: {}
|
}
|
},
|
created() {
|
this.setData(this.detailConfig.infomation)
|
this.addConfig = {
|
id_name: "sale_detail_name",
|
keywordType: "销售明细单",
|
keyword: this.detailConfig.infomation.number,
|
id: this.detailConfig.infomation.id,
|
common_name: this.detailConfig.infomation.name,
|
client_name: this.detailConfig.infomation.client.name,
|
contact_name: this.detailConfig.infomation.contact_name,
|
client_id: this.detailConfig.infomation.clientId,
|
contact_id: this.detailConfig.infomation.contact_id,
|
amountTotal: this.detailConfig.infomation.amountTotal
|
}
|
this.setTableForm()
|
},
|
mounted() {},
|
methods: {
|
setData(item) {
|
this.topList = [
|
{
|
left1Str: "客户名称",
|
left1Value: item.client.name,
|
left2Str: "合计",
|
left2Value: item.amountTotal,
|
right1Str: "已收金额",
|
right1Value: "0.00",
|
right2Str: "已开票金额",
|
right2Value: "0.00"
|
},
|
{
|
left1Str: "签约日期",
|
left1Value: "",
|
left2Str: "销售负责人",
|
left2Value: item.Member.username,
|
right1Str: "应收金额",
|
right1Value: "0.00",
|
right2Str: "未开票金额",
|
right2Value: "0.00"
|
}
|
]
|
this.basicInfoList = [
|
{
|
leftStr: "客户名称",
|
leftValue: item.client.name,
|
rightStr: "订单编号",
|
rightValue: item.number
|
},
|
{
|
leftStr: "销售机会",
|
leftValue: item.saleChance.name,
|
rightStr: "选择源单",
|
rightValue: ""
|
},
|
{
|
leftStr: "签约日期",
|
leftValue: item.signTime,
|
rightStr: "销售负责人",
|
rightValue: item.Member.username
|
},
|
{
|
leftStr: "交付日期",
|
leftValue: item.deliveryDate,
|
rightStr: "订单来源",
|
rightValue: ""
|
},
|
{
|
leftStr: "审批状态",
|
leftValue: "",
|
rightStr: "微信订单状态",
|
rightValue: ""
|
},
|
{
|
leftStr: "创建人",
|
leftValue: "",
|
rightStr: "创建时间",
|
rightValue: item.createTime
|
}
|
]
|
this.deliveryInfoList = [
|
{
|
leftStr: "收货人",
|
leftValue: item.addressee,
|
rightStr: "收货联系方式",
|
rightValue: item.phone
|
},
|
{
|
leftStr: "收货地址",
|
leftValue: item.address,
|
rightStr: "",
|
rightValue: ""
|
}
|
]
|
this.dynamicInfoList = [
|
{
|
leftStr: "修改时间",
|
leftValue: item.updateTime,
|
rightStr: "出库状态",
|
rightValue: ""
|
},
|
{
|
leftStr: "已收总额",
|
leftValue: "",
|
rightStr: "应收余额",
|
rightValue: ""
|
},
|
{
|
leftStr: "已开票金额",
|
leftValue: "",
|
rightStr: "未开票金额",
|
rightValue: ""
|
},
|
{
|
leftStr: "最新开票日期",
|
leftValue: "",
|
rightStr: "最新发票号",
|
rightValue: ""
|
}
|
]
|
},
|
handleClose() {
|
this.detailConfig.visible = false
|
},
|
// tab切换
|
tabsClick(tab, event) {
|
console.log(tab, event)
|
},
|
// 展开收起点击事件
|
expandClick(value) {
|
console.log(value)
|
if (value === "basic") {
|
this.isBasicExpand = !this.isBasicExpand
|
} else if (value === "dynamic") {
|
this.isDynamicExpand = !this.isLabelExpand
|
} else if (value === "delivery") {
|
this.isDeliveryExpand = !this.isDeliveryExpand
|
} else if (value === "termsConditions") {
|
this.isTermsConditionsExpand = !this.isTermsConditionsExpand
|
} else if (value === "remark") {
|
this.isRemarkExpand = !this.isRemarkExpand
|
} else if (value === "annex") {
|
this.isAnnexExpand = !this.isAnnexExpand
|
} else if (value === "product") {
|
this.isProductExpand = !this.isProductExpand
|
}
|
},
|
setTableForm() {
|
this.productTableList = {
|
tableData: this.detailConfig.infomation.products,
|
tableColumn: [
|
{ label: "产品名称", prop: "name", productName: true, isRequird: true },
|
{ label: "产品编号", prop: "number" },
|
{ label: "数量", prop: "amount", inputNumber: true, isRequird: true },
|
{ label: "销售单价", prop: "price", inputFloat: true },
|
{ label: "价税合计", prop: "total", inputFloat: true }
|
]
|
}
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-drawer__header {
|
padding: 0;
|
margin-bottom: 0px;
|
.header {
|
height: 56px;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
.header-label {
|
padding: 5px;
|
border-radius: 4px;
|
background-color: #ff6600;
|
color: #fff;
|
font-size: 12px;
|
}
|
.header-title {
|
color: #323232;
|
font-size: 15px;
|
margin-left: 10px;
|
font-weight: inherit;
|
}
|
}
|
}
|
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
padding-left: 20px;
|
}
|
.el-tabs__item.is-active,
|
.el-tabs__item:hover,
|
.el-tabs__active-bar {
|
color: $color-primary;
|
}
|
.el-tabs__header {
|
margin: 0;
|
}
|
.el-drawer__body {
|
.content {
|
background-color: rgb(230, 233, 240);
|
padding: 8px;
|
.top {
|
height: 84px;
|
// line-height: 42px;
|
margin-bottom: 10px;
|
text-align: center;
|
font-size: 14px;
|
color: #555;
|
background-color: #fff;
|
li {
|
display: flex;
|
.left1,
|
.left2,
|
.right1,
|
.right2 {
|
width: 25%;
|
display: flex;
|
align-items: center;
|
height: 40px;
|
.content-title {
|
width: 150px;
|
text-align: right;
|
}
|
.content-data {
|
text-align: left;
|
margin-left: 25px;
|
}
|
}
|
}
|
}
|
.tab-view {
|
background: #fff;
|
.item {
|
position: absolute;
|
top: 0px;
|
right: 0px;
|
}
|
}
|
.detail {
|
.basic-info {
|
.basic-info-label {
|
padding-left: 10px;
|
height: 42px;
|
line-height: 42px;
|
background: #f4f8fe;
|
color: #333;
|
font-size: 14px;
|
}
|
.basic-info-content {
|
background: #fff;
|
ul {
|
padding-inline-start: 0;
|
}
|
li {
|
display: flex;
|
font-size: 14px;
|
font-family: PingFangSC;
|
border-bottom: 1px solid #f9f9fb;
|
.left,
|
.right,
|
.all {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
height: 40px;
|
.content-title {
|
width: 320px;
|
text-align: right;
|
color: #555;
|
}
|
.content-data {
|
text-align: left;
|
margin-left: 25px;
|
color: #333;
|
}
|
}
|
.all {
|
width: 100%;
|
}
|
.remark {
|
width: 100%;
|
}
|
.history {
|
.content-title {
|
width: 200px;
|
color: #8b0000;
|
}
|
.content-data {
|
color: #8b0000;
|
}
|
}
|
}
|
.step-view {
|
padding: 30px 60px 5px;
|
height: 100px;
|
.step-title-view {
|
margin-top: 10px;
|
font-size: 12px;
|
color: #555;
|
position: relative;
|
.step-label {
|
margin-top: -65px;
|
height: 60px;
|
}
|
.step-btn {
|
position: absolute;
|
bottom: -25px;
|
left: 50%;
|
margin-left: -28px;
|
width: 56px;
|
height: 24px;
|
line-height: 24px;
|
text-align: center;
|
color: #2d82f4;
|
border: 1px solid #2d82f4;
|
border-radius: 15px;
|
cursor: pointer;
|
}
|
.step-desc {
|
margin-top: 15px;
|
}
|
}
|
.el-step__head.is-process {
|
color: #ff8707;
|
border-color: #ff8707;
|
}
|
.el-step__head.is-finish .el-step__line {
|
background-color: #409eff;
|
}
|
}
|
.termsConditions {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
font-family: PingFangSC;
|
// padding: 5px 0;
|
.content-title {
|
width: 320px;
|
text-align: right;
|
color: #555;
|
}
|
.content-termsConditions {
|
margin: 0px 25px 15px;
|
font-size: 13px;
|
color: #333;
|
white-space: pre-wrap;
|
}
|
}
|
}
|
}
|
}
|
.second {
|
background: #fff;
|
.followup-records {
|
.table-view {
|
margin-top: 0 !important;
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
