p-pc-ui 1.3.12 → 1.3.14

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

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,22 +51,26 @@ 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)
 })
 
 
 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);
+    }
 }
 
 
@@ -77,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(() => {
@@ -474,8 +381,8 @@ defineExpose({
       layout="inline"
     >
       <template v-slot: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>
+        <a-button type="primary" @click="searchClick" style="margin-left: 20px"> 搜索 </a-button>
+        <a-button style="margin-left: 10px" @click="resetSearch"> 重置 </a-button>
       </template>
     </PForm>
   </div>
@@ -485,7 +392,7 @@ defineExpose({
     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>
+    <a-button v-if="enableExport" type="primary" @click="openExportModal">导出Excel</a-button>
   </div>
 
   <a-table
@@ -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"
           />
@@ -532,16 +439,13 @@ 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)" @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>
+          <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,7 +1,6 @@
 {
   "name": "p-pc-ui",
-  "version": "1.3.12",
-  "type": "module",
+  "version": "1.3.14",
   "module": "dist/index.ts",
   "main": "dist/index.ts",
   "files": [