haozq
/
lj-zhgd-htweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人员

This commit is contained in:
jjLv 2024-08-30 09:55:24 +08:00
parent 54d250bd76
commit 2d63ecd05e
1 changed files with 89 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/views/base/staff/index.vue
View File

@ -176,8 +176,7 @@
<el-form-item label="高处作业证">
<el-upload
class = "upload-demo"
action="#"
:limit="5"
action="#"
:file-list="highImgList"
:show-file-list="true"
:auto-upload="false"
@ -191,7 +190,16 @@
<!-- 文件格式下载，图片格式预览 -->
<div slot="file" slot-scope="{file}">
<img v-if="isImage(file)" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<img v-else class="el-upload-list__item-thumbnail" :src="urlTemp" alt="">
<div v-else class="picture-card-container" >
<img class="picture-card" :src="urlTemp" alt="">
<p class="file-name">{{ file.name }}</p>
</div>
<!-- <img v-else class="el-upload-list__item-thumbnail" :src="urlTemp" alt="">
<p class=""file-name>{{ file.name }}</p> -->
<!-- <div class="file-overlay">
<p class="file-name">{{ file.name }}</p>
</div> -->
<!-- <p>{{ file.name }}</p> -->
<span class="el-upload-list__item-actions">
<span v-if="updataIf(file)" class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download" />
@ -203,6 +211,7 @@
<i class="el-icon-delete" />
</span>
</span>
</div>
@ -213,7 +222,6 @@
<el-form-item label="电工作业证">
<el-upload
action="#"
:limit="5"
:file-list="electricianImgList"
:show-file-list="true"
:auto-upload="false"
@ -248,7 +256,6 @@
<el-form-item label="其他作业证">
<el-upload
action="#"
:limit="5"
:file-list="elseImgList"
:show-file-list="true"
:auto-upload="false"
@ -627,9 +634,17 @@
this.fileList = fileList;
},
handleChangeHighImgList(file, fileList) {
console.log(fileList.length)
if(fileList.length > 5){
this.$message.warning('最多上传5张图片')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
const fileListTemp = fileList.filter(item => {
return item.uid != file.uid
});
if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
this.$message.warning('文件格式不正确')
fileList = fileList.filter(item => {
@ -666,6 +681,12 @@
const fileListTemp = fileList.filter(item => {
return item.uid != file.uid
});
if(fileList.length > 5){
this.$message.warning('最多上传5张图片')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
this.$message.warning('文件格式不正确')
fileList = fileList.filter(item => {
@ -702,6 +723,12 @@
const fileListTemp = fileList.filter(item => {
return item.uid != file.uid
});
if(fileList.length > 5){
this.$message.warning('最多上传5张图片')
fileList = fileList.filter(item => {
return item.uid != file.uid
})
}
if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
this.$message.warning('文件格式不正确')
fileList = fileList.filter(item => {
@ -1107,5 +1134,62 @@
display: none;
}
}
// ::v-deep .el-upload-list--picture-card .el-upload-list__item {
// overflow: revert !important;
// // width: 100%;
// // height: 100%!important;
// }
// .el-upload-list__item-thumbnail{
// height: 100%!important;
// }
// ::v-deep.el-upload-list__item-thumbnail {
// width: 100%;
// height: 100%!important;
// object-fit: cover;
// }
// ::v-deep.el-upload-list--picture-card .el-upload-list__item{
// overflow: auto;
// }
.picture-card-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.picture-card{
width: 100%;
height: 100%;
object-fit:cover;
justify-content: center;
// border: 1px solid #ddd;
// border-radius: 4px;
}
.file-name{
position: absolute;
bottom: -20px;
// margin-top: 8px;
text-align: center;
font-size: 14px;
color:#333;
z-index: 999999;
}
.file-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
}
</style>