p-pc-ui 1.3.11 → 1.3.13

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

@@ -56,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> {
@@ -65,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 =

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, render, onBeforeMount, useSlots, toRaw, shallowRef } from "vue";
+import { ref, reactive, onMounted, render, onBeforeMount, useSlots, toRaw, shallowRef, isRef, isReactive } from "vue";
 import type { FormDataItem } from "./index";
 import {
   Button as AButton,
@@ -16,6 +16,7 @@ import {
   Upload as AUpload,
   Textarea as ATextarea,
   Space as ASpace,
+  DatePicker as ADatePicker,
 } from "ant-design-vue";
 import type { FormInstance } from "ant-design-vue";
 import * as _ from "../../utils/dataUtils";
@@ -23,7 +24,6 @@ import * as _ from "../../utils/dataUtils";
 import { api as viewerApi } from "v-viewer";
 import dayjs from "dayjs";
 import { UploadOutlined, PlusOutlined } from "@ant-design/icons-vue";
-import { log } from "echarts/types/src/util/log.js";
 
 const uSlots = useSlots();
 
@@ -59,6 +59,169 @@ 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);
+  }
+};
+
 /**
  * 富文本相关配置
  */
@@ -95,7 +258,6 @@ const disposeRenderData = async (renderData: FormDataItem[]) => {
         fieldType = "array";
       }
 
-
       if (required) {
         rules.push({
           type: renderItem.type == "uploadOss" || renderItem.type == "uploadTos" ? "array" : renderItem.fieldType,
@@ -131,8 +293,6 @@ const disposeRenderData = async (renderData: FormDataItem[]) => {
       }
     }
 
-
-
     renderItem.rules = rules;
 
     // 处理下拉选择
@@ -146,8 +306,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}`;
       }
@@ -225,12 +389,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)) {
@@ -315,6 +488,10 @@ const getFormData = async (options: { no_check?: Boolean } = {}) => {
       _.set(returnFormData, key.split("__"), formData[key]);
     } else if (renderItem.type == "datePicker") {
       returnFormData[key] = dayjs(formData[key]).format("YYYY-MM-DD HH:mm:ss");
+    } 
+    else if ( isRef(formData[key]) || isReactive(formData[key]) ) {
+
+      returnFormData[key] = toRaw(formData[key]);
     } else {
       returnFormData[key] = formData[key];
     }
@@ -334,9 +511,13 @@ const resetForm = () => {
  * 确认按钮点击
  */
 const confirmClick = async () => {
-  const formData = await getFormData();
-  if (Object.keys(formData).length == 0) return;
-  emits("confirm", formData, resetForm);
+  try {
+    const formData = await getFormData();
+    if (Object.keys(formData).length == 0) return;
+    emits("confirm", formData, resetForm);
+  } catch (error) {
+    console.warn("Form validation failed:", error);
+  }
 };
 
 const uploadChange = (e, renderItem) => {
@@ -445,26 +626,46 @@ 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
-          " :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}`">
+        :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>
@@ -473,9 +674,13 @@ defineExpose({
             </template>
           </a-input>
 
-          <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}`">
+          <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>
@@ -484,25 +689,37 @@ defineExpose({
             </template>
           </a-input>
 
-          <a-input-password v-model:value="formState[renderItem.key]" v-if="renderItem.type == 'password'"
-            type="password" :disabled="renderItem.disabled"
-            :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"
-            :disabled="renderItem.disabled" :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">
@@ -511,44 +728,83 @@ defineExpose({
             </template>
           </a-input>
 
-          <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"></a-select>
-
-          <a-radio-group v-if="renderItem.type == 'radio'" v-model:value="formState[renderItem.key]"
-            :disabled="renderItem.disabled">
+          <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
-            :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"
+          <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>
@@ -562,8 +818,11 @@ defineExpose({
             </div>
           </a-upload>
 
-          <component v-if="renderItem.type == 'component'" :is="renderItem.component"
-            v-model:[renderItem.key]="formState[renderItem.key]"></component>
+          <component
+            v-if="renderItem.type == 'component'"
+            :is="renderItem.component"
+            v-model:[renderItem.key]="formState[renderItem.key]"
+          ></component>
         </div>
       </a-form-item>
     </div>

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

@@ -62,7 +62,7 @@ const confirmClick = async () => {
 
 <template>
   <a-modal
-    v-model:visible="show"
+    v-model:open="show"
     :width="width"
     centered
     wrapClassName="p-modal"

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

@@ -44,7 +44,7 @@ const confirmClick = async () => {
 </script>
 
 <template>
-  <a-modal v-model:visible="show" :width="width" centered wrapClassName="p-modal">
+  <a-modal v-model:open="show" :width="width" centered wrapClassName="p-modal">
     <template #title v-if="title">
       <div class="modal-title">
         {{ title }}

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

@@ -65,8 +65,12 @@ onMounted(() => {
 
 
 const ok = async () => {
-    let formData = await PFormRef.value.getFormData();
-    emits('confirm', formData)
+    try {
+        let formData = await PFormRef.value.getFormData();
+        emits('confirm', formData)
+    } catch (error) {
+        console.warn('Form validation failed:', error);
+    }
 }
 
 

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;
   });
 
@@ -289,8 +480,12 @@ defineExpose({
     </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">导出Excel</a-button>
   </div>
 
   <a-table
@@ -350,6 +545,47 @@ defineExpose({
       <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 +612,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/package.json

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