@skyfox2000/webui 1.4.17 → 1.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.4.17",
+   "version": "1.4.19",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],

package/src/components/form/propEditor/index.vue

@@ -12,6 +12,10 @@ const props = defineProps<{
     * 配置项
     */
    selectList?: PropConfigItem[];
+   /**
+    * 忽略项
+    */
+   ignoreList?: string[];
    /**
     * 配置名宽度%
     */
@@ -56,11 +60,13 @@ const initConfigList = () => {
    } else {
       // 没有selectList的情况：基于value动态生成配置项
       if (props.value && Object.keys(props.value).length > 0) {
-         configList.value = Object.entries(props.value).map(([field, value]) => ({
-            id: Date.now() + Math.random(),
-            field,
-            value,
-         }));
+         configList.value = Object.entries(props.value)
+            .filter(([field]) => !props.ignoreList || !props.ignoreList.includes(field))
+            .map(([field, value]) => ({
+               id: Date.now() + Math.random(),
+               field,
+               value,
+            }));
       } else {
          // value为空时，初始化为空数组
          configList.value = [];
@@ -81,7 +87,7 @@ watch(
 
 const updateConfig = () => {
    let newConfig: Record<string, string>;
-   
+
    if (props.selectList && props.selectList.length > 0) {
       // 有selectList时，只更新selectList中定义的字段，保留其他字段不变
       newConfig = { ...props.value };
@@ -91,7 +97,7 @@ const updateConfig = () => {
          }
       });
    } else {
-      // 没有selectList时，更新所有字段
+      // 没有selectList时，更新所有字段，包括ignoreList中的字段
       newConfig = configList.value.reduce(
          (acc: Record<string, string>, item: PropConfigItem) => {
             if (item.field) {
@@ -101,8 +107,17 @@ const updateConfig = () => {
          },
          {} as Record<string, string>,
       );
+      
+      // 保留ignoreList中的字段
+      if (props.ignoreList && props.ignoreList.length > 0) {
+         props.ignoreList.forEach((field) => {
+            if (props.value[field] !== undefined) {
+               newConfig[field] = props.value[field];
+            }
+         });
+      }
    }
-   
+
    isInnerChange = true;
    emit('update:value', newConfig);
 };
@@ -124,15 +139,9 @@ const handleInputChange = () => {
    <div class="flex flex-col gap-2">
       <div v-for="item in configList" :key="item.id" class="flex items-center gap-2">
          <div :class="[fieldWidth ? `w-[${fieldWidth}%]` : 'w-[33%]']">
-            <Input
-               v-if="!selectList || selectList.length === 0"
-               v-model:value="item.field"
-               :title="item.text || item.field"
-               class="w-full"
-               :placeholder="item.text || labelHolder || '配置名'"
-               @input="handleInputChange"
-               :disabled="!addMore"
-            />
+            <Input v-if="!selectList || selectList.length === 0" v-model:value="item.field"
+               :title="item.text || item.field" class="w-full" :placeholder="item.text || labelHolder || '配置名'"
+               @input="handleInputChange" :disabled="!addMore" />
             <div v-else>
                <Input v-model:value="item.text" :title="item.text" :disabled="true" class="w-[100%]" />
                <Input type="hidden" v-model:value="item.field" />
@@ -140,20 +149,13 @@ const handleInputChange = () => {
          </div>
          <div class="w-[3%]">=</div>
          <div :class="[fieldWidth ? `w-[${97 - fieldWidth}%]` : 'w-[64%]']">
-            <Input
-               v-model:value="item.value"
-               :placeholder="valueHolder || '请输入' + item.text || '请输入配置值'"
-               @input="handleInputChange"
-               :title="item.value"
-            />
+            <Input v-model:value="item.value" :placeholder="valueHolder || '请输入' + item.text || '请输入配置值'"
+               @input="handleInputChange" :title="item.value" />
          </div>
       </div>
-      <Button
-         v-if="addMore"
-         @click="addNewLine"
+      <Button v-if="addMore" @click="addNewLine"
          class="mt-1 w-[80px] !text-[12px] text-[#666] bg-[#e6f7ff] border-[#b3e0ff] hover:bg-[#b3e0ff] hover:border-[#8abeff]"
-         size="small"
-      >
+         size="small">
          新增配置行
       </Button>
    </div>

package/src/utils/export-table.ts

@@ -11,13 +11,92 @@ import { LoginExpiredError, useUserInfo } from '@/stores/userInfo';
 // 表格列类型定义 (适配 ant-design-vue)
 export interface TableColumn {
    title: string;
-   dataIndex?: string;
+   dataIndex?: string | string[];
    key?: string;
    visible?: boolean; // 是否显示列
    export?: boolean; // 是否导出列
    customRender?: (options: { text: any; record: Record<string, any>; index: number; column: TableColumn }) => any;
 }
 
+/**
+ * 将 dataIndex 转换为字符串形式
+ * 如果是数组则转换为点号连接的字符串，否则直接返回原值或空字符串
+ * @param dataIndex 列的 dataIndex
+ */
+const toString = (dataIndex: string | string[] | undefined): string => {
+   if (!dataIndex) return '';
+   if (Array.isArray(dataIndex)) {
+      return dataIndex.join('.');
+   }
+   return dataIndex;
+};
+
+/**
+ * 准备 CSV 字段配置
+ * @param columns 需要导出的列配置
+ */
+const getFields = (columns: TableColumn[]) => {
+   return columns.map((col) => ({
+      label: col.title,
+      value: toString(col.dataIndex) || col.key || '',
+   }));
+};
+
+/**
+ * 处理数据行，应用自定义渲染
+ * @param data 原始数据
+ * @param columns 列配置
+ */
+const processData = <T extends Record<string, any>>(data: T[], columns: TableColumn[]) => {
+   return data.map((row, index) => {
+      const newRow: Record<string, any> = { ...row };
+
+      columns.forEach((col) => {
+         const field = toString(col.dataIndex) || col.key;
+         if (!field) return;
+
+         // 应用自定义渲染
+         if (col.customRender) {
+            newRow[field] = col.customRender({
+               text: row[field],
+               record: row,
+               index: index,
+               column: col,
+            });
+         }
+      });
+      return newRow;
+   });
+};
+
+/**
+ * 生成并下载 CSV 文件
+ * @param fileName 文件名
+ * @param fields CSV 字段配置
+ * @param data 处理后的数据
+ */
+const downloadCSV = async <T extends Record<string, any>>(
+   fileName: string,
+   fields: Array<{ label: string; value: string }>,
+   data: T[],
+) => {
+   try {
+      const mod = await import('@json2csv/plainjs');
+      const JSON2CSVParser = mod.Parser;
+      
+      // 生成 CSV 内容
+      const parser = new JSON2CSVParser({ fields });
+      const csvContent = parser.parse(data);
+
+      // 创建并下载文件
+      const blob = new Blob([`\uFEFF${csvContent}`], { type: 'text/csv' });
+      downloadBlob(blob, fileName);
+   } catch (error) {
+      console.error('导出失败:', error);
+      message.error('文件导出失败，请稍后重试');
+   }
+};
+
 /**
  * 导出选中行数据为 CSV 文件
  * @param fileName 文件名（支持 {YYYY}、{YY}、{MM}、{DD}、{HH}、{mm}、{ss} 时间格式）
@@ -30,8 +109,6 @@ export const exportSelectedRows = async <T extends Record<string, any>>(
    selectRows: T[],
 ) => {
    try {
-      const mod = await import('@json2csv/plainjs');
-      const JSON2CSVParser = mod.Parser;
       // 1. 处理文件名中的日期格式
       const processedFileName = formatFileName(fileName);
 
@@ -39,42 +116,15 @@ export const exportSelectedRows = async <T extends Record<string, any>>(
       const exportColumns = columns.filter((col) => col.visible !== false && col.export !== false);
 
       // 3. 准备 CSV 字段配置
-      const fields = exportColumns.map((col) => ({
-         label: col.title,
-         value: col.dataIndex || col.key || '',
-      }));
+      const fields = getFields(exportColumns);
 
       // 4. 处理数据行
-      const processedData = selectRows.map((row, index) => {
-         const newRow: Record<string, any> = { ...row };
-
-         exportColumns.forEach((col) => {
-            const field = col.dataIndex || col.key;
-            if (!field) return;
-
-            // 应用自定义渲染
-            if (col.customRender) {
-               newRow[field] = col.customRender({
-                  text: row[field],
-                  record: row,
-                  index: index,
-                  column: col,
-               });
-            }
-         });
-         return newRow;
-      });
-
-      // 5. 生成 CSV 内容
-      const parser = new JSON2CSVParser({ fields });
-      const csvContent = parser.parse(processedData);
+      const processedData = processData(selectRows, exportColumns);
 
-      // 6. 创建并下载文件
-      const blob = new Blob([`\uFEFF${csvContent}`], { type: 'text/csv' });
-      downloadBlob(blob, processedFileName);
+      // 5. 生成 CSV 内容并下载
+      await downloadCSV(processedFileName, fields, processedData);
    } catch (error) {
       console.error('导出失败:', error);
-      // throw new Error('文件导出失败，请稍后重试');
       message.error('文件导出失败，请稍后重试');
    }
 };
@@ -96,8 +146,6 @@ export const exportResults = async <T extends Record<string, any>>(
    url: IUrlInfo,
 ) => {
    try {
-      const mod = await import('@json2csv/plainjs');
-      const JSON2CSVParser = mod.Parser;
       // 1. 处理文件名中的日期格式
       const processedFileName = formatFileName(fileName);
 
@@ -105,10 +153,7 @@ export const exportResults = async <T extends Record<string, any>>(
       const exportColumns = columns.filter((col) => col.visible !== false);
 
       // 3. 准备 CSV 字段配置
-      const fields = exportColumns.map((col) => ({
-         label: col.title,
-         value: col.dataIndex || col.key || '',
-      }));
+      const fields = getFields(exportColumns);
 
       // 4. 获取数据
       let pageCtrl = gridCtrl.page;
@@ -118,39 +163,16 @@ export const exportResults = async <T extends Record<string, any>>(
       if (url.authorize === undefined) url.authorize = pageCtrl.authorize;
 
       gridCtrl.isGridLoading.value = true;
-      return httpPost<T>(url, newParams).then((result: ApiResponse<T> | null) => {
+      return httpPost<T>(url, newParams).then(async (result: ApiResponse<T> | null) => {
          gridCtrl.isGridLoading.value = false;
          if (result?.status === ResStatus.SUCCESS) {
             if (result.data) {
                // 5. 处理数据行
                let results = result.data as unknown as T[];
-               const processedData = results.map((row, index) => {
-                  const newRow: Record<string, any> = { ...row };
-
-                  exportColumns.forEach((col) => {
-                     const field = col.dataIndex || col.key;
-                     if (!field) return;
-
-                     // 应用自定义渲染
-                     if (col.customRender) {
-                        newRow[field] = col.customRender({
-                           text: row[field],
-                           record: row,
-                           index: index,
-                           column: col,
-                        });
-                     }
-                  });
-                  return newRow;
-               });
-
-               // 5. 生成 CSV 内容
-               const parser = new JSON2CSVParser({ fields });
-               const csvContent = parser.parse(processedData);
-
-               // 6. 创建并下载文件
-               const blob = new Blob([`\uFEFF${csvContent}`], { type: 'text/csv' });
-               downloadBlob(blob, processedFileName);
+               const processedData = processData(results, exportColumns);
+
+               // 6. 生成 CSV 内容并下载
+               await downloadCSV(processedFileName, fields, processedData);
             }
          } else if (result?.errno == LoginExpiredError) {
             const userInfoStore = useUserInfo();
@@ -161,10 +183,9 @@ export const exportResults = async <T extends Record<string, any>>(
       });
    } catch (error) {
       console.error('导出失败:', error);
-      // throw new Error('文件导出失败，请稍后重试');
       message.error('文件导出失败，请稍后重试');
    }
 };
 
 // 后端处理
-// 下载文件或二进制输出文件
+// 下载文件或二进制输出文件