|
|
@@ -2,7 +2,7 @@
|
|
|
* @Author: wanglj 471442253@qq.com
|
|
|
* @Date: 2022-12-26 09:30:47
|
|
|
* @LastEditors: wanglj
|
|
|
- * @LastEditTime: 2022-12-30 14:38:40
|
|
|
+ * @LastEditTime: 2023-01-04 18:05:59
|
|
|
* @Description: file content
|
|
|
* @FilePath: \opms_frontend\src\views\customer\detail.vue
|
|
|
-->
|
|
|
@@ -22,55 +22,92 @@
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<el-button @click="handleReceive">领取客户</el-button>
|
|
|
- <el-button @click="$refs.allocate.visible = true">
|
|
|
- 分配客户
|
|
|
- </el-button>
|
|
|
+ <el-button @click="$refs.allocate.visible = true">分配客户</el-button>
|
|
|
</template>
|
|
|
</span>
|
|
|
</h3>
|
|
|
</div>
|
|
|
<header>
|
|
|
<el-descriptions :colon="false" :column="6" direction="vertical">
|
|
|
- <el-descriptions-item
|
|
|
- content-class-name="my-content"
|
|
|
- label="客户编码"
|
|
|
- label-class-name="my-label">
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="客户编码" label-class-name="my-label">
|
|
|
{{ detail.custCode }}
|
|
|
</el-descriptions-item>
|
|
|
- <el-descriptions-item
|
|
|
- content-class-name="my-content"
|
|
|
- label="助记名"
|
|
|
- label-class-name="my-label">
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="助记名" label-class-name="my-label">
|
|
|
{{ detail.abbrName }}
|
|
|
</el-descriptions-item>
|
|
|
- <el-descriptions-item
|
|
|
- content-class-name="my-content"
|
|
|
- label="客户级别"
|
|
|
- label-class-name="my-label">
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="客户级别" label-class-name="my-label">
|
|
|
{{ detail.custLevel }}
|
|
|
</el-descriptions-item>
|
|
|
- <el-descriptions-item
|
|
|
- content-class-name="my-content"
|
|
|
- label="客户行业"
|
|
|
- label-class-name="my-label">
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="客户行业" label-class-name="my-label">
|
|
|
{{ detail.custIndustry }}
|
|
|
</el-descriptions-item>
|
|
|
- <el-descriptions-item
|
|
|
- content-class-name="my-content"
|
|
|
- label="客户状态"
|
|
|
- label-class-name="my-label">
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="客户状态" label-class-name="my-label">
|
|
|
{{ detail.custStatus == 10 ? '正常' : '异常' }}
|
|
|
</el-descriptions-item>
|
|
|
- <el-descriptions-item
|
|
|
- content-class-name="my-content"
|
|
|
- label="最后跟进时间"
|
|
|
- label-class-name="my-label">
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="最后跟进时间" label-class-name="my-label">
|
|
|
{{ detail.followUpDate }}
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</header>
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="详细信息" name="first">
|
|
|
+ <el-tab-pane label="跟进记录" name="follow">
|
|
|
+ <ul v-if="followList.length" class="follow">
|
|
|
+ <li v-for="(date, index) in followList" :key="index">
|
|
|
+ <div class="date">
|
|
|
+ <h2>{{ date.followDay.split('-')[2] }}</h2>
|
|
|
+ <h3>
|
|
|
+ {{ date.followDay.split('-').splice(0, 2).join('.') }}
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <ul class="content">
|
|
|
+ <li v-for="(item, idx) in date.followupList" :key="idx">
|
|
|
+ <!-- <el-avatar class="user-avatar"
|
|
|
+ :src="avatar" />-->
|
|
|
+ <div class="text-container">
|
|
|
+ <vab-icon class="user-avatar" icon="account-circle-fill" />
|
|
|
+ <div class="text">
|
|
|
+ <p class="action">
|
|
|
+ <span>{{ item.contactsName }} 跟进({{ formatType(item.followType) }})</span>
|
|
|
+ <span>
|
|
|
+ <vab-icon icon="time-line" />
|
|
|
+ {{ item.followDate }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p>{{ item.followContent }}</p>
|
|
|
+ <div class="footer">
|
|
|
+ <p>
|
|
|
+ 来自客户:
|
|
|
+ <span>{{ item.custName }}</span>
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <el-button size="mini" @click="showDetail(item)">
|
|
|
+ <vab-icon icon="arrow-right-circle-fill" />
|
|
|
+ 详情
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" @click="showComment(item)">评论({{ item.commentNumber }})</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <transition name="height">
|
|
|
+ <ul v-if="item.showComment" class="comments">
|
|
|
+ <li v-for="comment in item.comments" :key="comment.id">
|
|
|
+ <vab-icon class="user-avatar" icon="account-circle-fill" />
|
|
|
+ <div class="text">
|
|
|
+ <p>{{ comment.createdName }}</p>
|
|
|
+ <p>{{ comment.content }}</p>
|
|
|
+ <p>{{ comment.createdTime }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </transition>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div v-else class="no-follow">暂无跟进记录</div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="详细信息" name="detail">
|
|
|
<el-descriptions border :column="2" size="medium">
|
|
|
<el-descriptions-item label="客户级别">
|
|
|
{{ detail.custLevel }}
|
|
|
@@ -122,18 +159,13 @@
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="联系人" name="second">
|
|
|
+ <el-tab-pane label="联系人" name="contact">
|
|
|
<vab-query-form>
|
|
|
<vab-query-form-left-panel :span="12">
|
|
|
- <el-input
|
|
|
- placeholder="请输入单据名称/编号"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- style="width: 50%" />
|
|
|
+ <el-input placeholder="请输入单据名称/编号" prefix-icon="el-icon-search" style="width: 50%" />
|
|
|
</vab-query-form-left-panel>
|
|
|
<vab-query-form-right-panel :span="12">
|
|
|
- <el-button icon="el-icon-plus" @click="addContact">
|
|
|
- 新建联系人
|
|
|
- </el-button>
|
|
|
+ <el-button icon="el-icon-plus" @click="addContact">新建联系人</el-button>
|
|
|
</vab-query-form-right-panel>
|
|
|
</vab-query-form>
|
|
|
<el-table
|
|
|
@@ -150,118 +182,33 @@
|
|
|
<el-table-column align="center" label="邮箱" prop="email" />
|
|
|
<el-table-column align="center" label="是否决策人">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-switch
|
|
|
- v-model="scope.row.policy"
|
|
|
- :active-value="1"
|
|
|
- disabled
|
|
|
- :inactive-value="0" />
|
|
|
+ <el-switch v-model="scope.row.policy" :active-value="1" disabled :inactive-value="0" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column align="center" label="操作">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button type="text" @click="contactEdit(scope.row)">
|
|
|
- 编辑
|
|
|
- </el-button>
|
|
|
- <el-button type="text" @click="contactDel(scope.row)">
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
+ <el-button type="text" @click="contactEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button type="text" @click="contactDel(scope.row)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="跟进记录" name="third">
|
|
|
- <ul class="follow">
|
|
|
- <li v-for="(date, index) in followList" :key="index">
|
|
|
- <div class="date">
|
|
|
- <h2>{{ date.followDay.split('-')[2] }}</h2>
|
|
|
- <h3>
|
|
|
- {{ date.followDay.split('-').splice(0, 2).join('.') }}
|
|
|
- </h3>
|
|
|
- </div>
|
|
|
- <ul class="content">
|
|
|
- <li v-for="(item, idx) in date.followupList" :key="idx">
|
|
|
- <!-- <el-avatar class="user-avatar"
|
|
|
- :src="avatar" />-->
|
|
|
- <div class="text-container">
|
|
|
- <vab-icon
|
|
|
- class="user-avatar"
|
|
|
- icon="account-circle-fill" />
|
|
|
- <div class="text">
|
|
|
- <p class="action">
|
|
|
- <span>
|
|
|
- {{ item.contactsName }} 跟进({{
|
|
|
- formatType(item.followType)
|
|
|
- }})
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <vab-icon icon="time-line" />
|
|
|
- {{ item.followDate }}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p>{{ item.followContent }}</p>
|
|
|
- <div class="footer">
|
|
|
- <p>
|
|
|
- 来自客户:
|
|
|
- <span>{{ item.custName }}</span>
|
|
|
- </p>
|
|
|
- <div>
|
|
|
- <el-button size="mini" @click="showDetail(item)">
|
|
|
- <vab-icon icon="arrow-right-circle-fill" />
|
|
|
- 详情
|
|
|
- </el-button>
|
|
|
- <el-button size="mini" @click="showComment(item)">
|
|
|
- 评论({{ item.commentNumber }})
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <transition name="height">
|
|
|
- <ul v-if="item.showComment" class="comments">
|
|
|
- <li v-for="comment in item.comments" :key="comment.id">
|
|
|
- <vab-icon
|
|
|
- class="user-avatar"
|
|
|
- icon="account-circle-fill" />
|
|
|
- <div class="text">
|
|
|
- <p>{{ comment.createdName }}</p>
|
|
|
- <p>{{ comment.content }}</p>
|
|
|
- <p>{{ comment.createdTime }}</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </transition>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="项目记录" name="fourth">项目记录</el-tab-pane>
|
|
|
- <el-tab-pane label="合同记录" name="fifth">合同记录</el-tab-pane>
|
|
|
- <el-tab-pane label="工单记录" name="sixth">工单记录</el-tab-pane>
|
|
|
- <el-tab-pane label="归属记录" name="seventh">
|
|
|
- <el-table
|
|
|
- v-loading="listLoading"
|
|
|
- border
|
|
|
- :data="belongs"
|
|
|
- height="calc(100% - 42px)">
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- label="归属销售"
|
|
|
- prop="saleName" />
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- label="原来归属"
|
|
|
- prop="origSaleName" />
|
|
|
+ <el-tab-pane label="项目记录" name="item">项目记录</el-tab-pane>
|
|
|
+ <el-tab-pane label="合同记录" name="contract">合同记录</el-tab-pane>
|
|
|
+ <el-tab-pane label="工单记录" name="worksheet">工单记录</el-tab-pane>
|
|
|
+ <el-tab-pane label="归属记录" name="belong">
|
|
|
+ <el-table v-loading="listLoading" border :data="belongs" height="calc(100% - 42px)">
|
|
|
+ <el-table-column align="center" label="归属销售" prop="saleName" />
|
|
|
+ <el-table-column align="center" label="原来归属" prop="origSaleName" />
|
|
|
<el-table-column align="center" label="操作方式" prop="opnType">
|
|
|
<template slot-scope="scope">
|
|
|
- {{ scope.row.opnType == 10 ? '分配' : '转移' }}
|
|
|
+ <el-tag v-if="scope.row.opnType == 10">分配</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.opnType == 20">转移</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.opnType == 30">领取</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align="center" label="操作人" prop="opnPeople" />
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- label="操作时间"
|
|
|
- prop="opnDatetime" />
|
|
|
+ <el-table-column align="center" label="操作人" prop="createdName" />
|
|
|
+ <el-table-column align="center" label="操作时间" min-width="160px" prop="opnDatetime" />
|
|
|
<el-table-column align="center" label="备注" prop="remark" />
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
@@ -310,9 +257,9 @@
|
|
|
<!-- 分配客户 -->
|
|
|
<Allocate ref="allocate" />
|
|
|
<!-- 转移客户 -->
|
|
|
- <Shift ref="shift" />
|
|
|
+ <Shift ref="shift" @refresh="back" />
|
|
|
<!-- 移入公海 -->
|
|
|
- <ToOpen ref="toOpen" @refresh="back" />
|
|
|
+ <ToOpen ref="toOpen" @refresh="backToOpen" />
|
|
|
<!-- 跟进详情 -->
|
|
|
<FollowDetail ref="followDetail" />
|
|
|
</div>
|
|
|
@@ -362,7 +309,7 @@
|
|
|
notPaymentTotal: '', //未回款总额
|
|
|
drawTotal: '', //开票总额
|
|
|
},
|
|
|
- activeName: 'first',
|
|
|
+ activeName: 'follow',
|
|
|
listLoading: false,
|
|
|
contactList: [],
|
|
|
selectRows: [],
|
|
|
@@ -382,30 +329,28 @@
|
|
|
this.privateCus = this.$route.query.privateCus
|
|
|
this.init()
|
|
|
this.getDynamics()
|
|
|
+ this.handleClick({ name: 'follow' })
|
|
|
},
|
|
|
methods: {
|
|
|
async init() {
|
|
|
- Promise.all([
|
|
|
- api.getDetail({ ids: [parseInt(this.id)] }),
|
|
|
- api.getAbstract({ id: parseInt(this.id) }),
|
|
|
- ]).then(([detail, abstract]) => {
|
|
|
- if (detail.data.list[0]) this.detail = detail.data.list[0]
|
|
|
- if (abstract.data.list) this.abstract = abstract.data.list
|
|
|
- })
|
|
|
+ Promise.all([api.getDetail({ ids: [parseInt(this.id)] }), api.getAbstract({ id: parseInt(this.id) })]).then(
|
|
|
+ ([detail, abstract]) => {
|
|
|
+ if (detail.data.list[0]) this.detail = detail.data.list[0]
|
|
|
+ if (abstract.data.list) this.abstract = abstract.data.list
|
|
|
+ }
|
|
|
+ )
|
|
|
},
|
|
|
async getDynamics() {
|
|
|
- const [err, res] = await to(
|
|
|
- api.dynamicsList({ custId: parseInt(this.id) })
|
|
|
- )
|
|
|
+ const [err, res] = await to(api.dynamicsList({ custId: parseInt(this.id) }))
|
|
|
if (err) return
|
|
|
if (res.data.list[0]) {
|
|
|
let obj = res.data.list[0]
|
|
|
- for (const key in obj) {
|
|
|
- for (const item of obj[key]) {
|
|
|
- item.opnContent = JSON.parse(item.opnContent)
|
|
|
- }
|
|
|
+ const keys = Object.keys(obj).reverse()
|
|
|
+ let records = {}
|
|
|
+ for (const item of keys) {
|
|
|
+ records[item] = obj[item]
|
|
|
}
|
|
|
- this.records = obj
|
|
|
+ this.records = records
|
|
|
}
|
|
|
},
|
|
|
setSelectRows(val) {
|
|
|
@@ -413,11 +358,11 @@
|
|
|
},
|
|
|
async handleClick(tab) {
|
|
|
let err, res
|
|
|
- if (tab.name == 'second') {
|
|
|
+ if (tab.name == 'contact') {
|
|
|
;[err, res] = await to(api.getContact({ custId: parseInt(this.id) }))
|
|
|
if (err) return
|
|
|
this.contactList = res.data.list || []
|
|
|
- } else if (tab.name == 'third') {
|
|
|
+ } else if (tab.name == 'follow') {
|
|
|
let params = {
|
|
|
custId: this.id,
|
|
|
DaysBeforeToday: 9999,
|
|
|
@@ -425,8 +370,8 @@
|
|
|
;[err, res] = await to(follow.getListByDay(params))
|
|
|
if (err) return
|
|
|
this.followList = res.data.list || []
|
|
|
- } else if (tab.name == 'seventh' && this.belongs.length == 0) {
|
|
|
- ;[err, res] = await to(api.getBelongs({ Id: parseInt(this.id) }))
|
|
|
+ } else if (tab.name == 'belong' && this.belongs.length == 0) {
|
|
|
+ ;[err, res] = await to(api.getBelongs({ custId: parseInt(this.id) }))
|
|
|
if (err) return
|
|
|
this.belongs = res.data.list || []
|
|
|
}
|
|
|
@@ -439,7 +384,7 @@
|
|
|
},
|
|
|
// 保存联系人
|
|
|
contactSave() {
|
|
|
- this.handleClick({ name: 'second' })
|
|
|
+ this.handleClick({ name: 'contact' })
|
|
|
this.getDynamics()
|
|
|
},
|
|
|
// 编辑客户
|
|
|
@@ -462,9 +407,7 @@
|
|
|
type: 'warning',
|
|
|
})
|
|
|
.then(async () => {
|
|
|
- const [err, res] = await to(
|
|
|
- api.deleteContact({ Id: row.id, custId: parseInt(this.id) })
|
|
|
- )
|
|
|
+ const [err, res] = await to(api.deleteContact({ Id: row.id, custId: parseInt(this.id) }))
|
|
|
if (err) return
|
|
|
if (res.code == 200) {
|
|
|
this.$message({
|
|
|
@@ -478,6 +421,7 @@
|
|
|
},
|
|
|
// 转移客户
|
|
|
handleShift() {
|
|
|
+ this.$refs.shift.form.Ids = [parseInt(this.id)]
|
|
|
this.$refs.shift.visible = true
|
|
|
},
|
|
|
// 移入公海
|
|
|
@@ -493,9 +437,7 @@
|
|
|
type: 'warning',
|
|
|
})
|
|
|
.then(async () => {
|
|
|
- const [err, res] = await to(
|
|
|
- api.deleteCustomer({ Id: parseInt(this.id) })
|
|
|
- )
|
|
|
+ const [err, res] = await to(api.deleteCustomer({ Id: parseInt(this.id) }))
|
|
|
if (err) return
|
|
|
if (res.code == 200) {
|
|
|
this.$message({
|
|
|
@@ -507,9 +449,12 @@
|
|
|
})
|
|
|
.catch(() => {})
|
|
|
},
|
|
|
- back() {
|
|
|
+ backToOpen() {
|
|
|
this.$router.push('/customer/openSea')
|
|
|
},
|
|
|
+ back() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
// 领取
|
|
|
handleReceive() {
|
|
|
this.$confirm('确认领取客户?', '提示', {
|
|
|
@@ -518,13 +463,21 @@
|
|
|
type: 'warning',
|
|
|
})
|
|
|
.then(async () => {
|
|
|
- const [err, res] = await to(api.receiveCustomer({ ids: this.id }))
|
|
|
+ const [err, res] = await to(
|
|
|
+ api.receiveCustomer({
|
|
|
+ ids: [parseInt(this.id)],
|
|
|
+ salesId: this.$store.state.user.id,
|
|
|
+ salesName: this.$store.state.user.username,
|
|
|
+ receive: '1',
|
|
|
+ })
|
|
|
+ )
|
|
|
if (err) return
|
|
|
if (res.code == 200) {
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: '领取成功!',
|
|
|
})
|
|
|
+ this.$router.push('/customer/list')
|
|
|
}
|
|
|
})
|
|
|
.catch(() => {})
|
|
|
@@ -599,7 +552,7 @@
|
|
|
::v-deep .my-label {
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
- color: #fff;
|
|
|
+ color: #1d66dc;
|
|
|
}
|
|
|
::v-deep .my-content {
|
|
|
font-size: 14px;
|
|
|
@@ -721,7 +674,7 @@
|
|
|
.comments {
|
|
|
padding-left: 60px;
|
|
|
margin-top: 10px;
|
|
|
- max-height: 200px;
|
|
|
+ max-height: 190px;
|
|
|
overflow: auto;
|
|
|
li {
|
|
|
display: flex;
|
|
|
@@ -781,6 +734,15 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .no-follow {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+ }
|
|
|
}
|
|
|
.height-enter-active,
|
|
|
.height-leave-active {
|
|
|
@@ -788,9 +750,15 @@
|
|
|
}
|
|
|
.height-enter-to,
|
|
|
.height-leave {
|
|
|
- height: 200px;
|
|
|
+ height: 190px;
|
|
|
}
|
|
|
.height-enter, .height-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
|
height: 0;
|
|
|
}
|
|
|
+ ::v-deep .el-descriptions__table tbody {
|
|
|
+ td,
|
|
|
+ th {
|
|
|
+ width: 25%;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|