@truenewx/tnxvue3 2.6.0

package/src/element-plus/fss-upload/FssUpload.vue

@@ -0,0 +1,306 @@
+<template>
+    <tnxel-upload ref="upload"
+                  :app-name="appName"
+                  :action="action"
+                  :upload-options="uploadOptions"
+                  :file-list="fileList"
+                  :width="width" :height="height"
+                  :center="center"
+                  :trigger-icon="triggerIcon" :trigger-icon-size="triggerIconSize" :trigger-text="triggerText"
+                  :tip="tip"
+                  :show-file-list="showFileList"
+                  :data="params"
+                  :before-upload="beforeUpload"
+                  :on-upload="onUpload"
+                  :on-progress="onProgress"
+                  :on-success="_onSuccess"
+                  :on-error="onError"
+                  :on-removed="_onRemove"
+                  :handle-errors="handleErrors"
+                  :file-icon="fileIcon"
+                  :disabled="disabled">
+        <template #trigger v-if="$slots.trigger">
+            <slot name="trigger"></slot>
+        </template>
+    </tnxel-upload>
+</template>
+
+<script>
+import Upload from '../upload/Upload.vue';
+
+export default {
+    components: {
+        'tnxel-upload': Upload,
+    },
+    name: 'TnxelFssUpload',
+    props: {
+        modelValue: [String, Array],
+        type: {
+            type: String,
+            required: true,
+        },
+        scope: [Number, String],
+        width: {
+            type: [Number, String],
+        },
+        height: {
+            type: [Number, String],
+        },
+        triggerIcon: String,
+        triggerIconSize: Number,
+        triggerText: String,
+        center: Boolean,
+        tip: {
+            type: [Boolean, String, Function],
+            default() {
+                return true;
+            }
+        },
+        showFileList: {
+            type: Boolean,
+            default() {
+                return true;
+            }
+        },
+        extension: [String, Array], // 可接受的文件扩展名集合，最终实际生效的扩展名集合，是它与服务端上传配置中的扩展名限制集合的并集
+        beforeUpload: Function,
+        onUpload: Function,
+        onProgress: Function,
+        onSuccess: Function,
+        onError: Function,
+        onRemove: Function,
+        handleErrors: Function,
+        fileIcon: [String, Function],
+        disabled: Boolean,
+    },
+    emits: ['update:modelValue'],
+    data() {
+        const tnx = window.tnx;
+        return {
+            tnx: tnx,
+            appName: tnx.fss.appName,
+            action: tnx.fss.getUploadUrl(this.type, this.scope),
+            params: {},
+            uploadOptions: {},
+            fileList: [],
+        };
+    },
+    computed: {
+        uploadingFiles() {
+            return this.$refs.upload?.files || [];
+        },
+    },
+    watch: {
+        modelValue(newValue, oldValue) {
+            if (oldValue !== newValue && !this.equals(this.fileList, newValue)) {
+                this._initialize();
+            }
+        }
+    },
+    mounted() {
+        this._initialize();
+    },
+    methods: {
+        equals(fileList, locationUrls) {
+            if (!locationUrls) {
+                return !fileList.length;
+            }
+            if (!Array.isArray(locationUrls)) {
+                locationUrls = [locationUrls];
+            }
+            if (fileList.length !== locationUrls.length) {
+                return false;
+            }
+            // 每一个存储地址都必须在文件清单中找到对应文件
+            for (let locationUrl of locationUrls) {
+                if (!this.contains(fileList, locationUrl)) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        contains(fileList, locationUrl) {
+            for (let file of fileList) {
+                if (file.locationUrl === locationUrl) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        _initialize() {
+            const vm = this;
+            let fssConfig = vm.tnx.fss.getClientConfig();
+            vm.tnx.app.rpc.ensureLogined(function () {
+                let locationUrls;
+                if (vm.modelValue) {
+                    locationUrls = Array.isArray(vm.modelValue) ? vm.modelValue : [vm.modelValue];
+                } else {
+                    locationUrls = [];
+                }
+                if (locationUrls.length) {
+                    vm.tnx.app.rpc.get(fssConfig.contextUrl + '/metas', {
+                        locationUrls: locationUrls
+                    }, function (metas) {
+                        let fileList = [];
+                        metas.forEach(meta => {
+                            if (meta) {
+                                fileList.push({
+                                    name: meta.name,
+                                    url: vm._getFullReadUrl(meta.thumbnailReadUrl || meta.readUrl),
+                                    previewUrl: vm._getFullReadUrl(meta.readUrl),
+                                    locationUrl: meta.locationUrl,
+                                });
+                            }
+                        });
+                        vm.fileList = fileList;
+                        vm.$nextTick(function () {
+                            vm._loadUploadOptions();
+                        });
+                    }, {
+                        app: fssConfig.appName
+                    });
+                } else {
+                    vm.fileList = [];
+                    vm.$nextTick(function () {
+                        vm._loadUploadOptions();
+                    });
+                }
+            }, {
+                app: fssConfig.appName,
+                toLogin(loginFormUrl, originalUrl, originalMethod) {
+                    return true;
+                }
+            });
+        },
+        _loadUploadOptions() {
+            // 上传限制为空才执行加载，避免多次重复加载
+            if (Object.keys(this.uploadOptions).length === 0) {
+                let vm = this;
+                vm.tnx.fss.loadUploadOptions(this.type, function (uploadOptions) {
+                    if (vm.extension) {
+                        let extensions = Array.isArray(vm.extension) ? vm.extension : [vm.extension];
+                        let acceptedExtensions = [];
+                        if (uploadOptions.extensionsRejected) { // 服务端上传限制扩展名为排除模式
+                            for (let extension of extensions) {
+                                if (!uploadOptions.extensions.contains(extension)) { // 取未被排除的
+                                    acceptedExtensions.push(extension);
+                                }
+                            }
+                        } else { // 服务端上传限制扩展名为包含模式
+                            if (uploadOptions.extensions.length) {
+                                for (let extension of extensions) {
+                                    if (uploadOptions.extensions.contains(extension)) { // 取被包含的
+                                        acceptedExtensions.push(extension);
+                                    }
+                                }
+                            } else { // 未限制扩展名，则直接加入
+                                for (let extension of extensions) {
+                                    acceptedExtensions.push(extension);
+                                }
+                            }
+                        }
+                        if (acceptedExtensions.length) { // 接受的扩展名清单不为空，则替代服务端配置中的扩展名限制
+                            uploadOptions.extensionsRejected = false;
+                            uploadOptions.extensions = acceptedExtensions;
+                        }
+                    }
+                    vm.uploadOptions = uploadOptions;
+                });
+            }
+        },
+        _getFullReadUrl(readUrl) {
+            if (readUrl && readUrl.startsWith('//')) {
+                return window.location.protocol + readUrl;
+            }
+            return readUrl;
+        },
+        _onSuccess(result, file, fileList) {
+            if (result) {
+                file.locationUrl = result.locationUrl;
+                file.readUrl = result.readUrl;
+                file.downloadUrl = result.downloadUrl;
+                // 构建Upload组件用到的文件字段
+                file.url = result.readUrl;
+                file.previewUrl = (process.env.VUE_APP_API_BASE_URL + result.downloadUrl) || result.readUrl;
+
+                this.fileList = fileList;
+                this.emitInput();
+                if (this.onSuccess) {
+                    this.onSuccess(file);
+                }
+            }
+        },
+        _onRemove(file) {
+            for (let i = 0; i < this.fileList.length; i++) {
+                let _file = this.fileList[i];
+                if (_file.id === file.id) {
+                    this.fileList.splice(i, 1);
+                    break;
+                }
+            }
+            this.emitInput();
+            if (this.onRemove) {
+                this.onRemove(file);
+            }
+        },
+        emitInput() {
+            let locationUrls = [];
+            for (let file of this.fileList) {
+                if (file.locationUrl) {
+                    locationUrls.push(file.locationUrl);
+                } else { // 存在一个未完成上传，则退出
+                    return;
+                }
+            }
+            if (this.uploadOptions.number === 1) {
+                locationUrls = locationUrls[0];
+            }
+            this.$emit('update:modelValue', locationUrls);
+        },
+        size() {
+            return this.$refs.upload.size();
+        },
+        /**
+         * 校验上传是否已经全部完成
+         * @param reject 没有完成上传时的处理函数，传入文件对象参数
+         * @returns 文件存储路径或其数组，有上传未完成时返回false
+         */
+        validateUploaded(reject) {
+            if (this.uploadOptions.number > 1) {
+                const locationUrls = [];
+                for (let file of this.uploadingFiles) {
+                    if (file.locationUrl) {
+                        locationUrls.push(file.locationUrl);
+                    } else {
+                        this._doValidateUploadedReject(reject, file);
+                        return false;
+                    }
+                }
+                return locationUrls;
+            } else if (this.uploadingFiles.length) {
+                let file = this.uploadingFiles[0];
+                if (file) {
+                    if (file.locationUrl) {
+                        return file.locationUrl;
+                    } else {
+                        this._doValidateUploadedReject(reject, file);
+                        return false;
+                    }
+                }
+            }
+            return null;
+        },
+        _doValidateUploadedReject(reject, file) {
+            if (typeof reject === 'function') {
+                reject(file);
+            } else {
+                this.tnx.alert('文件"' + file.name + '"还未上传完毕，请稍候', function () {
+                    if (reject && typeof reject.disable === 'function') {
+                        reject.disable(false);
+                    }
+                });
+            }
+        },
+    }
+}
+</script>

package/src/element-plus/fss-view/FssView.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="tnxel-fss-view" v-if="meta.readUrl">
+        <span class="text-muted" v-if="denied">没有权限查看该文件</span>
+        <template v-else-if="thumbnailIconValue">
+            <tnxel-button type="primary" link :icon="thumbnailIconValue" :title="$attrs.title || meta.name"
+                          @click="toPreview"/>
+            <el-image-viewer :url-list="[previewUrl]" teleported @close="imagePreviewing = false"
+                             v-if="imagePreviewing"/>
+        </template>
+        <el-image :src="meta.thumbnailReadUrl" :preview-src-list="[meta.readUrl]" fit="contain" preview-teleported
+                  :style="{width: imageWidth, height: imageHeight}" v-else-if="imageable">
+            <template #error>
+                <div class="text-muted h-100 flex-center">
+                    <i class="el-icon-picture-outline"/>
+                </div>
+            </template>
+        </el-image>
+        <template v-else>
+            <a class="overflow-ellipsis" :href="downloadUrl" target="_blank" :title="'下载 ' + meta.name">
+                {{ meta.name }}
+            </a>
+            <a class="preview" :href="previewUrl" target="_blank" :title="'预览 ' + meta.name"
+               v-if="previewUrl">预览</a>
+        </template>
+    </div>
+</template>
+
+<script>
+import Button from '../button/Button.vue';
+
+const tnx = window.tnx;
+
+export default {
+    name: 'TnxelFssView',
+    components: {
+        'tnxel-button': Button,
+    },
+    props: {
+        url: String,
+        width: [String, Number],
+        height: [String, Number],
+        thumbnailIcon: { // 为Boolean时表示是否仅显示缩略图标，图标采用与扩展名匹配的图标，为String时仅显示指定图标
+            type: [Boolean, String],
+            default: false,
+        },
+    },
+    data() {
+        return {
+            meta: {
+                readUrl: null,
+                thumbnailReadUrl: null,
+                imageable: false,
+            },
+            denied: false,
+            imagePreviewing: false,
+        }
+    },
+    computed: {
+        extension() {
+            return tnx.util.net.getExtension(this.meta.readUrl);
+        },
+        imageable() {
+            return tnx.util.file.isImage(this.extension);
+        },
+        imageWidth() {
+            let size = this.meta.size;
+            let width = this.width || (size ? size.width : undefined);
+            if (typeof width === 'number') {
+                width += 'px';
+            }
+            return width;
+        },
+        imageHeight() {
+            let size = this.meta.size;
+            let height = this.height || (size ? size.height : undefined);
+            if (typeof height === 'number') {
+                height += 'px';
+            }
+            return height;
+        },
+        downloadUrl() {
+            return process.env.VUE_APP_API_BASE_URL + this.meta.downloadUrl;
+        },
+        previewUrl() {
+            if (this.imageable) {
+                return this.meta.readUrl; // 图片预览尽量使用第三方文件服务提供商地址
+            }
+            if (this.extension === 'pdf') { // pdf预览会打开新页面，故使用自有地址，尽量不暴露第三方文件服务提供商地址
+                return tnx.util.net.appendParams(this.downloadUrl, {
+                    inline: true,
+                });
+            }
+            return undefined;
+        },
+        thumbnailIconValue() {
+            if (this.thumbnailIcon) {
+                if (typeof this.thumbnailIcon === 'string') {
+                    return this.thumbnailIcon;
+                }
+                if (this.imageable) {
+                    return 'bi bi-file-earmark-image';
+                }
+                if (this.extension === 'pdf') {
+                    return 'bi bi-file-earmark-pdf';
+                }
+                return 'bi bi-file-earmark';
+            }
+            return undefined;
+        },
+    },
+    watch: {
+        url() {
+            this.load();
+        }
+    },
+    created() {
+        this.load();
+    },
+    methods: {
+        load() {
+            if (this.url && this.url.startsWith(window.tnx.fss.PROTOCOL)) {
+                let rpc = window.tnx.app.rpc;
+                let fssConfig = window.tnx.fss.getClientConfig();
+                let vm = this;
+                rpc.get(fssConfig.contextUrl + '/meta', {
+                    locationUrl: vm.url,
+                }, function (meta) {
+                    vm.meta = meta;
+                }, {
+                    app: fssConfig.appName,
+                    error(errors) {
+                        vm.denied = true;
+                        console.error(errors[0].message);
+                    }
+                });
+            }
+        },
+        toPreview() {
+            if (this.imageable) {
+                this.imagePreviewing = true;
+            } else {
+                tnx.util.bom.openUniquely(this.previewUrl);
+            }
+        },
+    }
+}
+</script>
+
+<style>
+.tnxel-fss-view {
+    display: flex;
+    align-items: center;
+}
+
+.is-center .tnxel-fss-view {
+    justify-content: center;
+}
+
+.tnxel-fss-view .preview {
+    margin-left: 0.75rem;
+    white-space: nowrap;
+}
+</style>

package/src/element-plus/icon/Icon.vue

@@ -0,0 +1,221 @@
+<template>
+    <el-icon :class="className" :color="color" :style="style">
+        <Loading v-if="value === 'Loading'"/>
+        <ArrowDown v-else-if="value === 'ArrowDown'"/>
+        <ArrowLeft v-else-if="value === 'ArrowLeft'"/>
+        <ArrowLeftBold v-else-if="value === 'ArrowLeftBold'"/>
+        <ArrowRight v-else-if="value === 'ArrowRight'"/>
+        <ArrowRightBold v-else-if="value === 'ArrowRightBold'"/>
+        <Bottom v-else-if="value === 'Bottom'"/>
+        <CaretBottom v-else-if="value === 'CaretBottom'"/>
+        <CaretTop v-else-if="value === 'CaretTop'"/>
+        <Check v-else-if="value === 'Check'"/>
+        <CircleCheck v-else-if="value === 'CircleCheck'"/>
+        <CircleCheckFilled v-else-if="value === 'CircleCheckFilled'"/>
+        <CircleClose v-else-if="value === 'CircleClose'"/>
+        <CircleCloseFilled v-else-if="value === 'CircleCloseFilled'"/>
+        <Close v-else-if="value === 'Close'"/>
+        <CloseBold v-else-if="value === 'CloseBold'"/>
+        <CopyDocument v-else-if="value === 'CopyDocument'"/>
+        <Delete v-else-if="value === 'Delete'"/>
+        <DeleteFilled v-else-if="value === 'DeleteFilled'"/>
+        <Document v-else-if="value === 'Document'"/>
+        <DocumentCopy v-else-if="value === 'DocumentCopy'"/>
+        <Download v-else-if="value === 'Download'"/>
+        <Edit v-else-if="value === 'Edit'"/>
+        <Folder v-else-if="value === 'Folder'"/>
+        <HomeFilled v-else-if="value === 'HomeFilled'"/>
+        <InfoFilled v-else-if="value === 'InfoFilled'"/>
+        <MoreFilled v-else-if="value === 'MoreFilled'"/>
+        <OfficeBuilding v-else-if="value === 'OfficeBuilding'"/>
+        <Picture v-else-if="value === 'Picture'"/>
+        <PictureFilled v-else-if="value === 'PictureFilled'"/>
+        <Plus v-else-if="value === 'Plus'"/>
+        <Pointer v-else-if="value === 'Pointer'"/>
+        <QuestionFilled v-else-if="value === 'QuestionFilled'"/>
+        <Rank v-else-if="value === 'Rank'"/>
+        <Refresh v-else-if="value === 'Refresh'"/>
+        <Remove v-else-if="value === 'Remove'"/>
+        <RemoveFilled v-else-if="value === 'RemoveFilled'"/>
+        <Right v-else-if="value === 'Right'"/>
+        <Search v-else-if="value === 'Search'"/>
+        <Select v-else-if="value === 'Select'"/>
+        <Setting v-else-if="value === 'Setting'"/>
+        <Sort v-else-if="value === 'Sort'"/>
+        <SuccessFilled v-else-if="value === 'SuccessFilled'"/>
+        <Switch v-else-if="value === 'Switch'"/>
+        <Top v-else-if="value === 'Top'"/>
+        <UserFilled v-else-if="value === 'UserFilled'"/>
+        <View v-else-if="value === 'View'"/>
+        <WarningFilled v-else-if="value === 'WarningFilled'"/>
+        <ZoomIn v-else-if="value === 'ZoomIn'"/>
+    </el-icon>
+</template>
+
+<script>
+import {
+    ArrowDown,
+    ArrowLeft,
+    ArrowLeftBold,
+    ArrowRight,
+    ArrowRightBold,
+    Bottom,
+    CaretBottom,
+    CaretTop,
+    Check,
+    CircleCheck,
+    CircleCheckFilled,
+    CircleClose,
+    CircleCloseFilled,
+    Close,
+    CloseBold,
+    CopyDocument,
+    Delete,
+    DeleteFilled,
+    Document,
+    DocumentCopy,
+    Download,
+    Edit,
+    Folder,
+    HomeFilled,
+    InfoFilled,
+    Loading,
+    MoreFilled,
+    OfficeBuilding,
+    Picture,
+    PictureFilled,
+    Plus,
+    Pointer,
+    QuestionFilled,
+    Rank,
+    Refresh,
+    Remove,
+    RemoveFilled,
+    Right,
+    Search,
+    Select,
+    Setting,
+    Sort,
+    SuccessFilled,
+    Switch,
+    Top,
+    UserFilled,
+    View,
+    WarningFilled,
+    ZoomIn,
+} from '@element-plus/icons-vue';
+
+const components = {
+    ArrowDown,
+    ArrowLeft,
+    ArrowLeftBold,
+    ArrowRight,
+    ArrowRightBold,
+    Bottom,
+    CaretBottom,
+    CaretTop,
+    Check,
+    CircleCheck,
+    CircleCheckFilled,
+    CircleClose,
+    CircleCloseFilled,
+    Close,
+    CloseBold,
+    CopyDocument,
+    Delete,
+    DeleteFilled,
+    Document,
+    DocumentCopy,
+    Download,
+    Edit,
+    Folder,
+    HomeFilled,
+    InfoFilled,
+    MoreFilled,
+    Loading,
+    OfficeBuilding,
+    Picture,
+    PictureFilled,
+    Plus,
+    Pointer,
+    QuestionFilled,
+    Rank,
+    Refresh,
+    Remove,
+    RemoveFilled,
+    Right,
+    Search,
+    Select,
+    Setting,
+    Sort,
+    SuccessFilled,
+    Switch,
+    Top,
+    UserFilled,
+    View,
+    WarningFilled,
+    ZoomIn,
+};
+
+export default {
+    name: 'TnxelIcon',
+    components: components,
+    props: {
+        value: String,
+        color: {},
+        size: Number,
+        width: [Number, String],
+        height: [Number, String],
+    },
+    computed: {
+        isUrlType() {
+            return this.value && (
+                this.value.startsWith('https://') || this.value.startsWith('http://')
+                || this.value.startsWith('../') || this.value.startsWith('./') || this.value.startsWith('/')
+            );
+        },
+        className() {
+            if (this.isUrlType) {
+                return undefined;
+            }
+            if (this.value && components[this.value]) {
+                let className = 'tnxel-icon-' + this.value;
+                if (this.value === 'Loading') {
+                    className += ' is-loading';
+                }
+                return className;
+            } else if (this.value === 'loading') {
+                return 'tnxel-icon-' + this.value + ' el-icon-loading';
+            } else {
+                return this.value;
+            }
+        },
+        style() {
+            let style = {};
+            if (this.size) {
+                style['font-size'] = this.size + 'px';
+            }
+            let width = this.width || this.size;
+            if (width) {
+                style.width = width;
+                if (typeof style.width === 'number') {
+                    style.width += 'px';
+                }
+            }
+            let height = this.height || this.size;
+            if (height) {
+                style.height = height;
+                if (typeof style.height === 'number') {
+                    style.height += 'px';
+                }
+            }
+            if (this.isUrlType) {
+                style['background-repeat'] = 'no-repeat';
+                style['background-image'] = 'url(' + this.value + ')';
+                style['background-size'] = style.width + ' ' + style.height;
+            }
+            return style;
+        }
+    },
+}
+</script>