ibizdev提交

app_web/src/app-register.ts

@@ -67,6 +67,7 @@ import AppDataUploadView from './components/app-data-upload/app-data-upload.vue'
 import DropDownListDynamic from './components/dropdown-list-dynamic/dropdown-list-dynamic.vue'
 import AppImagePreview from './components/app-image-preview/app-image-preview.vue'
 import AppFormatData from './components/app-format-data/app-format-data.vue'
+import AppUploadFileInfo from './components/app-upload-file-info/app-upload-file-info.vue'
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -143,5 +144,6 @@ export const AppComponents = {
         v.component('dropdown-list-dynamic', DropDownListDynamic);
         v.component('app-image-preview', AppImagePreview);
         v.component('app-format-data', AppFormatData);
+        v.component('app-upload-file-info', AppUploadFileInfo);
     },
 };
\ No newline at end of file

app_web/src/components/app-upload-file-info/app-upload-file-info.less

+.app-upload-file-info{
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  overflow: hidden;
+  text-align: center;
+  .file-item{
+    color: #606266;
+    display: inline-block;
+    padding-left: 4px;
+    text-overflow: ellipsis;
+    -webkit-transition: color .3s;
+    transition: color .3s;
+    white-space: nowrap;
+  }
+  .file-item:hover{
+    color: #409EFF;
+    cursor: pointer;
+  }
+  i{
+    margin-right: 7px;
+  }
+}
\ No newline at end of file

app_web/src/components/app-upload-file-info/app-upload-file-info.vue

+<template>
+  <div class="app-upload-file-info">
+      <a class="file-item" v-for="file in files" @click="() => onDownload(file)"><i class="el-icon-document"></i>{{file.name}}</a>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Environment } from '@/environments/environment';
+import { CreateElement } from 'vue';
+import { Subject, Unsubscribable } from 'rxjs';
+
+@Component({
+})
+export default class AppUploadFileInfo extends Vue {
+
+    /**
+     * 初始化值
+     *
+     * @type {*}
+     * @memberof AppUploadFileInfo
+     */
+    @Prop() public value?: any;
+
+    /**
+     * 数据值变化
+     *
+     * @param {*} newval
+     * @param {*} val
+     * @memberof AppUploadFileInfo
+     */
+    @Watch('value')
+    onValueChange(newval: any, val: any) {
+        this.dataProcess();
+    }
+
+    /**
+     * 所属表单项名称
+     *
+     * @type {string}
+     * @memberof AppUploadFileInfo
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 上传文件路径
+     *
+     * @memberof AppUploadFileInfo
+     */
+    public uploadUrl = Environment.BaseUrl + Environment.UploadFile;
+
+    /**
+     * 下载文件路径
+     *
+     * @memberof AppUploadFileInfo
+     */
+    public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
+
+    /**
+     * 文件列表
+     *
+     * @memberof AppUploadFileInfo
+     */
+    public files = [];
+
+    /**
+     * 数据处理
+     *
+     * @private
+     * @memberof AppUploadFileInfo
+     */
+    private dataProcess(): void {
+        if(this.value){
+            let files = JSON.parse(this.value);
+            if(files.length){
+                files.forEach((file: any) => {
+                    let url = `${this.downloadUrl}/${file.id}`;
+                    file.url = url;
+                });
+            }else{
+              files = []
+            }
+            this.files =files;
+        }
+    }
+
+    /**
+     * vue 生命周期
+     *
+     * @memberof AppUploadFileInfo
+     */
+    public created() {
+        this.dataProcess();
+    }
+
+
+    /**
+     * 下载文件
+     *
+     * @param {*} file
+     * @memberof AppUploadFileInfo
+     */
+    public onDownload(file: any) {
+        window.open(file.url);
+    }
+
+}
+</script>
+
+<style lang='less'>
+@import './app-upload-file-info.less';
+</style>
\ No newline at end of file