@a2simcode/ui 0.0.136 → 0.0.137

package/docs/components/page.md

@@ -67,6 +67,19 @@
   </template>
 </Demo>
 
+## 数据表模型页面示例
+
+参考业务项目中常见的“左侧树 / 右侧表格”的写法：点击左侧数据库树切换数据源；右侧使用 `j-table-panel` 展示表模型列表，并支持“新增 / 导入 / 编辑 / 删除 / 同步 / 更新”等常见操作；通过 `j-page.call('mainTable','refreshData')` 刷新表格。
+
+<Demo :source-code="pageCodeTableModelCode">
+  <template #source>
+    <page-code-table-model />
+  </template>
+  <template #description>
+    示例没有依赖额外的 page 配置文件，直接在 Demo 内部定义 schema、按钮与动作，适合用于演示 `j-page` 的 Schema 页面组织能力。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="pageApi" componentName="page" />
@@ -77,6 +90,7 @@ import PageInit from '../examples/page/init.vue'
 import PageLog from '../examples/page/log.vue'
 import PageUserManagement from '../examples/page/user-management.vue'
 import PageDeptUserManagement from '../examples/page/dept-user-management.vue'
+import PageCodeTableModel from '../examples/page/code-table-model.vue'
 import pageApi from './meta/page'
 
 import pageBasicCode from '../examples/page/basic.vue?raw'
@@ -84,4 +98,5 @@ import pageInitCode from '../examples/page/init.vue?raw'
 import pageLogCode from '../examples/page/log.vue?raw'
 import pageUserManagementCode from '../examples/page/user-management.vue?raw'
 import pageDeptUserManagementCode from '../examples/page/dept-user-management.vue?raw'
+import pageCodeTableModelCode from '../examples/page/code-table-model.vue?raw'
 </script>

package/docs/examples/page/code-table-model.vue

