@a2simcode/ui 0.0.75 → 0.0.77

package/docs/components/page.md

@@ -41,6 +41,19 @@
   </template>
 </Demo>
 
+## 用户管理页面示例
+
+参考业务项目中的写法，展示了如何在 `j-page` 内嵌 `j-table-panel`，并完成“新增 / 编辑 / 重置密码 / 删除 / 状态开关”等常见交互。
+
+<Demo :source-code="pageUserManagementCode">
+  <template #source>
+    <page-user-management />
+  </template>
+  <template #description>
+    示例使用 Mock 数据模拟分页接口，并通过 `openLayer` 打开表单弹窗；保存/删除后通过 `j-page.call('mainTable','refreshData')` 刷新表格。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="pageApi" componentName="page" />
@@ -49,9 +62,11 @@
 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 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'
 </script>

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

@@ -0,0 +1,313 @@
+<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, defineComponent, h } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+interface UserRecord {
+  j_Id: number
+  j_Account: string
+  j_Name: string
+  j_EnabledMark: 0 | 1
+  j_CreateUserName: string
+  j_CreateDate: string
+  j_ModifyDate: string
+}
+
+const randomFrom = <T,>(arr: T[]) => arr[Math.floor(Math.random() * arr.length)]
+
+const createUsers = (count: number): UserRecord[] => {
+  const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十']
+  const creators = ['系统', '管理员', '运维', '审计']
+  const now = Date.now()
+
+  return Array.from({ length: count }).map((_, i) => {
+    const id = i + 1
+    const createTime = new Date(now - Math.floor(Math.random() * 20 * 24 * 60 * 60 * 1000))
+    const modifyTime = new Date(
+      createTime.getTime() + Math.floor(Math.random() * 5 * 24 * 60 * 60 * 1000)
+    )
+    return {
+      j_Id: id,
+      j_Account: `user_${String(id).padStart(3, '0')}`,
+      j_Name: randomFrom(names),
+      j_EnabledMark: Math.random() > 0.2 ? 1 : 0,
+      j_CreateUserName: randomFrom(creators),
+      j_CreateDate: createTime.toISOString(),
+      j_ModifyDate: modifyTime.toISOString(),
+    }
+  })
+}
+
+const users = ref<UserRecord[]>(createUsers(57))
+
+const api = {
+  getPage: 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 (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,
+    }
+  },
+  updateState: async (id: number, enabled: 0 | 1) => {
+    const target = users.value.find((u) => u.j_Id === id)
+    if (!target) return false
+    target.j_EnabledMark = enabled
+    target.j_ModifyDate = new Date().toISOString()
+    return true
+  },
+  upsert: async (data: Pick<UserRecord, 'j_Account' | 'j_Name'> & { j_Id?: number }) => {
+    const now = new Date().toISOString()
+    if (!data.j_Id) {
+      const nextId = Math.max(0, ...users.value.map((u) => u.j_Id)) + 1
+      users.value.unshift({
+        j_Id: nextId,
+        j_Account: data.j_Account,
+        j_Name: data.j_Name,
+        j_EnabledMark: 1,
+        j_CreateUserName: '管理员',
+        j_CreateDate: now,
+        j_ModifyDate: now,
+      })
+      return true
+    }
+
+    const target = users.value.find((u) => u.j_Id === data.j_Id)
+    if (!target) return false
+    target.j_Account = data.j_Account
+    target.j_Name = data.j_Name
+    target.j_ModifyDate = now
+    return true
+  },
+  resetPassword: async () => true,
+  remove: async (id: number) => {
+    const idx = users.value.findIndex((u) => u.j_Id === id)
+    if (idx < 0) return false
+    users.value.splice(idx, 1)
+    return true
+  },
+}
+
+const UserFormLayer = defineComponent({
+  name: 'UserFormLayer',
+  setup(_, { expose }) {
+    const isEdit = ref(false)
+    const currentId = ref<number | undefined>(undefined)
+    const formData = ref({
+      j_Account: '',
+      j_Name: '',
+    })
+
+    const open = async (param: any) => {
+      isEdit.value = !!param?.isEdit
+      const record = param?.record as UserRecord | undefined
+      currentId.value = record?.j_Id
+      formData.value = {
+        j_Account: record?.j_Account || '',
+        j_Name: record?.j_Name || '',
+      }
+      return true
+    }
+
+    const ok = async () => {
+      const account = formData.value.j_Account.trim()
+      const name = formData.value.j_Name.trim()
+      if (!account) {
+        ElMessage.warning('请输入账号')
+        return false
+      }
+      if (!name) {
+        ElMessage.warning('请输入姓名')
+        return false
+      }
+
+      const res = await api.upsert({
+        j_Id: currentId.value,
+        j_Account: account,
+        j_Name: name,
+      })
+      if (!res) {
+        ElMessage.warning('保存失败')
+      }
+      return res
+    }
+
+    expose({ open, ok })
+
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('div', { style: 'margin-bottom: 12px' }, [
+          h('div', { style: 'margin-bottom: 6px; color: var(--j-color-text-2)' }, '账号'),
+          h('input', {
+            value: formData.value.j_Account,
+            onInput: (e: any) => (formData.value.j_Account = e?.target?.value || ''),
+            placeholder: '请输入账号',
+            style:
+              'width: 100%; padding: 6px 10px; border: 1px solid var(--j-color-border); border-radius: 4px; outline: none;',
+          }),
+        ]),
+        h('div', { style: 'margin-bottom: 12px' }, [
+          h('div', { style: 'margin-bottom: 6px; color: var(--j-color-text-2)' }, '姓名'),
+          h('input', {
+            value: formData.value.j_Name,
+            onInput: (e: any) => (formData.value.j_Name = e?.target?.value || ''),
+            placeholder: '请输入姓名',
+            style:
+              'width: 100%; padding: 6px 10px; border: 1px solid var(--j-color-border); border-radius: 4px; outline: none;',
+          }),
+        ]),
+        h(
+          'div',
+          { style: 'color: var(--j-color-text-3); font-size: 12px' },
+          isEdit.value ? '编辑模式：修改后点击确定保存' : '新增模式：填写后点击确定创建'
+        ),
+      ])
+  },
+})
+
+const pageRef = ref()
+
+const refreshTable = () => {
+  pageRef.value?.call('mainTable', 'refreshData')
+}
+
+const columnsConfig: Record<string, TableColumnCompConfig> = {
+  j_Name: { width: 120, filter: { isSearchKeyword: true } },
+  j_Account: { width: 140, filter: { isSearchKeyword: true } },
+  j_EnabledMark: {
+    type: 'j-switch',
+    activeValue: 1,
+    inactiveValue: 0,
+    width: 72,
+    align: 'center',
+    change: async ({ row }: { row: UserRecord }) => {
+      const res = await api.updateState(row.j_Id, row.j_EnabledMark)
+      if (res) {
+        ElMessage.success('更新成功')
+        refreshTable()
+      } else {
+        ElMessage.warning('更新失败')
+      }
+    },
+  },
+  j_CreateUserName: { filter: { isSearchKeyword: true } },
+  j_CreateDate: { type: 'dateTime', width: 168 },
+  j_ModifyDate: { type: 'dateTime', width: 168 },
+}
+
+const columns = [
+  { id: 'j_Name', label: '姓名' },
+  { id: 'j_Account', label: '账号' },
+  { id: 'j_EnabledMark', label: '有效' },
+  { id: 'j_CreateUserName', label: '创建用户' },
+  { id: 'j_CreateDate', label: '创建时间' },
+  { id: 'j_ModifyDate', label: '最后更新时间' },
+].map((item) => {
+  const cfg = columnsConfig[item.id] || {}
+  return {
+    id: item.id,
+    type: cfg.type || '',
+    config: { ...cfg, label: item.label },
+  }
+})
+
+const buttons = [
+  {
+    id: 'add',
+    label: '新增',
+    config: { icon: 'mdi:add', type: 'primary' },
+    click: ({ openLayer }: ButtonClickScope) => {
+      openLayer({
+        title: '新增用户',
+        name: UserFormLayer,
+        width: 520,
+        height: 240,
+        param: { isEdit: false },
+        afterOk: refreshTable,
+      })
+    },
+  },
+]
+
+const actions = [
+  {
+    id: 'edit',
+    label: '编辑',
+    click: ({ openLayer, data }: ButtonClickScope) => {
+      openLayer({
+        title: '编辑用户',
+        name: UserFormLayer,
+        width: 520,
+        height: 240,
+        param: { isEdit: true, record: data },
+        afterOk: refreshTable,
+      })
+    },
+  },
+  {
+    id: 'resetPassword',
+    label: '重置密码',
+    click: async ({ data }: ButtonClickScope) => {
+      await ElMessageBox.confirm(`您确定重置【${data?.j_Name}】密码吗?`, '提示', {
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      })
+      const res = await api.resetPassword()
+      if (res) {
+        ElMessage.success('重置成功')
+      }
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: { danger: true },
+    click: async ({ data }: ButtonClickScope) => {
+      await ElMessageBox.confirm(`您确定删除【${data?.j_Name}】吗?`, '提示', {
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      })
+      const res = await api.remove(data.j_Id)
+      if (res) {
+        ElMessage.success('删除成功')
+        refreshTable()
+      }
+    },
+  },
+]
+
+const schema = ref([
+  {
+    id: 'mainTable',
+    type: 'j-table-panel',
+    config: {
+      columns,
+      buttons,
+      actions,
+      rowKey: 'j_Id',
+      isPage: true,
+      sort: 'j_CreateDate DESC',
+      loadData: async (params: Record<string, any>) => api.getPage(params),
+    },
+  },
+])
+</script>

package/docs/examples/table/editable.vue

@@ -85,7 +85,6 @@ const columns = ref([
     config: {
       label: '是否在职',
       width: 100,
-      align: 'center',
       readonly: true,
     },
   },

package/package.json

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