@skyfox2000/webui 1.4.6 → 1.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.4.6",
+   "version": "1.4.7",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],
@@ -24,6 +24,12 @@
          "types": "./lib/*.d.ts"
       }
    },
+   "files": [
+      "lib",
+      "src",
+      "package.json",
+      "README.md"
+   ],
    "scripts": {
       "build": "pnpm i && vue-tsc -b && vite build",
       "build:dts": "vue-tsc -b && vite-dts-declaration",
@@ -65,4 +71,4 @@
       "vite-plugin-dts": "^4.5.4",
       "vue-tsc": "^2.2.0"
    }
-}
+}

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

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { watch, ref, onMounted, PropType } from 'vue';
+import { Button } from '../../common';
+import { Modal, Space } from 'ant-design-vue';
+import { doQuery, EditorControl, MinioFile, UploadFile, UploadStatus } from '@/index';
+import { AnyData, ApiResponse, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
+import UploadList from '../../form/upload/uploadList.vue';
+import { AsyncUploader } from '@/utils/file-upload';
+
+const props = defineProps({
+    /**
+     * 模板API域名配置
+     * 默认使用父级API
+     */
+    api: {
+        type: String as PropType<string>,
+        required: false,
+    },
+    /**
+     * 模板类别
+     */
+    templateType: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    /**
+     * 文件后缀限制
+     */
+    fileExt: {
+        type: Array as PropType<string[]>,
+        required: false,
+    },
+    /**
+     * 弹窗控制器
+     */
+    uploadForm: {
+        type: Object as PropType<EditorControl<AnyData>>,
+        required: true,
+    },
+    /**
+     * 文件列表地址
+     */
+    fileListUrl: {
+        type: Object as PropType<IUrlInfo>,
+        required: false,
+    },
+    /**
+     * 上传地址和参数
+     */
+    uploadUrl: {
+        type: Object as PropType<IUrlInfo>,
+        required: false,
+    },
+    /**
+     * 下载地址和参数
+     */
+    downloadUrl: {
+        type: Object as PropType<IUrlInfo>,
+        required: false,
+    },
+    /**
+     * 删除地址和参数
+     */
+    deleteUrl: {
+        type: Object as PropType<IUrlInfo>,
+        required: false,
+    },
+    /**
+     * 是否显示删除按钮
+     */
+    showDelete: {
+        type: Boolean as PropType<boolean>,
+        required: false,
+        default: true,
+    },
+    /**
+     * 最多上传文件数
+     */
+    maxCount: {
+        type: Number as PropType<number>,
+        required: false,
+    },
+});
+/**
+ * minio桶名称template
+ * 
+ * 子目录templateType
+ */
+const fileListUrl = ref(props.fileListUrl || {
+    api: props.api,
+    authorize: true,
+    url: '/api/TemplateFileSrv/list',
+});
+const uploadUrl = ref(props.uploadUrl || {
+    api: props.api,
+    authorize: true,
+    url: '/api/TemplateFileSrv/upload',
+});
+const downloadUrl = ref(props.downloadUrl || {
+    api: props.api,
+    authorize: true,
+    url: '/api/TemplateFileSrv/download',
+});
+const deleteUrl = ref(props.deleteUrl || {
+    api: props.api,
+    authorize: true,
+    url: '/api/TemplateFileSrv/delete',
+});
+
+const uploadFormCtrl = props.uploadForm;
+const open = ref<boolean>(false);
+
+const fileList = ref<UploadFile[]>([]);
+const emit = defineEmits<{
+    /**
+     * 显示预处理
+     */
+    'before:file-list': [EditorControl<AnyData>, UploadFile[]];
+    /**
+     * 上传前预处理
+     */
+    'before:upload': [UploadFile[]];
+    /**
+     * 上传结束，处理上传后的文件
+     */
+    'after:upload': [boolean, UploadFile[]];
+    /**
+     * 上传进度
+     */
+    'on:progress': [UploadFile];
+}>();
+
+watch(
+    () => uploadFormCtrl.visible.value,
+    () => {
+        open.value = uploadFormCtrl.visible.value;
+    },
+);
+
+
+/**
+ * 加载现有模板文件列表
+ */
+const loadFileList = async () => {
+    const res: ApiResponse<MinioFile[]> | null = await doQuery<MinioFile[]>(props.uploadForm, {
+        urlKey: 'list',
+        url: fileListUrl.value,
+        params: {
+            Query: {
+                PrefixPath: props.templateType,
+            }
+        },
+    });
+    if (res?.status === ResStatus.SUCCESS && res.data) {
+        const files = res.data as MinioFile[];
+        const list = files.map((file) => {
+            const uploadFile: UploadFile = {
+                uid: file.Key,
+                size: file.Size,
+                name: file.FileName!,
+                status: UploadStatus.Online,
+                lastModified: file.UpdateTime ? new Date(file.UpdateTime).getTime() : 0,
+                lastModifiedDate: file.UpdateTime ? new Date(file.UpdateTime) : new Date(),
+                params: {},
+                minioFile: file,
+            }
+            return uploadFile;
+        })
+        emit('before:file-list', uploadFormCtrl, list);
+        fileList.value.push(...list);
+    }
+};
+
+const dialogSave = async () => {
+    emit('before:upload', fileList.value);
+    const uploader = new AsyncUploader(uploadUrl.value, 3);
+    await uploader.doUpload(
+        fileList.value,
+        uploadFormCtrl.isFormLoading,
+        true,
+        async (result, files) => {
+            emit('after:upload', result, files);
+            if (result) {
+                uploadFormCtrl.visible.value = false;
+            }
+        },
+        (file) => {
+            emit('on:progress', file);
+        },
+    );
+};
+
+onMounted(() => {
+    if (!fileListUrl.value.api) {
+        fileListUrl.value.api = uploadFormCtrl.page.api;
+    }
+    if (!uploadUrl.value.api) {
+        uploadUrl.value.api = uploadFormCtrl.page.api;
+    }
+    if (!downloadUrl.value.api) {
+        downloadUrl.value.api = uploadFormCtrl.page.api;
+    }
+    if (!deleteUrl.value.api) {
+        deleteUrl.value.api = uploadFormCtrl.page.api;
+    }
+    loadFileList();
+
+    open.value = uploadFormCtrl.visible.value;
+});
+
+const dialogClose = () => {
+    uploadFormCtrl.visible.value = false;
+};
+</script>
+<template>
+    <Modal title="模板文件管理" v-model:open="open"
+        :wrapClassName="'modal mx-auto ' + ($attrs.width ? 'w-[' + $attrs.width + ']' : 'w-[500px]')"
+        @close="dialogClose">
+        <UploadList v-model:file-list="fileList" :parent-path="props.templateType" :upload-url="uploadUrl"
+            :download-url="downloadUrl" :delete-url="deleteUrl" :max-count="maxCount" :file-ext="fileExt"
+            :show-delete="showDelete" />
+        <template #footer>
+            <Space>
+                <Button @click="dialogClose">关闭</Button>
+                <Button @click="dialogSave" type="primary" :loading="uploadFormCtrl.isFormSaving.value"
+                    :disabled="fileList.length === 0">
+                    上传保存
+                </Button>
+            </Space>
+        </template>
+    </Modal>
+</template>
+<style>
+.modal {
+    .ant-modal-content {
+        padding: 16px;
+    }
+}
+
+.full-modal {
+    .ant-modal {
+        width: 100% !important;
+        max-width: 100%;
+        top: 0;
+        padding-bottom: 0;
+        margin: 0;
+    }
+
+    .ant-modal-content {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh);
+    }
+
+    .ant-modal-body {
+        flex: 1;
+    }
+}
+</style>

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

