md

src/modules/question/components/FolderQuestionManageDialog.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-dialog
+    :visible.sync="modalIsShow"
+    title="文件夹管理"
+    :modal="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    fullscreen
+  >
+    <div class="folder-question">
+      <div class="folder-list">
+        <question-folder ref="QuestionFolder" is-edit></question-folder>
+      </div>
+      <div class="question-list"></div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import QuestionFolder from "./QuestionFolder.vue";
+export default {
+  name: "FolderQuestionManageDialog",
+  components: {
+    QuestionFolder,
+  },
+  data() {
+    return {
+      modalIsShow: false,
+    };
+  },
+  methods: {
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+  },
+};
+</script>

src/modules/question/components/QuestionFolder.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="question-folder">
+    <div class="folder-action box-justify">
+      <div v-if="isEdit">
+        <el-button
+          type="primary"
+          :disabled="curNodeData.level >= MAX_FOLDER_LEVEL"
+          @click="toAddFolder"
+          >新建文件夹</el-button
+        >
+        <el-button
+          type="danger"
+          :disabled="curNodeData.level >= MAX_FOLDER_LEVEL"
+          @click="toDeleteFolder"
+          >删除文件夹</el-button
+        >
+      </div>
+    </div>
+
+    <el-tree
+      class="folder-tree"
+      :data="classifyTree"
+      node-key="questionClassifyId"
+      default-expand-all
+      :expand-on-click-node="false"
+      :props="defaultProps"
+      @node-click="nodeClick"
+    >
+      <span slot-scope="{ node, data }">
+        <i class="icon icon-files-act node-icon"></i>
+        <span v-if="data.id === null" class="node-form">
+          <el-form
+            ref="modalFormComp"
+            :model="modalForm"
+            :rules="rules"
+            size="mini"
+            :show-message="false"
+            inline
+          >
+            <el-form-item prop="name">
+              <el-input
+                v-model="modalForm.name"
+                placeholder="请输入文件夹名称"
+                clearable
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-check"
+                :disabled="loading"
+                @click="toCreateFolder"
+              ></el-button>
+              <el-button
+                type="danger"
+                icon="el-icon-close"
+                :disabled="loading"
+                @click="toRemoveFolder(node, data)"
+              ></el-button>
+            </el-form-item>
+          </el-form>
+        </span>
+        <span
+          v-else
+          :class="['node-cont', { 'is-active': curNodeData.id === data.id }]"
+          >{{ node.label }}</span
+        >
+      </span>
+    </el-tree>
+  </div>
+</template>
+
+<script>
+import { classifyTreeApi, updateClassifyApi, deleteClassifyApi } from "../api";
+
+const initModalForm = {
+  id: null,
+  parentId: null,
+  name: "",
+  remark: "",
+};
+
+export default {
+  name: "QuestionFolderDialog",
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      MAX_FOLDER_LEVEL: 3,
+      classifyTree: [
+        {
+          id: 0,
+          parent: null,
+          name: "根目录",
+          children: [],
+        },
+      ],
+      defaultProps: {
+        label: "questionClassifyName",
+      },
+      curNodeData: {},
+      loading: false,
+      modalForm: {
+        ...initModalForm,
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入文件夹名称",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    async initData() {
+      await this.getClassifyTree();
+      if (this.folderId && !this.isEdit) {
+        this.curNodeData = this.findNodeById(this.folderId);
+      }
+    },
+    async getClassifyTree() {
+      const res = await classifyTreeApi();
+      this.classifyTree[0].children = res.data || [];
+    },
+    nodeClick(data) {
+      if (!data.id && data.id !== 0) {
+        this.$emit("selected", null);
+        return;
+      } else {
+        this.$emit("selected", data);
+      }
+
+      if (data.id === null || data.id === this.curNodeData.id) return;
+
+      this.clearPreNewNode();
+      this.$nextTick(() => {
+        this.curNodeData = this.findNodeById(data.id);
+      });
+    },
+    findNodeById(id) {
+      let curNode = null;
+      const findNode = (data, level) => {
+        if (curNode) return;
+        level++;
+        data.forEach((item) => {
+          if (curNode) return;
+
+          if (item.id === id) {
+            curNode = item;
+            curNode.level = level;
+            return;
+          }
+          if (item.children && item.children.length)
+            findNode(item.children, level);
+        });
+      };
+      findNode(this.classifyTree, 0);
+
+      return curNode || {};
+    },
+    clearPreNewNode() {
+      const removePreNewChild = (data) => {
+        data = data.filter((item) => item.id !== null);
+        return data.map((item) => {
+          if (item.children && item.children.length)
+            item.children = removePreNewChild(item.children);
+          return item;
+        });
+      };
+      this.classifyTree = removePreNewChild(this.classifyTree);
+    },
+    toAddFolder() {
+      if (!this.curNodeData.id) {
+        this.$message.error("请先选择文件夹！");
+        return;
+      }
+      if (this.curNodeData.level >= this.MAX_FOLDER_LEVEL) {
+        this.$message.error(`最多允许${this.MAX_FOLDER_LEVEL}级目录`);
+        return;
+      }
+      if (
+        this.curNodeData.children &&
+        this.curNodeData.children.find((item) => item.id === null)
+      ) {
+        this.$message.closeAll();
+        this.$message.error("有未创建完成的目录！");
+        return;
+      }
+      const newChild = {
+        ...initModalForm,
+        parentId: this.curNodeData.id,
+      };
+      if (!this.curNodeData.children) {
+        this.$set(this.curNodeData, "children", []);
+      }
+      this.curNodeData.children.push(newChild);
+      this.modalForm = { ...newChild };
+    },
+    async toCreateFolder() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.loading) return;
+      this.loading = true;
+      const res = await updateClassifyApi({ ...this.modalForm }).catch(
+        () => {}
+      );
+      this.loading = false;
+      if (!res) return;
+      this.$message.success("操作成功");
+      const newChild = this.curNodeData.find((item) => item.id === null);
+      newChild.id = res.data;
+    },
+    toRemoveFolder(node, data) {
+      const parent = node.parent;
+      const children = parent.data.children || parent.data;
+      const index = children.findIndex((d) => d.id === data.id);
+      children.splice(index, 1);
+    },
+    async toDeleteFolder() {
+      if (!this.curNodeData.id) return;
+      const confirm = await this.$confirm(`确定要删除选中的文件夹吗?`, "提示", {
+        type: "warning",
+      }).catch(() => {});
+      if (confirm !== "confirm") return;
+
+      if (this.loading) return;
+      this.loading = true;
+      const res = await deleteClassifyApi(this.curNodeData.id).catch(() => {});
+      this.loading = false;
+      if (!res) return;
+      this.$message.success("操作成功");
+      await this.getClassifyTree();
+    },
+    getSelectedNode() {
+      return this.curNodeData;
+    },
+  },
+};
+</script>

