修改试题类型页面内容

src/App.vue

@@ -37,7 +37,7 @@ export default {
         .then((res) => {
           this.$store.commit('common/SET_ENGINEERING_WORK_LIST', res.data);
           this.$_http
-            .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE)
+            .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE_CONDITION_PARENT)
             .then((res) => {
               this.$store.commit(
                 'common/SET_EXAM_QUESTION_TYPE_CONDITION',

src/api/modules/examQuestion.js

@@ -1,8 +1,10 @@
 /* JTXT系统相关api */
 export default {
   API_LIST_EXAM_QUESTION: {
-    // 查询所有试题类型
-    INTERFACE_GET_EXAMS_QUESTION_TYPE: "q-categories",
+    // 查询所有试题类型-父类
+    INTERFACE_GET_EXAMS_QUESTION_TYPE_CONDITION_PARENT: "q-categories",
+    // 查询所有试题类型-子类
+    INTERFACE_GET_EXAMS_QUESTION_TYPE_CONDITION_CHILDRENS: "q-categories/{categoryId}",
     // 新建试题类型
     INTERFACE_POST_EXAMS_QUESTION_TYPE_CREATE: "admin/qCategories",
     // 删除某个试题类型

src/views/examQuestionManagement/examQuestionTypeCondition.vue

@@ -5,31 +5,76 @@
       <div class="engineeringWork-create">
         <div class="engineeringWork-create-title">新建类型</div>
         <div class="engineeringWork-create-edit">
-          <div class="engineeringWork-create-none"></div>
           <div class="engineeringWork-create-input">
-            <span>类型名称：</span>
+            <span>父类名称：</span>
             <a-input
-              v-model.trim="questionTypeName"
+              v-model.trim="questionTypeParentName"
               placeholder="请输入试题类型"
             />
           </div>
           <a-button
             type="primary"
-            :disabled="!questionTypeName.length"
-            @click="engineeringWorkCreateFun"
-            >新建</a-button
+            :disabled="!questionTypeParentName.length"
+            @click="questionTypeConditionCreateParent"
+            >新建父类</a-button
+          >
+        </div>
+        <div class="engineeringWork-create-edit">
+          <div class="engineeringWork-create-input">
+            <span>所属父类：</span>
+            <a-select v-model="parentTypeValue">
+              <a-select-option
+                v-for="(item, index) in parentTypeTableList"
+                :key="index"
+                :value="item.id"
+              >
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </div>
+          <div class="engineeringWork-create-input">
+            <span>子类名称：</span>
+            <a-input
+              v-model.trim="questionTypeChildrenName"
+              placeholder="请输入试题类型"
+            />
+          </div>
+          <a-button
+            type="primary"
+            :disabled="!questionTypeChildrenName.length"
+            @click="questionTypeConditionCreateChildren"
+            >新建子类</a-button
           >
         </div>
       </div>
     </div>
     <div class="common-card a-card-margin-top">
-      <!-- 已有类型 -->
+      <!-- 已有类型-父类 -->
       <div class="engineeringWork-list">
-        <div class="engineeringWork-list-title">已有类型</div>
+        <div class="engineeringWork-list-title">已有父类</div>
         <a-table
           :columns="columns"
           :row-key="(record) => record.id"
-          :data-source="tableData"
+          :data-source="parentTypeTableList"
+          :pagination="false"
+        >
+          <a
+            slot="action"
+            slot-scope="text, record"
+            @click="engineeringWorkDelete(record)"
+            >删除</a
+          >
+        </a-table>
+      </div>
+    </div>
+    <div class="common-card a-card-margin-top">
+      <!-- 已有类型-子类 -->
+      <div class="engineeringWork-list">
+        <div class="engineeringWork-list-title">已有子类</div>
+        <a-table
+          :columns="columns"
+          :row-key="(record) => record.id"
+          :data-source="childrenTypeTableList"
           :pagination="false"
         >
           <a
@@ -52,9 +97,12 @@ export default {
   components: {},
   data() {
     return {
-      questionTypeName: '', // 新建试题类型的名称
+      questionTypeParentName: '', // 新建试题类型-父类的名称
+      parentTypeTableList: [], // 父类列表
+      parentTypeValue: '', // 所选父类
+      questionTypeChildrenName: '', // 新建试题类型-子类的名称
+      childrenTypeTableList: [], // 子类列表
       columns: [], // 表单配置
-      tableData: [], // 列表数据
     };
   },
   created() {
@@ -81,62 +129,106 @@ export default {
           width: 150,
         },
       ];
-      this.getTableListFun(); // 查询：试题列表
+      this.getTableParentListFun(); // 查询：列表-父类
+      this.getTableChildrenListFun(); // 查询：列表-子类
+    },
+    // 查询：试题类型列表-父类
+    getTableParentListFun() {
+      this.loading = true;
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE_CONDITION_PARENT)
+        .then((res) => {
+          this.parentTypeTableList = res.data;
+          this.parentTypeValue = this.parentTypeTableList[0].id;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
-    // 查询：试题类型列表
-    getTableListFun() {
+    // 查询：试题类型列表-子类
+    getTableChildrenListFun() {
       this.loading = true;
       this.$_http
-        .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE)
+        .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE_CONDITION_CHILDRENS)
         .then((res) => {
-          this.tableData = res.data;
+          this.childrenTypeTableList = res.data;
           this.loading = false;
         })
         .catch(() => {
           this.loading = false;
         });
     },
-    // 操作：新建试题类型
-    engineeringWorkCreateFun() {
+    // 操作：新建试题类型-父类
+    questionTypeConditionCreateParent() {
       this.loading = true;
       let params = {
-        name: this.questionTypeName,
+        name: this.questionTypeParentName,
         parentId: null,
       };
       this.$_http
         .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_TYPE_CREATE, params)
         .then(() => {
-          this.questionTypeName = '';
+          this.questionTypeParentName = '';
           this.loading = false;
-          this.$message.success('新建试题类型成功');
-          this.getTableListFun(); // 查询：试题类型列表
+          this.$message.success('新建 试题类型-父类 成功');
+          this.getTableParentListFun(); // 查询：试题类型列表
         })
         .catch(() => {
           this.loading = false;
         });
     },
-    // 操作：删除试题类型
-    engineeringWorkDelete(record) {
+    // 操作：新建试题类型-子类
+    questionTypeConditionCreateChildren() {
       this.loading = true;
       let params = {
-        categoryId: record.id,
+        name: this.questionTypeChildrenName,
+        parentId: this.parentTypeValue,
       };
       this.$_http
-        .delete(
-          formatePathParams(
-            this.$_API.INTERFACE_POST_EXAMS_QUESTION_TYPE_DELETE,
-            params
-          )
-        )
+        .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_TYPE_CREATE, params)
         .then(() => {
+          this.questionTypeChildrenName = '';
           this.loading = false;
-          this.$message.success('删除试题类型成功');
-          this.getTableListFun(); // 查询：试题类型列表
+          this.$message.success('新建 试题类型-子类 成功');
+          this.getTableChildrenListFun(); // 查询：试题类型列表
         })
         .catch(() => {
           this.loading = false;
         });
     },
+    // 操作：删除试题类型
+    engineeringWorkDelete(record) {
+      let that = this;
+      this.$confirm({
+        title: '删除',
+        content: `确认删除试题类型 ${record.name} 吗？`,
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+          that.loading = true;
+          let params = {
+            categoryId: record.id,
+          };
+          that.$_http
+            .delete(
+              formatePathParams(
+                that.$_API.INTERFACE_POST_EXAMS_QUESTION_TYPE_DELETE,
+                params
+              )
+            )
+            .then(() => {
+              that.loading = false;
+              that.$message.success('删除试题类型成功');
+              that.getTableParentListFun(); // 查询：试题类型列表
+            })
+            .catch(() => {
+              that.loading = false;
+            });
+        },
+        onCancel() {},
+      });
+    },
   },
 };
 </script>
@@ -155,12 +247,11 @@ export default {
       color: @mainColorBlack85;
     }
     .engineeringWork-create-edit {
+      margin-top: @paddingMarginVal;
+      padding: 0 100px 0 100px;
       display: flex;
-      .engineeringWork-create-none {
-        width: 100px;
-      }
+      justify-content: space-between;
       .engineeringWork-create-input {
-        margin-right: 50px;
         display: flex;
         align-items: center;
         > span {