@@ -136,24 +136,16 @@ const dialogClose = () => {
 };
 </script>
 <template>
-   <Modal
-      title="文件上传"
-      v-model:open="open"
-      :wrapClassName="'modal mx-auto ' + ($attrs.width ? 'w-[' + $attrs.width + ']' : 'w-[430px]')"
-      @close="dialogClose"
-   >
-      <UploadList
-         v-model:file-list="fileList"
-         :upload-url="uploadUrl!"
-         :download-url="downloadUrl"
-         :max-count="maxCount"
-         :file-ext="fileExt"
-      />
+   <Modal title="文件上传" v-model:open="open"
+      :wrapClassName="'modal mx-auto ' + ($attrs.width ? 'w-[' + $attrs.width + ']' : 'w-[500px]')"
+      @close="dialogClose">
+      <UploadList v-model:file-list="fileList" :upload-url="uploadUrl!" :download-url="downloadUrl"
+         :max-count="maxCount" :file-ext="fileExt" />
       <template #footer>
          <Space>
             <Button @click="dialogClose">取消</Button>
             <Button @click="dialogSave" type="primary" :loading="uploadFormCtrl.isFormSaving.value">
-               上传文件并保存
+               上传保存
             </Button>
          </Space>
       </template>

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

@@ -3,9 +3,8 @@ import { onMounted, ref, useAttrs, watch } from 'vue';
 import { Tree } from 'ant-design-vue';
 import { ToolIcon } from '../../common';
 import { TreeControl, TreeNode, queryTree } from '@/index';