src/modules/question/components/QuestionFolderDialog.vue

@@ -8,74 +8,15 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     append-to-body
-    @open="visibleChange"
   >
-    <el-tree
-      class="folder-tree"
-      :data="classifyTree"
-      node-key="questionClassifyId"
-      default-expand-all
-      :expand-on-click-node="false"
-      :props="defaultProps"
-      @node-click="nodeClick"
-    >
-      <span slot-scope="{ node, data }">
-        <i class="icon icon-files-act node-icon"></i>
-        <span v-if="data.id === null" class="node-form">
-          <el-form
-            ref="modalFormComp"
-            :model="modalForm"
-            :rules="rules"
-            size="mini"
-            :show-message="false"
-            inline
-          >
-            <el-form-item prop="name">
-              <el-input
-                v-model="modalForm.name"
-                placeholder="请输入文件夹名称"
-                clearable
-              ></el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-button
-                type="primary"
-                icon="el-icon-check"
-                :disabled="loading"
-                @click="toCreateFolder"
-              ></el-button>
-              <el-button
-                type="danger"
-                icon="el-icon-close"
-                :disabled="loading"
-                @click="toRemoveFolder(node, data)"
-              ></el-button>
-            </el-form-item>
-          </el-form>
-        </span>
-        <span
-          v-else
-          :class="['node-cont', { 'is-active': curNodeData.id === data.id }]"
-          >{{ node.label }}</span
-        >
-      </span>
-    </el-tree>
-
+    <question-folder
+      v-if="modalIsShow"
+      ref="QuestionFolder"
+      :is-edit="isEdit"
+      @selected="nodeSelected"
+    ></question-folder>
     <div slot="footer" class="box-justify">
-      <div v-if="isEdit">
-        <el-button
-          type="primary"
-          :disabled="curNodeData.level >= MAX_FOLDER_LEVEL"
-          @click="toAddFolder"
-          >新建文件夹</el-button
-        >
-        <el-button
-          type="danger"
-          :disabled="curNodeData.level >= MAX_FOLDER_LEVEL"
-          @click="toDeleteFolder"
-          >删除文件夹</el-button
-        >
-      </div>
+      <div></div>
       <div>
         <el-button v-if="!isEdit" type="primary" @click="confirm"
           >确定</el-button
