|
|
@@ -0,0 +1,372 @@
|
|
|
+<template>
|
|
|
+ <div class="card-manage">
|
|
|
+ <div class="part-box part-box-filter part-box-flex">
|
|
|
+ <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
|
|
|
+ <template v-if="checkPrivilege('condition', 'condition')">
|
|
|
+ <secp-select
|
|
|
+ v-model="filter"
|
|
|
+ exam-model="MODEL4"
|
|
|
+ defaultSelectExam
|
|
|
+ @exam-default="search"
|
|
|
+ ></secp-select>
|
|
|
+ </template>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ v-if="checkPrivilege('button', 'select')"
|
|
|
+ type="primary"
|
|
|
+ @click="toPage(1)"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="part-box-action">
|
|
|
+ <el-button
|
|
|
+ v-if="checkPrivilege('button', 'add')"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-circle-plus-outline"
|
|
|
+ @click="toAdd"
|
|
|
+ >新增题卡</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="checkPrivilege('button', 'batchDownload')"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-download"
|
|
|
+ @click="toBatchDownload"
|
|
|
+ >批量下载</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="part-box part-box-pad">
|
|
|
+ <el-table
|
|
|
+ ref="TableList"
|
|
|
+ :data="cardList"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ fixed="left"
|
|
|
+ width="55"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="70"
|
|
|
+ :index="indexMethod"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="title"
|
|
|
+ label="题卡名称"
|
|
|
+ min-width="160"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="课程（代码）" min-width="260">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.courseName | defaultFieldFilter }}（{{
|
|
|
+ scope.row.courseCode | defaultFieldFilter
|
|
|
+ }}）
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="type" label="类型" width="100">
|
|
|
+ <span slot-scope="scope">{{ scope.row.type | cardTypeFilter }}</span>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" width="100">
|
|
|
+ <span
|
|
|
+ :class="{ 'color-danger': scope.row.status !== 'SUBMIT' }"
|
|
|
+ slot-scope="scope"
|
|
|
+ >{{ scope.row.status === "SUBMIT" ? "提交" : "暂存" }}</span
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ class-name="action-column"
|
|
|
+ label="操作"
|
|
|
+ width="230"
|
|
|
+ fixed="right"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="checkPrivilege('link', 'preview')"
|
|
|
+ class="btn-primary"
|
|
|
+ type="text"
|
|
|
+ @click="toPreview(scope.row)"
|
|
|
+ >查看</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="
|
|
|
+ checkPrivilege('link', 'ConvertImage') && !scope.row.imageUrls
|
|
|
+ "
|
|
|
+ class="btn-primary"
|
|
|
+ type="text"
|
|
|
+ @click="toConvertImage(scope.row)"
|
|
|
+ >生成图片</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="
|
|
|
+ checkPrivilege('link', 'ConvertImage') && scope.row.imageUrls
|
|
|
+ "
|
|
|
+ class="btn-primary"
|
|
|
+ type="text"
|
|
|
+ @click="toPreviewImage(scope.row)"
|
|
|
+ >预览图片</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="
|
|
|
+ checkPrivilege('link', 'edit') &&
|
|
|
+ scope.row.createMethod !== 'UPLOAD'
|
|
|
+ "
|
|
|
+ class="btn-primary"
|
|
|
+ type="text"
|
|
|
+ @click="toEditCard(scope.row)"
|
|
|
+ >编辑题卡</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="
|
|
|
+ checkPrivilege('link', 'edit') &&
|
|
|
+ scope.row.type !== 'CUSTOM' &&
|
|
|
+ !scope.row.used
|
|
|
+ "
|
|
|
+ class="btn-primary"
|
|
|
+ type="text"
|
|
|
+ @click="toEditInfo(scope.row)"
|
|
|
+ >编辑信息</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="checkPrivilege('link', 'Download')"
|
|
|
+ class="btn-primary"
|
|
|
+ type="text"
|
|
|
+ @click="toDownload(scope.row)"
|
|
|
+ >下载题卡</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="checkPrivilege('link', 'delete')"
|
|
|
+ class="btn-danger"
|
|
|
+ type="text"
|
|
|
+ @click="toDelete(scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="part-page">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :pager-count="5"
|
|
|
+ :current-page="current"
|
|
|
+ :total="total"
|
|
|
+ :page-size="size"
|
|
|
+ @current-change="toPage"
|
|
|
+ @size-change="pageSizeChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ModifyModeCardInfo -->
|
|
|
+ <modify-mode-card-info
|
|
|
+ ref="ModifyModeCardInfo"
|
|
|
+ :instance="curCard"
|
|
|
+ @new-card="toNewCard"
|
|
|
+ @modified="getList"
|
|
|
+ ></modify-mode-card-info>
|
|
|
+ <!-- ModifyCard -->
|
|
|
+ <modify-card ref="ModifyCard" @modified="getList"></modify-card>
|
|
|
+ <!-- image-preview -->
|
|
|
+ <simple-image-preview
|
|
|
+ :cur-image="curImage"
|
|
|
+ @on-prev="toPrevImage"
|
|
|
+ @on-next="toNextImage"
|
|
|
+ ref="SimpleImagePreview"
|
|
|
+ ></simple-image-preview>
|
|
|
+ <!-- card-preview-dialog -->
|
|
|
+ <card-preview-dialog
|
|
|
+ ref="CardPreviewDialog"
|
|
|
+ :card-id="curCard.id"
|
|
|
+ is-model-four
|
|
|
+ show-watermark
|
|
|
+ ></card-preview-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ modeCardListPage,
|
|
|
+ deleteModeCard,
|
|
|
+ convertModeCardImage,
|
|
|
+ downloadModeCardFile,
|
|
|
+ downloadBatchModeCardFile,
|
|
|
+} from "../api";
|
|
|
+import ModifyCard from "../../card/components/ModifyCard.vue";
|
|
|
+import SimpleImagePreview from "@/components/SimpleImagePreview.vue";
|
|
|
+import CardPreviewDialog from "../../card/components/CardPreviewDialog.vue";
|
|
|
+import { downloadByApi } from "@/plugins/download";
|
|
|
+import ModifyModeCardInfo from "../components/ModifyModeCardInfo.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "card-manage",
|
|
|
+ components: {
|
|
|
+ ModifyCard,
|
|
|
+ ModifyModeCardInfo,
|
|
|
+ SimpleImagePreview,
|
|
|
+ CardPreviewDialog,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filter: {
|
|
|
+ semesterId: "",
|
|
|
+ examId: "",
|
|
|
+ openCollegeId: "",
|
|
|
+ courseId: "",
|
|
|
+ paperNumber: "",
|
|
|
+ },
|
|
|
+ current: 1,
|
|
|
+ size: this.GLOBAL.pageSize,
|
|
|
+ total: 0,
|
|
|
+ cardList: [],
|
|
|
+ curCard: {},
|
|
|
+ multipleSelection: [],
|
|
|
+ // image-preview
|
|
|
+ imageList: [],
|
|
|
+ curImage: {},
|
|
|
+ curImageIndex: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getList() {
|
|
|
+ if (!this.checkPrivilege("list", "list")) return;
|
|
|
+
|
|
|
+ const datas = {
|
|
|
+ ...this.filter,
|
|
|
+ pageNumber: this.current,
|
|
|
+ pageSize: this.size,
|
|
|
+ };
|
|
|
+ if (this.createTime) {
|
|
|
+ datas.createStartTime = this.createTime[0];
|
|
|
+ datas.createEndTime = this.createTime[1];
|
|
|
+ }
|
|
|
+ const data = await modeCardListPage(datas);
|
|
|
+ this.cardList = data.records;
|
|
|
+ this.total = data.total;
|
|
|
+ },
|
|
|
+ toPage(page) {
|
|
|
+ this.current = page;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.toPage(1);
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val.map((item) => item.id);
|
|
|
+ },
|
|
|
+ toAdd() {
|
|
|
+ this.curCard = {};
|
|
|
+ this.$refs.ModifyModeCardInfo.open();
|
|
|
+ },
|
|
|
+ toPreview(row) {
|
|
|
+ this.curCard = row;
|
|
|
+ this.$refs.CardPreviewDialog.open();
|
|
|
+ },
|
|
|
+ toNewCard(data) {
|
|
|
+ this.$ls.set("prepareTcPCard", {
|
|
|
+ ...data,
|
|
|
+ cardName: data.title,
|
|
|
+ isModel4: true,
|
|
|
+ });
|
|
|
+ this.$refs.ModifyCard.open();
|
|
|
+ },
|
|
|
+ toEditCard(row) {
|
|
|
+ this.curCard = row;
|
|
|
+ this.$ls.set("prepareTcPCard", {
|
|
|
+ id: row.id,
|
|
|
+ title: row.title,
|
|
|
+ cardName: row.title,
|
|
|
+ type: row.type,
|
|
|
+ createMethod: row.createMethod,
|
|
|
+ makeMethod: row.makeMethod,
|
|
|
+ remark: row.remark,
|
|
|
+ courseCode: row.courseCode,
|
|
|
+ courseName: row.courseName,
|
|
|
+ cardRuleId: row.cardRuleId,
|
|
|
+ semesterId: row.semesterId,
|
|
|
+ examId: row.examId,
|
|
|
+ courseId: row.courseId,
|
|
|
+ isModel4: true,
|
|
|
+ });
|
|
|
+ this.$refs.ModifyCard.open();
|
|
|
+ },
|
|
|
+ toEditInfo(row) {
|
|
|
+ this.curCard = row;
|
|
|
+ this.$refs.ModifyModeCardInfo.open();
|
|
|
+ },
|
|
|
+ toDelete(row) {
|
|
|
+ this.$confirm(`确定要删除题卡【${row.title}】吗?`, "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ await deleteModeCard(row.id);
|
|
|
+ this.$message.success("删除成功！");
|
|
|
+ this.deletePageLastItem();
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ async toConvertImage(row) {
|
|
|
+ await convertModeCardImage(row.id);
|
|
|
+ this.$message.success("操作成功！");
|
|
|
+ },
|
|
|
+ async toDownload(row) {
|
|
|
+ const res = await downloadByApi(() => {
|
|
|
+ return downloadModeCardFile(row.id);
|
|
|
+ }, "").catch((e) => {
|
|
|
+ this.$message.error(e || "下载失败，请重新尝试！");
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!res) return;
|
|
|
+ this.$message.success("下载成功！");
|
|
|
+ },
|
|
|
+ async toBatchDownload() {
|
|
|
+ if (!this.multipleSelection.length) {
|
|
|
+ this.$message.warning("请选择要下载的题卡！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const res = await downloadByApi(() => {
|
|
|
+ return downloadBatchModeCardFile(this.multipleSelection.join(","));
|
|
|
+ }, "").catch((e) => {
|
|
|
+ this.$message.error(e || "下载失败，请重新尝试！");
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!res) return;
|
|
|
+ this.$message.success("下载成功！");
|
|
|
+ },
|
|
|
+ // image-preview
|
|
|
+ toPreviewImage(row) {
|
|
|
+ this.imageList = row.imageUrls;
|
|
|
+ this.curImageIndex = 0;
|
|
|
+ this.selectImage(0);
|
|
|
+ this.$refs.SimpleImagePreview.open();
|
|
|
+ },
|
|
|
+ selectImage(index) {
|
|
|
+ this.curImage = {
|
|
|
+ url: this.imageList[index],
|
|
|
+ filename: Math.floor(index / 2) + 1 + "-" + ((index % 2) + 1),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ toPrevImage() {
|
|
|
+ if (this.curImageIndex === 0) {
|
|
|
+ this.curImageIndex = this.imageList.length - 1;
|
|
|
+ } else {
|
|
|
+ this.curImageIndex--;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.selectImage(this.curImageIndex);
|
|
|
+ },
|
|
|
+ toNextImage() {
|
|
|
+ if (this.curImageIndex === this.imageList.length - 1) {
|
|
|
+ this.curImageIndex = 0;
|
|
|
+ } else {
|
|
|
+ this.curImageIndex++;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.selectImage(this.curImageIndex);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
