Learn.Archives.Web/src/views/class/index.vue

<script setup lang="ts">
import ahTable from "@/components/hTable/index.vue";
import { TableConfig } from "@/components/hTable/hTable";
import { onMounted, ref } from "vue";
import { fa } from "element-plus/es/locales.mjs";
import { hTableAPI } from "@/api/hTable";
import { getenum } from "@/api/enum";
import { ruleRequired } from "@/utils/rules";
const ControllerName = "classes";

defineOptions({
  name: ControllerName
});

const SchoolApi = new hTableAPI("schools");
function searchCallback(data) {}

const table = ref<{ initTable: (config: TableConfig) => void }>();
const tableData: TableConfig = {
  apiUrl: ControllerName,
  selectColumn: false, // 列表选择
  border: false, // 是否显示表格边框
  searchCallback: searchCallback,
  search: {
    // 查询条件
    show: true,
    PageIndex: 0,
    PageSize: 20,
    OrderBy: "CreateTime", // 排序
    defaultConditions: [], // 默认查询条件
    Conditions: []
  },
  operationColumn: true, // 显示操作按钮
  operationColumnData: [
    {
      // 操作按钮
      topBtn: false, // 是头部按钮
      label: "修改",
      btnType: "edit" // 按钮类型 add edit del custom
    },
    {
      topBtn: true, // 头部按钮
      label: "新增",
      btnType: "custom", // 按钮类型 add edit del custom
      btnStyle: "success", // topBtn: true才生效 success danger
      custom: {
        // 按钮类型 custom 专用
        title: "新增班级", // 弹出框title
        src: "class/edit", // 组件路径
        width: "550px", // 弹框宽度
        height: "520px" // 弹框高度
      }
    },
    {
      topBtn: false, // 头部按钮
      show: true,
      label: "删除",
      btnType: "del", // 按钮类型 add edit del 不设置则 自定义按钮
      btnStyle: "danger" // topBtn: true才生效 success danger
    }
  ],
  column: {
    // 行数据
    id: {
      label: "编号",
      search: true,
      add: false, // 字段允许添加
      edit: false, // 字段允许修改
      width: "150px"
    },
    schoolId: {
      label: "学校",
      rules: ruleRequired,
      width: "180px",
      search: true,
      type: "dropdown",
      add: true, // 字段允许添加
      edit: true, // 字段允许修改
      setting: {}
    },
    name: {
      label: "名称",
      rules: ruleRequired,
      width: "180px",
      search: true,
      searchType: "Like",
      add: true, // 字段允许添加
      edit: true // 字段允许修改
    },
    Grade: {
      label: "年级",
      rules: ruleRequired,
      width: "180px",
      type: "dropdown",
      custom: row => `${row.grade ?? ""}`,
      // `${row.grade ?? ""} ${row.gradeLevel + row.graduationYear}`,
      search: true,
      setting: {},
      add: true, // 字段允许添加
      edit: false // 字段允许修改
    },
    GradeLevel: {
      label: "年级",
      search: false,
      type: "dropdown",
      searchType: "Like", // Equal等于/NoEqual不等于/Like包含/GreaterThan大于/LessThan小于/NoLike不包括
      add: true, // 字段允许添加
      edit: true, // 字段允许修改
      width: "70px",
      setting: {
        datasource: [
          { text: "初", value: "初" },
          { text: "高", value: "高" },
          { text: "小", value: "小" }
        ]
      }
    },
    GraduationYear: {
      label: "届",
      search: false,
      searchType: "Like", // Equal等于/NoEqual不等于/Like包含/GreaterThan大于/LessThan小于/NoLike不包括
      add: true, // 字段允许添加
      edit: true, // 字段允许修改
      width: "80px"
    },
    type: {
      label: "类型",
      rules: ruleRequired,
      // width: "150px",
      type: "dropdown",
      search: true,
      add: true, // 字段允许添加
      edit: true, // 字段允许修改
      setting: {}
    }
    // createTime: {
    //   label: "创建时间",
    //   width: "180px",
    //   type: "datetime",
    //   search: true,
    //   add: false, // 字段允许添加
    //   edit: false // 字段允许修改
    // },
    // remark: {
    //   label: "备注",
    //   type: "textarea",
    //   editRows: 3,
    //   search: false,
    //   add: true, // 字段允许添加
    //   edit: true // 字段允许修改
    // }
  },
  data: [],
  pageData: {
    total: 0
  },
  selectRows: []
};

const showTable = ref(false);
onMounted(async () => {
  //初始化数据原

  tableData.column.Grade.setting.datasource = [
    { text: "初一", value: "初一" },
    { text: "初二", value: "初二" },
    { text: "初三", value: "初三" },
    { text: "高一", value: "高一" },
    { text: "高二", value: "高二" },
    { text: "高三", value: "高三" },
    { text: "一年级", value: "一年级" },
    { text: "二年级", value: "二年级" },
    { text: "三年级", value: "三年级" },
    { text: "四年级", value: "四年级" },
    { text: "五年级", value: "五年级" },
    { text: "六年级", value: "六年级" }
  ];
  tableData.column.type.setting.datasource = (
    await getenum("ClassTypeEnum")
  ).data;
  tableData.column.schoolId.setting.datasource = (
    await SchoolApi.querycombo({ TextName: "Name", ValueName: "Id" })
  ).data;

  showTable.value = true;
});
</script>

<template>
  <div><ahTable v-if="showTable" ref="table" :tableConfig="tableData" /></div>
</template>