JingTieXueTang.Web/src/views/examManagement/examManagementList.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="{
                checkedExamType: checkedExamType === item.code,
              }"
              v-for="(item, index) in examType"
              :key="index"
              @click="handleExamQuestionTypeFun(item)"
            >
              {{ item.name }}
            </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.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <!-- 表单 -->
      <div class="common-card a-card-margin-top">
        <!-- 清空、批量删除 -->
        <div class="exam-edit-row">
          <a-button
            type="primary"
            :disabled="!hasSelected"
            @click="handleClearSelectDataFun"
          >
            清空
          </a-button>
          <span v-if="hasSelected" class="exam-edit-checkedtxt">
            {{ `已选择 ${selectedRowKeys.length} 项` }}
          </span>
          <a-button
            class="exam-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="status" slot-scope="text">
            <span
              :class="
                text === '未开始'
                  ? 'exam-status-green'
                  : text === '正在考试'
                  ? 'exam-status-yellow'
                  : text === '已结束'
                  ? 'exam-status-red'
                  : ''
              "
              >{{ text }}</span
            >
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="toQuestionDetailFun(record)">详情</a>
            <a-divider type="vertical" />
            <a
              :class="{
                'exam-delete': true,
                'exam-delete-disable': record.status !== '未开始',
              }"
              @click="deleteQuestionFun(record)"
              >删除</a
            >
          </template>
        </a-table>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { ENGINEERING_WORK_LIST, EXAM_TYPE } from '@/common/Constant';
import { EXAMLISTRES } from '@/common/resData';
export default {
  name: 'examManagementList',
  props: {},
  components: {},
  data() {
    return {
      loading: false, // 是否展示加载动画
      examType: [], // 所属题目类型列表
      checkedExamType: '', // 所选题目类型
      engineeringWorkList: [], // 工种数据列表
      engineeringWorkChooseValue: '', // 所选工种
      tableHeight: 400, // 表格高度
      columns: [], // form表单的列参数
      tableData: [], // 表单数据
      pagination: {
        pageSize: 7,
        current: 1,
        total: 0,
      }, // 分页参数
      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.examType = [{ name: '全部', code: '' }, ...EXAM_TYPE];
      this.checkedExamType = this.examType[0].code;

      // 工种类别
      this.engineeringWorkList = ENGINEERING_WORK_LIST;
      this.engineeringWorkChooseValue = this.engineeringWorkList[0].code;

      // 表单的列的配置参数
      this.columns = [
        {
          title: '考试编号',
          dataIndex: 'examCode',
          key: 'examCode',
          // width: 150,
        },
        {
          title: '考试名称',
          dataIndex: 'examName',
          key: 'examName',
        },
        {
          title: '考试时间',
          dataIndex: 'startTime',
          key: 'startTime',
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          // width: 150,
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          // with: 200,
        },
      ];

      this.getQusetionsListFun(); // 查询：题目列表数据
    },
    // 操作：选择某个题目类型
    handleExamQuestionTypeFun(item) {
      console.log('选择某个题目类型', item);
      if (this.checkedExamType === item.code) {
        return;
      }
      this.checkedExamType = item.code;
    },
    // 操作：选择了某个工种
    handleChangeEngineeringWorkValue() {
      console.log('选择了某个工种', this.engineeringWorkChooseValue);
    },
    // 查询：题目列表数据
    getQusetionsListFun() {
      // 列表数据
      const resData = EXAMLISTRES.data;
      setTimeout(() => {
        this.pagination.total = resData.length;
        this.tableData = [...resData];
        this.loading = false;
      }, 1500);
    }, //#region
    // 查询：表格某页的数据
    handleTableChange(pagination) {
      this.loading = true;
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.loading = false;
      // let params = {
      //   pagination: pagination,
      //   questionType: this.checkedExamType,
      //   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;
      //   });
    },
    //#endregion
    // 操作：详情
    toQuestionDetailFun(record) {
      console.log('查看某个试题的详情', record);
      this.$router.push({
        path: '/examManagement/list/detail',
        query: { id: record.id },
      });
    },
    // 操作：删除
    deleteQuestionFun(record) {
      if (record.status !== '未开始') {
        return;
      }
      // let that = this
      this.$confirm({
        title: '删除',
        content: `确认删除编号为 ${record.examCode} 的考试吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          // let params = {
          //   id: record.id,
          // };
          // that.$_http
          //   .delete(that.$_API.INTERFACE_DELETE_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;
          that.selectedRowKeys = [];
          that.loading = false;
          // that.$_http
          //   .delete(that.$_API.INTERFACE_DELETE_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';
.app-container {
  .filter-condition-box {
    display: flex;
    align-items: center;
    ul {
      margin: 0;
      display: flex;
      li {
        margin-left: @paddingMarginVal;
        color: @mainColorBlack65;
        cursor: pointer;
        &:hover {
          color: @mainColorBlueNormal;
        }
      }
      .checkedExamType {
        color: @mainColorBlueNormal;
        font-weight: bold;
      }
    }
  }
  .filter-other-box {
    width: 100%;
    display: flex;
    align-items: center;
    .filter-other-title {
      color: @mainColorBlack85;
    }
    .filter-other-item-title {
      margin-left: @paddingMarginVal;
      color: @mainColorBlack65;
    }
  }
  .exam-edit-row {
    margin-bottom: @paddingMarginVal;
    .exam-edit-checkedtxt {
      margin-left: @paddingMarginVal;
    }
    .exam-edit-delete {
      margin-left: @paddingMarginVal;
    }
  }
  .exam-status-green {
    color: #58e206;
  }
  .exam-status-yellow {
    color: #ff8d1a;
  }
  .exam-status-red {
    color: #d43030;
  }
  .exam-delete {
    cursor: pointer;
  }
  .exam-delete-disable {
    cursor: no-drop;
    color: #a6a6a6;
  }
}
</style>