p-pc-ui 1.3.11 → 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

@@ -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

@@ -23,7 +23,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 +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);
+  }
+};
+
 /**
  * 富文本相关配置
  */
@@ -146,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}`;
       }
@@ -225,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)) {
@@ -518,7 +694,13 @@ defineExpose({
           <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>
+            :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">
@@ -571,10 +753,10 @@ defineExpose({
     <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-pc-ui",
-  "version": "1.3.11",
+  "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",