@skyfox2000/webui 1.4.16 → 1.4.18

package/package.json

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

package/src/components/content/form/formItem.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { EditorControl, ProviderKeys, useFormItemFactory, ValidateRuleItem } from '@/index';
+import { EditorControl, ProviderKeys, useFormItemFactory } from '@/index';
 import { FormItem, message } from 'ant-design-vue';
 import { Helper } from '../../common';
 import { computed, inject, ref, useAttrs } from 'vue';
 import { AnyData } from '@skyfox2000/fapi';
+import { getRule } from '@/utils/form-validate';
 
 const props = defineProps<{
    /**
@@ -48,21 +49,6 @@ setTimeout(() => {
    visible.value = true;
 }, 30);
 
-/**
- * 递归获取规则
- * - async-validator的语法规范
- */
-const getRule = (rule: Array<string>, ruleObj: Record<string, any> | undefined): ValidateRuleItem | undefined => {
-   if (!ruleObj) {
-      return undefined;
-   }
-   const [key, ...rest] = rule;
-   if (rule.length === 1) {
-      return ruleObj[key];
-   }
-   if (!ruleObj[key]) return undefined;
-   return getRule(rest, ruleObj[key].fields as Record<string, any>);
-};
 /**
  * 是否必填
  * - 如果rule为空，则不显示必填标记

package/src/components/content/search/searchItem.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { inject, useAttrs } from 'vue';
+import { computed, inject, useAttrs } from 'vue';
 import { ProviderKeys, EditorControl, useFormItemFactory } from '@/index';
 import { FormItem } from 'ant-design-vue';
 import { AnyData } from '@skyfox2000/fapi';
+import { getRule } from '@/utils/form-validate';
+import message from 'vue-m-message';
 
 const props = defineProps<{
    /**
@@ -26,16 +28,38 @@ const attrs = useAttrs(); // 手动获取 $attrs
 
 const editorCtrl = inject(ProviderKeys.EditorControl, undefined) as EditorControl<AnyData> | undefined;
 const errInfo = useFormItemFactory(props, editorCtrl);
+
+/**
+ * 是否必填
+ * - 如果rule为空，则不显示必填标记
+ * - 如果rule不为空，则根据formRules中的required属性判断是否必填
+ */
+const required = computed(() => {
+   if (!props.rule) {
+      // 如果rule为空，则不显示必填标记
+      return false;
+   }
+   // 如果rule包含.，则表示是对象属性
+   const rule = getRule(props.rule.split('.'), editorCtrl?.formRules?.value);
+   if (!rule) {
+      message.error(`"${props.label}" 的验证规则 \`${props.rule}\` 不存在`);
+      errInfo.value.errClass = 'text-[#ff4d4f]';
+      errInfo.value.msg = `规则 \`${props.rule}\` 不存在，请检查代码！`;
+      return true;
+   }
+   if (!rule.required) {
+      // 如果rule.required为false，则表示该字段是可选字段，不需要验证
+      errInfo.value.errClass = '';
+      errInfo.value.msg = '';
+   }
+   return rule.required ?? true;
+});
+
 </script>
 <template>
    <div class="w-1/3 relative mb-1">
-      <FormItem
-         :required="rule !== undefined"
-         class="w-[90%] relative"
-         v-bind="attrs"
-         :class="[rule ? '' : 'mb-3', width]"
-         :labelCol="{ span: 6 }"
-      >
+      <FormItem :required="required" class="w-[90%] relative" v-bind="attrs" :class="[rule ? '' : 'mb-3', width]"
+         :labelCol="{ span: 6 }">
          <template #label v-if="label">
             <span :class="[errInfo.errClass ? 'text-[#ff4d4f]' : '', 'w-full']"> {{ label }}</span>
          </template>

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?: (value: any, record: Record<string, any>) => any;
+   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,37 +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) => {
-         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(row[field], row);
-            }
-         });
-         return newRow;
-      });
+      const processedData = processData(selectRows, exportColumns);
 
-      // 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);
+      // 5. 生成 CSV 内容并下载
+      await downloadCSV(processedFileName, fields, processedData);
    } catch (error) {
       console.error('导出失败:', error);
-      // throw new Error('文件导出失败，请稍后重试');
       message.error('文件导出失败，请稍后重试');
    }
 };
@@ -91,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);
 
@@ -100,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;
@@ -113,34 +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) => {
-                  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(row[field], row);
-                     }
-                  });
-                  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();
@@ -151,10 +183,9 @@ export const exportResults = async <T extends Record<string, any>>(
       });
    } catch (error) {
       console.error('导出失败:', error);
-      // throw new Error('文件导出失败，请稍后重试');
       message.error('文件导出失败，请稍后重试');
    }
 };
 
 // 后端处理
-// 下载文件或二进制输出文件
+// 下载文件或二进制输出文件

package/src/utils/form-validate.ts

@@ -1,6 +1,6 @@
 import { inject, toRaw, ref, provide, watch, Ref } from 'vue';
 import Validator from 'async-validator';
-import { EditorControl, InputFactoryItems, ValidateError, ValidateRule } from '@/typings/form.d';
+import { EditorControl, InputFactoryItems, ValidateError, ValidateRule, ValidateRuleItem } from '@/typings/form.d';
 import { ProviderKeys } from '@/typings/page.d';
 import { AnyData } from '@skyfox2000/fapi';
 import { isEmpty } from './isEmpty';
@@ -383,3 +383,22 @@ export const useFormItemFactory = (options: RuleFactoryOptions, editorCtrl?: Edi
    provide(ProviderKeys.ErrInfo, errInfo);
    return errInfo;
 };
+
+/**
+ * 递归获取规则
+ * - async-validator的语法规范
+ */
+export const getRule = (
+   rule: Array<string>,
+   ruleObj: Record<string, any> | undefined,
+): ValidateRuleItem | undefined => {
+   if (!ruleObj) {
+      return undefined;
+   }
+   const [key, ...rest] = rule;
+   if (rule.length === 1) {
+      return ruleObj[key];
+   }
+   if (!ruleObj[key]) return undefined;
+   return getRule(rest, ruleObj[key].fields as Record<string, any>);
+};