@jari-ace/element-plus-component 0.6.3 → 0.6.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jari-ace/element-plus-component",
   "private": false,
-  "version": "0.6.3",
+  "version": "0.6.5",
   "main": "lib/index.umd.cjs",
   "module": "lib/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
     "pretty-bytes": "^7.1.0",
     "vue-pdf-embed": "^2.1.3",
     "vue-router": "^5.0.1",
-    "@jari-ace/app-bolts": "0.7.11"
+    "@jari-ace/app-bolts": "0.7.12"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",

package/packages/components/upload/JaUploader.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {inject, ref, watch, computed} from "vue";
-import {getValue, setValue} from "../../utils/objectUtils";
+import type { ValidationInstance } from '../../hooks/useBackendValidations'
+import { inject, ref, watch, computed } from "vue";
+import { getValue, setValue } from "../../utils/objectUtils";
 import Uploader from "./uploader.vue";
 
 export interface JaUploaderProps {
-/**
-     * 应用名
-     */
+    /**
+         * 应用名
+         */
     serviceName: string,
     /**
      * 附件配置key
@@ -36,15 +36,15 @@ export interface JaUploaderProps {
     /**
      * 是否允许下载，为空表示采用应用里的附件设置
      */
-    allowDownload?: boolean,
+    allowDownload?: boolean | null,
     /**
      * 是否允许删除，为空表示采用应用里的附件设置
      */
-    allowDelete?: boolean,
+    allowDelete?: boolean | null,
     /**
      * 是否允许预览，为空表示采用应用里的附件设置
      */
-    allowPreview?: boolean,
+    allowPreview?: boolean | null,
     /**
      * 布局方式: list-列表布局(默认), inline-行内布局
      */
@@ -52,10 +52,17 @@ export interface JaUploaderProps {
     /**
      * 是否隐藏下载所有按钮
      */
-    hideDownloadAll?: boolean
+    hideDownloadAll?: boolean | null
 }
 
-const props = defineProps<JaUploaderProps>();
+const props = withDefaults(defineProps<JaUploaderProps>(), {
+    layout: 'list',
+    allowUpload: undefined,
+    allowDownload: undefined,
+    allowDelete: undefined,
+    allowPreview: undefined,
+    hideDownloadAll: false
+});
 const input = ref<InstanceType<typeof Uploader>>()
 const model = inject('aceFormModel') as Record<string, any>
 const prop = inject('aceFormItemProp') as string
@@ -85,22 +92,10 @@ defineExpose({
 </script>
 
 <template>
-<uploader :service-name="serviceName"
-          :max-height="maxHeight" 
-          :height="height" 
-          :config-key="configKey"
-          :attach-token="attachToken" 
-          :classification-level="classificationLevel"
-          :allow-delete="allowDelete"
-          :allow-download="allowDownload"
-          :allow-preview="allowPreview"
-          :layout="layout"
-          :hide-download-all="hideDownloadAll"
-          :allow-upload="allowUpload"
-          v-model="mv"
-          @change="onChange"></uploader>
+    <uploader :service-name="serviceName" :max-height="maxHeight" :height="height" :config-key="configKey"
+        :attach-token="attachToken" :classification-level="classificationLevel" :allow-delete="allowDelete"
+        :allow-download="allowDownload" :allow-preview="allowPreview" :layout="layout"
+        :hide-download-all="hideDownloadAll" :allow-upload="allowUpload" v-model="mv" @change="onChange"></uploader>
 </template>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

package/packages/components/upload/uploader.vue

@@ -76,19 +76,19 @@ const props = withDefaults(defineProps<{
     /**
      * 是否允许上传, 为空表示采用应用里的附件设置
      */
-    allowUpload?: boolean,
+    allowUpload?: boolean | null,
     /**
      * 是否允许下载，为空表示采用应用里的附件设置
      */
-    allowDownload?: boolean,
+    allowDownload?: boolean | null,
     /**
      * 是否允许删除，为空表示采用应用里的附件设置
      */
-    allowDelete?: boolean,
+    allowDelete?: boolean | null,
     /**
      * 是否允许预览，为空表示采用应用里的附件设置
      */
-    allowPreview?: boolean,
+    allowPreview?: boolean | null,
     /**
      * 布局方式: list-列表布局(默认), inline-行内布局
      */
@@ -96,7 +96,7 @@ const props = withDefaults(defineProps<{
     /**
      * 是否隐藏下载所有按钮
      */
-    hideDownloadAll?: boolean
+    hideDownloadAll?: boolean | null
 }>(), {
     layout: 'list',
     allowUpload: undefined,
@@ -235,7 +235,7 @@ function createUppyInstance() {
     });
 
     let urlPrefix = getUrlPrefix();
-    uppy.use(Tus, {        
+    uppy.use(Tus, {
         endpoint: new URL(urlPrefix + "/uploads", location.origin).toString(),
         withCredentials: true,
         retryDelays: undefined,
@@ -420,21 +420,61 @@ async function initNew() {
 }
 
 async function delUploadedFile(file: FileInfo) {
-    await api.deleteFile(file.token || file.id);
-    files.value = files.value.filter(f => f.id !== file.id);
-    emits('fileInfosChanged', files.value)
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let fileToken = file.token;
+        if (cfg.isPublic) {
+            const token = {
+                storageKey: file.storageKey,
+                directory: file.fileDir,
+                id: file.id
+            }
+            fileToken = btoa(JSON.stringify(token))
+        }
+        await api.deleteFile(fileToken);
+        files.value = files.value.filter(f => f.id !== file.id);
+        emits('fileInfosChanged', files.value);
+    } else {
+        ElMessageBox.alert("无法删除文件“" + file.fileName + "”", "错误");
+    }
 }
 
-function previewFile(fileToken: string) {
-    pdfSrc.value = new URL(getUrlPrefix() + "/uploads/preview/" + fileToken, location.origin).toString()
-    pdfViewerVisible.value = true;
+function previewFile(file: FileInfo) {
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let fileToken = file.token;
+        if (cfg.isPublic) {
+            const token = {
+                storageKey: file.storageKey,
+                directory: file.fileDir,
+                id: file.id
+            }
+            fileToken = btoa(JSON.stringify(token))
+        }
+        pdfSrc.value = new URL(getUrlPrefix() + "/uploads/preview/" + fileToken, location.origin).toString()
+        pdfViewerVisible.value = true;
+    } else {
+        ElMessageBox.alert("无法预览文件”" + file.fileName + "”", "错误");
+    }
 }
 
-async function downloadFile(fileToken: string) {
-    await api.downloadFile(fileToken);
-    var file = files.value.filter(f => fileToken === f.token)
-    if (file && file.length > 0)
-        emits('downloaded', file[0]);
+async function downloadFile(file: FileInfo) {
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let fileToken = file.token;
+        if (cfg.isPublic) {
+            const token = {
+                storageKey: file.storageKey,
+                directory: file.fileDir,
+                id: file.id
+            }
+            fileToken = btoa(JSON.stringify(token))
+        }
+        await api.downloadFile(fileToken);
+        emits('downloaded', file);
+    } else {
+        ElMessageBox.alert("无法下载文件“" + file.fileName + "”", "错误");
+    }
 }
 
 function viewUppyDashboard() {
@@ -455,7 +495,7 @@ async function downloadAll() {
 function checkAllowUpload() {
     console.log('ja-uploader 上传权限调试：')
     console.log('props.allowUpload = ', props.allowUpload)
-    if (props.allowUpload === false) return false;
+    if (props.allowUpload === false || props.allowUpload === true) return props.allowUpload;
     const cfg = uploadInitParams.value?.fileConfig;
     if (cfg) {
         let hasRole = true;
@@ -478,7 +518,7 @@ function checkAllowUpload() {
 function checkAllowDownload() {
     console.log('ja-uploader 下载权限调试：')
     console.log('props.allowDownload = ', props.allowDownload)
-    if (props.allowDownload === false) return false;
+    if (props.allowDownload === false || props.allowDownload === true) return props.allowDownload;
     const cfg = uploadInitParams.value?.fileConfig;
     if (cfg) {
         let hasRole = true;
@@ -500,7 +540,7 @@ function checkAllowDownload() {
 function checkAllowDelete() {
     console.log('ja-uploader 删除权限调试：')
     console.log('props.allowDelete = ', props.allowDelete)
-    if (props.allowDelete === false) return false;
+    if (props.allowDelete === false || props.allowDelete === true) return props.allowDelete;
     const cfg = uploadInitParams.value?.fileConfig;
     if (cfg) {
         let hasRole = true;
@@ -522,7 +562,7 @@ function checkAllowDelete() {
 function checkAllowPreview(file: FileInfo) {
     console.log('ja-uploader 预览权限调试：')
     console.log('props.allowPreview = ', props.allowPreview)
-    if (props.allowPreview === false) return false;
+    if (props.allowPreview === false || props.allowPreview === true) return props.allowPreview;
     const cfg = uploadInitParams.value?.fileConfig;
     if (cfg) {
         if (cfg.disablePreview) {
@@ -588,8 +628,8 @@ function getFileIcon(fileName: string) {
                 :disabled="loading" size="small" v-if="allowedClassificationLevels.length <= 1 && checkAllowUpload()">
                 上传{{ uploadInitParams?.fileConfig.enableClassifiedLevel ? "(非密)" : "" }}
             </el-button>
-            <el-button plain :icon="Download" @click="downloadAll" v-if="checkAllowDownload() && !hideDownloadAll" :loading="loading"
-                :disabled="loading || files?.length === 0" size="small">
+            <el-button plain :icon="Download" @click="downloadAll" v-if="checkAllowDownload() && !hideDownloadAll"
+                :loading="loading" :disabled="loading || files?.length === 0" size="small">
                 全部下载
             </el-button>
             <el-dropdown v-if="allowedClassificationLevels.length > 1 && checkAllowUpload()"
@@ -643,10 +683,10 @@ function getFileIcon(fileName: string) {
                                 </span>
                             </div>
                             <div class="popover-actions">
-                                <el-button link type="primary" @click="previewFile(file.token)"
+                                <el-button link type="primary" @click="previewFile(file)"
                                     v-if="checkAllowPreview(file)">预览
                                 </el-button>
-                                <el-button link type="primary" @click="downloadFile(file.token)"
+                                <el-button link type="primary" @click="downloadFile(file)"
                                     v-if="checkAllowDownload()">下载
                                 </el-button>
                                 <el-button link type="danger" @click="delUploadedFile(file)"
@@ -683,10 +723,9 @@ function getFileIcon(fileName: string) {
                         </el-tooltip>
                     </div>
                     <div class="file-actions">
-                        <el-button link type="primary" @click="previewFile(file.token)"
-                            v-if="checkAllowPreview(file)">预览
+                        <el-button link type="primary" @click="previewFile(file)" v-if="checkAllowPreview(file)">预览
                         </el-button>
-                        <el-button link type="primary" @click="downloadFile(file.token)" v-if="checkAllowDownload()">下载
+                        <el-button link type="primary" @click="downloadFile(file)" v-if="checkAllowDownload()">下载
                         </el-button>
                         <el-button link type="danger" @click="delUploadedFile(file)" v-if="checkAllowDelete()">删除
                         </el-button>
@@ -698,7 +737,15 @@ function getFileIcon(fileName: string) {
     <pdf-viewer-modal :src="pdfSrc" v-model="pdfViewerVisible"></pdf-viewer-modal>
 </template>
 
-<style lang="scss" scoped>
+<style>
+/**
+ * Uppy Dashboard 全局样式
+ * 
+ * 必须使用非 scoped 样式，因为 Uppy Dashboard 通过 Portal 挂载到 document.body，
+ * 不在当前组件的 DOM 树中，scoped 样式无法作用于它。
+ * 
+ * z-index 设置为 9999，确保显示在 Element Plus 的 el-dialog (默认 z-index: 2000+) 之上。
+ */
 .uppy-Dashboard--modal {
     z-index: 9999 !important;
 }
@@ -706,7 +753,9 @@ function getFileIcon(fileName: string) {
 .uppy-Root {
     z-index: 9999;
 }
+</style>
 
+<style lang="scss" scoped>
 .ja-uploader {
     width: 100%;
     display: flex;