-import { TreeDataNode } from 'ant-design-vue/es/vc-tree-select/interface';
-import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
 import { fieldMapping } from '@skyfox2000/fapi';
+import { findNodeByKey, TreeNodeInfo } from '@/utils/tree';
 
 /**
  * 组件属性定义
@@ -31,6 +30,7 @@ const attrs = useAttrs();
 const treeCtrl = props.treeCtrl;
 // 树节点数据
 const treeData = ref<TreeNode[]>([]);
+// const treeRef = ref();
 
 // 监听树数据变化
 watch(
@@ -38,7 +38,26 @@ watch(
    (newVal) => {
       if (newVal) {
          treeData.value = treeCtrl.fieldMap ? fieldMapping(treeCtrl.fieldMap, newVal) : newVal;
-         handleSelect(props.selectedKeys ?? []);
+         // 获取当前选中的节点
+         const selectedNode = findNodeByKey(treeData.value, selectedKeys.value[0]);
+
+         if (selectedNode) {
+            // 构建info对象
+            const info: TreeNodeInfo = {
+               event: 'select',
+               node: {
+                  // 根据你的TreeNode结构构建node对象
+                  key: selectedNode.key,
+                  title: selectedNode.title,
+                  checked: true,
+                  dataRef: selectedNode
+               },
+               selected: true,
+               selectedNodes: [selectedNode]
+            };
+
+            handleSelect(selectedKeys.value, info);
+         }
       }
    },
 );
@@ -47,12 +66,7 @@ const emit = defineEmits<{
    (
       e: 'select',
       selectedKeys: (string | number)[],
-      info?: {
-         event: 'select';
-         node: EventDataNode;
-         selected: boolean;
-         selectedNodes: TreeDataNode[];
-      },
+      info?: TreeNodeInfo,
    ): void;
    (e: 'update:selectedKeys', value: (string | number)[]): void;
 }>();
@@ -81,12 +95,7 @@ watch(
 // 值变化事件
 const handleSelect = (
    keys: (string | number)[],
-   info?: {
-      event: 'select';
-      node: EventDataNode;
-      selected: boolean;
-      selectedNodes: TreeDataNode[];
-   },
+   info?: TreeNodeInfo,
 ) => {
    if (keys.length === 0) {
       keys.push(...selectedKeys.value);
@@ -118,16 +127,8 @@ onMounted(() => {
 </script>
 
 <template>
-   <Tree
-      class="w-full"
-      :show-line="true"
-      :tree-data="treeData"
-      v-model:expanded-keys="expandedKeys"
-      :selected-keys="selectedKeys"
-      :loading="treeCtrl.isTreeLoading"
-      @select="handleSelect"
-      v-bind="attrs"
-   >
+   <Tree class="w-full" :show-line="true" :tree-data="treeData" v-model:expanded-keys="expandedKeys"
+      :selected-keys="selectedKeys" :loading="treeCtrl.isTreeLoading" @select="handleSelect" v-bind="attrs">
       <template #title="{ key, label, icon }">
          <slot name="title" :label="label" :key="key" :icon="icon">
             <div class="flex items-center gap-1">

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

@@ -6,7 +6,7 @@ import type { UploadProps } from 'ant-design-vue';
 import { Upload, Progress, Tag, Popconfirm } from 'ant-design-vue';
 import { UploadFile, UploadStatus, donwloadFromMinio, path, Switch, previewFromMinio } from '@/index';
 import { useInputFactory } from '@/utils/form-validate';
-import { IUrlInfo } from '@skyfox2000/fapi';
+import { ApiResponse, httpPost, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
 
 export interface UploadListProps {
    /**
@@ -26,6 +26,10 @@ export interface UploadListProps {
     * 预览Url
     */
    previewUrl?: IUrlInfo;
