@a2simcode/ui 0.0.307 → 0.0.308

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

@@ -1,313 +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>
+<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/panel/tool-buttons.vue

@@ -1,18 +1,18 @@
-<template>
-  <j-panel title="Panel with Tool Buttons"
-    :toolBtns="[
-      { id: 'edit',label: '编辑', config: { icon: 'mdi:settings-outline' }, click: handleEdit },
-    ]"
-  >
-    <div>This panel has some tool buttons in the header.</div>
-  </j-panel>
-</template>
-
-<script setup lang="ts">
-import JPanel from '../../../packages/components/panel'
-import { ElMessage } from 'element-plus'
-
-const handleEdit = () => {
-  ElMessage.success('Edit button clicked!')
-}
-</script>
+<template>
+  <j-panel title="Panel with Tool Buttons"
+    :toolBtns="[
+      { id: 'edit',label: '编辑', config: { icon: 'mdi:settings-outline' }, click: handleEdit },
+    ]"
+  >
+    <div>This panel has some tool buttons in the header.</div>
+  </j-panel>
+</template>
+
+<script setup lang="ts">
+import JPanel from '../../../packages/components/panel'
+import { ElMessage } from 'element-plus'
+
+const handleEdit = () => {
+  ElMessage.success('Edit button clicked!')
+}
+</script>