资质多图片上传

ywj_dev
郑明梁 2 years ago
parent 579ec615cf
commit 75166d488c

@ -112,10 +112,9 @@
:action="this.uploadUrl" :action="this.uploadUrl"
:on-preview="uploadHandlePreview" :on-preview="uploadHandlePreview"
:on-remove="uploadHandleRemove" :on-remove="uploadHandleRemove"
:limit="1"
:headers="headers" :headers="headers"
:on-exceed="uploadHandleExceed" :on-exceed="uploadHandleExceed"
accept=".jpg,.png,.pdf,.doc" accept=".jpg,.png,.doc"
:on-change="uploadOnchange" :on-change="uploadOnchange"
:on-success="uploadHandleSuccess" :on-success="uploadHandleSuccess"
:on-error="uploadHandleError" :on-error="uploadHandleError"
@ -146,6 +145,7 @@
import draggable from "vuedraggable"; import draggable from "vuedraggable";
import store from "../../../store"; import store from "../../../store";
import {insertCompanyCert, updateCompanyCert} from "../../../api/purchase/companyCert"; import {insertCompanyCert, updateCompanyCert} from "../../../api/purchase/companyCert";
import ElImageViewer from "element-ui/packages/image/src/image-viewer"
export default { export default {
name: "supCompanyCertAdd", name: "supCompanyCertAdd",
@ -172,6 +172,7 @@ export default {
return { return {
BASE_URL: process.env.VUE_APP_BASE_API, BASE_URL: process.env.VUE_APP_BASE_API,
code: "", code: "",
isCleck:false,
formData: { formData: {
type: 0, type: 0,
vailDate: null, vailDate: null,
@ -200,6 +201,7 @@ export default {
}, },
components: { components: {
draggable, draggable,
ElImageViewer
}, },
methods: { methods: {
submitUpload() { submitUpload() {
@ -296,15 +298,15 @@ export default {
console.log(this.fileList); console.log(this.fileList);
}, },
uploadHandleExceed(files, fileList) { uploadHandleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
}, },
uploadOnchange(file, fileList) { uploadOnchange(file, fileList) {
let fileName = file.name; let fileName = file.name;
let uid = file.uid let uid = file.uid
let pos = fileName.lastIndexOf("."); let pos = fileName.lastIndexOf(".");
let lastName = fileName.substring(pos, fileName.length); let lastName = fileName.substring(pos, fileName.length);
if (lastName.toLowerCase() !== ".jpg" && lastName.toLowerCase() !== ".png" && lastName.toLowerCase() !== ".doc" && lastName.toLowerCase() !== ".pdf") { if (lastName.toLowerCase() !== ".jpg" && lastName.toLowerCase() !== ".png" && lastName.toLowerCase() !== ".doc") {
this.$message.error("上传文件只能是 jpg,png,doc,pdf 格式"); this.$message.error("上传文件只能是 jpg,png,doc格式");
for (let i = 0; i < fileList.length; i++) {//list for (let i = 0; i < fileList.length; i++) {//list
if (fileList[i].uid === uid) { if (fileList[i].uid === uid) {
fileList.splice(i, 1) fileList.splice(i, 1)
@ -326,7 +328,12 @@ export default {
}, },
uploadHandleSuccess(response, file, fileList) { uploadHandleSuccess(response, file, fileList) {
if (response.code === 20000) { if (response.code === 20000) {
this.formData.filePath = response.data.name; if(this.formData.filePath==null || this.isCleck==true){
this.formData.filePath=response.data.name+",";
this.isCleck=false;
}else{
this.formData.filePath+=response.data.name+",";
}
} else { } else {
this.$message.error("文件上传失败:" + response.message); this.$message.error("文件上传失败:" + response.message);
} }
@ -363,6 +370,7 @@ export default {
} }
if (this.formData.filePath != null) { if (this.formData.filePath != null) {
this.choiceFile = "更换文件"; this.choiceFile = "更换文件";
this.isCleck=true;
} else { } else {
this.choiceFile = "选取文件"; this.choiceFile = "选取文件";
} }

@ -274,7 +274,7 @@
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirm"></el-button> <el-button type="primary" @click="confirm"></el-button>
<el-button type="primary" @click="cancel"></el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -525,29 +525,18 @@ export default {
return [ return [
'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1; 'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1;
}, },
showImgViewer(row) { showImgViewer(row){
var varindex = row.filePath.lastIndexOf(".");
var varext = row.filePath.substring(varindex + 1);
var isImage = this.isAssetTypeAnImage(varext);
if (isImage == true) {
this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name="; this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
this.imgList = []; this.imgList=[];
previewImage({imageUrl: row.filePath, certFileUrl: this.certFileUrl}).then(response => { previewImage({imageUrl:row.filePath,certFileUrl:this.certFileUrl}).then(response => {
if (response.code === 20000) { if (response.code === 20000) {
this.imgList.push(response.data); this.imgList=response.data;
} }
}); });
this.imgViewerVisible = true; this.imgViewerVisible = true;
const m = (e) => { const m = (e) => { e.preventDefault() };
e.preventDefault()
};
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", m, false); // document.addEventListener("touchmove", m, false); //
} else {
this.toViewCompanyCert(row);
}
}, },
closeImgViewer() { closeImgViewer() {
this.imgViewerVisible = false; this.imgViewerVisible = false;

@ -545,15 +545,12 @@ export default {
'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1; 'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1;
}, },
showImgViewer(row) { showImgViewer(row) {
var varindex = row.filePath.lastIndexOf(".");
var varext = row.filePath.substring(varindex + 1);
var isImage = this.isAssetTypeAnImage(varext);
if (isImage == true) {
this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name="; this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
this.imgList = []; this.imgList = [];
previewImage({imageUrl: row.filePath, certFileUrl: this.certFileUrl}).then(response => { previewImage({imageUrl: row.filePath, certFileUrl: this.certFileUrl}).then(response => {
if (response.code === 20000) { if (response.code === 20000) {
this.imgList.push(response.data); this.imgList=response.data;
} }
}); });
this.imgViewerVisible = true; this.imgViewerVisible = true;
@ -562,11 +559,6 @@ export default {
}; };
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", m, false); // document.addEventListener("touchmove", m, false); //
} else {
this.toViewCompanyCert(row);
}
}, },
closeImgViewer() { closeImgViewer() {
this.imgViewerVisible = false; this.imgViewerVisible = false;

@ -229,12 +229,13 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click.native="addCert(scope.row)">编辑</el-button> <el-button type="text" size="small" @click.native="addCert(scope.row)">编辑</el-button>
<el-button type="text" size="mini" @click.native="showImgViewer(scope.row)">预览</el-button> <el-button type="text" size="mini" @click.native="showImgViewer(scope.row)">预览</el-button>
<el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList" />
<el-button type="text" size="small" v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 2|| scope.row.auditStatus == 6" @click.native="deleteCompanyCert(scope.row)"></el-button> <el-button type="text" size="small" v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 2|| scope.row.auditStatus == 6" @click.native="deleteCompanyCert(scope.row)"></el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList" />
<pagination <pagination
v-show="certTotal>0" v-show="certTotal>0"
:total="certTotal" :total="certTotal"
@ -571,26 +572,17 @@ export default {
indexOf(ext.toLowerCase()) !== -1; indexOf(ext.toLowerCase()) !== -1;
}, },
showImgViewer(row){ showImgViewer(row){
var varindex= row.filePath.lastIndexOf(".");
var varext = row.filePath.substring(varindex+1);
var isImage=this.isAssetTypeAnImage(varext);
if(isImage==true){
this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name="; this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
this.imgList=[]; this.imgList=[];
previewImage({imageUrl:row.filePath,certFileUrl:this.certFileUrl}).then(response => { previewImage({imageUrl:row.filePath,certFileUrl:this.certFileUrl}).then(response => {
if (response.code === 20000) { if (response.code === 20000) {
this.imgList.push(response.data); this.imgList=response.data;
} }
}); });
this.imgViewerVisible = true; this.imgViewerVisible = true;
const m = (e) => { e.preventDefault() }; const m = (e) => { e.preventDefault() };
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", m, false); // document.addEventListener("touchmove", m, false); //
}else{
this.toViewCompanyCert(row);
}
}, },
closeImgViewer(){ closeImgViewer(){
this.imgViewerVisible = false; this.imgViewerVisible = false;

@ -555,26 +555,17 @@ export default {
indexOf(ext.toLowerCase()) !== -1; indexOf(ext.toLowerCase()) !== -1;
}, },
showImgViewer(row){ showImgViewer(row){
var varindex= row.filePath.lastIndexOf(".");
var varext = row.filePath.substring(varindex+1);
var isImage=this.isAssetTypeAnImage(varext);
if(isImage==true){
this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name="; this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
this.imgList=[]; this.imgList=[];
previewImage({imageUrl:row.filePath,certFileUrl:this.certFileUrl}).then(response => { previewImage({imageUrl:row.filePath,certFileUrl:this.certFileUrl}).then(response => {
if (response.code === 20000) { if (response.code === 20000) {
this.imgList.push(response.data); this.imgList=response.data;
} }
}); });
this.imgViewerVisible = true; this.imgViewerVisible = true;
const m = (e) => { e.preventDefault() }; const m = (e) => { e.preventDefault() };
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", m, false); // document.addEventListener("touchmove", m, false); //
}else{
this.toViewCompanyCert(row);
}
}, },
closeImgViewer(){ closeImgViewer(){
this.imgViewerVisible = false; this.imgViewerVisible = false;

@ -307,8 +307,6 @@
</el-button </el-button
> >
<el-button type="text" size="mini" @click.native="showImgViewer(scope.row)">预览</el-button> <el-button type="text" size="mini" @click.native="showImgViewer(scope.row)">预览</el-button>
<el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer"
:url-list="imgList"/>
<el-button <el-button
type="text" type="text"
size="small" size="small"
@ -327,7 +325,8 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer"
:url-list="imgList"/>
<pagination <pagination
v-show="certTotal>0" v-show="certTotal>0"
:total="certTotal" :total="certTotal"
@ -667,15 +666,11 @@ export default {
'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1; 'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1;
}, },
showImgViewer(row) { showImgViewer(row) {
var varindex = row.filePath.lastIndexOf(".");
var varext = row.filePath.substring(varindex + 1);
var isImage = this.isAssetTypeAnImage(varext);
if (isImage == true) {
this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name="; this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
this.imgList = []; this.imgList = [];
previewImage({imageUrl: row.filePath, certFileUrl: this.certFileUrl}).then(response => { previewImage({imageUrl: row.filePath, certFileUrl: this.certFileUrl}).then(response => {
if (response.code === 20000) { if (response.code === 20000) {
this.imgList.push(response.data); this.imgList=response.data;
} }
}); });
this.imgViewerVisible = true; this.imgViewerVisible = true;
@ -684,11 +679,6 @@ export default {
}; };
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", m, false); // document.addEventListener("touchmove", m, false); //
} else {
this.toViewCompanyCert(row);
}
}, },
closeImgViewer() { closeImgViewer() {
this.imgViewerVisible = false; this.imgViewerVisible = false;

@ -193,17 +193,13 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click.native="addCert(scope.row)">编辑</el-button> <el-button type="text" size="small" @click.native="addCert(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click.native="showImgViewer(scope.row)">预览</el-button> <el-button type="text" size="small" @click.native="showImgViewer(scope.row)">预览</el-button>
<el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList" /> <el-button type="text" size="small" v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 2|| scope.row.auditStatus == 6" @click.native="deleteCompanyCert(scope.row)"></el-button>
<el-button type="text" size="small" <el-button type="text" size="small" v-if="scope.row.auditStatus == 2" @click.native="explainCompanyCert(scope.row)"></el-button>
v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 2|| scope.row.auditStatus == 6"
@click.native="deleteCompanyCert(scope.row)">删除
</el-button>
<el-button type="text" size="small" v-if="scope.row.auditStatus == 2"
@click.native="explainCompanyCert(scope.row)">说明
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList"/>
<pagination <pagination
v-show="certTotal>0" v-show="certTotal>0"
:total="certTotal" :total="certTotal"
@ -274,11 +270,10 @@ import {regionDataPlus, CodeToText,} from "element-china-area-data";
import {filterCompanyCert, deleteCompanyCert, updateCompanyCert} from "@/api/purchase/companyCert"; import {filterCompanyCert, deleteCompanyCert, updateCompanyCert} from "@/api/purchase/companyCert";
import companyAddCert from "@/views/purchase/cert/supCertAddDialog"; import companyAddCert from "@/views/purchase/cert/supCertAddDialog";
import supCertSetSelectDialog from "@/views/purchase/cert/supCertSetSelectDialog"; import supCertSetSelectDialog from "@/views/purchase/cert/supCertSetSelectDialog";
import ElImageViewer from "element-ui/packages/image/src/image-viewer"
import draggable from "vuedraggable"; import draggable from "vuedraggable";
import {getCompany} from "@/api/supplier/company"; import {getCompany} from "@/api/supplier/company";
import { previewImage } from '@/api/purchase/supCompany' import { previewImage } from '@/api/purchase/supCompany';
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default { export default {
@ -539,30 +534,20 @@ export default {
}); });
}, },
isAssetTypeAnImage(ext) {
return [
'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
indexOf(ext.toLowerCase()) !== -1;
},
showImgViewer(row){ showImgViewer(row){
var varindex= row.filePath.lastIndexOf(".");
var varext = row.filePath.substring(varindex+1);
var isImage=this.isAssetTypeAnImage(varext);
if(isImage==true){
this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name="; this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
this.imgList=[]; this.imgList=[];
previewImage({imageUrl:row.filePath,certFileUrl:this.certFileUrl}).then(response => { previewImage({imageUrl:row.filePath,certFileUrl:this.certFileUrl}).then(response => {
if (response.code === 20000) { if (response.code === 20000) {
this.imgList.push(response.data); this.imgList=response.data;
} }
}); console.log(this.imgList)
this.imgViewerVisible = true; this.imgViewerVisible = true;
});
const m = (e) => { e.preventDefault() }; const m = (e) => { e.preventDefault() };
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", m, false); // document.addEventListener("touchmove", m, false); //
}else{
this.toViewCompanyCert(row);
}
}, },
closeImgViewer(){ closeImgViewer(){
this.imgViewerVisible = false; this.imgViewerVisible = false;

Loading…
Cancel
Save