+   /**
+    * 删除Url
+    */
+   deleteUrl?: IUrlInfo;
    /**
     * 文件列表
     */
@@ -70,6 +74,10 @@ export interface UploadListProps {
     * 是否显示上线或下线
     */
    showOnlineSwitch?: boolean;
+   /**
+    * 是否显示删除
+    */
+   showDelete?: boolean;
 }
 
 const props = withDefaults(defineProps<UploadListProps>(), {
@@ -83,6 +91,7 @@ const props = withDefaults(defineProps<UploadListProps>(), {
    fileExtTip: true,
    showActionText: true,
    showOnlineSwitch: false,
+   showDelete: true,
 });
 
 const inputFactory = useInputFactory();
@@ -210,7 +219,21 @@ const previewFile = (index: number) => {
 };
 
 const removeFile = (index: number) => {
-   fileList.value.splice(index, 1);
+   const file = fileList.value[index];
+   if (props.deleteUrl) {
+      httpPost<ApiResponse>(props.deleteUrl, {
+         Query: {
+            FileKey: file.minioFile!.Key,
+         },
+      }).then((res) => {
+         if (res && res.status === ResStatus.SUCCESS) {
+            message.success('删除文件成功！');
+            fileList.value.splice(index, 1);
+         }
+      });
+   } else {
+      fileList.value.splice(index, 1);
+   }
    confirmOpen.value = false;
 };
 
@@ -270,11 +293,8 @@ const getStatus = (status?: UploadStatus) => {
    <div class="w-full border border-solid border-gray-100 mt-1 rounded-md py-5" :class="[errInfo?.errClass]">
       <div class="flex items-center justify-between w-full">
          <div class="w-35 mx-3">
-            <Upload
-               ref="fileUploader"
-               v-bind="uploadProps"
-               v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }"
-            >
+            <Upload ref="fileUploader" v-bind="uploadProps"
+               v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }">
                <Button :class="[errInfo?.errClass + '-text']">选择文件</Button>
             </Upload>
          </div>
@@ -288,99 +308,57 @@ const getStatus = (status?: UploadStatus) => {
          <div v-for="(file, index) in fileList" :key="index" class="mb-2 pb-1">
             <div class="flex items-center justify-between">
                <div class="flex items-center">
-                  <span
-                     class="text-gray-700 mr-2"
-                     :class="[file.status == UploadStatus.Offline ? 'line-through' : '']"
-                     >{{ file.fileName ?? file.name }}</span
-                  >
+                  <span class="text-gray-700 mr-2"
+                     :class="[file.status == UploadStatus.Offline ? 'line-through' : '']">{{ file.fileName ?? file.name
+                     }}</span>
                   <span>
                      <Tag :color="getStatusColor(file.status)">{{ getStatus(file.status) }}</Tag>
                   </span>
                </div>
                <div class="flex items-center">
-                  <div
-                     class="mr-2"
-                     v-if="
-                        showOnlineSwitch && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)
-                     "
-                  >
+                  <div class="mr-2" v-if="
+                     showOnlineSwitch && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)
+                  ">
                      <Tooltip title="上线或下线">
-                        <Switch
-                           v-model:checked="file.status"
-                           :data="[
-                              { label: '上线', value: UploadStatus.Online },
-                              { label: '下线', value: UploadStatus.Offline },
-                           ]"
-                           @change="onlineOrOffline(file)"
-                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:online' }"
-                        />
+                        <Switch v-model:checked="file.status" :data="[
+                           { label: '上线', value: UploadStatus.Online },
+                           { label: '下线', value: UploadStatus.Offline },
+                        ]" @change="onlineOrOffline(file)"
+                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:online' }" />
                      </Tooltip>
                   </div>
