@skyfox2000/webui 1.3.1 → 1.3.3

package/package.json

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

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

@@ -67,7 +67,7 @@ const curPageSize = ref(gridCtrl.pageSize.value);
 const curPageNo = ref(gridCtrl.pageNo.value);
 
 const dataList = ref<Record<string, AnyData>[]>([]);
-const pagination: Ref<TablePaginationConfig> = ref<TablePaginationConfig>({
+const pagination: Ref<false | TablePaginationConfig> = ref<false | TablePaginationConfig>({
    ...{
       total: 0,
       current: 1,
@@ -76,8 +76,10 @@ const pagination: Ref<TablePaginationConfig> = ref<TablePaginationConfig>({
          return `共 ${total} 条记录`;
       },
       onChange: (page: number, pageSize: number) => {
-         pagination.value.current = page;
-         pagination.value.pageSize = pageSize;
+         if (pagination.value !== false) {
+            pagination.value.current = page;
+            pagination.value.pageSize = pageSize;
+         }
          curPageSize.value = pageSize;
          curPageNo.value = page;
          if (gridCtrl) {
@@ -90,14 +92,20 @@ const pagination: Ref<TablePaginationConfig> = ref<TablePaginationConfig>({
    ...props.pagination,
 });
 
+if (props.pagination === false) {
+   pagination.value = false;
+}
+
 watch(
    () => gridCtrl.tableData.value,
    (newVal) => {
       if (newVal) {
          dataList.value = newVal;
-         pagination.value.total = gridCtrl.total.value ?? 0;
-         pagination.value.current = gridCtrl.pageNo.value ?? 1;
-         pagination.value.pageSize = gridCtrl.pageSize.value ?? 10;
+         if (pagination.value !== false) {
+            pagination.value.total = gridCtrl.total.value ?? 0;
+            pagination.value.current = gridCtrl.pageNo.value ?? 1;
+            pagination.value.pageSize = gridCtrl.pageSize.value ?? 10;
+         }
       }
    },
    { immediate: true },
@@ -108,9 +116,11 @@ watch(
    (newVal) => {
       if (newVal) {
          dataList.value = newVal;
-         pagination.value.total = newVal.length;
-         pagination.value.current = gridCtrl.pageNo.value ?? 1;
-         pagination.value.pageSize = gridCtrl.pageSize.value ?? 10;
+         if (pagination.value !== false) {
+            pagination.value.total = newVal.length;
+            pagination.value.current = gridCtrl.pageNo.value ?? 1;
+            pagination.value.pageSize = gridCtrl.pageSize.value ?? 10;
+         }
       }
    },
    { immediate: true },
@@ -162,7 +172,9 @@ onMounted(async () => {
    if (gridCtrl.tableData.value) {
       dataList.value = gridCtrl.tableData.value;
       gridCtrl.total.value = dataList.value.length;
-      pagination.value.total = gridCtrl.total.value ?? 0;
+      if (pagination.value !== false) {
+         pagination.value.total = gridCtrl.total.value ?? 0;
+      }
    } else if (gridCtrl.autoload !== false) {
       if (gridCtrl.remotePage) {
          dataList.value = (await gridQueryFind(gridCtrl)).rows;

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, useAttrs, watch, shallowRef  } from 'vue';
+import { ref, onUnmounted, useAttrs, watch, shallowRef, PropType } from 'vue';
 import { AutoComplete } from 'ant-design-vue';
 import {
    useInputFactory,
@@ -13,35 +13,23 @@ import {
    formValidate,
    outFormDataFields,
 } from '@/index';
-import { ReqParams, IUrlInfo } from '@skyfox2000/fapi';
+import { ReqParams } from '@skyfox2000/fapi';
 import { useOptionFactory } from '@/utils/page';
+import { combineParams } from '@skyfox2000/microbase';
 
 const props = defineProps({
    ...OptionCommProps,
    value: {
-      type: [String, Number, null, Array],
+      type: [String, Number, Array, null] as PropType<string | number | string[] | null>,
       default: undefined,
    },
-   /**
-    * 查询字段
-    * - 模糊查询
-    */
-   searchField: {
-      type: [String, Array<string>],
-   },
-   /**
-    * 自定义查询参数
-    * - 查询参数
-    * - query参数
-    */
-   onsearch: {
-      type: Function,
-   },
    /**
     * 修改输入数据则自动清空关联数据
+    * - FormData: 表单数据
+    * - outFields: 输出字段
     */
    autoClean: {
-      type: Boolean,
+      type: Boolean as PropType<boolean>,
       default: true,
    },
 });
@@ -56,14 +44,18 @@ const inputFactory = useInputFactory();
 const defaultCtrl = useOptionFactory(props.url, props);
 const optionCtrl = props.optionCtrl ?? defaultCtrl.optionCtrl;
 optionCtrl.inputFactory = shallowRef(inputFactory);
-
-const url = ref<IUrlInfo>({
-   ...optionCtrl?.url,
-   url: optionCtrl?.url?.url || '',
-   fieldMap: optionCtrl?.fieldMap || optionCtrl?.url?.fieldMap,
-   params: optionCtrl?.params || optionCtrl?.url?.params,
-   loadingText: false,
-});
+/***
+ * 默认字段映射
+ * - label: 显示字段 支持模板 ${}
+ * - value: 值字段
+ */
+optionCtrl.fieldMap = {
+   ...{
+      label: 'Name',
+      value: 'Id',
+   },
+   ...optionCtrl?.fieldMap,
+};
 
 /// 避免类型错误
 const innerValue = ref<SelectValue | undefined>(optionCtrl?.selected.value || undefined);
@@ -103,7 +95,7 @@ if (optionCtrl) {
       (newOptions) => {
          selectOptions.value = newOptions || [];
       },
-      { immediate: true, deep: true }
+      { immediate: true, deep: true },
    );
 }
 
@@ -112,29 +104,14 @@ const onSearch = (value: string) => {
    if (value === '') return;
    let search_value = value.trim();
    let query: ReqParams = {
-      ...url.value.params,
       Query: {
-         ...url.value.params?.Query,
+         SearchField: '%' + search_value + '%',
       },
    };
-   if (props.searchField) {
-      if (Array.isArray(props.searchField)) {
-         props.searchField.forEach((field) => {
-            query.Query![field] = {
-               $like: '%' + search_value + '%',
-            };
-         });
-      } else {
-         query.Query![props.searchField] = {
-            $like: '%' + search_value + '%',
-         };
-      }
-   }
-   if (props.onsearch) {
-      props.onsearch(search_value, query);
-   }
 
-   if (optionCtrl) loadOption(optionCtrl, props);
+   optionCtrl.params = combineParams(optionCtrl.params, query);
+
+   if (optionCtrl) loadOption(true, optionCtrl, props);
 };
 
 const onSelected = (value: any) => {
@@ -153,17 +130,6 @@ const onSelected = (value: any) => {
    }
 };
 
-onMounted(() => {
-   if (url.value && !url.value.fieldMap) {
-      url.value.fieldMap = {
-         title: 'Name',
-         label: 'Name',
-         value: 'Name',
-         key: 'Id',
-      };
-   }
-});
-
 onUnmounted(() => {
    if (optionCtrl) unloadOption(optionCtrl, props);
 });
@@ -173,13 +139,16 @@ onUnmounted(() => {
    <div>
       <AutoComplete
          v-model:value="innerValue"
-         :class="[errInfo?.errClass, 'error w-full']"
+         :class="['w-full', errInfo?.errClass]"
          :options="selectOptions"
          @search="onSearch"
          @select="onSelected"
-         :placeholder="optionCtrl?.url?.loading ? '请输入并选择' + labelText : ''"
+         :placeholder="'请输入并选择' + labelText"
          v-bind="attrs"
       >
+         <template #option="{ label }">
+            {{ label }}
+         </template>
       </AutoComplete>
    </div>
 </template>

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

@@ -93,7 +93,7 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 
 onUnmounted(() => {

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

@@ -84,7 +84,7 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 onUnmounted(() => {
    if (optionCtrl) unloadOption(optionCtrl, props);

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

@@ -102,7 +102,7 @@ onMounted(() => {
          key: 'Id',
       };
    }
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 onUnmounted(() => {
    if (optionCtrl) unloadOption(optionCtrl, props);

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

@@ -135,14 +135,6 @@ watch(
    },
 );
 
-// watch(
-//    () => props.params,
-//    (newVal) => {
-//          loadOption(true, props, selectOptions, inputFactory, url.value, newVal);
-//    },
-//    { deep: true },
-// );
-
 onMounted(() => {
    if (url.value && !url.value.fieldMap) {
       url.value.fieldMap = {
@@ -154,7 +146,7 @@ onMounted(() => {
    if (props.dataKey) {
       const options = JSON.parse(JSON.stringify(OPTIONS.getOptions(props.dataKey)));
       selectOptions.value = options;
-   } else if (optionCtrl) loadOption(optionCtrl, props);
+   } else if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 
 onUnmounted(() => {

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

@@ -55,7 +55,7 @@ onMounted(() => {
       message.error('Switch组件必须有且只有两个选项');
       return;
    }
-   if (optionCtrl) loadOption(optionCtrl, props);
+   if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
 });
 
 onUnmounted(() => {

package/src/components/form/upload/uploadList.vue

@@ -4,7 +4,7 @@ import { computed, ref, watch } from 'vue';
 import message from 'vue-m-message';
 import type { UploadProps } from 'ant-design-vue';
 import { Upload, Progress, Tag, Popconfirm } from 'ant-design-vue';
-import { UploadFile, UploadStatus, donwloadFromMinio, path, Switch } from '@/index';
+import { UploadFile, UploadStatus, donwloadFromMinio, path, Switch, previewFromMinio } from '@/index';
 import { useInputFactory } from '@/utils/form-validate';
 import { IUrlInfo } from '@skyfox2000/fapi';
 
@@ -22,6 +22,10 @@ export interface UploadListProps {
     * 下载Url
     */
    downloadUrl?: IUrlInfo;
+   /**
+    * 预览Url
+    */
+   previewUrl?: IUrlInfo;
    /**
     * 文件列表
     */
@@ -168,12 +172,11 @@ watch(
 );
 
 const downloadFile = (index: number) => {
-   if (!props.downloadUrl) return;
    const minioFile = fileList.value[index].minioFile!;
    const url: IUrlInfo = {
-      api: props.downloadUrl.api,
-      authorize: props.downloadUrl.authorize,
-      url: props.downloadUrl.url,
+      api: props.downloadUrl!.api,
+      authorize: props.downloadUrl!.authorize,
+      url: props.downloadUrl!.url,
       params: {
          Query: {
             FileKey: minioFile.Key,
@@ -190,10 +193,21 @@ const onlineOrOffline = (file: UploadFile) => {
    }
 };
 
-// const previewFile = (index: number) => {
-//    const fileInfo = internalFileList.value[index].minioFile;
-//    console.log(fileInfo);
-// };
+const previewFile = (index: number) => {
+   const minioFile = fileList.value[index].minioFile!;
+   const url: IUrlInfo = {
+      api: props.previewUrl!.api,
+      authorize: props.previewUrl!.authorize,
+      url: props.previewUrl!.url,
+      params: {
+         Query: {
+            FileKey: minioFile.Key,
+         },
+      },
+   };
+
+   previewFromMinio(url, minioFile.FileName!);
+};
 
 const removeFile = (index: number) => {
    fileList.value.splice(index, 1);
@@ -322,7 +336,26 @@ const getStatus = (status?: UploadStatus) => {
                         >
                      </Tooltip>
                   </div>
-                  <!-- <span class="text-blue-500 hover:text-blue-700 mr-4" @click="previewFile(index)">预览</span> -->
+                  <div
+                     class="flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer"
+                     v-if="previewUrl && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)"
+                  >
+                     <Tooltip title="预览">
+                        <ToolIcon
+                           icon="icon-eye"
+                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:preview' }"
+                           clickable
+                           @click="previewFile(index)"
+                        />
+                        <span
+                           v-if="showActionText"
+                           class="mr-2 text-sm text-nowrap"
+                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:preview' }"
+                           @click="previewFile(index)"
+                           >预览</span
+                        >
+                     </Tooltip>
+                  </div>
                   <div class="flex items-center text-red-500 hover:text-red-700 cursor-pointer">
                      <Popconfirm
                         v-model:open="confirmOpen"
@@ -356,7 +389,13 @@ const getStatus = (status?: UploadStatus) => {
             </div>
 
             <!-- 上传进度条 -->
-            <div v-if="file.status !== UploadStatus.Online && file.status !== UploadStatus.Offline && file.status !== UploadStatus.Success">
+            <div
+               v-if="
+                  file.status !== UploadStatus.Online &&
+                  file.status !== UploadStatus.Offline &&
+                  file.status !== UploadStatus.Success
+               "
+            >
                <Progress :percent="file.percent" :stroke-width="2" :show-info="false" style="height: 2px"></Progress>
             </div>
          </div>

package/src/index.ts

@@ -129,7 +129,7 @@ export {
 } from '@/utils/options';
 
 // download 工具
-export { downloadBlob, donwloadFromMinio } from '@/utils/download';
+export { downloadBlob, donwloadFromMinio, previewFromMinio, CanPreviewFileExt } from '@/utils/download';
 
 // icon-loader 工具
 export {

package/src/typings/option.d.ts

@@ -179,11 +179,12 @@ export type OptionControl = OptionControlOption & {
     */
    optionQuery?: ReqParams;
    /**
-    * 当前数据
+    * 当前传入数据
     */
    data: ShallowRef<OptionItemProps[] | undefined>;
    /**
-    * 选项数据
+    * 实际选项数据
+    * - 已转换fieldMap
     */
    options: Ref<OptionItemProps[]>;
    /**

package/src/utils/download.ts

@@ -78,3 +78,34 @@ export const donwloadFromMinio = <T>(url: IUrlInfo, params?: ReqParams, pageCtrl
       message.error('文件下载失败，请稍后重试');
    }
 };
+
+export const CanPreviewFileExt = ['xlsx', 'xls', 'csv', 'txt'];
+
+export const previewFromMinio = (url: IUrlInfo, fileName: string, params?: ReqParams) => {
+   const fileExt = fileName.split('.').pop();
+   if (CanPreviewFileExt.includes(fileExt!)) {
+      console.log(url);
+   } else {
+      message.error('文件类型不支持预览');
+      return false;
+   }
+
+   const newParams = combineParams(url.params, params);
+   return httpPost(url, newParams).then((result: ApiResponse<any> | null) => {
+      if (result?.status === ResStatus.SUCCESS && result.data) {
+         const minioFile: MinioFile = result.data as unknown as MinioFile;
+         // 提取内容和文件名
+         const base64String = minioFile.Content!;
+
+         // 解码 Base64 字符串
+         const byteCharacters = atob(base64String);
+         const byteArrays = [];
+         for (let b = 0; b < byteCharacters.length; b++) {
+            byteArrays.push(byteCharacters.charCodeAt(b));
+         }
+      } else {
+         message.error('文件预览失败！');
+      }
+      return undefined;
+   });
+};

package/src/utils/options.ts

@@ -8,7 +8,7 @@ import {
    ReqParams,
    ResStatus,
 } from '@skyfox2000/fapi';
-import { inject, ref, Ref, watch } from 'vue';
+import { inject, ref, watch } from 'vue';
 import { OptionItemProps, SelectValue, OptionControl, OptionProps } from '@/typings/option.d';
 import { ProviderKeys } from '@/typings/page.d';
 import message from 'vue-m-message';
@@ -20,12 +20,12 @@ import { combineParams } from '@skyfox2000/microbase';
  * 自动初始化选择项
  * @param optionCtrl 选项控制器
  */
-export const loadOption = (optionCtrl: OptionControl, props?: OptionProps) => {
+export const loadOption = (load: boolean, optionCtrl: OptionControl, props?: OptionProps) => {
    if (optionCtrl.inputFactory && props?.reloadEvent) {
       const inputFactory = optionCtrl.inputFactory.value;
       /// 接收事件，联动显示或者重新加载数据
       inputFactory.reloadHandler = (_event: string, params: Record<string, AnyData> | AnyData[]) => {
-         optionEventHandler(optionCtrl.url!, optionCtrl, params, optionCtrl.options);
+         optionEventHandler(optionCtrl.url!, optionCtrl, params);
       };
       eventBus.on(props.reloadEvent, inputFactory.reloadHandler);
    }
@@ -35,13 +35,12 @@ export const loadOption = (optionCtrl: OptionControl, props?: OptionProps) => {
       watch(
          () => props.data,
          () => {
-            updateOptions(optionCtrl, props.data!, optionCtrl.options, true);
+            updateOptions(optionCtrl, props.data!, true);
          },
          { deep: true, immediate: true },
       );
    } else if (optionCtrl.url && optionCtrl.url.url) {
-      if (optionCtrl.autoload !== false)
-         doQueryOptions(optionCtrl.url, optionCtrl, optionCtrl.params ?? {}, optionCtrl.options);
+      if (load) doQueryOptions(optionCtrl.url, optionCtrl, optionCtrl.params ?? {});
    } else {
       const labelText = ref<string>(inject(ProviderKeys.LabelText, ''));
       message.error('`' + labelText.value + '` 未配置选项数据！', {
@@ -54,15 +53,9 @@ export const loadOption = (optionCtrl: OptionControl, props?: OptionProps) => {
  * 组件选项数据更新
  * @param optionCtrl 选项控制器
  * @param data 提供的下拉数据
- * @param options 实际选择项
  * @param mapping 是否需要转换字段
  */
-const updateOptions = (
-   optionCtrl: OptionControl,
-   data: Record<string, AnyData>[],
-   options: Ref<OptionItemProps[]>,
-   mapping: boolean,
-) => {
+const updateOptions = (optionCtrl: OptionControl, data: Record<string, AnyData>[], mapping: boolean) => {
    if (mapping) {
       // 转换字段
       const fieldMap = {
@@ -79,7 +72,7 @@ const updateOptions = (
       });
    }
 
-   options.value = data as OptionItemProps[];
+   optionCtrl.options.value = data as OptionItemProps[];
 };
 
 /**
@@ -93,14 +86,13 @@ const optionEventHandler = (
    url: IUrlInfo,
    optionCtrl: OptionControl,
    params_data: Record<string, AnyData> | AnyData[],
-   options: Ref<OptionItemProps[]>,
 ) => {
    if (Array.isArray(params_data)) {
       // 数据组仅用于联动显示
-      updateOptions(optionCtrl, params_data, options, true);
+      updateOptions(optionCtrl, params_data, true);
    } else {
       // 其它情况使用Query参数
-      doQueryOptions(url, optionCtrl, params_data, options);
+      doQueryOptions(url, optionCtrl, params_data);
    }
 };
 
@@ -118,21 +110,15 @@ export const unloadOption = (optionCtrl: OptionControl, props: OptionProps) => {
  * @param url 选项接口
  * @param optionCtrl 选项控制器
  * @param params 查询条件
- * @param options 实际选择项
  */
-const doQueryOptions = (
-   url: IUrlInfo,
-   optionCtrl: OptionControl,
-   params: ReqParams,
-   options: Ref<OptionItemProps[]>,
-) => {
+const doQueryOptions = (url: IUrlInfo, optionCtrl: OptionControl, params: ReqParams) => {
    const urlParams = JSON.parse(JSON.stringify(url.params ?? {}));
    const ctrlParams = JSON.parse(JSON.stringify(optionCtrl.params ?? {}));
    const newParams: ReqParams = combineParams(urlParams, ctrlParams, params);
    queryOptions(url, optionCtrl, optionCtrl.fieldMap, newParams).then((results) => {
       // 使用url，由request负责转换，无需再次map转换
       const data = results as OptionItemProps[];
-      updateOptions(optionCtrl, data, options, false);
+      updateOptions(optionCtrl, data, false);
    });
 };
 
@@ -164,8 +150,8 @@ const queryOptions = <T>(
       url: '',
       cacheTime: 60000,
       fieldMap: {
-         ...fieldMap,
          ...url.fieldMap,
+         ...fieldMap,
       },
    };
    const optionUrl = {
@@ -175,6 +161,7 @@ const queryOptions = <T>(
    optionUrl.loadingText = false;
    if (!params) params = {};
    if (!params.Query) params.Query = {};
+   optionCtrl.optionQuery = params;
    optionCtrl.isOptionLoading.value = true;
    return httpPost<T>(optionUrl, params)
       .then((result: ApiResponse<T> | null) => {
@@ -284,9 +271,11 @@ export const onOptionChanged = (
    if (inputFactory?.editorCtrl && inputFactory.errInfo?.value.errClass) {
       formValidate(inputFactory.editorCtrl);
    }
+   optionCtrl.selected.value = values as undefined | string | number | string[] | number[];
 
    // 获取选中的选项对象或对象数组
    const selectedValues = getSelectedValues(values, optionCtrl.options.value);
+   optionCtrl.selectedOptions.value = selectedValues as OptionItemProps[];
 
    // 如果配置了 formData 和 outFields，将选中的其它属性值映射到 formData 上
    if (props.formData && props.outFields) {

package/src/utils/page.ts

@@ -230,12 +230,12 @@ export const useOptionFactory = (url?: IUrlInfo, props?: OptionProps) => {
    const optionCtrl: OptionControl = {
       ...defaultOptions.OptionOption,
       url: url,
-      options: ref([]),
       reload: ref(false),
+      optionQuery: {},
       data: shallowRef([]),
       selected: ref([]),
       selectedOptions: ref([]),
-      optionQuery: {},
+      options: ref([]),
       isOptionLoading: ref(false),
    };
 
@@ -244,15 +244,50 @@ export const useOptionFactory = (url?: IUrlInfo, props?: OptionProps) => {
       () => optionCtrl.reload.value,
       (newVal) => {
          if (newVal) {
-            // 使用 nextTick 或 setTimeout 延迟重置值
             setTimeout(() => {
                optionCtrl.reload.value = false;
             }, 1);
-            loadOption(optionCtrl, props);
+            loadOption(true, optionCtrl, props);
          }
       },
    );
 
+   // // 为 optionCtrl 创建响应式的 params 监听
+   // // 使用 Proxy 来拦截 params 的设置，确保能够触发响应式更新
+   // const originalParams = optionCtrl.params;
+   // const paramsRef = ref(originalParams);
+
+   // // 使用 Object.defineProperty 来拦截 params 的赋值
+   // Object.defineProperty(optionCtrl, 'params', {
+   //    get() {
+   //       return paramsRef.value;
+   //    },
+   //    set(newParams) {
+   //       paramsRef.value = newParams;
+   //    },
+   //    enumerable: true,
+   //    configurable: true,
+   // });
+
+   // let isInitialized = false;
+
+   // // 监听params变化，自动重新加载数据
+   // watch(
+   //    () => paramsRef.value,
+   //    () => {
+   //       if (!isInitialized) {
+   //          isInitialized = true;
+   //          return;
+   //       }
+   //       // 确保有URL且params存在时才自动重新加载
+   //       // 避免重复加载，通过reload状态控制
+   //       if (!optionCtrl.reload.value) {
+   //          optionCtrl.reload.value = true;
+   //       }
+   //    },
+   //    { deep: true },
+   // );
+
    return {
       optionCtrl,
    };