<template>
|
<div class="detail-view">
|
<el-drawer :visible.sync="detailConfig.visible" size="80%" :before-close="handleClose">
|
<template slot="title">
|
<div class="header">
|
<span class="header-label">产品详情</span>
|
<span class="header-title">{{ detailConfig.infomation.name }}</span>
|
</div>
|
</template>
|
<div class="content">
|
<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="second"> </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="bigImg-div">
|
<i class="el-icon-picture-outline icon" v-if="!valueUrl"></i>
|
<img class="bigImg" :src="valueUrl" v-if="valueUrl" />
|
</div>
|
</div> -->
|
<div class="business_scope">
|
<div class="content-title">{{ "备注信息：" }}</div>
|
<div class="content-data">{{ remark ? remark : "--" }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="activeName === 'second'" class="second"></div>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "DetailProduct",
|
props: {
|
commonDetail: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
infomation: {}
|
}
|
}
|
}
|
},
|
components: {},
|
computed: {},
|
data() {
|
return {
|
detailConfig: this.commonDetail,
|
activeName: "first",
|
isBasicExpand: true, // 基本信息展开
|
basicInfoList: [],
|
addConfig: {},
|
record: "", // 最新进展
|
noContactDays: 0,
|
newContactDays: "",
|
valueUrl: "",
|
remark: this.commonDetail.infomation.remark
|
}
|
},
|
created() {
|
this.setData(this.detailConfig.infomation)
|
this.addConfig = {
|
id_name: "sales_leads_id",
|
id: this.detailConfig.infomation.id,
|
common_name: this.detailConfig.infomation.id,
|
sales_leads_name: this.detailConfig.infomation.name,
|
sales_leads_id: this.detailConfig.infomation.id
|
}
|
},
|
mounted() {},
|
methods: {
|
setData(item) {
|
if (item.FollowRecord && item.FollowRecord.length > 0) {
|
this.record = item.FollowRecord[0].record
|
console.log(item.FollowRecord[0].follow_time)
|
let follow_time = item.FollowRecord[0].follow_time
|
this.newContactDays = follow_time.substring(0, 10)
|
this.noContactDays = this.getDiffDay(Date.now(), this.newContactDays)
|
}
|
this.basicInfoList = [
|
{
|
leftStr: "产品编码",
|
leftValue: item.number,
|
rightStr: "产品名称",
|
rightValue: item.name
|
},
|
{
|
leftStr: "产品类别",
|
leftValue: item.productType,
|
rightStr: "供应商",
|
rightValue: item.supplier.name
|
},
|
{
|
leftStr: "规格",
|
leftValue: item.specifications,
|
rightStr: "型号",
|
rightValue: item.modelNumber
|
},
|
{
|
leftStr: "单位",
|
leftValue: item.unit,
|
rightStr: "价格",
|
rightValue: item.purchasePrice
|
},
|
{
|
leftStr: "最低库存",
|
leftValue: item.minimumStock,
|
rightStr: "最高库存",
|
rightValue: item.maximumStock
|
}
|
]
|
},
|
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
|
}
|
},
|
// 计算两个日期之间的差值
|
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 {
|
z-index: 9999;
|
.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 {
|
background-color: rgb(230, 233, 240);
|
padding: 8px;
|
.tab-view {
|
background: #fff;
|
// .tab-view-pane {
|
// position: relative;
|
.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 {
|
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;
|
}
|
}
|
.remark {
|
width: 100%;
|
}
|
}
|
.business_scope {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
min-height: 40px;
|
.content-title {
|
width: 320px;
|
text-align: right;
|
color: #555;
|
}
|
.content-data {
|
flex: 1;
|
padding: 5px;
|
text-align: left;
|
margin-left: 25px;
|
color: #333;
|
}
|
.bigImg-div {
|
margin: 10px 25px;
|
width: 100px;
|
height: 100px;
|
line-height: 100px;
|
text-align: center;
|
overflow: hidden;
|
border: 1px solid #ddd;
|
.icon {
|
font-size: 26px;
|
color: #ddd;
|
}
|
.bigImg {
|
display: block;
|
width: 100px;
|
height: 100px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.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>
|
