<template>
<div class="form-table">
<div>
<el-table :data="busDetailQualifyCertificates" class="el-tab" border size="small" header-cell-class-name="form-table-header">
<el-table-column prop="index" label="序号" width="100"/>
<el-table-column prop="qualifyCode" label="资质要求编号" width="250"/>
<el-table-column prop="qualifyName" label="资质要求名称" width="250"/>
<el-table-column prop="qualifyDesc" label="资质描述" width="300"/>
<el-table-column prop="qualifyProvScanFilename" label="资质证明材料" width="300"/>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="delQualifyDetail(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div>
<el-button class="table-btn" type="primary" @click="showAddQualify">添加资质要求</el-button>
</div>
<el-dialog :visible.sync="dialogVisible" title="添加资质要求" :close-on-click-modal="false" append-to-body>
<el-form ref="qualifyInfoForm" :model="qualifyInfo" :rules="qualifyRules" size="medium" label-width="120px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="资质要求编号" prop="qualifyCode">
<el-input v-model.trim="qualifyInfo.qualifyCode" type="text" placeholder="请输入资质要求编号"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="资质要求名称" prop="qualifyName">
<el-input v-model.trim="qualifyInfo.qualifyName" type="text" placeholder="请输入资质要求名称"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="资质描述" prop="qualifyDesc">
<el-input v-model.trim="qualifyInfo.qualifyDesc" type="textarea" :rows="3" placeholder="请输入资质描述"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="资质证明材料" prop="proveMaterialDesc">
<el-upload
ref="qualifyProvScanFileUpload"
action="action"
:file-list="qualifyProvScanFileList"
:http-request="uploadQualifyProvScanFile"
:on-remove="handleQualifyProvScanFileRemove"
:on-exceed="qualifyProvScanFileExceed"
:limit="1"
accept=".jpg,.jpeg,.png,.pdf"
>
<el-button size="small" type="primary" icon="el-icon-upload">
上传文件
</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveData">
保存
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { Uploadimg } from '@/api/common'
export default {
name: 'QualifyInfo',
data() {
return {
qualifyInfo: {
qualifyCode: '',
qualifyName: '',
qualifyDesc: '',
proveMaterialDesc: '',
qualifyProvScanFilename: ''
},
busDetailQualifyCertificates: [],
qualifyRules: {
qualifyCode: [{ required: true, message: '请输入资质要求编号', trigger: 'blur' }],
qualifyName: [{ required: true, message: '请输入资质要求名称', trigger: 'blur' }]
},
qualifyProvScanFileList: [],
dialogVisible: false,
qualifyInfoValid: false
}
},
methods: {
validateForm: function() {
this.$refs.qualifyInfoForm.validate(valid => {
this.qualifyInfoValid = valid
})
},
showAddQualify() {
this.dialogVisible = true
// 清除已有的内容
this.qualifyInfo = {
qualifyCode: '',
qualifyName: '',
qualifyDesc: '',
proveMaterialDesc: '',
qualifyProvScanFilename: ''
}
this.qualifyProvScanFileList = []
this.$nextTick(() => {
// 延时到下一帧才开始，也就是页面刚刚渲染结束！！
this.$refs.qualifyInfoForm.clearValidate()
})
},
saveData() {
this.validateForm()
if (this.qualifyInfoValid === true) {
const qualify = {}
qualify.index = this.busDetailQualifyCertificates.length + 1
qualify.qualifyCode = this.qualifyInfo.qualifyCode
qualify.qualifyName = this.qualifyInfo.qualifyName
qualify.qualifyDesc = this.qualifyInfo.qualifyDesc
qualify.proveMaterialDesc = this.qualifyInfo.proveMaterialDesc
qualify.qualifyProvScanFilename = this.qualifyInfo.qualifyProvScanFilename
this.busDetailQualifyCertificates.push(qualify)
this.dialogVisible = false
}
},
delQualifyDetail(row) {
for (const i in this.busDetailQualifyCertificates) {
if (this.busDetailQualifyCertificates[i].index === row.index) {
this.busDetailQualifyCertificates.splice(i, 1)
return
}
}
},
// 文件上传
uploadQualifyProvScanFile(file) {
const upload = this.handleBeforeUpload(file.file, this.qualifyProvScanFileList)
if (upload === false) {
return
}
const base_url = this.baseConfig.baseUrl + '/static/'
Uploadimg(file).then(res => {
if (res.code === 200) {
this.qualifyProvScanFileList = [] // 只保留一张图片或一个文件
this.qualifyProvScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
this.qualifyInfo.provScanFileList = res.data.fileId
this.qualifyInfo.qualifyProvScanFilename = res.data.fileName
this.$refs.qualifyInfoForm.validateField('proveMaterialDesc')
this.$message.success('文件上传成功')
}
})
},
handleQualifyProvScanFileRemove(file) {
this.qualifyInfo.qualifyProvScanFilename = ''
this.qualifyInfo.proveMaterialDesc = ''
this.handleRemove(file, this.qualifyProvScanFileList)
this.$refs.qualifyInfoForm.validateField('proveMaterialDesc')
},
qualifyProvScanFileExceed(file, fileList) {
this.handleExceed(file, this.qualifyProvScanFileList)
},
// 上传前判断文件格式及大小
handleBeforeUpload(file, fileList) {
let res = true
// 判断文件格式
const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
const isPDF = file.type === 'application/pdf'
if (!isJPG && !isPDF) {
this.$message.error('上传文件只能是 图片 或 PDF 格式!')
res = false
}
// 判断文件大小
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('上传文件大小不能超过 5MB!')
res = false
}
// 判断文件是否已经上传过
for (const i in fileList) {
if (fileList[i].name === file.name) {
this.$message.error('该文件已上传过，请选择其他文件')
res = false
}
}
return res
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
for (const i in fileList) {
if (fileList[i].name === file.name) {
fileList.splice(i, 1)
return
}
}
},
handleExceed(files, fileList) {
this.$message.warning('最多上传一个文件，请先删除再重新上传')
}
}
}
</script>
<style scoped lang="scss">
.form-table {
display: flex;
margin: 20px;
.table-btn {
margin-left: 100px;
}
::v-deep .form-table-header {
font-size: 16px;
}
}
</style>
