| | |
| | | :visible.sync="editConfig.visible" |
| | | :width="dialogWidth" |
| | | :before-close="handleClose" |
| | | append-to-body |
| | | custom-class="iframe-dialog" |
| | | > |
| | | <el-form |
| | | ref="form" |
| | | :model="editConfig.infomation" |
| | | :rules="rules" |
| | | label-position="right" |
| | | label-width="308px" |
| | | label-width="130px" |
| | | size="mini" |
| | | style="height: 60vh; overflow-x: hidden" |
| | | > |
| | |
| | | <div class="basic-info-view"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="客户名称" prop="name"> |
| | | <div class="custom-name"> |
| | | <el-input v-model="editConfig.infomation.name"></el-input> |
| | | <div class="common-select-btn"><i class="el-icon-house" title="工商查询"></i></div> |
| | | <div class="common-select-btn"><i class="el-icon-search" title="查重"></i></div> |
| | | </div> |
| | | <el-form-item label="客户编号" prop="number"> |
| | | <WordInput |
| | | v-if="codenumer && (explain != '' || isIdDisabled)&&method == 0" |
| | | :codenumer="codenumer" |
| | | :sum="sum" |
| | | :disabled="editConfig.infomation.id || isIdDisabled" |
| | | :inputValue="inputValue" |
| | | @codeList="codeList" |
| | | /> |
| | | <span v-else-if="method == 0" style="color: #f56c6c" |
| | | >请优先配置编码规范 |
| | | <el-button type="text" @click="numberClick"> |
| | | 配置规范 |
| | | </el-button |
| | | ></span |
| | | > |
| | | <span v-else>自动生成</span> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="客户编号" prop="number"> |
| | | <el-input v-model="editConfig.infomation.number"></el-input> |
| | | <el-form-item label="客户名称" prop="name"> |
| | | <div class="custom-name"> |
| | | <el-input v-model="editConfig.infomation.name"></el-input> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-house" title="工商查询"></i></div> --> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-search" title="查重"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | <el-option v-for="item in clientStatusOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | v-model="editConfig.infomation.member_id" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 63%" |
| | | style="width: 100%" |
| | | > |
| | | <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> |
| | | </el-option> |
| | |
| | | <el-option v-for="item in clientTypeOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-option v-for="item in clientSourceOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn" @click="editDropdownBox"> |
| | | <!-- <div class="common-select-btn" @click="editDropdownBox"> |
| | | <i class="el-icon-setting"></i> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | v-model="editConfig.infomation.client_level_id" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 63%" |
| | | style="width: 100%" |
| | | > |
| | | <el-option v-for="item in importantLevelOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | |
| | | <el-form-item label="下次回访日期" prop="next_visit_time"> |
| | | <el-date-picker |
| | | v-model="editConfig.infomation.next_visit_time" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | style="width: 100%" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | |
| | | <el-form-item label="最晚服务到期日" prop="latest_service_time"> |
| | | <el-date-picker |
| | | v-model="editConfig.infomation.latest_service_time" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | style="width: 100%" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | |
| | | <el-option v-for="item in industryOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-form-item label="注册时间" prop="registration_time"> |
| | | <el-date-picker |
| | | v-model="editConfig.infomation.registration_time" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="datetime" |
| | | placeholder="选择日期时间" |
| | | style="width: 100%" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | placeholder="请选择" |
| | | class="common-select-sel" |
| | | size="mini" |
| | | disabled |
| | | > |
| | | <el-option v-for="item in countryOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | placeholder="请选择" |
| | | class="common-select-sel" |
| | | size="mini" |
| | | @change="selProvinceChange" |
| | | > |
| | | <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | placeholder="请选择" |
| | | class="common-select-sel" |
| | | size="mini" |
| | | :disabled="cityOptions.length <= 0 ? true : false" |
| | | > |
| | | <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <!-- <el-col :span="12"> |
| | | <el-form-item label="区域" prop="region_id"> |
| | | <div class="common-select"> |
| | | <el-select |
| | |
| | | <div class="common-select-btn"><i class="el-icon-setting"></i></div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-col> --> |
| | | <el-col :span="24"> |
| | | <el-form-item label="详细地址" prop="detail_address"> |
| | | <el-input |
| | |
| | | <div slot="footer" class="dialog-footer"> |
| | | <!-- <el-button type="primary" size="small" @click="editConfig.visible = false">保并提交审批</el-button> --> |
| | | <el-button type="primary" size="small" @click="saveClick('form')">保存</el-button> |
| | | <el-button size="small" @click="editConfig.visible = false">取消</el-button> |
| | | <el-button size="small" @click="handleClose">取消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getAllData, getAddClient, getUpdateClient } from "@/api/client/client" |
| | | import { getAllData, getAddClient, getUpdateClient, checkNameClient } from "@/api/client/client" |
| | | import { getCityList } from "@/api/common/address" |
| | | import codeMixin from "@/views/client/followupRecords/mixin/codeMixin"; |
| | | export default { |
| | | name: "AddClientManageDialog", |
| | | mixins: [codeMixin], |
| | | props: { |
| | | editClientManageConfig: { |
| | | type: Object, |
| | |
| | | return { |
| | | visible: false, |
| | | title: "新建", |
| | | isSalesOpportunity: false, |
| | | infomation: {} |
| | | } |
| | | } |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogWidth: "80%", |
| | | dialogWidth: "50%", |
| | | editConfig: this.editClientManageConfig, |
| | | rules: { |
| | | name: [{ required: true, message: "请输入客户名称", trigger: "blur" }], |
| | | name: [ |
| | | { required: true, message: "请输入客户名称", trigger: "blur" }, |
| | | { |
| | | validator: this.checkNameClient, |
| | | trigger: "blur" |
| | | } |
| | | ], |
| | | client_status_id: [{ required: true, message: "请选择客户状态", trigger: "change" }], |
| | | member_id: [{ required: true, message: "请选择销售负责人", trigger: "change" }], |
| | | approvalOpinion: [{ required: true, message: "请输入审批意见", trigger: "blur" }], |
| | |
| | | { |
| | | pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, |
| | | message: "请输入正确的手机号", |
| | | trigger: "blur" |
| | | } |
| | | ], |
| | | contact_email: [ |
| | | { required: false, message: "", trigger: "blur" }, |
| | | { |
| | | pattern: /^[a-zA-Z0-9_\\.]+@[a-zA-Z0-9-]+[\\.a-zA-Z]+$/, |
| | | message: "请输入正确的邮箱格式", |
| | | trigger: "blur" |
| | | } |
| | | ] |
| | |
| | | registerCapitalOptions: [], // 注册资金 |
| | | enterpriseNatureOptions: [], // 公司性质 |
| | | enterpriseScaleOptions: [], // 客户规模 |
| | | countryOptions: [], // 国家 |
| | | countryOptions: [{ id: 1, name: "中国" }], // 国家 |
| | | provinceOptions: [], // 省份 |
| | | cityOptions: [], // 城市 |
| | | regionOptions: [], // 区域 |
| | | approvalWorkflowOptions: [] // 审批流程 |
| | | approvalWorkflowOptions: [], // 审批流程 |
| | | clientName: this.editClientManageConfig.infomation.name |
| | | } |
| | | }, |
| | | created() { |
| | | if (this.editConfig.title !== "新建" && this.editConfig.infomation.province_id !== 0) { |
| | | this.getCityList(this.editConfig.infomation.province_id, "edit") |
| | | } |
| | | this.getCommonData() |
| | | this.formInfo(); |
| | | }, |
| | | watch:{ |
| | | 'editClientManageConfig.visible'(val){ |
| | | if(val){ |
| | | this.formInfo() |
| | | } |
| | | }, |
| | | 'editClientManageConfig.infomation.codeStandID'(){ |
| | | this.formInfo() |
| | | } |
| | | }, |
| | | methods: { |
| | | formInfo(){ |
| | | this.objCode.type='客户编码' |
| | | this.objCode.codeStandID = '' |
| | | if(this.editConfig.infomation.codeStandID){ |
| | | this.objCode.codeStandID = this.editConfig.infomation.codeStandID; |
| | | } |
| | | this.getRCodeStandardList(); |
| | | }, |
| | | getCommonData() { |
| | | this.editConfig.infomation.country_id = 1 |
| | | this.editConfig.infomation.province_id = |
| | | this.editConfig.infomation.province_id === 0 ? "" : this.editConfig.infomation.province_id |
| | | this.editConfig.infomation.city_id = |
| | | this.editConfig.infomation.city_id === 0 ? "" : this.editConfig.infomation.city_id |
| | | getAllData() |
| | | .then((res) => { |
| | | console.log(res) |
| | | this.memberOptions = res.data.member |
| | | this.clientSourceOptions = res.data.client_origin |
| | | this.clientStatusOptions = res.data.client_status |
| | |
| | | this.registerCapitalOptions = res.data.registered_capital |
| | | this.enterpriseNatureOptions = res.data.enterprise_nature |
| | | this.enterpriseScaleOptions = res.data.enterprise_scale |
| | | this.countryOptions = res.data.country |
| | | // this.countryOptions = res.data.country |
| | | this.provinceOptions = res.data.province |
| | | this.cityOptions = res.data.city |
| | | this.regionOptions = res.data.region |
| | | }) |
| | | .catch((err) => { |
| | |
| | | }, |
| | | handleClose() { |
| | | this.editConfig.visible = false |
| | | if (this.editConfig.title === "新建" && this.editConfig.infomation.sales_leads_id) { |
| | | this.$parent.handleClose() |
| | | } |
| | | }, |
| | | // 保存 |
| | | saveClick(formName) { |
| | |
| | | const params = this.saveParams() |
| | | console.log(params) |
| | | if (this.editConfig.title === "新建") { |
| | | getAddClient(params) |
| | | .then((res) => { |
| | | console.log(res) |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | message: "添加成功", |
| | | type: "success" |
| | | }) |
| | | getAddClient(params).then((res) => { |
| | | console.log(res) |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message.success("添加成功") |
| | | if (this.editConfig.isSalesOpportunity) { |
| | | this.$emit("salesOpportunityClick", this.editConfig.infomation) |
| | | } else if (this.editConfig.title === "新建" && this.editConfig.infomation.sales_leads_id) { |
| | | this.$parent.handleClose() |
| | | } else { |
| | | this.$parent.getData() |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | } |
| | | }) |
| | | } else { |
| | | getUpdateClient(params) |
| | | .then((res) => { |
| | | console.log(res) |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | message: "编辑成功", |
| | | type: "success" |
| | | }) |
| | | this.$parent.getData() |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | getUpdateClient(params).then((res) => { |
| | | console.log(res) |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message.success("编辑成功") |
| | | this.$parent.getData() |
| | | } |
| | | }) |
| | | } |
| | | } else { |
| | | console.log("error submit") |
| | |
| | | let params = { |
| | | id: this.editConfig.title === "新建" ? 0 : data.id, |
| | | business_scope: data.business_scope, |
| | | city_id: 0, |
| | | city_id: data.city_id || 0, |
| | | client_level_id: data.client_level_id || 0, |
| | | client_origin_id: data.client_origin_id || 0, |
| | | client_status_id: data.client_status_id || 0, |
| | |
| | | name: data.name || "", |
| | | next_visit_time: data.next_visit_time || "", |
| | | number: data.number || "", |
| | | province_id: 0, |
| | | province_id: data.province_id || 0, |
| | | region_id: 0, |
| | | registered_capital_id: data.registered_capital_id || 0, |
| | | registration_time: data.registration_time || "", |
| | | remark: data.remark || "", |
| | | representative: data.representative || "", |
| | | service_member_id: data.service_member_id || 0 |
| | | service_member_id: data.service_member_id || 0, |
| | | sales_leads_id: data.sales_leads_id || 0, |
| | | contact_id: data.contact_id || 0, |
| | | codeStandID:data.ID, |
| | | codeRule:this.codeRule, |
| | | } |
| | | return params |
| | | }, |
| | |
| | | console.log("aaa") |
| | | this.editDropdownConfig.editVisible = true |
| | | this.editDropdownConfig.title = "客户来源" |
| | | }, |
| | | // 选择省份 |
| | | selProvinceChange(val) { |
| | | this.getCityList(val, "sel") |
| | | }, |
| | | async getCityList(val, value) { |
| | | await getCityList({ province_id: val }).then((res) => { |
| | | console.log(res) |
| | | if (res.data.code === 200) { |
| | | this.cityOptions = res.data.data.list |
| | | if (value === "sel") { |
| | | this.editConfig.infomation.city_id = "" |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | // 查重 |
| | | async checkNameClient(rule, value, callback) { |
| | | if (this.editConfig.title === "新建" || this.clientName !== this.editConfig.infomation.name) { |
| | | await checkNameClient({ name: value }).then((res) => { |
| | | if (res.data.code === 700001) { |
| | | return callback(new Error("客户名称重复")) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .add-client-manage { |
| | | .basic-info { |
| | | .basic-info-title { |
| | | background-color: #f4f8fe; |
| | | padding-left: 10px; |
| | | font-size: 15px; |
| | | font-weight: bold; |
| | | color: #666; |
| | | height: 42px; |
| | | line-height: 42px; |
| | | } |
| | | .basic-info-view { |
| | | margin-top: 10px; |
| | | padding-right: 40px; |
| | | .custom-name, |
| | | .common-select { |
| | | ::v-deep { |
| | | .iframe-dialog .el-dialog__body { |
| | | .basic-info { |
| | | .basic-info-title { |
| | | background-color: #f4f8fe; |
| | | padding-left: 10px; |
| | | font-size: 15px; |
| | | font-weight: bold; |
| | | color: #666; |
| | | height: 42px; |
| | | line-height: 42px; |
| | | } |
| | | .basic-info-view { |
| | | margin-top: 10px; |
| | | padding-right: 40px; |
| | | .custom-name, |
| | | .common-select { |
| | | display: flex; |
| | | .common-select-btn { |
| | | margin-left: 5px; |
| | | font-size: 18px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .common-select { |
| | | .common-select-sel { |
| | | width: 100%; |
| | | } |
| | | } |
| | | } |
| | | .annex-view { |
| | | display: flex; |
| | | .common-select-btn { |
| | | margin-left: 5px; |
| | | font-size: 18px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .common-select { |
| | | .common-select-sel { |
| | | width: 270px; |
| | | color: #6166d3; |
| | | .setFormat { |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | } |
| | | .annex-view { |
| | | .unflod-collapse { |
| | | display: flex; |
| | | height: 30px; |
| | | justify-content: center; |
| | | align-items: center; |
| | | color: #6166d3; |
| | | .setFormat { |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | } |
| | | .unflod-collapse { |
| | | display: flex; |
| | | height: 30px; |
| | | justify-content: center; |
| | | align-items: center; |
| | | color: #6166d3; |
| | | } |
| | | .dialog-footer { |
| | | background-color: #f5f5f5; |
| | | height: 55px; |
| | | line-height: 55px; |
| | | .dialog-footer { |
| | | background-color: #f5f5f5; |
| | | height: 55px; |
| | | line-height: 55px; |
| | | } |
| | | } |
| | | } |
| | | </style> |