From e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期日, 21 一月 2024 20:54:49 +0800
Subject: [PATCH] 优化
---
src/views/operate/fivepack/threepack/components/updateUser/index.vue | 531 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 342 insertions(+), 189 deletions(-)
diff --git a/src/views/operate/fivepack/threepack/components/updateUser/index.vue b/src/views/operate/fivepack/threepack/components/updateUser/index.vue
index b4c5f9a..2717eb6 100644
--- a/src/views/operate/fivepack/threepack/components/updateUser/index.vue
+++ b/src/views/operate/fivepack/threepack/components/updateUser/index.vue
@@ -1,215 +1,368 @@
<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="storeaddr">
- <el-input v-model="store.storeaddr" placeholder="璇峰～鍐欏簵閾鸿缁嗗湴鍧�" :disabled="isView()"></el-input>
- </el-form-item>
- <!-- 鍏宠仈鎽勫儚鏈� -->
- <el-form-item v-if="!isStorePage" class="optionItem" label="鍏宠仈鎽勫儚鏈�:" prop="relationVideo">
- <el-input v-model="store.relationVideo" placeholder="璇峰～鍐欏叧鑱旀憚鍍忔満" :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="搴楅摵鐘舵��:"
+ prop="status"
+ >
+ <el-select
+ v-model="store.status"
+ placeholder="璇烽�夋嫨搴楅摵鐘舵��"
+ :disabled="isView()"
+ >
+ <el-option
+ v-for="item in statusList"
+ :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, updateStoreInfo} from "@/api/operate/storeManagement";
+import { deepClone, getCodeList } from "@/utils/helper";
+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();
- }
- }
- };
- return {
- store: {
- storeNumber: '',
- storename: '',
- owner: '',
- contact: '',
- storeaddr: '',
- relationVideo: '',
- type: null
- },
- rules: {
- type: [{ required: true, trigger: ['blue', 'change'], message: '璇烽�夋嫨搴楅摵绫诲瀷' }],
- 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 }],
- storeaddr: [{ required: true, trigger:'blur', message: '璇疯緭鍏ュ簵閾鸿缁嗗湴鍧�' }],
- relationVideo: [{ required: false, trigger:'blur', message: '璇疯緭鍏ュ叧鑱旀憚鍍忔満' }]
- },
- shopTypeList: []
- }
- },
- created() {
- this.store = deepClone(this.storeInfo);
- if (this.isCreated()) {
- this.getShopTypeList();
- }
- },
-
- methods: {
- onSubmit() {
- this.$refs.store.validate(valid => {
- if (valid) {
- if (this.isCreated()) {
- this.store.type = this.store.type[1];
- 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';
- },
-
- isCreated() {
- return this.dialogType === 'add';
- },
-
- // 鑾峰彇瀛楀吀
- async getShopTypeList() {
- let arr = await getCodeList('16');
- this.shopTypeList = this.createShopTypeTree(arr);
- },
-
- // 鍒涘缓鍟嗛摵绫诲瀷鏍�
- 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;
+ 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,
+ status: 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: "璇疯緭鍏ュ叧鑱旀憚鍍忔満" },
+ ],
+ status: [
+ { required: true, trigger: "blur", message: "璇烽�夋嫨搴楅摵鐘舵��" },
+ ],
+ },
+ shopTypeList: [],
+ relationVideoList: [],
+ statusList: [
+ { id: 1, name: "缁忚惀" },
+ { id: 2, name: "鍊掗棴" },
+ ],
+ };
+ },
+ async created() {
+ const result = await getVideoPoint({ current: 1, size: 1000 });
+ this.relationVideoList = result.records;
+
+ if (!this.isView()) {
+ await this.getShopTypeList();
+ }
+
+ if (this.storeInfo) {
+ this.$set(this, "store", this.storeInfo);
+ if (this.storeInfo && this.isStorePage && this.store.videoPoint) {
+ this.store.relationVideo = this.store.videoPoint.name;
+ }
+
+ const selectedStoreType = this.getSelectedStoreType(this.shopTypeList);
+
+ this.$set(this.store, "type", [
+ selectedStoreType.parentId,
+ selectedStoreType.id,
+ ]);
+ }
+ },
+
+ 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: "璇锋鏌ュ繀濉」" });
+ }
+ });
},
- props: ['storeInfo', 'dialogType', 'isStorePage']
-}
+
+ isView() {
+ return this.dialogType === "view";
+ },
+
+ isCreated() {
+ return this.dialogType === "create";
+ },
+
+ // 鑾峰彇瀛楀吀
+ async getShopTypeList() {
+ let arr = await getCodeList("16");
+ this.shopTypeList = this.createShopTypeTree(arr);
+ },
+
+ // 鍒涘缓鍟嗛摵绫诲瀷鏍�
+ 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;
+ }
+ },
+ getSelectedStoreType(shopTypeList) {
+ let selectedItem = null;
+ shopTypeList.forEach((item) => {
+
+ if (item.name === this.store.typeName) {
+ selectedItem = item;
+ } else if (item.children) {
+ let selected = this.getSelectedStoreType(item.children);
+ if (selected) {
+ selectedItem = selected;
+ }
+ }
+ });
+ return selectedItem;
+ },
+ },
+
+ beforeDestroy() {
+ this.store = null;
+ },
+ props: ["storeInfo", "dialogType", "isStorePage"],
+};
</script>
<style lang="scss" scoped>
.updateUser {
- border-radius: 1px;
- background-color: #09152f;
+ 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: #ffffff;
- .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