<!--年度考核弹窗-->
<template>
<el-dialog title="年度考核" width="975px" :visible.sync="isShowInfo" append-to-body @close="close">
<div class="assessDialog">
<div class="Dialog-input">
<div class="inputContent">
<div class="inputBox">
<red-star />
<input-vue
v-model="addInfo.supplierCode"
title="供应商编号"
disabled
placeholder="请输入编号"
class="inputWidth"
width="200px"
/>
</div>
<div class="inputBox">
<red-star />
<input-vue title="考核年度" class="inputWidth">
<el-select v-model="addInfo.assessAnnual" clearable placeholder="请选择" style="width:200px">
<el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</input-vue>
</div>
<div class="inputBox">
<input-vue
v-model="addInfo.annualAssessIllustration"
title="年度考核说明"
class="inputWidth"
placeholder="请输入年度考核说明"
width="200px"
/>
</div>
</div>
<div class="inputContent">
<div class="inputBox">
<red-star />
<input-vue
v-model="addInfo.supplierName"
title="供应商名称"
disabled
placeholder="请输入供应商名称"
class="inputWidth"
width="200px"
/>
</div>
<div class="inputBox">
<red-star />
<input-vue title="考核结果" class="inputWidth">
<el-select v-model="addInfo.annualAssessResult" clearable placeholder="请选择" style="width:200px">
<el-option v-for="item in resultOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</input-vue>
</div>
<div class="inputBox">
<red-star />
<input-vue title="年度考核日期" class="inputWidth">
<el-input
v-model="addInfo.annualAssessDate"
placeholder="请选择日期"
suffix-icon="el-icon-date"
style="width:200px"
/>
</input-vue>
</div>
</div>
</div>
<div class="imgContent">
<div class="img-box">
<div class="img-item">
<div v-if="fileName" class="title-box">
<div class="img-title">
{{ fileName }}
</div>
<div class="img-btn">
<el-button type="text" class="btn">
下载
</el-button>
</div>
</div>
<el-upload
class="avatar-uploader"
:headers="myHeaders"
action="http://111.198.10.15:21403/file/uploadFile"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</div>
<div class="img-item">
<div v-if="fileName2" class="title-box">
<div class="img-title">
{{ fileName2 }}
</div>
<div class="img-btn">
<el-button type="text" class="btn">
下载
</el-button>
</div>
</div>
<el-upload
class="avatar-uploader"
:headers="myHeaders"
action="http://111.198.10.15:21403/file/uploadFile"
:show-file-list="false"
:on-success="handleAvatarSuccess2"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl2" :src="imageUrl2" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</div>
</div>
<div class="uploadbtn">
<el-button type="primary">
上传录库评审结果
</el-button>
</div>
</div>
<div class="btnBox">
<el-button type="primary" class="save" @click="save">
保存
</el-button>
<el-button type="info" class="close" @click="close">
取消
</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import dialogHeader from './dialogHeader.vue'
import inputVue from '../input/inputVue.vue'
import RedStar from '../redStar.vue'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'
import { assessAdd } from '../../../api/supplier/supplier'
export default {
components: { inputVue, dialogHeader, RedStar },
props: {
dataInfo: {
type: Object,
dataInfo: {}
}
},
data() {
return {
fileName: '',
imageUrl: '',
imageUrl2: '',
fileName2: '',
myHeaders: { token: getToken() },
isShowInfo: true,
yearOptions: [
{ label: '2021', value: '2021' },
{ label: '2022', value: '2022' }
],
resultOptions: [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
{ label: 'C', value: 'C' }
],
addInfo: {
supplierCode: '',
supplierName: '',
assessAnnual: '',
annualAssessResult: '',
annualAssessIllustration: '',
annualAssessDate: '',
annualAssessFile: ''
}
}
},
watch: {
dataInfo: {
handler(val) {
console.log(val)
if (val != '') {
const temp = { ...this.addInfo }
this.addInfo = {
supplierCode: val.supplierCode,
supplierName: val.supplierName,
assessAnnual: temp.assessAnnual,
annualAssessResult: temp.annualAssessResult,
annualAssessIllustration: temp.annualAssessIllustration,
annualAssessDate: temp.annualAssessDate,
annualAssessFile: temp.annualAssessFile
}
console.log(this.addInfo)
}
},
deep: true,
immediate: true
}
},
methods: {
close() {
this.$emit('close')
},
// 照片上传
handleAvatarSuccess(res, file) {
this.fileName = res.data.fileName
console.log(res, file)
this.imageUrl = URL.createObjectURL(file.raw)
console.log(this.addInfo.annualAssessFile, 'this.addInfo.annualAssessFile')
if (this.addInfo.annualAssessFile == '') {
console.log('1')
this.addInfo.annualAssessFile = res.data.fileId
} else {
console.log('2')
this.addInfo.annualAssessFile = this.addInfo.annualAssessFile + ',' + res.data.fileId
}
console.log(this.addInfo.annualAssessFile)
},
handleAvatarSuccess2(res, file) {
this.fileName2 = res.data.fileName
console.log(res, file)
this.imageUrl2 = URL.createObjectURL(file.raw)
if (this.addInfo.annualAssessFile == '') {
console.log('3')
this.addInfo.annualAssessFile = res.data.fileId
} else {
console.log('4')
this.addInfo.annualAssessFile = this.addInfo.annualAssessFile + ',' + res.data.fileId
}
console.log(this.addInfo.annualAssessFile)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
save() {
assessAdd(this.addInfo).then(res => {
console.log(res)
if (!res.code) {
this.close()
Message.success('保存成功')
}
})
}
}
}
</script>
<style lang='scss' scoped>
.assessDialog {
width: 975px;
padding: 0 20px;
box-sizing: border-box;
.Dialog-input {
padding: 10px 20px;
display: flex;
.inputContent {
margin-right: 30px;
display: flex;
flex: 1;
flex-direction: column;
.inputBox {
width: 350px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
.imgContent {
margin: 20px;
display: flex;
.img-box {
margin-right: 48px;
width: 600px;
height: 250px;
display: flex;
justify-content: space-between;
padding: 10px 40px;
border: 1px solid #000;
.img-item {
width: 178px;
height: 200px;
.title-box {
display: flex;
justify-content: space-between;
.img-title {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 20px;
}
.img-btn {
.btn {
padding: 0;
}
}
}
}
}
}
.btnBox {
padding: 30px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-evenly;
.save,
.close {
width: 100px;
}
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
