ChangeQuestion.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-12-27 09:30:19
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-01-29 14:52:33
 * @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/ChangeQuestion.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-wrapper">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="所属单位" prop="deptId" ref="treeItem">
        <Treeselect
          class="tree"
          v-model="queryParams.deptId"
          :options="deptOptions"
          :show-count="true"
          placeholder="请选择归属部门"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="题库名称" prop="bankName">
        <el-input
          v-model="queryParams.bankName"
          placeholder="考试时间"
          clearable
          size="small"
        />
      </el-form-item>

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

    <el-table v-loading="loading" :data="list" height="435" ref="multipleTable">
      <!-- <el-table-column type="selection"></el-table-column> -->
      <el-table-column label="" align="center" prop="profession">
        <template v-slot="{ row }">
          <!-- <div> -->
          <el-checkbox
            :disabled="row.numberQuestions == 0"
            v-model="row.checked"
          ></el-checkbox>
          <!-- </div> -->
        </template>
      </el-table-column>
      <el-table-column label="题库名称" align="center" prop="bankName">
      </el-table-column>
      <el-table-column label="所属单位" align="center" prop="courseType">
        <template v-slot="scope">
          <div>
            {{ selectList(deptOptions, scope.row.deptId) || "-" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="包含题目数量"
        align="center"
        prop="numberQuestions"
        :formatter="formatter"
      >
      </el-table-column>
      <el-table-column label="选取题目数量" align="center" prop="profession">
        <template v-slot="{ row }">
          <div>
            <!-- <el-input
              :disabled="!row.checked|| row.numberQuestions==0 "
              v-model="row.changeNum"
              size="mini"
              style="width: 100px"
            ></el-input> -->
            <el-input-number
              v-model="row.changeNum"
              :disabled="!row.checked || row.numberQuestions == 0"
              size="mini"
              :min="1"
              :max="+row.numberQuestions ? +row.numberQuestions : 1000000"
              label="描述文字"
            ></el-input-number>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div> -->
    <el-pagination
      :layout="'prev, pager, next'"
      v-show="total > 0"
      :total="total"
      :current-page="queryParams.pageNum"
      :page-sizes="[queryParams.pageSize]"
      @current-change="currentChangeClick"
    />
  </div>
</template>

<script>
import { listBank, delBank } from "@/api/educationPlanExam/questionBank";
import { bachAddTopicGuest } from "@/api/educationPlanExam/lessonsProgram.js";

// 部门列表

import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "",
  components: {
    Treeselect,
  },
  props: {
    courseId: {
      type: Number,
    },
  },
  data() {
    return {
      queryParams: {
        deptId: null,
        courseName: "",
        pageNum: 1,
        pageSize: 10,
      },
      list: [
        {
          checked: false,
        },
      ],
      total: 20,
      loading: false,
      // 题库id
      deptId: null,
      // 归属部门列表
      deptOptions: [],
    };
  },
  created() {
    this.getList();
    this.getTreeselect();
  },
  methods: {
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
        // console.log("123", this.deptOptions);
        // console.log(this.selectList(this.deptOptions, 175));
      });
    },
    // 递归查值的方法
    selectList(list, id) {
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        if (item.id == id) {
          return item.label;
        } else {
          if (Array.isArray(item.children)) {
            let a = this.selectList(item.children, id);
            if (a) {
              return a;
            }
          }
        }
      }
    },
    getList() {
      this.loading = true;
      listBank(this.queryParams)
        .then((res) => {
          console.log(res);
          this.list = res.rows.map((item, index) => {
            return {
              bankNum:
                index +
                1 +
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
              checked: false,
              changeNum: 0,
              ...item,
            };
          });
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    saveAndNext() {
      const topicInfos = this.list
        .filter((item) => item.checked)
        .map((item) => {
          return {
            bankId: item.bankId,
            quan: item.changeNum,
          };
        });

      console.log(this.courseId, topicInfos);
      const data = { courseId: this.courseId, topicInfos };
      console.log(data);

      bachAddTopicGuest(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          // this.$parent.$parent.componentsNumChange(2);
          this.$parent.$parent.getContractTopicList(this.courseId);
          this.$parent.$parent.dialogVisible2=false;
        }
      });
    },
    resetClick() {},
    search() {
      this.getList();
    },
    currentChangeClick() {},
    formatter(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index);
      if (!cellValue) return "-";
      else return cellValue;
    },
  },
};
</script>
<style lang="scss" scoped>
.table-wrapper {
  padding-top: 22px;
  width: 100%;
  height: 550px;
  overflow: hidden;
  // padding-bottom: 10px;
  margin-bottom: 20px;
}
</style>