修改上传文件组件

This commit is contained in:
qq787203167
2022-02-22 15:13:07 +08:00
parent ffe34f6313
commit 6c432ddfa5
4 changed files with 176 additions and 256 deletions
@@ -293,16 +293,25 @@
// moment(date).format('YYYY-MM-DD')
},
clickButtonToUpload(current) {
this.$refs.uploadFile.perentHandleFunc()
this.$refs.uploadFile.visible = true
this.uploadName = current
getAction('sys/common/getFileInfos', { connectId: this.formInline[current] }).then((res) => {
if (res.success) {
this.$refs.uploadFile.perentHandleFunc(res.result)
} else {
this.$refs.uploadFile.perentHandleFunc()
}
})
},
/** 上传文件的回调 */
uploadSuccess(data) {
console.log(data)
let attIdList = []
data.map(item => {
attIdList.push(item.id || data.name)
})
if (data && data.length > 0) {
data.map(item => {
attIdList.push(item.id || data.name)
})
}
/** 赋值给当前对应的表单文件 */
this.formInline[this.uploadName] = attIdList.join(',')
this.formInline = { ...this.formInline }
+9 -7
View File
@@ -66,8 +66,8 @@
columns: [],
selectedRowKeys: [],
dataSource: [],
pageNo: '1',
pageSize: '10',
pageNo: 1,
pageSize: 10,
total: 0,
searchParmes: {},
loading: false
@@ -102,7 +102,7 @@
})
})
let width
if (this.OperationList.length > 0){
if (this.OperationList.length > 0) {
width = this.OperationList.length * 55
}
if (this.showAction) {
@@ -118,10 +118,12 @@
})
},
getTableList() {
let pageNo = JSON.parse(JSON.stringify(this.pageNo))
let pageSize = JSON.parse(JSON.stringify(this.pageSize))
let params = {
...this.searchParmes,
pageNo: this.pageNo,
pageSize: this.pageSize
pageNo: pageNo + '',
pageSize: pageSize + ''
}
this.loading = true
postAction(this.url.tableList, params).then((res) => {
@@ -133,11 +135,11 @@
})
},
onChange(page, pageSize) {
this.pageNo = page+''
this.pageNo = page
this.getTableList()
},
SizeChange(page, pageSize) {
this.pageSize = pageSize+''
this.pageSize = pageSize
this.getTableList()
},
onSelectChange() {
@@ -50,7 +50,6 @@
methods:{
perentHandleFunc(data){
this.myfileList = data
this.fileList = data
if (data && data.length > 0){
this.myfileList.forEach((res)=>{
res.name = res.fileName
@@ -58,7 +57,6 @@
})
}else {
this.myfileList = []
this.fileList = []
}
},
beforeUpload(file) {
@@ -1,279 +1,190 @@
<template>
<a-card :bordered="false">
<div class="doc-detail">
<div class="doc-detail-wrap">
<div class="doc-detail-header">
<div class="doc-detail-title">
GB 27999-2019 《乘用车燃料消耗量评价方法及指标》 标准详情
<div class="doc-detail">
<div class="doc-detail-wrap">
<div class="doc-detail-header">
<div class="doc-detail-title">
<a-icon type="home" style="margin-right: 4px"/>
GB 27999-2019 《乘用车燃料消耗量评价方法及指标》 标准详情
</div>
<div class="doc-detail-right">
<a-button class="doc-detail-btn" type="primary">更新log</a-button>
<a-button class="doc-detail-btn" type="primary">文档拆分</a-button>
<a-button class="doc-detail-btn" type="primary">文档翻译</a-button>
<a-button class="doc-detail-btn" type="primary">文档对比</a-button>
<a-button class="doc-detail-btn" type="primary">知识问答库</a-button>
</div>
</div>
<div class="doc-detail-right">
<a-button class="doc-detail-btn" type="primary">更新log</a-button>
<a-button class="doc-detail-btn" type="primary">文档拆分</a-button>
<a-button class="doc-detail-btn" type="primary">文档翻译</a-button>
<a-button class="doc-detail-btn" type="primary">文档对比</a-button>
<a-button class="doc-detail-btn" type="primary">知识问答库</a-button>
<div class="content">
<div class="header-text">
基本信息
</div>
<div class="content-text">
<div class="text-field" v-for="(item,index) in 19" :key="index">
<span class="text-field-left" v-if="index == 1">标注实施日期</span>
<span class="text-field-left" v-else>编号</span>
<span class="text-field-right">GB 27999-8019</span>
</div>
</div>
<div class="header-text">
文本信息
</div>
<div class="TextInformation">
<div class="TextInformationContent" v-for="item in 10">
<span class="TextInformationContentLeft">
测试程序
</span>
<span class="TextInformationContentcontent">
123456.pdf
</span>
<span class="TextInformationContentright">
<a-icon type="vertical-align-bottom"/>
下载
</span>
</div>
</div>
<div class="header-text">
文本信息
</div>
<div class="TextInformation">
<div class="TextInformationContent" v-for="item in 3">
<span class="TextInformationContentLeft">
测试程序
</span>
<span class="TextInformationContentcontent">
123456.pdf
</span>
<span class="TextInformationContentright">
<a-icon type="vertical-align-bottom"/>
下载
</span>
</div>
</div>
</div>
</div>
<a-divider orientation="left">
基本信息
</a-divider>
<div class="doc-detail-info">
<div class="doc-info-wrap">
<div class="doc-info-content">
<div class="doc-info-key">
编号
</div>
<div class="doc-info-value">
GB 279999-2019
</div>
</div>
<div class="doc-info-content">
<div class="doc-info-key">
编号
</div>
<div class="doc-info-value">
GB 279999-2019
</div>
</div>
<div class="doc-info-content doc-info-right">
<div class="doc-info-key">
编号
</div>
<div class="doc-info-value">
GB 279999-2019
</div>
</div>
<div class="doc-info-content doc-info-bottom">
<div class="doc-info-key">
编号
</div>
<div class="doc-info-value">
GB 279999-2019
</div>
</div>
<div class="doc-info-content doc-info-bottom">
<div class="doc-info-key">
编号
</div>
<div class="doc-info-value">
GB 279999-2019
</div>
</div>
<div class="doc-info-content doc-info-bottom doc-info-right">
<div class="doc-info-key">
</div>
<div class="doc-info-value">
</div>
</div>
</div>
</div>
<a-divider orientation="left">
文本信息
</a-divider>
<div class="doc-detail-text">
<div class="doc-text-wrap">
<div class="doc-text-content">
<div class="doc-text-key">
测试程序
</div>
<div class="doc-text-value">
<div class="doc-text-left">
<a href="javascript:;">FMVSS 114中文.pdf</a>
</div>
<div class="doc-text-right">
<a-button type="primary">标准分解单</a-button>
<a-icon type="download" />
</div>
</div>
</div>
<div class="doc-text-content doc-text-content-bottom">
<div class="doc-text-key">
测试程序1
</div>
<div class="doc-text-value">
<div class="doc-text-left">
<a href="javascript:;">FMVSS 114中文11111.pdf</a>
</div>
<div class="doc-text-right">
<a-button type="primary">标准分解单</a-button>
<a-icon type="download" />
</div>
</div>
</div>
</div>
</div>
<a-divider orientation="left">
关联信息
</a-divider>
<div class="doc-detail-relation">
<div class="doc-relation-wrap">
<div class="doc-relation-content">
<div class="doc-relation-key">
代替标准
</div>
<div class="doc-relation-value">
<a href="javascript:;">GB 27999-2019</a>
</div>
</div>
<div class="doc-relation-content doc-relation-content-bottom">
<div class="doc-relation-key">
代替标准
</div>
<div class="doc-relation-value">
<a href="javascript:;">GB 27999-2019</a>
</div>
</div>
</div>
</div>
</div>
</div>
</a-card>
</template>
<script>
</script>
<style lang="less" scoped>
.doc-detail{
.doc-detail {
padding: 20px;
.doc-detail-wrap{
.doc-detail-header{
.doc-detail-wrap {
.doc-detail-header {
height: 50px;
display: flex;
justify-content: space-between;
border-bottom:1px #9e9e9e solid ;
.doc-detail-title{
display:inline-block;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
border-bottom: 2px #eff1f3 solid;
.doc-detail-title {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 18px;
font-weight: 600;
}
.doc-detail-right{
.doc-detail-right {
min-width: 500px;
.doc-detail-btn{
.doc-detail-btn {
margin-left: 10px;
}
}
}
.doc-detail-info{
.doc-info-wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.doc-info-content {
width: 33.33333%;
height: 40px;
line-height: 40px;
display: flex;
justify-content: space-between;
text-align: center;
border: 1px solid #ccc;
border-right: none;
border-bottom: none;
.doc-info-key {
border-right:1px solid #ccc;
width: 50%;
display:inline-block;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
background: #c6e6f5;
}
.doc-info-value {
width: 50%;
display:inline-block;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
}
.doc-info-right{
border-right: 1px solid #ccc;
}
.doc-info-bottom{
border-bottom: 1px solid #ccc;
}
}
}
.doc-detail-text{
.doc-text-wrap{
.doc-text-content {
display: flex;
justify-content: space-between;
text-align: center;
height: 40px;
line-height: 40px;
border: 1px solid #ccc;
border-bottom: none;
.doc-text-key {
width: 16.666665%;
border-right: 1px solid #ccc;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #c6e6f5;
}
.doc-text-value {
width: 100%;
display: flex;
justify-content: space-between;
.doc-text-left{
width: 100%;
text-align: center;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.doc-text-right{
min-width: 150px;
button{
margin-right: 10px;
}
.anticon-download{
color: #1890FF;
font-size: 18px;
}
}
}
.header-text {
font-size: 16px;
font-weight: 600;
height: 80px;
line-height: 80px;
}
.content-text {
width: 100%;
display: flex;
flex-wrap: wrap;
.text-field {
width: 33%;
margin-bottom: 8px;
.text-field-left {
width: 160px;
display: inline-block;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #6f7385;
}
.doc-text-content-bottom{
border-bottom: 1px solid #ccc;
.text-field-right {
width: calc(100% - 200px);
display: inline-block;
font-size: 17px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #040b29;
font-weight: 500;
}
}
}
.doc-detail-relation{
.doc-relation-wrap{
.doc-relation-content {
display: flex;
justify-content: space-between;
border: 1px solid #ccc;
border-bottom: none;
height: 40px;
line-height: 40px;
.TextInformation {
height: auto;
.TextInformationContent {
height: 50px;
border-top: 1.6px #eff1f3 solid;
border-right: 1.6px #eff1f3 solid;
.TextInformationContentLeft {
width: 310px;
height: 50px;
border: 1.6px #eff1f3 solid;
display: inline-block;
background: #f7f7f8;
text-align: center;
.doc-relation-key {
width: 16.666665%;
border-right: 1px solid #ccc;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #c6e6f5;
}
.doc-relation-value {
width: 100%;
text-align: center;
}
color: #040b29;
line-height: 50px;
font-weight: 600;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.doc-relation-content-bottom{
border-bottom: 1px solid #ccc;
.TextInformationContentcontent {
width: calc(100% - 410px);
line-height: 50px;
display: inline-block;
text-align: center;
color: #67bbc3;
font-size: 15px;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.TextInformationContentright {
width: 100px;
display: inline-block;
line-height: 50px;
color: #67bbc3;
font-size: 15px;
font-weight: 500;
text-align: center;
position: absolute;
}
}
.TextInformationContent:last-child{
border-bottom: 1.6px #eff1f3 solid;
}
}
}