saas_entrepot_admin/src/views/resource/videoManagement/moduleManagement/giftQuestionPaper.vue

<template>
  <div id="giftQuestionPaper">
    <el-dialog
      @closed="loadingClose"
      :visible.sync="dialogVisible"
      width="1200px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">选择题卷</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <div>
        <div class="inputListBox">
          <div class="fon_s">商品类型：</div>
          <div>
            <el-button
              :type="formData.examType === item.value ? 'primary' : ''"
              :size="size"
              v-for="(item, index) in lists"
              :key="index"
              @click="topSearch(item.value)"
              >{{ item.label }}</el-button
            >
          </div>
        </div>
        <search-box-new
          ref="searchBox"
          :formData="formData"
          :formList="formList"
          @search="search"
          @init="init"
        />
        <p style="color: red">注：打勾，即代表选中；仅单选。</p>
        <el-table
          v-loading="loading"
          border
          :data="tableData"
          style="width: 100%; margin-top: 16px"
          ref="elTable"
          max-height="529px"
        >
          <el-table-column label="" width="45" align="center">
            <template scope="scope">
              <el-radio
                :label="scope.row.ids"
                v-model="templateRadio"
                @change.native="templateRadio = scope.row.ids"
                >{{ "" }}</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            v-for="(item, index) in tableSet"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span v-if="item.scope === 'Status'">
                {{
                  scope.row[item.prop] === 1
                    ? "发布"
                    : scope.row[item.prop] === 0
                    ? "未发布"
                    : "未知"
                }}
              </span>
              <span v-else-if="item.scope === 'businessType'">
                {{ scope.row[item.prop1] }}-{{ scope.row[item.prop2] }}
              </span>
              <span v-else-if="item.scope === 'type'">
                {{
                  scope.row[item.prop] === 1
                    ? "模块卷"
                    : scope.row[item.prop] === 2
                    ? "章卷"
                    : scope.row[item.prop] === 3
                    ? "试卷"
                    : "未知"
                }}
              </span>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :pageSize="formData.pageSize"
          :currentPage="formData.pageNum"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="clearFunc">清除选中题卷</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="disabledBtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchBoxNew from "@/components/searchBoxNew";
import pagination from "@/components/pagination";
export default {
  components: { searchBoxNew, pagination },
  data() {
    return {
      loading: false,
      size: "small",
      dialogVisible: false,
      disabledBtn: false,
      disActiveList: [], //禁止选择列表
      formData: {
        examType: 1,
        pageSize: 10,
        pageNum: 1,
      },
      templateRadio: "",
      total: 0,
      lists: [
        {
          label: "模块卷",
          value: 1,
        },
        {
          label: "章卷",
          value: 2,
        },
        {
          label: "试卷",
          value: 3,
        },
      ],
      tableSet: [
        { label: "题卷编码", prop: "code", width: "120" },
        { label: "题卷前缀", prop: "prefixName", width: "120" },
        { label: "题卷标题", prop: "name", width: "300" },
        { label: "科目", prop: "subjectName", width: "160" },
        {
          label: "业务层次",
          prop1: "projectName",
          prop2: "businessName",
          width: "300",
          scope: "businessType",
        },
        { label: "教育类型", prop: "educationName", width: "160" },
        { label: "题库类型", prop: "type", scope: "type", width: "120" },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "Status",
          width: "120",
        },
      ],
      //搜索
      formList: [
        {
          prop: "educationTypeId",
          placeholder: "教育类型",
          scope: "educationType",
        },
        {
          prop: "businessId",
          placeholder: "业务层次",
          scope: "businessLevel",
          edu: "educationTypeId",
        },
        {
          prop: "subjectId",
          placeholder: "科目",
          scope: "sujectType",
          edu: "educationTypeId",
        },
        {
          prop: "key",
          placeholder: "请输入题卷名称/题卷编码",
        },
      ],
      tableData: [],
      moduleId: "",
    };
  },
  methods: {
    clearFunc() {
      this.templateRadio = "";
      this.$message.success("已清除选中题卷");
    },
    loadingClose() {
      this.disabledBtn = false;
    },
    openBoxs(arr) {
      if (arr.freeExamId) {
        this.templateRadio = arr.examType + "-" + arr.freeExamId;
      }
      this.moduleId = arr.moduleId;
      console.log(arr);
      this.search(2);
      this.dialogVisible = true;
    },
    search(v) {
      var self = this;
      this.loading = true;
      if (v === 1) {
        this.formData.pageNum = 1;
      }
      if (v === 2) {
        this.formData = {
          examType: this.formData.examType,
          pageSize: 10,
          pageNum: 1,
        };
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      if (data.examType === 1) {
        self.$api
          .inquireBankModule(data)
          .then((res) => {
            res.rows.forEach((item) => {
              item.ids = 1 + "-" + item.moduleExamId;
              item.type = 1;
              item.name = item.moduleName;
              item.sort = 0;
            });
            self.tableData = res.rows;
            self.total = res.total;
          })
          .finally(() => {
            this.loading = false;
          });
      }
      if (data.examType === 2) {
        self.$api
          .inquirebankchapterList(data)
          .then((res) => {
            res.rows.forEach((item) => {
              item.ids = 2 + "-" + item.chapterExamId;
              item.sort = 0;
              item.type = 2;
            });
            self.tableData = res.rows;
            self.total = res.total;
          })
          .finally(() => {
            this.loading = false;
          });
      }
      if (data.examType === 3) {
        self.$api
          .inquirebankexamList(data)
          .then((res) => {
            res.rows.forEach((item) => {
              item.ids = 3 + "-" + item.examId;
              item.sort = 0;
              item.type = 3;
              item.name = item.examName;
            });
            self.tableData = res.rows;
            self.total = res.total;
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    init() {
      this.search(2);
    },
    submitForm() {
      this.disabledBtn = true;
      let data = {};
      if (this.templateRadio) {
        let ids = this.templateRadio.split("-").map(Number);
        data = {
          examType: ids[0],
          freeExamId: ids[1],
          moduleId: this.moduleId,
        };
      } else {
        data = {
          examType: "",
          freeExamId: "",
          moduleId: this.moduleId,
        };
      }
      this.$api
        .editCoursemodule(data)
        .then((res) => {
          this.$message.success("成功");
          this.dialogVisible = false;
          this.$emit("backFunc")
        })
        .finally(() => {
          this.disabledBtn = false;
        });
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
    /**
     *
     * @param {int} status
     * @remark 顶部定制按钮-根据题卷类型点击快速搜索
     */
    topSearch(status) {
      this.formData.examType = status;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
.dis_box {
  background-color: #eee;
  padding: 10px 10px 0px;
  display: flex;
  margin-bottom: 16px;
  .left_box {
    flex: 1;
  }
  .clear_style {
    flex-shrink: 0;
    width: 80px;
    vertical-align: top;
    text-align: center;
  }
}
.elform_style {
  max-height: 620px;
  overflow: auto;
}
.p_style {
  font-size: 12px;
  color: #a4a4a4;
  margin: 0;
}
.inputListBox {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.inputListBoxs {
  display: flex;
  margin-bottom: 12px;
}
</style>