@a2simcode/ui 0.0.164 → 0.0.166

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

@@ -1,428 +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>
+<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>