@hoenergy/hoenergy-template-pc 1.1.3 → 1.1.4

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@hoenergy/hoenergy-template-pc",
-  "version": "1.1.3",
+  "type": "module",
+  "version": "1.1.4",
   "description": "A cross-compatible Vue component library with metadata extraction",
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "unpkg": "dist/index.global.js",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {

package/src/components/Business/dataEntry/modalSearchTable/index.ts

@@ -13,11 +13,6 @@ const meta: ComponentMeta = {
   description:
     '集成搜索表单与数据表格的弹框组件，默认单选；可配置多选；回显只需传 rowKey 的值（或数组）。',
   props: {
-    visible: {
-      type: 'boolean',
-      default: false,
-      description: '弹窗显示开关',
-    },
     title: {
       type: 'string',
       default: '选择数据',
@@ -33,11 +28,7 @@ const meta: ComponentMeta = {
       default: 80,
       description: '搜索表单标签宽度，透传给 FormaxForm',
     },
-    schemas: {
-      type: 'array',
-      default: [],
-      description: '搜索条件表单配置，参照 FormaxForm.schemas',
-    },
+
     columns: {
       type: 'array',
       default: [],
@@ -71,16 +62,6 @@ const meta: ComponentMeta = {
     },
   },
   events: [
-    {
-      name: 'update:visible',
-      description: '弹窗显示状态变化时触发',
-      payload: 'visible: boolean',
-    },
-    {
-      name: 'update:modelValue',
-      description: '点击确认按钮时触发，用于回写已选 id',
-      payload: 'value: any | any[]',
-    },
     {
       name: 'confirm',
       description: '点击确认按钮时触发，返回已选中行数据列表',
@@ -110,63 +91,87 @@ const meta: ComponentMeta = {
   slots: [],
   methods: [],
   usage: `<template>
-  <div style="padding: 16px;">
-    <n-button type="primary" @click="openModal">打开弹窗</n-button>
-    <ModalSearchTable
-      :visible="visible"
-      @update:visible="val => (visible = val)"
-      v-model:modelValue="userId"
-      :schemas="schemas"
-      :columns="columns"
-      :request="fetchTableData"
-      row-key="id"
-      label-field="name"
-      title="选择用户"
-      @register="register"
-    />
-  </div>
+    <div style="padding: 16px;">
+        <n-space>
+            <n-button type="primary" @click="openModal">打开弹窗</n-button>
+            <div>已选 id：{{ userId }}</div>
+        </n-space>
+        <ModalSearchTable v-model:modelValue="userId" :schemas="schemas" :columns="columns" :request="fetchTableData"
+            row-key="id" label-field="name" @register="register" :multiple="true" @confirm="handleConfirm" />
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { NButton, NSpace } from 'naive-ui'
 import { ModalSearchTable, useModalSearchTable } from './index'
 
 const visible = ref(false)
-const userId = ref<number | null>(null)
+const userId = ref<number[]>([2])
 
 const schemas = ref([
-  { field: 'name', label: '姓名', component: 'NInput' },
+    {
+        field: 'name',
+        label: '姓名',
+        component: 'NInput',
+    },
 ])
 
 const columns = ref([
-  { title: 'ID', key: 'id', width: 80 },
-  { title: '姓名', key: 'name' },
+    { title: 'ID', key: 'id', width: 80 },
+    { title: '姓名', key: 'name' },
 ])
 
 const allData = [
-  { id: 1, name: '张三' },
-  { id: 2, name: '李四' },
-  { id: 3, name: '王五' },
+    { id: 1, name: '张三' },
+    { id: 2, name: '李四' },
+    { id: 3, name: '王五' },
 ]
-
+function handleConfirm(selectedMap: any) {
+    if (selectedMap.length === 0) return
+    userId.value = selectedMap?.map((item: any) => item.id) || []
+    closeModal()
+}
 async function fetchTableData(params: Record<string, any>) {
-  const pageNum = params.pageNum || 1
-  const pageSize = params.pageSize || 10
-  const { name } = params
-  let list = allData
-  if (name) list = list.filter((item) => item.name.includes(name))
-  const total = list.length
-  const start = (pageNum - 1) * pageSize
-  const end = start + pageSize
-  const pageList = list.slice(start, end)
-  const pages = Math.ceil(total / pageSize)
-  return { pageNum, pageSize, pages, total, list: pageList }
+    const pageNum = params.pageNum || 1
+    const pageSize = params.pageSize || 10
+    const { name } = params
+    let list = allData
+    if (name) {
+        list = list.filter((item) => item.name.includes(name))
+    }
+    const total = list.length
+    const start = (pageNum - 1) * pageSize
+    const end = start + pageSize
+    const pageList = list.slice(start, end)
+    const pages = Math.ceil(total / pageSize)
+    return {
+        pageNum,
+        pageSize,
+        pages,
+        total,
+        list: pageList,
+    }
 }
 
-const [register, { openModal }] = useModalSearchTable({
-  modalProps: { title: '选择用户', width: 920 },
+const [register, { openModal, closeModal }] = useModalSearchTable({
+    modalProps: {
+        title: '选择用户',
+        width: 920,
+    },
+    formProps: {
+        gridProps: {
+            cols: '3 s:3 m:3 l:3 xl:3 2xl:3',
+            responsive: 'screen',
+            collapsed: false,
+            collapsedRows: 10
+        },
+        labelWidth: 50,
+        schemas,
+    },
 })
-</script>`,
+</script>
+`,
   previewPath: 'Business/dataEntry/modalSearchTable/preview.vue',
   package: 'business',
   category: 'dataEntry',

package/src/components/Business/dataEntry/modalSearchTable/index.vue

@@ -1,6 +1,6 @@
 <template>
     <FormaxModal :width="modalWidth" :title="modalTitle" v-bind="modalBindProps" @register="handleModalRegister"
-        @on-ok="handleOk" @on-close="handleClose" v-if="innerVisible">
+        @on-ok="handleOk">
         <div class="w-full">
             <FormaxForm id="basicForm" :label-width="labelWidth" :schemas="schemas" :show-advanced-button="false"
                 @register="handleFormRegister" @submit="handleFormSubmit" @reset="handleFormReset" />
@@ -20,10 +20,8 @@ import { FormaxFormComponent as FormaxForm } from '../../../data/form/searchForm
 import { FormaxTableComponent as FormaxTable } from '../../../data/table/FormaxTable'
 import { NRadio } from 'naive-ui'
 import { $at } from 'i18n-auto-extractor';
-import { useMessage } from 'naive-ui'
-let message = useMessage()
+
 interface Props {
-    visible: boolean
     title?: string
     width?: number | string
     labelWidth?: number | string
@@ -38,7 +36,6 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    visible: false,
     title: $at('选择数据'),
     width: 1120,
     labelWidth: 80,
@@ -47,13 +44,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-    (e: 'update:visible', value: boolean): void
     (e: 'confirm', value: any[]): void
     (e: 'submit', value: Record<string, any>): void
     (e: 'reset', value: Record<string, any>): void
     (e: 'form-register', value: any): void
     (e: 'register', value: any): void
-    (e: 'update:modelValue', value: any): void
 }>()
 
 const [modalRegister, { openModal: openInnerModal, closeModal: closeInnerModal, setSubLoading, setProps: setInnerModalProps }] = useModal({
@@ -123,48 +118,22 @@ function handleModalRegister(methods: any) {
     if (pendingModalPropsRef.value) {
         setInnerModalProps(getDynamicProps(pendingModalPropsRef.value))
     }
-    if (props.visible) {
-        innerVisible.value = true
-        syncFromModel()
-        openInnerModal()
-    }
+
 }
 
 const tableRef = ref<any>()
 const searchValues = ref<Record<string, any>>({})
 const selectedMap = ref(new Map<any, any>())
 const checkedRowKeys = ref<any[]>([])
-const innerVisible = ref(false)
 
-watch(
-    () => props.visible,
-    (val) => {
-        innerVisible.value = !!val
-    },
-    { immediate: true },
-)
 
-watch(
-    () => innerVisible.value,
-    (val) => {
-        if (!modalReadyRef.value) return
-        if (val) {
-            syncFromModel()
-            openInnerModal()
-        } else {
-            closeInnerModal()
-            resetInner()
-        }
-    },
-    { immediate: true },
-)
+
+
 
 watch(
     () => [props.modelValue, props.multiple],
     () => {
-        if (innerVisible.value) {
-            syncFromModel()
-        }
+        syncFromModel()
     },
     { deep: true, immediate: true },
 )
@@ -362,40 +331,21 @@ function handleCheckedRowKeys(keys: any[]) {
 }
 
 function handleOk() {
-    setSubLoading(true)
     const rows = Array.from(selectedMap.value.values())
-    if (!rows.length) {
-        message.warning($at('请选择至少一条数据'))
-        return
-    }
-    const values = rows.map((row) => getRowKeyValue(row)).filter((v) => v !== undefined)
-    emit('update:modelValue', props.multiple ? values : (values[0] ?? null))
     emit('confirm', rows)
     setSubLoading(false)
-    innerVisible.value = false
-    emit('update:visible', false)
 }
-
-function handleClose() {
-    innerVisible.value = false
-    emit('update:visible', false)
-}
-
 const modalSearchTableMethods = {
     openModal: () => {
         syncFromModel()
-        innerVisible.value = true
         if (modalReadyRef.value) {
             openInnerModal()
         }
-        emit('update:visible', true)
     },
     closeModal: () => {
-        innerVisible.value = false
         if (modalReadyRef.value) {
             closeInnerModal()
         }
-        emit('update:visible', false)
     },
     setModalProps: (val: any) => {
         pendingModalPropsRef.value = val

package/src/components/Business/dataEntry/modalSearchTable/preview.vue

@@ -4,9 +4,8 @@
             <n-button type="primary" @click="openModal">打开弹窗</n-button>
             <div>已选 id：{{ userId }}</div>
         </n-space>
-        <ModalSearchTable :visible="visible" @update:visible="val => (visible = val)" v-model:modelValue="userId"
-            :schemas="schemas" :columns="columns" :request="fetchTableData" row-key="id" label-field="name"
-            @register="register" :multiple="true" @confirm="handleConfirm" />
+        <ModalSearchTable v-model:modelValue="userId" :schemas="schemas" :columns="columns" :request="fetchTableData"
+            row-key="id" label-field="name" @register="register" :multiple="true" @confirm="handleConfirm" />
     </div>
 </template>
 
@@ -36,9 +35,10 @@ const allData = [
     { id: 2, name: '李四' },
     { id: 3, name: '王五' },
 ]
-function handleConfirm(selectedMap: Map<any, any>) {
-    if (!selectedMap.size || selectedMap.length === 0) return
+function handleConfirm(selectedMap: any) {
+    if (selectedMap.length === 0) return
     userId.value = selectedMap?.map((item: any) => item.id) || []
+    closeModal()
 }
 async function fetchTableData(params: Record<string, any>) {
     const pageNum = params.pageNum || 1
@@ -62,7 +62,7 @@ async function fetchTableData(params: Record<string, any>) {
     }
 }
 
-const [register, { openModal }] = useModalSearchTable({
+const [register, { openModal, closeModal }] = useModalSearchTable({
     modalProps: {
         title: '选择用户',
         width: 920,

package/src/components/Business/dataEntry/modalTableSelect/hooks/useModalTableSelect.ts

@@ -22,6 +22,7 @@ export function useModalTableSelect(options?: {
 
   const getInstance = () => {
     const instance = unref(modalRef)
+
     if (!instance) {
       console.error('useModalTableSelect instance is undefined!')
     }
@@ -46,7 +47,7 @@ export function useModalTableSelect(options?: {
       {
         immediate: true,
         deep: true,
-      },
+      }
     )
   }
 

package/src/components/Business/dataEntry/modalTableSelect/index.ts

@@ -13,11 +13,6 @@ const meta: ComponentMeta = {
   description:
     '集成搜索表单与数据表格的弹框选择组件，支持多选并回传结果，支持传 rowKey 数组回显。',
   props: {
-    visible: {
-      type: 'boolean',
-      default: false,
-      description: '弹窗显示开关',
-    },
     title: {
       type: 'string',
       default: '选择数据',
@@ -33,11 +28,7 @@ const meta: ComponentMeta = {
       default: 80,
       description: '搜索表单标签宽度，透传给 FormaxForm',
     },
-    schemas: {
-      type: 'array',
-      default: [],
-      description: '搜索条件表单配置，参照 FormaxForm.schemas',
-    },
+
     columns: {
       type: 'array',
       default: [],
@@ -76,21 +67,11 @@ const meta: ComponentMeta = {
     },
   },
   events: [
-    {
-      name: 'update:visible',
-      description: '弹窗显示状态变化时触发',
-      payload: 'visible: boolean',
-    },
     {
       name: 'confirm',
       description: '点击确认按钮时触发，返回已选中数据列表',
       payload: 'rows: any[]',
     },
-    {
-      name: 'update:modelValue',
-      description: '勾选变化/确认时触发，用于回写已选 rowKey 数组',
-      payload: 'value: any[]',
-    },
     {
       name: 'submit',
       description: '搜索表单提交时触发',
@@ -120,83 +101,113 @@ const meta: ComponentMeta = {
   ],
   methods: [],
   usage: `<template>
-  <div style="padding: 16px;">
-    <n-button type="primary" @click="visible = true">选择数据</n-button>
-    <ModalTableSelect
-      :visible="visible"
-      @update:visible="val => visible = val"
-      v-model:modelValue="selectedIds"
-      :schemas="schemas"
-      :columns="columns"
-      :request="fetchTableData"
-      row-key="id"
-      title="选择用户"
-      @confirm="handleConfirm"
-    />
-  </div>
+    <div style="padding: 16px;">
+        <n-space>
+            <n-button type="primary" @click="openEmpty">打开选择弹窗</n-button>
+            <n-button type="primary" @click="openWithEcho">打开并回显(2,4)</n-button>
+            <div>已选 id：{{ selectedIds }}</div>
+        </n-space>
+        <ModalTableSelect v-model:modelValue="selectedIds" :columns="columns" :request="fetchTableData" row-key="id"
+            label-field="name" :selected-column-keys="['id', 'name']" @register="register" @confirm="handleConfirm" />
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import ModalTableSelect from './index.vue'
+import { ModalTableSelect, useModalTableSelect } from './index'
+import { NButton, NSpace } from 'naive-ui'
 
 const visible = ref(false)
-const selectedIds = ref<number[]>([2])
+const selectedIds = ref<number[]>([])
 
 const schemas = ref([
-  { field: 'name', label: '姓名', component: 'NInput' },
-  {
-    field: 'status',
-    label: '状态',
-    component: 'NSelect',
-    componentProps: {
-      options: [
-        { label: '启用', value: 'enable' },
-        { label: '停用', value: 'disable' },
-      ],
+    {
+        field: 'name',
+        label: '姓名',
+        component: 'NInput',
+    },
+    {
+        field: 'status',
+        label: '状态',
+        component: 'NSelect',
+        componentProps: {
+            options: [
+                { label: '启用', value: 'enable' },
+                { label: '停用', value: 'disable' },
+            ],
+        },
     },
-  },
 ])
 
+const [register, { openModal, closeModal }] = useModalTableSelect({
+    formProps: {
+        gridProps: {
+            cols: '3 s:3 m:3 l:3 xl:3 2xl:3',
+            responsive: 'screen',
+            collapsed: false,
+            collapsedRows: 10
+        },
+        labelWidth: 50,
+        schemas,
+    },
+    modalProps: {
+        title: '选择用户',
+        width: 1220,
+    }
+})
+
 const columns = ref([
-  { title: 'ID', key: 'id', width: 80 },
-  { title: '姓名', key: 'name' },
-  { title: '状态', key: 'status' },
+    { title: 'ID', key: 'id', width: 80 },
+    { title: '姓名', key: 'name' },
+    { title: '状态', key: 'status' },
 ])
 
 const allData = [
-  { id: 1, name: '张三', status: 'enable' },
-  { id: 2, name: '李四', status: 'disable' },
-  { id: 3, name: '王五', status: 'enable' },
+    { id: 1, name: '张三', status: 'enable' },
+    { id: 2, name: '李四', status: 'disable' },
+    { id: 3, name: '王五', status: 'enable' },
+    { id: 4, name: '赵六', status: 'enable' },
 ]
 
 async function fetchTableData(params: Record<string, any>) {
-  const pageNum = params.pageNum || 1
-  const pageSize = params.pageSize || 10
-  const { name, status } = params
-  let list = allData
-  if (name) {
-    list = list.filter((item) => item.name.includes(name))
-  }
-  if (status) {
-    list = list.filter((item) => item.status === status)
-  }
-  const total = list.length
-  const start = (pageNum - 1) * pageSize
-  const end = start + pageSize
-  const pageList = list.slice(start, end)
-  const pages = Math.ceil(total / pageSize)
-  return {
-    pageNum,
-    pageSize,
-    pages,
-    total,
-    list: pageList,
-  }
+    const pageNum = params.pageNum || 1
+    const pageSize = params.pageSize || 10
+    const { name, status } = params
+    let list = allData
+    if (name) {
+        list = list.filter((item) => item.name.includes(name))
+    }
+    if (status) {
+        list = list.filter((item) => item.status === status)
+    }
+    const total = list.length
+    const start = (pageNum - 1) * pageSize
+    const end = start + pageSize
+    const pageList = list.slice(start, end)
+    const pages = Math.ceil(total / pageSize)
+    return {
+        pageNum,
+        pageSize,
+        pages,
+        total,
+        list: pageList,
+    }
 }
 
 function handleConfirm(list: any[]) {
-  console.log('selected rows', list)
+    console.log('已选中数据', list)
+    closeModal()
+}
+
+function openEmpty() {
+    selectedIds.value = []
+    visible.value = true
+    openModal()
+}
+
+function openWithEcho() {
+    selectedIds.value = [2, 4]
+    openModal()
 }
 </script>`,
   previewPath: 'Business/dataEntry/modalTableSelect/preview.vue',