perf: 优化后台添加文件夹

sample-form-manager-ui/admin/src/pages/software/materials/MaterialsManage.vue

@@ -57,7 +57,6 @@
               border
               tooltip-effect="dark"
               style="width: 100%"
-              max-height="676px"
               highlight-current-row
               reserve-selection
               :row-key="(row) => row.id"
@@ -127,7 +126,11 @@
             <el-button size="small" type="danger" @click="handleDelAll"
               >批量删除</el-button
             >
-            <el-button size="small" type="primary" @click="addMaterialsToFolder"
+            <el-button
+              size="small"
+              v-if="activeDep.id"
+              type="primary"
+              @click="addMaterialsToFolder"
               >移动至</el-button
             >
           </div>
@@ -178,7 +181,6 @@
             border
             tooltip-effect="dark"
             style="width: 100%"
-            max-height="676px"
             :row-key="(row) => row.id"
             @selection-change="handleSelectionChangeRight"
           >
@@ -207,6 +209,14 @@
                 </p>
               </template>
             </el-table-column>
+            <el-table-column
+              prop="categoryName"
+              show-overflow-tooltip
+              label="所属文件夹"
+              align="center"
+              width="100"
+            >
+            </el-table-column>
             <el-table-column
               prop="total"
               label="查看次数"
@@ -565,7 +575,7 @@ export default {
         this.$message.warning("请先勾选材料");
         return;
       }
-      this.$refs.FolderList.onAdd(this.rightSelectedRowKeys);
+      this.$refs.FolderList.onAdd(this.rightSelectedRowKeys, this.activeDep.id);
       this.folderListVisible = true;
     },
     materialsToFolderOk() {

sample-form-manager-ui/admin/src/pages/software/materials/modal/FolderList.vue

@@ -7,24 +7,45 @@
       @close="handleClose"
       :close-on-click-modal="false"
     >
-      <div class="folder-list">
-        <el-radio
-          v-model="form.categoryId"
-          name="type"
-          v-for="v in folderList"
-          :key="v.id"
-          :label="v.id"
+      <div class="folder-list" v-if="folderList.length">
+        <div class="folder-item-box" v-for="v in folderList" :key="v.id">
+          <div class="control">
+            <div class="flex flexc">
+              <i
+                class="el-icon-edit-outline pointer green mb10"
+                @click="handleEdit(v)"
+              ></i>
+              <i
+                class="el-icon-delete pointer delete"
+                @click="handleDel(v.id)"
+              ></i>
+            </div>
+          </div>
+          <el-card shadow="hover" :body-style="{ padding: '0px' }">
+            <div
+              :class="[
+                'folder-item',
+                'flex',
+                'flexc',
+                'aic',
+                'jca',
+                { active: v.id === categoryId },
+              ]"
+              @click="categoryId = v.id"
             >
-          <div class="folder-item flex flexc aic jca">
               <div class="folder-img-box flex aic jcc">
                 <i class="iconfont icon-folder"></i>
               </div>
+              <el-tooltip :content="v.categoryName" placement="top">
                 <p class="folder-name tac">{{ v.categoryName }}</p>
+              </el-tooltip>
+            </div>
+          </el-card>
         </div>
-        </el-radio>
       </div>
+      <el-empty v-else description="暂无文件夹"></el-empty>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="handleRest">重 置</el-button>
+        <el-button size="small" @click="handleClose">关 闭</el-button>
         <el-button
           :loading="loading"
           size="small"
@@ -34,13 +55,23 @@
         >
       </span>
     </el-dialog>
+    <!-- 新增文件夹 -->
+    <AddFolders
+      ref="AddFolders"
+      :addFolderVisible.sync="addFolderVisible"
+      @addSuccess="getMatterFolderList"
+    ></AddFolders>
   </div>
 </template>
 
-    <script>
-import { getMatterFolderList } from "@/api/matter";
+<script>
+import { getMatterFolderList, delMatterFolder } from "@/api/matter";
 import { batchSaveDatumToCategory } from "@/api/materials";
