题库测试页面，涉及组件树

shikeying

2023-05-08 83efa8f1ebd3ad80dfb5078a10caf9fcc4499dc8

题库测试页面，涉及组件树

 src/api/etaa/paper.js

New file
@@ -0,0 +1,19 @@

// 新增
import request from "@/utils/request";

export function add(data) {
  return request({
    url: '/etaa/paper/add',
    method: 'post',
    data: data
  })
}

// 删除试卷。2023-05-07
export function deletePaper(id) {
  return request({
    url: '/etaa/paper/remove/' + id,
    method: 'get'
  })
}

 src/api/etaa/question_bank.js

@@ -24,14 +24,14 @@
    method: 'get'
  })
}
//
// // 查询部门详细
// export function getDept(deptId) {
//   return request({
//     url: '/system/dept/view/' + deptId,
//     method: 'get'
//   })
// }

// 查询添加试题，选择的分类信息。2023-05-02
export function getCatalogInfo(catalogId) {
  return request({
    url: '/etaa/question_bank/select/catalogInfo/' + catalogId,
    method: 'get'
  })
}
//
// // 查询部门下拉树结构
// export function treeselect(deptId) {
@@ -42,23 +42,22 @@
//   })
// }
//
// // 根据角色ID查询部门树结构
// export function roleDeptTreeselect(roleId) {
//   return request({
//     url: '/system/dept/roleDeptTreeselect/' + roleId,
//     method: 'get'
//   })
// }
//
// // 新增部门
// export function addDept(data) {
//   return request({
//     url: '/system/dept/add',
//     method: 'post',
//     data: data
//   })
// }
//

// 新增
export function add(data) {
  return request({
    url: '/etaa/question_bank/add',
    method: 'post',
    data: data
  })
}
// 清空题库，测试用
export function clear() {
  return request({
    url: '/etaa/question_bank/clear',
    method: 'get'
  })
}
// // 修改部门
// export function updateDept(data) {
//   return request({
@@ -68,10 +67,4 @@
//   })
// }
//
// // 删除部门
// export function delDept(deptId) {
//   return request({
//     url: '/system/dept/remove/' + deptId,
//     method: 'get'
//   })
// }


 src/views/components/myTableV3.vue

