@skyfox2000/webui 1.3.5 → 1.3.7

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

@@ -26,6 +26,10 @@ const props = defineProps<{
     * 是否显示在独立行
     */
    nextLine?: boolean;
+   /**
+    * 底部间距
+    */
+   bottomMargin?: string;
 }>();
 
 // 关闭自动继承属性到根元素
@@ -87,13 +91,13 @@ const required = computed(() => {
 // });
 </script>
 <template>
-   <div :class="['relative mb-1']">
+   <div :class="['relative', bottomMargin ? bottomMargin : 'mb-1']">
       <FormItem
          v-if="visible"
          :required="required"
          class="relative"
-         v-bind="attrs"
          :class="[nextLine ? 'mb-0' : rule ? '' : 'mb-3']"
+         v-bind="attrs"
       >
          <template #label>
             <span :class="[errInfo.errClass ? 'text-[#ff4d4f]' : '', 'w-full']"> {{ label }}</span>

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

@@ -11,9 +11,22 @@ const onBlur = () => {
    }
 };
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
    value?: any;
-}>();
+   /**
+    * 清空时设置的值
+    * -  false，则清空时设置为 null
+    * -  true，则清空时设置为 undefined
+    */
+   undefValue?: boolean;
+   }>(),
+   {
+      undefValue: false,
+   },
+);
+
+// 如果初始value为undefined，自动设置undefValue为true
+const undefValue = props.value === undefined ? true : props.undefValue;
 const emit = defineEmits(['update:value']);
 // 内部值，拦截外部传入的 value
 const innerValue = ref(props.value);