+import AddFolders from "./AddFolders.vue";
 export default {
+  components: {
+    AddFolders,
+  },
   props: {
     folderListVisible: {
       type: Boolean,
@@ -50,17 +81,12 @@ export default {
   },
   data() {
     return {
-      categoryId: "",
+      categoryId: "", // 选中文件夹
+      matterId: "", // 事项id
       folderList: [], // 分类列表
       materialList: [], // 材料列表
-      form: {
-        categoryId: "",
-        categoryName: "",
-        materialId: "",
-        materialName: "",
-        sort: 79,
-      },
       loading: false,
+      addFolderVisible: false,
     };
   },
   computed: {
@@ -77,14 +103,18 @@ export default {
   methods: {
     // 获取事项文件夹列表
     async getMatterFolderList() {
-      let res = await getMatterFolderList({ page: 1, size: -1 });
+      let res = await getMatterFolderList({
+        page: 1,
+        size: -1,
+        matterId: this.matterId,
+      });
       if (res.data.code == 1) {
         this.folderList = res.data.data.data;
       }
     },
     // 确定
     async handleOk() {
-      if (!this.form.categoryId) {
+      if (!this.categoryId) {
         this.$message.warning("请勾选文件夹");
         return;
       }
@@ -106,21 +136,15 @@ export default {
       }
     },
     // 新增
-    onAdd(row) {
-      Object.assign(this.form, this.$options.data().form);
-      this.form.id && this.$delete(this.form, "id");
-      //   this.form.materialId = row.id;
-      //   this.form.materialName = row.materialName;
-      this.materialList = row;
+    onAdd(materialList, matterId) {
+      this.materialList = materialList;
+      this.matterId = matterId;
       this.getMatterFolderList();
     },
-    // 编辑
-    onEdit(row) {
-      this.form = { ...row };
-    },
+
     // 重置
     handleRest() {
-      this.checked = "";
+      this.categoryId = "";
     },
     // 关闭
     handleClose() {
@@ -128,6 +152,32 @@ export default {
       this.loading = false;
       this.Visible = false;
     },
+    // 删除文件夹
+    handleDel(id) {
+      this.$confirm("此操作将删除该文件夹，是否继续?", "系统提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        cancelButtonClass: "btn-custom-cancel",
+        type: "warning",
+      })
+        .then(async () => {
+          let res = await delMatterFolder({ id });
+          let { code, msg } = res.data;
+          if (code === 1) {
+            this.$message.success(msg);
+            this.getMatterFolderList();
+          }
+        })
+        .catch(() => {
+          console.log("取消成功！");
+        });
+    },
+    // 编辑文件夹
+    handleEdit(row) {
+      this.$refs.AddFolders.onEdit(row);
+      this.addFolderVisible = true;
+      console.log(row);
+    },
   },
 };
 </script>
@@ -138,22 +188,40 @@ export default {
   max-height: 600px;
   overflow-y: auto;
   display: grid;
-  grid-template-columns: 182px 182px 182px 182px;
-  justify-content: center;
-  grid-row-gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  .folder-item-box {
+    width: 100%;
+    height: 140px;
+    position: relative;
+    .control {
+      top: 10px;
+      right: 10px;
+      position: absolute;
+      display: none;
+    }
+    i {
+      font-size: 18px;
+    }
+    &:hover {
+      .control {
+        display: block;
+      }
+    }
+  }
   .folder-item {
-    width: 120px;
+    width: 100%;
     height: 140px;
-    // border: 1px solid red;
+    cursor: pointer;
 
     .icon-folder {
       font-size: 50px;
-      color: #188fff;
+      color: #fca134;
     }
     .folder-img-box {
       width: 80px;
       height: 80px;
-      background-color: rgba(24, 143, 255, 0.1);
+      background-color: rgba(250, 147, 45, 0.1);
       border-radius: 4px;
     }
     .folder-name {
@@ -164,6 +232,17 @@ export default {
       white-space: nowrap;
     }
   }
+  .active {
+    .folder-img-box {
+      background-color: rgba(24, 143, 255, 0.1);
+    }
+    .icon-folder {
+      color: #188fff;
+    }
+    .folder-name {
+      color: #1890ff;
+    }
+  }
 }
 /deep/.el-checkbox__input {
   position: absolute !important;