新增保安员导入

Administrator

2022-06-15 47a0f58d4334939b08a55b9356f94de23c8b1367

 src/views/exam/subject.vue

@@ -1,319 +1,398 @@
/*
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-07-18 16:04:26
 * menu-name 题库查询
 */
/* * @Author: Morpheus * @Date: 2021-07-05 16:31:54 * @Last Modified by: liu *
@Last Modified time: 2021-11-23 14:14:38 * menu-name 题库查询 */
<template>
    <div>
    <el-row class="morpheus-box">
        <el-col :span="24">
            <el-card>
  <basic-container
    :class="[
      'exam-card-body',
      $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
    ]"
  >
    <avue-crud
      class="company-box tablesss"
      :option="questionBankOption"
      :search.sync="questionBankSearch"
      :table-loading="questionBankLoading"
      :data="questionBankData"
      ref="questionBankCrud"
      :permission="permissionList"
      :page.sync="questionBankPage"
      @on-load="questionBankOnLoad"
      @selection-change="questionBankSelectionChange"
      @search-change="questionBankSearchChange"
      @search-reset="questionBankSearchReset"
      @current-change="questionBankCurrentChange"
      @size-change="questionBankSizeChange"
      @row-del="questionBankHandleDel"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          v-if="permission.subject_add"
          @click="questionBankHandleAdd"
          >新 增
        </el-button>
        <el-button
          type="success"
          size="small"
          plain
          icon="el-icon-upload2"
          v-if="permission.subject_import"
          @click="handleImport"
          >题库导入
        </el-button>
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          v-if="permission.subject_delete"
          @click="questionBankHandleDelete"
          >删 除
        </el-button>
      </template>

                <div class="exam-card-body">
      <template slot-scope="{ row }" slot="menu">
        <el-button
          type="text"
          size="mini"
          icon="el-icon-edit"
          v-if="permission.subject_edit"
          @click="questionBankHandleAdd(row)"
          >编辑
        </el-button>
        <el-button
          type="text"
          size="mini"
          icon="el-icon-delete"
          v-if="permission.subject_delete"
          @click="questionBankHandleDel(row)"
          >删除
        </el-button>
      </template>
    </avue-crud>

                    <avue-crud class="company-box"
                               :option="questionBankOption"
                               :search.sync="questionBankSearch"
                               :table-loading="questionBankLoading"
                               :data="questionBankData"
                               ref="questionBankCrud"
                               :page.sync="questionBankPage"
                               @on-load="questionBankOnLoad"
                               @selection-change="questionBankSelectionChange"
                               @search-change="questionBankSearchChange"
                               @search-reset="questionBankSearchReset"
                               @current-change="questionBankCurrentChange"
                               @size-change="questionBankSizeChange"
                               @row-del="questionBankHandleDel">

                        <template slot="menuLeft">
                            <el-button type="primary"
                                       size="small"
                                       icon="el-icon-plus"
                                       @click="questionBankHandleAdd">新 增
                            </el-button>
                            <!-- <el-button
                                type="success"
                                size="small"
                                plain
                                icon="el-icon-upload2"
                                @click="handleImport"
                                >导入
                            </el-button> -->
                            <el-button type="danger"
                                       size="small"
                                       icon="el-icon-delete"
                                       @click="questionBankHandleDelete">删 除
                            </el-button>
                        </template>

                        <template slot-scope="{row}" slot="menu">
                            <el-button type="text"
                                       size="mini"
                                       icon="el-icon-edit"
                                       @click="questionBankHandleAdd(row)">编辑
                            </el-button>
                            <el-button type="text"
                                       size="mini"
                                       icon="el-icon-delete"
                                       @click="questionBankHandleDel(row)">删除
                            </el-button>
                        </template>

                    </avue-crud>

                    <el-dialog
                        title="题目导入"
                        append-to-body
                        :visible.sync="excelBox"
                        width="555px"
                        >
                        <avue-form
                            :option="excelOption"
                            v-model="excelForm"
                            :upload-after="uploadAfter"
                        >
                            <template slot="excelTemplate">
                            <el-button type="primary" @click="handleTemplate">
                                点击下载<i class="el-icon-download el-icon--right"></i>
                            </el-button>
                            </template>
                        </avue-form>
                    </el-dialog>

                </div>

            </el-card>
        </el-col>
    </el-row>
    <addsubject ref="addsubject"></addsubject>
</div>
    <el-dialog
      title="题库导入"
      append-to-body
      :visible.sync="excelBox"
      width="555px"
    >
      <avue-form
        :option="excelOption"
        v-model="excelForm"
        :upload-after="uploadAfter"
      >
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleTemplate">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
    </el-dialog>
    <addsubject ref="addsubject" v-on:refreshPage="refreshPage"></addsubject>
  </basic-container>
