@skyfox2000/webui 1.4.6 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.4.6",
+   "version": "1.4.8",
    "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/common/icon/helper.vue

@@ -2,11 +2,13 @@
 import { Popover } from 'ant-design-vue';
 import ToolIcon from './toolIcon.vue';
 import { useAttrs } from 'vue';
+import { TooltipPlacement } from 'ant-design-vue/es/tooltip';
 
 defineProps<{
    text?: string;
    maxWidth?: string;
    size?: number;
+   placement?: TooltipPlacement;
 }>();
 // 关闭自动继承属性到根元素
 defineOptions({
@@ -16,7 +18,7 @@ const attrs = useAttrs(); // 手动获取 $attrs
 </script>
 
 <template>
-   <Popover placement="topRight">
+   <Popover :placement="placement ?? 'topRight'">
       <template #content>
          <slot>
             <div class="text-[14px]" :class="[maxWidth]">

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

@@ -100,19 +100,21 @@ const doDialogClose = () => {
          <slot></slot>
       </div>
       <template #footer>
-         <Space>
-            <Button @click="doDialogClose" v-if="cancelText !== ''">
-               {{ cancelText ?? '取消' }}
-            </Button>
-            <Button @click="doDialogSaveAs" v-if="saveAsText !== '' && editorCtrl?.saveAsBtnVisible !== false"
-               type="primary" :loading="editorCtrl?.isFormSaving.value">
-               {{ saveAsText ?? '另存为' }}
-            </Button>
-            <Button @click="doDialogSave" v-if="saveText !== '' && editorCtrl?.saveBtnVisible !== false" type="primary"
-               :loading="editorCtrl?.isFormSaving.value">
-               {{ saveText ?? '保存' }}
-            </Button>
-         </Space>
+         <slot name="footer">
+            <Space>
+               <Button @click="doDialogClose" v-if="cancelText !== ''">
+                  {{ cancelText ?? '取消' }}
+               </Button>
+               <Button @click="doDialogSaveAs" v-if="saveAsText !== '' && editorCtrl?.saveAsBtnVisible !== false"
+                  type="primary" :loading="editorCtrl?.isFormSaving.value">
+                  {{ saveAsText ?? '另存为' }}
+               </Button>
+               <Button @click="doDialogSave" v-if="saveText !== '' && editorCtrl?.saveBtnVisible !== false"
+                  type="primary" :loading="editorCtrl?.isFormSaving.value">
+                  {{ saveText ?? '保存' }}
+               </Button>
+            </Space>
+         </slot>
       </template>
    </Modal>
 </template>

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/drawer/index.vue

@@ -74,65 +74,43 @@ const doDrawerClose = () => {
 };
 </script>
 <template>
-   <Drawer
-      v-model:open="open"
-      :get-container="false"
-      :closable="false"
-      :header-style="{
-         height: '40px',
-         padding: '10px 6px 10px 16px',
-         backgroundColor: token.colorBgLayout,
-      }"
-      :body-style="{
-         padding: '10px 16px',
-      }"
-      :footer-style="{
-         textAlign: 'right',
-      }"
-      :style="{
+   <Drawer v-model:open="open" :get-container="false" :closable="false" :header-style="{
+      height: '40px',
+      padding: '10px 6px 10px 16px',
+      backgroundColor: token.colorBgLayout,
+   }" :body-style="{
+      padding: '10px 16px',
+   }" :footer-style="{
+      textAlign: 'right',
+   }" :style="{
          position: 'absolute',
          boxShadow: 'rgba(0, 0, 0, 0.3) -2px 0px 8px',
-      }"
-      width="420px"
-      @close="doDrawerClose"
-   >
+      }" width="420px" @close="doDrawerClose">
       <template #extra>
-         <div class="hover:bg-gray-200 w-[24px] h-[24px] rounded-md">
-            <ToolIcon
-               class="top-[-2px] left-[2px] w-6 h-6"
-               icon="icon-new"
-               :angle="45"
-               fontsize="24px"
-               clickable
-               color="#666"
-               :position="[0, 0]"
-               @click="doDrawerClose"
-            />
-         </div>
+         <slot name="extra">
+            <div class="hover:bg-gray-200 w-[24px] h-[24px] rounded-md">
+               <ToolIcon class="top-[-2px] left-[2px] w-6 h-6" icon="icon-new" :angle="45" fontsize="24px" clickable
+                  color="#666" :position="[0, 0]" @click="doDrawerClose" />
+            </div>
+         </slot>
       </template>
       <template #default>
          <slot></slot>
       </template>
       <template #footer>
-         <Space>
-            <Button @click="doDrawerClose" v-if="cancelText !== ''">{{ cancelText ?? '取消' }}</Button>
-            <Button
-               @click="doDrawerSaveAs"
-               v-if="saveAsText !== '' && editorCtrl.saveAsBtnVisible !== false"
-               type="primary"
-               :loading="editorCtrl.isFormSaving.value"
-            >
-               {{ saveAsText ?? '另存为' }}
-            </Button>
-            <Button
-               @click="doDrawerSave"
-               v-if="saveText !== '' && editorCtrl.saveBtnVisible !== false"
-               type="primary"
-               :loading="editorCtrl.isFormSaving.value"
-            >
-               {{ saveText ?? '保存' }}
-            </Button>
-         </Space>
+         <slot name="footer">
+            <Space>
+               <Button @click="doDrawerClose" v-if="cancelText !== ''">{{ cancelText ?? '取消' }}</Button>
+               <Button @click="doDrawerSaveAs" v-if="saveAsText !== '' && editorCtrl.saveAsBtnVisible !== false"
+                  type="primary" :loading="editorCtrl.isFormSaving.value">
+                  {{ saveAsText ?? '另存为' }}
+               </Button>
+               <Button @click="doDrawerSave" v-if="saveText !== '' && editorCtrl.saveBtnVisible !== false"
+                  type="primary" :loading="editorCtrl.isFormSaving.value">
+                  {{ saveText ?? '保存' }}
+               </Button>
+            </Space>
+         </slot>
       </template>
    </Drawer>
 </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/select/index.vue

@@ -89,7 +89,7 @@ const onChanged = (value: any) => {
    innerValue.value = value;
    emit('update:labels', labels);
    emit('update:label', labels.join(";"));
-   emit('change', value);
+   emit('change', value, selectedOptions);
 
    if (errInfo?.value.errClass && editorCtrl) {
       /// 重新开始验证