feat:博物馆新增、修改

src/api/dept.js

 import request from '@/utils/request'
 
+// 根据id查询博物馆详情
 export function getDeptDetailById(id) {
     return request({
       url: '/sys/dept/'+id,
       method: 'get',
     })
   }
-
+// 获取博物馆列表
   export function getDepList() {
     return request({
       url: '/sys/depts',
       method: 'get',
     })
-  }
+  }
\ No newline at end of file
+
+  
\ No newline at end of file

src/api/museum.js → src/api/org.js

@@ -55,3 +55,12 @@ export function deleteMuseum(id) {
     data
   })
 }
+
+// 查询行政区划树
+export function getSysRegionTree(params) {
+  return request({
+    url: `/sysRegion/tree`,
+    method: 'get',
+    params
+  })
+}

src/components/Dict/index.js

@@ -22,7 +22,9 @@ class Dict {
         nonExistentNames.push(name) //存入list中，单独进行处理调用
       }
     });
+
     var index = nonExistentNames.indexOf('literature')
+    
     if (index != -1) {
       // debugger
       Vue.set(this.dict, 'literature', []);

src/components/Uploader/index.vue → src/components/Uploader/AutoUploader.vue

@@ -15,6 +15,8 @@
       :list-type="listType"
       name="files"
       :accept="fileAccept"
+      ref="AutoUploader"
+      :http-request="httpRequest"
     >
       <i v-if="listType === 'picture-card'" class="el-icon-plus"></i>
       <el-button v-else size="small" type="primary">点击上传</el-button>
@@ -27,8 +29,9 @@
 </template>
 <script>
 import { getToken } from "@/utils/auth";
+import { upload } from "@/utils/upload";
 export default {
-  name: "Uploader",
+  name: "AutoUploader",
   props: {
     // 值
     value: [String, Object, Array],
@@ -81,7 +84,6 @@ export default {
     files: {
       handler: function (newVal, oldVal) {
         this.fileList = newVal;
-        
       },
       immediate: true,
       deep: true,
@@ -111,49 +113,59 @@ export default {
     this.fileList = JSON.parse(JSON.stringify(this.files));
   },
   methods: {
-    // 自定义上传实现，用于修改上传后的封面
-    uploadmany(file) {
-      var formData = new FormData(); //这是由于接口数据类型规定，可以根据自己所需进行更改
+    httpRequest(file) {
+      var formData = new FormData();
       formData.append("files", file.file);
       upload(formData).then((res) => {
         if (res.code == 0) {
-          console.log(res);
-          var last = res.data.substring(res.data.lastIndexOf(".")); //将接口中返回的各文件链接进行截取，来判断属于什么格式文件
-          if (last == ".pdf") {
-            this.fileList.push({
-              url: "https://img0.baidu.com/it/u=3644622474,3688361323&fm=26&fmt=auto&gp=0.jpg", //pdf封面图片
-              realUrl: res.data.result, //接口返回的pdf文件链接
-            });
-          } else if (
-            last == ".png" ||
-            last == ".jpg" ||
-            last == ".jpeg" ||
-            last == ".jfif"
-          ) {
-            this.fileList.push({
-              url: res.data.result,
-              realurl: res.data.result,
-            });
-          } else if (last == ".doc" || last == ".docx") {
-            this.fileList.push({
-              url: "https://img1.baidu.com/it/u=1714136260,3766911961&fm=26&fmt=auto&gp=0.jpg",
-              realurl: res.data.result,
-            });
-          } else if (last == ".xls" || last == ".xlsx") {
-            this.fileList.push({
-              url: "https://img1.baidu.com/it/u=1123362811,2189997153&fm=26&fmt=auto&gp=0.jpg",
-              realurl: res.data.result,
-            });
-          }
-        } else {
-          this.$message({
-            message: res.data.message,
-            type: "error",
-            offset: 70,
-          });
+          this.fileList = res.data;
+          this.changeFileList(res.data)
         }
       });
     },
+    // // 自定义上传实现，用于修改上传后的封面
+    // uploadmany(file) {
+    //   var formData = new FormData(); //这是由于接口数据类型规定，可以根据自己所需进行更改
+    //   formData.append("files", file.file);
+    //   upload(formData).then((res) => {
+    //     if (res.code == 0) {
+    //       console.log(res);
+    //       var last = res.data.substring(res.data.lastIndexOf(".")); //将接口中返回的各文件链接进行截取，来判断属于什么格式文件
+    //       if (last == ".pdf") {
+    //         this.fileList.push({
+    //           url: "https://img0.baidu.com/it/u=3644622474,3688361323&fm=26&fmt=auto&gp=0.jpg", //pdf封面图片
+    //           realUrl: res.data.result, //接口返回的pdf文件链接
+    //         });
+    //       } else if (
+    //         last == ".png" ||
+    //         last == ".jpg" ||
+    //         last == ".jpeg" ||
+    //         last == ".jfif"
+    //       ) {
+    //         this.fileList.push({
+    //           url: res.data.result,
+    //           realurl: res.data.result,
+    //         });
+    //       } else if (last == ".doc" || last == ".docx") {
+    //         this.fileList.push({
+    //           url: "https://img1.baidu.com/it/u=1714136260,3766911961&fm=26&fmt=auto&gp=0.jpg",
+    //           realurl: res.data.result,
+    //         });
+    //       } else if (last == ".xls" || last == ".xlsx") {
+    //         this.fileList.push({
+    //           url: "https://img1.baidu.com/it/u=1123362811,2189997153&fm=26&fmt=auto&gp=0.jpg",
+    //           realurl: res.data.result,
+    //         });
+    //       }
+    //     } else {
+    //       this.$message({
+    //         message: res.data.message,
+    //         type: "error",
+    //         offset: 70,
+    //       });
+    //     }
+    //   });
+    // },
 
     // 上传前校检格式和大小
     handleBeforeUpload(file) {
@@ -200,7 +212,6 @@ export default {
       console.log("res", res);
       console.log("fileList", fileList);
       this.$message.success("上传成功");
-      this.$emit("endLoading");
       this.changeFileList(fileList);
     },
     // 文件列表移除文件时的钩子
@@ -216,16 +227,17 @@ export default {
 
     // 文件列表改变的时候，更新组件的v-model的文的数据
     changeFileList(fileList) {
-      console.log("fileList", fileList);
-      const tempFileList = fileList.map((item) => {
-        let tempItem = {
-          name: item.name,
-          url: item.response ? item.response.data[0].url : item.url,
-        };
-        return tempItem;
-      });
-      this.$emit('input',tempFileList)
-      this.$emit("handleFileReady", tempFileList);
+      // console.log("fileList", fileList);
+      // const tempFileList = fileList.map((item) => {
+      //   let tempItem = {
+      //     name: item.name,
+      //     url: item.response ? item.response.data[0].url : item.url,
+      //   };
+      //   return tempItem;
+      // });
+      debugger
+      this.$emit("input", fileList);
+      // this.$emit("handleFileReady", tempFileList);
     },
   },
 };

src/store/modules/org.js

 import {
-  getMuseumTreeV1,
-} from '@/api/museum'
+  getMuseumTreeV1,getSysRegionTree
+} from '@/api/org'
 
 const getDefaultState = () => {
   return {
-    museumTree: [],
+    museumTree: [],//博物馆树
+    regionTree:[],//行政区划树
   }
 }
 
@@ -17,6 +18,9 @@ const mutations = {
   SET_MUSEUM_TREE: (state, museumTree) => {
     state.museumTree = museumTree
   },
+  SET_REGION_TREE:(state, regionTree)=>{
+    state.regionTree = regionTree
+  }
 }
 
 const actions = {
@@ -36,7 +40,7 @@ const actions = {
             data
           } = response
           commit('SET_MUSEUM_TREE', data)
-          resolve()
+          resolve(data)
         }).catch(error => {
           reject(error)
         })
@@ -44,7 +48,31 @@ const actions = {
     }
 
   },
+  getSysRegionTreeData({
+    commit
+  }, parentId) {
+    if (state.regionTree && state.regionTree.length > 0) {
+      return new Promise((resolve, reject) => {
+        resolve(state.regionTree)
+      })
+    } else {
+      return new Promise((resolve, reject) => {
+        getSysRegionTree({
+          parentId
+        }).then(response => {
+          const {
+            data
+          } = response
+          commit('SET_REGION_TREE', data)
+          resolve(data)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    }
 
+  },
+  
 }
 
 export default {

src/views/culturalRelic/components/InfoEditDialog.vue

@@ -244,14 +244,14 @@
 <script>
 import { getLiteratureList } from "@/api/literature";
 import { addCulturalRelic, editCulturalRelic } from "@/api/culturalRelic";
-import Uploader from "@/components/Uploader/index.vue";
+import AutoUploader from "@/components/Uploader/AutoUploader.vue";
 import ManualUploader from "@/components/Uploader/ManualUploader.vue";
 import { mapGetters } from "vuex";
 import { upload } from "@/utils/upload";
 export default {
   name: "InfoEditDialog",
   components: {
-    Uploader,
+    AutoUploader,
     ManualUploader,
   },
   props: {

src/views/museum/components/InfoEditDialog.vue

@@ -25,22 +25,31 @@
             style="width: 100%"
             v-model="dialogForm.pid"
             :options="orgTreeData"
-            :props="{ expandTrigger: 'hover' }"
-            @change="handleChangeOrgTree"
+            :props="optionProps"
+            :show-all-levels="false"
             placeholder="请选择所属部门"
+            :key="pidModalKey"
           >
-            <template slot-scope="{ node, data }">
-              <span>{{ data.label }}</span>
-              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-            </template>
           </el-cascader>
         </el-form-item>
-        <el-form-item label="所属地" :label-width="formLabelWidth">
+        <!-- <el-form-item label="所属地" :label-width="formLabelWidth">
           <el-input
             v-model="dialogForm.regionCode"
             autocomplete="off"
             placeholder="请选择所属地"
           ></el-input>
+        </el-form-item> -->
+        <el-form-item label="所属地" :label-width="formLabelWidth">
+          <el-cascader
+            style="width: 100%"
+            v-model="dialogForm.regionCode"
+            :options="regionTree"
+            :props="regionOptionProps"
+            :show-all-levels="false"
+            placeholder="请选择所属地"
+            :key="regionCodeModalKey"
+          >
+          </el-cascader>
         </el-form-item>
 
         <el-form-item label="经度" :label-width="formLabelWidth">
@@ -58,15 +67,17 @@
             placeholder="请输入纬度"
           ></el-input>
         </el-form-item>
-
+        <el-form-item label="状态" :label-width="formLabelWidth">
+          <el-switch v-model="status"> </el-switch>
+        </el-form-item>
         <el-form-item label="博物馆封面" :label-width="formLabelWidth">
-          <Uploader
+          <AutoUploader
             v-model="dialogForm.faceImage"
             :fileLimit="1"
             :fileSize="50"
             listType="picture-card"
             :fileType="['png', 'jpeg', 'jpg']"
-            ref="faceImage"
+            ref="museumFaceImage"
           />
         </el-form-item>
         <el-form-item label="简介" :label-width="formLabelWidth">
@@ -91,14 +102,13 @@
 </template>
 
 <script>
-import { addMuseum, editMuseum } from "@/api/museum";
-import Uploader from "@/components/Uploader/index.vue";
-import { mapGetters, mapActions } from "vuex";
-import { upload } from "@/utils/upload";
+import { addMuseum, editMuseum } from "@/api/org";
+import AutoUploader from "@/components/Uploader/AutoUploader.vue";
+import { mapGetters } from "vuex";
 export default {
   name: "InfoEditDialog",
   components: {
-    Uploader,
+    AutoUploader,
   },
   props: {
     visible: {
@@ -148,10 +158,31 @@ export default {
     form: {
       handler(value) {
         this.dialogForm = { ...value };
+        if (this.dialogForm.id) {
+          this.status = Boolean(Number(this.dialogForm.status));
+          // this.pidModalKey++; //回显
+          // this.regionCodeModalKey++; //回显
+        }
       },
       immediate: true,
       deep: true,
     },
+    orgTreeData(value) {
+      // 遍历，如果children为空，则直接去掉children，以免选择器中显示无结果
+      if (value) {
+        let tree = [...value];
+        loopTree(tree);
+        function loopTree(arr) {
+          arr.forEach((item) => {
+            if (item.children && item.children.length == 0) {
+              delete item.children;
+            } else {
+              loopTree(item.children);
+            }
+          });
+        }
+      }
+    },
   },
   data() {
     return {
@@ -159,10 +190,42 @@ export default {
         ...this.form,
       },
       formLabelWidth: "100px",
-      // orgTreeData: [],
+      optionProps: {
+        value: "id",
+        label: "name",
+        children: "children",
+        // checkStrictly: true,
+      },
+      regionOptionProps: {
+        value: "regionId",
+        label: "name",
+        children: "children",
+        // checkStrictly: true,
+      },
+      regionTree: [],
+      status: false,
+      pidModalKey: 0,
+      regionCodeModalKey: 0,
     };
   },
-
+  mounted() {
+    let parentId = "";
+    this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
+      this.regionTree = res;
+      loopTree(this.regionTree);
+      function loopTree(arr) {
+        if (arr && arr.length > 0) {
+          arr.forEach((item) => {
+            if (item.children && item.children.length == 0) {
+              delete item.children;
+            } else {
+              loopTree(item.children);
+            }
+          });
+        }
+      }
+    });
+  },
   methods: {
     handlePreview({ type, file }) {
       console.log(type, file);
@@ -179,23 +242,33 @@ export default {
     async handleSubmit() {
       if (this.dialogForm.id) {
       } else {
-        console.log(this.dialogForm);
-        const { faceImage } = this.dialogForm;
-        this.dialogForm.faceImage = faceImage.url;
-        let res = await addMuseum(this.dialogForm);
+        let params = { ...this.dialogForm };
+        const { faceImage } = params;
+        if (params.faceImage.length > 0) {
+          params = faceImage[0].fileId;
+        }
+        // 处理行政区划
+        params.regionCode = params.regionCode[params.regionCode.length - 1];
+        // 处理所属部门
+        params.pid = params.pid[params.pid.length - 1];
+        // 处理状态
+        params.status = params.status ? 1 : 0;
+        let res = await addMuseum(params);
         if (res.code == 0) {
+          this.$message.success("添加成功！");
           this.dialogForm = {};
           this.$emit("refresh");
+          this.$emit("handleClose");
         }
       }
     },
-    handleChangeOrgTree() {},
 
     handleClose(done) {
       this.$confirm("确认关闭？")
         .then((_) => {
           done();
           this.$emit("handleClose");
+          this.dialogForm = {};
         })
         .catch((_) => {});
     },

src/views/museum/index-old.vue

@@ -78,7 +78,7 @@ import {
   // getRCDetailById,
   // deleteCultralRelic,
   // editCulturalRelic,
-} from "@/api/museum";
+} from "@/api/org";
 import InfoEditDialog from "./components/InfoEditDialog";
 import SearchBar from "@/components/SearchBar";
 

src/views/museum/index.vue

@@ -2,12 +2,9 @@
   <div class="app-container">
     <div class="top-bar">
       <SearchBar :config="searchConfig" @search="search" @reset="reset" />
-      <el-button
-        type="primary"
-        @click.native="handleOperation({ type: 'add' })"
-      >
+      <el-button type="primary" @click.native="handleOperation('add')">
         <i class="el-icon-s-promotion"></i>
-        发布</el-button
+        添加</el-button
       >
     </div>
 
@@ -19,7 +16,6 @@
       border
       stripe
       default-expand-all
-
     >
       <el-table-column
         align="center"
@@ -31,7 +27,7 @@
         prop="regionName"
         label="归属地"
       ></el-table-column>
-      <el-table-column align="center" prop="status" label="状态">
+      <!-- <el-table-column align="center" prop="status" label="状态">
         <template slot-scope="scope">
           <el-popconfirm
             :title="getStatusTitle(scope.row.status)"
@@ -40,18 +36,28 @@
             <el-switch slot="reference" :value="scope.row.status"></el-switch>
           </el-popconfirm>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column align="center" prop="longitude" label="经度">
       </el-table-column>
       <el-table-column align="center" prop="latitude" label="纬度">
       </el-table-column>
-      <el-table-column align="center" prop="latitude" label="纬度">
-      </el-table-column>
       <el-table-column align="center" prop="intro" label="简介" />
       <el-table-column align="center" label="操作">
         <template slot-scope="scope">
-          <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
-          <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            icon="el-icon-edit"
+            @click.native="handleOperation('edit', scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-delete"
+            @click.native="handleOperation('delete', scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -69,12 +75,6 @@
 import TablePage from "@/components/Table/TablePage.vue";
 import TableOperation from "@/components/Table/TableOperation.vue";
 import { title, operates, operations } from "./config";
-import {
-  getMuseumList,
-  // getRCDetailById,
-  // deleteCultralRelic,
-  // editCulturalRelic,
-} from "@/api/museum";
 import InfoEditDialog from "./components/InfoEditDialog";
 import SearchBar from "@/components/SearchBar";
 
@@ -98,21 +98,14 @@ export default {
           type: "input",
           label: "博物馆名称",
         },
-        {
-          prop: "status",
-          type: "select",
-          label: "状态",
-          selectOptions: [
-            {
-              label: "已上架",
-              value: "1",
-            },
-            {
-              label: "已下架",
-              value: "0",
-            },
-          ],
-        },
+        // {
+        //   prop: "regionCode",
+        //   type: "select",
+        //   label: "地区",
+        //   selectOptions: [
+
+        //   ],
+        // },
       ],
       drawerVisible: false,
       isAdd: true,
@@ -127,6 +120,7 @@ export default {
       },
       loading: false,
       orgTreeData: [],
+      expandRow: [],
     };
   },
   watch: {
@@ -135,9 +129,10 @@ export default {
         this.dict = value;
       }
     },
-    // orgTreeData(value) {
-    //   console.log("123", value);
-    // },
+    orgTreeData(value) {
+      console.log("123", value);
+      // setTimeout(()=>{value},500)
+    },
   },
   computed: {
     tableTitle() {
@@ -164,18 +159,54 @@ export default {
   },
   methods: {
     async search(form) {
-      var params = {
-        page: this.list.current,
-        limit: this.list.size,
-        ...form,
-      };
-      if (params.status == "") {
-        delete params.status;
+      if (form.name) {
+        let searchValue = form.name;
+        let treeData = this.orgTreeData;
+        let handleTreeData = this.handleTreeData(treeData, searchValue);
+        // debugger;
+        this.setExpandRow(handleTreeData);
+        this.expandRow = this.expandRow.join(",").split(",");
+        this.orgTreeData = handleTreeData;
       }
-      console.log("params", params);
-      let res = await getMuseumList(params);
-      if (res.code == 0) {
-        this.list = res.data;
+    },
+
+    //  树形表格过滤
+    handleTreeData(treeData, searchValue) {
+      // debugger
+      if (!treeData || treeData.length === 0) {
+        return [];
+      }
+      const array = [];
+      for (let i = 0; i < treeData.length; i += 1) {
+        let match = false;
+        for (let pro in treeData[i]) {
+          if (typeof treeData[i][pro] == "string") {
+            match |= treeData[i][pro].includes(searchValue);
+            if (match) break;
+          }
+        }
+        if (
+          this.handleTreeData(treeData[i].children, searchValue).length > 0 ||
+          match
+        ) {
+          array.push({
+            ...treeData[i],
+            children: this.handleTreeData(treeData[i].children, searchValue),
+          });
+        }
+      }
+      return array;
+    },
+
+    setExpandRow(handleTreeData) {
+      if (handleTreeData.length) {
+        for (let i of handleTreeData) {
+          // debugger
+          this.expandRow.push(i.id);
+          if (i.children.length) {
+            this.setExpandRow(i.children);
+          }
+        }
       }
     },
 
@@ -186,31 +217,31 @@ export default {
     //   加载表格数据
     loadData() {
       this.$store.dispatch("org/getMuseumTreeData", "").then((res) => {
-        this.orgTreeData =res
+        this.orgTreeData = res;
       });
     },
 
-    async handleOperation(value, row) {
-      console.log("handleOperation", value, row);
-      switch (value.type) {
+    async handleOperation(type, row) {
+      console.log("handleOperation", type, row);
+      switch (type) {
         case "add":
           this.drawerVisible = true;
           break;
         case "view":
           break;
         case "edit":
-          let detailRes = await getRCDetailById({ crId: row.crId });
-          if (detailRes.code == 0) {
-            this.form = detailRes.data;
-            this.drawerVisible = true;
-          }
+          // let detailRes = await getRCDetailById({ crId: row.crId });
+          // if (detailRes.code == 0) {
+          // }
+          this.form = row;
+          this.drawerVisible = true;
           break;
         case "delete":
-          let deleteRes = await deleteCultralRelic([row.crId]);
-          if (deleteRes.code == 0) {
-            this.$message.success("删除成功！");
-            this.loadData();
-          }
+          // let deleteRes = await deleteCultralRelic([row.crId]);
+          // if (deleteRes.code == 0) {
+          //   this.$message.success("删除成功！");
+          //   this.loadData();
+          // }
           break;
       }
     },