Commit 065a8043 authored by Marcus's avatar Marcus

封装客户跟进组件

parent 44f52bab
<template>
<div>
<el-table
:data="customerFollowList"
style="width: 100%"
>
<el-table-column
prop=""
label="#"
>
</el-table-column>
<el-table-column
prop="followType"
label="跟进类型"
>
</el-table-column>
<el-table-column
prop="contactName"
label="联系人"
>
</el-table-column>
<el-table-column
prop="followMethod"
label="跟进方式"
>
</el-table-column>
<el-table-column
prop="followTime"
label="跟进时间"
>
</el-table-column>
<el-table-column
prop="feedback"
label="客户反馈"
>
</el-table-column>
<el-table-column
prop="result"
label="处理结果"
>
</el-table-column>
<el-table-column
prop="followUserId"
label="跟进业务"
>
</el-table-column>
</el-table>
<el-dialog
title="客户跟进"
:visible.sync="customerFollow.dialogVisible"
:close-on-click-modal="false"
width="680px">
<el-form ref="customerFollowForm" :model="customerFollow.form" label-width="80px">
<el-row :gutter="10">
<el-col>
<el-form-item label="跟进类型" required>
<dict-selector form-type="radio" v-model="customerFollow.form.followType" :type="DICT_TYPE.CUSTOMER_FOLLOW_TYPE"></dict-selector>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="跟进时间" required>
<el-date-picker v-model="customerFollow.form.followTime" type="datetime" placeholder="选择跟进时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人" required>
<el-select v-model="customerFollow.form.contactName" placeholder="请选择">
<el-option
v-for="(item, index) in customerContactsList"
:key="index"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="跟进业务" required>
<el-select v-model="customerFollow.form.followUserId" placeholder="请选择">
<el-option
v-for="item in serviceUserList"
:key="item.id"
:label="item.nickname"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="跟进方式" required>
<dict-selector v-model="customerFollow.form.followMethod" :type="DICT_TYPE.CUSTOMER_FOLLOW_METHOD"></dict-selector>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="客户反馈" required>
<el-input type="textarea" v-model="customerFollow.form.feedback"></el-input>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="处理结果" required>
<el-input type="textarea" v-model="customerFollow.form.result"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="customerFollow.dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="customerFollowSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {createCustomerFollow, getCustomerFollowPage} from "@/api/ecw/customerFollow"
import { DICT_TYPE, getDictDataLabel } from '@/utils/dict'
import {getCustomerContactsList} from "@/api/ecw/customerContacts"
import {listServiceUser} from "@/api/system/user"
export default {
/**
* 客户跟进
* 客户投诉跟进
*/
name: "CustomerFollow",
props: {
customerId: String
},
data() {
return {
DICT_TYPE,
customerFollowList: [],
serviceUserList: [],
customerContactsList: [],
customerFollow: {
dialogVisible: false,
form: {}
},
}
},
created() {
this.resetCustomerFollowForm()
getCustomerContactsList().then(r => {
// todo 接口不对,临时用page
this.customerContactsList = r.data.list
})
listServiceUser().then(r => {
this.serviceUserList = r.data
})
this.getCustomerFollowList()
},
methods: {
customerFollowSubmit() {
this.$refs["customerFollowForm"].validate(valid => {
if (!valid) {
return
}
createCustomerFollow(this.customerFollow.form).then(r => {
this.resetCustomerFollowForm()
this.getCustomerFollowList()
this.customerFollow.dialogVisible = false
})
})
},
resetCustomerFollowForm() {
this.customerFollow.form = {
"bizId": this.customerId,
"contactName": undefined,
"feedback": undefined,
"followMethod": undefined,
"followTime": undefined,
"followType": undefined,
"followUserId": undefined,
"result": undefined
}
},
getCustomerFollowList() {
getCustomerFollowPage({bizId: this.customerId}).then(r => {
this.customerFollowList = r.data.list
})
}
}
}
</script>
<style scoped>
</style>
......@@ -8,7 +8,7 @@
<el-button type="primary" size="small">添加优惠</el-button>
<el-button type="primary" size="small" @click="$router.push('/customer/edit/' + customerId)">编辑</el-button>
<el-button type="primary" size="small">报价</el-button>
<el-button type="primary" size="small" @click="customerFollow.dialogVisible = true">跟进</el-button>
<el-button type="primary" size="small" @click="$refs['customerFollow'].customerFollow.dialogVisible = true">跟进</el-button>
<el-button type="primary" size="small" @click="$refs['customerComplaint'].handleAdd()">客诉</el-button>
<el-button type="danger" size="small">删除</el-button>
</div>
......@@ -144,51 +144,7 @@
</el-table>
</el-tab-pane>
<el-tab-pane label="跟进">
<el-table
:data="customerFollowList"
style="width: 100%"
>
<el-table-column
prop=""
label="#"
>
</el-table-column>
<el-table-column
prop="followType"
label="跟进类型"
>
</el-table-column>
<el-table-column
prop="contactName"
label="联系人"
>
</el-table-column>
<el-table-column
prop="followMethod"
label="跟进方式"
>
</el-table-column>
<el-table-column
prop="followTime"
label="跟进时间"
>
</el-table-column>
<el-table-column
prop="feedback"
label="客户反馈"
>
</el-table-column>
<el-table-column
prop="result"
label="处理结果"
>
</el-table-column>
<el-table-column
prop="followUserId"
label="跟进业务"
>
</el-table-column>
</el-table>
<customer-follow ref="customerFollow" :customer-id="customerId"></customer-follow>
</el-tab-pane>
<el-tab-pane label="客户投诉">
<customer-complaint ref="customerComplaint" :customer-id="customerId" hidden-search></customer-complaint>
......@@ -212,70 +168,6 @@
</el-col>
</el-row>
<el-dialog
title="客户跟进"
:visible.sync="customerFollow.dialogVisible"
:close-on-click-modal="false"
width="680px">
<el-form ref="customerFollowForm" :model="customerFollow.form" label-width="80px">
<el-row :gutter="10">
<el-col>
<el-form-item label="跟进类型" required>
<dict-selector form-type="radio" v-model="customerFollow.form.followType" :type="DICT_TYPE.CUSTOMER_FOLLOW_TYPE"></dict-selector>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="跟进时间" required>
<el-date-picker v-model="customerFollow.form.followTime" type="datetime" placeholder="选择跟进时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人" required>
<el-select v-model="customerFollow.form.contactName" placeholder="请选择">
<el-option
v-for="item in customerContactsList"
:key="item.name"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="跟进业务" required>
<el-select v-model="customerFollow.form.followUserId" placeholder="请选择">
<el-option
v-for="item in serviceUserList"
:key="item.id"
:label="item.nickname"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="跟进方式" required>
<dict-selector v-model="customerFollow.form.followMethod" :type="DICT_TYPE.CUSTOMER_FOLLOW_METHOD"></dict-selector>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="客户反馈" required>
<el-input type="textarea" v-model="customerFollow.form.feedback"></el-input>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="处理结果" required>
<el-input type="textarea" v-model="customerFollow.form.result"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="customerFollow.dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="customerFollowSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -285,10 +177,8 @@ import { DICT_TYPE, getDictDataLabel } from '@/utils/dict'
import { getProductTypeList } from '@/api/ecw/productType'
import { getNodeList } from '@/api/ecw/node'
import DictSelector from "@/components/DictSelector"
import {getCustomerContactsList} from "@/api/ecw/customerContacts"
import {listServiceUser} from "@/api/system/user"
import {createCustomerFollow, getCustomerFollowPage} from "@/api/ecw/customerFollow"
import CustomerComplaint from "../customerComplaint"
import CustomerFollow from "../../../components/CustomerFollow"
export default {
name: 'query',
......@@ -297,6 +187,7 @@ export default {
},
components: {
DictSelector,
CustomerFollow,
CustomerComplaint
},
created() {
......@@ -310,15 +201,6 @@ export default {
this.productTypeList = r.data
})
this.resetCustomerFollowForm()
getCustomerContactsList().then(r => {
// todo 接口不对,分页了
this.customerContactsList = r.data.list
})
listServiceUser().then(r => {
this.serviceUserList = r.data
})
this.getCustomerFollowList()
},
data() {
return {
......@@ -326,9 +208,6 @@ export default {
getDictDataLabel,
nodeList: [],
productTypeList: [],
customerContactsList: [],
serviceUserList: [],
customerFollowList: [],
customer: {
id: undefined,
number: undefined,
......@@ -367,45 +246,6 @@ export default {
weightUnit: undefined,
createTime: undefined
},
customerFollow: {
dialogVisible: false,
form: {}
},
}
},
methods: {
customerFollowSubmit() {
this.$refs["customerFollowForm"].validate(valid => {
if (!valid) {
return
}
createCustomerFollow(this.customerFollow.form).then(r => {
this.resetCustomerFollowForm()
this.getCustomerFollowList()
this.customerFollow.dialogVisible = false
})
})
},
resetCustomerFollowForm() {
this.customerFollow.form = {
"bizId": this.customerId,
"contactName": undefined,
"feedback": undefined,
"followMethod": undefined,
"followTime": undefined,
"followType": undefined,
"followUserId": undefined,
"result": undefined
}
},
getCustomerFollowList() {
getCustomerFollowPage({bizId: this.customerId}).then(r => {
this.customerFollowList = r.data.list
})
}
},
computed: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment