Commit 94b7ef88 authored by jingnan's avatar jingnan 👀

履历本附件上传组件定义

parent e703b3fd
<template>
<div v-dee-loading="loading" class="BiographicDataUpload">
<dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
<div class="dee-table dee-table-dis-border">
<el-table
ref="table"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column prop="contentType" label="附件类型">
<template slot-scope="scope">
<el-select v-if="showBtns" v-model="scope.row.contentType" placeholder="请选择">
<el-option
v-for="i in contentTypeOptions"
:key="i.value"
:label="i.label"
:value="i.value"
/>
</el-select>
<span v-else>{{ scope.row.contentType }}</span>
</template>
</el-table-column>
<el-table-column prop="fileName" label="文件名" />
<el-table-column prop="fileName" label="上传附件">
<template slot-scope="scope">
<div class="importTemp-com">
<el-upload
ref="upload"
class="upload-demo"
action=""
:with-credentials="true"
accept=".pdf"
:on-change="(fileList)=>{
fileChange(fileList,scope)
}"
:auto-upload="false"
:show-file-list="false"
>
<el-button
class="border-none"
style="width:80px !important;"
>
选择文件
</el-button>
</el-upload>
</div>
</template>
</el-table-column>
</el-table>
<div v-if="showBtns" class="btns">
<el-button
type="primary"
size="small"
class="min-width-80"
@click="submitUpload"
>完成</el-button>
<el-button
class="min-width-80"
size="small"
@click="handleClose"
>取消</el-button>
</div>
</div></div>
</template>
<script>
import { post } from '@/utils/http'
export default {
name: 'BiographicDataUpload',
componentName: '履历本上传附件',
props: {
basicData: {
type: Object,
default: () => {}
}
},
data() {
return {
loading: false,
showBtns: false,
tableData: [],
contentTypeOptions: [],
tools: [{
name: '新增',
icon: '/icons/c-add.png',
handler: {
click: () => {
this.showBtns = true
this.handleAdd()
}
}
},
{
name: '删除',
icon: '/icons/c-creatbackups.png',
handler: {
click: () => {
this.showBtns = true
this.handleRemove()
}
}
}],
extension: [],
currentSelection: []
}
},
computed: {
},
watch: {
basicData: {
immediate: true,
deep: true,
handler(val) {
if (val && val.subTypeName) {
this.getDicData()
}
if (val && val.objFileLinks) {
this.$nextTick(() => {
this.getTableData()
})
}
}
}
},
created() {
},
mounted() {
},
methods: {
getDicData() {
this.$utils.getDicListByCode('resumeBookConentType').then(res => {
if (this.basicData.subTypeName === 'BiographicData') {
this.contentTypeOptions = res.filter(item => item.value !== 'AirworthinessLabelOrCertificate')
} else if (this.basicData.subTypeName === 'ProductCertificate') {
this.contentTypeOptions = res.filter(item => item.value === 'briefTechnicalPerformance' || item.value === 'acceptanceCertificate' || item.value === 'match' || item.value === 'lifeAndReliability')
} else {
this.contentTypeOptions = res.filter(item => item.value === 'AirworthinessLabelOrCertificate')
}
})
},
getTableData() {
this.tableData = []
if (this.basicData.objFileLinks.length) {
this.basicData.objFileLinks.map(item => {
if (item.target && item.target.originalFileName) {
this.tableData.push({
id: item.id,
fileName: item.target.originalFileName,
fileListRaw: item,
contentType: this.$utils.getParamsFromLists(this.contentTypeOptions, 'value', item.contentType, 'label')
})
}
})
}
},
handleAdd() {
this.tableData.push({
tempId: parseInt(Math.random() * 100000000000000, 10),
fileName: '',
contentType: ''
})
},
handleSelectionChange(val) {
this.currentSelection = val
},
handleRemove() {
if (this.currentSelection.length === 0) {
this.$utils.showMessageWarning('请至少选择一条记录!')
} else {
this.tableData = this.tableData.filter(x => this.currentSelection.every(y => x.id !== y.id || x.tempId !== y.tempId))
}
},
fileChange(fileList, scope) {
// console.log('scope: ', scope)
// console.log('fileList: ', fileList)
this.showBtns = true
this.$set(scope.row, 'fileName', fileList.name)
this.$set(scope.row, 'fileListRaw', fileList.raw)
},
submitUpload() {
this.loading = true
const fileExtVOS = []
const formData = new FormData()
this.tableData.forEach(row => {
fileExtVOS.push({
'fileName': row.fileName,
'contentType': row.contentType
})
if (row.fileListRaw.id) {
formData.append('multipartFiles', new Blob([JSON.stringify(row.fileListRaw)], { type: 'application/json' }))
} else {
formData.append('multipartFiles', row.fileListRaw)
}
})
formData.append('fileExtVOS', new Blob([JSON.stringify(fileExtVOS)], { type: 'application/json' }))
post(`/BiographicData/uploadMultiFile/${this.basicData.id}`, formData)
.then((res) => {
this.$message({
message: res.message,
type: 'success'
})
this.loading = false
this.handleClose()
this.$emit('getList')
this.$emit('uploadSuccess', res)
})
.catch((res) => {
this.loading = false
this.$message({
message: res.message,
type: 'error'
})
})
},
handleClose() {
this.showBtns = false
this.getTableData()
}
}
}
</script>
<style lang="scss">
.BiographicDataUpload{
.btns{
margin-top: 20px;
display: flex;
justify-content: center;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment