update

src/components/layout/Aside.vue

@@ -30,7 +30,8 @@ export default {
           icon: 'el-icon-document',
           children: [
             { name: '新建试题', path: '/question/create' },
-            { name: '我的题库', path: '/question/list' }
+            { name: '我的题库', path: '/question/list' },
+            { name: '题库分类', path: '/question/classify' }
           ]
         },
         {

src/modules/question/api.js

@@ -12,6 +12,19 @@ export function getAppList(params) {
 export function getQuestionCategory(params) {
   return httpRequest.get(`/qbs/admin/v1/question-category/tree/${params}`)
 }
+/**
+ * 添加试题分类
+ */
+export function addQuestionCategory(data) {
+  return httpRequest.post('/qbs/admin/v1/question-category', data)
+}
+/**
+ * 更新应用
+ */
+export function updateQuestionCategory(id, data) {
+  return httpRequest.put(`/qbs/admin/v1/question-category/${id}`, data)
+}
+
 /**
  * 获取应用详情
  */

src/modules/question/index.js

@@ -17,8 +17,13 @@ const routes = [
       },
       {
         path: 'create',
-        component: () => import('./views/create.vue'),
+        component: () => import('./views/Create.vue'),
         meta: { title: '新建试题' }
+      },
+      {
+        path: 'classify',
+        component: () => import('./views/Classify.vue'),
+        meta: { title: '题库分类' }
       }
     ]
   }

src/modules/question/views/Classify.vue

+<template>
+  <app-card>
+    <el-button v-if="!treeList.length" type="primary" @click="centerDialogVisible = true">添加分类</el-button>
+    <div class="block">
+      <el-tree :data="treeList" node-key="id" default-expand-all :expand-on-click-node="true">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span>{{ node.label }}</span>
+          <span>
+            <el-button type="text" size="mini" @click="() => append(data)"> 添加子项 </el-button>
+            <el-button type="text" size="mini" @click="() => edit(data)"> 修改名称 </el-button>
+            <!-- <el-button type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button> -->
+          </span>
+        </span>
+      </el-tree>
+    </div>
+    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
+      <el-input v-model="treeParams.name" placeholder="请输入名称"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addTree()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </app-card>
+</template>
+
+<script>
+import { getQuestionCategory, addQuestionCategory, updateQuestionCategory } from '../api'
+// addQuestionCategory
+export default {
+  data() {
+    return {
+      centerDialogVisible: false,
+      inputName: '',
+      treeList: [],
+      treeParams: {
+        id: '',
+        name: '',
+        type: 'add'
+      }
+    }
+  },
+  mounted() {
+    this.getTreeList()
+  },
+  methods: {
+    // 获取tree列表
+    getTreeList() {
+      getQuestionCategory('x1').then(res => {
+        if (Array.isArray(res.data)) {
+          this.initTree(res.data)
+        }
+      })
+    },
+    // 发送请求添加 || 编辑tree
+    addTree() {
+      const data = {
+        project_prefix: 'x1',
+        pid: this.treeParams.id || 0,
+        category_name: this.treeParams.name || 'node'
+      }
+      if (this.treeParams.type === 'add') {
+        addQuestionCategory(data).then((res) => { res.code === 0 && init() })
+      } else {
+        updateQuestionCategory(data.pid, { category_name: data.category_name }).then((res) => { res.code === 0 && init() })
+      }
+      const _this = this
+      function init() {
+        _this.getTreeList()
+        _this.centerDialogVisible = false
+        _this.treeParams.name = ''
+        _this.treeParams.id = ''
+      }
+    },
+    // 过滤数据 变成tree组件需要的数据
+    initTree(data) {
+      this.treeList = data.reduce((a, b) => {
+        b.label = b.category_name
+        if (b.children.length) {
+          setData(b.children)
+        }
+        a.push(b)
+        return a
+      }, [])
+      function setData(item) {
+        return item.map(element => {
+          if (element.children.length) {
+            setData(element.children)
+            element.label = element.category_name
+          } else {
+            element.label = element.category_name
+          }
+          return element
+        })
+      }
+    },
+    // 点击添加子项按钮
+    append(data) {
+      this.centerDialogVisible = true
+      this.treeParams.id = data.id
+      this.treeParams.type = 'add'
+    },
+    // remove(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)
+    // },
+    // 点击编辑子项按钮
+    edit(data) {
+      this.centerDialogVisible = true
+      this.treeParams.id = data.id
+      this.treeParams.type = 'edit'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>