| | |
| | | :width="dialogWidth" |
| | | :before-close="handleClose" |
| | | :close-on-click-modal="false" |
| | | append-to-body |
| | | custom-class="iframe-dialog" |
| | | > |
| | | <el-form |
| | | ref="form" |
| | | :model="editConfig.infomation" |
| | | :rules="rules" |
| | | label-position="right" |
| | | label-width="308px" |
| | | label-width="120px" |
| | | size="mini" |
| | | > |
| | | <!-- 信息 --> |
| | |
| | | <div v-if="isUnflod" class="basic-info-title">基本信息</div> |
| | | <div class="basic-info-view"> |
| | | <el-row> |
| | | <el-col :span="12" v-if="isUnflod"> |
| | | <el-form-item label="联系人编号" prop="number"> |
| | | <WordInput |
| | | v-if="codenumer && (explain != '' || isIdDisabled) && method == 0" |
| | | :codenumer="codenumer" |
| | | :sum="sum" |
| | | :disabled="this.editConfig.title !== '新建' || 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="name"> |
| | | <el-input v-model="editConfig.infomation.name"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="isUnflod"> |
| | | <el-form-item label="联系人编号" prop="number"> |
| | | <el-input v-model="editConfig.infomation.number"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | :fetch-suggestions="querySearchAsync" |
| | | value-key="name" |
| | | @select="handleSelectClient" |
| | | style="width: 100%" |
| | | ></el-autocomplete> |
| | | <div class="common-select-btn" @click="selClientClick"> |
| | | <i class="el-icon-circle-plus-outline" title="选择"></i> |
| | | </div> |
| | | <div class="common-select-btn" @click="clearupClient"> |
| | | <i class="el-icon-edit-outline" title="清除"></i> |
| | | <div |
| | | v-if="editConfig.infomation.client_name && editConfig.infomation.client_name.length > 0" |
| | | class="common-select-btn" |
| | | @click="clearupClient" |
| | | > |
| | | <i class="el-icon-remove-outline" title="清除"></i> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="手机" prop="phone"> |
| | | <el-input v-model="editConfig.infomation.phone"></el-input> |
| | | <el-input |
| | | v-model="editConfig.infomation.phone" |
| | | maxlength="11" |
| | | show-word-limit |
| | | oninput="value=value.replace(/[^\d]/g,'')" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item v-if="isUnflod" label="销售负责人" prop="member_id"> |
| | | <el-select v-model="editConfig.infomation.member_id" placeholder="请选择" size="mini"> |
| | | <el-select |
| | | v-model="editConfig.infomation.member_id" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 100%" |
| | | > |
| | | <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item v-if="isUnflod" label="生日" prop="birthday"> |
| | | <el-date-picker v-model="editConfig.infomation.birthday" type="date" placeholder="选择日期"> |
| | | <el-date-picker |
| | | v-model="editConfig.infomation.birthday" |
| | | value-format="yyyy-MM-dd" |
| | | type="date" |
| | | style="width: 100%" |
| | | placeholder="选择日期" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <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="12"> |
| | | <el-form-item label="邮编" prop="postalCode"> |
| | | <el-input v-model="editConfig.infomation.postalCode"></el-input> |
| | |
| | | import { getAddContact, getUpdateContact } from "@/api/client/contacts" |
| | | import { getAllData } from "@/api/client/client" |
| | | import SelectClientDialog from "@/views/other/commonDialog/SelectClientDialog" |
| | | import { getCityList } from "@/api/common/address" |
| | | import codeMixin from "@/views/client/followupRecords/mixin/codeMixin" |
| | | export default { |
| | | name: "AddContactsDialog", |
| | | mixins: [codeMixin], |
| | | props: { |
| | | editContactsConfig: { |
| | | type: Object, |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogWidth: "80%", |
| | | dialogWidth: "50%", |
| | | editConfig: this.editContactsConfig, |
| | | rules: { |
| | | name: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | number: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | member_id: [{ required: true, message: "请选择", trigger: "change" }] |
| | | client_name: [{ required: true, message: "请选择客户名称", trigger: "blur" }], |
| | | member_id: [{ required: true, message: "请选择", trigger: "change" }], |
| | | phone: [ |
| | | { required: false, message: "", trigger: "blur" }, |
| | | { len: 11, message: "长度在11个字符", 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" |
| | | } |
| | | ], |
| | | email: [ |
| | | { required: false, message: "", trigger: "blur" }, |
| | | { |
| | | pattern: /^[a-zA-Z0-9_\\.]+@[a-zA-Z0-9-]+[\\.a-zA-Z]+$/, |
| | | message: "请输入正确的邮箱格式", |
| | | trigger: "blur" |
| | | } |
| | | ] |
| | | }, |
| | | businessSourceOptions: [ |
| | | { value: "1", label: "后台注册" }, |
| | |
| | | { value: "8", label: "公司电话" } |
| | | ], |
| | | memberOptions: [], |
| | | countryOptions: [], // 国家 |
| | | countryOptions: [{ id: 1, name: "中国" }], // 国家 |
| | | provinceOptions: [], // 省份 |
| | | cityOptions: [], // 城市 |
| | | regionOptions: [], // 区域 |
| | |
| | | editVisible: false, |
| | | title: "", |
| | | infomation: {} |
| | | } |
| | | }, |
| | | clientId: this.editContactsConfig.infomation.client_id |
| | | } |
| | | }, |
| | | created() { |
| | | this.$store.dispatch("geClient") |
| | | if (this.editConfig.title !== "新建" && this.editConfig.infomation.province_id !== 0) { |
| | | this.getCityList(this.editConfig.infomation.province_id, "edit") |
| | | } |
| | | this.getCommonData() |
| | | this.formInfo() |
| | | }, |
| | | watch: { |
| | | "editContactsConfig.visible"(val) { |
| | | if (val) { |
| | | this.formInfo() |
| | | } |
| | | }, |
| | | "editContactsConfig.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() { |
| | | getAllData() |
| | | .then((res) => { |
| | | console.log(res) |
| | | this.memberOptions = res.data.member |
| | | this.countryOptions = res.data.country |
| | | this.provinceOptions = res.data.province |
| | | this.cityOptions = res.data.city |
| | | this.regionOptions = res.data.region |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | 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.provinceOptions = res.data.province |
| | | }) |
| | | }, |
| | | handleClose() { |
| | | this.editConfig.visible = false |
| | |
| | | id: this.editConfig.title === "新建" ? 0 : data.id, |
| | | birthday: data.birthday || "", |
| | | city_id: data.city_id || 0, |
| | | client_id: parseInt(data.client_id) || 0, |
| | | client_id: this.clientId || 0, |
| | | country_id: data.country_id || 0, |
| | | desc: data.desc || "", |
| | | email: data.email || "", |
| | |
| | | position: data.position || "", |
| | | province_id: data.province_id || 0, |
| | | region_id: data.region_id || 0, |
| | | wechat: data.wechat || "" |
| | | wechat: data.wechat || "", |
| | | codeStandID: data.ID, |
| | | codeRule: this.codeRule |
| | | } |
| | | return params |
| | | }, |
| | |
| | | } |
| | | }, |
| | | handleSelectClient(item) { |
| | | this.editConfig.infomation.client_id = item.id |
| | | this.editConfig.infomation.client_name = item.name |
| | | this.clientId = item.id |
| | | }, |
| | | selClientClick() { |
| | | this.editSelectClientConfig.editVisible = true |
| | |
| | | selClient(row) { |
| | | console.log(row) |
| | | this.editConfig.infomation.client_name = row.name |
| | | this.editConfig.infomation.client_id = row.id |
| | | this.clientId = row.id |
| | | }, |
| | | // 清除已选择用户 |
| | | clearupClient() { |
| | | console.log("sssssssss") |
| | | console.log(this.editConfig.infomation.client_name) |
| | | // if (this.editConfig.infomation.client_name !== "") { |
| | | this.editConfig.infomation.client_name = "" |
| | | this.editConfig.infomation.client_id = 0 |
| | | this.clientId = 0 |
| | | // } |
| | | }, |
| | | // 添加附件 |
| | | addAnnexClick() {}, |
| | |
| | | this.unflodCollapseStr = "收起" |
| | | this.isUnflod = true |
| | | } |
| | | }, |
| | | // 选择省份 |
| | | 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 = "" |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .add-contacts { |
| | | .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; |
| | | } |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .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> |