JingTieXueTang.Web/src/views/examQuestionManagement/examQuestionList.vue

<template>
  <div class="app-container" ref="tableBody">
    <a-spin :spinning="loading">
      <!-- 过滤条件栏目 -->
      <div class="common-card" ref="filterCard">
        <div class="filter-condition-box">
          <span>所属类目：</span>
          <ul>
            <li
              :class="{
                checkedExamQuestionType: checkedExamQuestionType === item.code,
              }"
              v-for="(item, index) in examQuestionType"
              :key="index"
              @click="handleExamQuestionTypeFun(item)"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
        <div class="border-line"></div>
        <div class="filter-other-box">
          <span class="filter-other-title">其它选项：</span>
          <span class="filter-other-item-title">工种：</span>
          <a-select
            v-model="engineeringWorkChooseValue"
            @change="handleChangeEngineeringWorkValue"
          >
            <a-select-option
              v-for="(item, index) in engineeringWorkList"
              :key="index"
              :value="item.code"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <!-- 表单 -->
      <div class="common-card margin-top-all">
        <!-- 清空、批量删除 -->
        <div class="exam-question-edit-row">
          <a-button
            type="primary"
            :disabled="!hasSelected"
            @click="handleClearSelectDataFun"
          >
            清空
          </a-button>
          <span v-if="hasSelected" class="exam-question-edit-checkedtxt">
            {{ `已选择 ${selectedRowKeys.length} 项` }}
          </span>
          <a-button
            class="exam-question-edit-delete"
            type="primary"
            :disabled="!hasSelected"
            @click="handleDeleteSelectDataFun"
          >
            批量删除
          </a-button>
        </div>
        <!-- 表单[自带分页功能] -->
        <a-table
          :columns="columns"
          :data-source="tableData"
          :row-key="(record) => record.id"
          :scroll="{ y: tableHeight }"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template slot="questionType" slot-scope="text, record">
            <span>{{ record.questionTypeTxt }}</span>
          </template>
          <template slot="engineeringWork" slot-scope="text, record">
            <span>{{ record.engineeringWorkTxt }}</span>
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="toQuestionDetailFun(record)">详情</a>
            <a-divider type="vertical" />
            <a @click="deleteQuestionFun(record)">删除</a>
          </template>
        </a-table>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { ENGINEERING_WORK_LIST, EXAM_QUESTION_TYPE } from '@/common/Constant';
