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.

102 lines
3.1 KiB

<template>
<div class="table-box">
<ProTable
ref="proTable"
:columns="columns"
:request-api="getTableList"
:initParam="initParam"
:toolButton="_toolButton"
:border="true"
>
<!-- 表格 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.subject_id)">编辑</el-button>
<el-button type="primary" link :icon="Delete" @click="deleteSub(scope.row.subject_id)"></el-button>
</template>
</ProTable>
<SubjectDialog ref="dialogRef" />
</div>
</template>
<script setup lang="tsx" name="useProTable">
import { ref, reactive } from "vue";
import { Subject } from "@/api/interface";
import { ElMessageBox, ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import SubjectDialog from "@/views/base/subject/components/SubjectDialog.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getSubjectList, deleteSubject } from "@/api/modules/base";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
// ProTable 实例
const proTable = ref<ProTableInstance>();
const initParam = reactive({ stage_id: "" });
const _toolButton = ["refresh"];
const getTableList = (params: any) => {
return getSubjectList(params);
};
const stageSelectChange = async e => {
console.log(e);
initParam.stage_id = e;
};
// 表格配置项
const columns = reactive<ColumnProps<Subject.ResSubjectList>[]>([
{ type: "index", width: 70, label: "序号" },
{ prop: "subject_id", label: "学科ID" },
{ prop: "subject_name", label: "学科名称" },
{ prop: "subject_code", label: "学科代码" },
{
prop: "stage_id",
label: "学段",
enum: [
{ stage_id: 0, stage_name: "通用" },
{ stage_id: 4, stage_name: "小学" },
{ stage_id: 5, stage_name: "初中" },
{ stage_id: 6, stage_name: "高中" },
{ stage_id: 7, stage_name: "职业" }
],
search: { el: "select", props: { onChange: stageSelectChange } },
fieldNames: { label: "stage_name", value: "stage_id" }
},
{ prop: "sort_id", label: "排序号" },
{ prop: "operation", label: "操作", width: 200 }
]);
const dialogRef = ref<InstanceType<typeof SubjectDialog> | null>(null);
const openDrawer = (title: string, subject_id: number = 0) => {
const params = {
title,
row: {},
getTableList: proTable.value?.getTableList,
updateId: subject_id
};
dialogRef.value?.acceptParams(params);
};
// 删除学科信息
const deleteSub = async (subject_id: number) => {
ElMessageBox.confirm(`是否删除该学科信息?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
draggable: true
}).then(async () => {
await deleteSubject({ subject_id });
ElMessage.success({ message: `成功!` });
proTable.value?.getTableList();
});
};
</script>