You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
4.0 KiB
142 lines
4.0 KiB
<template>
|
|
<div class="table-box">
|
|
<ProTable
|
|
ref="proTable"
|
|
:columns="columns"
|
|
:request-api="getTableList"
|
|
:initParam="initParam"
|
|
:toolButton="_toolButton"
|
|
@reset="tableReset"
|
|
>
|
|
<!-- 表格 header 按钮 -->
|
|
<template #tableHeader="">
|
|
<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增版本</el-button>
|
|
</template>
|
|
<!-- 表格操作 -->
|
|
<template #operation="scope">
|
|
<el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row.scheme_id)">编辑</el-button>
|
|
<el-button type="primary" link :icon="Delete" @click="deleteSch(scope.row.scheme_id)">删除</el-button>
|
|
</template>
|
|
</ProTable>
|
|
|
|
<SchemeDialog ref="dialogRef" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="tsx" name="useProTable">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { Scheme } from "@/api/interface";
|
|
import ProTable from "@/components/ProTable/index.vue";
|
|
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
|
import { ElMessageBox, ElMessage } from "element-plus";
|
|
|
|
import SchemeDialog from "@/views/base/scheme/components/SchemeDialog.vue";
|
|
|
|
import { getStageList, getSubjectList, getSchemeList, deleteScheme } from "@/api/modules/base";
|
|
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
|
|
|
|
const _toolButton = ["refresh"];
|
|
const subjectEnum = ref<any>([]);
|
|
|
|
// ProTable 实例
|
|
const proTable = ref<ProTableInstance>();
|
|
|
|
const initParam = reactive({ stage_id: "", subject_id: "" });
|
|
|
|
const getTableList = (params: any) => {
|
|
return getSchemeList(params);
|
|
};
|
|
|
|
const getStageSelect = async () => {
|
|
const res = await getStageList();
|
|
const _data = { data: res.data.list };
|
|
return _data;
|
|
};
|
|
|
|
const stageSelectChange = async e => {
|
|
proTable.value!.searchParam.subject_id = "";
|
|
subjectEnum.value.splice(0, subjectEnum.value.length);
|
|
if (e) {
|
|
const res = await getSubjectList({ stage_id: e, pageNum: 1, pageSize: 100 });
|
|
subjectEnum.value.push(...res.data.list);
|
|
}
|
|
initParam.stage_id = e;
|
|
initParam.subject_id = "";
|
|
};
|
|
|
|
const subjectSelectChange = async e => {
|
|
initParam.subject_id = e;
|
|
};
|
|
|
|
const tableReset = () => {
|
|
subjectEnum.value.splice(0, subjectEnum.value.length);
|
|
initParam.stage_id = "";
|
|
initParam.subject_id = "";
|
|
};
|
|
|
|
// 表格配置项
|
|
const columns = reactive<ColumnProps<Scheme.ResSchemeList>[]>([
|
|
{ type: "index", width: 70, label: "序号" },
|
|
{ prop: "scheme_id", label: "版本ID" },
|
|
{ prop: "scheme_name", label: "版本名称" },
|
|
{
|
|
prop: "stage_id",
|
|
label: "学段",
|
|
enum: getStageSelect,
|
|
search: { el: "select", props: { onChange: stageSelectChange } },
|
|
fieldNames: { label: "stage_name", value: "stage_id" }
|
|
},
|
|
{
|
|
prop: "subject_id",
|
|
label: "学科",
|
|
enum: subjectEnum.value,
|
|
tag: true,
|
|
isShow: false,
|
|
search: { el: "select", props: { onChange: subjectSelectChange } },
|
|
fieldNames: { label: "subject_name", value: "subject_id" }
|
|
},
|
|
{
|
|
prop: "type_id",
|
|
label: "类型",
|
|
tag: true,
|
|
enum: [
|
|
{ label: "章节目录", value: 1, tagType: "warning" },
|
|
{ label: "知识点", value: 2, tagType: "success" }
|
|
]
|
|
},
|
|
{ prop: "operation", label: "操作", fixed: "right", width: 330 }
|
|
]);
|
|
|
|
const dialogRef = ref<InstanceType<typeof SchemeDialog> | null>(null);
|
|
const openDrawer = (title: string, scheme_id: number = 0) => {
|
|
const params = {
|
|
title,
|
|
row: {},
|
|
getTableList: proTable.value?.getTableList,
|
|
updateId: scheme_id
|
|
};
|
|
dialogRef.value?.acceptParams(params);
|
|
};
|
|
|
|
// 删除版本信息
|
|
const deleteSch = async (scheme_id: number) => {
|
|
ElMessageBox.confirm(`是否删除该学科信息?`, "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
draggable: true
|
|
}).then(async () => {
|
|
await deleteScheme({ scheme_id });
|
|
ElMessage.success({ message: `成功!` });
|
|
|
|
proTable.value?.getTableList();
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
// getStageSelect();
|
|
});
|
|
</script>
|
|
|
|
<style></style>
|