feat:修改文物年代选择器

src/store/modules/dict.js

+import {
+  getDictTree
+} from '@/api/dict'
 const state = {
-  dicts: {},
+  dicts: {}, //{ displayTypes: }
 };
 
 const mutations = {
@@ -14,30 +17,40 @@ const actions = {
     commit
   }, data) {
     let dicts = []
+    let requestDicts = []
     data.forEach(i => {
-      if (state.dicts[i]) {
-        dicts.push(dicts)
+      // 如果state中不存在的就需要重新获取
+      if (!state.dicts[i]) {
+        requestDicts.push(i)
+      } else {
+        // 如果存在就直接存入dicts中
+        let obj = {}
+        obj[i] = state.dicts[i]
+        dicts.push(obj)
       }
     });
-    if (dicts.length > 0) {
-      return dicts
-    } else {
-      return new Promise((resolve, reject) => {
-        getDictTree(data).then(response => {
-          const {
-            data
-          } = response
-          commit('SET_TOKEN', data.accessToken)
-          commit('SET_NAME', data.username)
-          commit('SET_USERINFO', data)
-          setToken(data.accessToken)
-          setUserInfo(data)
-          resolve()
-        }).catch(error => {
-          reject(error)
+    return new Promise((resolve, reject) => {
+      getDictTree(requestDicts).then(res => {
+        console.log(res.data);
+        let dictsObj = {}
+        requestDicts.forEach(reqDict => {
+          dictsObj[reqDict] = []
+          res.data.map(item => {
+            if (item.dictType == reqDict) {
+              dictsObj[reqDict].push(item)
+            }
+          })
+          commit("SET_DICTS", {
+            label: reqDict,
+            value: Object.freeze(dictsObj[reqDict]),
+          });
         })
+        resolve(dictsObj)
+      }).catch(error => {
+        reject(error)
       })
-    }
+    });
+
   }
 
 }

src/views/culturalRelic/components/InfoEditDialog.vue

@@ -76,19 +76,27 @@
               ></el-input>
             </el-form-item>
             <el-form-item label="文物年代" :label-width="formLabelWidth">
-              <el-select
+              <el-cascader
+                style="width: 100%"
+                v-model="dialogForm.years"
+                :options="culturalRelicYears"
+                :props="culturalRelicYearsProps"
+                placeholder="请选择文物年代"
+              >
+              </el-cascader>
+              <!-- <el-select
                 v-model="dialogForm.years"
                 placeholder="请选择文物年代"
                 style="width: 100%"
               >
                 <el-option
-                  v-for="(value, key) in culturalRelicYears"
+                  v-for="(item, key) in culturalRelicYears"
                   :key="key"
-                  :label="value"
-                  :value="key"
+                  :label="item.label"
+                  :value="item.value"
                 >
-                </el-option>
-              </el-select>
+                </el-option> -->
+              <!-- </el-select> -->
             </el-form-item>
             <el-form-item label="文物数量" :label-width="formLabelWidth">
               <!-- <el-input
@@ -204,7 +212,7 @@
                 :fileLimit="6"
                 :fileSize="50"
                 :fileType="['mp4', 'wav']"
-                listType="picture-card"
+                listType="text"
                 ref="videos"
               />
             </el-form-item>
@@ -233,7 +241,7 @@
 
       <div class="dialog-footer">
         <el-button @click="cancelForm">取 消</el-button>
-        <el-button type="primary" @click="handleSubmit"
+        <el-button type="primary" @click="handleSubmit" :loading="loading"
           >确定<i class="el-icon-right" style="margin-left: 5px"></i
         ></el-button>
       </div>
@@ -296,11 +304,13 @@ export default {
         // debugger
         // 回填媒体
         if (this.dialogForm.faceImageUrl) {
-          this.faceImage = [{
-            name: "",
-            url: this.dialogForm.faceImageUrl,
-            fileId: this.dialogForm.faceImage,
-          }];
+          this.faceImage = [
+            {
+              name: "",
+              url: this.dialogForm.faceImageUrl,
+              fileId: this.dialogForm.faceImage,
+            },
+          ];
         }
         if (this.dialogForm.imagesVo) {
           this.images = this.dialogForm.imagesVo;
@@ -338,13 +348,7 @@ export default {
       }
     },
   },
-  dicts: [
-    // "cultural_relic_texture",
-    "culturalRelicLevel",
-    // "cultural_relic_years",
-    "culturalRelicType",
-    "literature",
-  ],
+  dicts: ["culturalRelicLevel", "culturalRelicType", "literature"],
   data() {
     return {
       dialogForm: {
@@ -366,14 +370,33 @@ export default {
       images: [],
       videos: [],
       audios: [],
-      culturalRelicTexture: { 1: "铜", 1: "织绣" }, //TODO:等后台字典更新后改回
-      culturalRelicYears: { 1: "元(1206~1368)" },
+      culturalRelicTexture: "",
+      culturalRelicYears: "",
+      culturalRelicYearsProps: {
+        value: "value",
+        label: "label",
+        children: "children",
+        checkStrictly: true, //单选选择任意一级选项
+      },
     };
   },
   async created() {
-    setTimeout(() => {
-      console.log("22222this.dict", this.dict);
-    });
+    // setTimeout(() => {
+    //   console.log("22222this.dict", this.dict);
+    // });
+  },
+  mounted() {
+    this.$store
+      .dispatch("dict/getDictTree", [
+        "culturalRelicTexture",
+        "culturalRelicYears",
+      ])
+      .then((res) => {
+        // debugger;
+        // console.log(res);
+        this.culturalRelicTexture = res.culturalRelicTexture;
+        this.culturalRelicYears = res.culturalRelicYears;
+      });
   },
   methods: {
     // 关联文献查询
@@ -409,11 +432,12 @@ export default {
     // 取消编辑
     cancelForm() {
       this.$emit("handleClose");
-      this.literatureValues = [];
+      this.reset();
     },
     async handleSubmit() {
       var that = this;
       let formData = new FormData();
+      this.loading = true;
       // 已存在的文件的对象
       let successFilesObj = [];
       // 添加布展本身的媒体文件至formData
@@ -487,23 +511,38 @@ export default {
         const params = { ...this.dialogForm, deptId, regionCode };
         params.literature = this.literatureValues.join(",");
         params.status = this.dialogForm.status ? 1 : 0;
+        // 处理年份
+        params.years = params.years[params.years.length - 1];
+        // 处理质地TODO:
+        // params.texture = params.texture[params.texture.length - 1];
         let res = await addCulturalRelic(params);
         if (res.code == 0) {
           this.$message.success("提交成功！");
           this.loading = false;
           this.$emit("handleClose");
           this.$emit("refresh");
+          this.reset();
         }
       } else {
         const params = { ...this.dialogForm };
         params.literature = this.literatureValues.join(",");
         params.status = this.dialogForm.status ? 1 : 0;
+        // return;
+        // 处理年份
+        if (params.years instanceof Array) {
+          params.years = params.years[params.years.length - 1];
+        }
+        // 处理质地
+        // if (params.texture instanceof Array) {
+        //   params.texture = params.texture[params.texture.length - 1];
+        // }
         let res = await editCulturalRelic(params);
         if (res.code == 0) {
           this.$message.success("修改成功！");
           this.loading = false;
           this.$emit("handleClose");
           this.$emit("refresh");
+          this.reset();
         }
         // const {
         //   exhibitionId,
@@ -550,12 +589,11 @@ export default {
         .then((_) => {
           done();
           this.$emit("handleClose");
-          this.reset()
-          
+          this.reset();
         })
         .catch((_) => {});
     },
-        // 清空编辑组件中的所有值
+    // 清空编辑组件中的所有值
     reset() {
       //父组件将清空form绑定的值
       // 清空文献

src/views/display/components/InfoEditDialog.vue

@@ -749,14 +749,6 @@ export default {
       this.dialogForm.auidos = str;
     },
 
-    // startLoading() {
-    //   this.loading = true;
-    // },
-
-    // endLoading() {
-    //   this.loading = false;
-    // },
-
     refresh() {
       this.$emit("refresh");
     },