@@ -326,8 +326,6 @@
      return function(row) {
        const arr = []
        that.myTable.operation.attr.map(item => {
          console.log(item)
          console.log(!(item.hidden && item.hidden(row)) && item.checkPermission)
          if (!(item.hidden && item.hidden(row)) && item.checkPermission) {
            arr.push(item)
          }

 src/views/etaa/paper/add.vue

New file
@@ -0,0 +1,277 @@
<template>
  <win :title="setting.title" width="1024px" @close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm" label-position="right">
<!--      <el-form-item label="题库大类" prop="rootCatalog">-->
<!--        <el-select v-model="form.rootCatalog" placeholder="题库大类">-->
<!--          <el-option :value="form.rootCatalog" :label="form.rootCatalogName" :key="form.rootCatalog"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="题库大类" prop="rootCatalog">
        <el-select v-model="form.rootCatalog" placeholder="题库大类">
          <el-option
            v-for="dict in dict.type.question_root_catalog"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" prop="majorCatalog">
        <el-select v-model="form.majorCatalog" placeholder="二级分类">
          <el-option :value="form.majorCatalog" :label="form.majorCatalogName"/>
        </el-select>
      </el-form-item>
      <el-form-item label="试卷名称" prop="name">
        <el-input v-model="form.name" placeholder="" />
      </el-form-item>
      <el-form-item label="组卷策略" prop="paperPolicy">
        <el-radio-group v-model="form.paperPolicy" size="small" @input="onPaperPolicyChanged">
          <el-radio-button label="random">完全随机</el-radio-button>
          <el-radio-button label="assign_type">指定类型</el-radio-button>
          <el-radio-button label="manual">手动选择</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="指定类型" v-show="showPaperPolicyAssign">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="单选数量">
              <el-input-number v-model="paperPolicyContent.selectSingleCount" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单选总分">
              <el-input-number v-model="paperPolicyContent.selectSingleScore" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="多选数量">
              <el-input-number v-model="paperPolicyContent.selectMultipleCount" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="多选总分">
              <el-input-number v-model="paperPolicyContent.selectMultipleScore" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="判断数量">
              <el-input-number v-model="paperPolicyContent.trueOrFalseCount" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="判断总分">
              <el-input-number v-model="paperPolicyContent.trueOrFalseScore" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="填空数量">
              <el-input-number v-model="paperPolicyContent.completionCount" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="填空总分">
              <el-input-number v-model="paperPolicyContent.completionScore" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="简答数量">
              <el-input-number v-model="paperPolicyContent.shortAnswerCount" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="简答总分">
              <el-input-number v-model="paperPolicyContent.shortAnswerScore" :min="0" :max="200" size="small"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="手动选择" v-show="showPaperPolicyManual">

      </el-form-item>
      <el-form-item label="试题数量" prop="questionCount">
        <el-input-number v-model="form.questionCount" :min="2" :max="200" label="抽取试题总数"></el-input-number>
      </el-form-item>
      <el-form-item label="卷面总分" prop="scoreTotal">
        <el-input-number v-model="form.scoreTotal" :min="1" :max="500" label="试题总分"></el-input-number>
      </el-form-item>
      <el-form-item label="试题难度" prop="difficultLevel">
        <el-radio-group v-model="form.difficultLevel" size="small">
          <el-radio-button label="1">最简单</el-radio-button>
          <el-radio-button label="2">简单</el-radio-button>
          <el-radio-button label="3">中等</el-radio-button>
          <el-radio-button label="4">较难</el-radio-button>
          <el-radio-button label="5">最难</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="试卷状态" prop="dataStatus">
        <el-radio-group v-model="form.dataStatus" size="small">
          <el-radio-button label="0">正常</el-radio-button>
          <el-radio-button label="1">禁用</el-radio-button>
          <el-radio-button label="2" disabled>已删除</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="summary">
        <el-input type="textarea" :rows="3" v-model="form.summary" placeholder="" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <my-button-v2 name="关闭" site="form" @click="close" />
      <my-button-v2 name="保存" site="form" @click="save" />
    </div>
  </win>
</template>

<script>
  import win from '@/views/components/win'
  import myButtonV2 from '@/views/components/myButtonV2'
  import {add} from "@/api/etaa/paper";

  export default {
    name: "",
    components: { win, myButtonV2 },
    dicts: ['question_root_catalog'],
    props: {
      // setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
      // 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
      // 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
      setting: {
        type: Object,
        default: () => {
        }
      }
    },

    data(){
      return {
        // 显示抽取策略的区域
        showPaperPolicyAssign: false,
        showPaperPolicyManual: false,

        // 指定类型策略时，每种试题题量和总分
        paperPolicyContent: {
          selectSingleCount: 0,
          selectMultipleCount: 0,
          trueOrFalseCount: 0,
          completionCount: 0,
          shortAnswerCount: 0,
          selectSingleScore: 0,
          selectMultipleScore: 0,
          trueOrFalseScore: 0,
          completionScore: 0,
          shortAnswerScore: 0,
        },

        form: {
          id: null,
          name: null,
          orgId: this.setting.orgId,
          rootCatalog: this.setting.rootCatalog,
          majorCatalog: 0,    // 暂时没有实现选择二级分类树，要加上，2023-05-06
          paperPolicy: 'random',
          policyContent: null,
          questionCount: 10,
          difficultLevel: 3,
          scoreTotal: 0,
          scorePolicy: null,
          dataStatus: 0,
          summary: null
        },

        rules: {
          name: [
            { required: true, message: "请输入试卷名称", trigger: "blur" }
          ],
          rootCatalog: [
            { required: true, message: "选择题库大类", trigger: "blur" }
          ],
          paperPolicy: [
            { required: true, message: "选择组卷策略", trigger: "blur" }
          ],
          questionCount: [
            { required: true, message: "输入抽取试题总数", trigger: "blur" }
          ]
        },
      }
    },

    created() {

    },

    methods: {
      close() {
        this.$emit('close')
      },

      save(){
        this.$refs.form.validate(validate => {
          if(validate){
            if(this.form.paperPolicy == 'assign_type'){
              // 检查指定的试题类型抽取参数是否完整
              if(this.paperPolicyContent.selectSingleCount == 0
                  && this.paperPolicyContent.selectMultipleCount == 0
                  && this.paperPolicyContent.trueOrFalseCount == 0
                  && this.paperPolicyContent.completionCount == 0
                  && this.paperPolicyContent.shortAnswerCount == 0){
                this.$message.error('指定类型策略，需要录入每个题型数量、分值，不能全部为空!');
                return;
              }
              let scoreTotal = this.paperPolicyContent.selectSingleScore
                  + this.paperPolicyContent.selectMultipleScore
                  + this.paperPolicyContent.trueOrFalseScore
                  + this.paperPolicyContent.completionScore
                  + this.paperPolicyContent.shortAnswerScore;
              if(scoreTotal != this.form.scoreTotal){
                this.$message.error('指定类型策略，分项分值总和与总分不一致!');
                return;
              }

              // 把选择的各项题型信息数据组装起来
              this.form.policyContent = JSON.stringify(this.paperPolicyContent);
            }

            if(this.form.questionCount == 0){
              this.$message.error('试题总数必须大于0');
              return;
            }

            add(this.form).then(response => {
              // this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
              this.$message.success('保存成功！')
              this.$emit('search')
              this.close()
            });
          }
        });
      },

      onPaperPolicyChanged(val){
        console.log("选中了：" + val);
        if(val == 'assign_type'){
          this.showPaperPolicyAssign = true;
          this.showPaperPolicyManual = false;
        } else if(val == 'manual'){
          this.showPaperPolicyAssign = false;
          this.showPaperPolicyManual = true;
        } else {
          this.showPaperPolicyAssign = false;
          this.showPaperPolicyManual = false;
        }
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/etaa/paper/index.vue

New file
@@ -0,0 +1,254 @@
<template>
  <div class="app-main">
    <div class="base-container">
      <el-card shadow="never" class="box-card">
        <!--搜索条件-->
        <div class="filter-container">
          <el-form :inline="true" :model="filterForm" size="small">
            <el-form-item label="顶级单位">
              <el-select v-model="filterForm.orgId" placeholder="选择顶级单位" @change="search(1)">
                <el-option
                  v-for="org in this.rootOrgList" :key="org.id" :label="org.dept_name" :value="org.id"/>
              </el-select>
            </el-form-item>
            <!--            <el-form-item label="发起时间">-->
            <!--              <el-date-picker v-model="filterFrom.startTime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 177px" />-->
            <!--              - <el-date-picker v-model="filterFrom.finishTime" style="width: 177px" type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />-->
            <!--            </el-form-item>-->
            <el-form-item label="题库大类">
              <el-select v-model="filterForm.rootCatalog" placeholder="题库大类" clearable>
                <el-option
                  v-for="dict in dict.type.question_root_catalog"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="试卷名称">
              <el-input v-model="filterForm.content" placeholder="试卷名称关键词" clearable/>
            </el-form-item>
            <el-form-item>
              <my-button-v2 site="filter" name="搜索" @click="search(1)" />
              <my-button-v2 site="filter" name="重置" @click="reset()" />
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <!--列表-->
      <my-table-v3 ref="myTable" :filter="filterForm" :table="table" />
      <!--添加/编辑弹窗-->
      <add v-if="editSetting.show" :setting="editSetting" @close="editSetting.show=false" @search="search" />
    </div>
  </div>
</template>

<script>
  import { listOrgRoot } from '@/api/system/dept'
  import {deletePaper} from "@/api/etaa/paper";
  import myTableV3 from '@/views/components/myTableV3';
  import myButtonV2 from '@/views/components/myButtonV2'
  import {isEmptyValue} from "@/utils/StringUtils";
  import add from "./add";

  export default {
    name: "Paper",
    components: {myTableV3, myButtonV2, add},
    dicts: ['question_root_catalog'],
    data(){
      return {
        /** 搜索条件*/
        filterForm: {
          orgId: null,
          rootCatalog: null,
          rootCatalogName: null, // 临时存放名字
          majorCatalog: null,
          content: null
        },

        table: {
          autoLoad: false,
          showIndex: false, // 是否显示序号
          expand: false, // 是否显示详情数据
          checkBox: false, // 是否显示复选框
          url: globalConf.baseUrl + '/etaa/paper/list', // 请求地址
          // 工具条
          tools: {
            columnsCtrl: {// 列控制按钮
              show: true
            },
            generalExport: {// 通用导出按钮
              show: false
            },
            custom: [ // 自定义工具条按钮
              {
                name: '添加',
                checkPermission: 'etaa:paper:add',
                // myType: 'danger',
                mySize: 'mini',
                click: ()=> {
                  this.handleRAdd();
                }
              },
              {
                name: '导出参数',
                click: ()=> {

                }
              }
            ]
          },
          columns: [
            { title: '名称', field: 'name', align: 'left', width: 190 },
            { title: '大类', field: 'parameter.rootCatalogName', align: 'left', width: 100 },
            { title: '小类', field: 'majorCatalogName', align: 'left', width: 80 },
            { title: '组卷策略', field: 'paperPolicy', align: 'left', width: 90 },
            { title: '策略详情', field: 'policyContent', align: 'left', width: 150 },
            { title: '题量', field: 'questionCount', align: 'left', width: 60 },
            { title: '总分', field: 'scoreTotal', align: 'left', width: 60 },
            { title: '分值详情', field: 'scorePolicy', align: 'left', width: 120 },
            { title: '难度', field: 'difficultLevel', align: 'left', width: 70 },
            { title: '状态', field: 'dataStatus', align: 'left', width: 60, formatter: row => {
                let title = '';
                let type = 'primary';
                switch (row.dataStatus) {
                  case 0:
                    title = '正常'
                    break
                  case 1:
                    title = '禁用'
                    type = 'warn'
                    break
                  case 2:
                    title = '删除'
                    type = 'danger'
                    break
                }
                return { value: title, type: type }
              }
            },
            { title: '创建时间', field: 'parameter.createTimeName', align: 'left', width: 170 },
            { title: '创建人', field: 'parameter.createUserName', align: 'left', width: 90 },
            { title: '备注', field: 'summary', align: 'left', width: 160 }
          ],
          // 操作信息
          operation: {
            show: true, // 显示操作列
            width: '100', // 列宽
            attr: [
              {
                title: '编辑',
                checkPermission: 'etaa:paper:edit',
                events: row => {
                  this.handleUpdate(row)
                }
              },
              {
                title: '删除',
                checkPermission: 'etaa:paper:remove:query',
                events: row => {
                  this.handleDelete(row.id);
                }
              }
            ]
          },
          paging: {
            show: true, // 显示分页
            // 分页信息
            page: {
              small: false,
              pageNum: 1,
              pageSize: platformPageSize,
              total: 0
            }
          }
        },

        // 添加&编辑窗口
        editSetting: {
          id: null,
          title: '',
          show: false
        },

        // 2022-12-30 根机构列表，个人只能列出自己所在根机构
        rootOrgList:[],
        // 2022-12-30 超级管理员选择的顶级机构ID
        selectedRootOrgId: undefined,
      }
    },

    created() {
      this.getRootOrgList();
    },

    methods: {
      /** 获取顶级机构列表选择框 2022-12-30 */
      getRootOrgList(){
        listOrgRoot().then(response => {
          this.rootOrgList = response.data;
          this.selectedRootOrgId = this.rootOrgList[0].id;
          this.filterForm.orgId = this.selectedRootOrgId;
        }).then(() => {
          // this.listCatalogTree();
          this.search(1);
        }).catch(function() {
        });
      },

      // 重置
      reset() {
        this.filterForm = {
          orgId: this.selectedRootOrgId,
          rootCatalog: null,
          rootCatalogName: null,
          majorCatalog: null,
          content: null
        }
        this.search(1)
      },

      // 查询table列表
      search(pageNum) {
        if(isEmptyValue(this.filterForm.orgId)){
          return;
        } else {
          if (pageNum != undefined) {
            this.$refs.myTable.search({ pageNum: pageNum })
          } else {
            this.$refs.myTable.search()
          }
        }
      },

      handleRAdd(){
        if(isEmptyValue(this.selectedRootOrgId)){
          this.$message.warning("请先选择一个顶级机构");
          return;
        }
        // if(isEmptyValue(this.filterForm.rootCatalog)){
        //   this.$message.warning("请先选择题库大类");
        //   return;
        // }
        this.editSetting.id = null;
        this.editSetting.title = "添加试卷";
        this.editSetting.rootCatalog = this.filterForm.rootCatalog;
        this.editSetting.orgId = this.selectedRootOrgId;
        this.editSetting.show = true;
      },

      handleDelete(id){
        this.$modal.confirm("确定要删除试卷吗？仅在测试时可以，正式只能禁用").then(()=>{
          deletePaper(id).then(response => {
            this.search(1);
            this.$message.success("删除成功!");
          });
        }).catch(() => {});
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/etaa/question_bank/add.vue

New file
@@ -0,0 +1,151 @@
<template>
  <win :title="setting.title" width="800px" @close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="200px" class="demo-ruleForm" label-position="right">
      <el-form-item label="题库大类" prop="rootCatalog">
        <el-select v-model="form.rootCatalog" placeholder="题库大类">
          <el-option :value="form.rootCatalog" :label="form.rootCatalogName" :key="form.rootCatalog"/>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" prop="majorCatalog">
        <el-select v-model="form.majorCatalog" placeholder="二级分类">
          <el-option :value="form.majorCatalog" :label="form.majorCatalogName"/>
        </el-select>
      </el-form-item>
      <el-form-item label="试题类型" prop="questionType">
        <el-select v-model="form.questionType" placeholder="试题类型">
          <el-option v-for="d in this.questionTypeList" :key="d.key" :label="d.value" :value="d.key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="试题难度" prop="difficultLevel">
        <el-input v-model="form.difficultLevel" placeholder="1到5,1表示最简单"  maxlength="1" value="3"/>
      </el-form-item>
      <el-form-item label="试题内容" prop="content">
        <el-input type="textarea" :rows="5" v-model="form.content" placeholder="" />
      </el-form-item>
      <el-form-item label="参考答案" prop="answer">
        <el-input v-model="form.answer" placeholder="判断题输入：对、错，多个填空用分号分隔，选择题输入：ABC等" />
      </el-form-item>
      <el-form-item label="讲解分析" prop="analysis">
        <el-input v-model="form.analysis" placeholder="可选" />
      </el-form-item>

      <el-form-item label="上传图片（可选）" prop="attachImg">
        <el-input v-model="form.attachImg" placeholder="内容支持图片" />
      </el-form-item>
      <el-form-item label="上传视频（可选）" prop="attachVideo">
        <el-input v-model="form.attachVideo" placeholder="内容支持短视频" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <my-button-v2 name="关闭" site="form" @click="close" />
      <my-button-v2 name="保存" site="form" @click="save" />
    </div>
  </win>
</template>

<script>
  import win from '@/views/components/win'
  import myButtonV2 from '@/views/components/myButtonV2'
  import {listQuestionType, add, getCatalogInfo} from "@/api/etaa/question_bank";

  export default {
    name: "",
    components: { win, myButtonV2 },
    // dicts: ['question_difficult'],
    props: {
      // setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
      // 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
      // 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
      setting: {
        type: Object,
        default: () => {
        }
      }
    },
    data(){
      return {
        form: {
          id: null,
          orgId: this.setting.orgId,
          rootCatalog: null,
          rootCatalogName: null,
          majorCatalog: null,
          majorCatalogName: null,
          questionType: null,
          difficultLevel: 3,
          answer: null,
          analysis: null,
          attachImg: null,
          attachVideo: null
        },
        // 试题类别列表，2023-03-11
        questionTypeList: [],

        rules: {
          rootCatalog: [
            { required: true, message: "必须选择题库分类", trigger: "blur" }
          ],
          questionType: [
            { required: true, message: "选择试题类型", trigger: "blur" }
          ],
          answer: [
            { required: true, message: "输入参考答案", trigger: "blur" }
          ],
          content: [
            { required: true, message: "输入试题内容", trigger: "blur" }
          ]
        },
      }
    },

    created() {
      this.getQuestionTypeList();
      this.loadCatalogInfo();
    },

    methods: {
      /** 获取试题类别集合 2023-03-11 */
      getQuestionTypeList(){
        listQuestionType().then(response => {
          // console.log(response.data);
          this.questionTypeList = response.data;
        });
      },

      loadCatalogInfo(){
        console.log("catalogId = " + this.setting.catalogId);
        getCatalogInfo(this.setting.catalogId).then(response => {
          this.form.rootCatalog = response.data.rootCatalog;
          this.form.rootCatalogName = response.data.parameter.rootCatalogName;
          this.form.majorCatalog = response.data.majorCatalog;
          this.form.majorCatalogName = response.data.parameter.majorCatalogName;
          this.open = true;
        });
      },

      save(){
        this.$refs.form.validate(validate => {
          if(validate){
            add(this.form).then(response => {
              // this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
              this.$message.success('保存成功！')
              this.$emit('search')
              this.close()
            });
          }
        });
      },

      close() {
        this.$emit('close')
      },
    }
  }
</script>

<style scoped>

</style>

 src/views/etaa/question_bank/index.vue

@@ -1,253 +1,166 @@
<template>
  <div class="app-container">
  <div class="app-main info-main">
    <el-aside class="sidebar-box" style="padding: 0;">
      <div class="sidebar">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>
              <svg-icon icon-class="nested" style="margin-top: -2px;" />题库分类
            </span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="expandedAll">收起</el-button>
          </div>
          <el-input v-model="filterText" clearable placeholder="关键字过滤" />
          <el-tree ref="treeRef" :data="treeData" :default-expanded-keys="defaultExpandedKeys" :filter-node-method="filterNode" :props="defaultProps" highlight-current node-key="id" @node-click="handleNodeClick" />
        </el-card>
      </div>
    </el-aside>

    <el-row :gutter="10" class="mb8">
      <el-col :span="6" :xs="24">
        <div class="head-container">
          <el-tree
            :data="catalogListOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
    <div class="base-container flex-1">
      <el-card shadow="never" class="box-card">
        <!--搜索条件-->
        <div class="filter-container">
          <el-form :inline="true" :model="filterForm" size="small">
            <el-form-item label="顶级单位">
              <el-select v-model="filterForm.orgId" placeholder="选择顶级单位" @change="search(1)">
                <el-option
                  v-for="org in this.rootOrgList" :key="org.id" :label="org.dept_name" :value="org.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="试题类型">
              <el-select v-model="filterForm.questionType" placeholder="试题类型">
                <el-option v-for="d in this.questionTypeList" :key="d.key" :label="d.value" :value="d.key"/>
              </el-select>
            </el-form-item>
            <el-form-item label="试题题目">
              <el-input v-model="filterForm.content" placeholder="试题内容" clearable/>
            </el-form-item>
            <el-form-item>
              <my-button-v2 site="filter" name="搜索" @click="search(1)" />
              <my-button-v2 site="filter" name="重置" @click="reset()" />
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="顶级单位" prop="orgId">
            <el-select v-model="queryParams.orgId" placeholder="选择顶级单位" @change="getList()">
              <el-option
                v-for="org in this.rootOrgList"
                :key="org.id"
                :label="org.dept_name"
                :value="org.id"
              />
            </el-select>
          </el-form-item>
      </el-card>

          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="queryParams.questionType" placeholder="试题类型">
              <el-option
                v-for="d in this.questionTypeList"
                :key="d.key"
                :label="d.value"
                :value="d.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="试题题目" prop="content">
            <el-input
              v-model="queryParams.content"
              placeholder="试题内容"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
<!--          <el-form-item label="专业分类" prop="majorCode">-->
<!--            <el-select v-model="queryParams.majorCode" placeholder="请选择专业分类" clearable>-->
<!--              <el-option-->
<!--                v-for="dict in dict.type.sys_job_status"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['exam:online:add']"
            >添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['exam:online:delBatch']"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-search"
              size="mini"
              @click="handleExport"
              v-hasPermi="['exam:online:exist']"
            >查重</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleExport"
              v-hasPermi="['exam:online:upload']"
            >导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-download"
              size="mini"
              @click=""
              v-hasPermi="['exam:online:download']"
            >模板下载</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="examList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="left" />
          <el-table-column label="ID" align="left" prop="id" :show-overflow-tooltip="true" />
          <el-table-column label="归属" align="left" prop="parameter.orgName"/>
          <el-table-column label="大类" align="left" prop="parameter.rootCatalogName"/>
          <el-table-column label="子分类" align="left" prop="parameter.majorCatalogName"/>
          <el-table-column label="题目" align="left" prop="content" :show-overflow-tooltip="true" />
          <el-table-column label="试题类型" align="left" prop="parameter.questionTypeName"/>
          <el-table-column label="创建人" align="left" prop="createUserId" :show-overflow-tooltip="true" />
          <el-table-column label="创建时间" align="left" prop="parameter.createTimeName" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['exam:online:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['exam:online:del']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改定时任务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属分类" prop="majorId">
              <el-select v-model="form.majorId" placeholder="请选择所属分类">
                <el-option
                  v-for="dict in dict.type.sys_job_group"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="题目类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择题目类型">
                <el-option
                  v-for="dict in dict.type.sys_job_group"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="题目" prop="content">
              <el-input v-model="form.content" placeholder="请输入题目"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 试题库详细 -->
    <el-dialog title="试题库详细" :visible.sync="openView" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="120px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属分类：">{{ form.id }}</el-form-item>
            <el-form-item label="题目类型：">{{ form.jobName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="题目：">{{ "" }}</el-form-item>
            <el-form-item label="答案：">{{ form.createTime }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关 闭</el-button>
      </div>
    </el-dialog>
      <!--列表-->
      <my-table-v3 ref="myTable" :filter="filterForm" :table="table" />
    </div>
    <!--添加/编辑弹窗-->
    <add v-if="editSetting.show" :setting="editSetting" @search="search()" @close="editSetting.show=false"/>
    <!-- 导入窗口-->
    <my-import :import-setting="importSetting" :dialog-show="importSetting.dialogShow" :dialog-title="importSetting.dialogTitle"/>
  </div>
</template>

<script>
  // import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job";
  import { listOrgRoot, listOrgRootTree } from '@/api/system/dept'
  import { listCatalogTreeList, listQuestion, listQuestionType } from '@/api/etaa/question_bank'
  import { getToken } from '@/utils/auth'
  import {listOrgRoot} from '@/api/system/dept'
  import {clear, listCatalogTreeList, listQuestionType} from '@/api/etaa/question_bank'
  import myTableV3 from '@/views/components/myTableV3';
  import myButtonV2 from '@/views/components/myButtonV2'
  import myImport from '@/views/components/myImport'
  import {isEmptyValue} from "@/utils/StringUtils";
  import add from './add'

  export default {
  // components: { Crontab },
    components: {myTableV3, myButtonV2, add, myImport},
  name: "questionBank",
  dicts: ['sys_job_status'],
  data() {
    return {
      // 日期范围
      dateRange: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      examList: [],
      /** 树配置*/
      defaultExpandedKeys: [1], // 默认展开的key
      filterText: '',
      treeData: [],
      /** 分类树数据结构 */
      defaultProps: {
        children: "children",
        label: "label"
      },

      /** 搜索条件*/
      filterForm: {
        orgId: null,
        questionType: null,
        content: null
      },

      table: {
        // size: "small",
        autoLoad: false,
        showIndex: false, // 是否显示序号
        expand: false, // 是否显示详情数据
        checkBox: false, // 是否显示复选框
        url: globalConf.baseUrl + '/etaa/question_bank/list', // 请求地址
        // 工具条
        tools: {
          columnsCtrl: {// 列控制按钮
            show: true
          },
          generalExport: {// 通用导出按钮
            show: false
          },
          custom: [ // 自定义工具条按钮
            {
              name: '添加试题',
              // checkPermission: 'system:config:remove',
              // myType: 'danger',
              mySize: 'mini',
              click: ()=> {
                this.handleAdd();
              }
            },
            {
              name: '导入',
              click: ()=> {
                this.handleImport();
              }
            },
            {
              name: '清空题库',
              checkPermission: 'etaa:question_bank:clear',
              myType: 'info',
              mySize: 'mini',
              click: ()=> {
                this.handleClear();
              }
            }
          ]
        },
        columns: [
          { title: 'ID', field: 'id', align: 'left', width: 80 },
          { title: '归属', field: 'parameter.orgName', align: 'left', width: 130 },
          { title: '大类', field: 'parameter.rootCatalogName', align: 'left', width: 150 },
          { title: '子分类', field: 'parameter.majorCatalogName', align: 'left', width: 160},
          { title: '题目', field: 'content', align: 'left', width: 230 },
          { title: '题型', field: 'parameter.questionTypeName', align: 'left', width: 80 },
          { title: '创建人', field: 'createUserId', align: 'left', width: 80 },
          { title: '创建时间', field: 'parameter.createTimeName', align: 'left', width: 160 }
        ],
        // 操作信息
        operation: {
          show: true, // 显示操作列
          width: '100', // 列宽
          attr: [
            {
              title: '编辑',
              checkPermission: 'system:config:edit',
              events: row => {
                this.handleUpdate(row)
              }
            }
          ]
        },
        paging: {
          show: true, // 显示分页
          // 分页信息
          page: {
            small: false,
            pageNum: 1,
            pageSize: platformPageSize,
            total: 0
          }
        }
      },

      // 2022-12-30 根机构列表，个人只能列出自己所在根机构
      rootOrgList:[],
@@ -255,48 +168,81 @@
      selectedRootOrgId: undefined,
      // 试题类别列表，2023-03-11
      questionTypeList: [],
      // 2023-03-13 试题类别树数据选项
      catalogListOptions: undefined,
      /** 分类树数据结构 */
      defaultProps: {
        children: "children",
        label: "label"

      // 添加&编辑窗口
      editSetting: {
        id: null,
        title: '',
        show: false
      },

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示详细弹出层
      openView: false,
      // 是否显示Cron表达式弹出层
      openCron: false,
      // 传入的表达式
      expression: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        content: undefined,
        catalogId: undefined,
        orgId: undefined,
        questionType: undefined
      // 导入
      importSetting: {
        dialogTitle: '导入',
        dialogShow: false,
        fileSettings: {
          uploadUrl: globalConf.baseUrl + "/etaa/question_bank/select/import?Authorization=" + getToken(), // 上传地址
          accept: '.xlsx,.csv', // 格式
          type: 'text', // 回显形式
          loading: false // 导入效果
        },
        /* 模板下载 */
        templateSettings: {
          templateName: '题库导入模板.xlsx', // 名称
          templateUrl: globalConf.baseUrl + '/etaa/question_bank/select/downloadTemplate?Authorization=' + getToken() // 下载地址
        },
        onSuccess: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        content: [
          { required: true, message: "题目不能为空", trigger: "blur" }
        ]
      }
    };
  },

  created() {
    this.getRootOrgList();
    this.getQuestionTypeList();
  },
  methods: {
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true;
      console.log("value = " + value + ", data = " + data);
      return data.label.indexOf(value) !== -1;
    },
    // 树节点收起
    expandedAll() {
      const nodes = this.$refs.treeRef.store._getAllNodes()
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].expanded = false
      }
      // 编辑页面
      // this.editSetting.orgId = null
      // this.editSetting.orgName = '无'
      this.reset()
    },

    // 重置
    reset() {
      this.filterForm = {
        orgId: this.selectedRootOrgId,
        questionType: null,
        content: null
      }
      this.search(1)
    },

    // 查询table列表
    search(pageNum) {
      if(isEmptyValue(this.filterForm.orgId)){
        return;
      } else {
        // console.log("-----------" + this.filterForm.orgId);
        if (pageNum != undefined) {
          this.$refs.myTable.search({ pageNum: pageNum })
        } else {
          this.$refs.myTable.search()
        }
      }
    },

    /** 获取试题类别集合 2023-03-11 */
    getQuestionTypeList(){
      listQuestionType().then(response => {
@@ -306,95 +252,33 @@
    },
    /** 获取顶级机构列表选择框 2022-12-30 */
    getRootOrgList(){
      this.loading = true;
      listOrgRoot().then(response => {
        this.rootOrgList = response.data;
        this.selectedRootOrgId = this.rootOrgList[0].id;
        this.queryParams.orgId = this.selectedRootOrgId;
        this.loading = false;
        this.filterForm.orgId = this.selectedRootOrgId;
      }).then(() => {
        this.listCatalogTree();
        this.getList();
        this.search(1);
      }).catch(function() {
        this.loading = false;
      });
    },

    // 试题类别树
    listCatalogTree(){
      listCatalogTreeList("question_root_catalog").then(response => {
        console.log(response.data);
        this.catalogListOptions = response.data;
        // console.log(response.data);
        this.treeData = response.data;
      });
    },

    /** 查询列表 */
    getList() {
      this.loading = true;
      listQuestion(this.queryParams).then(response => {
        this.examList = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      console.log("value = " + value + ", data = " + data);
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.catalogId = data.id;
      this.handleQuery();
      // 保持已展开的菜单刷新后依旧展开
      this.defaultExpandedKeys = [data.id];
      this.filterForm.catalogId = data.id;
      this.search(1);
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        content: undefined,
        concurrent: 1,
        status: "0"
      };
      this.dateRange = [];// 时间范围
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.orgId = this.selectedRootOrgId;
      this.queryParams.questionType = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.name + '"任务吗？').then(function() {
        return changeJobStatus(row.id, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    /** 任务详细信息 */
    handleView(row) {
      // getJob(row.id).then(response => {
@@ -404,10 +288,21 @@
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加试题库";
      if(isEmptyValue(this.selectedRootOrgId)){
        this.$message.warning("请先选择一个顶级机构");
        return;
      }
      if(isEmptyValue(this.filterForm.catalogId)){
        this.$message.warning("请先选择题库分类");
        return;
      }
      this.editSetting.id = null;
      this.editSetting.title = "添加试题";
      this.editSetting.catalogId = this.filterForm.catalogId;
      this.editSetting.orgId = this.selectedRootOrgId;
      this.editSetting.show = true;
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
@@ -418,6 +313,65 @@
        this.title = "修改试题库";
      });
    },

    handleClear(){
      this.$modal.confirm('要清空题库吗？通常只有测试阶段需要使用!').then(function() {
        return clear();
      }).then(() => {
        this.search(1);
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },

    handleImport(){
      this.importSetting.dialogShow = true
      this.importSetting.onSuccess = (response, callBack) => {
        console.log(response);
        if(response.code != 1){
          this.$message.error('导入失败' || response.msg);
          callBack();
          return;
        }

        if(isEmptyValue(response.data)){
          // 没有返回错误记录文件
          this.$message.success("导入成功");
          this.search();
          callBack();
          return;
        }

        this.$confirm("请查看导入错误，文件:" + response.data, '导入完成', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          this.search()
        });
        // user.importUser(response.data[0]).then(response => {
        //   if (response.code === 10000) {
        //     this.importSetting.dialogShow = false
        //     if (response.data.errorInfo.length === 0) {
        //       this.$message.success(response.data.info)
        //       this.search()
        //     } else {
        //       const errorInfoList = response.data.errorInfo
        //       var errorInfo = errorInfoList.join('')
        //       this.$confirm(errorInfo, '提示', {
        //         confirmButtonText: '确定',
        //         type: 'warning'
        //       }).then(() => {
        //         this.search()
        //       })
        //     }
        //   } else {
        //     this.$message.error('导入失败' || response.description)
        //     this.search()
        //   }
        //   callBack()
        // })
      }
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
@@ -457,3 +411,14 @@
  }
};
</script>
<style scope lang="scss">
  .info-main{
    display:-webkit-box;
    display: -moz-box;
    display: -0-box;
    min-height: calc( 100vh - 50px);
  }
  .flex-1{
    flex:1;
  }
</style>

 src/views/etaa/question_bank/index_old.vue

New file
@@ -0,0 +1,459 @@
<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="6" :xs="24">
        <div class="head-container">
          <el-tree
            :data="catalogListOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="顶级单位" prop="orgId">
            <el-select v-model="queryParams.orgId" placeholder="选择顶级单位" @change="getList()">
              <el-option
                v-for="org in this.rootOrgList"
                :key="org.id"
                :label="org.dept_name"
                :value="org.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="queryParams.questionType" placeholder="试题类型">
              <el-option
                v-for="d in this.questionTypeList"
                :key="d.key"
                :label="d.value"
                :value="d.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="试题题目" prop="content">
            <el-input
              v-model="queryParams.content"
              placeholder="试题内容"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
<!--          <el-form-item label="专业分类" prop="majorCode">-->
<!--            <el-select v-model="queryParams.majorCode" placeholder="请选择专业分类" clearable>-->
<!--              <el-option-->
<!--                v-for="dict in dict.type.sys_job_status"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['exam:online:add']"
            >添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['exam:online:delBatch']"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-search"
              size="mini"
              @click="handleExport"
              v-hasPermi="['exam:online:exist']"
            >查重</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleExport"
              v-hasPermi="['exam:online:upload']"
            >导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-download"
              size="mini"
              @click=""
              v-hasPermi="['exam:online:download']"
            >模板下载</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="examList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="left" />
          <el-table-column label="ID" align="left" prop="id" :show-overflow-tooltip="true" />
          <el-table-column label="归属" align="left" prop="parameter.orgName"/>
          <el-table-column label="大类" align="left" prop="parameter.rootCatalogName"/>
          <el-table-column label="子分类" align="left" prop="parameter.majorCatalogName"/>
          <el-table-column label="题目" align="left" prop="content" :show-overflow-tooltip="true" />
          <el-table-column label="试题类型" align="left" prop="parameter.questionTypeName"/>
          <el-table-column label="创建人" align="left" prop="createUserId" :show-overflow-tooltip="true" />
          <el-table-column label="创建时间" align="left" prop="parameter.createTimeName" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['exam:online:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['exam:online:del']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改定时任务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属分类" prop="majorId">
              <el-select v-model="form.majorId" placeholder="请选择所属分类">
                <el-option
                  v-for="dict in dict.type.sys_job_group"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="题目类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择题目类型">
                <el-option
                  v-for="dict in dict.type.sys_job_group"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="题目" prop="content">
              <el-input v-model="form.content" placeholder="请输入题目"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 试题库详细 -->
    <el-dialog title="试题库详细" :visible.sync="openView" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="120px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属分类：">{{ form.id }}</el-form-item>
            <el-form-item label="题目类型：">{{ form.jobName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="题目：">{{ "" }}</el-form-item>
            <el-form-item label="答案：">{{ form.createTime }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job";
  import { listOrgRoot, listOrgRootTree } from '@/api/system/dept'
  import { listCatalogTreeList, listQuestion, listQuestionType } from '@/api/etaa/question_bank'

  export default {
  // components: { Crontab },
  name: "questionBank",
  dicts: ['sys_job_status'],
  data() {
    return {
      // 日期范围
      dateRange: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      examList: [],

      // 2022-12-30 根机构列表，个人只能列出自己所在根机构
      rootOrgList:[],
      // 2022-12-30 超级管理员选择的顶级机构ID
      selectedRootOrgId: undefined,
      // 试题类别列表，2023-03-11
      questionTypeList: [],
      // 2023-03-13 试题类别树数据选项
      catalogListOptions: undefined,
      /** 分类树数据结构 */
      defaultProps: {
        children: "children",
        label: "label"
      },

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示详细弹出层
      openView: false,
      // 是否显示Cron表达式弹出层
      openCron: false,
      // 传入的表达式
      expression: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        content: undefined,
        catalogId: undefined,
        orgId: undefined,
        questionType: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        content: [
          { required: true, message: "题目不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getRootOrgList();
    this.getQuestionTypeList();
  },
  methods: {
    /** 获取试题类别集合 2023-03-11 */
    getQuestionTypeList(){
      listQuestionType().then(response => {
        // console.log(response.data);
        this.questionTypeList = response.data;
      });
    },
    /** 获取顶级机构列表选择框 2022-12-30 */
    getRootOrgList(){
      this.loading = true;
      listOrgRoot().then(response => {
        this.rootOrgList = response.data;
        this.selectedRootOrgId = this.rootOrgList[0].id;
        this.queryParams.orgId = this.selectedRootOrgId;
        this.loading = false;
      }).then(() => {
        this.listCatalogTree();
        this.getList();
      }).catch(function() {
        this.loading = false;
      });
    },

    // 试题类别树
    listCatalogTree(){
      listCatalogTreeList("question_root_catalog").then(response => {
        console.log(response.data);
        this.catalogListOptions = response.data;
      });
    },

    /** 查询列表 */
    getList() {
      this.loading = true;
      listQuestion(this.queryParams).then(response => {
        this.examList = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      console.log("value = " + value + ", data = " + data);
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.catalogId = data.id;
      this.handleQuery();
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        content: undefined,
        concurrent: 1,
        status: "0"
      };
      this.dateRange = [];// 时间范围
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.orgId = this.selectedRootOrgId;
      this.queryParams.questionType = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.name + '"任务吗？').then(function() {
        return changeJobStatus(row.id, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    /** 任务详细信息 */
    handleView(row) {
      // getJob(row.id).then(response => {
      //   this.form = response.data;
      //   this.openView = true;
      // });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加试题库";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getJob(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改试题库";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateJob(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addJob(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const jobIds = row.id || this.ids;
      this.$modal.confirm('是否确认删除编号为"' + jobIds + '"的数据项？').then(function() {
        return delJob(jobIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('monitor/job/export', {
        ...this.queryParams
      }, `job_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>