@a2simcode/ui 0.0.84 → 0.0.85

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

@@ -1,211 +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>
+<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/docs/examples/page/init.vue

@@ -1,87 +1,87 @@
-<template>
-    <div>
-        <j-button 
-            type="primary" 
-            label="使用 init 方法初始化" 
-            style="margin-bottom: 16px; margin-right: 8px" 
-            @click="handleInit" />
-        <j-button 
-            label="刷新表格数据" 
-            @click="handleRefresh" />
-        <j-button 
-            label="获取选中行" 
-            @click="handleGetSelection" />
-        <div style="position: relative; width: 100%; height: 400px; margin-top: 16px">
-            <j-page ref="pageRef" />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const pageRef = ref()
-
-const columns = [
-    {
-        id: 'j_Name',
-        type: '',
-        config: {
-            label: '名称',
-            width: 120,
-            filter: {
-                isSearchKeyword: true,
-            },
-        },
-    },
-    {
-        id: 'enabledMark',
-        type: 'j-switch',
-        config: {
-            label: '有效',
-            activeValue: 1,
-            inactiveValue: 0,
-            change: async ({ row }) => {
-                console.log(row, 'change')
-            },
-        },
-    },
-]
-
-const schema = [
-    {
-        id: 'mainTable',
-        type: 'j-table-panel',
-        config: {
-            columns: columns,
-            rowKey: 'j_Id',
-            isMultiple: true,
-            sort: 'J_CreateDate DESC',
-            loadData: async () => {
-                // 生成随机数据
-                const names = ['项目A', '项目B', '项目C', '项目D', '项目E']
-                const count = Math.floor(Math.random() * 5) + 2 // 2-6条数据
-                const res = Array.from({ length: count }, (_, i) => ({
-                    j_Id: String(Date.now() + i),
-                    j_Name: names[Math.floor(Math.random() * names.length)] + '-' + Math.random().toString(36).slice(2, 6),
-                    enabledMark: Math.random() > 0.5 ? 1 : 0,
-                }))
-                return res
-            },
-        },
-    },
-]
-
-const handleInit = () => {
-    pageRef.value?.init(schema)
-}
-
-const handleGetSelection = () => {
-    const selected = pageRef.value?.call('mainTable', 'getSelection')
-    console.log(selected, 'selected')
-}
-// 通过 j-page.call 调用内部组件方法
-const handleRefresh = () => {
-    pageRef.value?.call('mainTable', 'refreshData', null)
-}
-</script>
+<template>
+    <div>
+        <j-button 
+            type="primary" 
+            label="使用 init 方法初始化" 
+            style="margin-bottom: 16px; margin-right: 8px" 
+            @click="handleInit" />
+        <j-button 
+            label="刷新表格数据" 
+            @click="handleRefresh" />
+        <j-button 
+            label="获取选中行" 
+            @click="handleGetSelection" />
+        <div style="position: relative; width: 100%; height: 400px; margin-top: 16px">
+            <j-page ref="pageRef" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const pageRef = ref()
+
+const columns = [
+    {
+        id: 'j_Name',
+        type: '',
+        config: {
+            label: '名称',
+            width: 120,
+            filter: {
+                isSearchKeyword: true,
+            },
+        },
+    },
+    {
+        id: 'enabledMark',
+        type: 'j-switch',
+        config: {
+            label: '有效',
+            activeValue: 1,
+            inactiveValue: 0,
+            change: async ({ row }) => {
+                console.log(row, 'change')
+            },
+        },
+    },
+]
+
+const schema = [
+    {
+        id: 'mainTable',
+        type: 'j-table-panel',
+        config: {
+            columns: columns,
+            rowKey: 'j_Id',
+            isMultiple: true,
+            sort: 'J_CreateDate DESC',
+            loadData: async () => {
+                // 生成随机数据
+                const names = ['项目A', '项目B', '项目C', '项目D', '项目E']
+                const count = Math.floor(Math.random() * 5) + 2 // 2-6条数据
+                const res = Array.from({ length: count }, (_, i) => ({
+                    j_Id: String(Date.now() + i),
+                    j_Name: names[Math.floor(Math.random() * names.length)] + '-' + Math.random().toString(36).slice(2, 6),
+                    enabledMark: Math.random() > 0.5 ? 1 : 0,
+                }))
+                return res
+            },
+        },
+    },
+]
+
+const handleInit = () => {
+    pageRef.value?.init(schema)
+}
+
+const handleGetSelection = () => {
+    const selected = pageRef.value?.call('mainTable', 'getSelection')
+    console.log(selected, 'selected')
+}
+// 通过 j-page.call 调用内部组件方法
+const handleRefresh = () => {
+    pageRef.value?.call('mainTable', 'refreshData', null)
+}
+</script>