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

<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>