Geeker-Admin/src/views/base/scheme/index.vue

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