|
|
@@ -1,10 +1,24 @@
|
|
|
+<!--
|
|
|
+ * @Author: liuzhenlin 461480418@qq.ocm
|
|
|
+ * @Date: 2023-01-09 15:49:34
|
|
|
+ * @LastEditors: liuzhenlin
|
|
|
+ * @LastEditTime: 2023-01-11 16:05:02
|
|
|
+ * @Description: file content
|
|
|
+ * @FilePath: \订单全流程管理系统\src\views\contract\components\Edit.vue
|
|
|
+-->
|
|
|
<template>
|
|
|
- <el-dialog :title="title" :visible.sync="editVisible" @close="handleClose">
|
|
|
- <el-form ref="editForm" :model="editForm" :rules="editRules">
|
|
|
+ <el-dialog class="edit-container" :title="title" top="5vh" :visible.sync="editVisible" @close="handleClose">
|
|
|
+ <div class="setp-wrap">
|
|
|
+ <el-steps :active="stepActive" :align-center="true" finish-status="success">
|
|
|
+ <el-step title="基础信息" />
|
|
|
+ <el-step title="产品列表" />
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ <el-form v-show="stepActive == 0" ref="editForm" :model="editForm" :rules="editRules">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="合同编号" prop="contractCode">
|
|
|
- <el-input v-model="editForm.contractCode" placeholder="请输入合同编号" />
|
|
|
+ <el-input v-model="editForm.contractCode" disabled placeholder="根据编号规则自动生产" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
@@ -16,10 +30,11 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="关联项目" prop="nboName">
|
|
|
- <el-input
|
|
|
- ref="businessInput"
|
|
|
+ <el-select
|
|
|
v-model="editForm.nboName"
|
|
|
placeholder="请选择关联项目"
|
|
|
+ readonly
|
|
|
+ style="width: 100%"
|
|
|
@focus="openProject" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -55,33 +70,35 @@
|
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="负责人" prop="inchargeId">
|
|
|
+ <el-form-item label="销售工程师" prop="inchargeName">
|
|
|
<el-select
|
|
|
- v-model="editForm.inchargeId"
|
|
|
- placeholder="请选择负责人"
|
|
|
+ v-model="editForm.inchargeName"
|
|
|
+ placeholder="请选择销售工程师"
|
|
|
+ readonly
|
|
|
style="width: 100%"
|
|
|
- @change="changeIncharge">
|
|
|
- <el-option v-for="item in usersList" :key="item.id" :label="item.userName" :value="item.id" />
|
|
|
- </el-select>
|
|
|
+ @focus="openUser(false, 'inchargeId', 'inchargeName')" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="公司签约人" prop="signatoryName">
|
|
|
- <el-input
|
|
|
- ref="userInput"
|
|
|
+ <el-select
|
|
|
+ ref="signatoryName"
|
|
|
v-model="editForm.signatoryName"
|
|
|
placeholder="请选择公司签约人"
|
|
|
- @focus="openUser" />
|
|
|
+ readonly
|
|
|
+ style="width: 100%"
|
|
|
+ @focus="openUser(false, 'signatoryId', 'signatoryName')" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="经销商" prop="distributorName">
|
|
|
- <el-input
|
|
|
- ref="distributorInput"
|
|
|
+ <el-select
|
|
|
v-model="editForm.distributorName"
|
|
|
placeholder="请选择经销商"
|
|
|
+ readonly
|
|
|
+ style="width: 100%"
|
|
|
@focus="openDistributor" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -94,15 +111,26 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="24">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="客户签约人" prop="custSignatoryName">
|
|
|
+ <el-select
|
|
|
+ v-model="editForm.custSignatoryName"
|
|
|
+ :disabled="!businessUserQueryParams.busId"
|
|
|
+ placeholder="请选择客户签约人"
|
|
|
+ readonly
|
|
|
+ style="width: 100%"
|
|
|
+ @focus="openContact" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
- <el-input v-model="editForm.remark" placeholder="请输入备注" :rows="5" type="textarea" />
|
|
|
+ <el-input v-model="editForm.remark" placeholder="请输入备注" :rows="4" type="textarea" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
<!-- 产品分类 -->
|
|
|
- <el-row>
|
|
|
+ <el-row v-show="stepActive == 1">
|
|
|
<el-row class="mb10" :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<p>产品：</p>
|
|
|
@@ -123,18 +151,26 @@
|
|
|
</el-row>
|
|
|
|
|
|
<span slot="footer">
|
|
|
- <el-button v-show="!editForm.id" type="primary" @click="contractSave">保存</el-button>
|
|
|
- <el-button v-show="editForm.id" type="primary" @click="contractEdit">保存</el-button>
|
|
|
+ <el-button v-show="stepActive == 0" type="primary" @click="setStep(1)">下一步</el-button>
|
|
|
+ <el-button v-show="stepActive == 1" type="primary" @click="setStep(0)">上一步</el-button>
|
|
|
+ <el-button v-show="!editForm.id && stepActive == 1" type="primary" @click="contractSave">保存</el-button>
|
|
|
+ <el-button v-show="editForm.id && stepActive == 1" type="primary" @click="contractEdit">保存</el-button>
|
|
|
<el-button @click="editVisible = false">取消</el-button>
|
|
|
</span>
|
|
|
<!-- 选择项目 -->
|
|
|
<select-business ref="project" :multiple="false" @save="getBusinessInfo" />
|
|
|
<!-- 选择经销商 -->
|
|
|
<select-distributor ref="distributor" :multiple="false" @save="getDistributor" />
|
|
|
- <!-- 选择公司签约人 -->
|
|
|
- <select-user ref="user" :multiple="false" @save="getUser" />
|
|
|
+ <!-- 选择用户 -->
|
|
|
+ <select-user ref="user" :label="label" :multiple="multiple" :property="property" @save="getUser" />
|
|
|
<!-- 选择产品 -->
|
|
|
<select-product ref="product" :multiple="true" @save="getProduct" />
|
|
|
+ <!-- 选择联系人 -->
|
|
|
+ <select-business-contact
|
|
|
+ ref="contact"
|
|
|
+ :multiple="false"
|
|
|
+ :query-params="businessUserQueryParams"
|
|
|
+ @save="getContact" />
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
@@ -148,6 +184,7 @@
|
|
|
import SelectDistributor from '@/components/select/SelectDistributor'
|
|
|
import SelectUser from '@/components/select/SelectUser'
|
|
|
import SelectProduct from '@/components/select/SelectProduct'
|
|
|
+ import SelectBusinessContact from '@/components/select/SelectBusinessContact'
|
|
|
export default {
|
|
|
components: {
|
|
|
ProductTable,
|
|
|
@@ -155,15 +192,11 @@
|
|
|
SelectDistributor,
|
|
|
SelectUser,
|
|
|
SelectProduct,
|
|
|
- },
|
|
|
- props: {
|
|
|
- usersList: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
+ SelectBusinessContact,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ stepActive: 0, //步骤
|
|
|
title: '新增客户信息',
|
|
|
editVisible: false,
|
|
|
editForm: {
|
|
|
@@ -173,18 +206,19 @@
|
|
|
nboId: null, //项目id
|
|
|
nboName: '', //项目名称
|
|
|
custName: '', // 客户名称
|
|
|
- inchargeId: null, //负责人
|
|
|
- inchargeName: '', //负责人姓名
|
|
|
+ inchargeId: null, //销售工程师
|
|
|
+ inchargeName: '', //销售工程师姓名
|
|
|
contractStartTime: '', //合同开始时间
|
|
|
contractEndTime: '', //合同结束时间
|
|
|
signatoryName: '', //公司签约人
|
|
|
signatoryId: null, //公司签约人id
|
|
|
distributorId: null, //经销商id
|
|
|
distributorName: '', //经销商name
|
|
|
+ custSignatoryId: null, //客户签约人id
|
|
|
+ custSignatoryName: '', //客户签约人name
|
|
|
remark: '', //备注
|
|
|
},
|
|
|
editRules: {
|
|
|
- contractCode: [{ required: true, trigger: 'blur', message: '请输入合同编号' }],
|
|
|
contractName: [{ required: true, trigger: 'blur', message: '请输入合同名称' }],
|
|
|
contractType: [{ required: true, trigger: 'change', message: '请选择合同类型' }],
|
|
|
nboName: [{ required: true, trigger: 'change', message: '请选择关联项目' }],
|
|
|
@@ -194,7 +228,7 @@
|
|
|
contractEndTime: [
|
|
|
{ required: true, trigger: 'change', validator: this.pickerOptionsEnd, message: '请选择结束时间' },
|
|
|
],
|
|
|
- inchargeId: [{ required: true, trigger: 'change', message: '请选择负责人' }],
|
|
|
+ inchargeId: [{ required: true, trigger: 'change', message: '请选择销售工程师' }],
|
|
|
signatoryName: [{ required: true, trigger: 'change', message: '请选择公司签约人' }],
|
|
|
distributorName: [{ required: true, trigger: 'change', message: '请选择经销商' }],
|
|
|
},
|
|
|
@@ -216,11 +250,16 @@
|
|
|
},
|
|
|
contractOptions: [], //合同类型
|
|
|
productData: [],
|
|
|
+ multiple: false,
|
|
|
+ property: '',
|
|
|
+ label: '',
|
|
|
+ businessUserQueryParams: {}, //查询客户签约人参数
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters({
|
|
|
userId: 'user/id',
|
|
|
+ username: 'user/username',
|
|
|
}),
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -231,15 +270,18 @@
|
|
|
Promise.all([this.getDicts('contract_type')])
|
|
|
.then(([contract]) => {
|
|
|
this.contractOptions = contract.data.values || []
|
|
|
- // 设置负责人默认为当前用户
|
|
|
- this.editForm.inchargeId = this.userId
|
|
|
- this.editForm.inchargeName = this.usersList.filter((item) => item.id == this.userId)[0]['userName']
|
|
|
})
|
|
|
.catch((err) => console.log(err))
|
|
|
},
|
|
|
async init(id) {
|
|
|
if (!id) {
|
|
|
this.title = '新增合同信息'
|
|
|
+ // 设置销售工程师默认为当前用户
|
|
|
+ this.editForm.inchargeId = this.userId
|
|
|
+ this.editForm.inchargeName = this.username
|
|
|
+ this.editForm.signatoryId = this.userId
|
|
|
+ this.editForm.signatoryName = this.username
|
|
|
+ console.log(this.editForm.signatoryName)
|
|
|
} else {
|
|
|
this.title = '编辑合同'
|
|
|
const [err, res] = await to(contractApi.getDetails({ id }))
|
|
|
@@ -248,6 +290,7 @@
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
let { product, ...data } = res.data
|
|
|
this.editForm = data
|
|
|
+ this.businessUserQueryParams = { busId: data.nboId, custId: data.custId }
|
|
|
this.productData =
|
|
|
product.length > 0
|
|
|
? product.map((item) => ({
|
|
|
@@ -263,14 +306,17 @@
|
|
|
}
|
|
|
this.editVisible = true
|
|
|
},
|
|
|
- // 修改责任人
|
|
|
- changeIncharge(selectedId) {
|
|
|
- this.editForm.inchargeName = this.usersList.filter((item) => item.id == selectedId)[0]['userName']
|
|
|
+ // 修改步骤
|
|
|
+ async setStep(step) {
|
|
|
+ if (step == 1) {
|
|
|
+ const [valid] = await to(this.$refs.editForm.validate())
|
|
|
+ if (valid == false) return
|
|
|
+ }
|
|
|
+ this.stepActive = step
|
|
|
},
|
|
|
// 打开选择项目
|
|
|
openProject() {
|
|
|
this.$refs.project.open()
|
|
|
- this.$refs.businessInput.blur()
|
|
|
},
|
|
|
// 关闭选择项目获取项目信息
|
|
|
getBusinessInfo(data) {
|
|
|
@@ -279,13 +325,16 @@
|
|
|
this.editForm.custName = business.custName
|
|
|
this.editForm.nboId = business.id
|
|
|
this.editForm.nboName = business.nboName
|
|
|
+ this.editForm.custSignatoryId = business.contactId
|
|
|
+ this.editForm.custSignatoryName = business.contactName
|
|
|
+ this.businessUserQueryParams = { busId: business.id, custId: business.custId }
|
|
|
+ console.log('项目信息', data)
|
|
|
// 获取产品信息
|
|
|
this.getProjectInfo(business.id)
|
|
|
},
|
|
|
// 打开选择经销商
|
|
|
openDistributor() {
|
|
|
this.$refs.distributor.open()
|
|
|
- this.$refs.distributorInput.blur()
|
|
|
},
|
|
|
// 关闭经销商获取经销商信息
|
|
|
getDistributor(data) {
|
|
|
@@ -295,16 +344,40 @@
|
|
|
this.editForm.distributorId = distributor.id
|
|
|
},
|
|
|
// 打开选择公司签约人
|
|
|
- openUser() {
|
|
|
+ openUser(multiple, property, label) {
|
|
|
+ this.multiple = multiple
|
|
|
+ this.property = property
|
|
|
+ this.label = label
|
|
|
+ if (this.editForm[property].length) {
|
|
|
+ this.$refs.user.ids = this.editForm[property]
|
|
|
+ } else if (this.editForm[property]) {
|
|
|
+ this.$refs.user.ids = [this.editForm[property]]
|
|
|
+ } else {
|
|
|
+ this.$refs.user.ids = []
|
|
|
+ }
|
|
|
this.$refs.user.open()
|
|
|
- this.$refs.userInput.blur()
|
|
|
},
|
|
|
// 获取签约人信息
|
|
|
- getUser(data) {
|
|
|
+ getUser(userList, property, label) {
|
|
|
+ console.log(userList, property, label)
|
|
|
+ this.editForm[label] = userList.map((item) => item.nickName).join()
|
|
|
+ if (this.multiple) {
|
|
|
+ this.editForm[property] = userList.map((item) => item.id)
|
|
|
+ } else {
|
|
|
+ this.editForm[property] = userList[0] ? userList[0].id : ''
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ // 打开选择公司签约人
|
|
|
+ openContact() {
|
|
|
+ this.$refs.contact.open()
|
|
|
+ },
|
|
|
+ // 获取签约人信息
|
|
|
+ getContact(data) {
|
|
|
let user = data[0] || null
|
|
|
if (!user) return
|
|
|
- this.editForm.signatoryName = user.userName
|
|
|
- this.editForm.signatoryId = user.id
|
|
|
+ this.editForm['custSignatoryName'] = user.userName
|
|
|
+ this.editForm['custSignatoryId'] = user.id
|
|
|
},
|
|
|
// 获取产品信息
|
|
|
getProduct(data) {
|
|
|
@@ -312,19 +385,20 @@
|
|
|
if (data.length > 0) this.setProductData(data)
|
|
|
},
|
|
|
// 根据项目id获取产品信息
|
|
|
- getProjectInfo(id) {
|
|
|
+ async getProjectInfo(id) {
|
|
|
let params = { id }
|
|
|
- businessApi.getProductByBusinessId(params).then((res) => {
|
|
|
- if (res.data && res.data.length > 0) this.setProductData(res.data)
|
|
|
- })
|
|
|
+ const [err, res] = await to(businessApi.getProductByBusinessId(params))
|
|
|
+ console.log(res)
|
|
|
+ if (err) return
|
|
|
+ if (res.data && res.data.length > 0) this.setProductData(res.data)
|
|
|
},
|
|
|
setProductData(data) {
|
|
|
let projData = data.map((item) => ({
|
|
|
- id: item.id,
|
|
|
+ id: item.prodId ? item.prodId : item.id,
|
|
|
prodName: item.prodName,
|
|
|
prodClass: item.prodClass,
|
|
|
guidPrice: item.guidPrice,
|
|
|
- price: item.guidPrice,
|
|
|
+ price: item.prodPrice ? item.prodPrice : item.guidPrice,
|
|
|
count: 1,
|
|
|
}))
|
|
|
this.productData.push(...projData)
|
|
|
@@ -359,8 +433,6 @@
|
|
|
remark: '',
|
|
|
}))
|
|
|
let params = Object.assign({ ...this.editForm }, { product })
|
|
|
- const [valid] = await to(this.$refs.editForm.validate())
|
|
|
- if (valid == false) return
|
|
|
if (product.length == 0) return this.$message.warning('请选择产品信息')
|
|
|
const [err, res] = await to(contractApi.addContract(params))
|
|
|
if (err) return
|
|
|
@@ -380,8 +452,6 @@
|
|
|
remark: '',
|
|
|
}))
|
|
|
let params = Object.assign({ ...this.editForm }, { product })
|
|
|
- const [valid] = await to(this.$refs.editForm.validate())
|
|
|
- if (valid == false) return
|
|
|
if (product.length == 0) return this.$message.warning('请选择产品信息')
|
|
|
const [err, res] = await to(contractApi.updateContract(params))
|
|
|
if (err) return
|
|
|
@@ -398,8 +468,8 @@
|
|
|
nboId: null, //项目id
|
|
|
nboName: '', //项目名称
|
|
|
custName: '', // 客户名称
|
|
|
- inchargeId: null, //负责人
|
|
|
- inchargeName: '', //负责人名称
|
|
|
+ inchargeId: null, //销售工程师
|
|
|
+ inchargeName: '', //销售工程师名称
|
|
|
contractStartTime: '', //合同开始时间
|
|
|
contractEndTime: '', //合同结束时间
|
|
|
signatoryName: '', //公司签约人
|
|
|
@@ -409,6 +479,8 @@
|
|
|
remark: '', //备注
|
|
|
}
|
|
|
this.productData = []
|
|
|
+ this.stepActive = 0
|
|
|
+ this.businessUserQueryParams = {}
|
|
|
this.$refs.editForm.resetFields()
|
|
|
},
|
|
|
delcommafy(num) {
|
|
|
@@ -423,10 +495,31 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .mb10 {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .proj-col {
|
|
|
- text-align: right;
|
|
|
+ $base: '.edit-container';
|
|
|
+ #{$base} {
|
|
|
+ .mb10 {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .proj-col {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ // 进度条样式
|
|
|
+ // ::v-deep .el-steps {
|
|
|
+ // .el-step__line {
|
|
|
+ // top: 17px;
|
|
|
+ // }
|
|
|
+ // .el-step__icon {
|
|
|
+ // width: 35px;
|
|
|
+ // height: 35px;
|
|
|
+ // font-size: 18px;
|
|
|
+ // }
|
|
|
+ // .is-process {
|
|
|
+ // .el-step__icon {
|
|
|
+ // background: #2e51ff;
|
|
|
+ // color: #fff;
|
|
|
+ // border-color: #2e51ff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
</style>
|
liuzl