样式

liuyg

2021-08-07 49e8a69a09a1b33545b77eb47b3a8f8d1ce0c261

 src/views/exam/subject.vue

@@ -6,364 +6,364 @@
 * menu-name 题库查询
 */
<template>
    <div>
  <div>
    <el-row class="morpheus-box">
        <el-col :span="24">
            <el-card>
      <el-col :span="24">
        <el-card>
          <div class="exam-card-body">
            <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>

                <div class="exam-card-body">
              <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>

                    <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-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>
  </div>
</template>

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

import addsubject from "./addsubject.vue";

export default {
    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",
                    },
                    tip: "请上传 .xls,.xlsx 标准格式文件",
                    action: "/api/examSubjectChoices/import-examSubject",
                },
                {
                    label: "模板下载",
                    prop: "excelTemplate",
                    formslot: true,
                    span: 24,
                },
                ],
  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",
            },
            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,
                    }
                ]
            },
            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,
        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,
      },
      questionBankQuery: {},
      questionBankSelectionList: [],
    };
  },
  created() {},
  mounted() {},
  computed: {
    ids() {
      let ids = [];
      this.questionBankSelectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    created () {


  },
  methods: {
    questionBankHandleAdd(row) {
      this.$refs.addsubject.inits(row.id);
    },
    mounted () {


    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();
      });
    },
     computed: {
        ids () {
            let ids = [];
            this.questionBankSelectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        },
    questionBankSelectionClear() {
      this.questionBankSelectionList = [];
      this.$refs.questionBankCrud.toggleSelection();
    },
    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;
        },
    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(() => {
    questionBankHandleDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.questionBankOnLoad(this.questionBankPage);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },

                    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();
        });
    },

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