p-pc-ui 1.3.13 → 1.3.14

package/dist/components/p-form/form-utils.ts

@@ -0,0 +1,167 @@
+import type { FormDataItem } from "./index";
+import * as _ from "../../utils/dataUtils";
+
+export type FormRenderItem = FormDataItem & {
+  rawKey: string;
+  rules: any[];
+  optionList?: any[];
+};
+
+export const toFormKey = (key: string) => key.replaceAll(".", "__");
+
+export const toRawKey = (key: string) => key.replaceAll("__", ".");
+
+export const createFormRules = (renderItem: FormDataItem) => {
+  let { fieldType, fieldRules, label } = renderItem;
+  const rules: any[] = [];
+  const operateType = ["select", "treeSelect", "date", "datePicker"].includes(renderItem.type) ? "选择" : "输入";
+
+  for (const fieldRule of fieldRules || []) {
+    const { msg, required, min, max, regex } = fieldRule;
+
+    if (
+      (renderItem.type === "uploadOss" || renderItem.type === "uploadTos" || renderItem.type === "upload") &&
+      renderItem.fieldType === "string"
+    ) {
+      fieldType = "array";
+    }
+
+    if (required) {
+      rules.push({
+        type: renderItem.type === "uploadOss" || renderItem.type === "uploadTos" ? "array" : renderItem.fieldType,
+        required: true,
+        message: msg || `请${operateType}${label}`,
+        trigger: ["blur", "change"],
+      });
+    }
+
+    if (min) {
+      rules.push({
+        type: fieldType,
+        min,
+        message: msg || `${label}需大于等于${min}${fieldType === "string" ? "个字符" : ""}`,
+        trigger: ["blur", "change"],
+      });
+    }
+
+    if (max) {
+      rules.push({
+        type: fieldType,
+        max,
+        message: `${label}需小于等于${max}${fieldType === "string" ? "个字符" : ""}`,
+        trigger: ["blur", "change"],
+      });
+    }
+
+    if (regex) {
+      rules.push({
+        type: fieldType,
+        pattern: regex,
+        message: msg || `${label}格式错误`,
+        trigger: ["blur", "change"],
+      });
+    }
+  }
+
+  return rules;
+};
+
+export const getMapOptionList = (mapInfo: any, mapPath?: string[]) => {
+  if (!mapPath) return undefined;
+  const mapItem = _.get(mapInfo || {}, mapPath);
+  if (!mapItem) return undefined;
+
+  return Object.keys(mapItem).map((key) => ({
+    label: mapItem[key],
+    value: key,
+  }));
+};
+
+export const normalizeFormRenderData = (renderData: FormDataItem[], mapInfo: any = {}) => {
+  return renderData.map((item) => {
+    const rawKey = item.key;
+    const optionList = "optionList" in item && Array.isArray(item.optionList) ? [...item.optionList] : undefined;
+    const mapOptionList =
+      item.type === "select" || item.type === "treeSelect" || item.type === "radio"
+        ? getMapOptionList(mapInfo, item.mapPath)
+        : undefined;
+
+    return {
+      ...item,
+      rawKey,
+      key: toFormKey(rawKey),
+      rules: createFormRules(item),
+      ...(optionList || mapOptionList ? { optionList: mapOptionList || optionList || [] } : {}),
+    } as FormRenderItem;
+  });
+};
+
+export const getInitialFormValue = (renderItem: FormRenderItem, initFormData: Record<string, any> = {}) => {
+  if (renderItem.default !== undefined) {
+    return renderItem.default;
+  }
+
+  let initValue = _.get(initFormData, renderItem.rawKey);
+
+  if (initValue === undefined) {
+    switch (renderItem.fieldType) {
+      case "array":
+        initValue = [];
+        break;
+      case "string":
+        initValue =
+          renderItem.type === "uploadOss" || renderItem.type === "uploadTos" || renderItem.type === "upload" ? [] : "";
+        break;
+      case "number":
+        initValue = 0;
+        break;
+      case "date":
+        initValue = "";
+        break;
+      default:
+        initValue = undefined;
+        break;
+    }
+  }
+
+  if (renderItem.type === "select" || renderItem.type === "treeSelect" || renderItem.type === "radio") {
+    if (!Array.isArray(renderItem.optionList)) {
+      renderItem.optionList = [];
+    }
+
+    if (renderItem.type === "select" && renderItem.isMultiple && !Array.isArray(initValue)) {
+      initValue = [];
+    }
+
+    if ((initValue === undefined || initValue === "") && renderItem.optionList.length > 0) {
+      if (!(renderItem.type === "select" && renderItem.isMultiple)) {
+        const valueKey = renderItem.fieldNames?.value || (renderItem.type === "treeSelect" ? "id" : "value");
+        initValue = renderItem.optionList[0]?.[valueKey];
+      }
+    }
+  } else if (renderItem.type === "uploadOss") {
+    const values = Array.isArray(initValue) ? initValue : initValue ? [initValue] : [];
+    initValue = values.map((val) => ({
+      key: val,
+      url: renderItem.baseOssUrl + val,
+    }));
+  } else if (renderItem.type === "uploadTos") {
+    const values = Array.isArray(initValue) ? initValue : initValue ? [initValue] : [];
+    initValue = values.map((val) => ({
+      key: val,
+      url: renderItem.baseTosUrl + val,
+    }));
+  }
+
+  return initValue;
+};
+
+export const initFormStateFromRenderData = (renderData: FormRenderItem[], initFormData: Record<string, any> = {}) => {
+  const formState: Record<string, any> = {};
+
+  for (const renderItem of renderData) {
+    formState[renderItem.key] = getInitialFormValue(renderItem, initFormData);
+  }
+
+  return formState;
+};

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, render, onBeforeMount, useSlots, toRaw, shallowRef, isRef, isReactive } from "vue";
+import { ref, reactive, onBeforeMount, useSlots, toRaw, isRef, isReactive } from "vue";
 import type { FormDataItem } from "./index";
