p-pc-ui 1.3.10 → 1.3.12

package/dist/components/p-button-rounded/p-button-rounded.vue

@@ -60,7 +60,7 @@ const btnClick = useDebounceFn(async () => {
 
   <a-tooltip color="var(--secondary-color-light)" :overlayInnerStyle="{ color: '#fff' }" :title="tooltip"
     v-bind="$attrs">
-    <a-button @click="btnClick" :loading="loading || builtInLoading" class="font-semibold"
+    <a-button @click="btnClick" @keydown.enter.prevent="btnClick" :loading="loading || builtInLoading" class="font-semibold"
       :class="disabled ? 'cursor-not-allowed' : 'hover:opacity-80 active:opacity-100'" :style="{
         background: disabled ? '#b5b5b5' : bgColor,
         color: disabled ? '#fff' : color,

package/dist/components/p-form/index.d.ts

@@ -1,5 +1,12 @@
 
-type FieldRule = { msg?: string, required?: boolean, min?: number, max?: number, decimal?: number }
+type FieldRule = {
+    msg?: string,
+    required?: boolean,
+    min?: number,
+    max?: number,
+    decimal?: number,
+    regex?: RegExp,
+}
 
 interface Base<K extends string = string> {
     key: K,
@@ -49,7 +56,24 @@ export interface InputCode<K extends string = string> extends Base<K> {
 
 
 
-type LoadOptionsData = () => Promise<{ label: string, value: any }[]>
+type LoadOptionsParams = {
+    p?: number,
+    pc?: number,
+    [key: string]: any,
+}
+
+type LoadOptionsResult =
+    | any[]
+    | {
+        data?: any[],
+        count?: number,
+        pages?: {
+            total?: number,
+            now?: number,
+        },
+    }
+
+type LoadOptionsData = (params?: LoadOptionsParams) => Promise<LoadOptionsResult>
 
 
 interface SelectBase<K extends string = string> extends Base<K> {
@@ -58,7 +82,12 @@ interface SelectBase<K extends string = string> extends Base<K> {
         label?: string;
         value?: string;
     };
-    isMultiple?: boolean
+    isMultiple?: boolean,
+    enableSearch?: boolean,
+    pageSize?: number,
+    pageNumKey?: string,
+    pageSizeKey?: string,
+    keywordKey?: string,
 }
 
 type GetOptionList =
@@ -76,13 +105,13 @@ interface UploadBase<K extends string = string> extends Base<K> {
 
 export interface UploadOss<K extends string = string> extends UploadBase<K> {
     type: 'uploadOss',
-    getOssToken: ({ file_name }) => Promise<any>,
+    getOssToken: ({ file_name }: { file_name: string }) => Promise<any>,
     baseOssUrl: string,
 }
 
 export interface UploadTos<K extends string = string> extends UploadBase<K> {
     type: 'uploadTos',
-    getTosToken: ({ file_name }) => Promise<any>,
+    getTosToken: ({ file_name }: { file_name: string }) => Promise<any>,
     baseTosUrl: string,
 }
 

package/dist/components/p-form/p-form.vue

@@ -58,6 +58,170 @@ const formRef = ref<FormInstance>();
 
 const emits = defineEmits(["confirm"]);
 
+const DEFAULT_SELECT_PAGE_SIZE = 20;
+
+type SelectLoadResult =
+  | any[]
+  | {
+      data?: any[];
+      count?: number;
+      pages?: {
+        total?: number;
+        now?: number;
+      };
+    };
+
+type SelectLoadState = {
+  pageNum: number;
+  pageSize: number;
+  keyword: string;
+  hasMore: boolean;
+  loading: boolean;
+};
+
+const getSelectValueField = (renderItem: any) => {
+  return renderItem.fieldNames?.value || "value";
+};
+
+const ensureSelectLoadState = (renderItem: FormDataItem & { [key: string]: any }) => {
+  if (!renderItem.__selectState) {
+    renderItem.__selectState = {
+      pageNum: 1,
+      pageSize: renderItem.pageSize || DEFAULT_SELECT_PAGE_SIZE,
+      keyword: "",
+      hasMore: true,
+      loading: false,
+    } as SelectLoadState;
+  }
+
+  return renderItem.__selectState as SelectLoadState;
+};
+
+const mergeSelectOptionList = (renderItem: FormDataItem & { [key: string]: any }, list: any[]) => {
+  const valueKey = getSelectValueField(renderItem);
+  const oldList = renderItem.optionList || [];
+  const map = new Map<any, any>();
+
+  for (const item of oldList) {
+    map.set(item?.[valueKey], item);
+  }
+
+  for (const item of list) {
+    map.set(item?.[valueKey], item);
+  }
+
+  renderItem.optionList = Array.from(map.values());
+};
+
+const buildSelectLoadParams = (renderItem: FormDataItem & { [key: string]: any }, state: SelectLoadState) => {
+  const pageNumKey = renderItem.pageNumKey || "p";
+  const pageSizeKey = renderItem.pageSizeKey || "pc";
+  const keywordKey = renderItem.keywordKey || "keyword";
+  const params: Record<string, any> = {
+    p: state.pageNum,
+    pc: state.pageSize,
+    [pageNumKey]: state.pageNum,
+    [pageSizeKey]: state.pageSize,
+  };
+
+  const keyword = (state.keyword || "").replaceAll("=", "").trim();
+  if (!keyword) {
+    return params;
+  }
+
+  params[keywordKey] = keyword;
+
+  return params;
+};
+
+const normalizeSelectLoadResult = (res: SelectLoadResult, state: SelectLoadState) => {
+  const list = Array.isArray(res) ? res : res?.data || [];
+
+  const hasMore =
+    Array.isArray(res)
+      ? list.length >= state.pageSize
+      : typeof res?.pages?.total === "number" && typeof res?.pages?.now === "number"
+      ? res.pages.now < res.pages.total
+      : typeof res?.count === "number"
+      ? state.pageNum * state.pageSize < res.count
+      : list.length >= state.pageSize;
+
+  return {
+    list,
+    hasMore,
+  };
+};
+
+const fetchSelectOptions = async (
+  renderItem: FormDataItem & { [key: string]: any },
+  options: { reset?: boolean; keyword?: string } = {}
+) => {
+  if (renderItem.type !== "select" || !renderItem.loadDataFunc) return;
+  const state = ensureSelectLoadState(renderItem);
+
+  if (state.loading) return;
+
+  if (options.keyword != undefined) {
+    state.keyword = options.keyword;
+  }
+
+  if (options.reset) {
+    state.pageNum = 1;
+    state.hasMore = true;
+    renderItem.optionList = [];
+  }
+
+  if (!state.hasMore) return;
+
+  state.loading = true;
+  try {
+    const res = (await renderItem.loadDataFunc(buildSelectLoadParams(renderItem, state))) as SelectLoadResult;
+    const normalizedRes = normalizeSelectLoadResult(res, state);
+    const list = normalizedRes.list;
+    if (options.reset) {
+      renderItem.optionList = [];
+    }
+    mergeSelectOptionList(renderItem, list);
+
+    state.hasMore = normalizedRes.hasMore;
+    if (list.length > 0) {
+      state.pageNum += 1;
+    }
+  } finally {
+    state.loading = false;
+  }
+};
+
+const selectSearchTimerMap = new WeakMap<any, number>();
+
+const onSelectSearch = (keyword: string, renderItem: FormDataItem & { [key: string]: any }) => {
+  if (renderItem.type !== "select") return;
+  if (!renderItem.loadDataFunc) return;
+
+  const timer = selectSearchTimerMap.get(renderItem);
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  const nextTimer = window.setTimeout(() => {
+    fetchSelectOptions(renderItem, { reset: true, keyword: keyword || "" });
+  }, 300);
+  selectSearchTimerMap.set(renderItem, nextTimer);
+};
+
+const onSelectPopupScroll = (e: Event, renderItem: FormDataItem & { [key: string]: any }) => {
+  if (renderItem.type !== "select") return;
+  if (!renderItem.loadDataFunc) return;
+
+  const target = e.target as HTMLElement;
+  if (!target) return;
+
+  const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+  if (distanceToBottom <= 24) {
+    fetchSelectOptions(renderItem);
+  }
+};
+
 /**
  * 富文本相关配置
  */
@@ -82,12 +246,11 @@ const disposeRenderData = async (renderData: FormDataItem[]) => {
     let { fieldType, fieldRules, label } = renderItem;
     // 处理校验规则
     const rules: any = [];
-    const operateType = ["select", "treeSeect", "date", "datePicker"].includes(renderItem.type) ? "选择" : "输入";
+    const operateType = ["select", "treeSelect", "date", "datePicker"].includes(renderItem.type) ? "选择" : "输入";
     for (const fieldRule of fieldRules || []) {
-      const { msg, required, min, max } = fieldRule;
+      const { msg, required, min, max, regex } = fieldRule;
 
       // 图片需要额外处理
-
       if (
         (renderItem.type == "uploadOss" || renderItem.type == "uploadTos" || renderItem.type == "upload") &&
         renderItem.fieldType == "string"
@@ -95,12 +258,13 @@ const disposeRenderData = async (renderData: FormDataItem[]) => {
         fieldType = "array";
       }
 
+
       if (required) {
         rules.push({
           type: renderItem.type == "uploadOss" || renderItem.type == "uploadTos" ? "array" : renderItem.fieldType,
           required: true,
           message: msg || `请${operateType}${label}`,
-          trigger: "blur",
+          trigger: ["blur", "change"],
         });
       }
       if (min) {
@@ -108,7 +272,7 @@ const disposeRenderData = async (renderData: FormDataItem[]) => {
           type: fieldType,
           min: min,
           message: msg || `${label}需大于等于${min}${fieldType == "string" ? "个字符" : ""}`,
-          trigger: "blur",
+          trigger: ["blur", "change"],
         });
       }
 
@@ -117,10 +281,21 @@ const disposeRenderData = async (renderData: FormDataItem[]) => {
           type: fieldType,
           max: max,
           message: `${label}需小于等于${max}${fieldType == "string" ? "个字符" : ""}`,
-          trigger: "blur",
+          trigger: ["blur", "change"],
+        });
+      }
+      if (regex) {
+        rules.push({
+          type: fieldType,
+          pattern: regex,
+          message: msg || `${label}格式错误`,
+          trigger: ["blur", "change"],
         });
       }
     }
+
+
+
     renderItem.rules = rules;
 
     // 处理下拉选择
@@ -134,8 +309,12 @@ const disposeRenderData = async (renderData: FormDataItem[]) => {
           renderItem.placeholder = "加载中" + point.join("");
         }, 500);
 
-        const res = await renderItem.loadDataFunc();
-        renderItem["optionList"] = res;
+        if (renderItem.type == "select") {
+          await fetchSelectOptions(renderItem as FormDataItem & { [key: string]: any }, { reset: true });
+        } else {
+          const res = await renderItem.loadDataFunc();
+          renderItem["optionList"] = res as any[];
+        }
         clearInterval(interval);
         renderItem.placeholder = `请选择${renderItem.label}`;
       }
@@ -213,12 +392,21 @@ const initFormState = (renderData: FormDataItem[], initFromData = {}) => {
         renderItem.optionList = [];
       }
 
+      if (renderItem.type == "select" && renderItem.isMultiple) {
+        if (!_.isArray(initValue)) {
+          initValue = [];
+        }
+      }
+
       if (!initValue && renderItem.optionList) {
-        initValue = renderItem["optionList"][0]?.id;
+        if (!(renderItem.type == "select" && renderItem.isMultiple)) {
+          const valueKey = renderItem.fieldNames?.value || (renderItem.type == "treeSelect" ? "id" : "value");
+          initValue = renderItem["optionList"][0]?.[valueKey];
+        }
       }
 
       if (renderItem.loadDataFunc) {
-        initValue = undefined;
+        initValue = renderItem.type == "select" && renderItem.isMultiple ? [] : undefined;
       }
     } else if (renderItem.type == "uploadOss") {
       if (!_.isArray(initValue)) {
@@ -433,47 +621,26 @@ defineExpose({
 </script>
 
 <template>
-  <a-form
-    ref="formRef"
-    :model="formState"
-    name="basic"
-    autocomplete="off"
-    :layout="layout"
-    :required-mark="requiredMark"
-  >
+  <a-form ref="formRef" :model="formState" name="basic" autocomplete="off" :layout="layout"
+    :required-mark="requiredMark">
     <div v-for="(renderItem, index) in renderData">
-      <a-form-item
-        :label-col="{ span: renderItem.hideLabel ? 0 : renderItem.labelSpan || labelSpan }"
+      <a-form-item :label-col="{ span: renderItem.hideLabel ? 0 : renderItem.labelSpan || labelSpan }"
         :wrapper-col="{ span: renderItem.hideLabel ? undefined : renderItem.valueSpan || valueSpan }"
         v-show="!renderItem.visibleHook || (renderItem.visibleHook && renderItem.visibleHook(formState))"
-        :label="renderItem.label && !renderItem.hideLabel ? renderItem.label : ''"
-        :name="renderItem.key"
-        :colon="renderItem.colon == undefined ? true : renderItem.colon"
-        :rules="
-          !renderItem.visibleHook || (renderItem.visibleHook && renderItem.visibleHook(formState))
-            ? renderItem.rules
-            : undefined
-        "
-        :auto-link="false"
-        :style="{
-          marginBottom: isSearchForm ? '20px' : '0px',
-        }"
-        :tooltip="renderItem.tooltip"
-        :label-align="renderItem.labelAlign || 'right'"
-      >
-        <div
-          :style="{
-            pointerEvents: renderItem.disabled ? 'none' : 'auto',
-            opacity: renderItem.disabled ? 0.6 : 1,
-            cursor: renderItem.disabled ? 'not-allowed' : 'auto',
-          }"
-        >
-          <a-input
-            v-model:value="formState[renderItem.key]"
-            v-if="renderItem.type == 'input' && [undefined, 'string'].includes(renderItem.fieldType)"
-            type="text"
-            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-          >
+        :label="renderItem.label && !renderItem.hideLabel ? renderItem.label : ''" :name="renderItem.key"
+        :colon="renderItem.colon == undefined ? true : renderItem.colon" :rules="!renderItem.visibleHook || (renderItem.visibleHook && renderItem.visibleHook(formState))
+          ? renderItem.rules
+          : undefined
+          " :style="{
+            marginBottom: isSearchForm ? '20px' : '0px',
+          }" :tooltip="renderItem.tooltip" :label-align="renderItem.labelAlign || 'right'">
+        <div :style="{
+          opacity: renderItem.disabled ? 0.6 : 1,
+          cursor: renderItem.disabled ? 'not-allowed' : 'auto',
+        }">
+          <a-input v-model:value="formState[renderItem.key]"
+            v-if="renderItem.type == 'input' && [undefined, 'string'].includes(renderItem.fieldType)" type="text"
+            :disabled="renderItem.disabled" :placeholder="renderItem.placeholder || `请输入${renderItem.label}`">
             <template v-if="renderItem.prefix" v-slot:prefix>
               <component :is="renderItem.prefix" />
             </template>
@@ -482,12 +649,9 @@ defineExpose({
             </template>
           </a-input>
 
-          <a-input
-            v-model:value.number="formState[renderItem.key]"
-            v-if="renderItem.type == 'input' && renderItem.fieldType == 'number'"
-            type="number"
-            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-          >
+          <a-input v-model:value.number="formState[renderItem.key]"
+            v-if="renderItem.type == 'input' && renderItem.fieldType == 'number'" type="number"
+            :disabled="renderItem.disabled" :placeholder="renderItem.placeholder || `请输入${renderItem.label}`">
             <template v-if="renderItem.prefix" v-slot:prefix>
               <component :is="renderItem.prefix" />
             </template>
@@ -496,35 +660,25 @@ defineExpose({
             </template>
           </a-input>
 
-          <a-input-password
-            v-model:value="formState[renderItem.key]"
-            v-if="renderItem.type == 'password'"
-            type="password"
-            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-          >
+          <a-input-password v-model:value="formState[renderItem.key]" v-if="renderItem.type == 'password'"
+            type="password" :disabled="renderItem.disabled"
+            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`">
             <template v-if="renderItem.prefix" v-slot:prefix>
               <component :is="renderItem.prefix" />
             </template>
           </a-input-password>
 
-          <a-input
-            v-model:value="formState[renderItem.key]"
-            v-if="renderItem.type == 'code' && [undefined, 'string'].includes(renderItem.fieldType)"
-            type="text"
-            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-          >
+          <a-input v-model:value="formState[renderItem.key]"
+            v-if="renderItem.type == 'code' && [undefined, 'string'].includes(renderItem.fieldType)" type="text"
+            :disabled="renderItem.disabled" :placeholder="renderItem.placeholder || `请输入${renderItem.label}`">
             <template v-if="renderItem.prefix" v-slot:prefix>
               <component :is="renderItem.prefix" />
             </template>
             <template v-slot:suffix>
-              <span
-                v-if="
-                  (!renderItem.activityFunc || (renderItem.activityFunc && renderItem.activityFunc(formState))) &&
-                  renderItem.sendStatus != 'sending'
-                "
-                class="send-notice send-notice-activity"
-                @click="sendNoticeClick(renderItem)"
-              >
+              <span v-if="
+                (!renderItem.activityFunc || (renderItem.activityFunc && renderItem.activityFunc(formState))) &&
+                renderItem.sendStatus != 'sending'
+              " class="send-notice send-notice-activity" @click="sendNoticeClick(renderItem)">
                 {{ renderItem.codeName }}
               </span>
               <span v-else class="send-notice">
@@ -533,69 +687,50 @@ defineExpose({
             </template>
           </a-input>
 
-          <a-textarea
-            v-model:value="formState[renderItem.key]"
-            v-if="renderItem.type == 'textarea'"
-            :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
-            :auto-size="{ minRows: 2, maxRows: 10 }"
-          />
-
-          <a-select
-            style="min-width: 170px; margin-right: 15px"
-            v-model:value="formState[renderItem.key]"
-            :placeholder="renderItem.placeholder || `请选择`"
-            v-if="renderItem.type == 'select'"
-            :fieldNames="renderItem.fieldNames || { label: 'label', value: 'value' }"
-            :options="renderItem.optionList"
-            :mode="renderItem.isMultiple ? 'multiple' : undefined"
-          ></a-select>
-
-          <a-radio-group v-if="renderItem.type == 'radio'" v-model:value="formState[renderItem.key]">
+          <a-textarea v-model:value="formState[renderItem.key]" v-if="renderItem.type == 'textarea'"
+            :disabled="renderItem.disabled" :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"
+            :auto-size="{ minRows: 2, maxRows: 10 }" />
+
+          <a-select style="min-width: 170px; margin-right: 15px" v-model:value="formState[renderItem.key]"
+            :placeholder="renderItem.placeholder || `请选择`" v-if="renderItem.type == 'select'"
+            :disabled="renderItem.disabled" :fieldNames="renderItem.fieldNames || { label: 'label', value: 'value' }"
+            :options="renderItem.optionList" :mode="renderItem.isMultiple ? 'multiple' : undefined"
+            :show-search="renderItem.enableSearch || !!renderItem.loadDataFunc"
+            :filter-option="renderItem.loadDataFunc ? false : !!renderItem.enableSearch"
+            :option-filter-prop="renderItem.fieldNames?.label || 'label'"
+            :loading="(renderItem as any).__selectState?.loading"
+            @search="(keyword) => onSelectSearch(keyword, renderItem as any)"
+            @popupScroll="(e) => onSelectPopupScroll(e, renderItem as any)"></a-select>
+
+          <a-radio-group v-if="renderItem.type == 'radio'" v-model:value="formState[renderItem.key]"
+            :disabled="renderItem.disabled">
             <a-radio v-for="item in renderItem.optionList" :value="item[renderItem.fieldNames?.value || 'value']">
               {{ item[renderItem.fieldNames?.label || "label"] }}
             </a-radio>
           </a-radio-group>
 
-          <a-date-picker
-            v-model:value="formState[renderItem.key]"
-            v-if="renderItem.type === 'datePicker'"
-            show-time
-            :placeholder="`请选择${renderItem.label}`"
-            class="ant-input"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
-
-          <a-tree-select
-            style="min-width: 170px; margin-right: 15px"
-            v-model:value="formState[renderItem.key]"
-            :tree-data="renderItem.optionList"
-            v-if="renderItem.type == 'treeSelect'"
+          <a-date-picker v-model:value="formState[renderItem.key]" v-if="renderItem.type === 'datePicker'" show-time
+            :disabled="renderItem.disabled" :placeholder="`请选择${renderItem.label}`" class="ant-input"
+            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
+
+          <a-tree-select style="min-width: 170px; margin-right: 15px" v-model:value="formState[renderItem.key]"
+            :tree-data="renderItem.optionList" v-if="renderItem.type == 'treeSelect'" :disabled="renderItem.disabled"
             :fieldNames="renderItem.fieldNames || { children: 'children', label: 'name', value: 'id' }"
-            :placeholder="renderItem.placeholder || `请选择`"
-          ></a-tree-select>
+            :placeholder="renderItem.placeholder || `请选择`"></a-tree-select>
 
           <a-upload
             v-if="renderItem.type == 'uploadOss' || renderItem.type == 'uploadTos' || renderItem.type == 'upload'"
-            :file-list="formState[renderItem.key]"
-            :multiple="true"
-            :max-count="renderItem?.maxCount || 1"
-            @preview="handlePicPreview"
-            :customRequest="
-              (e) => {
-                uploadRequest(e, renderItem);
-              }
-            "
-            @change="
-              (e) => {
-                uploadChange(e, renderItem);
-              }
-            "
-            :headers="{
-              'Cache-Control': 'max-age=15552000',
-            }"
-            :list-type="renderItem.uploadType == 'pic' ? 'picture-card' : undefined"
-          >
+            :file-list="formState[renderItem.key]" :multiple="true" :max-count="renderItem?.maxCount || 1"
+            @preview="handlePicPreview" :customRequest="(e) => {
+              uploadRequest(e, renderItem);
+            }
+              " @change="
+                (e) => {
+                  uploadChange(e, renderItem);
+                }
+              " :headers="{
+                'Cache-Control': 'max-age=15552000',
+              }" :list-type="renderItem.uploadType == 'pic' ? 'picture-card' : undefined">
             <div v-if="renderItem.uploadType == 'pic'">
               <plus-outlined />
               <div style="margin-top: 8px">{{ renderItem.label }}</div>
@@ -609,18 +744,19 @@ defineExpose({
             </div>
           </a-upload>
 
-          <component v-if="renderItem.type == 'component'" :is="renderItem.component" v-model:[renderItem.key]="formState[renderItem.key]"></component>
-       </div>
+          <component v-if="renderItem.type == 'component'" :is="renderItem.component"
+            v-model:[renderItem.key]="formState[renderItem.key]"></component>
+        </div>
       </a-form-item>
     </div>
 
     <div v-if="uSlots.button || showResetButton || showSubmitButton" style="display: flex; justify-content: center">
       <slot name="button"></slot>
       <a-space size="small">
-        <a-button v-if="showResetButton" @click="resetForm" style="padding: 0 30px">
+        <a-button v-if="showResetButton" @click="resetForm" @keydown.enter.prevent="resetForm" style="padding: 0 30px">
           {{ resetButtonText || "取消" }}
         </a-button>
-        <a-button type="primary" @click="confirmClick" v-if="showSubmitButton" style="padding: 0 30px">
+        <a-button type="primary" @click="confirmClick" @keydown.enter.prevent="confirmClick" v-if="showSubmitButton" style="padding: 0 30px">
           {{ submitButtonText || "确认" }}
         </a-button>
       </a-space>

package/dist/components/p-modal-confirm/p-modal-confirm.vue

@@ -60,6 +60,7 @@ const confirmClick = async () => {
         <a-button
           class="modal-btn modal-cancel-btn"
           @click="show = false"
+          @keydown.enter.prevent="show = false"
         >
           取消
         </a-button>
@@ -71,6 +72,7 @@ const confirmClick = async () => {
             backgroundColor: confrimBtnBgColor,
           }"
           @click="confirmClick"
+          @keydown.enter.prevent="confirmClick"
           :loading="loading"
         >
           确定

package/dist/components/p-table/p-table.vue

@@ -2,10 +2,21 @@
 // import "viewerjs/dist/viewer.css";
 import { api as viewerApi } from "v-viewer";
 import PForm from "../p-form/p-form.vue";
-import { h, ref, reactive, onMounted, toRaw } from "vue";
+import { h, ref, reactive, onMounted, toRaw, computed } from "vue";
 import * as _ from "../../utils/dataUtils";
 import dayjs from "dayjs";
-import { Table as ATable, Button as AButton, Textarea as ATextarea } from "ant-design-vue";
+import * as XLSX from "xlsx";
+import {
+  Table as ATable,
+  Button as AButton,
+  Textarea as ATextarea,
+  Modal as AModal,
+  Radio as ARadio,
+  Checkbox as ACheckbox,
+  CheckboxGroup as ACheckboxGroup,
+  InputNumber as AInputNumber,
+  message,
+} from "ant-design-vue";
 import type { FormDataItem } from "../p-form/index.d";
 import type { TableColumn } from "./index.d";
 import { useSlots } from "vue";
@@ -21,6 +32,8 @@ interface Props {
   searchRenderData?: FormDataItem[];
   initSearchFormData?: any;
   data?: any[];
+  enableExport?: boolean;
+  exportFileName?: string;
 }
 
 const {
@@ -31,6 +44,8 @@ const {
   editColumns = [],
   tableColumns = [],
   initSearchFormData = [],
+  enableExport = true,
+  exportFileName = "table_export",
 } = defineProps<Props>();
 
 const selectedIds = defineModel<string[]>("selectedIds", { default: [] });
@@ -66,6 +81,15 @@ const rowSelection = {
 const editableData = reactive({});
 
 const loading = ref(false);
+const exportVisible = ref(false);
+const exportLoading = ref(false);
+
+const exportForm = reactive({
+  mode: "current",
+  page: 1,
+  count: 100,
+  columns: [] as string[],
+});
 
 let searchQuery = {};
 
@@ -73,25 +97,6 @@ const renderTableColumns = (tableColumns: TableColumn[]) => {
   const returnColumns: any = [];
   for (const [index, renderItem] of tableColumns.entries()) {
     if (renderItem.type == "operate") {
-      // renderItem.customRender = ({ text, record }) => {
-      //   const buttons: any = [];
-      //   for (const buttonItem of renderItem.operateButtons) {
-      //     if (buttonItem.visibleFunc && !buttonItem.visibleFunc(record)) continue;
-      //     buttons.push(
-      //       h(
-      //         "a",
-      //         {
-      //           onClick: () => {
-      //             buttonItem.click(record);
-      //           },
-      //         },
-      //         buttonItem.label
-      //       )
-      //     );
-      //   }
-      //   return h("div", { style: { display: "flex", justifyContent: "space-around" } }, buttons);
-      // };
-
       if (!renderItem.width) {
         renderItem.width = renderItem.operateButtons.length * 60;
       }
@@ -175,6 +180,193 @@ const renderTableColumns = (tableColumns: TableColumn[]) => {
 
 const columns = renderTableColumns(tableColumns);
 
+const getAllExportColumns = () => {
+  return tableColumns.filter((item) => item.type !== "operate" && !!item.key);
+};
+
+const getExportColumns = (selectedKeys?: string[]) => {
+  const allExportColumns = getAllExportColumns();
+  if (selectedKeys === undefined) {
+    return allExportColumns;
+  }
+
+  const selectedSet = new Set((selectedKeys || []).map((key) => String(key)));
+  return allExportColumns.filter((item) => selectedSet.has(String(item.key)));
+};
+
+const exportColumnOptions = computed(() => {
+  return getAllExportColumns().map((col) => {
+    const title = col.title as any;
+    return {
+      label: typeof title === "string" ? title : col.key || "",
+      value: String(col.key),
+    };
+  });
+});
+
+const onExportColumnsChange = (values: Array<string | number>) => {
+  console.log("selected export columns: ", values);
+  exportForm.columns = (values || []).map((item) => String(item));
+};
+
+const resetExportColumns = () => {
+  exportForm.columns = getAllExportColumns().map((item) => String(item.key));
+};
+
+const getCellValue = (record: any, column: TableColumn) => {
+  const key = column.key || "";
+  let value = key.includes(".") ? _.get(record, key.split(".")) : _.get(record, key);
+
+  if (column.mapPath) {
+    try {
+      const mapInfoStr: any = localStorage.getItem("map");
+      const mapInfo = JSON.parse(mapInfoStr || "{}");
+      const mapItem = _.get(mapInfo, column.mapPath) || {};
+      value = mapItem[value] ?? value;
+    } catch (error) {
+      // ignore map parse error and fallback to raw value
+    }
+  }
+
+  if (column.type === "date" && value) {
+    value = dayjs(value).format(column.format || "YYYY-MM-DD HH:mm:ss");
+  }
+
+  if (column.type === "pic") {
+    if (_.isEmpty(value)) return "";
+    const pics = _.isArray(value) ? value : [value];
+    value = pics.join(",");
+  }
+
+  if (_.isEmpty(value) && !_.isEmpty(column.default)) {
+    value = column.default;
+  }
+
+  if (_.isArray(value) || (typeof value === "object" && value !== null)) {
+    return JSON.stringify(value);
+  }
+
+  return value ?? "";
+};
+
+const downloadXlsx = (rows: any[], exportColumns: TableColumn[]) => {
+  const headers = exportColumns.map((col: any) => {
+    const title = col.title as any;
+    return typeof title === "string" ? title : col.key || "";
+  });
+
+  const dataRows = rows.map((row: any) => {
+    return exportColumns.map((col: any) => getCellValue(row, col));
+  });
+
+  const worksheet = XLSX.utils.aoa_to_sheet([headers, ...dataRows]);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+  XLSX.writeFile(workbook, `${exportFileName}_${dayjs().format("YYYYMMDDHHmmss")}.xlsx`);
+};
+
+const openExportModal = () => {
+  exportForm.mode = "current";
+  exportForm.page = pageQuery.p;
+  exportForm.count = pageQuery.pc;
+  resetExportColumns();
+  exportVisible.value = true;
+};
+
+const toggleExportMode = (mode: string) => {
+  exportForm.mode = exportForm.mode === mode ? "" : mode;
+};
+
+const getExportRowsByMode = async () => {
+  const sourceRows = data && data.length > 0 ? data : tableData.data || [];
+
+  if (exportForm.mode === "current") {
+    return sourceRows;
+  }
+
+  if (getData) {
+    const _searchInitFormData = initSearchFormData ? JSON.parse(JSON.stringify(initSearchFormData)) : {};
+    const baseQuery = { ..._searchInitFormData, ..._.cloneDeep(searchQuery), od: pageQuery.od } as any;
+
+    if (exportForm.mode === "page") {
+      const _tableData = await getData({
+        ...baseQuery,
+        p: Math.max(1, Number(exportForm.page) || 1),
+        pc: pageQuery.pc,
+      });
+      return _tableData.data || [];
+    }
+
+    if (exportForm.mode === "count") {
+      const _tableData = await getData({
+        ...baseQuery,
+        p: 1,
+        pc: Math.max(1, Number(exportForm.count) || 1),
+      });
+      return _tableData.data || [];
+    }
+
+    if (exportForm.mode === "all") {
+      const _tableData = await getData({
+        ...baseQuery,
+        p: 1,
+        pc: Math.max(1, Number(tableData.count) || 1),
+      });
+      return _tableData.data || [];
+    }
+
+    return [];
+  }
+
+  if (exportForm.mode === "page") {
+    const page = Math.max(1, Number(exportForm.page) || 1);
+    const start = (page - 1) * pageQuery.pc;
+    return sourceRows.slice(start, start + pageQuery.pc);
+  }
+
+  if (exportForm.mode === "count") {
+    return sourceRows.slice(0, Math.max(1, Number(exportForm.count) || 1));
+  }
+
+  if (exportForm.mode === "all") {
+    return sourceRows.slice(0, tableData.count || sourceRows.length);
+  }
+
+  return sourceRows;
+};
+
+const confirmExport = async () => {
+  try {
+    if (!exportForm.mode) {
+      message.warning("请选择导出方式");
+      return;
+    }
+    if (_.isEmpty(exportForm.columns)) {
+      message.warning("请选择导出列");
+      return;
+    }
+    exportLoading.value = true;
+    const exportColumns = getExportColumns(exportForm.columns);
+
+    if (_.isEmpty(exportColumns)) {
+      message.warning("请选择导出列");
+      return;
+    }
+    const rows = await getExportRowsByMode();
+    if (_.isEmpty(rows)) {
+      message.warning("暂无可导出的数据");
+      return;
+    }
+    downloadXlsx(rows, exportColumns);
+    exportVisible.value = false;
+    message.success("导出成功");
+  } catch (error: any) {
+    message.error(error?.message || "导出失败");
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
 const renderTableData = async () => {
   loading.value = true;
   if (getData) {
@@ -213,8 +405,7 @@ const onPageSizeChange = (current, pc) => {
 const searchClick = async () => {
   const query = await SearchFormRef.value.getFormData();
 
-  if (_.isEmpty(query)) return;
-  searchQuery = _.pickBy(query, (value, key) => {
+  searchQuery = _.pickBy(query || {}, (value, key) => {
     return value !== "" && value != undefined;
   });
 
@@ -283,14 +474,18 @@ defineExpose({
       layout="inline"
     >
       <template v-slot:button>
-        <a-button type="primary" @click="searchClick" style="margin-left: 20px"> 搜索 </a-button>
-        <a-button style="margin-left: 10px" @click="resetSearch"> 重置 </a-button>
+        <a-button type="primary" @click="searchClick" @keydown.enter.prevent="searchClick" style="margin-left: 20px"> 搜索 </a-button>
+        <a-button style="margin-left: 10px" @click="resetSearch" @keydown.enter.prevent="resetSearch"> 重置 </a-button>
       </template>
     </PForm>
   </div>
 
-  <div v-if="uSlots.button" style="display: flex; justify-content: flex-end; margin-bottom: 10px; padding: 20px">
+  <div
+    v-if="uSlots.button"
+    style="display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 10px; padding: 20px"
+  >
     <slot name="button"></slot>
+    <a-button v-if="enableExport" type="primary" @click="openExportModal" @keydown.enter.prevent="openExportModal">导出Excel</a-button>
   </div>
 
   <a-table
@@ -337,19 +532,63 @@ defineExpose({
               v-if="!item.visibleFunc || (item.visibleFunc && item.visibleFunc(record))"
               class="operate-a"
               @click="item.click(record)"
+              @keydown.enter.prevent="item.click(record)"
+              tabindex="0"
+              role="button"
             >
               {{ item.label }}</a
             >
           </span>
-          <a class="operate-a" v-if="editableData[record.index]" @click="save(record.index)">保存</a>
-          <a class="operate-a" v-if="editableData[record.index]" @click="cancel(record.index)">退出</a>
-          <a v-if="editColumns.length > 0" class="operate-a" @click="edit(record.index)">编辑</a>
+          <a class="operate-a" v-if="editableData[record.index]" @click="save(record.index)" @keydown.enter.prevent="save(record.index)" tabindex="0" role="button">保存</a>
+          <a class="operate-a" v-if="editableData[record.index]" @click="cancel(record.index)" @keydown.enter.prevent="cancel(record.index)" tabindex="0" role="button">退出</a>
+          <a v-if="editColumns.length > 0" class="operate-a" @click="edit(record.index)" @keydown.enter.prevent="edit(record.index)" tabindex="0" role="button">编辑</a>
         </div>
       </template>
 
       <slot name="bodyCell" v-bind="{ column, text, record, index }" />
     </template>
   </a-table>
+
+  <a-modal v-model:open="exportVisible" title="导出Excel" :confirm-loading="exportLoading" @ok="confirmExport">
+    <div class="export-panel">
+      <div class="export-columns-wrap">
+        <div class="export-columns-title">导出列（默认全选）</div>
+        <a-checkbox-group
+          v-model:value="exportForm.columns"
+          class="export-columns-group"
+          :options="exportColumnOptions"
+        >
+        </a-checkbox-group>
+      </div>
+
+      <div class="export-mode-list">
+        <label class="export-mode-item" :class="{ selected: exportForm.mode === 'current' }">
+          <a-radio :checked="exportForm.mode === 'current'" @click="toggleExportMode('current')"
+            >导出当前页数据</a-radio
+          >
+        </label>
+        <label class="export-mode-item" :class="{ selected: exportForm.mode === 'page' }">
+          <a-radio :checked="exportForm.mode === 'page'" @click="toggleExportMode('page')">导出指定页码数据</a-radio>
+        </label>
+        <label class="export-mode-item" :class="{ selected: exportForm.mode === 'count' }">
+          <a-radio :checked="exportForm.mode === 'count'" @click="toggleExportMode('count')">导出指定条数数据</a-radio>
+        </label>
+        <label class="export-mode-item" :class="{ selected: exportForm.mode === 'all' }">
+          <a-radio :checked="exportForm.mode === 'all'" @click="toggleExportMode('all')">导出全部数据（count）</a-radio>
+        </label>
+      </div>
+
+      <div v-if="exportForm.mode === 'page'" class="export-input-row">
+        <span class="export-input-label">页码：</span>
+        <a-input-number v-model:value="exportForm.page" :min="1" :precision="0" style="width: 180px" />
+      </div>
+
+      <div v-if="exportForm.mode === 'count'" class="export-input-row">
+        <span class="export-input-label">条数：</span>
+        <a-input-number v-model:value="exportForm.count" :min="1" :precision="0" style="width: 180px" />
+      </div>
+    </div>
+  </a-modal>
 </template>
 
 <style>
@@ -376,4 +615,76 @@ defineExpose({
 .operate-a {
   color: #126cff;
 }
+
+.export-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.export-columns-wrap {
+  padding: 10px 12px;
+  border: 1px solid #e6eaf2;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.export-columns-title {
+  margin-bottom: 8px;
+  color: #334155;
+  font-weight: 500;
+}
+
+.export-columns-group {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.export-column-item {
+  margin-inline-start: 0 !important;
+}
+
+.export-mode-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.export-mode-item {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid #e6eaf2;
+  border-radius: 8px;
+  background: #f8fafc;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.export-mode-item:hover {
+  border-color: #8cb8ff;
+  background: #eef5ff;
+}
+
+.export-mode-item.selected {
+  border-color: #3b82f6;
+  background: #e8f1ff;
+  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.15);
+}
+
+.export-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.export-input-label {
+  color: #334155;
+  font-weight: 500;
+}
 </style>

package/dist/utils/dataUtils.ts

@@ -35,33 +35,77 @@ export const isEmpty = (value: any): boolean => {
 
 
 export const cloneDeep = <T>(value: T, weakMap = new WeakMap()): T => {
-  if (value === null || typeof value !== 'object') return value;
+  // 1. 基础类型直接返回
+  if (value === null || typeof value !== "object") return value;
 
-  if (weakMap.has(value)) return weakMap.get(value); // 解决循环引用
+  // 2. 处理循环引用
+  if (weakMap.has(value as any)) {
+    return weakMap.get(value as any);
+  }
 
   let result: any;
 
+  // 3. RegExp
+  if (value instanceof RegExp) {
+    result = new RegExp(value.source, value.flags);
+    weakMap.set(value, result);
+    return result;
+  }
+
+  // 4. Date
+  if (value instanceof Date) {
+    result = new Date(value.getTime());
+    weakMap.set(value, result);
+    return result;
+  }
+
+  // 5. Map
+  if (value instanceof Map) {
+    result = new Map();
+    weakMap.set(value, result);
+
+    value.forEach((v, k) => {
+      result.set(k, cloneDeep(v, weakMap));
+    });
+
+    return result;
+  }
+
+  // 6. Set
+  if (value instanceof Set) {
+    result = new Set();
+    weakMap.set(value, result);
+
+    value.forEach((v) => {
+      result.add(cloneDeep(v, weakMap));
+    });
+
+    return result;
+  }
+
+  // 7. Array
   if (Array.isArray(value)) {
     result = [];
     weakMap.set(value, result);
+
     for (const item of value) {
       result.push(cloneDeep(item, weakMap));
     }
+
     return result;
   }
 
-  result = {};
+  // 8. 普通对象
+  result = Object.create(Object.getPrototypeOf(value));
   weakMap.set(value, result);
-  for (const key in value) {
-    if (Object.prototype.hasOwnProperty.call(value, key)) {
-      result[key] = cloneDeep(value[key], weakMap);
-    }
+
+  for (const key of Object.keys(value as any)) {
+    result[key] = cloneDeep((value as any)[key], weakMap);
   }
 
   return result;
 };
 
-
 export const isArray = (value: any) => {
   return Array.isArray(value);
 };
@@ -134,21 +178,3 @@ const paramsToString = (params) => {
   return url
 }
 
-
-export const navTo = (url, params = {}) => {
-  uni.navigateTo({ url: url + paramsToString(params) })
-}
-
-
-export const dirTo = (url, params = {}) => {
-  uni.redirectTo({ url: url + paramsToString(params) })
-}
-
-export const switchTo = (url) => {
-  uni.switchTab({ url })
-}
-
-export const backTo = (delta = 1) => {
-  uni.navigateBack({ delta })
-}
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-pc-ui",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "type": "module",
   "module": "dist/index.ts",
   "main": "dist/index.ts",
@@ -18,7 +18,8 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "vue": "3.5.13"
+    "vue": "3.5.13",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "ts-node": "^10.9.2",