union-question-web/src/modules/paper/components/AutoBuildPaperStructManage.vue

<template>
  <div>
    <el-dialog
      :visible.sync="modalIsShow"
      title="试卷结构列表"
      :modal="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      @opened="dialogOpened"
    >
      <!-- 正文信息 -->
      <div class="part-box">
        <el-form class="part-filter-form" :inline="true" :model="filter">
          <el-form-item label="课程名称">
            <course-select v-model="filter.courseId" :disabled="!!courseId">
            </course-select>
          </el-form-item>
          <el-form-item label="结构名称">
            <el-input
              v-model="filter.structName"
              placeholder="结构名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toPage(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="part-box-action">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            @click="toBatchDelete"
            >批量删除</el-button
          >
        </div>
      </div>

      <div class="part-box">
        <el-table
          v-loading="loading"
          element-loading-text="加载中"
          :data="dataList"
          @selection-change="tableSelectChange"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column label="试卷结构名称" prop="structName">
          </el-table-column>
          <el-table-column label="关联课程">
            <template slot-scope="scope">
              <span
                >{{ scope.row.courseName }}（{{ scope.row.courseCode }}）</span
              >
            </template>
          </el-table-column>
          <el-table-column label="大题数" prop="detailCount" width="100">
          </el-table-column>
          <el-table-column label="小题数" prop="questionCount" width="100">
          </el-table-column>
          <el-table-column label="总分" prop="totalScore" width="100">
          </el-table-column>
          <el-table-column label="创建人" prop="creatorName" width="120">
          </el-table-column>
          <el-table-column label="创建时间" width="170" prop="creationTime">
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template slot-scope="scope">
              <div class="operate_left">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="toUse(scope.row)"
                  >使用</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="toEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  @click="toDelete(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="part-page">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 50, 100, 200, 300]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="toPage"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- ModifyAutoBuildPaperStruct -->
    <modify-auto-build-paper-struct
      ref="ModifyAutoBuildPaperStruct"
      :instance="curRow"
      @modified="getList"
    ></modify-auto-build-paper-struct>
  </div>
</template>

<script>
import {
  autoBuildPaperStructPageListApi,
  autoBuildPaperStructDeleteApi,
} from "../api";
import ModifyAutoBuildPaperStruct from "./ModifyAutoBuildPaperStruct.vue";

export default {
  name: "AutoBuildPaperStructManage",
  components: { ModifyAutoBuildPaperStruct },
  props: {
    courseId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      modalIsShow: false,
      loading: false,
      filter: {
        courseId: "",
        structName: "",
      },
      dataList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      curRow: {},
      selectedQuestionIds: [],
    };
  },
  methods: {
    dialogOpened() {
      this.filter.courseId = this.courseId;
      this.toPage(1);
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    toPage(page) {
      this.currentPage = page;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let data = {
        ...this.filter,
        curPage: this.currentPage,
        pageSize: this.pageSize,
      };
      const res = await autoBuildPaperStructPageListApi(data).catch(() => {});
      this.loading = false;
      if (!res) return;
      this.dataList = res.data.content;
      this.total = res.data.totalElements;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.toPage(1);
    },
    tableSelectChange(selections) {
      this.selectedQuestionIds = selections.map((item) => item.id);
    },
    toUse(row) {
      this.$emit("selected", row);
      this.cancel();
    },
    toEdit(row) {
      this.curRow = row;
      this.$refs.ModifyAutoBuildPaperStruct.open();
    },
    async toDelete(row) {
      const confirm = await this.$confirm("确认删除结构吗?", "提示", {
        type: "warning",
      }).catch(() => {});
      if (confirm !== "confirm") return;

      this.deleteStruct([row.id]);
    },
    async deleteStruct(ids) {
      this.loading = true;
      const res = await autoBuildPaperStructDeleteApi(ids.join()).catch(
        () => {}
      );
      this.loading = false;

      if (!res) return;

      this.$message.success("删除成功");
      this.getList();
    },
    async toBatchDelete() {
      if (!this.selectedQuestionIds.length) {
        this.$message.error("请选择试题！");
        return;
      }

      const confirm = await this.$confirm("确认删除选中数据吗?", "提示", {
        type: "warning",
      }).catch(() => {});
      if (confirm !== "confirm") return;

      this.deleteStruct(this.selectedQuestionIds);
    },
  },
};
</script>