-                  <div
-                     class="flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer"
-                     v-if="downloadUrl && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)"
-                  >
+                  <div class="flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer"
+                     v-if="downloadUrl && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)">
                      <Tooltip title="下载">
-                        <ToolIcon
-                           icon="icon-download"
-                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:download' }"
-                           clickable
-                           @click="downloadFile(index)"
-                        />
-                        <span
-                           v-if="showActionText"
-                           class="mr-2 text-sm text-nowrap"
+                        <ToolIcon icon="icon-download"
+                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:download' }" clickable
+                           @click="downloadFile(index)" />
+                        <span v-if="showActionText" class="mr-2 text-sm text-nowrap"
                            v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:download' }"
-                           @click="downloadFile(index)"
-                           >下载</span
-                        >
+                           @click="downloadFile(index)">下载</span>
                      </Tooltip>
                   </div>
-                  <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)"
-                  >
+                  <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"
+                        <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' }"
-                           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
-                        >
+                           @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"
-                        cancelText="否"
-                        okText="是"
-                        title="确定删除该文件吗？"
-                        :okButtonProps="{ size: 'small' }"
-                        :cancelButtonProps="{ size: 'small' }"
-                        @confirm="removeFile(index)"
-                        @cancel="confirmOpen = false"
-                     >
+                  <div v-if="showDelete !== false"
+                     class="flex items-center text-red-500 hover:text-red-700 cursor-pointer">
+                     <Popconfirm v-model:open="confirmOpen" cancelText="否" okText="是" title="确定删除该文件吗？"
+                        :okButtonProps="{ size: 'small' }" :cancelButtonProps="{ size: 'small' }"
+                        @confirm="removeFile(index)" @cancel="confirmOpen = false">
                         <Tooltip title="删除">
                            <div @click="confirmDelFile(index, file.status)">
-                              <ToolIcon
-                                 icon="icon-new"
-                                 :angle="45"
-                                 v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }"
-                                 clickable
-                              />
-                              <span
-                                 v-if="showActionText"
-                                 class="text-sm text-nowrap"
-                                 v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }"
-                                 >删除</span
-                              >
+                              <ToolIcon icon="icon-new" :angle="45"
+                                 v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }" clickable />
+                              <span v-if="showActionText" class="text-sm text-nowrap"
+                                 v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }">删除</span>
                            </div>
                         </Tooltip>
                      </Popconfirm>
@@ -389,13 +367,11 @@ 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>
@@ -408,6 +384,7 @@ const getStatus = (status?: UploadStatus) => {
    border-color: #ff4d4f80;
    box-shadow: 0 0 3px 0 #ff4d4f;
 }
+
 .error-text {
    color: #ff4d4f !important;
 }

package/src/utils/tree.ts

@@ -2,7 +2,15 @@ import { TreeControl, TreeNode } from '@/typings/tree.d';
 import { ApiResponse, ReqParams, ResStatus } from '@skyfox2000/fapi';
 import { doQuery } from './data';
 import { combineParams } from '@skyfox2000/microbase';
+import { TreeDataNode } from 'ant-design-vue/es/vc-tree-select/interface';
+import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
 
+export interface TreeNodeInfo {
+   event: 'select';
+   node: EventDataNode;
+   selected: boolean;
+   selectedNodes: TreeDataNode[];
+}
 /**
  * 树加载数据
  * @param treeCtrl 树控制对象
@@ -28,3 +36,15 @@ export const queryTree = (treeCtrl: TreeControl, params?: ReqParams): Promise<Tr
       return [];
    });
 };
+
+// 辅助函数：根据key查找节点
+export const findNodeByKey = (nodes: TreeNode[], key: string | number): TreeNode | null => {
+   for (const node of nodes) {
+      if (node.key === key) return node;
+      if (node.children) {
+         const found = findNodeByKey(node.children, key);
+         if (found) return found;
+      }
+   }
+   return null;
+};