|
|
@@ -1,9 +1,15 @@
|
|
|
<template>
|
|
|
<el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="close">
|
|
|
+ <el-steps :active="activeSteps" align-center style="margin: -15px 0 15px 0">
|
|
|
+ <el-step title="创建项目" />
|
|
|
+ <el-step title="添加产品" />
|
|
|
+ <el-step title="跟进日程" />
|
|
|
+ </el-steps>
|
|
|
+
|
|
|
<el-form ref="form" label-width="120px" :model="form" :rules="rules">
|
|
|
- <el-row :gutter="20">
|
|
|
+ <el-row v-if="activeSteps === 1" :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="项目标题" prop="nboName">
|
|
|
+ <el-form-item label="项目名称" prop="nboName">
|
|
|
<el-input v-model="form.nboName" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -13,13 +19,15 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="获取日期" prop="title">
|
|
|
- <el-date-picker v-model="form.value1" placeholder="选择日期" style="width: 100%" type="datetime" />
|
|
|
+ <el-form-item label="获取日期" prop="obtainTime">
|
|
|
+ <el-date-picker v-model="form.obtainTime" placeholder="选择日期" style="width: 100%" type="datetime" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="项目来源" prop="nboSource">
|
|
|
- <el-input v-model="form.nboSource" />
|
|
|
+ <el-select v-model="form.nboSource" clearable placeholder="项目来源" style="width: 100%">
|
|
|
+ <el-option v-for="dict in nboSourceOptions" :key="dict.key" :label="dict.value" :value="dict.key" />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
@@ -38,184 +46,283 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="负责人员" prop="makerName">
|
|
|
- <el-input v-model="form.makerName" />
|
|
|
+ <el-form-item label="销售工程师" prop="saleName">
|
|
|
+ <el-input v-model="form.saleName" readonly @focus="handleSelectSale" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="销售模式" prop="salesModel">
|
|
|
- <el-input v-model="form.salesModel" />
|
|
|
+ <el-select v-model="form.salesModel" clearable placeholder="销售模式" style="width: 100%">
|
|
|
+ <el-option v-for="dict in salesModelOptions" :key="dict.key" :label="dict.value" :value="dict.key" />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="经销商名称" prop="distributorName">
|
|
|
- <el-input v-model="form.distributorName" readonly @focus="handleSelectDistributor" />
|
|
|
+ <el-form-item label="经销商/代理商" prop="distributorName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.distributorName"
|
|
|
+ :disabled="form.salesModel === '10'"
|
|
|
+ readonly
|
|
|
+ @focus="handleSelectDistributor" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="经销商负责人" prop="title">
|
|
|
- <el-input v-model="form.title" />
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注信息" prop="remark">
|
|
|
+ <el-input v-model="form.remark" placeholder="请输入备注信息" rows="5" show-word-limit type="textarea" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row v-if="activeSteps === 2" :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-button size="mini" type="primary" @click="handleSelectProduct">添加产品</el-button>
|
|
|
+
|
|
|
+ <product-table
|
|
|
+ ref="productTable"
|
|
|
+ :product-data="productData"
|
|
|
+ @changeProductData="changeProductData"
|
|
|
+ @delProductData="delProductData" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row v-if="activeSteps === 3" :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="经销商联系方式" prop="title">
|
|
|
- <el-input v-model="form.title" />
|
|
|
+ <el-form-item label="跟进时间" prop="followTime">
|
|
|
+ <el-date-picker v-model="form.followTime" placeholder="选择时间" style="width: 100%" type="datetime" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="备注信息" prop="remark">
|
|
|
- <el-input v-model="form.remark" />
|
|
|
+ <el-form-item label="负责人员" prop="followUserName">
|
|
|
+ <el-input v-model="form.followUserName" readonly @focus="handleSelectFollowUser" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
- <!-- <el-row :gutter="20">-->
|
|
|
- <!-- <el-col :span="24">-->
|
|
|
- <!-- <div style="margin: -10px 0 10px 120px">-->
|
|
|
- <!-- <el-checkbox v-model="form.checked">创建跟进任务</el-checkbox>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </el-col>-->
|
|
|
- <!-- </el-row>-->
|
|
|
- <!-- <el-row :gutter="20">-->
|
|
|
- <!-- <el-col :span="12">-->
|
|
|
- <!-- <el-form-item label="开始时间" prop="title">-->
|
|
|
- <!-- <el-date-picker v-model="form.value1" placeholder="选择时间" style="width: 100%" type="datetime" />-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <!-- </el-col>-->
|
|
|
- <!-- <el-col :span="12">-->
|
|
|
- <!-- <el-form-item label="结束时间" prop="title">-->
|
|
|
- <!-- <el-date-picker v-model="form.value1" placeholder="选择时间" style="width: 100%" type="datetime" />-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <!-- </el-col>-->
|
|
|
- <!-- <el-col :span="12">-->
|
|
|
- <!-- <el-form-item label="负责人员" prop="title">-->
|
|
|
- <!-- <el-input v-model="form.title" />-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <!-- </el-col>-->
|
|
|
- <!-- <el-col :span="12">-->
|
|
|
- <!-- <el-form-item label="跟进内容" prop="followContent">-->
|
|
|
- <!-- <el-input v-model="form.followContent" />-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <!-- </el-col>-->
|
|
|
- <!-- <el-col :span="12">-->
|
|
|
- <!-- <el-form-item label="任务提醒" prop="title">-->
|
|
|
- <!-- <el-input v-model="form.title" />-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <!-- </el-col>-->
|
|
|
- <!-- <el-col :span="12">-->
|
|
|
- <!-- <el-form-item label="提醒方式" prop="title">-->
|
|
|
- <!-- <el-checkbox v-model="form.checked">系统消息</el-checkbox>-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <!-- </el-col>-->
|
|
|
- <!-- </el-row>-->
|
|
|
- <el-row :gutter="20">
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="产品(含版本)" prop="title">
|
|
|
- <el-button size="mini" type="primary" @click="handleSelectProduct">添加产品</el-button>
|
|
|
-
|
|
|
- <el-table>
|
|
|
- <el-table-column align="center" label="产品名称" prop="custCode" />
|
|
|
- <el-table-column align="center" label="产品类别" prop="custName" />
|
|
|
- <el-table-column align="center" label="单位" prop="abbrName" />
|
|
|
- <el-table-column align="center" label="价格" prop="custLocation" />
|
|
|
- <el-table-column align="center" label="数量" prop="custIndustry" />
|
|
|
- <el-table-column align="center" label="操作" width="80">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button type="text">删除{{ row }}</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <el-form-item label="跟进内容" prop="followContent">
|
|
|
+ <el-input
|
|
|
+ v-model="form.followContent"
|
|
|
+ placeholder="请输入跟进内容"
|
|
|
+ rows="5"
|
|
|
+ show-word-limit
|
|
|
+ type="textarea" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="save">提 交</el-button>
|
|
|
- <el-button @click="close">重 置</el-button>
|
|
|
+ <el-button v-if="activeSteps !== 1" type="primary" @click="activeSteps--">上一步</el-button>
|
|
|
+ <el-button v-if="activeSteps !== 3" type="primary" @click="nextStep">下一步</el-button>
|
|
|
+ <el-button v-if="activeSteps === 3" type="primary" @click="save">提 交</el-button>
|
|
|
</div>
|
|
|
<!-- 选择客户弹窗 -->
|
|
|
<select-customer ref="selectCustomer" @save="selectCustomer" />
|
|
|
- <!-- 选择客户弹窗 -->
|
|
|
- <select-contact ref="selectContact" :query-params="queryContact" @save="selectContact" />
|
|
|
+ <!-- 选择客户联系人弹窗 -->
|
|
|
+ <select-contact
|
|
|
+ ref="selectContact"
|
|
|
+ :default-customer="customerInfo"
|
|
|
+ :query-params="queryContact"
|
|
|
+ @save="selectContact" />
|
|
|
+ <!-- 选择销售工程师弹窗 -->
|
|
|
+ <select-user ref="selectSales" :query-params="{ roles: ['Sales', 'SalesManager'] }" @save="selectSales" />
|
|
|
<!-- 选择经销商弹窗 -->
|
|
|
<select-distributor ref="selectDistributor" @save="selectDistributor" />
|
|
|
<!-- 选择产品弹窗 -->
|
|
|
- <select-product ref="selectProduct" @save="selectProduct" />
|
|
|
+ <select-product ref="selectProduct" multiple @save="selectProduct" />
|
|
|
+ <!-- 选择跟进负责人弹窗 -->
|
|
|
+ <select-user ref="selectFollowUser" @save="selectFollowUser" />
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import businessApi from '@/api/proj/business'
|
|
|
+ import ProductTable from './ProductTable'
|
|
|
import SelectContact from '@/components/select/SelectContact'
|
|
|
import SelectCustomer from '@/components/select/SelectCustomer'
|
|
|
+ import SelectUser from '@/components/select/SelectUser'
|
|
|
import SelectDistributor from '@/components/select/SelectDistributor'
|
|
|
import SelectProduct from '@/components/select/SelectProduct'
|
|
|
|
|
|
export default {
|
|
|
name: 'BusinessEdit',
|
|
|
- components: { SelectContact, SelectProduct, SelectDistributor, SelectCustomer },
|
|
|
+ components: { ProductTable, SelectContact, SelectProduct, SelectDistributor, SelectCustomer, SelectUser },
|
|
|
data() {
|
|
|
+ const validateDistributor = (rule, value, callback) => {
|
|
|
+ if ('' === value && this.form.salesModel !== '10')
|
|
|
+ callback(new Error(this.translateTitle('请选择经销商/代理商')))
|
|
|
+ else callback()
|
|
|
+ }
|
|
|
return {
|
|
|
+ activeSteps: 1,
|
|
|
form: {
|
|
|
- title: '',
|
|
|
+ nboName: undefined,
|
|
|
custId: undefined,
|
|
|
custName: undefined,
|
|
|
+ obtainTime: undefined,
|
|
|
+ nboSource: undefined,
|
|
|
+ contactId: undefined,
|
|
|
contactName: undefined,
|
|
|
+ contactPostion: undefined,
|
|
|
+ contactTelephone: undefined,
|
|
|
+ saleId: undefined,
|
|
|
+ saleName: undefined,
|
|
|
+ distributorId: undefined,
|
|
|
distributorName: undefined,
|
|
|
+ remark: undefined,
|
|
|
+ products: undefined,
|
|
|
+
|
|
|
+ // 跟进
|
|
|
+ followTime: undefined,
|
|
|
+ followUserId: undefined,
|
|
|
+ followUserName: undefined,
|
|
|
+ followContent: undefined,
|
|
|
},
|
|
|
rules: {
|
|
|
- title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
|
|
|
+ nboName: [{ required: true, trigger: ['blur', 'change'], message: '请输入项目名称' }],
|
|
|
+ custName: [{ required: true, trigger: ['blur', 'change'], message: '请选择关联客户' }],
|
|
|
+ nboSource: [{ required: true, trigger: ['blur', 'change'], message: '请选择项目来源' }],
|
|
|
+ contactName: [{ required: true, trigger: ['blur', 'change'], message: '请选择主要联系人' }],
|
|
|
+ saleName: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售工程师' }],
|
|
|
+ salesModel: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售模式' }],
|
|
|
+ distributorName: [
|
|
|
+ { validator: validateDistributor, trigger: ['blur', 'change'], message: '请选择经销商/代理商' },
|
|
|
+ ],
|
|
|
+ // 跟进
|
|
|
+ followTime: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进时间' }],
|
|
|
+ followContent: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进内容' }],
|
|
|
},
|
|
|
title: '',
|
|
|
dialogFormVisible: false,
|
|
|
+ nboSourceOptions: [],
|
|
|
+ salesModelOptions: [],
|
|
|
queryContact: {},
|
|
|
+ customerInfo: {},
|
|
|
+ productData: [],
|
|
|
}
|
|
|
},
|
|
|
created() {},
|
|
|
+ mounted() {
|
|
|
+ this.getDicts('proj_nbo_source').then((response) => {
|
|
|
+ this.nboSourceOptions = response.data.values || []
|
|
|
+ })
|
|
|
+ this.getDicts('proj_sales_model').then((response) => {
|
|
|
+ this.salesModelOptions = response.data.values || []
|
|
|
+ })
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ nextStep() {
|
|
|
+ if (this.activeSteps === 1) {
|
|
|
+ this.$refs['form'].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.activeSteps++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.activeSteps === 2) {
|
|
|
+ this.form.products = this.productData
|
|
|
+ this.activeSteps++
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
handleSelectCustomer() {
|
|
|
this.$refs.selectCustomer.open()
|
|
|
},
|
|
|
handleSelectContact() {
|
|
|
if (!this.queryContact.custId) {
|
|
|
- this.$message.warning('请选择联系人')
|
|
|
+ this.$message.warning('请先选择客户')
|
|
|
+ return
|
|
|
}
|
|
|
this.$refs.selectContact.open()
|
|
|
},
|
|
|
+ handleSelectSale() {
|
|
|
+ this.$refs.selectSales.open()
|
|
|
+ },
|
|
|
handleSelectDistributor() {
|
|
|
this.$refs.selectDistributor.open()
|
|
|
},
|
|
|
handleSelectProduct() {
|
|
|
this.$refs.selectProduct.open()
|
|
|
},
|
|
|
+ handleSelectFollowUser() {
|
|
|
+ this.$refs.selectFollowUser.open()
|
|
|
+ },
|
|
|
selectCustomer(val) {
|
|
|
if (val && val.length > 0) {
|
|
|
this.queryContact.custId = val[0].id
|
|
|
+ this.customerInfo = {
|
|
|
+ custId: val[0].id,
|
|
|
+ custName: val[0].custName,
|
|
|
+ }
|
|
|
+ this.form.custId = val[0].id
|
|
|
+ this.form.custName = val.map((item) => item.custName).join()
|
|
|
}
|
|
|
- this.form.custName = val.map((item) => item.custName).join()
|
|
|
- console.log(this.form.custName)
|
|
|
- console.log(val)
|
|
|
},
|
|
|
selectContact(val) {
|
|
|
- this.form.contactName = val.map((item) => item.cuctName).join()
|
|
|
- console.log(this.form.contactName)
|
|
|
-
|
|
|
- console.log(val)
|
|
|
+ if (val && val.length > 0) {
|
|
|
+ this.form.contactId = val[0].id
|
|
|
+ this.form.contactName = val.map((item) => item.cuctName).join()
|
|
|
+ this.form.contactPostion = val.map((item) => item.postion).join()
|
|
|
+ this.form.contactTelephone = val.map((item) => item.telephone).join()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectSales(val) {
|
|
|
+ if (val && val.length > 0) {
|
|
|
+ this.form.saleId = val[0].id
|
|
|
+ this.form.saleName = val.map((item) => item.userName).join()
|
|
|
+ }
|
|
|
},
|
|
|
selectDistributor(val) {
|
|
|
- this.form.distributorName = val.map((item) => item.distName).join()
|
|
|
- console.log(this.form.distributorName)
|
|
|
-
|
|
|
- console.log(val)
|
|
|
+ if (val && val.length > 0) {
|
|
|
+ this.form.distributorId = val[0].id
|
|
|
+ this.form.distributorName = val.map((item) => item.distName).join()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectFollowUser(val) {
|
|
|
+ this.form.followUserName = val.map((item) => item.userName).join()
|
|
|
+ },
|
|
|
+ selectProduct(data) {
|
|
|
+ console.log(data)
|
|
|
+ let projData = data.map((item) => ({
|
|
|
+ prodId: item.id,
|
|
|
+ prodCode: item.prodCode,
|
|
|
+ prodName: item.prodName,
|
|
|
+ prodClass: item.prodClass,
|
|
|
+ prodPrice: item.guidPrice,
|
|
|
+ prodNum: 1,
|
|
|
+ }))
|
|
|
+ this.productData.push(...projData)
|
|
|
+ this.productData = this.removeDuplicateObj(this.productData)
|
|
|
+ },
|
|
|
+ // 数组对象去重
|
|
|
+ removeDuplicateObj(arr) {
|
|
|
+ let obj = {}
|
|
|
+ arr = arr.reduce((newArr, next) => {
|
|
|
+ obj[next.prodId] ? '' : (obj[next.prodId] = true && newArr.push(next))
|
|
|
+ return newArr
|
|
|
+ }, [])
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ // 修改产品列表数据
|
|
|
+ changeProductData(data) {
|
|
|
+ this.productData = this.productData.map((item) => {
|
|
|
+ return item.prodId === data.prodId ? data : item
|
|
|
+ })
|
|
|
+ },
|
|
|
+ delProductData(data) {
|
|
|
+ this.productData = this.productData.filter((item) => item.prodId !== data.prodId)
|
|
|
},
|
|
|
- selectProduct(val) {
|
|
|
- console.log(val)
|
|
|
+ async getProductData(busId) {
|
|
|
+ const { data } = await businessApi.getProductByBusinessId({ id: busId })
|
|
|
+ this.productData = data
|
|
|
},
|
|
|
showEdit(row) {
|
|
|
+ this.activeSteps = 1
|
|
|
if (!row) {
|
|
|
this.title = '添加'
|
|
|
} else {
|
|
|
this.title = '编辑'
|
|
|
this.form = Object.assign({}, row)
|
|
|
+ this.getProductData(row.id)
|
|
|
}
|
|
|
this.dialogFormVisible = true
|
|
|
},
|
|
|
@@ -227,7 +334,7 @@
|
|
|
save() {
|
|
|
this.$refs['form'].validate(async (valid) => {
|
|
|
if (valid) {
|
|
|
- const { msg } = await businessApi.doEdit(this.form)
|
|
|
+ const { msg } = await businessApi.doAdd(this.form)
|
|
|
this.$baseMessage(msg, 'success')
|
|
|
this.$emit('fetch-data')
|
|
|
this.close()
|