@@ -87,16 +28,11 @@
 </template>
 
 <script>
-import { classifyTreeApi, updateClassifyApi, deleteClassifyApi } from "../api";
+import QuestionFolder from "./QuestionFolder.vue";
 
-const initModalForm = {
-  id: null,
-  parentId: null,
-  name: "",
-  remark: "",
-};
 export default {
   name: "QuestionFolderDialog",
+  components: { QuestionFolder },
   props: {
     isEdit: {
       type: Boolean,
@@ -106,32 +42,7 @@ export default {
   data() {
     return {
       modalIsShow: false,
-      MAX_FOLDER_LEVEL: 3,
-      classifyTree: [
-        {
-          id: 0,
-          parent: null,
-          name: "根目录",
-          children: [],
-        },
-      ],
-      defaultProps: {
-        label: "questionClassifyName",
-      },
       curNodeData: {},
-      loading: false,
-      modalForm: {
-        ...initModalForm,
-      },
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入文件夹名称",
-            trigger: "change",
-          },
-        ],
-      },
     };
   },
   computed: {
@@ -140,123 +51,14 @@ export default {
     },
   },
   methods: {
-    async visibleChange() {
-      await this.getClassifyTree();
-      if (this.folderId && !this.isEdit) {
-        this.curNodeData = this.findNodeById(this.folderId);
-      }
-    },
     cancel() {
       this.modalIsShow = false;
     },
     open() {
       this.modalIsShow = true;
     },
-    async getClassifyTree() {
-      const res = await classifyTreeApi();
-      this.classifyTree[0].children = res.data || [];
-    },
-    nodeClick(data) {
-      if (data.id === null || data.id === this.curNodeData.id) return;
-      this.clearPreNewNode();
-      this.$nextTick(() => {
-        this.curNodeData = this.findNodeById(data.id);
-      });
-    },
-    findNodeById(id) {
-      let curNode = null;
-      const findNode = (data, level) => {
-        if (curNode) return;
-        level++;
-        data.forEach((item) => {
-          if (curNode) return;
-
-          if (item.id === id) {
-            curNode = item;
-            curNode.level = level;
-            return;
-          }
-          if (item.children && item.children.length)
-            findNode(item.children, level);
-        });
-      };
-      findNode(this.classifyTree, 0);
-
-      return curNode || {};
-    },
-    clearPreNewNode() {
-      const removePreNewChild = (data) => {
-        data = data.filter((item) => item.id !== null);
-        return data.map((item) => {
-          if (item.children && item.children.length)
-            item.children = removePreNewChild(item.children);
-          return item;
-        });
-      };
-      this.classifyTree = removePreNewChild(this.classifyTree);
-    },
-    toAddFolder() {
-      if (!this.curNodeData.id) {
-        this.$message.error("请先选择文件夹！");
-        return;
-      }
-      if (this.curNodeData.level >= this.MAX_FOLDER_LEVEL) {
-        this.$message.error(`最多允许${this.MAX_FOLDER_LEVEL}级目录`);
-        return;
-      }
-      if (
-        this.curNodeData.children &&
-        this.curNodeData.children.find((item) => item.id === null)
-      ) {
-        this.$message.closeAll();
-        this.$message.error("有未创建完成的目录！");
-        return;
-      }
-      const newChild = {
-        ...initModalForm,
-        parentId: this.curNodeData.id,
-      };
-      if (!this.curNodeData.children) {
-        this.$set(this.curNodeData, "children", []);
-      }
-      this.curNodeData.children.push(newChild);
-      this.modalForm = { ...newChild };
-    },
-    async toCreateFolder() {
-      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
-      if (!valid) return;
-
-      if (this.loading) return;
-      this.loading = true;
-      const res = await updateClassifyApi({ ...this.modalForm }).catch(
-        () => {}
-      );
-      this.loading = false;
-      if (!res) return;
-      this.$message.success("操作成功");
-      const newChild = this.curNodeData.find((item) => item.id === null);
-      newChild.id = res.data;
-    },
-    toRemoveFolder(node, data) {
-      const parent = node.parent;
-      const children = parent.data.children || parent.data;
-      const index = children.findIndex((d) => d.id === data.id);
-      children.splice(index, 1);
-    },
-    async toDeleteFolder() {
-      if (!this.curNodeData.id) return;
-      const confirm = await this.$confirm(`确定要删除选中的文件夹吗?`, "提示", {
-        type: "warning",
-      }).catch(() => {});
-      if (confirm !== "confirm") return;
-
-      if (this.loading) return;
-      this.loading = true;
-      const res = await deleteClassifyApi(this.curNodeData.id).catch(() => {});
-      this.loading = false;
-      if (!res) return;
-      this.$message.success("操作成功");
-      await this.getClassifyTree();
+    nodeSelected(node) {
+      this.curNodeData = node || {};
     },
     confirm() {
       if (!this.curNodeData.id && this.curNodeData.id !== 0) {

src/modules/question/views/QuestionManage.vue

@@ -85,39 +85,6 @@
     </div>
 
     <div class="part-box">
-      <el-table
-        v-loading="loading"
-        element-loading-text="加载中"
-        :data="folderList"
-      >
-        <el-table-column prop="classifyName" label="文件名称">
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              plain
-              @click="toEditFolder(scope.row)"
-              >编辑</el-button
-            >
-            <el-button
-              size="mini"
-              type="primary"
-              plain
-              @click="toMoveFolder(scope.row)"
-              >移动</el-button
-            >
-            <el-button
-              size="mini"
-              type="danger"
-              plain
-              @click="toDeleteFolder(scope.row)"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
       <el-table
         v-loading="loading"
         element-loading-text="加载中"
@@ -264,13 +231,11 @@
 
 <script>
 import {
-  classifyListApi,
   questionPageListApi,
   deleteQuestionApi,
   moveQuestionApi,
   moveClassifyApi,
   copyQuestionApi,
-  deleteClassifyApi,
 } from "../api";
 import QuestionStatisticsDialog from "../components/QuestionStatisticsDialog.vue";
 import QuestionSafetySetDialog from "../components/QuestionSafetySetDialog.vue";
@@ -314,18 +279,17 @@ export default {
     };
   },
   mounted() {
-    this.toPage(1);
+    // this.toPage(1);
   },
   methods: {
-    async getFolderList() {
-      const res = await classifyListApi(this.filter.classifyId);
-      this.folderList = res.data || [];
-    },
-    toFolder(classifyId) {
-      this.filter.classifyId = classifyId;
-      this.toPage(1);
-      this.getFolderList();
-    },
+    // async getFolderList() {
+    //   const res = await classifyListApi(this.filter.classifyId);
+    //   this.folderList = res.data || [];
+    // },
+    // toFolder(classifyId) {
+    //   this.filter.classifyId = classifyId;
+    //   this.toPage(1);
+    // },
     toPage(page) {
       this.currentPage = page;
       this.getList();
@@ -441,31 +405,31 @@ export default {
       this.curFolder = { parentId: this.filter.classifyId };
       this.$refs.ModifyFolder.open();
     },
-    toEditFolder(row) {
-      this.curFolder = row;
-      this.$refs.ModifyFolder.open();
-    },
-    toMoveFolder(row) {
-      console.log(row);
-      this.isEditFolder = false;
-      this.curMoveType = "folder";
-      this.curFolder = row;
-      this.$refs.QuestionFolderDialog.open();
-    },
-    async toDeleteFolder(row) {
-      const confirm = await this.$confirm(`确定要删除选中的文件夹吗?`, "提示", {
-        type: "warning",
-      }).catch(() => {});
-      if (confirm !== "confirm") return;
+    // toEditFolder(row) {
+    //   this.curFolder = row;
+    //   this.$refs.ModifyFolder.open();
+    // },
+    // toMoveFolder(row) {
+    //   console.log(row);
+    //   this.isEditFolder = false;
+    //   this.curMoveType = "folder";
+    //   this.curFolder = row;
+    //   this.$refs.QuestionFolderDialog.open();
+    // },
+    // async toDeleteFolder(row) {
+    //   const confirm = await this.$confirm(`确定要删除选中的文件夹吗?`, "提示", {
+    //     type: "warning",
+    //   }).catch(() => {});
+    //   if (confirm !== "confirm") return;
 
-      if (this.loading) return;
-      this.loading = true;
-      const res = await deleteClassifyApi(row.id).catch(() => {});
-      this.loading = false;
-      if (!res) return;
-      this.$message.success("操作成功");
-      await this.getClassifyTree();
-    },
+    //   if (this.loading) return;
+    //   this.loading = true;
+    //   const res = await deleteClassifyApi(row.id).catch(() => {});
+    //   this.loading = false;
+    //   if (!res) return;
+    //   this.$message.success("操作成功");
+    //   await this.getClassifyTree();
+    // },
     folderModified() {
       this.getFolderList();
     },