src/views/QuestionBank/index.vue

<template>
  <div class="app-container">
    <el-row id="elRow">
      <el-col :span="6" :style="{ height: TreeColHeight + 'px' }">
        <div style="margin-right: 10px; height: 100%">
          <div class="TreeHeader">
            <label style="font-size: 18px">题目分类</label>
          </div>
          <div :style="{ height: TableColHeight + 'px' }" class="areadiv"
            style="margin: 10px 0 0 0; padding: 5px 0 0 0">
            <el-tabs v-model="activeTab" @tab-click="handleTabsClick" style="padding: 0 20px" :stretch="true">
              <el-tab-pane label="专业类" name="first"></el-tab-pane>
              <el-tab-pane label="测评类" name="second"></el-tab-pane>
            </el-tabs>
            <el-tree :data="activeTab == 'first' ? firstTreeData : secondTreeData"
              :props="activeTab == 'first' ? firstTreeData : secondTreeData" @node-click="handleNodeClick"
              class="eltree" :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span style="">
                  <!-- v-if="activeTab == 'first'?true:node.level<2?true:false" -->
                  <el-button type="text" size="mini" @click="showClassDialog(node)"
                 >
                    添加下级
                  </el-button>
                  <el-button type="text" v-if="activeTab == 'second'" @click="handleEditDimension(node, data)">编辑
                  </el-button>
                  <el-button type="text" size="mini" @click="() => handleDeleteQuestionClass(node, data)">
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light">
          <div class="seetingsDiv" style="">
            <el-button type="primary" @click="AddSubject">添加题目
            </el-button>
          </div>
          <div class="areadiv" :style="{ height: TableColHeight + 'px' }">
            <el-table :data="QuestList" id="QuestionTable" border style="
                width: 100%;
                border-radius: 5px;
                box-shadow: 0 0 10px #efefef;
                margin-top: 10px;
              " :header-cell-class-name="headerStyle" :stripe="true">
              <el-table-column prop="date" label="ID" width="80">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="题目类型" width="100">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.subjectName
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="QuestionClassName" label="分类" width="100">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.QuestionClassName
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="分数" width="80">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.fraction
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="单项分数" width="80">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.singleFraction
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="正确答案" width="80">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{ scope.row.answer }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="题目" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.subject
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="解析" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span style="padding-left: 10px">{{
                    scope.row.analysis
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-dropdown @command="
                      (e) => {
                        handleCommand(e, scope.row.id);
                      }
                    " style="padding-left: 10px">
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="update">编辑</el-dropdown-item>
                        <!-- <el-dropdown-item command="b">锁定</el-dropdown-item> -->
                        <el-dropdown-item command="del">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background @current-change="currentchange" style="
                position: static;
                bottom: 3px;
                text-align: center;
                margin-top: 5px;
              " :page-size="this.parameter.pageSize" layout="total,prev, pager, next" :total="Count">
            </el-pagination>
            <div style="clear: both"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="分类维护" :visible.sync="dialogClassIVIsible" @close="closeClassDialog" width="400px"
      :close-on-click-modal="false">
      <el-form ref="QuestionClassInfo" :model="QuestionClassInfo" label-width="70px">
        <el-form-item label="分类名称">
          <el-input v-model="QuestionClassInfo.ClassificationName" placeholder="请输入分类名称"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="CreateQuestionClassHealder" style="margin: 10px 0 0 0; float: right" type="primary">确定
      </el-button>
      <div style="clear: both"></div>
    </el-dialog>
    <el-dialog title="编辑题目" :visible.sync="dialogsubjectlVisible" @close="closeDialog" width="800px"
      :close-on-click-modal="false">
      <el-form ref="Dataform" :model="Dataform" label-width="60px">
        <div style="padding:10px">
          <el-alert v-if="FormClassType==2"
          title="选项的维度分值如不设置将按照分值规则自动计算"
          type="warning"></el-alert>
        </div>
        <el-form-item label="题目">
          <el-input v-model="Dataform.subject" placeholder="请输入题目名称"></el-input>
        </el-form-item>
        <el-form-item label="分类" style="padding-top: 5px">
          <el-cascader @change="changequestionclass" v-model="Dataform.QuestionClassId" style="width: 400px"
            :props="{ emitPath: false ,checkStrictly:true}" :clearable="true" :options="QuestionClass">
          </el-cascader>
        </el-form-item>
        <el-form-item label="题型" style="padding-top: 5px">
          <el-select v-model="Dataform.subjectType" value-key="Dataform.subjectType" @change="changeQuestionType"
            placeholder="请选择题型">
            <el-option label="单选题" :value="1"></el-option>
            <el-option label="多选题" :value="2"></el-option>
            <el-option label="主观题" :value="3"></el-option>
            <el-option label="语音题" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项" v-show="OptionVisible">
          <el-table :data="subjectContent" :show-header="false">
            <el-table-column>
              <template slot-scope="scope">
                <el-input placeholder="请输入答案" v-model="scope.row.optionContent" class="optionInput"
                  style="width:47% !important">
                  <template slot="prepend">{{ scope.row.option }}</template>
                </el-input>
                <el-input placeholder="维度分值" v-model="scope.row.score" class="optionInput"  
                  style="width:21% !important;margin-left:1%">
                </el-input>
                <!-- v-if="FormClassType==2"  -->
                <el-select v-model="scope.row.scorerule"  class="optionInput" placeholder="分值规则"  style="width:20% !important;margin-left:1%">
                  <el-option label="" >不设置</el-option>
                  <el-option v-for="sritem in scoreRules" :label="sritem" :value="sritem">{{sritem}}</el-option>
                </el-select>
                <i class="el-icon-circle-plus el-icon" @click="Addlist"></i>
                <i class="el-icon-remove el-icon" @click="RemoveList(scope)" v-if="scope.$index != 0"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="答案" v-show="OptionVisible" class="subjectContentClass" v-if="FormClassType!=2">
          <el-radio-group v-for="(item, i) in subjectContent" v-model="Dataform.answer" v-if="GroupVisible">
            <el-radio :label="item.option">{{ item.option }}</el-radio>
          </el-radio-group>
          <el-checkbox-group v-for="(item, i) in subjectContent" v-model="Dataform.answer" v-if="!GroupVisible">
            <el-checkbox style="float: left" :label="item.option">{{
              item.option
              }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="分数" v-show="OptionVisible && FormClassType !=2">
          <el-input-number :step="1" style="float: left" :min="0" v-model="Dataform.fraction">
          </el-input-number>
          <div style="float: left; margin-left: 20px" v-if="!GroupVisible">
            <lable style="font-weight: bold">单项分数：</lable>
            <el-input-number :step="0.5" :max="Dataform.fraction / 2" :min="0" v-model="Dataform.singleFraction">
            </el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="解析" style="margin-top: 10px">
          <el-input v-model="Dataform.analysis" :rows="10" type="textarea" placeholder="请输入答案解析" />
        </el-form-item>
      </el-form>
      <el-button @click="EditQuestionHeadler" style="margin: 10px 0 0 0; float: right" type="primary">确定
      </el-button>
      <div style="clear: both"></div>
    </el-dialog>
    <EditDimension ref="editDimensionDialog" :model="currentEditDimension"></EditDimension>
  </div>
</template>
<script lang="ts">
  import {
    getQuestionList,
    EditQuestion,
    getQuestionClassList,
    DelQuestionBankEvent,
    GetQuestionBankById,
    CreateQuestionClass,
  } from "@/api/QuestionBank";
  import { parseTime } from "@/utils/index.js";
  import EditDimension from "./components/EditDimension.vue";
  export default {
    filters: {},
    components: {
      EditDimension,
    },
    data() {
      return {
        FormClassType: 0,
        loading: false,
        currentEditDimension: {},
        activeTab: "first",
        parameter: {
          pageIndex: 1,
          pageSize: 12,
          sort: "id",
          sortOrder: 1,
          keyword: "",
          QuestionClassId: 0,
          status: 1,
        },
        Count: 0,
        QuestList: [],
        dialogsubjectlVisible: false,
        dialogClassIVIsible: false,
        OptionVisible: true,
        GroupVisible: true,
        Dataform: {
          subject: "",
          subjectType: 1,
          subjectContent: "",
          QuestionClassId: 0,
          answer: [],
          analysis: "",
          fraction: 0,
          singleFraction: 0,
          addTime: "2021-11-12",
          state: 1, 
        },
        subjectContent: [
          {
            option: "A",
            optionContent: "",
            scorerule:'高'
          },
        ],
        QuestionClass: [],
        QuestionClassInfo: {
          ParentId: 0,
          ClassificationName: "",
          Addtime: "",
        },
        TreeColHeight: 0,
        TableColHeight: 0,
        treeData: [],
        firstTreeData: [],
        secondTreeData: [],
        CreatClassId: 0,
        scoreRules:['高','中','低'],
      };
    },
    created() { },
    mounted() {
      let ContentAreaHight =
        window.innerHeight - document.getElementById("elRow").offsetTop - 70;
      this.TableColHeight =
        ContentAreaHight - document.getElementById("QuestionTable").offsetTop;
      let lineNumber = this.TableColHeight - 50 - 20; //减去表头来计算
      this.TreeColHeight = ContentAreaHight;
      lineNumber = Math.floor(lineNumber / 49);
      this.parameter.pageSize = lineNumber;
      this.GetList();
      this.getQuestionClassListHeadler();
    },
    methods: {
      AddSubject() { 
        this.FormClassType = 0;
        // if(!this.Dataform.scoperule)
        // this.Dataform.scoperule='高';
        this.dialogsubjectlVisible = true
      },
      changequestionclass(a, b, c) {
        var item = this.QuestionClass.find(o => o.id == a);
        if (item) this.FormClassType = item.ClassType;
      },
      //维度编辑
      handleEditDimension(node, data) {
        console.log(data);
        // this.$refs.editDimensionDialog.dialogFormVisible = true;
        this.$refs.editDimensionDialog.show(data.id);
        this.currentEditDimension = data;
      },
      //切换分类
      handleTabsClick(e) {
        console.log(e.name);
      },
      //删除分类
      handleDeleteQuestionClass(node, data) {
        this.loading = true;
        // console.log(node, data);
        // console.log(this.API);
        this.API.deleteQuestionClass(data.value).then((res) => {
          this.getQuestionClassListHeadler();
          this.loading = false;
          this.$message.success('操作成功！');
        });
      },
      closeClassDialog() {
        this.dialogClassIVIsible = false;
      },
      //表格右边的操作按钮
      handleCommand(value, val) {
        if (value == "update") {
          this.GetQuestionBankByIdHeadler(val);
        }
        if (value == "del") {
          this.DelQuestionBankEventHeadler(val);
        }
      },
      //添加分类
      CreateQuestionClassHealder() {
        if (this.loading) return;
        this.loading = true;
        this.QuestionClassInfo.Addtime = parseTime(new Date(), "");
        CreateQuestionClass(this.QuestionClassInfo).then((res) => {
          this.getQuestionClassListHeadler();
          this.dialogClassIVIsible = false;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        });
      },
      //获取选择的题目详细信息
      GetQuestionBankByIdHeadler(id) {
        GetQuestionBankById(id).then((res) => {
          var d = this.QuestionClass.find(o => o.id == res.data.data.QuestionClassId);
          if (d) this.FormClassType = d.ClassType;
          this.changeQuestionType(res.data.data.subjectType); //这里先初始化编辑显示内容
          this.Dataform = res.data.data; //内容赋值
          this.subjectContent = JSON.parse(res.data.data.subjectContent); //赋值选项
          if (res.data.data.subjectType == 1) {
            this.Dataform.answer = res.data.data.answer.split(",")[0]; //赋值答案
          } else {
            this.Dataform.answer = res.data.data.answer.split(","); //赋值答案
          }
          this.dialogsubjectlVisible = true;
        });
      },
      showClassDialog(node) {
        this.dialogClassIVIsible = true;
        console.log(node);
        this.QuestionClassInfo.ParentId = node.data.value;
        //   alert(this.QuestionClassInfo.ParentId);
      },
      //关闭弹框的事件
      closeDialog() {
        //初始化数据
        this.Dataform = this.$options.data().Dataform;
        this.subjectContent = this.$options.data().subjectContent;
        //所有文本框恢复到初始化状态
        this.Dataform.answer = [];
        this.OptionVisible = true;
        this.GroupVisible = true;
      },
      //选择题目类型来判断是否显示部分表单
      changeQuestionType(val) {
        if (val == 3 || val == 4) {
          this.OptionVisible = false;
        }
        if (val == 2) {
          this.OptionVisible = true;
          this.Dataform.answer = [];
          this.GroupVisible = false;
        }
        if (val == 1) {
          this.Dataform.answer = [];
          this.OptionVisible = true;
          this.GroupVisible = true;
        }
      },
      headerStyle({ row, column, rowIndex, columnIndex }) {
        return "tableStyle";
      },
      Addlist() {
        if (this.subjectContent.length < 4) {
          var alphabet = String.fromCharCode(
            64 + parseInt(this.subjectContent.length + 1)
          );
          this.subjectContent.push({
            option: alphabet,
            title: "",
          });
        } else {
          this.$confirm("系统暂时只支持4个答案！", "消息");
        }
      },
      RemoveList(val) {
        this.subjectContent.splice(val.$index, 1);
        this.subjectContent.forEach((item, index) => {
          item.option = String.fromCharCode(64 + parseInt(index + 1));
        });
      },
      handleNodeClick(val) {
        if (this.loading) return;
        this.parameter.QuestionClassId = val.value;
        this.parameter.pageIndex = 1;
        this.GetList();
      },
      DelQuestionBankEventHeadler(id) {
        this.$confirm("确定删除该试题？", "消息", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          callback: (action) => {
            if (action == "confirm") {
              DelQuestionBankEvent(id).then((res) => {
                if (res.data.code == 200) {
                  this.$confirm(res.data.message, "消息");
                  this.GetList();
                }
              });
            }
          },
        });
      },
      EditQuestionHeadler() {
        let reg = new RegExp('"', "g");
        //this.Dataform.subjectContent = JSON.stringify(this.subjectContent).replace(reg, "\"");
        this.Dataform.subjectContent = this.subjectContent;
        if (typeof this.Dataform.answer != "string")
          //判断是否为字符串
          this.Dataform.answer = this.Dataform.answer.join(",");
        var _this = this;
        EditQuestion(this.Dataform).then((res) => {
          if (res.data.code == 200) {
            _this.GetList();
            this.$message(res.data.message);
            setTimeout(function () {
              _this.dialogsubjectlVisible = false;
            }, 10);
          }
        });
      },
      GetList() {
        let _this = this;
        getQuestionList(_this.parameter).then((res) => {
          _this.QuestList = res.data.data.rows;
          _this.Count = res.data.data.total;
          _this.$forceUpdate();
        });
      },
      currentchange(page) {
        this.parameter.pageIndex = page;
        this.GetList();
      },
      getSubTree(id, list) {
        let result = [];
        result = list.filter((t) => t.ParentId == id);
        if (result.length) {
          result = result.map((item) => {
            item.children = this.getSubTree(item.id, list);
            return item;
          });
        }
        return result;
      },
      getQuestionClassListHeadler() {
        let _this = this;
        getQuestionClassList().then((res) => {
          let list = res.data.data;
          list = list.map((t) => {
            t.value = t.id;
            t.label = t.ClassificationName;
            return t;
          });
          let firstClass = list.find((t) => t.id == 6);
          firstClass.children = this.getSubTree(6, list);
          let secondClass = list.find((t) => t.id == 1);
          secondClass.children = this.getSubTree(1, list);
          this.QuestionClass = list;
          this.firstTreeData = [firstClass];
          this.secondTreeData = [secondClass];
        });
      },
    },
  };
</script>
<style scoped="scoped">
  /deep/.cell {
    padding-left: 0px;
  }
  /deep/.el-form-item {
    margin-bottom: 5px;
  }
  /deep/.el-radio {
    margin-right: 10px;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner {
    border-color: #409eff;
    background-color: #409eff;
  }
  /deep/.el-radio__input.is-checked+.el-radio__label {
    color: #409eff;
    font-weight: bold;
  }
  /deep/.tableStyle {
    background-color: #304156 !important;
    color: #fff;
    font-weight: 400;
  }
  .QuestDiv {
    width: 24%;
    float: left;
    min-height: 50px;
    border: 1px solid #cdcdcd;
    margin-right: 10px;
    box-shadow: 0 0 10px #808080;
    border-radius: 8px;
    min-height: 100px;
    background-color: #fff;
    opacity: 0.8;
    margin-bottom: 10px;
    height: 313px;
  }
  .clear {
    clear: both;
    margin-bottom: 10px;
  }
  .font-color {
    background-color: #ae1e15 !important;
    color: #fff;
    box-shadow: 0 0 5px #ae1e15;
  }
  /deep/.el-input-group__prepend {
    font-weight: bold;
    width: 30px;
    text-align: center;
    background: #409eff;
    color: #fff;
  }
  .optionInput {
    float: left;
    width: 620px !important;
  }
  .el-icon {
    font-size: 20px;
    line-height: 40px;
    margin: 0 5px;
    cursor: pointer;
    color: #409eff !important;
  }
  >>>.subjectContentClass .el-checkbox__label {
    padding-right: 10px !important;
  }
  .seetingsDiv {
    width: 100%;
    height: 60px;
    background: #efefef;
    line-height: 60px;
    border-radius: 5px;
    box-shadow: 0 0 5px #cdcdcd;
  }
  .seetingsDiv button {
    background-color: #304156;
    border: 0px;
    margin-left: 10px;
    box-shadow: 0 0 5px #cdcdcd;
    float: right;
    margin-top: 12px;
    margin-right: 10px;
  }
  .areadiv {
    background-color: #efefef;
    border-radius: 5px;
    box-shadow: 0 0 5px #efefef;
  }
  .TreeHeader {
    background-color: #304156;
    height: 60px;
    border-radius: 5px;
    box-shadow: 0 0 10px #efefef;
    line-height: 60px;
    color: #fff;
    padding-left: 10px;
  }
  .classbtn {
    float: right;
    margin: 11px 10px 0 0;
    height: 35px;
    line-height: 12px;
  }
  .eltree {
    background-color: #efefef;
  }
  /deep/.el-tree-node__content {
    min-height: 40px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>