import { QUESTIONLISTRES } from '@/common/resData';
export default {
  name: 'examQuestionList',
  props: {},
  components: {},
  data() {
    return {
      examQuestionType: [], // 所属题目类型列表
      checkedExamQuestionType: '', // 所选题目类型
      engineeringWorkList: [], // 工种数据列表
      engineeringWorkChooseValue: '', // 所选工种
      tableHeight: 400, // 表格高度
      columns: [], // form表单的列参数
      tableData: [], // 表单数据
      pagination: {
        pageSize: 7,
        current: 1,
        total: 0,
      }, // 分页参数
      loading: false, // 是否展示加载动画
      selectedRowKeys: [], // 多选的结果
    };
  },
  created() {
    this.initDataFun(); //初始化数据
  },
  mounted() {
    this.initTableHeightFun(); // 初始化表单的高度
  },
  beforeDestroy() {},
  watch: {
    screenHeight() {
      this.initTableHeightFun(); // 初始化表单的高度
    },
  },
  computed: {
    // 是否选择了数据
    ...mapGetters(['screenHeight']),
    // 判断是否有行被选择
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    // 初始化表单的高度
    initTableHeightFun() {
      this.tableHeight =
        this.$refs.tableBody.offsetHeight -
        (this.$refs.filterCard.offsetHeight + 48 * 4);
    },
    //初始化数据
    initDataFun() {
      this.loading = true;
      // 题目分类
      this.examQuestionType = [
        { title: '全部', code: '' },
        ...EXAM_QUESTION_TYPE,
      ];
      this.checkedExamQuestionType = this.examQuestionType[0].code;
      // 工种类别
      this.engineeringWorkList = ENGINEERING_WORK_LIST;
      this.engineeringWorkChooseValue = this.engineeringWorkList[0].code;
      // 表单的列的配置参数
      this.columns = [
        {
          title: '题目编号',
          dataIndex: 'questionCode',
          key: 'questionCode',
          // width: 200,
        },
        {
          title: '题目',
          dataIndex: 'questionDescription',
          key: 'questionDescription',
          // width: 700,
        },
        {
          title: '题目类别',
          dataIndex: 'questionType',
          key: 'questionType',
          scopedSlots: { customRender: 'questionType' },
          // width: 200,
        },
        {
          title: '工种',
          dataIndex: 'engineeringWork',
          key: 'engineeringWork',
          scopedSlots: { customRender: 'engineeringWork' },
          // width: 200,
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          // with: 200,
        },
      ];
      this.getQusetionsListFun(); // 查询：题目列表数据
    },
    // 操作：选择某个题目类型
    handleExamQuestionTypeFun(item) {
      console.log('选择某个题目类型', item);
      if (this.checkedExamQuestionType === item.code) {
        return;
      }
      this.checkedExamQuestionType = item.code;
    },
    // 操作：选择了某个工种
    handleChangeEngineeringWorkValue() {
      console.log('选择了某个工种', this.engineeringWorkChooseValue);
    },
    // 查询：题目列表数据
    getQusetionsListFun() {
      // 列表数据
      const resData = QUESTIONLISTRES.data;
      setTimeout(() => {
        resData.forEach((item) => {
          EXAM_QUESTION_TYPE.forEach((it) => {
            if (item.questionType === it.code) {
              item.questionTypeTxt = it.title;
            }
          });
          ENGINEERING_WORK_LIST.forEach((it) => {
            if (item.engineeringWork === it.code) {
              item.engineeringWorkTxt = it.title;
            }
          });
        });
        this.pagination.total = resData.length;
        this.tableData = [...resData];
        this.loading = false;
      }, 1500);
    },
    // 查询：表格某页的数据
    handleTableChange(pagination) {
      this.loading = true;
      setTimeout(() => {
        const pager = { ...this.pagination };
        pager.current = pagination.current;
        this.pagination = pager;
        this.loading = false;
      }, 1500);
      // let params = {
      //   pagination: pagination,
      //   questionType: this.checkedExamQuestionType,
      //   engineeringWork: this.engineeringWorkChooseValue
      // };
      // this.$_http
      //   .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS, { params })
      //   .then((res) => {
      //     console.log(res);
      //     this.tableData = res.data;
      //     this.pagination.total = res.pagination.total;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   })
      //   .finally(() => {
      //     this.loading = false;
      //   });
    },
    // 操作：详情
    toQuestionDetailFun(record) {
      console.log('查看某个试题的详情', record);
    },
    // 操作：删除
    deleteQuestionFun(record) {
      // let that = this
      this.$confirm({
        title: '删除',
        content: `确认删除编号为 ${record.questionCode} 的题目吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          // let params = {
          //   id: record.id,
          // };
          // that.$_http
          //   .post(that.$_API.INTERFACE_POST_EXAMS_QUESTION_DELETE, params)
          //   .then((res) => {
          //     console.log(res);
          //   })
          //   .catch((err) => {
          //     console.log(err);
          //   })
          //   .finally(() => {
          //     that.loading = false;
          //   });
        },
        onCancel() {},
      });
    },
    // 操作：清空选择
    handleClearSelectDataFun() {
      this.loading = true;
      this.selectedRowKeys = [];
      this.loading = false;
    },
    // 操作：多选变化时
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // 操作：批量删除
    handleDeleteSelectDataFun() {
      let that = this;
      this.$confirm({
        title: '批量删除',
        content: `确认批量删除吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          console.log('批量删除', that.selectedRowKeys);
          that.loading = true;
          setTimeout(() => {
            that.selectedRowKeys = [];
            that.loading = false;
          }, 1500);
          // that.$_http
          //   .post(that.$_API.INTERFACE_POST_EXAMS_QUESTION_DELETE_LIST, params)
          //   .then((res) => {
          //     console.log(res);
          //   })
          //   .catch((err) => {
          //     console.log(err);
          //   })
          //   .finally(() => {
          //     that.loading = false;
          //   });
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
@import '~@/styles/common/variable.less';
</style>