提交 af814120 编写于 作者: ibizdev's avatar ibizdev

ibizdev提交

上级 cb28d70d
...@@ -67,6 +67,7 @@ import AppDataUploadView from './components/app-data-upload/app-data-upload.vue' ...@@ -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 DropDownListDynamic from './components/dropdown-list-dynamic/dropdown-list-dynamic.vue'
import AppImagePreview from './components/app-image-preview/app-image-preview.vue' import AppImagePreview from './components/app-image-preview/app-image-preview.vue'
import AppFormatData from './components/app-format-data/app-format-data.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实体服务注册中心 // 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister; window['uiServiceRegister'] = uiServiceRegister;
...@@ -143,5 +144,6 @@ export const AppComponents = { ...@@ -143,5 +144,6 @@ export const AppComponents = {
v.component('dropdown-list-dynamic', DropDownListDynamic); v.component('dropdown-list-dynamic', DropDownListDynamic);
v.component('app-image-preview', AppImagePreview); v.component('app-image-preview', AppImagePreview);
v.component('app-format-data', AppFormatData); v.component('app-format-data', AppFormatData);
v.component('app-upload-file-info', AppUploadFileInfo);
}, },
}; };
\ No newline at end of file
.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
<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
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册