@a2simcode/ui 0.0.82 → 0.0.83

package/docs/components/meta/buttons.ts

@@ -42,7 +42,7 @@ export default {
       "properties": [
         {
           "name": "config",
-          "type": "ButtonProps",
+          "type": "ButtonProps & { display?: boolean }",
           "description": "按钮配置"
         },
         {

package/docs/components/meta/comp.ts

@@ -59,6 +59,18 @@ export default {
       "description": "获取表格提供的方法",
       "type": "func",
       "default": "undefined"
+    },
+    {
+      "name": "colNum",
+      "description": "列索引",
+      "type": "number",
+      "default": "undefined"
+    },
+    {
+      "name": "rowNum",
+      "description": "行索引",
+      "type": "number",
+      "default": "undefined"
     }
   ],
   "events": [

package/docs/components/meta/page.ts

@@ -3,7 +3,7 @@ export default {
     {
       "name": "schema",
       "description": "模版",
-      "type": "PageSchemaConfig[]",
+      "type": "SchemaConfig[]",
       "default": "() => []"
     },
     {
@@ -42,26 +42,5 @@ export default {
       "type": "() => void"
     }
   ],
-  "types": [
-    {
-      "name": "PageSchemaConfig",
-      "properties": [
-        {
-          "name": "id",
-          "type": "string",
-          "description": "id"
-        },
-        {
-          "name": "type",
-          "type": "string",
-          "description": "类型"
-        },
-        {
-          "name": "children",
-          "type": "PageSchemaConfig[]",
-          "description": "子集"
-        }
-      ]
-    }
-  ]
+  "types": []
 }

package/docs/components/meta/tabs.ts

@@ -45,6 +45,11 @@ export default {
       "name": "beforeLeave",
       "description": "切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换",
       "type": "TSFunctionType"
+    },
+    {
+      "name": "isFill",
+      "description": "是否充满容器",
+      "type": "boolean"
     }
   ],
   "events": [
@@ -129,6 +134,11 @@ export default {
           "name": "beforeLeave",
           "type": "(\n    activeName: string | number,\n    oldActiveName: string | number\n  ) => boolean | Promise<boolean>",
           "description": "切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换"
+        },
+        {
+          "name": "isFill",
+          "type": "boolean",
+          "description": "是否充满容器"
         }
       ]
     }

package/docs/components/page.md

@@ -54,6 +54,19 @@
   </template>
 </Demo>
 
+## 部门-用户联动示例
+
+参考业务项目中常见的“左侧列表 / 右侧列表”的联动写法：点击左侧部门，触发 `onSelect` 更新筛选条件，并通过 `j-page.call('userTable','resetData')` 刷新右侧分页表格。
+
+<Demo :source-code="pageDeptUserManagementCode">
+  <template #source>
+    <page-dept-user-management />
+  </template>
+  <template #description>
+    左侧使用 `j-table-panel`（不分页）展示部门；右侧使用 `j-table-panel`（分页）展示用户，并提供“全部用户 / 刷新”等常用按钮。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="pageApi" componentName="page" />
@@ -63,10 +76,12 @@ import PageBasic from '../examples/page/basic.vue'
 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 pageApi from './meta/page'
 
 import pageBasicCode from '../examples/page/basic.vue?raw'
 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'
 </script>

package/docs/examples/page/dept-user-management.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="j-block" style="height: 600px">
+    <j-page ref="pageRef" :noPadding="true" :schema="schema" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TableColumnCompConfig } from '@a2simcode/ui'
+
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+interface DeptRecord {
+  j_Id: string
+  j_Name: string
+  j_Code: string
+}
+
+interface UserRecord {
+  j_Id: number
+  j_DeptId: string
+  j_Account: string
+  j_Name: string
+  j_EnabledMark: 0 | 1
+  j_CreateDate: string
+}
+
+const randomFrom = <T,>(arr: T[]) => arr[Math.floor(Math.random() * arr.length)]
+
+const createDepts = (count: number): DeptRecord[] => {
+  const names = [
+    '研发中心',
+    '产品中心',
+    '市场部',
+    '销售部',
+    '财务部',
+    '人力资源部',
+    '运维部',
+    '客服部',
+  ]
+  return Array.from({ length: count }).map((_, i) => {
+    const id = String(i + 1)
+    return {
+      j_Id: id,
+      j_Name: `${randomFrom(names)}-${String(i + 1).padStart(2, '0')}`,
+      j_Code: `D${String(i + 1).padStart(3, '0')}`,
+    }
+  })
+}
+
+const createUsers = (count: number, deptIds: string[]): UserRecord[] => {
+  const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十']
+  const now = Date.now()
+  return Array.from({ length: count }).map((_, i) => {
+    const id = i + 1
+    const createTime = new Date(now - Math.floor(Math.random() * 30 * 24 * 60 * 60 * 1000))
+    return {
+      j_Id: id,
+      j_DeptId: randomFrom(deptIds),
+      j_Account: `user_${String(id).padStart(3, '0')}`,
+      j_Name: randomFrom(names),
+      j_EnabledMark: Math.random() > 0.2 ? 1 : 0,
+      j_CreateDate: createTime.toISOString(),
+    }
+  })
+}
+
+const selectedDeptId = ref<string>('')
+
+const depts = ref<DeptRecord[]>(createDepts(12))
+const users = ref<UserRecord[]>(
+  createUsers(
+    86,
+    depts.value.map((d) => d.j_Id)
+  )
+)
+
+const api = {
+  getDepts: async (params: Record<string, any>) => {
+    const keyword = String(params?.keyword?.value || '').trim()
+    let list = [...depts.value]
+    if (keyword) {
+      list = list.filter((d) => d.j_Name.includes(keyword) || d.j_Code.includes(keyword))
+    }
+    return list
+  },
+  getUsers: async (params: Record<string, any>) => {
+    const keyword = String(params?.keyword?.value || '').trim()
+    const { pagination } = params || {}
+    const { rows = 10, page = 1 } = pagination || {}
+
+    let list = [...users.value]
+    if (selectedDeptId.value) {
+      list = list.filter((u) => u.j_DeptId === selectedDeptId.value)
+    }
+    if (keyword) {
+      list = list.filter((u) => u.j_Name.includes(keyword) || u.j_Account.includes(keyword))
+    }
+
+    const start = (page - 1) * rows
+    const end = start + rows
+
+    return {
+      rows: list.slice(start, end),
+      records: list.length,
+    }
+  },
+}
+
+const pageRef = ref()
+
+const refreshUsers = (reset = false) => {
+  pageRef.value?.call('userTable', reset ? 'resetData' : 'refreshData')
+}
+
+const deptColumns = [
+  { id: 'j_Name', config: { label: '部门', width: 160, filter: { isSearchKeyword: true } } },
+  { id: 'j_Code', config: { label: '编码', width: 90, filter: { isSearchKeyword: true } } },
+]
+
+const userColumnsConfig: Record<string, TableColumnCompConfig> = {
+  j_Name: { width: 120, filter: { isSearchKeyword: true } },
+  j_Account: { width: 140, filter: { isSearchKeyword: true } },
+  j_DeptId: { width: 90, align: 'center' },
+  j_EnabledMark: {
+    type: 'j-switch',
+    activeValue: 1,
+    inactiveValue: 0,
+    width: 72,
+    align: 'center',
+    change: async () => {
+      ElMessage.success('更新成功')
+    },
+  },
+  j_CreateDate: { type: 'dateTime', width: 168 },
+}
+
+const userColumns = [
+  { id: 'j_Name', label: '姓名' },
+  { id: 'j_Account', label: '账号' },
+  { id: 'j_DeptId', label: '部门ID' },
+  { id: 'j_EnabledMark', label: '有效' },
+  { id: 'j_CreateDate', label: '创建时间' },
+].map((item) => {
+  const cfg = userColumnsConfig[item.id] || {}
+  return {
+    id: item.id,
+    type: cfg.type || '',
+    config: { ...cfg, label: item.label },
+  }
+})
+
+const userButtons = [
+  {
+    id: 'allUsers',
+    label: '全部用户',
+    click: () => {
+      selectedDeptId.value = ''
+      pageRef.value?.call('deptTable', 'clearSelection')
+      refreshUsers(true)
+    },
+  },
+  {
+    id: 'refresh',
+    label: '刷新',
+    config: { icon: 'mdi:refresh' },
+    click: () => refreshUsers(),
+  },
+]
+
+const schema = ref([
+  {
+    type: 'j-layout',
+    config: {
+      left: 320,
+    },
+    children: [
+      {
+        id: 'deptTable',
+        type: 'j-table-panel',
+        slot: 'left',
+        config: {
+          columns: deptColumns,
+          rowKey: 'j_Id',
+          isPage: false,
+          highlightMode: 'row',
+          loadData: async (params: Record<string, any>) => api.getDepts(params),
+          onSelect: (selections: DeptRecord[]) => {
+            const nextId = selections?.[0]?.j_Id || ''
+            if (nextId === selectedDeptId.value) return
+            selectedDeptId.value = nextId
+            refreshUsers(true)
+          },
+        },
+      },
+      {
+        id: 'userTable',
+        type: 'j-table-panel',
+        config: {
+          columns: userColumns,
+          buttons: userButtons,
+          rowKey: 'j_Id',
+          isPage: true,
+          sort: 'j_CreateDate DESC',
+          loadData: async (params: Record<string, any>) => api.getUsers(params),
+        },
+      },
+    ],
+  },
+])
+</script>

package/package.json

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