<template> <div> <el-card class="box-card"> <div slot="header" class="clearfix"> <el-form size="small" :inline="true" label-width="100px"> <div class="search-z"> <el-form-item :label="$t('编号')" prop="number"> <el-input v-model.trim="followForm.number" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item :label="$t('报价单号')" prop="offerNumber"> <el-input v-model.trim="followForm.offerNumber" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item :label="$t('联系人')" prop="contactName"> <el-input v-model.trim="followForm.contactName" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item :label="$t('联系方式')" prop="contactPhone"> <el-input v-model.trim="followForm.contactPhone" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item :label="$t('客户经理')" prop="followUserIds"> <user-selector v-model="followForm.followUserIds" multiple clearable @input="handleQuery" /> </el-form-item> <el-form-item :label="$t('关联跟进记录')" prop="parentNumber"> <el-input v-model.trim="followForm.parentNumber" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item :label="$t('跟进类型')"> <dict-selector clearable :type="DICT_TYPE.CUSTOMER_FOLLOWUP_TYPE" v-model="followForm.followType" @input="handleQuery"></dict-selector> </el-form-item> <el-form-item :label="$t('跟进方式')"> <dict-selector clearable :type="DICT_TYPE.CUSTOMER_FOLLOWUP_METHOD" v-model="followForm.followMethod" @input="handleQuery"></dict-selector> </el-form-item> <el-form-item :label="$t('销售阶段')"> <dict-selector clearable :type="DICT_TYPE.CUSTOMER_FOLLOWUP_SALE_STAGE" v-model="followForm.saleStage" @input="handleQuery"></dict-selector> </el-form-item> <el-form-item :label="$t('跟进结果')"> <el-select clearable v-model="followForm.resultType" :placeholder="$t('请选择')" size="small" @change="handleQuery"> <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_FOLLOWUP_RESULT_TYPE)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value" /> </el-select> </el-form-item> <el-form-item :label="$t('跟进状态')"> <el-select clearable v-model="followForm.status" :placeholder="$t('请选择')" size="small" @change="handleQuery"> <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_FOLLOWUP_STATUS)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value" /> </el-select> </el-form-item> </div> <div class="search-time"> <el-form-item :label="$t('创建时间')"> <el-date-picker v-model="followFormTmp.createTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker> </el-form-item> <el-form-item :label="$t('下次跟进时间')"> <el-date-picker v-model="followFormTmp.nextTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker> </el-form-item> <el-form-item style="padding-left: 20px; width: auto"> <div class="flex-c-c"> <el-button type="primary" icon="el-icon-search" @click="getDataSpaceCustomerFollowupList">{{ $t("搜索") }} </el-button> <el-button type="primary" @click="reset">{{ $t("重置") }} </el-button> </div> </el-form-item> </div> </el-form> </div> <!-- 操作工具栏 --> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button :disabled="selectCustomerFollowList.length === 0" type="primary" @click="updateStatus = true" v-hasPermi="['ecw:customer:followup:batch-update-status']">{{ $t("修改状态") }}</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" @click="handleAdd" v-hasPermi="['ecw:customer:follow-create']">{{ $t("新增") }} </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" @click="handleExport" v-hasPermi="['ecw:customer:follow-export']"> {{ $t("导出") }} </el-button> </el-col> </el-row> <el-table ref="multipleTable" :data="customerFollowList" v-loading="loading" @selection-change="handleSelectionChange" style="width: 100%"> <el-table-column type="selection" width="55" fixed></el-table-column> <el-table-column prop="number" :label="$t('编号')" align="center" fixed> <template slot-scope="scope"> <a href="javascript:void(0)" @click="handleCustomerFollowLink(scope.row)" class="link-type">{{ scope.row.number }}</a> </template> </el-table-column> <el-table-column prop="followType" :label="$t('跟进类型')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_TYPE, cellValue)"></el-table-column> <el-table-column prop="offerNumber" :label="$t('报价单号')"> </el-table-column> <el-table-column prop="followTime" :label="$t('跟进时间')" :formatter="(row, column, cellValue) => parseTime(cellValue)"></el-table-column> <el-table-column prop="customerNumber" :label="$t('客户编号')"> <template slot-scope="scope"> <a href="javascript:void(0)" @click="handleCustomerViewLink(scope.row)" class="link-type">{{ scope.row.customerNumber }}</a> </template> </el-table-column> <el-table-column prop="contactName" :label="$t('联系人')"></el-table-column> <el-table-column prop="contactPhone" :label="$t('联系方式')"></el-table-column> <el-table-column prop="followUserName" :label="$t('客户经理')"></el-table-column> <el-table-column prop="followMethod" :label="$t('跟进方式')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_METHOD, cellValue)"></el-table-column> <el-table-column prop="purpose" :label="$t('目的')"></el-table-column> <el-table-column prop="feedback" :label="$t('跟进情况')"></el-table-column> <el-table-column prop="saleStage" :label="$t('销售阶段')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_SALE_STAGE, cellValue)"></el-table-column> <el-table-column prop="resultType" :label="$t('跟进结果')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_RESULT_TYPE, cellValue)"></el-table-column> <el-table-column :label="$t('下次跟进时间')" align="center"> <template slot-scope="scope"> {{ parseTime(scope.row.nextTime) }} </template> </el-table-column> <el-table-column :label="$t('关联跟进记录')" align="center" prop="parentNumber"></el-table-column> <el-table-column prop="nextPlan" :label="$t('下次计划')" align="center"></el-table-column> <el-table-column :label="$t('跟进状态')" align="center"> <template slot-scope="scope"> {{ getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_STATUS, scope.row.status) }} </template> </el-table-column> <el-table-column prop="creatorName" :label="$t('创建人')" align="center"></el-table-column> <el-table-column :label="$t('创建时间')" align="center"> <template slot-scope="scope"> {{ parseTime(scope.row.createTime) }} </template> </el-table-column> <el-table-column prop="updaterName" :label="$t('最后更新人')" align="center"></el-table-column> <el-table-column :label="$t('最后更新时间')" align="center"> <template slot-scope="scope"> {{ parseTime(scope.row.updateTime) }} </template> </el-table-column> <el-table-column width="150px" :label="$t('操作')" align="center" fixed="right" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" v-if="!scope.row.status" @click="handleCustomerFollow(scope.row)" v-hasPermi="['ecw:customer:follow-update']">{{ $t("编辑") }} </el-button> <el-button size="mini" type="text" icon="el-icon-collection" @click="handleCustomerFollow(scope.row, true)" v-has-permi="['ecw:customer:follow-add-plan']">{{ $t("增加计划") }} </el-button> </template> </el-table-column> </el-table> <pagination :total="customerFollowTotal" :page.sync="followForm.pageNo" :limit.sync="followForm.pageSize" @pagination="getDataSpaceCustomerFollowupList" /> </el-card> <customer-follow ref="customerFollow" @close="customerFollowVisible = false" @handleCustomerFollowAdd="handleCustomerFollowAdd" @refresh="handleQuery" v-if="customerFollowVisible" :customer-id="customerId" :customerService="customerService" :customerNumber="customerNumber" /> <customer-follow-update-status :show.sync="updateStatus" :followup-ids.sync="selectCustomerFollowList" @refresh="handleQuery"></customer-follow-update-status> </div> </template> <script> import { getCustomerFollowupList, getDataSpaceCustomerFollowupList, exportDataSpaceCustomerFollowup } from "@/api/ecw/customerFollow" import { getDictDatas, DICT_TYPE, getDictDatas2 } from "@/utils/dict" import CustomerFollow from "@/views/ecw/customer/components/customerFollow" import UserSelector from "@/components/UserSelector" import customerFollowUpdateStatus from "@/views/ecw/customer/components/customerFollowUpdateStatus.vue" export default { name: "logListCommon", components: { customerFollowUpdateStatus, UserSelector, CustomerFollow }, props: ["customerId", "offerId", "customerService", "customerNumber"], data() { return { // 遮罩层 loading: true, getDictDatas, getDictDatas2, DICT_TYPE, updateStatus: false, customerFollowVisible: false, customerFollowTotal: 0, customerFollowList: [], selectCustomerFollowList: [], followForm: { pageNo: 1, pageSize: 10 }, followFormTmp: { createTime: ["", ""], nextTime: ["", ""] } } }, created() { this.handleQuery() }, updated() { this.$nextTick(() => { this.$refs.multipleTable.doLayout() }) }, computed: { // selectAuthorityFn() { // return (val) => { // let t = val.split(":") // t[t.length - 1] = this.authorityFn + t[t.length - 1] // console.log(t.join(":")) // return t.join(":") // } // }, isChinese() { return this.$i18n.locale === "zh_CN" }, customerId_offerId() { return `${this.customerId}_${this.offerId}` } }, watch: { selectCustomerFollowList(val) { if (val.length === 0) { this.getDataSpaceCustomerFollowupList() this.$refs.multipleTable.clearSelection() } }, customerId_offerId() { this.handleQuery() } }, methods: { handleSelectionChange(val) { this.selectCustomerFollowList = val.map((i) => i.id) }, handleCustomerFollowAdd(row) { this.customerFollowVisible = false setTimeout(() => { this.customerFollowVisible = true this.$nextTick((_) => { this.$refs["customerFollow"].handleUpdate(row, true) }) }, 100) }, handleCustomerFollow(row, flag) { this.customerFollowVisible = true this.$nextTick((_) => { this.$refs["customerFollow"].handleUpdate(row, flag) }) }, handleAdd() { this.customerFollowVisible = true this.$nextTick(() => { this.$refs["customerFollow"].handleAdd() }) }, handleCustomerFollowLink(row) { this.customerFollowVisible = true this.$nextTick((_) => { this.$refs["customerFollow"].handleView(row) }) }, handleCustomerViewLink(row) { this.$router.push(`/customer/query/${row.customerId}`) }, formatQuery() { let obj = {} obj.customerId = this.customerId || null obj.offerId = this.offerId || null obj.beginCreateTime = this.followFormTmp.createTime[0] obj.endCreateTime = this.followFormTmp.createTime[1] obj.beginNextTime = this.followFormTmp.nextTime[0] obj.endNextTime = this.followFormTmp.nextTime[1] return obj }, handleQuery() { console.log(this.followForm) this.followForm.pageNo = 1 this.customerFollowTotal = 0 this.customerFollowList = [] this.getDataSpaceCustomerFollowupList() }, /** 跟进记录导出按钮操作 */ handleExport() { // 执行导出 this.$modal.confirm(this.$t("是否确认导出客户跟进记录数据项?")).then(() => { exportDataSpaceCustomerFollowup({ ...this.followForm, ...this.formatQuery(), pageNo: null, pageSize: null }).then((r) => { this.$message.success(this.$t("已加入导出队列,请稍后在下载日志中下载")) }) }) }, getDataSpaceCustomerFollowupList() { this.loading = true getDataSpaceCustomerFollowupList({ ...this.followForm, ...this.formatQuery() }).then((r) => { this.customerFollowList = r.data.list this.customerFollowTotal = r.data.total this.loading = false }) }, reset() { this.followFormTmp.createTime = ["", ""] this.followFormTmp.nextTime = ["", ""] this.followForm = { pageNo: 1, pageSize: 10 } this.getDataSpaceCustomerFollowupList() } } } </script>