NewLife/cube-front

feat: 更新用户管理页面,优化表单和数据集类型定义
笑笑 authored at 2025-05-19 00:00:17
eaf012f
Tree
1 Parent(s) 464bc84
Summary: 2 changed files with 34 additions and 37 deletions.
Modified +25 -32
Modified +9 -5
Modified +25 -32
diff --git a/apps/cube-admin/src/pages/admin/user/index.vue b/apps/cube-admin/src/pages/admin/user/index.vue
index 1779e0f..e59bfcc 100644
--- a/apps/cube-admin/src/pages/admin/user/index.vue
+++ b/apps/cube-admin/src/pages/admin/user/index.vue
@@ -52,10 +52,10 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, h } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { DataSet } from 'cube-front/core/dataset/data-set/DataSet';
+<script setup lang="tsx">
+import { ref, reactive } from 'vue';
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
+import { DataSet, type ColumnConfig } from 'cube-front/core/dataset/data-set/DataSet';
 import CbTable from 'cube-front/core/components/CbTable.vue';
 import type { FormInstance, FormRules } from 'element-plus';
 
@@ -76,7 +76,7 @@ const searchForm = reactive({
 });
 
 // 用户数据集
-const userColumns = [
+const userColumns: ColumnConfig<User, keyof User>[] = [
   { prop: 'id', label: 'ID', width: 80 },
   { prop: 'username', label: '用户名' },
   { prop: 'email', label: '邮箱' },
@@ -85,37 +85,30 @@ const userColumns = [
   {
     prop: 'status',
     label: '状态',
-    render: (value: number) => {
-      return value === 1
-        ? h('el-tag', { type: 'success' }, () => '启用')
-        : h('el-tag', { type: 'danger' }, () => '禁用');
+    render: (value: number | string | undefined) => {
+      const numericValue = typeof value === 'string' ? parseInt(value) : value;
+      return numericValue === 1 ? (
+        <el-tag type="success">启用</el-tag>
+      ) : (
+        <el-tag type="danger">禁用</el-tag>
+      );
     },
   },
   {
     label: '操作',
     width: 200,
-    render: (_value: unknown, row: User) => [
-      h(
-        'el-button',
-        {
-          type: 'primary',
-          size: 'small',
-          onClick: () => handleEdit(row),
-        },
-        () => '编辑',
-      ),
-      h(
-        'el-button',
-        {
-          type: 'danger',
-          size: 'small',
-          onClick: () => handleDelete(row),
-        },
-        () => '删除',
-      ),
-    ],
+    render: (_value: unknown, row: User) => (
+      <span>
+        <ElButton type="primary" size="small" link onClick={() => handleEdit(row)}>
+          编辑
+        </ElButton>
+        <ElButton type="danger" size="small" link onClick={() => handleDelete(row)}>
+          删除
+        </ElButton>
+      </span>
+    ),
   },
-] as import('cube-front/core/dataset/data-set/DataSet').ColumnConfig<User, keyof User>[];
+];
 
 const userDataSet = new DataSet<User, { username: string }>({
   transport: {
@@ -133,12 +126,12 @@ const userDataSet = new DataSet<User, { username: string }>({
       data,
     }),
     update: ({ data }) => ({
-      url: `/Admin/User/${data.id}`,
+      url: `/Admin/User/${(data as { id: string | number }).id}`,
       method: 'put',
       data,
     }),
     destroy: ({ data }) => ({
-      url: `/Admin/User/${data.id}`,
+      url: `/Admin/User/${(data as { id: string | number }).id}`,
       method: 'delete',
     }),
   },
Modified +9 -5
diff --git a/core/components/CbTable.vue b/core/components/CbTable.vue
index 77932d0..5f29fdd 100644
--- a/core/components/CbTable.vue
+++ b/core/components/CbTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="cb-table">
     <el-table
-      :data="dataSet.data"
+      :data="data"
       :loading="dataSet.loading"
       v-bind="$attrs"
       @sort-change="handleSortChange"
@@ -36,10 +36,10 @@
             }
           "
           :filters="col.filters"
-          :filter-method="col.filterMethod"
+          :filter-method="(value, row, column) => col.filterMethod?.(value, row, column as any)"
           :filter-multiple="col.filterMultiple"
           :filtered-value="col.filteredValue"
-          :show-overflow-tooltip="col.showOverflowTooltip"
+          :show-overflow-tooltip="typeof col.showOverflowTooltip === 'boolean' ? col.showOverflowTooltip : false"
           :class-name="col.className"
           :label-class-name="col.labelClassName"
           :resizable="col.resizable"
@@ -49,8 +49,8 @@
           :reserve-selection="col.reserveSelection"
           :column-key="col.columnKey"
         >
-          <template v-if="col.render && col.prop" #default="{ row, $index }">
-            <span>{{ col.render(row[col.prop], row, $index) }}</span>
+          <template v-if="col.render" #default="{ row, $index }">
+            <component :is="col.render(col.prop ? row[col.prop] : null, row, $index)" />
           </template>
         </el-table-column>
       </template>
@@ -98,6 +98,10 @@ const columns = computed(() => {
 const currentPage = ref(1);
 const total = ref(0);
 
+const data = computed(() => {
+  return props.dataSet.data;
+});
+
 const handleSortChange = ({ prop, order }: { prop: string; order: string }) => {
   query({ sortField: prop, sortOrder: order });
 };