@@ -40,7 +53,7 @@ watch(
 
 const onClear = () => {
    if (innerValue.value === '') {
-      innerValue.value = undefined;
+      innerValue.value = undefValue ? undefined : null;
    }
 };
 </script>

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

@@ -43,7 +43,7 @@ const props = defineProps({
 
 const inputFactory = useInputFactory();
 const { editorCtrl, errInfo, labelText } = inputFactory;
-   
+
 const defaultCtrl = useOptionFactory(props.url, props);
 const optionCtrl = props.optionCtrl ?? defaultCtrl.optionCtrl;
 optionCtrl.inputFactory = shallowRef(inputFactory);
@@ -67,7 +67,7 @@ const placeholder = ref(attrs.placeholder);
 
 /// 避免类型错误
 const innerValue = ref<string | number | string[] | number[] | undefined>(optionCtrl?.selected.value || undefined);
-const emit = defineEmits(['change', 'update:value', 'update:labels']);
+const emit = defineEmits(['change', 'update:value', 'update:label', 'update:labels']);
 inputFactory.inputEmit = emit;
 
 /**
@@ -92,6 +92,7 @@ const onChanged = (value: any) => {
 
    innerValue.value = value;
    emit('update:labels', labels);
+   emit('update:label', labels.join(";"));
    emit('change', value);
 
    if (errInfo?.value.errClass && editorCtrl) {
@@ -160,15 +161,8 @@ onUnmounted(() => {
          <circleLoading class="text-[#555] mx-[5px] !ml-[10px] !w-4 !h-4" />
          <span>数据加载中...</span>
       </div>
-      <Select
-         :class="[errInfo?.errClass, 'w-full']"
-         v-model:value="innerValue"
-         :allow-clear="true"
-         @change="onChanged"
-         :placeholder="placeholder"
-         :label-in-value="false"
-         v-bind="attrs"
-      >
+      <Select :class="[errInfo?.errClass, 'w-full']" v-model:value="innerValue" :allow-clear="true" @change="onChanged"
+         :placeholder="placeholder" :label-in-value="false" v-bind="attrs">
          <template v-for="item in selectOptions" :key="item.value">
             <SelectOption :value="item.value" v-if="item.visible !== false">
                {{ item.label }}

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

@@ -16,10 +16,22 @@ const props = defineProps({
    },
    value: {
       type: [String, Number, Array] as PropType<SelectValue>,
-      required: true,
+      required: false,
+   },
+   /**
+    * 清空时设置的值
+    * -  false，则清空时设置为 null
+    * -  true，则清空时设置为 undefined
+    */
+   undefValue: {
+      type: Boolean,
+      default: false,
    },
 });
 
+// 如果初始value为undefined，自动设置undefValue为true
+const undefValue = props.value === undefined ? true : props.undefValue;
+
 const treeCtrl = props.treeCtrl;
 
 const inputFactory = useInputFactory();
@@ -32,13 +44,13 @@ inputFactory.inputEmit = emit;
 // 树选择数据
 const selectTreeData = ref<TreeNode[]>([]);
 // 当前选中值
-const currentValue = ref<SelectValue>();
+const currentValue = ref<SelectValue | null>();
 
 // 监听值变化
 watch(
    () => props.value,
    (newVal) => {
-      currentValue.value = newVal ?? null;
+      currentValue.value = newVal;
    },
    { immediate: true },
 );
@@ -59,7 +71,7 @@ const handleChange = (value: SelectValue) => {
    if (props.multiple) {
       currentValue.value = value ?? [];
    } else {
-      currentValue.value = value ?? '';
+      currentValue.value = value ?? undefValue ? undefined : null;
    }
    emit('change', currentValue.value);
    emit('update:value', currentValue.value);
@@ -82,22 +94,15 @@ onMounted(() => {
       queryTree(props.treeCtrl);
    }
 });
+const onClear = () => {
+   currentValue.value = undefValue ? undefined : null;
+};
 </script>
 
 <template>
-   <TreeSelect
-      :class="[errInfo?.errClass]"
-      tree-line
-      :multiple="multiple"
-      :tree-default-expanded-keys="['-']"
-      v-model:value="currentValue"
-      :tree-data="selectTreeData"
-      :placeholder="'请选择' + labelText"
-      :allow-clear="true"
-      class="w-full"
-      @change="handleChange"
-      v-bind="$attrs"
-   />
+   <TreeSelect :class="[errInfo?.errClass]" tree-line :multiple="multiple" :tree-default-expanded-keys="['-']"
+      v-model:value="currentValue" :tree-data="selectTreeData" :placeholder="'请选择' + labelText" class="w-full"
+      @change="handleChange" @clear="onClear" v-bind="$attrs" />
 </template>
 <style scoped>
 .error :deep(.ant-select-selector) {

package/src/components/index.ts

@@ -10,6 +10,7 @@ export {
    ProjectIcon,
    ToolIcon,
    Loading,
+   Alert,
 } from './common';
 
 // 内容组件

package/src/index.ts

@@ -228,6 +228,7 @@ export { usePageInfo } from '@/stores/pageInfo';
 export { useSettingInfo } from '@/stores/settingInfo';
 
 export {
+   Alert,
    Button,
    Tooltip,
    AppIcon,

package/src/typings/form.d.ts

@@ -1,4 +1,4 @@
-import { AnyData, IUrlInfo } from '@skyfox2000/fapi';
+import { AnyData, IUrlInfo, ReqParams } from '@skyfox2000/fapi';
 import { PageControl } from './page';
 import Validator, { RuleItem, ValidateError } from 'async-validator';
 import { Ref, DefineProps } from 'vue';
@@ -71,7 +71,7 @@ export type EditorControl<T> = EditorControlOption & {
     * @param editorCtrl 表单配置数据
     * @returns 是否保存
     */
-   beforeSave?: () => boolean | undefined;
+   beforeSave?: (params?: ReqParams) => boolean | undefined | void;
    /**
     * 表单保存后处理
     * @param editorCtrl 表单配置数据

package/src/utils/data.ts

@@ -3,12 +3,21 @@ import { ApiResponse, httpPost, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
 import message from 'vue-m-message';
 import { isEmpty } from './isEmpty';
 
+/**
+ * 合并URL信息
+ * - 使用控件的URL信息
+ * - 使用页面的URL信息
+ * - 单独配置项的URL信息
+ * @param control
+ * @param options
+ * @returns
+ */
 const combineUrl = (control: AnyControl, options: ExecuteOptions<any>) => {
    const pageCtrl = control.page;
    const url: IUrlInfo | undefined = {
       url: '',
-      ...pageCtrl.urls?.[options.urlKey],
       ...control.url,
+      ...pageCtrl.urls?.[options.urlKey],
       ...options.url,
       loadingText: options.loadingText,
    };

package/src/utils/excel-preview.ts

@@ -0,0 +1,189 @@
+/**
+ * Excel预览相关工具方法
+ * 处理Excel和CSV文件的预览功能
+ */
+
+import { csvToExcelView } from './excel-view';
+import { AnyData, ResStatus, IUrlInfo, httpGet, ApiResponse } from '@skyfox2000/fapi';
+import { doQuery } from '@/index';
+import message from 'vue-m-message';
+
+/**
+ * 判断是否为CSV格式的内容
+ * @param data 文件内容
+ * @returns 是否为CSV格式
+ */
+export const isCsvContent = (data: string): boolean => {
+   return data.includes(',') || data.includes('\n');
+};
+
+/**
+ * 判断是否为CSV类型
+ * @param type MIME类型
+ * @param filename 文件名
+ * @returns 是否为CSV类型
+ */
+export const isCsvType = (type?: string, filename?: string): boolean => {
+   return type === 'text/csv' || filename?.toLowerCase().includes('.csv') || false;
+};
+
+/**
+ * 判断是否为Excel类型
+ * @param type MIME类型
+ * @param filename 文件名
+ * @returns 是否为Excel类型
+ */
+export const isExcelType = (type?: string, filename?: string): boolean => {
+   return (
+      type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+      type === 'application/vnd.ms-excel' ||
+      filename?.toLowerCase().match(/\.(xlsx|xls)$/) !== null
+   );
+};
+
+/**
+ * CSV内容处理的公共方法
+ * @param content CSV内容
+ * @param filename 文件名
+ * @returns 处理结果
+ */
+export const processCsvContent = async (content: string, filename: string = 'preview.csv') => {
+   const csvResult = await csvToExcelView(content, filename);
+   if (csvResult.success) {
+      return {
+         success: true,
+         blobUrl: csvResult.blobUrl!,
+         fileName: csvResult.fileName!,
+      };
+   } else {
+      throw new Error(csvResult.error || 'CSV格式处理失败');
+   }
+};
+
+/**
+ * Excel内容处理的公共方法
+ * @param content Excel内容
+ * @param mimeType MIME类型
+ * @param filename 文件名
+ * @returns 处理结果
+ */
+export const processExcelContent = (content: string, mimeType?: string, filename: string = '预览文件.xlsx') => {
+   const type = mimeType || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+   return {
+      success: true,
+      blobUrl: `data:${type};base64,${content}`,
+      fileName: filename,
+   };
+};
+
+/**
+ * 处理文件数据的统一方法
+ * @param data 文件数据
+ * @param isRawMode 是否为原始模式
+ * @returns 处理结果
+ */
+export const handleFileData = async (data: any, isRawMode: boolean = false) => {
+   // 原始模式：直接处理文件内容
+   if (isRawMode) {
+      if (typeof data === 'string') {
+         if (isCsvContent(data)) {
+            return await processCsvContent(data);
+         } else {
+            return processExcelContent(data);
+         }
+      } else if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
+         const blob = new Blob([data], {
+            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+         });
+         return {
+            success: true,
+            blobUrl: URL.createObjectURL(blob),
+            fileName: '预览文件.xlsx',
+         };
+      } else {
+         throw new Error('不支持的原始文件格式');
+      }
+   }
+
+   // 标准模式：处理结构化数据
+   if (data.Content && data.Type) {
+      if (isCsvType(data.Type, data.FileName)) {
+         return await processCsvContent(data.Content, data.FileName || 'preview.csv');
+      } else if (isExcelType(data.Type, data.FileName)) {
+         return processExcelContent(data.Content, data.Type, data.FileName || '预览文件.xlsx');
+      } else {
+         return processExcelContent(data.Content);
+      }
+   } else if (data.url) {
+      return {
+         success: true,
+         blobUrl: data.url,
+         fileName: data.fileName || '预览文件.xlsx',
+      };
+   } else if (typeof data === 'string') {
+      return await processCsvContent(data);
+   } else {
+      throw new Error('不支持的文件格式');
+   }
+};
+
+/**
+ * 加载预览文件
+ * @param previewUrl 预览URL配置
+ * @param excelCtrl Excel控制器
+ * @returns 预览文件处理结果
+ */
+export const loadPreviewFile = async (
+   previewUrl: IUrlInfo,
+   excelCtrl: any,
+): Promise<{ success: boolean; blobUrl?: string; fileName?: string }> => {
+   if (!previewUrl || !excelCtrl) {
+      message.error('预览URL或Excel控制器未配置');
+      return { success: false };
+   }
+
+   try {
+      let result: ApiResponse<AnyData> | null = null;
+
+      // 根据请求方法选择不同的处理方式
+      if (previewUrl.method === 'GET') {
+         // 使用 httpGet 方法处理 GET 请求
+         const getUrl: IUrlInfo = {
+            ...previewUrl,
+            method: 'GET' as const,
+            api: previewUrl.api || excelCtrl.page.api,
+            authorize: previewUrl.authorize ?? excelCtrl.page.authorize,
+         };
+
+         result = await httpGet(getUrl);
+      } else {
+         // 使用 doQuery 处理 POST 请求
+         const queryParams = previewUrl.params;
+         result = await doQuery(excelCtrl, {
+            url: previewUrl,
+            urlKey: 'preview',
+            params: queryParams,
+            hideErrorToast: true,
+         });
+      }
+
+      // 原始模式下，result 就是原始数据，不是 ApiResponse 格式
+      if (previewUrl.raw) {
+         // 原始模式：直接处理返回的数据
+         return await handleFileData(result, true);
+      } else {
+         // 标准模式：检查 ApiResponse 格式
+         if (result?.status === ResStatus.SUCCESS && result.data) {
+            const data = result.data;
+            // 处理返回的文件数据
+            return await handleFileData(data, false);
+         } else {
+            throw new Error(result?.msg || '文件加载失败');
+         }
+      }
+   } catch (error: any) {
+      console.error('预览文件加载错误:', error);
+      message.error('文件加载失败：' + (error?.message || '未知错误'));
+      throw error;
+   }
+};

package/src/utils/file-upload.ts

@@ -148,7 +148,6 @@ export class AsyncUploader {
          // 等待所有上传任务完成
          await Promise.all(activeUploads);
       } catch (error) {
-         console.error('上传失败：', error);
          fileList.forEach((file) => {
             file.status = UploadStatus.Error;
             file.error = error instanceof Error ? error : new Error('上传失败');
@@ -179,7 +178,6 @@ export class AsyncUploader {
          });
       } catch (error) {
          file.error = error instanceof Error ? error : new Error('上传失败');
-         console.error(file.error);
       } finally {
          // 启动下一个上传任务
          if (pendingFiles.length > 0) {