+import { initFormStateFromRenderData, normalizeFormRenderData, type FormRenderItem } from "./form-utils";
 import {
   Button as AButton,
   message,
@@ -50,7 +51,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 // 渲染后的表单
-const renderData = ref<(FormDataItem & { rules: [] })[]>([]);
+const renderData = ref<FormRenderItem[]>([]);
 
 // 表单数据
 const formState: any = reactive({});
@@ -78,6 +79,7 @@ type SelectLoadState = {
   keyword: string;
   hasMore: boolean;
   loading: boolean;
+  requestId: number;
 };
 
 const getSelectValueField = (renderItem: any) => {
@@ -92,6 +94,7 @@ const ensureSelectLoadState = (renderItem: FormDataItem & { [key: string]: any }
       keyword: "",
       hasMore: true,
       loading: false,
+      requestId: 0,
     } as SelectLoadState;
   }
 
@@ -174,8 +177,11 @@ const fetchSelectOptions = async (
   if (!state.hasMore) return;
 
   state.loading = true;
+  const requestId = state.requestId + 1;
+  state.requestId = requestId;
   try {
     const res = (await renderItem.loadDataFunc(buildSelectLoadParams(renderItem, state))) as SelectLoadResult;
+    if (requestId !== state.requestId) return;
     const normalizedRes = normalizeSelectLoadResult(res, state);
     const list = normalizedRes.list;
     if (options.reset) {
@@ -188,7 +194,9 @@ const fetchSelectOptions = async (
       state.pageNum += 1;
     }
   } finally {
-    state.loading = false;
+    if (requestId === state.requestId) {
+      state.loading = false;
+    }
   }
 };
 
@@ -237,103 +245,44 @@ onBeforeMount(async () => {
  * 处理渲染表单
  */
 const disposeRenderData = async (renderData: FormDataItem[]) => {
-  const _renderData = _.cloneDeep(renderData).map((val) => ({
-    ...val,
-    rules: [] as any,
-  })) as (FormDataItem & { rules: [] })[];
-
-  for (const renderItem of _renderData) {
-    let { fieldType, fieldRules, label } = renderItem;
-    // 处理校验规则
-    const rules: any = [];
-    const operateType = ["select", "treeSelect", "date", "datePicker"].includes(renderItem.type) ? "选择" : "输入";
-    for (const fieldRule of fieldRules || []) {
-      const { msg, required, min, max, regex } = fieldRule;
-
-      // 图片需要额外处理
-      if (
-        (renderItem.type == "uploadOss" || renderItem.type == "uploadTos" || renderItem.type == "upload") &&
-        renderItem.fieldType == "string"
-      ) {
-        fieldType = "array";
-      }
+  let mapInfo = {};
+  try {
+    mapInfo = JSON.parse(localStorage.getItem("map") || "{}");
+  } catch (error) {
+    mapInfo = {};
+  }
 
-      if (required) {
-        rules.push({
-          type: renderItem.type == "uploadOss" || renderItem.type == "uploadTos" ? "array" : renderItem.fieldType,
-          required: true,
-          message: msg || `请${operateType}${label}`,
-          trigger: ["blur", "change"],
-        });
-      }
-      if (min) {
-        rules.push({
-          type: fieldType,
-          min: min,
-          message: msg || `${label}需大于等于${min}${fieldType == "string" ? "个字符" : ""}`,
-          trigger: ["blur", "change"],
-        });
-      }
+  const _renderData = normalizeFormRenderData(renderData, mapInfo);
 
-      if (max) {
-        rules.push({
-          type: fieldType,
-          max: max,
-          message: `${label}需小于等于${max}${fieldType == "string" ? "个字符" : ""}`,
-          trigger: ["blur", "change"],
-        });
-      }
-      if (regex) {
-        rules.push({
-          type: fieldType,
-          pattern: regex,
-          message: msg || `${label}格式错误`,
-          trigger: ["blur", "change"],
-        });
+  await Promise.all(
+    _renderData.map(async (renderItem) => {
+      if (
+        (renderItem.type !== "treeSelect" && renderItem.type !== "select" && renderItem.type !== "radio") ||
+        !renderItem.loadDataFunc
+      ) {
+        return;
       }
-    }
 
-    renderItem.rules = rules;
+      let point: string[] = [];
+      const interval = window.setInterval(() => {
+        if (point.length >= 3) point = [];
+        point.push(".");
+        renderItem.placeholder = "加载中" + point.join("");
+      }, 500);
 
-    // 处理下拉选择
-    if (renderItem.type == "treeSelect" || renderItem.type == "select" || renderItem.type == "radio") {
-      // 立即执行函数, 获取下拉的列表
-      if (renderItem.loadDataFunc) {
-        let point: string[] = [];
-        const interval = setInterval(() => {
-          if (point.length >= 3) point = [];
-          point.push(".");
-          renderItem.placeholder = "加载中" + point.join("");
-        }, 500);
-
-        if (renderItem.type == "select") {
+      try {
+        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[];
+          renderItem.optionList = Array.isArray(res) ? res : res?.data || [];
         }
+      } finally {
         clearInterval(interval);
         renderItem.placeholder = `请选择${renderItem.label}`;
       }
-
-      // 渲染搜索框下拉框
-      if (renderItem.mapPath) {
-        const mapInfoStr = localStorage.getItem("map");
-        if (mapInfoStr) {
-          const mapInfo = JSON.parse(mapInfoStr);
-          const mapItem = _.get(mapInfo, renderItem.mapPath);
-          const optionList: any[] = [];
-          for (const key in mapItem) {
-            optionList.push({
-              label: mapItem[key],
-              value: key,
-            });
-          }
-          renderItem["optionList"] = optionList;
-        }
-      }
-    }
-  }
+    }),
+  );
 
   return _renderData;
 };
@@ -341,110 +290,14 @@ const disposeRenderData = async (renderData: FormDataItem[]) => {
 /**
  * 初始化表单数据
  */
-const initFormState = (renderData: FormDataItem[], initFromData = {}) => {
-  const _formState: any = {};
-  for (const renderItem of renderData) {
-    // 处理json字段 例如  data.name =  data:{name:xxx}
-    renderItem["key"] = renderItem["key"].replaceAll(".", "__");
-    let initValue;
-    // 判断渲染表单是否有默认值
-    if (renderItem.default != undefined) {
-      initValue = renderItem.default;
-      _formState[renderItem.key] = initValue;
-      continue;
-    }
-
-    initValue = _.get(initFromData, renderItem["key"].split("__").join("."));
-
-    if (initValue == undefined) {
-      switch (renderItem.fieldType) {
-        case "array":
-          initValue = [];
-          break;
-        case "string":
-          // 如果是图片类型, 并且是string类型,代表用户只需要1张图片,并且已文本的形式存放
-          if (renderItem.type == "uploadOss" || renderItem.type == "uploadTos" || renderItem.type == "upload") {
-            initValue = [];
-          } else {
-            initValue = "";
-          }
-          break;
-        case "number":
-          initValue = 0;
-          break;
-        case "date":
-          initValue: "";
-          break;
-        default:
-          initValue = undefined;
-          break;
-      }
-    }
-
-    // 判断是否是下拉组件 并且设置默认值
-    const renderItemType = renderItem.type;
-    if (renderItemType == "select" || renderItemType == "treeSelect" || renderItemType == "radio") {
-      // 初始化值避免为空导致后续异步操作push失败
-      if (_.isEmpty(renderItem.optionList)) {
-        renderItem.optionList = [];
-      }
-
-      if (renderItem.type == "select" && renderItem.isMultiple) {
-        if (!_.isArray(initValue)) {
-          initValue = [];
-        }
-      }
-
-      if (!initValue && renderItem.optionList) {
-        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 = renderItem.type == "select" && renderItem.isMultiple ? [] : undefined;
-      }
-    } else if (renderItem.type == "uploadOss") {
-      if (!_.isArray(initValue)) {
-        initValue = [initValue];
-      }
-
-      initValue = initValue.map((val) => {
-        return {
-          key: val,
-          url: renderItem.baseOssUrl + val,
-        };
-      });
-    } else if (renderItem.type == "uploadTos") {
-      if (!_.isArray(initValue)) {
-        initValue = [initValue];
-      }
-      initValue = initValue.map((val) => {
-        return {
-          key: val,
-          url: renderItem.baseTosUrl + val,
-        };
-      });
-    }
-
-    _formState[renderItem["key"]] = initValue;
-  }
-
-  return _formState;
-};
+const initFormState = (renderData: FormRenderItem[], initFromData = {}) => initFormStateFromRenderData(renderData, initFromData);
 
 const handlePicPreview = (file: any) => {
-  const url = URL.createObjectURL(file.originFileObj);
-
-  viewerApi({ images: [url || file.url || file.key || file.thumbUrl] });
-};
+  const url = file.url || file.key || file.thumbUrl || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : "");
 
-const replaceUrl = (str, urlToReplace, replacement) => {
-  // 转义特殊字符
-  let escapedUrl = urlToReplace.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
-  let pattern = new RegExp(escapedUrl, "g");
-  return str.replace(pattern, replacement);
+  if (url) {
+    viewerApi({ images: [url] });
+  }
 };
 
 /**
@@ -464,6 +317,7 @@ const getFormData = async (options: { no_check?: Boolean } = {}) => {
   const returnFormData = {};
   for (const renderItem of renderData.value) {
     const { key } = renderItem;
+    const rawKey = renderItem.rawKey || key;
 
     // 如果控制显隐函数,判断值是否有效
     if (renderItem?.visibleHook && !renderItem.visibleHook(formData)) {
@@ -475,25 +329,33 @@ const getFormData = async (options: { no_check?: Boolean } = {}) => {
       const keys = fileData.map((val) => {
         return val?.response?.key || val.key;
       });
-      returnFormData[key] = renderItem?.fieldType == "string" ? keys[0] : keys;
+      if (rawKey.includes(".")) {
+        _.set(returnFormData, rawKey, renderItem?.fieldType == "string" ? keys[0] : keys);
+      } else {
+        returnFormData[rawKey] = renderItem?.fieldType == "string" ? keys[0] : keys;
+      }
     }
     // 获取file对象
     else if (renderItem.type == "upload") {
       const formatData = formState[key].map((val) => ({ base64: val.thumbUrl, file: val.originFileObj }));
-      returnFormData[key] = formatData;
+      if (rawKey.includes(".")) {
+        _.set(returnFormData, rawKey, formatData);
+      } else {
+        returnFormData[rawKey] = formatData;
+      }
     }
 
     // 转换成上传对象
-    else if (key.includes("__")) {
-      _.set(returnFormData, key.split("__"), formData[key]);
+    else if (rawKey.includes(".")) {
+      _.set(returnFormData, rawKey, formData[key]);
     } else if (renderItem.type == "datePicker") {
-      returnFormData[key] = dayjs(formData[key]).format("YYYY-MM-DD HH:mm:ss");
+      returnFormData[rawKey] = formData[key] ? dayjs(formData[key]).format("YYYY-MM-DD HH:mm:ss") : "";
     } 
     else if ( isRef(formData[key]) || isReactive(formData[key]) ) {
 
-      returnFormData[key] = toRaw(formData[key]);
+      returnFormData[rawKey] = toRaw(formData[key]);
     } else {
-      returnFormData[key] = formData[key];
+      returnFormData[rawKey] = formData[key];
     }
   }
 
@@ -676,7 +538,7 @@ defineExpose({
 
           <a-input
             v-model:value.number="formState[renderItem.key]"
-            v-if="renderItem.type == 'input' && renderItem.fieldType == 'number'"
+            v-if="(renderItem.type == 'input' && renderItem.fieldType == 'number') || renderItem.type == 'number'"
             type="number"
             :disabled="renderItem.disabled"
             :placeholder="renderItem.placeholder || `请输入${renderItem.label}`"

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

@@ -1,5 +1,5 @@
 <template>
-    <Modal v-model:visible="visible" :title="title" :width="modalWidth" okText="确定" cancel-text="取消" @ok="ok" centered
+    <Modal v-model:open="visible" :title="title" :width="modalWidth" okText="确定" cancel-text="取消" @ok="ok" centered
         @cancel="cancel">
         <div style="max-height: 600px; overflow-y: auto; padding-right: 80px;margin-top: 30px;">
             <p-form v-if="formRenderData.length > 0" ref="PFormRef" :render-data="formRenderData"
@@ -51,16 +51,16 @@ onMounted(() => {
         initFormValue = {};
     }
 
+    const renderDataMap = new Map(_.cloneDeep(renderFormData).map((val) => [val.key, val]));
     const filterRenderData: any = [];
     for (const renderKey of renderKeys || renderFormData.map((val) => val.key)) {
-        const renderItem = _.cloneDeep(renderFormData).find((val) => val.key == renderKey);
+        const renderItem = renderDataMap.get(renderKey);
         if (!_.isEmpty(renderItem)) {
             filterRenderData.push(renderItem);
         }
     }
 
     formRenderData.value = filterRenderData;
-    console.log(formRenderData)
 })
 
 
@@ -81,4 +81,4 @@ const cancel = () => {
 
 </script>
 
-<style scoped></style>
+<style scoped></style>

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

@@ -2,7 +2,7 @@
 // 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, computed } from "vue";
+import { ref, reactive, onMounted, toRaw, computed } from "vue";
 import * as _ from "../../utils/dataUtils";
 import dayjs from "dayjs";
 import * as XLSX from "xlsx";
@@ -17,8 +17,10 @@ import {
   InputNumber as AInputNumber,
   message,
 } from "ant-design-vue";
+import type { TableProps } from "ant-design-vue";
 import type { FormDataItem } from "../p-form/index.d";
 import type { TableColumn } from "./index.d";
+import { buildTableColumns, getCellValue as getTableCellValue } from "./table-utils";
 import { useSlots } from "vue";
 const SearchFormRef = ref();
 
@@ -48,7 +50,9 @@ const {
   exportFileName = "table_export",
 } = defineProps<Props>();
 
-const selectedIds = defineModel<string[]>("selectedIds", { default: [] });
+type RowKey = string | number;
+
+const selectedIds = defineModel<RowKey[]>("selectedIds", { default: [] });
 
 const pageQuery = reactive({
   p: 1,
@@ -65,13 +69,15 @@ const tableData = reactive({
   },
 });
 
-const emits = defineEmits(["select"]);
+const emits = defineEmits<{
+  select: [selectedRowKeys: RowKey[]];
+}>();
 
-const rowSelection = {
+const rowSelection: TableProps<any>["rowSelection"] = {
   get selectedRowKeys() {
     return selectedIds.value;
   },
-  onChange: (selectedRowKeys: string[], _selectedRows: any[]) => {
+  onChange: (selectedRowKeys) => {
     selectedIds.value = selectedRowKeys;
     emits("select", selectedRowKeys);
   },
@@ -92,93 +98,23 @@ const exportForm = reactive({
 });
 
 let searchQuery = {};
+let tableRequestId = 0;
 
-const renderTableColumns = (tableColumns: TableColumn[]) => {
-  const returnColumns: any = [];
-  for (const [index, renderItem] of tableColumns.entries()) {
-    if (renderItem.type == "operate") {
-      if (!renderItem.width) {
-        renderItem.width = renderItem.operateButtons.length * 60;
-      }
-
-      if (editColumns.length > 0) {
-        renderItem.width += 110;
-      }
-      renderItem.align = "center";
-    }
-
-    // 处理默认字段
-    if (!_.isEmpty(renderItem.default)) {
-      renderItem.customRender = ({ text, record }) => {
-        return h("span", text || renderItem.default);
-      };
-    }
-
-    // 解析json字段
-    if (renderItem.key && renderItem.key.includes(".")) {
-      renderItem.customRender = ({ text, record }) => {
-        return h("span", _.get(record, renderItem.key!.split(".")));
-      };
-    }
-
-    if (renderItem.type == "pic") {
-      renderItem.customRender = ({ text, record }) => {
-        const key = renderItem.key;
-        let pics = key.includes(".") ? _.get(record, key.split(".")) : _.get(record, key);
-        if (_.isEmpty(pics)) return h("span", "暂无");
-        pics = _.isArray(pics) ? pics : [pics];
-        const format_pics: any = [];
-        for (const pic_item of pics) {
-          if (!pic_item.includes("http") && renderItem.showOssUrlFunc) {
-            format_pics.push(renderItem.showOssUrlFunc(pic_item));
-          } else {
-            format_pics.push(pic_item);
-          }
-        }
-
-        return h(
-          "a",
-          {
-            onClick: () => {
-              viewerApi({ images: format_pics });
-            },
-          },
-          h("img", {
-            src: format_pics[0],
-            style: {
-              width: (renderItem.picWidth || 60) + "px",
-              height: (renderItem.picHeight || 60) + "px",
-              marginLeft: "10px",
-            },
-          }),
-        );
-      };
-    }
-
-    // 处理MAP字段
-    if (renderItem.mapPath) {
-      const mapInfoStr: any = localStorage.getItem("map");
-      const mapInfo = JSON.parse(mapInfoStr);
-      const mapItem = _.get(mapInfo, renderItem.mapPath);
-      renderItem.customRender = ({ text, record }) => {
-        return h("span", mapItem[text]);
-      };
-    }
-
-    if (renderItem.type == "date") {
-      renderItem.customRender = ({ text, record }) => {
-        return h("span", dayjs(text).format(renderItem.format || "YYYY-MM-DD HH:mm:ss"));
-      };
-    }
-
-    renderItem["dataIndex"] = renderItem["key"];
-    returnColumns.push(renderItem);
+const mapInfo = computed(() => {
+  try {
+    return JSON.parse(localStorage.getItem("map") || "{}");
+  } catch (error) {
+    return {};
   }
+});
 
-  return returnColumns;
-};
-
-const columns = renderTableColumns(tableColumns);
+const columns = computed(() =>
+  buildTableColumns(tableColumns, {
+    editColumns,
+    mapInfo: mapInfo.value,
+    openImageViewer: (images) => viewerApi({ images }),
+  }),
+);
 
 const getAllExportColumns = () => {
   return tableColumns.filter((item) => item.type !== "operate" && !!item.key);
@@ -213,42 +149,6 @@ 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;
@@ -256,7 +156,7 @@ const downloadXlsx = (rows: any[], exportColumns: TableColumn[]) => {
   });
 
   const dataRows = rows.map((row: any) => {
-    return exportColumns.map((col: any) => getCellValue(row, col));
+    return exportColumns.map((col: any) => getTableCellValue(row, col, mapInfo.value));
   });
 
   const worksheet = XLSX.utils.aoa_to_sheet([headers, ...dataRows]);
@@ -368,23 +268,26 @@ const confirmExport = async () => {
 };
 
 const renderTableData = async () => {
+  const requestId = ++tableRequestId;
   loading.value = true;
-  if (getData) {
-    const _searchInitFormData = initSearchFormData ? JSON.parse(JSON.stringify(initSearchFormData)) : {};
-    const _pageQuery = JSON.parse(JSON.stringify(pageQuery));
-    const _tableData = await getData({ ..._searchInitFormData, ..._pageQuery, ..._.cloneDeep(searchQuery) });
-    tableData.data = _tableData.data;
-    tableData.count = _tableData.count;
-    tableData.pages = _tableData.pages;
-  } else if (data) {
-    tableData.data = data;
+  try {
+    if (getData) {
+      const _searchInitFormData = initSearchFormData ? JSON.parse(JSON.stringify(initSearchFormData)) : {};
+      const _pageQuery = JSON.parse(JSON.stringify(pageQuery));
+      const _tableData = await getData({ ..._searchInitFormData, ..._pageQuery, ..._.cloneDeep(searchQuery) });
+      if (requestId !== tableRequestId) return;
+      tableData.data = _tableData.data;
+      tableData.count = _tableData.count;
+      tableData.pages = _tableData.pages;
+    } else if (data) {
+      tableData.data = data;
+      tableData.count = data.length;
+    }
+  } finally {
+    if (requestId === tableRequestId) {
+      loading.value = false;
+    }
   }
-
-  tableData.data.forEach((item, index) => {
-    item["index"] = index;
-  });
-
-  loading.value = false;
 };
 
 const refresh = () => {
@@ -441,16 +344,20 @@ const getTableData = () => {
   return toRaw(tableData)["data"];
 };
 
-const edit = (index: string) => {
-  editableData[index] = _.cloneDeep(tableData.data[index]);
+const getRowEditKey = (record: any, index: number) => record?.id ?? index;
+
+const edit = (record: any, index: number) => {
+  editableData[getRowEditKey(record, index)] = _.cloneDeep(record);
 };
-const save = (key: string) => {
-  Object.assign(tableData.data.filter((item) => key === item.key)[0], editableData[key]);
+
+const save = (record: any, index: number) => {
+  const key = getRowEditKey(record, index);
+  Object.assign(record, editableData[key]);
   delete editableData[key];
 };
 
-const cancel = (key: string) => {
-  delete editableData[key];
+const cancel = (record: any, index: number) => {
+  delete editableData[getRowEditKey(record, index)];
 };
 
 onMounted(() => {
@@ -514,8 +421,8 @@ defineExpose({
       <template v-if="editColumns.includes(column.key as string)">
         <div>
           <a-textarea
-            v-if="editableData[record.index]"
-            v-model:value="editableData[record.index][column.key]"
+            v-if="editableData[getRowEditKey(record, index)]"
+            v-model:value="editableData[getRowEditKey(record, index)][column.key]"
             style="margin: -5px 0"
             :auto-size="true"
           />
@@ -536,9 +443,9 @@ defineExpose({
               {{ 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[getRowEditKey(record, index)]" @click="save(record, index)">保存</a>
+          <a class="operate-a" v-if="editableData[getRowEditKey(record, index)]" @click="cancel(record, index)">退出</a>
+          <a v-if="editColumns.length > 0" class="operate-a" @click="edit(record, index)">编辑</a>
         </div>
       </template>
 

package/dist/components/p-table/table-utils.ts

@@ -0,0 +1,115 @@
+import { h } from "vue";
+import dayjs from "dayjs";
+import type { TableColumn } from "./index.d";
+import * as _ from "../../utils/dataUtils";
+
+type BuildTableColumnOptions = {
+  editColumns?: string[];
+  mapInfo?: any;
+  openImageViewer?: (images: string[]) => void;
+};
+
+export const getColumnValue = (record: any, key?: string) => {
+  if (!key) return undefined;
+  return key.includes(".") ? _.get(record, key.split(".")) : _.get(record, key);
+};
+
+export const getCellValue = (record: any, column: TableColumn, mapInfo: any = {}) => {
+  const key = column.key || "";
+  let value = getColumnValue(record, key);
+
+  if (column.mapPath) {
+    const mapItem = _.get(mapInfo || {}, column.mapPath) || {};
+    value = mapItem[value] ?? 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];
+    return 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 ?? "";
+};
+
+export const buildTableColumns = (tableColumns: TableColumn[], options: BuildTableColumnOptions = {}) => {
+  const { editColumns = [], mapInfo = {}, openImageViewer } = options;
+
+  return tableColumns.map((column) => {
+    const renderItem: any = { ...column };
+
+    if (renderItem.type === "operate") {
+      renderItem.width = renderItem.width || renderItem.operateButtons.length * 60;
+
+      if (editColumns.length > 0) {
+        renderItem.width += 110;
+      }
+
+      renderItem.align = "center";
+    }
+
+    if (!_.isEmpty(renderItem.default)) {
+      renderItem.customRender = ({ text }: any) => h("span", text || renderItem.default);
+    }
+
+    if (renderItem.key && renderItem.key.includes(".")) {
+      renderItem.customRender = ({ record }: any) => h("span", getColumnValue(record, renderItem.key));
+    }
+
+    if (renderItem.type === "pic") {
+      renderItem.customRender = ({ record }: any) => {
+        let pics = getColumnValue(record, renderItem.key);
+        if (_.isEmpty(pics)) return h("span", "暂无");
+
+        pics = _.isArray(pics) ? pics : [pics];
+        const formatPics = pics.map((picItem: string) => {
+          if (!picItem.includes("http") && renderItem.showOssUrlFunc) {
+            return renderItem.showOssUrlFunc(picItem);
+          }
+
+          return picItem;
+        });
+
+        return h(
+          "a",
+          {
+            onClick: () => openImageViewer?.(formatPics),
+          },
+          h("img", {
+            src: formatPics[0],
+            style: {
+              width: `${renderItem.picWidth || 60}px`,
+              height: `${renderItem.picHeight || 60}px`,
+              marginLeft: "10px",
+            },
+          }),
+        );
+      };
+    }
+
+    if (renderItem.mapPath) {
+      const mapItem = _.get(mapInfo || {}, renderItem.mapPath) || {};
+      renderItem.customRender = ({ text }: any) => h("span", mapItem[text] ?? text ?? "");
+    }
+
+    if (renderItem.type === "date") {
+      renderItem.customRender = ({ text }: any) =>
+        h("span", text ? dayjs(text).format(renderItem.format || "YYYY-MM-DD HH:mm:ss") : "");
+    }
+
+    renderItem.dataIndex = renderItem.key;
+    return renderItem;
+  });
+};

package/dist/env.d.ts

@@ -0,0 +1,6 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
+  export default component;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-pc-ui",
-  "version": "1.3.13",
+  "version": "1.3.14",
   "module": "dist/index.ts",
   "main": "dist/index.ts",
   "files": [