@skyfox2000/webui 1.3.2 → 1.3.3

package/package.json

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

@@ -159,7 +159,6 @@ const queryOptions = <T>(
       ...rest,
    };
    optionUrl.loadingText = false;
-   console.log(optionUrl.fieldMap, params);
    if (!params) params = {};
    if (!params.Query) params.Query = {};
    optionCtrl.optionQuery = params;