</template>

<script>
import {
    getList,
    remove,
} from "@/api/examapi/subject";
import { getList, remove } from "@/api/examapi/subject";

import addsubject from "./addsubject.vue";

import { mapGetters, mapState } from "vuex";
import Qs from "qs";
import { getToken } from "@/util/auth";
export default {
    components:{
        addsubject
    },
    data () {
        return {
            questionBankOption: {
                // 操作栏多余按钮去除
                delBtn: false,

                editBtn: false,

                addBtn: false,

                selection: true,
                menu: true,
                // 导出按钮
                excelBtn: true,
                excelBtnText: '题库导出',
                // title: '题库',

                align: 'center',
                height: 'auto',
                calcHeight: 80,
                tip: false,
                searchShow: true,
                searchMenuSpan: 4,
                index: true,
                indexLabel: '序号',
                viewBtn: true,
                //dialogType: 'drawer',
                dialogClickModal: false,
                // 操作栏宽度
                menuWidth: 226,

                column: [
                    {
                        label: "题目名称",
                        prop: "subjectName",
                        search: true,
                        slot: true,
                    },
                    {
                        label: "题目类型",
                        prop: "choicesType",
                        search: true,
                        type: "select",
                        dicData: [{
                            label: '单选题',
                            value: 0
                        }, {
                            label: '多选题',
                            value: 1,
                        }, {
                            label: '判断题',
                            value: 2,
                        }, {
                            label: '实操题',
                            value: 3,
                        }],
                        slot: true,
                        width: 96,
                    },
                    {
                        label: "题目分值",
                        prop: "score",
                        slot: true,
                        width: 96,
                    },
                    {
                        label: "参考答案",
                        prop: "answer",
                        slot: true,
                        width: 96,
                    },
                    {
                        label: "创建人",
                        prop: "creator",
                        slot: true,
                        width: 96,
                    },
                    {
                        label: "创建时间",
                        prop: "createDate",
                        slot: true,
                        width: 130,
                    },
                    {
                        label: "修改人",
                        prop: "modifier",
                        slot: true,
                        width: 96,
                    },
                    {
                        label: "修改时间",
                        prop: "modifyDate",
                        slot: true,
                        width: 130,
                    }
                ]
  components: {
    addsubject
  },
  data() {
    return {
      excelBox: false,
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data"
            },
            questionBankSearch: {},
            questionBankLoading: true,
            questionBankData: [

            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/examSubjectChoices/import-examSubject"
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24
          }
        ]
      },
      questionBankOption: {
        // 操作栏多余按钮去除
        delBtn: false,
        editBtn: false,
        addBtn: false,
        selection: true,
        menu: true,
        // 导出按钮
        excelBtn: true,
        excelBtnText: "题库导出",
        // title: '题库',
        align: "center",
        height: "auto",
        calcHeight: 80,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        index: true,
        indexLabel: "序号",
        viewBtn: true,
        //dialogType: 'drawer',
        dialogClickModal: false,
        // 操作栏宽度
        menuWidth: 226,
        ...this.$store.state.control.clearOtherBut,
        ...this.$store.state.control.searchOpen,
        column: [
          {
            label: "题目名称",
            prop: "subjectName",
            searchSpan: 4,
            search: true,
            slot: true
          },
          {
            label: "题目类型",
            prop: "choicesType",
            search: true,
            type: "select",
            searchSpan: 4,
            dicData: [
              {
                label: "单选题",
                value: 0
              },
              {
                label: "多选题",
                value: 1
              },
              {
                label: "判断题",
                value: 2
              },
              {
                label: "实操题",
                value: 3
              }
            ],
            questionBankPage: {
                pageSize: 10,
                currentPage: 1,
                total: 16
            },
            questionBankQuery: {},
            questionBankSelectionList: [],
        }
            slot: true,
            width: 96
          },
          {
            label: "题目分值",
            prop: "score",
            slot: true,
            width: 96
          },
          {
            label: "参考答案",
            prop: "answer",
            slot: true,
            width: 96
          },
          {
            label: "创建人",
            prop: "creator",
            slot: true,
            width: 96
          },
          {
            label: "创建时间",
            prop: "createDate",
            slot: true,
            width: 130
          },
          {
            label: "修改人",
            prop: "modifier",
            slot: true,
            width: 96
          },
          {
            label: "修改时间",
            prop: "modifyDate",
            slot: true,
            width: 130
          }
        ]
      },
      questionBankSearch: {},
      questionBankLoading: true,
      questionBankData: [],
      questionBankPage: {
        pageSize: 10,
        currentPage: 1,
        total: 16,
        ...this.$store.state.control.changePageSize
      },
      questionBankQuery: {},
      questionBankSelectionList: []
    };
  },
  mounted() {
    this.$store.commit("setWindowSizeHeightAdd");
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.subject_add, false),
        viewBtn: this.vaildData(this.permission.subject_view, false),
        delBtn: this.vaildData(this.permission.subject_delete, false),
        editBtn: this.vaildData(this.permission.subject_edit, false),
        excelBtn: this.vaildData(this.permission.subject_report, false)
      };
    },
    created () {


    },
    mounted () {


    },
     computed: {
        ids () {
            let ids = [];
            this.questionBankSelectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        },
    },
    methods: {
        questionBankHandleAdd(row){
            this.$refs.addsubject.inits(row.id);
        },
        questionBankOnLoad (page, params = {}) {
            this.questionBankLoading = false;
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data;
                this.questionBankPage.total = data.total;
                this.questionBankData = data.records;
                this.questionBankLoading = false;
                this.questionBankSelectionClear();
            });
        },
        questionBankSelectionClear () {
            this.questionBankSelectionList = [];
            this.$refs.questionBankCrud.toggleSelection();
        },
        questionBankSelectionChange (list) {
            this.questionBankSelectionList = list;
        },
        questionBankSearchChange (params, done) {
            this.questionBankQuery = params;
            this.questionBankPage.currentPage = 1;
            this.questionBankOnLoad(this.questionBankPage, params);
            done();
        },
        questionBankSearchReset () {
            this.questionBankQuery = {};
            this.questionBankOnLoad(this.questionBankPage);
        },
        questionBankCurrentChange (currentPage) {
            this.questionBankPage.currentPage = currentPage;
        },
        questionBankSizeChange (pageSize) {
            this.questionBankPage.pageSize = pageSize;
        },

        questionBankHandleDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id);
                })
                .then(() => {

                    this.questionBankOnLoad(this.questionBankPage);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                });
        },

        questionBankHandleDelete () {
            if (this.questionBankSelectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(this.ids);
                })
                .then(() => {
                    this.questionBankOnLoad(this.questionBankPage);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.$refs.questionBankCrud.toggleSelection();
                });
        },
    ids() {
      let ids = [];
      this.questionBankSelectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
}
  },
  methods: {
    //触发页面刷新
    refreshPage() {
      this.questionBankOnLoad(this.questionBankPage);
    },
    questionBankHandleAdd(row) {
      this.$refs.addsubject.inits(row.id);
    },
    questionBankOnLoad(page, params = {}) {
      params = this.questionBankSearch;
      this.questionBankLoading = false;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then(res => {
        const data = res.data.data;
        this.questionBankPage.total = data.total;
        this.questionBankData = data.records;
        this.questionBankLoading = false;
        this.$store.commit("setWindowSizeHeightAdd");
        this.questionBankSelectionClear();
      });
    },
    questionBankSelectionClear() {
      this.questionBankSelectionList = [];
      this.$refs.questionBankCrud.toggleSelection();
    },
    questionBankSelectionChange(list) {
      this.questionBankSelectionList = list;
    },
    questionBankSearchChange(params, done) {
      this.questionBankQuery = params;
      this.questionBankPage.currentPage = 1;
      this.questionBankOnLoad(this.questionBankPage, params);
      done();
    },
    questionBankSearchReset() {
      this.questionBankQuery = {};
      this.questionBankOnLoad(this.questionBankPage);
    },
    questionBankCurrentChange(currentPage) {
      this.questionBankPage.currentPage = currentPage;
    },
    questionBankSizeChange(pageSize) {
      this.questionBankPage.pageSize = pageSize;
    },

    questionBankHandleDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.questionBankOnLoad(this.questionBankPage);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },

    questionBankHandleDelete() {
      if (this.questionBankSelectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.questionBankOnLoad(this.questionBankPage);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.questionBankCrud.toggleSelection();
        });
    },

    //导出数据
    handleExport() {
      this.$confirm("是否导出清册数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        window.open(
          `/api/apply/export-apply?examId=${this.$route.query.id}&${
            this.website.tokenHeader
          }=${getToken()}`
        );
      });
    },
    handleImport() {
      this.excelBox = true;
    },
    handleTemplate() {
      window.open(
        `/api/examSubjectChoices/export-template?${
          this.website.tokenHeader
        }=${getToken()}`
      );
    },
    uploadAfter(res, done, loading, column) {
      window.console.log(column);
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    refreshChange() {
      this.questionBankOnLoad(this.page, this.query);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>