@skyfox2000/webui 1.4.16 → 1.4.17

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.4.16",
+   "version": "1.4.17",
    "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

@@ -15,7 +15,7 @@ export interface TableColumn {
    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;
 }
 
 /**
@@ -45,7 +45,7 @@ export const exportSelectedRows = async <T extends Record<string, any>>(
       }));
 
       // 4. 处理数据行
-      const processedData = selectRows.map((row) => {
+      const processedData = selectRows.map((row, index) => {
          const newRow: Record<string, any> = { ...row };
 
          exportColumns.forEach((col) => {
@@ -54,7 +54,12 @@ export const exportSelectedRows = async <T extends Record<string, any>>(
 
             // 应用自定义渲染
             if (col.customRender) {
-               newRow[field] = col.customRender(row[field], row);
+               newRow[field] = col.customRender({
+                  text: row[field],
+                  record: row,
+                  index: index,
+                  column: col,
+               });
             }
          });
          return newRow;
@@ -119,7 +124,7 @@ export const exportResults = async <T extends Record<string, any>>(
             if (result.data) {
                // 5. 处理数据行
                let results = result.data as unknown as T[];
-               const processedData = results.map((row) => {
+               const processedData = results.map((row, index) => {
                   const newRow: Record<string, any> = { ...row };
 
                   exportColumns.forEach((col) => {
@@ -128,7 +133,12 @@ export const exportResults = async <T extends Record<string, any>>(
 
                      // 应用自定义渲染
                      if (col.customRender) {
-                        newRow[field] = col.customRender(row[field], row);
+                        newRow[field] = col.customRender({
+                           text: row[field],
+                           record: row,
+                           index: index,
+                           column: col,
+                        });
                      }
                   });
                   return newRow;

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>);
+};