@@ -0,0 +1,428 @@
+<template>
+  <div class="j-block" style="height: 600px">
+    <j-page ref="pageRef" :noPadding="true" :schema="schema" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ButtonClickScope, TableColumnCompConfig } from '@a2simcode/ui'
+
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+interface DbNode {
+  id: string
+  label: string
+}
+
+interface TableRecord {
+  j_Id: number
+  j_TableName: string
+  j_Description: string
+  j_Des?: string
+  j_State: 0 | 1
+}
+
+interface ColumnRecord {
+  j_DbColumnName: string
+  j_CsType: string
+  j_Length: number
+  j_DecimalDigits: number
+  j_IsNullable: 0 | 1
+  j_IsPrimaryKey: 0 | 1
+  j_IsIdentity: 0 | 1
+  j_Des: string
+}
+
+const pageRef = ref()
+
+const refreshTable = (reset = false) => {
+  pageRef.value?.call('mainTable', reset ? 'resetData' : 'refreshData')
+}
+
+const dbList = ref<DbNode[]>([
+  { id: 'sysDblink', label: '系统数据库' },
+  { id: 'bizDblink', label: '业务数据库' },
+  { id: 'reportDblink', label: '报表数据库' },
+])
+
+const selectedDbCode = ref<string>('sysDblink')
+const selectedDbName = ref<string>('系统数据库')
+
+const tablesByDb = ref<Record<string, TableRecord[]>>({
+  sysDblink: [
+    { j_Id: 1, j_TableName: 'SYS_USER', j_Description: '用户表', j_State: 1 },
+    { j_Id: 2, j_TableName: 'SYS_ROLE', j_Description: '角色表', j_State: 1 },
+    { j_Id: 3, j_TableName: 'SYS_LOG', j_Description: '日志表', j_State: 0 },
+  ],
+  bizDblink: [
+    { j_Id: 11, j_TableName: 'BIZ_ORDER', j_Description: '订单表', j_State: 0 },
+    { j_Id: 12, j_TableName: 'BIZ_CUSTOMER', j_Description: '客户表', j_State: 1 },
+  ],
+  reportDblink: [{ j_Id: 21, j_TableName: 'RPT_DAILY', j_Description: '日报表', j_State: 0 }],
+})
+
+const columnsByTableId = ref<Record<number, ColumnRecord[]>>({
+  1: [
+    {
+      j_DbColumnName: 'j_Id',
+      j_CsType: 'int',
+      j_Length: 0,
+      j_DecimalDigits: 0,
+      j_IsNullable: 0,
+      j_IsPrimaryKey: 1,
+      j_IsIdentity: 1,
+      j_Des: '主键',
+    },
+    {
+      j_DbColumnName: 'j_Account',
+      j_CsType: 'nvarchar',
+      j_Length: 50,
+      j_DecimalDigits: 0,
+      j_IsNullable: 0,
+      j_IsPrimaryKey: 0,
+      j_IsIdentity: 0,
+      j_Des: '账号',
+    },
+    {
+      j_DbColumnName: 'j_Name',
+      j_CsType: 'nvarchar',
+      j_Length: 50,
+      j_DecimalDigits: 0,
+      j_IsNullable: 1,
+      j_IsPrimaryKey: 0,
+      j_IsIdentity: 0,
+      j_Des: '姓名',
+    },
+  ],
+  2: [
+    {
+      j_DbColumnName: 'j_Id',
+      j_CsType: 'int',
+      j_Length: 0,
+      j_DecimalDigits: 0,
+      j_IsNullable: 0,
+      j_IsPrimaryKey: 1,
+      j_IsIdentity: 1,
+      j_Des: '主键',
+    },
+    {
+      j_DbColumnName: 'j_Name',
+      j_CsType: 'nvarchar',
+      j_Length: 50,
+      j_DecimalDigits: 0,
+      j_IsNullable: 0,
+      j_IsPrimaryKey: 0,
+      j_IsIdentity: 0,
+      j_Des: '角色名称',
+    },
+  ],
+})
+
+const getCurrentTables = () => tablesByDb.value[selectedDbCode.value] || []
+
+const api = {
+  getTablePage: async (dbCode: string, params: Record<string, any>) => {
+    const keyword = String(params?.keyword?.value || '').trim()
+    const { pagination } = params || {}
+    const { rows = 10, page = 1 } = pagination || {}
+
+    let list = [...(tablesByDb.value[dbCode] || [])]
+    if (keyword) {
+      list = list.filter(
+        (t) => t.j_TableName.includes(keyword) || t.j_Description.includes(keyword)
+      )
+    }
+
+    const start = (page - 1) * rows
+    const end = start + rows
+
+    return {
+      rows: list.slice(start, end).map((item) => ({
+        ...item,
+        children: (columnsByTableId.value[item.j_Id] || []).length > 0,
+      })),
+      records: list.length,
+    }
+  },
+  get: async (id: number) => {
+    return { codecolumnsList: columnsByTableId.value[id] || [] }
+  },
+  remove: async (id: number) => {
+    const list = getCurrentTables()
+    const idx = list.findIndex((t) => t.j_Id === id)
+    if (idx < 0) return false
+    list.splice(idx, 1)
+    return true
+  },
+  importTable: async (
+    dbCode: string,
+    postData: { tableList: Array<{ name: string; description?: string }> }
+  ) => {
+    const list = tablesByDb.value[dbCode] || (tablesByDb.value[dbCode] = [])
+    const nowId =
+      Math.max(
+        0,
+        ...Object.values(tablesByDb.value)
+          .flat()
+          .map((t) => t.j_Id)
+      ) + 1
+    postData.tableList.forEach((t, i) => {
+      const exist = list.find((x) => x.j_TableName === t.name)
+      if (exist) {
+        exist.j_State = 1
+        exist.j_Description = t.description || exist.j_Description
+        return
+      }
+      list.unshift({
+        j_Id: nowId + i,
+        j_TableName: t.name,
+        j_Description: t.description || '导入表',
+        j_State: 1,
+      })
+    })
+    return true
+  },
+  createOrUpdateTable: async (id: number, dbCode: string, dbName: string) => {
+    const list = tablesByDb.value[dbCode] || []
+    const target = list.find((t) => t.j_Id === id)
+    if (!target) return false
+    ElMessage.success(`已将【${target.j_TableName}】的设置更新到【${dbName}】`)
+    return true
+  },
+}
+
+const columnsConfig: Record<string, TableColumnCompConfig> = {
+  j_TableName: { minWidth: 200, filter: { isSearchKeyword: true } },
+  j_Description: { minWidth: 200, filter: { isSearchKeyword: true } },
+  j_State: {
+    type: 'j-tag',
+    width: 72,
+    dataType: 'options',
+    options: [
+      { label: '同步', value: 1, color: '#fff7e8' },
+      { label: '未同步', value: 0, color: '#e6f7ff' },
+    ],
+  },
+}
+
+const columns = [
+  { id: 'j_TableName', label: '表名' },
+  { id: 'j_Description', label: '说明' },
+  { id: 'j_State', label: '状态' },
+].map((item) => {
+  const cfg = columnsConfig[item.id] || {}
+  return {
+    id: item.id,
+    type: cfg.type || '',
+    config: { ...cfg, label: item.label },
+  }
+})
+
+const subColumns = [
+  { id: 'j_DbColumnName', config: { label: '名称', minWidth: 120 } },
+  { id: 'j_CsType', config: { label: '类型', width: 120 } },
+  { id: 'j_Length', config: { label: '长度', width: 80 } },
+  { id: 'j_DecimalDigits', config: { label: '小数位', width: 64 } },
+  {
+    id: 'j_IsNullable',
+    type: 'j-switch',
+    config: { label: '可空', width: 64, align: 'center', activeValue: 1, inactiveValue: 0 },
+  },
+  {
+    id: 'j_IsPrimaryKey',
+    type: 'j-switch',
+    config: { label: '主键', width: 64, align: 'center', activeValue: 1, inactiveValue: 0 },
+  },
+  {
+    id: 'j_IsIdentity',
+    type: 'j-switch',
+    config: { label: '自增', width: 64, align: 'center', activeValue: 1, inactiveValue: 0 },
+  },
+  { id: 'j_Des', config: { label: '备注', minWidth: 120 } },
+]
+
+const buttons = [
+  {
+    id: 'add',
+    label: '新增',
+    config: { type: 'primary', icon: 'mdi:add' },
+    click: async () => {
+      const res = await ElMessageBox.prompt('请输入表名', '新增', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputValue: '',
+      }).catch(() => null)
+      const name = String(res?.value || '').trim()
+      if (!name) return
+
+      const list = getCurrentTables()
+      const nextId =
+        Math.max(
+          0,
+          ...Object.values(tablesByDb.value)
+            .flat()
+            .map((t) => t.j_Id)
+        ) + 1
+      list.unshift({ j_Id: nextId, j_TableName: name, j_Description: '新建表', j_State: 0 })
+      ElMessage.success('新增成功')
+      refreshTable(true)
+    },
+  },
+  {
+    id: 'import',
+    label: '导入表',
+    config: { icon: 'mdi:table-upload' },
+    click: async () => {
+      await api.importTable(selectedDbCode.value, {
+        tableList: [
+          { name: 'NEW_TABLE_1', description: '导入示例表-1' },
+          { name: 'NEW_TABLE_2', description: '导入示例表-2' },
+        ],
+      })
+      ElMessage.success('导入成功')
+      refreshTable(true)
+    },
+  },
+]
+
+const actions = [
+  {
+    id: 'edit',
+    label: '编辑',
+    click: async ({ data }: ButtonClickScope) => {
+      const res = await ElMessageBox.prompt('请输入说明', `编辑-${data?.j_TableName}`, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputValue: data?.j_Description || '',
+      }).catch(() => null)
+      const desc = String(res?.value || '').trim()
+      if (!desc) return
+
+      const list = getCurrentTables()
+      const target = list.find((t) => t.j_Id === data?.j_Id)
+      if (!target) return
+      target.j_Description = desc
+      ElMessage.success('保存成功')
+      refreshTable()
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: { danger: true },
+    click: async ({ data }: ButtonClickScope) => {
+      await ElMessageBox.confirm(`您确定删除【${data?.j_TableName}】吗?`, '提示', {
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      })
+      const res = await api.remove(data?.j_Id)
+      if (res) {
+        ElMessage.success('删除成功')
+        refreshTable(true)
+      }
+    },
+  },
+  {
+    id: 'update',
+    label: '同步',
+    click: async ({ data }: ButtonClickScope) => {
+      await ElMessageBox.confirm(`您确定同步表【${data?.j_TableName}】到系统中吗?`, '提示', {
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      })
+      await api.importTable(selectedDbCode.value, {
+        tableList: [{ name: data?.j_TableName, description: data?.j_Des || data?.j_Description }],
+      })
+      ElMessage.success('同步成功')
+      refreshTable()
+    },
+  },
+  {
+    id: 'updateTable',
+    label: '更新',
+    click: async ({ data }: ButtonClickScope) => {
+      await ElMessageBox.confirm(
+        `您确定更新设置数据【${data?.j_TableName}】到数据库中吗?`,
+        '提示',
+        {
+          type: 'warning',
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+        }
+      )
+      const res = await api.createOrUpdateTable(
+        data?.j_Id,
+        selectedDbCode.value,
+        selectedDbName.value
+      )
+      if (res) {
+        refreshTable()
+      }
+    },
+  },
+]
+
+const schema = ref([
+  {
+    type: 'j-layout',
+    children: [
+      {
+        type: 'j-panel',
+        slot: 'left',
+        config: { title: '数据库' },
+        children: [
+          {
+            id: 'tree',
+            type: 'j-tree',
+            config: {
+              valueKey: 'id',
+              labelKey: 'label',
+              pidKey: 'id',
+              loadData: async () => dbList.value,
+              afterLoadData: () => {
+                const first = dbList.value?.[0]
+                selectedDbCode.value = first?.id || ''
+                selectedDbName.value = first?.label || ''
+                pageRef.value?.call('tree', 'setValue', null, selectedDbCode.value)
+                refreshTable(true)
+              },
+              click: (value: any, node: any) => {
+                if (value === selectedDbCode.value) return
+                selectedDbCode.value = node?.id || value
+                selectedDbName.value = node?.label || ''
+                refreshTable(true)
+              },
+            },
+          },
+        ],
+      },
+      {
+        id: 'mainTable',
+        type: 'j-table-panel',
+        config: {
+          columns,
+          subColumns,
+          rowKey: 'j_Id',
+          isPage: true,
+          buttons,
+          actions,
+          isSubShowNumber: true,
+          sort: 'j_TableName DESC',
+          immediate: false,
+          loadData: async (params: Record<string, any>) => {
+            if (!selectedDbCode.value) return { rows: [], records: 0 }
+            return api.getTablePage(selectedDbCode.value, params)
+          },
+          loadChildren: async (row: any) => {
+            const detail = await api.get(row?.j_Id)
+            return detail?.codecolumnsList || []
+          },
+        },
+      },
+    ],
+  },
+])
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.136",
+  "version": "0.0.137",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",