From 2925d0cae10aa2ca40747ee8636f44584995cc7f Mon Sep 17 00:00:00 2001 From: luobisheng <727299681@qq.com> Date: 星期一, 28 十一月 2022 16:45:21 +0800 Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/sccg_ui --- src/views/operate/fivepack/threepack/components/updateUser/index.vue | 495 ++++++++++++++++++++++++++++++++---------------------- 1 files changed, 296 insertions(+), 199 deletions(-) diff --git a/src/views/operate/fivepack/threepack/components/updateUser/index.vue b/src/views/operate/fivepack/threepack/components/updateUser/index.vue index e6948b7..e74c56b 100644 --- a/src/views/operate/fivepack/threepack/components/updateUser/index.vue +++ b/src/views/operate/fivepack/threepack/components/updateUser/index.vue @@ -1,102 +1,221 @@ <template> - <div class="updateUser"> - <main> - <div class="mainContent"> - <el-form ref="store" label-width="140px" autoComplete="on" :model="store" :rules="rules" - label-position="right"> - <!-- 搴楅摵绫诲瀷 --> - <el-form-item v-if="isStorePage" class="optionItem" label="搴楅摵绫诲瀷:" prop="type"> - <el-cascader :options="shopTypeList" v-model="store.type" /> - </el-form-item> - <!-- 搴楅摵缂栧彿 --> - <el-form-item class="optionItem" label="搴楅摵缂栧彿:" prop="storeNumber"> - <el-input v-model="store.storeNumber" placeholder="璇峰~鍐欏簵閾虹紪鍙�" :disabled="isView()"></el-input> - </el-form-item> - <!-- 搴楅摵鍚嶇О --> - <el-form-item class="optionItem" label="搴楅摵鍚嶇О:" prop="storeName"> - <el-input v-model="store.storeName" placeholder="璇峰~鍐欏簵鍚嶇О" :disabled="isView()"></el-input> - </el-form-item> - <!-- 搴楅摵鑱旂郴浜� --> - <el-form-item class="optionItem" label="搴楅摵鑱旂郴浜�:" prop="owner"> - <el-input v-model="store.owner" placeholder="璇峰~鍐欏簵閾鸿仈绯讳汉" :disabled="isView()"></el-input> - </el-form-item> - <!-- 搴楅摵鑱旂郴鐢佃瘽 --> - <el-form-item class="optionItem" label="搴楅摵鑱旂郴鐢佃瘽:" prop="contact"> - <el-input v-model="store.contact" placeholder="璇峰~鍐欏簵閾鸿仈绯荤數璇�" :disabled="isView()"></el-input> - </el-form-item> - <!-- 搴楅摵璇︾粏鍦板潃 --> - <el-form-item class="optionItem" label="搴楅摵璇︾粏鍦板潃:" prop="storeAddress"> - <el-input v-model="store.storeAddress" placeholder="璇峰~鍐欏簵閾鸿缁嗗湴鍧�" :disabled="isView()"></el-input> - </el-form-item> - <!-- 鍏宠仈鎽勫儚鏈� --> - <el-form-item v-if="isStorePage" class="optionItem" label="鍏宠仈鎽勫儚鏈�:" prop="relationVideo"> - <el-select v-model="store.relationVideo" placeholder="璇峰~鍐欏叧鑱旀憚鍍忔満" :disabled="isView()"> - <el-option v-for="item in relationVideoList" :key="item.id" :value="item.id" :label="item.name"></el-option> - </el-select> - </el-form-item> - <el-form-item v-if="!isStorePage" class="optionItem" label="搴楅摵寰楀垎:"> - <el-input v-model="store.storeScore" :disabled="isView()"></el-input> - </el-form-item> - <el-form-item v-if="!isView()"> - <div class="optionBtn"> - <el-button type="primary" class="btn submit" @click.native.prevent="onSubmit">鎻愪氦</el-button> - </div> - </el-form-item> - </el-form> + <div class="updateUser"> + <main> + <div class="mainContent"> + <el-form + ref="store" + label-width="140px" + autoComplete="on" + :model="store" + :rules="rules" + label-position="right" + > + <!-- 搴楅摵绫诲瀷 --> + <el-form-item + v-if="isStorePage" + class="optionItem" + label="搴楅摵绫诲瀷:" + prop="type" + > + <el-cascader :options="shopTypeList" v-model="store.type" /> + </el-form-item> + <!-- 搴楅摵缂栧彿 --> + <el-form-item v-if="store.id" class="optionItem" label="搴楅摵缂栧彿:"> + <el-input + v-model="store.storeNumber" + placeholder="璇峰~鍐欏簵閾虹紪鍙�" + disabled + ></el-input> + </el-form-item> + <!-- 搴楅摵鍚嶇О --> + <el-form-item class="optionItem" label="搴楅摵鍚嶇О:" prop="storeName"> + <el-input + v-model="store.storeName" + placeholder="璇峰~鍐欏簵鍚嶇О" + :disabled="isView()" + ></el-input> + </el-form-item> + <!-- 搴楅摵鑱旂郴浜� --> + <el-form-item class="optionItem" label="搴楅摵鑱旂郴浜�:" prop="owner"> + <el-input + v-model="store.owner" + placeholder="璇峰~鍐欏簵閾鸿仈绯讳汉" + :disabled="isView()" + ></el-input> + </el-form-item> + <!-- 搴楅摵鑱旂郴鐢佃瘽 --> + <el-form-item class="optionItem" label="搴楅摵鑱旂郴鐢佃瘽:" prop="contact"> + <el-input + v-model="store.contact" + placeholder="璇峰~鍐欏簵閾鸿仈绯荤數璇�" + :disabled="isView()" + ></el-input> + </el-form-item> + <!-- 搴楅摵璇︾粏鍦板潃 --> + <el-form-item + class="optionItem" + label="搴楅摵璇︾粏鍦板潃:" + prop="storeAddress" + > + <el-input + v-model="store.storeAddress" + placeholder="璇峰~鍐欏簵閾鸿缁嗗湴鍧�" + :disabled="isView()" + ></el-input> + </el-form-item> + <!-- 鍏宠仈鎽勫儚鏈� --> + <el-form-item + v-if="isStorePage" + class="optionItem" + label="鍏宠仈鎽勫儚鏈�:" + > + <el-select + v-model="store.relationVideo" + placeholder="璇峰~鍐欏叧鑱旀憚鍍忔満" + :disabled="isView()" + > + <el-option + v-for="item in relationVideoList" + :key="item.id" + :value="item.id" + :label="item.name" + ></el-option> + </el-select> + </el-form-item> + <el-form-item + v-if="!isStorePage" + class="optionItem" + label="搴楅摵寰楀垎:" + > + <el-input + v-model="store.storeScore" + :disabled="isView()" + ></el-input> + </el-form-item> + <el-form-item v-if="!isView()"> + <div class="optionBtn"> + <el-button + type="primary" + class="btn submit" + @click.native.prevent="onSubmit" + >鎻愪氦</el-button + > </div> - </main> - </div> + </el-form-item> + </el-form> + </div> + </main> + </div> </template> <script> import { deepClone, getCodeList } from "@/utils/helper"; -import { addStoreInfo, getVideoPoint, updateStoreInfo } from "@/api/operate/storeManagement"; +import { + addStoreInfo, + getVideoPoint, + updateStoreInfo, +} from "@/api/operate/storeManagement"; export default { - data() { - const validatePhone = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欐墜鏈哄彿鐮�")); - } else { - const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); - } else { - callback(); - } - } - }; - - const validateStoreType = (rule, value, callback) => { - if (value) { - callback(); - } else { - callback(new Error('璇烽�夋嫨搴楅摵绫诲瀷')); - } - }; - return { - store: { - storeNumber: '', - storeName: '', - owner: '', - contact: '', - storeAddress: '', - relationVideo: '', - type: null, - storeScore: null - }, - rules: { - type: [{ required: true, validator: validateStoreType }], - storeNumber: [{ required: true, trigger:'blur', message: '璇疯緭鍏ュ簵閾虹紪鍙�' }], - storeName: [{ required: true, trigger:'blur', message: '璇疯緭鍏ュ簵閾哄悕绉�' }], - owner: [{ required: true, trigger:'blur', message: '璇疯緭鍏ュ簵閾鸿仈绯讳汉' }], - contact: [{ required: true, trigger:'blur', validator: validatePhone }], - storeAddress: [{ required: true, trigger:'blur', message: '璇疯緭鍏ュ簵閾鸿缁嗗湴鍧�' }], - relationVideo: [{ required: true, trigger:'blur', message: '璇疯緭鍏ュ叧鑱旀憚鍍忔満' }] - }, - shopTypeList: [], - relationVideoList: [] + data() { + const validatePhone = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欐墜鏈哄彿鐮�")); + } else { + const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/; + if (!rep.test(value)) { + callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); + } else { + callback(); } + } + }; + + const validateStoreType = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("璇烽�夋嫨搴楅摵绫诲瀷")); + } + }; + return { + store: { + storeNumber: "", + storeName: "", + owner: "", + contact: "", + storeAddress: "", + relationVideo: "", + type: null, + storeScore: null, + }, + rules: { + type: [{ required: true, validator: validateStoreType }], + storeNumber: [ + { required: true, trigger: "blur", message: "璇疯緭鍏ュ簵閾虹紪鍙�" }, + ], + storeName: [ + { required: true, trigger: "blur", message: "璇疯緭鍏ュ簵閾哄悕绉�" }, + ], + owner: [ + { required: true, trigger: "blur", message: "璇疯緭鍏ュ簵閾鸿仈绯讳汉" }, + ], + contact: [ + { required: true, trigger: "blur", validator: validatePhone }, + ], + storeAddress: [ + { required: true, trigger: "blur", message: "璇疯緭鍏ュ簵閾鸿缁嗗湴鍧�" }, + ], + relationVideo: [ + { required: true, trigger: "blur", message: "璇疯緭鍏ュ叧鑱旀憚鍍忔満" }, + ], + }, + shopTypeList: [], + relationVideoList: [], + }; + }, + async created() { + const result = await getVideoPoint({ current: 1, size: 1000 }); + this.relationVideoList = result.records; + + if (this.storeInfo) { + this.$set(this, "store", this.storeInfo); + if (this.storeInfo && this.isStorePage) { + this.store.relationVideo = this.store.videoPoint.name; + } + } + + if (!this.isView()) { + await this.getShopTypeList(); + } + }, + + methods: { + onSubmit() { + this.$refs.store.validate((valid) => { + if (valid) { + debugger + this.store.type = this.store.type[1]; + if (this.isCreated()) { + addStoreInfo(this.store) + .then(() => { + this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" }); + this.$emit("closeDialog"); + }) + .catch((err) => this.$message({ type: "error", message: err })); + } else { + updateStoreInfo(this.store) + .then(() => { + this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" }); + this.$emit("closeDialog"); + }) + .catch((err) => this.$message({ type: "error", message: err })); + } + } else { + this.$message({ type: "warning", message: "璇锋鏌ュ繀濉」" }); + } + }); }, + async created() { if (this.storeInfo) { this.$set(this, 'store', this.storeInfo); @@ -111,135 +230,113 @@ } }, - methods: { - onSubmit() { - this.$refs.store.validate(valid => { - if (valid) { - this.store.type = this.store.type[1]; - if (this.isCreated()) { - addStoreInfo(this.store) - .then(() => { - this.$message({ type: 'success', message: '鎿嶄綔鎴愬姛' }); - this.$emit('closeDialog'); - }) - .catch(err => this.$message({ type: 'error', message: err })); - } else { - updateStoreInfo(this.store) - .then(() => { - this.$message({ type: 'success', message: '鎿嶄綔鎴愬姛' }); - this.$emit('closeDialog'); - }) - .catch(err => this.$message({ type: 'error', message: err })); - } - } else { - this.$message({ type: 'warning', message: '璇锋鏌ュ繀濉」' }); - } - }); - }, + isView() { + return this.dialogType === "view"; + }, - isView() { - return this.dialogType === 'view'; - }, + isCreated() { + return this.dialogType === "create"; + }, - isCreated() { - return this.dialogType === 'create'; - }, - - // 鑾峰彇瀛楀吀 - async getShopTypeList() { - let arr = await getCodeList('16'); - this.shopTypeList = this.createShopTypeTree(arr); - if (this.dialogType === 'update') { - const selectedStoreType = arr.find(item => item.name === this.store.typeName); - this.$set(this.store, 'type', [selectedStoreType.parentId, selectedStoreType.id]); - } - }, - - // 鍒涘缓鍟嗛摵绫诲瀷鏍� - createShopTypeTree(arr) { - if (arr.length && arr.length !== 0) { - // 鑾峰彇椤剁骇鑿滃崟 - let treeRoot = arr.filter(item => { - return item.parentId === 0 - }) - // 娣诲姞child - treeRoot.forEach(item => { - item.children = [] - arr.forEach(child => { - child.value = child.id; - child.label = child.name; - if (child.parentId === item.id) { - item.children.push(child) - } - }) - }) - return treeRoot; - } + // 鑾峰彇瀛楀吀 + async getShopTypeList() { + let arr = await getCodeList("16"); + this.shopTypeList = this.createShopTypeTree(arr); + + if (this.dialogType === "update") { + const selectedStoreType = arr.find( + (item) => item.name === this.store.typeName + ); + this.$set(this.store, "type", [ + selectedStoreType.parentId, + selectedStoreType.id, + ]); } }, - beforeDestroy() { - this.store = null; + // 鍒涘缓鍟嗛摵绫诲瀷鏍� + createShopTypeTree(arr) { + if (arr.length && arr.length !== 0) { + // 鑾峰彇椤剁骇鑿滃崟 + let treeRoot = arr.filter((item) => { + return item.parentId === 0; + }); + // 娣诲姞child + treeRoot.forEach((item) => { + item.children = []; + arr.forEach((child) => { + child.value = child.id; + child.label = child.name; + if (child.parentId === item.id) { + item.children.push(child); + } + }); + }); + return treeRoot; + } + }, }, - props: ['storeInfo', 'dialogType', 'isStorePage'] -} + + beforeDestroy() { + this.store = null; + }, + props: ["storeInfo", "dialogType", "isStorePage"], +}; </script> <style lang="scss" scoped> .updateUser { - border-radius: 1px; + border-radius: 1px; + background-color: #09152f; + + main { + text-align: left; + padding: 0 55px; background-color: #09152f; - main { - text-align: left; - padding: 0 55px; - background-color: #09152f; + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; - .mainContent { - display: flex; - justify-content: center; - padding-top: 50px; + .el-form-item__content { + width: 400px; - .el-form-item__content { - width: 400px; - - .el-select { - width: 100%; - } - } - - .optionHandleSp { - display: flex; - - .areaNumber, - .moreNumber { - flex: 1; - } - - .telNumber { - flex: 2; - } - } - - .optionBtn { - display: flex; - margin-top: 20px; - - .btn { - padding: 12px 50px; - } - } - + .el-select { + width: 100%; } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } } + } } .updateUser::v-deep .el-form-item__label { - color: #4b9bb7; + color: #4b9bb7; } .updateUser::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; + background-color: #09152f; + border: 1px solid #17324c; } - </style> \ No newline at end of file -- Gitblit v1.8.0