From 46ed69e3b72658140a40127f4bae16bef9a02d56 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期一, 21 八月 2023 11:23:34 +0800 Subject: [PATCH] bug修复 --- src/views/client/contacts/AddContactsDialog.vue | 185 +++++++++++++++++++++++++++++---------------- 1 files changed, 118 insertions(+), 67 deletions(-) diff --git a/src/views/client/contacts/AddContactsDialog.vue b/src/views/client/contacts/AddContactsDialog.vue index 03ebb74..80e8f08 100644 --- a/src/views/client/contacts/AddContactsDialog.vue +++ b/src/views/client/contacts/AddContactsDialog.vue @@ -6,6 +6,8 @@ :width="dialogWidth" :before-close="handleClose" :close-on-click-modal="false" + append-to-body + custom-class="iframe-dialog" > <el-form ref="form" @@ -51,7 +53,12 @@ </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"> @@ -80,7 +87,12 @@ </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" + placeholder="閫夋嫨鏃ユ湡" + > </el-date-picker> </el-form-item> </el-col> @@ -107,7 +119,7 @@ <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> @@ -119,11 +131,12 @@ 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> @@ -135,15 +148,16 @@ 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 @@ -158,7 +172,7 @@ <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> @@ -235,6 +249,7 @@ 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" export default { name: "AddContactsDialog", props: { @@ -262,7 +277,24 @@ rules: { name: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], number: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], - member_id: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }] + 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: "鍚庡彴娉ㄥ唽" }, @@ -275,7 +307,7 @@ { value: "8", label: "鍏徃鐢佃瘽" } ], memberOptions: [], - countryOptions: [], // 鍥藉 + countryOptions: [{ id: 1, name: "涓浗" }], // 鍥藉 provinceOptions: [], // 鐪佷唤 cityOptions: [], // 鍩庡競 regionOptions: [], // 鍖哄煙 @@ -285,27 +317,29 @@ 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() }, methods: { 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 @@ -362,7 +396,7 @@ 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 || "", @@ -390,7 +424,7 @@ } }, handleSelectClient(item) { - this.editConfig.infomation.client_id = item.id + this.clientId = item.id }, selClientClick() { this.editSelectClientConfig.editVisible = true @@ -398,12 +432,12 @@ selClient(row) { console.log(row) this.editConfig.infomation.client_name = row.name - this.editConfig.infomation.client_id = row.id + this.clientId = row.id }, // 娓呴櫎宸查�夋嫨鐢ㄦ埛 clearupClient() { this.editConfig.infomation.client_name = "" - this.editConfig.infomation.client_id = 0 + this.clientId = 0 }, // 娣诲姞闄勪欢 addAnnexClick() {}, @@ -418,6 +452,21 @@ 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 = "" + } + } + }) } } } @@ -425,54 +474,56 @@ <!-- 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: 270px; + } + } + } + .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> -- Gitblit v1.8.0