<template>
|
<div class="detail-view">
|
<el-drawer
|
:visible.sync="detailConfig.visible"
|
size="80%"
|
:before-close="handleClose"
|
:wrapperClosable="false"
|
>
|
<template slot="title">
|
<div class="header">
|
<span class="header-label">采购详情</span>
|
<span class="header-title">{{ detailConfig.infomation.name }}</span>
|
</div>
|
<div class="btn" style="float: right; margin-right: 30px">
|
<el-button type="primary" size="mini" disabled style="margin-right: 5px"
|
>打印</el-button
|
>
|
<el-button type="primary" disabled size="mini" @click="emailClick"
|
>Email通知下单</el-button
|
>
|
|
<el-button
|
type="primary"
|
size="mini"
|
@click="deleteClick"
|
style="margin-right: 5px"
|
>删除</el-button
|
>
|
</div>
|
</template>
|
<div class="content">
|
<div class="info">
|
<ul>
|
<li v-for="(list, i) in formInfoList" :key="i">
|
<span class="content-title">{{ list.str + "：" }}</span>
|
<span class="content-data">{{
|
list.value ? list.value : "--"
|
}}</span>
|
</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-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 && item.rightStr.length > 0"
|
class="right"
|
>
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">
|
{{ item.rightValue ? item.rightValue : "--" }}
|
</div>
|
</div>
|
</li>
|
</ul>
|
<div class="business_scope">
|
<div class="content-title">{{ "备注信息：" }}</div>
|
<div class="content-data">{{ remark ? remark : "--" }}</div>
|
</div>
|
</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 && item.rightStr.length > 0"
|
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('three')">
|
<i v-if="isExpandThree" 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="isExpandThree" class="basic-info-content">
|
<TableCommonView
|
style="margin-top: 2px"
|
class="content-table"
|
ref="tableListRef"
|
:showSummary="showSummary"
|
:table-list="tableList"
|
@selTableCol="selTableCol"
|
>
|
</TableCommonView>
|
<div class="table-bottom">
|
<div class="table-bottom-item">
|
<div class="table-bottom-l">
|
整单折扣：{{ detailConfig.infomation.wholeDiscountType==1?'百分比降价':'直接降价' }}
|
</div>
|
<div class="table-bottom-r">{{detailConfig.infomation.wholeDiscount }}</div>
|
</div>
|
<div class="table-bottom-item">
|
<div class="table-bottom-l">
|
调整：{{ detailConfig.infomation.priceAdjustmentType==1?'增加':'减少' }}
|
</div>
|
<div class="table-bottom-r">{{ detailConfig.infomation.priceAdjustment }}</div>
|
</div>
|
<div class="table-bottom-item">
|
<div class="table-bottom-l">
|
合计
|
</div>
|
<div class="table-bottom-r">{{detailConfig.infomation.realTotalPrice }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import { deletePurchase } from "@/api/purchaseManage/purchase";
|
import { getDataByType } from "@/api/data";
|
export default {
|
name: "DetailSupplier",
|
props: {
|
commonDetail: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
infomation: {},
|
tableList: [],
|
};
|
},
|
},
|
},
|
components: {},
|
data() {
|
return {
|
detailConfig: this.commonDetail,
|
activeName: "first",
|
formInfoList: [], //信息
|
isBasicExpand: true, // 基本信息展开
|
basicInfoList: [],
|
isDynamicExpand: true, // 账户信息
|
dynamicInfoList: [],
|
remark: "", // 最新进展
|
noContactDays: 0,
|
newContactDays: "",
|
isExpandThree: true, //产品信息
|
tableList: {},
|
showSummary:{
|
show: true,
|
sumProp: ["amount", "total"],
|
mergeNumber: 5,
|
totalName:'小计'
|
},
|
showCol: ['产品名称', '产品编码', '计量单位', '规格型号', '数量', '销售单价','价税合计','描述'],
|
purchaseStatusList:getDataByType('purchaseStatus'),
|
tableColumn: [
|
{ label: "产品名称", prop: "name", min: 160, },
|
{ label: "产品编码", prop: "number", min: 130, },
|
{ label: "计量单位", prop: "unit", min: 130 },
|
{ label: "规格型号", prop: "specifications", min: 130 },
|
{ label: "数量", prop: "amount", min: 130 },
|
{ label: "销售单价", prop: "price", min: 130 },
|
{ label: "价税合计", prop: "total", min: 130 },
|
{ label: "描述", prop: "remark", min: 130 },
|
],
|
};
|
},
|
created() {
|
this.setData(this.detailConfig.infomation);
|
|
},
|
mounted() {},
|
computed: {},
|
methods: {
|
getpurchaseStatus(val) {
|
if (val) {
|
for (let i in this.purchaseStatusList) {
|
if (this.purchaseStatusList[i].id == val) {
|
return this.purchaseStatusList[i].name;
|
}
|
}
|
} else {
|
return "--";
|
}
|
},
|
// email 通知下单
|
emailClick() {},
|
// 删除
|
deleteClick() {
|
this.$confirm("是否删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
deletePurchase({ id: this.commonDetail.infomation.ID }).then((response) => {
|
if (response.code === 200) {
|
this.$message.success("删除成功");
|
this.detailConfig.visible=false;
|
this.$parent.getData();
|
} else {
|
this.$message.warning("删除失败");
|
}
|
});
|
})
|
.catch(() => {});
|
},
|
setData(item) {
|
if (item.FollowRecord && item.FollowRecord.length > 0) {
|
this.noContactDays = this.getDiffDay(Date.now(), this.newContactDays);
|
}
|
this.remark =item.remark?item.remark:''
|
this.formInfoList = [
|
{
|
str: "供应商名称",
|
value: item.supplier.name,
|
},
|
{
|
str: "合计",
|
value:item.realTotalPrice,
|
},
|
{
|
str: "已收票金额",
|
value: item.invoiceAmount,
|
},
|
{
|
str: "已付金额",
|
value: item.paidAmount,
|
},
|
{
|
str: "签约日期",
|
value:item.signingDate,
|
},
|
{
|
str: "采购负责人",
|
value: item.principal,
|
},
|
{
|
str: "未收票金额",
|
value: item.unInvoiceAmount,
|
},
|
{
|
str: "应付金额",
|
value: item.shouldPayAmount,
|
},
|
];
|
this.basicInfoList = [
|
{
|
leftStr: "采购订单编号",
|
leftValue: item.number,
|
rightStr: "供应商名称",
|
rightValue: item.supplier.name,
|
},
|
{
|
leftStr: "采购单状态",
|
leftValue: this.getpurchaseStatus(item.status),
|
rightStr: "采购负责人",
|
rightValue: item.principal,
|
},
|
{
|
leftStr: "采购联系人",
|
leftValue: item.contact,
|
rightStr: "联系电话",
|
rightValue: item.phone,
|
},
|
{
|
leftStr: "签约日期",
|
leftValue: item.signingDate,
|
rightStr: "交付日期",
|
rightValue: item.deliveryDate,
|
},
|
{
|
leftStr: "到货仓库",
|
leftValue: item.warehouse,
|
rightStr: "",
|
rightValue: "",
|
},
|
];
|
this.dynamicInfoList = [
|
{
|
leftStr: "合计",
|
leftValue: item.realTotalPrice,
|
rightStr: "已收票金额",
|
rightValue: item.invoiceAmount,
|
},
|
{
|
leftStr: "已付总额",
|
leftValue:item.paidAmount,
|
rightStr: "未收票金额",
|
rightValue: item.unInvoiceAmount,
|
},
|
{
|
leftStr: "应付金额",
|
leftValue: item.shouldPayAmount,
|
rightStr: "",
|
rightValue: "",
|
},
|
];
|
this.tableList = {
|
tableInfomation: item.productList?item.productList:[],
|
selectIndex: true,
|
showcol: this.showCol,
|
allcol:[],
|
tableColumn:this.setColumnVisible(this.showCol)
|
};
|
this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
|
},
|
selTableCol(val) {
|
this.showcol = val;
|
this.tableList.tableColumn = this.setColumnVisible(val);
|
},
|
setColumnVisible(showCol){
|
return this.tableColumn.map(ele=>{
|
return {
|
...ele,
|
isShowColumn:showCol.includes(ele.label)
|
}
|
})
|
},
|
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.isDynamicExpand;
|
} else {
|
this.isExpandThree = !this.isExpandThree;
|
}
|
},
|
// 计算两个日期之间的差值
|
getDiffDay(date_1, date_2) {
|
let totalDays, diffDate;
|
let myDate_1 = date_1;
|
let myDate_2 = Date.parse(date_2);
|
// 将两个日期都转换为毫秒格式，然后做差
|
diffDate = Math.abs(myDate_1 - myDate_2); // 取相差毫秒数的绝对值
|
|
totalDays = Math.floor(diffDate / (1000 * 3600 * 24)); // 向下取整
|
// console.log(totalDays)
|
|
return totalDays; // 相差的天数
|
},
|
},
|
};
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.detail-view {
|
.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;
|
}
|
}
|
.content {
|
height: 100%;
|
background-color: rgb(230, 233, 240);
|
padding: 8px;
|
.tab-view {
|
background: #fff;
|
// .tab-view-pane {
|
// position: relative;
|
.item {
|
position: absolute;
|
top: 0px;
|
right: 0px;
|
}
|
// }
|
}
|
.info {
|
width: 100%;
|
height: auto;
|
background: #fff;
|
margin-bottom:10px;
|
ul {
|
width: 100%;
|
height: auto;
|
overflow: hidden;
|
li {
|
width: 25%;
|
float: left;
|
height: 40px;
|
line-height: 40px;
|
font-size: 14px;
|
font-family: PingFangSC;
|
border-bottom: 1px solid #f9f9fb;
|
.content-title {
|
width: 180px;
|
display: inline-block;
|
text-align: right;
|
color: #555;
|
}
|
.content-data {
|
width: calc(100% - 180px - 25px);
|
display: inline-block;
|
text-align: left;
|
margin-left: 25px;
|
color: #333;
|
}
|
}
|
}
|
}
|
.detail {
|
height: calc(100% - 40px - 92px);
|
background: #fff;
|
overflow: auto;
|
|
.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;
|
overflow:hidden;
|
ul {
|
padding-inline-start: 0;
|
}
|
li {
|
display: flex;
|
font-size: 14px;
|
font-family: PingFangSC;
|
border-bottom: 1px solid #f9f9fb;
|
.left,
|
.right {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
height: 40px;
|
.content-title {
|
width: 180px;
|
text-align: right;
|
color: #555;
|
}
|
.content-data {
|
text-align: left;
|
margin-left: 25px;
|
color: #333;
|
}
|
}
|
.remark {
|
width: 100%;
|
}
|
}
|
.business_scope {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
min-height: 40px;
|
.content-title {
|
width: 180px;
|
text-align: right;
|
color: #555;
|
}
|
.content-data {
|
flex: 1;
|
padding: 5px;
|
text-align: left;
|
margin-left: 25px;
|
color: #333;
|
}
|
}
|
.table-bottom{
|
width:300px;
|
float:right;
|
margin-right:180px;
|
margin-top:10px;
|
height:auto;
|
line-height:30px;
|
font-size:14px;
|
font-weight: 700;
|
color:#333;
|
.table-bottom-item{
|
width:100%;
|
text-align:right;
|
.table-bottom-l{
|
width:180px;
|
float:left;
|
}
|
.table-bottom-r{
|
width:calc(100% - 180px);
|
float:right;
|
}
|
}
|
}
|
}
|
}
|
}
|
.second {
|
background: #fff;
|
.followup-records {
|
.table-view {
|
margin-top: 0 !important;
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
::v-deep {
|
.el-drawer__header {
|
padding: 0;
|
margin-bottom: 0px;
|
}
|
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
padding-left: 20px;
|
}
|
.el-tabs__item.is-active {
|
color: $color-primary;
|
}
|
.el-tabs__item:hover {
|
color: $color-primary;
|
}
|
.el-tabs__active-bar {
|
background-color: $color-primary;
|
}
|
.el-tabs__header {
|
margin: 0;
|
}
|
}
|
</style>
|
