@skyfox2000/webui 1.3.4 → 1.3.5

package/package.json

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

package/src/components/common/loading/index.vue

@@ -4,7 +4,7 @@ import { useAttrs } from 'vue';
 const attrs = useAttrs()
 </script>
 <template>
-   <div class="absolute z-9999 w-full h-full top-0 flex flex-flow row items-center justify-center">
+   <div class="absolute z-[9999] w-full h-full top-0 flex flex-flow row items-center justify-center">
       <Spin style="margin-top: -10%" v-bind="attrs">
       </Spin>
    </div>

package/src/components/content/dialog/excelForm.vue

@@ -171,9 +171,9 @@ const duplicateUrl = ref(uploadParams.value?.duplicateUrl);
 const loadPreviewFile = async () => {
    if (!props.previewUrl || !excelCtrl) return;
 
+   excelCtrl.isFormLoading.value = true;
    try {
       let result: ApiResponse<AnyData> | null = null;
-      excelCtrl.isFormLoading.value = true;
 
       // 根据请求方法选择不同的处理方式
       if (props.previewUrl.method === 'GET') {
@@ -215,7 +215,9 @@ const loadPreviewFile = async () => {
       console.error('预览文件加载错误:', error);
       message.error('文件加载失败：' + (error?.message || '未知错误'));
    } finally {
-      excelCtrl.isFormLoading.value = false;
+      setTimeout(() => {
+         excelCtrl.isFormLoading.value = false;
+      }, 1000);
    }
 };
 
@@ -241,11 +243,10 @@ const processExcelContent = (content: string, mimeType?: string, filename: strin
 const isCsvContent = (data: string) => data.includes(',') || data.includes('\n');
 
 // 判断是否为CSV类型
-const isCsvType = (type?: string, filename?: string) => 
-   type === 'text/csv' || filename?.toLowerCase().includes('.csv');
+const isCsvType = (type?: string, filename?: string) => type === 'text/csv' || filename?.toLowerCase().includes('.csv');
 
-// 判断是否为Excel类型  
-const isExcelType = (type?: string, filename?: string) => 
+// 判断是否为Excel类型
+const isExcelType = (type?: string, filename?: string) =>
    type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    type === 'application/vnd.ms-excel' ||
    filename?.toLowerCase().match(/\.(xlsx|xls)$/);
@@ -656,9 +657,9 @@ const handleError = () => {
          </div>
       </div>
 
-      <div class="flex gap-4">
+      <div class="flex gap-4 relative">
          <!-- 左侧Excel显示区域 -->
-         <Loading v-if="excelCtrl.isFormLoading" />
+         <Loading size="large" v-if="excelCtrl.isFormLoading.value" />
          <div
             class="flex-shrink-0 relative border border-gray-200 rounded-md overflow-hidden"
             :class="[validationRules.length === 0 ? 'w-[100%]' : 'w-[80%]']"

package/src/components/content/table/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, Ref, ref, watch, provide, useAttrs, onActivated, computed } from 'vue';
-import { Table, TablePaginationConfig, TableProps } from 'ant-design-vue';
+import { Table, PaginationProps, TableProps } from 'ant-design-vue';
 import {
    AppRouter,
    gridQueryFind,
@@ -17,7 +17,7 @@ import Switch from '../../form/switch/index.vue';
 import { AnyData } from '@skyfox2000/fapi';
 import { ProviderKeys } from '@/index';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
    /**
     * 表格数据控制
     */
@@ -37,7 +37,7 @@ const props = defineProps<{
    /**
     * 自定义分页控制
     */
-   pagination?: TableProps['pagination'];
+   pagination?: false | PaginationProps;
    /**
     * 表格大小配置
     */
@@ -46,7 +46,10 @@ const props = defineProps<{
     * 是否禁用启用状态
     */
    statusDisabled?: Function;
-}>();
+}>(), {
+   pagination: undefined,
+});
+
 // 关闭自动继承属性到根元素
 defineOptions({
    inheritAttrs: false,
@@ -67,7 +70,7 @@ const curPageSize = ref(gridCtrl.pageSize.value);
 const curPageNo = ref(gridCtrl.pageNo.value);
 
 const dataList = ref<Record<string, AnyData>[]>([]);
-const pagination: Ref<false | TablePaginationConfig> = ref<false | TablePaginationConfig>({
+const pagination: Ref<false | PaginationProps> = ref<false | PaginationProps>({
    ...{
       total: 0,
       current: 1,
@@ -89,7 +92,7 @@ const pagination: Ref<false | TablePaginationConfig> = ref<false | TablePaginati
          }
       },
    },
-   ...props.pagination,
+   ...(props.pagination === false ? {} : props.pagination),
 });
 
 if (props.pagination === false) {

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onUnmounted, useAttrs, watch, shallowRef, PropType } from 'vue';
-import { AutoComplete } from 'ant-design-vue';
+import { AutoComplete, Input } from 'ant-design-vue';
 import {
    useInputFactory,
    OptionCommProps,
@@ -141,11 +141,12 @@ onUnmounted(() => {
          v-model:value="innerValue"
          :class="['w-full', errInfo?.errClass]"
          :options="selectOptions"
-         :placeholder="'请输入并选择' + labelText"
          @search="onSearch"
          @select="onSelected"
          v-bind="attrs"
+         :allow-clear="false"
       >
+         <Input allow-clear :placeholder="'请输入并选择' + labelText" />
          <template #option="{ label }">
             {{ label }}
          </template>
@@ -158,4 +159,9 @@ onUnmounted(() => {
    border-color: #ff4d4f80;
    box-shadow: 0 0 3px 0 #ff4d4f;
 }
-</style>
+
+:deep(input::-webkit-search-cancel-button),
+:deep(input::-webkit-clear-button) {
+   display: none !important;
+}
+</style>

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

@@ -8,6 +8,9 @@ import {
    loadOption,
    unloadOption,
    formValidate,
+   onOptionChanged,
+   getSelectedLabels,
+   SelectValue,
 } from '@/index';
 import { Cascader } from 'ant-design-vue';
 import { DefaultOptionType, ValueType } from 'ant-design-vue/es/vc-cascader/Cascader';
@@ -61,7 +64,7 @@ if (optionCtrl) {
       (newOptions) => {
          selectOptions.value = newOptions || [];
       },
-      { immediate: true, deep: true }
+      { immediate: true, deep: true },
    );
 }
 
@@ -71,13 +74,12 @@ const onChanged = (_: ValueType, selected: DefaultOptionType[]) => {
       emit('update:value', []);
       return;
    }
-   const labels: string[] = selected.map((item) => item.label!);
+   const values = selected.map((item) => item.value);
+   const selectedOptions = onOptionChanged(optionCtrl, props, values as unknown as SelectValue);
+   const labels: string[] = getSelectedLabels(selectedOptions);
 
    emit('update:labels', labels);
-   emit(
-      'update:value',
-      selected.map((item) => item.value),
-   );
+   emit('update:value', values); 
    if (errInfo?.value.errClass && editorCtrl) {
       /// 重新开始验证
       formValidate(editorCtrl);

package/src/typings/option.d.ts

@@ -100,8 +100,8 @@ export const OptionCommProps = {
    },
    /**
     * 输出字段转换控制
-    * - Key：目的字段
-    * - Value：源字段，支持模板 ${}
+    * - Key：目的字段，支持 "." 嵌套
+    * - Value：源字段，支持模板 ${} 或者 ${index} 或者 ${index}.${key}
     */
    outFields: {
       type: Object as PropType<Record<string, string>>,

package/src/utils/options.ts

@@ -179,25 +179,77 @@ const queryOptions = <T>(
 
 /**
  * 获取选中的选项对象或对象数组
+ * - 支持单选或者多选
+ * - 支持子级选项
  * @param values 当前选择的值
  * @param options 所有选项对象数组
+ * @param keepChildren 是否保留子选项，默认为 true
  * @returns 选中的选项对象或对象数组
  */
 export const getSelectedValues = (
    values: undefined | string | number | (string | number | undefined)[],
    options: OptionItemProps[],
+   keepChildren?: boolean,
 ): OptionItemProps | OptionItemProps[] | undefined => {
    // 如果 values 为 undefined，直接返回 undefined
    if (values === undefined) return undefined;
 
+   // 深拷贝选项以确保数据隔离
+   const deepCloneOption = (option: OptionItemProps): OptionItemProps => {
+      const cloned = { ...option };
+      if (keepChildren && option.children && option.children.length > 0) {
+         cloned.children = option.children.map((child: OptionItemProps) => deepCloneOption(child));
+      } else {
+         delete cloned.children;
+      }
+      return cloned;
+   };
+
+   // 递归查找匹配的选项
+   const findMatchedOptions = (
+      searchValues: (string | number | undefined)[],
+      searchOptions: OptionItemProps[],
+   ): OptionItemProps[] => {
+      const matched: OptionItemProps[] = [];
+
+      for (const option of searchOptions) {
+         // 检查当前选项是否匹配
+         if (searchValues.includes(option.value)) {
+            matched.push(deepCloneOption(option));
+         }
+
+         // 递归检查子选项
+         if (option.children && option.children.length > 0) {
+            const childMatched = findMatchedOptions(searchValues, option.children);
+            matched.push(...childMatched);
+         }
+      }
+
+      return matched;
+   };
+
    // 如果 values 是数组，返回所有匹配的选项对象数组
    if (Array.isArray(values)) {
-      return options.filter((option) => values.includes(option.value));
+      return findMatchedOptions(values, options);
    }
    // 如果 values 是单个值，返回匹配的单个选项对象
    else {
-      return options.find((option) => option.value === values);
+      const matched = findMatchedOptions([values], options);
+      return matched.length > 0 ? matched[0] : undefined;
+   }
+};
+
+/**
+ * 获取选中的选项文字内容
+ * @param selectedValues 选中的选项对象或对象数
+ * @returns 选中的选项文字内容
+ */
+export const getSelectedLabels = (selectedValues: OptionItemProps | OptionItemProps[] | undefined): string[] => {
+   if (selectedValues === undefined) return [];
+   if (Array.isArray(selectedValues)) {
+      return selectedValues.map((option) => option.label);
    }
+   return [selectedValues.label];
 };
 
 // 辅助函数：根据路径设置值
@@ -216,7 +268,10 @@ const setNestedValue = (obj: Record<string, any>, path: string, value: any) => {
 
 /**
  * 将选中的值根据 outFields 映射到 formData 上
- * @param formData 需要更新的数据对象
+ * @param formData 需要更新的数据对
+ * 输出字段转换控制
+ * - Key：目的字段，支持 "." 嵌套
+ * - Value：源字段，支持模板 ${} 或者 ${index} 或者 ${index}.${key}
  * @param outFields 输出字段转换映射关系
  * @param selectedValues 选中的选项对象或对象数组
  */
@@ -235,12 +290,28 @@ export const outFormDataFields = (
 
    // 如果 selectedValues 是数组
    if (Array.isArray(selectedValues)) {
-      // selectedValues.forEach((selectedValue) => {
-      //    Object.entries(outFields).forEach(([targetKey, sourceKey]) => {
-      //       const value = selectedValue[sourceKey];
-      //       setNestedValue(formData, targetKey, value);
-      //    });
-      // });
+      Object.entries(outFields).forEach(([targetKey, sourceKey]) => {
+         // 必须是 ${index} 或者 ${index}.${key}，否则输出错误并跳过
+         const reg = /^\$\{\d+\}/;
+         // 第一个必须是 ${index}，否则输出错误并跳过
+         if (reg.test(sourceKey)) {
+            try {
+               const index = parseInt(sourceKey.match(/\$\{(\d+)\}/)?.[1] ?? '0');
+               const targetValue = selectedValues[index];
+               const restKey = sourceKey.replace(/\$\{\d+\}\./, '');
+               if (restKey && targetValue) {
+                  const value = parseFieldTemplate(restKey, targetValue);
+                  setNestedValue(formData, targetKey, value);
+               } else {
+                  setNestedValue(formData, targetKey, targetValue);
+               }
+            } catch (error) {
+               console.error('outFields 格式错误：' + sourceKey, '必须是 ${index} 或者 ${index}.${key}');
+            }
+         } else {
+            console.error('outFields 格式错误：' + sourceKey, '必须是 ${index} 或者 ${index}.${key}');
+         }
+      });
    }
    // 如果 selectedValues 是单个对象
    else {
@@ -320,16 +391,3 @@ export const onOptionChanged = (
    }
    return selectedValues;
 };
-
-/**
- * 获取选中的选项文字内容
- * @param selectedValues 选中的选项对象或对象数
- * @returns 选中的选项文字内容
- */
-export const getSelectedLabels = (selectedValues: OptionItemProps | OptionItemProps[] | undefined): string[] => {
-   if (selectedValues === undefined) return [];
-   if (Array.isArray(selectedValues)) {
-      return selectedValues.map((option) => option.label);
-   }
-   return [selectedValues.label];
-};

package/src/utils/table.ts

@@ -25,8 +25,9 @@ interface TableColumn {
  */
 export const filterColumns = (columns: TableColumn[], toolCtl?: boolean) => {
    const userInfoStore = useUserInfo();
-
-   return columns.filter((column) => {
+   // 检查是否存在enabled:false的列
+   // 并且设置没有权限的列为enabled:false
+   const enabledColumns = columns.filter((column) => {
       // 角色权限检查
       if (column.role && !userInfoStore.hasRole(column.role)) {
          return false;
@@ -37,6 +38,18 @@ export const filterColumns = (columns: TableColumn[], toolCtl?: boolean) => {
          return false;
       }
 
+      if (column.enabled === false) {
+         return false;
+      }
+
+      if (typeof column.enabled === 'function') {
+         return column.enabled();
+      }
+
+      return true;
+   });
+
+   return enabledColumns.filter((column) => {
       if (!toolCtl) {
          // 可见性检查
          if (column.visible === false) {