src/components/hTable/hTable.ts

@@ -107,7 +107,7 @@ export interface TableColumn {
   /* 列宽度 */
   width?: string;
   /* 字段类型 */
-  type?: string;
+  type?: "string" | "dropdown" | "switch" | "img" | "datetime" | "textarea";
   /** 是否多选 */
   multiple?: boolean;
   /** 编辑时显示列 */

src/components/hTable/hTableEdit.vue

@@ -75,10 +75,10 @@ function handleSubmitForm() {
     }
 
     editData.value.loading = true;
-    let form = {};
+    let form: any = {};
     if (editData.value.isedit) {
       form = props.row;
-    }
+    } else form.id = 0;
     for (const key in column.value) {
       const element = column.value[key];
       if (element.valueE !== null && element.valueE !== "") {
@@ -154,9 +154,9 @@ function fetchFormData() {
         <div v-if="o.type.trim() == 'datetime'">
           <el-date-picker
             v-model="o.valueE as Date"
-            format="yyyy-MM-dd HH:mm:ss"
+            type="date"
-            value-format="yyyy-MM-dd HH:mm:ss"
+            format="YYYY-MM-DD"
-            type="datetime"
+            value-format="YYYY-MM-DD"
             :placeholder="o.label"
             style="width: 100%"
             @change="o.change"

src/components/hTable/index.vue

@@ -380,9 +380,9 @@ function fetchPagedData() {
           <el-date-picker
             v-if="o.type.trim() == 'datetime'"
             v-model="o.value as Date"
-            format="yyyy-MM-dd"
-            value-format="yyyy-MM-dd"
             type="date"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
             :placeholder="o.label"
             style="width: 100%"
           />

src/views/admin/role.vue

@@ -0,0 +1,109 @@
+<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";
+const ControllerName = "AdminRole";
+
+defineOptions({
+  name: ControllerName
+});
+
+function searchCallback(data) {}
+const RoleApi = new hTableAPI("AdminRole");
+const table = ref<{ initTable: (config: TableConfig) => void }>(null);
+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: "添加",
+      btnStyle: "success",
+      btnType: "add" // 按钮类型 add edit del custom
+    },
+    {
+      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"
+    },
+    name: {
+      label: "角色名称",
+      width: "180px",
+      search: true,
+      searchType: "Like",
+      add: true, // 字段允许添加
+      edit: true // 字段允许修改
+    },
+    enable: {
+      label: "启用",
+      type: "switch",
+      search: false,
+      add: false, // 字段允许添加
+      edit: true, // 字段允许修改
+      valueE: true // 编辑时的默认值
+    },
+    createTime: {
+      label: "创建时间",
+      type: "datetime",
+      search: true,
+      add: false, // 字段允许添加
+      edit: false // 字段允许修改
+    },
+    remark: {
+      label: "备注",
+      search: false,
+      add: true, // 字段允许添加
+      edit: true // 字段允许修改
+    }
+  },
+  data: [],
+  pageData: {
+    total: 0
+  },
+  selectRows: []
+};
+
+const showTable = ref(false);
+onMounted(async () => {
+  //初始化数据原
+
+  showTable.value = true;
+});
+</script>
+
+<template>
+  <div><ahTable v-if="showTable" ref="table" :tableConfig="tableData" /></div>
+</template>