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