@newview/file-ui 0.0.0

package/src/UploadFile/FilePreview.ts

@@ -0,0 +1,181 @@
+/**
+ * 功能名称：文件预览
+ * 创 建 人：弋强
+ * 日    期：2023/02/16 08:40:44
+ */
+import { BaseInstance } from '@newview/base-vue';
+import { defineComponent, ref, reactive, computed, onMounted, onUnmounted, Ref, PropType, nextTick, watch, ExtractPropTypes, SetupContext } from 'vue'
+import { GridOptions, GridInstance, GloablValueType } from '@newview/ui'
+import { QueryWrapper } from '@newview/infrastructure'
+import { OSSFileApi, FileApi } from "@newview/fileservice-api";
+
+// 一、Emits 类型定义
+// type EmitsType = ('clearRadioRow' | 'change' | 'delete' | 'addchild')[];
+// update:modelValue 更改显隐状态
+type EmitsType = ('update:modelValue')[];
+
+
+// 二、Props 定义
+const propDefine = {
+    modelValue: {
+        // 是否显示
+        type: Boolean,
+        default: false
+    },
+    fileInfo: {
+        // 带入的参数
+        type: Object as PropType<any>,
+        default: () => { }
+    },
+    previewList: {
+        // 按钮权限码
+        type: Array<string>,
+        default: () => []
+    },
+    previewIndex: {
+        // 预览Index
+        type: Number,
+        default: 0
+    }
+};
+
+
+// 三、组件信息定义
+export default defineComponent({
+    name: 'FilePreview',
+    components: {},
+    emits: ['update:modelValue'], // 例如: ['clearRadioRow', 'change', 'delete', 'addchild']
+    props: propDefine,
+    setup(props, ctx) {
+        return new FilePreviewInstance(props, ctx);
+    }
+})
+
+
+// 四、组件实例, 具体业务
+export class FilePreviewInstance extends BaseInstance {
+    private props: ExtractPropTypes<typeof propDefine>;
+    private ctx: SetupContext<EmitsType>;
+    // API实例化
+    private ossFileApi: OSSFileApi = new OSSFileApi();
+    private fileApi: FileApi = new FileApi();
+
+    // 全局属性
+
+
+    constructor(props: ExtractPropTypes<typeof propDefine>, ctx: SetupContext<EmitsType>) {
+        super()
+        this.props = props;
+        this.ctx = ctx;
+
+        this.useFilePreview();
+    }
+
+    //#region 业务逻辑 - 文件预览
+
+    // 私有属性 | private
+
+
+    // 响应属性 | ref、reactive、computed
+    previewImage = ref(false);
+    previewIfr = ref(false);
+    ifrUrl = ref('');
+
+    // 私有方法 | private 方法名() {}
+    /**
+     * 初始化
+     */
+    private useFilePreview() {
+        watch(() => this.props['modelValue'], () => {
+            if (this.props['modelValue']) {
+                this.doView(this.props.fileInfo);
+            }
+        })
+
+        if (this.props['modelValue']) {
+            this.doView(this.props.fileInfo);
+        }
+    }
+
+    /**
+     * 预览文件
+     */
+    private async doView(fileInfo: any) {
+        const fileUrl = await this.ossFileApi.getSignatureUrlByFileInfo(fileInfo);
+        if (this.isImage(fileInfo)) { 
+            // 预览 图片
+            this.previewImage.value = true;
+        } else if (this.isOffice(fileInfo)) { 
+            // 预览 Office
+            this.ifrUrl.value = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`;
+            this.previewIfr.value = true;
+        } else if (this.isVedio(fileInfo)) {  
+            // 播放 Vedio
+            this.ifrUrl.value = `${fileUrl}`;
+            this.previewIfr.value = true;
+        } else if (this.isPDF(fileInfo)) { 
+            // 预览 PDF
+            this.ifrUrl.value = `/static/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(fileUrl)}`
+            this.previewIfr.value = true;
+        } else { 
+            // 下载文件            
+            const downloadUrl = this.fileApi.getFileUrl(fileInfo.Token, fileInfo.Id);
+            window.open(downloadUrl);
+        }
+    }
+
+    /**
+     * 是否为Office
+     * @param fileInfo 
+     */
+    private isOffice(fileInfo: any) {
+        const ext = fileInfo.FileExt;
+        return ext == 'doc' || ext == 'docx' || ext == 'ppt' || ext == "pptx" || ext == "xls" || ext == "xlsx";
+    }
+
+    /**
+     * 是否为Vedio
+     * @param fileInfo 
+     */
+    private isVedio(fileInfo: any) {
+        const ext = fileInfo.FileExt;
+        return ext == 'mov' || ext == 'mp3' || ext == 'mp4';
+    }
+
+    /**
+     * 是否为PDF
+     * @param fileInfo 
+     */
+    private isPDF(fileInfo: any) {
+        const ext = fileInfo.FileExt;
+        return ext == 'pdf';
+    }
+
+    /**
+     * 是否为图片
+     * @param fileInfo 
+     * @returns 
+     */
+    private isImage(fileInfo: any) {
+        const ext = fileInfo.FileExt;
+        return ext == 'jpg' || ext == 'png' || ext == 'jpeg' || ext == "gif" || ext == "svg";
+    }
+
+
+    // 响应式方法 | xxx = () => {}
+
+    /**
+     * 关闭预览
+     */
+    doClose = (value: boolean) => {
+        if (value) {
+            return;
+        }
+
+        this.ctx.emit('update:modelValue', false);
+    }
+
+
+    //#endregion 业务逻辑 - 文件预览 END
+
+}

package/src/UploadFile/FilePreview.vue

@@ -0,0 +1,32 @@
+<!--
+功能名称：文件预览
+创 建 人：弋强
+日    期：2023/02/16 08:40:22
+-->
+<template>
+  <!-- 图片预览 -->
+  <ImagePreview v-model="previewImage" :preview-list="previewList" :initial-index="previewIndex" @on-close="doClose"/>
+  <!-- 图片预览 END -->
+
+  <Modal v-model="previewIfr" fullscreen :mask="true" :mask-closable="false" :width="1000"  footer-hide :title="'文件预览 - ' + fileInfo.FileName" @on-visible-change="doClose">
+    <div class="ifr-container">
+      <iframe :src="ifrUrl" class="ifr-content" :title="fileInfo.fileInfo"> </iframe>
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts" src="./FilePreview.ts"></script>
+
+<style scoped lang="scss">
+.ifr-container {
+  height: calc(100% + 32px);
+  margin: -16px;
+}
+.ifr-content {
+  height: 100%;
+  width: 100%;
+  border: 0px;
+  padding: 0px;
+  margin: 0px;
+}
+</style>