|
|
|
|
@ -1,15 +1,38 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div v-if="!options.img && formName != 3" @click="editCropper()"> <el-button type="primary" size="small">点击上传资质</el-button></div>
|
|
|
|
|
<div v-if="options.img && formName != 3" class="user-info-head" :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }" @click="editCropper()">
|
|
|
|
|
<img v-bind:src="options.img" title="点击上传资质" class="img-zz" :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="options.img && formName == 3" class="user-info-head" :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }">
|
|
|
|
|
<img v-bind:src="options.img" title="点击上传资质" class="img-zz" :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }"/>
|
|
|
|
|
|
|
|
|
|
<div class="user-info-head">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-button type="primary" icon="el-icon-view" size="small" @click="showImgViewer">资质图片预览
|
|
|
|
|
({{ imgList.length }})
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<cropperFile
|
|
|
|
|
@getCropFile="getCropFile"
|
|
|
|
|
></cropperFile>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-image-viewer style="z-index:9999" v-if="imgViewerVisible" :on-close="closeImgViewer"
|
|
|
|
|
:url-list="imgList"/>
|
|
|
|
|
|
|
|
|
|
<!-- <img v-bind:src="options.img" title="点击上传资质" class="img-zz"-->
|
|
|
|
|
<!-- :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }"/>-->
|
|
|
|
|
<!-- <cropperFile-->
|
|
|
|
|
<!-- style="position: absolute; top: 10px;left: 10px;"-->
|
|
|
|
|
<!-- @getCropFile="getCropFile"-->
|
|
|
|
|
<!-- ></cropperFile>-->
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body @opened="modalOpened" @close="closeDialog">
|
|
|
|
|
<!-- <div v-if="options.img && formName == 3" class="user-info-head"-->
|
|
|
|
|
<!-- :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }">-->
|
|
|
|
|
<!-- <img v-bind:src="options.img" title="点击上传资质" class="img-zz"-->
|
|
|
|
|
<!-- :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }"/>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<el-dialog :title="title" :visible.sync="open" width="100%" append-to-body @opened="modalOpened"
|
|
|
|
|
@close="closeDialog">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :xs="24" :md="12" :style="{height: '500px'}">
|
|
|
|
|
<el-col :xs="24" :md="18" :style="{width: '630px',height: '891px'}">
|
|
|
|
|
<vue-cropper
|
|
|
|
|
ref="cropper"
|
|
|
|
|
:img="options.img"
|
|
|
|
|
@ -22,13 +45,13 @@
|
|
|
|
|
v-if="visible"
|
|
|
|
|
/>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :md="12" :style="{height: '500px'}">
|
|
|
|
|
<div class="zz-upload-preview" :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }">
|
|
|
|
|
<img :src="previews.url" :style="previews.img" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<!-- <el-col :xs="24" :md="12" :style="{height: '500px'}">-->
|
|
|
|
|
<!-- <div class="zz-upload-preview" :style="{ width: options.autoCropWidth+ 'px', height: options.autoCropHeight + 'px' }">-->
|
|
|
|
|
<!-- <img :src="previews.url" :style="previews.img" />-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- </el-col>-->
|
|
|
|
|
</el-row>
|
|
|
|
|
<br />
|
|
|
|
|
<br/>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :lg="2" :md="2">
|
|
|
|
|
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
|
|
|
|
|
@ -56,38 +79,39 @@
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row style="margin-top: 20px">
|
|
|
|
|
|
|
|
|
|
<el-col :lg="{span: 3, offset: -3}" :md="2">
|
|
|
|
|
<el-form-item label="长度:" class="query-form-item">
|
|
|
|
|
<el-input
|
|
|
|
|
size="small"
|
|
|
|
|
style="width: 100px;"
|
|
|
|
|
splaceholder="长度"
|
|
|
|
|
v-model="options.autoCropWidth"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :lg="{span: 3, offset: 2}" :md="2">
|
|
|
|
|
<el-form-item label="宽度:" class="query-form-item">
|
|
|
|
|
<el-input
|
|
|
|
|
size="small"
|
|
|
|
|
style="width: 100px;"
|
|
|
|
|
splaceholder="宽度"
|
|
|
|
|
v-model="options.autoCropHeight"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<!-- <el-col :lg="{span: 3, offset: -3}" :md="2">-->
|
|
|
|
|
<!-- <el-form-item label="长度:" class="query-form-item">-->
|
|
|
|
|
<!-- <el-input-->
|
|
|
|
|
<!-- size="small"-->
|
|
|
|
|
<!-- style="width: 100px;"-->
|
|
|
|
|
<!-- splaceholder="长度"-->
|
|
|
|
|
<!-- v-model="options.autoCropWidth"-->
|
|
|
|
|
<!-- ></el-input>-->
|
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
|
<!-- </el-col>-->
|
|
|
|
|
<!-- <el-col :lg="{span: 3, offset: 2}" :md="2">-->
|
|
|
|
|
<!-- <el-form-item label="宽度:" class="query-form-item">-->
|
|
|
|
|
<!-- <el-input-->
|
|
|
|
|
<!-- size="small"-->
|
|
|
|
|
<!-- style="width: 100px;"-->
|
|
|
|
|
<!-- splaceholder="宽度"-->
|
|
|
|
|
<!-- v-model="options.autoCropHeight"-->
|
|
|
|
|
<!-- ></el-input>-->
|
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
|
<!-- </el-col>-->
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import store from "@/store";
|
|
|
|
|
import { VueCropper } from "vue-cropper";
|
|
|
|
|
import { uploadFile } from "@/api/basic/uploadZz";
|
|
|
|
|
import {VueCropper} from "vue-cropper";
|
|
|
|
|
import {uploadFile} from "@/api/basic/uploadZz";
|
|
|
|
|
import cropperFile from "@/views/components/cropperFile";
|
|
|
|
|
import ElImageViewer from "element-ui/packages/image/src/image-viewer"
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: { VueCropper },
|
|
|
|
|
components: {VueCropper, cropperFile, ElImageViewer},
|
|
|
|
|
props: {
|
|
|
|
|
formName: {
|
|
|
|
|
type: Object,
|
|
|
|
|
@ -112,12 +136,36 @@ export default {
|
|
|
|
|
original: true,
|
|
|
|
|
img: this.inputQuery.filePath, //裁剪图片的地址
|
|
|
|
|
autoCrop: false, // 是否默认生成截图框
|
|
|
|
|
autoCropWidth: 200, // 默认生成截图框宽度
|
|
|
|
|
autoCropHeight: 200, // 默认生成截图框高度
|
|
|
|
|
autoCropWidth: 630, // 默认生成截图框宽度
|
|
|
|
|
autoCropHeight: 891, // 默认生成截图框高度
|
|
|
|
|
fixedBox: false, // 固定截图框大小 不允许改变
|
|
|
|
|
filename: ''
|
|
|
|
|
},
|
|
|
|
|
previews: {}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
imgList: [],
|
|
|
|
|
imgViewerVisible: false,
|
|
|
|
|
|
|
|
|
|
crap: true,
|
|
|
|
|
previews: {},
|
|
|
|
|
show: true,
|
|
|
|
|
// 是否开启截图框宽高固定比例
|
|
|
|
|
fixed: false,
|
|
|
|
|
// 截图框的宽高比例
|
|
|
|
|
fixedNumber: [1, 2],
|
|
|
|
|
// 裁剪框的大小信息
|
|
|
|
|
info: true,
|
|
|
|
|
// canScale 图片是否允许滚轮缩放
|
|
|
|
|
canScale: true,
|
|
|
|
|
// infoTrue true 为展示真实输出图片宽高 false 展示看到的截图框宽高:
|
|
|
|
|
infoTrue: true,
|
|
|
|
|
// maxImgSize 限制图片最大宽度和高度
|
|
|
|
|
maxImgSize: 2000,
|
|
|
|
|
// enlarge 图片根据截图框输出比例倍数
|
|
|
|
|
enlarge: 1,
|
|
|
|
|
// mode 图片默认渲染方式
|
|
|
|
|
mode: 'contain',
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
@ -158,6 +206,20 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getCropFile(data) {
|
|
|
|
|
debugger
|
|
|
|
|
console.log(data);
|
|
|
|
|
uploadFile(data).then(response => {
|
|
|
|
|
this.open = false;
|
|
|
|
|
this.options.img = response.data.name;
|
|
|
|
|
this.inputQuery.filePath = this.inputQuery.filePath + ";" + this.options.img + ";"
|
|
|
|
|
this.splitImages()
|
|
|
|
|
this.$modal.msgSuccess("提交成功");
|
|
|
|
|
this.visible = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 上传图片
|
|
|
|
|
uploadImg() {
|
|
|
|
|
this.$refs.cropper.getCropBlob(data => {
|
|
|
|
|
@ -182,32 +244,70 @@ export default {
|
|
|
|
|
// 关闭窗口
|
|
|
|
|
closeDialog() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
showImgViewer() {
|
|
|
|
|
this.imgViewerVisible = true;
|
|
|
|
|
const m = (e) => {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
};
|
|
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
|
document.addEventListener("touchmove", m, false); // 禁止页面滑动
|
|
|
|
|
},
|
|
|
|
|
closeImgViewer() {
|
|
|
|
|
this.imgViewerVisible = false;
|
|
|
|
|
const m = (e) => {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
};
|
|
|
|
|
document.body.style.overflow = 'auto';
|
|
|
|
|
document.removeEventListener("touchmove", m, true);
|
|
|
|
|
},
|
|
|
|
|
splitImages() {
|
|
|
|
|
// 输入验证：确保filePath是字符串类型
|
|
|
|
|
if (typeof this.inputQuery.filePath !== "string") {
|
|
|
|
|
console.warn("inputQuery.filePath is not a string");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
// 分割字符串并处理边界条件
|
|
|
|
|
let imagePaths = this.inputQuery.filePath.split(";");
|
|
|
|
|
// 过滤掉空路径
|
|
|
|
|
this.imgList = imagePaths.filter(path => path.trim() !== "" && path.trim() !== null && path.trim() !== "null");
|
|
|
|
|
console.log(this.imgList);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
// 处理异常，比如可以设置一个默认值或者显示错误信息
|
|
|
|
|
this.imgList = [];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
created() {
|
|
|
|
|
this.splitImages();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.user-info-head {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
//position: relative;
|
|
|
|
|
//display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-info-head:hover:after {
|
|
|
|
|
content: '+';
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
color: #eee;
|
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
line-height: 110px;
|
|
|
|
|
}
|
|
|
|
|
//.user-info-head:hover:after {
|
|
|
|
|
// content: '+';
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 0;
|
|
|
|
|
// right: 0;
|
|
|
|
|
// top: 0;
|
|
|
|
|
// bottom: 0;
|
|
|
|
|
// color: #eee;
|
|
|
|
|
// background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
// font-size: 24px;
|
|
|
|
|
// font-style: normal;
|
|
|
|
|
// -webkit-font-smoothing: antialiased;
|
|
|
|
|
// -moz-osx-font-smoothing: grayscale;
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
// line-height: 110px;
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.zz-upload-preview {
|
|
|
|
|
|
wangwei
12 months ago