13 changed files with 916 additions and 12 deletions
-
1.env.development
-
3.env.production
-
5package.json
-
3public/static/config.js
-
11src/api/stockTask/index.js
-
2src/assets/styles/sidebar.scss
-
3src/main.js
-
15src/utils/upload.js
-
9src/views/visualCheck/checkManage/checkLog/index.vue
-
6src/views/visualCheck/checkManage/dataScreening/girdList.vue
-
515src/views/visualCheck/checkManage/mobileCheck/index.vue
-
271src/views/visualCheck/checkManage/mobileCheck/module/corpper.vue
-
84src/views/visualCheck/checkManage/paramSetting/index.vue
@ -0,0 +1,515 @@ |
|||||
|
<template> |
||||
|
<div class="app-container row-container"> |
||||
|
<!-- style="height: calc(100vh - 200px);" --> |
||||
|
<!-- style="height: calc(100vh);" --> |
||||
|
<div class="container-wrap" :style="{ height: !isMobile ? 'calc(100vh - 200px)' : '' }"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<div class="camera-container"> |
||||
|
|
||||
|
<div :class="!isMobile ? 'mobile-step' : 'mobile-step isMobile-step'"> |
||||
|
<!-- <span>选择目标位置</span> --> |
||||
|
<el-divider content-position="left"><img src="@/assets/images/collect/one.png"><span>选择目标位置</span></el-divider> |
||||
|
<div class="step-style"> |
||||
|
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="90px"> |
||||
|
<el-form-item class="collection-tree-select" label="所在架位" prop="actualShelfId"> |
||||
|
<treeselect |
||||
|
v-model="form.actualShelfId" |
||||
|
:options="regionTreeData" |
||||
|
flat |
||||
|
:multiple="false" |
||||
|
placeholder="选择架" |
||||
|
:normalizer="normalizer" |
||||
|
:default-expand-level="levelNumber" |
||||
|
style="width: 282px;" |
||||
|
:disabled="!stepOne" |
||||
|
:searchable="false" |
||||
|
@select="node=>treeSelectInput(node)" |
||||
|
> |
||||
|
<div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div> |
||||
|
</treeselect> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="collection-tree-select" label="所在层位" prop="gridId"> |
||||
|
<treeselect |
||||
|
v-model="form.gridId" |
||||
|
:options="girdData" |
||||
|
placeholder="选择层位" |
||||
|
:normalizer="normalizerGird" |
||||
|
:default-expand-level="levelNumber" |
||||
|
:disabled="!stepOne" |
||||
|
style="width: 282px; " |
||||
|
:searchable="false" |
||||
|
@select="node=>gridSelectInput(node)" |
||||
|
> |
||||
|
<div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div> |
||||
|
</treeselect> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<el-button v-if="stepOne" class="check-btn" style="margin-bottom: 18px" :loading="submitLoading" type="primary" @click="submitStepOne">下一步</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div :class="!isMobile ? 'mobile-step' : 'mobile-step isMobile-step'"> |
||||
|
<!-- <span>拍照上传</span> --> |
||||
|
<el-divider content-position="left"><img src="@/assets/images/collect/two2.png"><span>拍照上传</span></el-divider> |
||||
|
<!-- style="margin: 20px 0;" --> |
||||
|
<div v-if="!stepOne" class="step-style"> |
||||
|
<div class="mobile-check-upload"> |
||||
|
<div class="upload-input"> |
||||
|
<input |
||||
|
ref="imgFile" |
||||
|
accept="image/*" |
||||
|
capture="camera" |
||||
|
type="file" |
||||
|
multiple |
||||
|
:disabled="stepOne" |
||||
|
@change="previewFiles" |
||||
|
> |
||||
|
<div class="upload-zip"><i class="iconfont icon-shangchuan2" />{{ isMobile ? '拍照上传':'上传文件' }}</div> |
||||
|
</div> |
||||
|
<div style="margin-left: 40px;"> |
||||
|
<div v-for="(imgSrc, index) in imageSources" :key="index" style="display: inline-block; margin: 10px;"> |
||||
|
<img |
||||
|
:src="imgSrc" |
||||
|
style="display: inline-block; max-width: 100px; max-height: 100px;" |
||||
|
@click="showCoverPreview(imgSrc)" |
||||
|
> |
||||
|
<i class="iconfont icon-shanchu1" @click="deleteImage(index)" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 裁切上传 --> |
||||
|
<!-- <el-form ref="formValidate" :model="formValidate" :rules="ruleCropper" label-width="100px" class="mobile-stepForm"> |
||||
|
<el-form-item label="照片上传" prop="mainImage"> |
||||
|
<div v-if="formValidate.mainImage !== ''" class="list-img-box"> |
||||
|
<img :src="formValidate.mainImage" style="max-width:300px; max-height:150px" alt="图书" @click="showCoverPreview(formValidate.mainImage)"> |
||||
|
</div> |
||||
|
<div class="upload-zip" @click="uploadPicture('flagImg')"><i class="iconfont icon-shangchuan2" />{{ isMobile ? '拍照上传':'上传文件' }}</div> |
||||
|
<input v-model="formValidate.mainImage" type="hidden" placeholder="请添加照片"> |
||||
|
</el-form-item> |
||||
|
</el-form> --> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-button type="primary" @click="returnStepOne">上一步</el-button> |
||||
|
<el-button class="check-btn" :loading="submitLoading" type="primary" @click="saveData">下一步</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div :class="!isMobile ? 'mobile-step' : 'mobile-step isMobile-step'"> |
||||
|
<!-- <span>开始盘点</span> --> |
||||
|
<el-divider content-position="left"><img src="@/assets/images/collect/three2.png"><span>开始盘点</span></el-divider> |
||||
|
<div v-if="stepThree" class="step-style step-three-text"> |
||||
|
<p v-if="mobileResult"> |
||||
|
移动盘点已创建成功，单号【{{ mobileResult.stockBill }}】，查看详情请转到： |
||||
|
<router-link :to="{ path: '/check/check/checkLog'}"> |
||||
|
盘点日志 |
||||
|
</router-link> |
||||
|
</p> |
||||
|
<p v-else> |
||||
|
移动盘点创建失败 |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 点击缩略图看大图 --> |
||||
|
<el-dialog v-if="!isMobile" class="preview-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog" style="max-height:calc(100vh - 230px); overflow:auto;"> |
||||
|
<img style="max-width:100%; object-fit: contain;" :src="previewSrc"> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<el-dialog v-else class="mobile-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<img style="max-width:100%; max-height: 100%; object-fit: contain;" :src="previewSrc"> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 剪裁组件弹窗 --> |
||||
|
<el-dialog |
||||
|
title="裁切照片" |
||||
|
:close-on-click-modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
append-to-body |
||||
|
:visible.sync="cropperModel" |
||||
|
width="950px" |
||||
|
center |
||||
|
> |
||||
|
<cropper-image |
||||
|
ref="child" |
||||
|
@uploadImgSuccess="handleUploadSuccess" |
||||
|
/> |
||||
|
</el-dialog> |
||||
|
<!--查看大图--> |
||||
|
<el-dialog |
||||
|
:close-on-click-modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
append-to-body |
||||
|
title="查看大图" |
||||
|
:visible.sync="imgVisible" |
||||
|
center |
||||
|
> |
||||
|
<img v-if="imgVisible" :src="imgName" style="width: 100%" alt="查看"> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchRegionTree } from '@/api/deviceVI/index' |
||||
|
import { FetchShelfGridAllByShelfId } from '@/api/shelf/index' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { removeQUPrefix } from '@/utils/index' |
||||
|
import { mobileUpload } from '@/utils/upload' |
||||
|
|
||||
|
import Treeselect from '@riophae/vue-treeselect' |
||||
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
||||
|
|
||||
|
import CropperImage from './module/corpper.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'MobileCheck', |
||||
|
components: { Treeselect, CropperImage }, |
||||
|
data() { |
||||
|
return { |
||||
|
form: { actualShelfId: null, gridId: null }, |
||||
|
levelNumber: 4, |
||||
|
regionTreeData: [], |
||||
|
selectShelfVal: null, |
||||
|
selectGridVal: null, |
||||
|
girdData: [], |
||||
|
permission: { |
||||
|
add: ['admin', 'paramSetting:add'], |
||||
|
edit: ['admin', 'paramSetting:edit'], |
||||
|
del: ['admin', 'paramSetting:del'] |
||||
|
}, |
||||
|
showCoverVisible: false, // 查看大图dialog |
||||
|
previewSrc: '', // 查看大图src |
||||
|
imageSources: [], // 存储图片的数据URL |
||||
|
selectedFiles: [], // 存储选中的图片 File 对象 |
||||
|
isMobile: false, |
||||
|
submitLoading: false, |
||||
|
rules: { |
||||
|
gridId: [ |
||||
|
{ required: true, message: '请选择层位', trigger: 'change' } |
||||
|
], |
||||
|
actualShelfId: [ |
||||
|
{ required: true, message: '请选择书架', trigger: 'change' } |
||||
|
] |
||||
|
}, |
||||
|
stepOne: true, |
||||
|
stepTwo: false, |
||||
|
stepThree: false, |
||||
|
// 裁切图片参数 |
||||
|
formValidate: { |
||||
|
mainImage: '' |
||||
|
}, |
||||
|
ruleCropper: { |
||||
|
mainImage: [ |
||||
|
{ required: true, message: '请上传照片', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
cropperModel: false, |
||||
|
imgName: '', |
||||
|
imgVisible: false |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
created() { |
||||
|
FetchRegionTree().then(res => { |
||||
|
this.regionTreeData = [this.transformData(res)] |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
this.checkDevice() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理vue-treeSelect回显出现unknown问题 |
||||
|
getAutoNameUnknown(name) { |
||||
|
if (name.lastIndexOf('unknown') > -1) { |
||||
|
return name.split('(')[0] |
||||
|
} else { |
||||
|
return name |
||||
|
} |
||||
|
}, |
||||
|
normalizer(node) { |
||||
|
if (node.children && !node.children.length) { |
||||
|
delete node.children |
||||
|
} |
||||
|
return { |
||||
|
id: node.id, |
||||
|
label: node.label, |
||||
|
children: node.children, |
||||
|
isDisabled: !node.shelfId |
||||
|
} |
||||
|
}, |
||||
|
normalizerGird(node) { |
||||
|
return { |
||||
|
id: node.id, |
||||
|
label: removeQUPrefix(node.gridName) |
||||
|
} |
||||
|
}, |
||||
|
transformData(data) { |
||||
|
return { |
||||
|
id: data.fondsId, |
||||
|
fondsId: data.fondsId, |
||||
|
label: data.fondsName, |
||||
|
children: data.floors.map(floor => ({ |
||||
|
id: floor.id, |
||||
|
floorId: floor.id, |
||||
|
label: floor.floorName, |
||||
|
children: floor.regions.map(region => ({ |
||||
|
id: region.id, |
||||
|
regionId: region.id, |
||||
|
label: region.regionName, |
||||
|
parentFloorId: floor.id, |
||||
|
children: region.bookShelf.map(shelfItem => ({ |
||||
|
id: shelfItem.shelfId, |
||||
|
shelfId: shelfItem.shelfId, |
||||
|
label: shelfItem.shelfName, |
||||
|
regionName: floor.floorName + '-' + region.regionName, |
||||
|
parentRegionId: region.id |
||||
|
})) |
||||
|
})) |
||||
|
})) |
||||
|
} |
||||
|
}, |
||||
|
treeSelectInput(value) { |
||||
|
console.log(value) |
||||
|
// '3F-成人图书借阅区-001排A面' |
||||
|
this.selectShelfVal = value |
||||
|
this.form.gridId = null |
||||
|
this.getShelfGridAllByShelfId() |
||||
|
}, |
||||
|
getShelfGridAllByShelfId() { |
||||
|
const params = { |
||||
|
'shelfId': this.selectShelfVal.id |
||||
|
} |
||||
|
FetchShelfGridAllByShelfId(params).then(res => { |
||||
|
this.girdData = res |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
gridSelectInput(value) { |
||||
|
console.log(value) |
||||
|
this.selectGridVal = value |
||||
|
}, |
||||
|
checkDevice() { |
||||
|
const userAgent = navigator.userAgent.toLowerCase() |
||||
|
const mobileKeywords = ['android', 'iphone', 'ipad', 'ipod'] |
||||
|
this.isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword)) |
||||
|
}, |
||||
|
previewFiles() { |
||||
|
const files = this.$refs.imgFile.files |
||||
|
const maxImages = 3 |
||||
|
const remainingSlots = maxImages - this.imageSources.length |
||||
|
|
||||
|
if (remainingSlots === 0) { |
||||
|
this.$message({ message: '已有 3 张图片，不能再上传', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
|
||||
|
const validFiles = [] |
||||
|
for (let i = 0; i < files.length; i++) { |
||||
|
const file = files[i] |
||||
|
if (file.type === 'image/jpeg') { |
||||
|
validFiles.push(file) |
||||
|
} else { |
||||
|
this.$message({ message: `文件 ${file.name} 不是 JPG 格式，将忽略该文件`, type: 'error', offset: 8 }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (validFiles.length > remainingSlots) { |
||||
|
this.$message({ message: `最多只能再上传 ${remainingSlots} 张图片，将只处理部分选择的图片`, type: 'error', offset: 8 }) |
||||
|
} |
||||
|
|
||||
|
const numFilesToProcess = Math.min(validFiles.length, remainingSlots) |
||||
|
for (let i = 0; i < numFilesToProcess; i++) { |
||||
|
const file = validFiles[i] |
||||
|
const reader = new FileReader() |
||||
|
reader.onload = (e) => { |
||||
|
this.imageSources.push(e.target.result) |
||||
|
} |
||||
|
reader.readAsDataURL(file) |
||||
|
this.selectedFiles.push(file) |
||||
|
} |
||||
|
}, |
||||
|
submitStepOne() { |
||||
|
this.$refs.form.validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.stepOne = false |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
returnStepOne() { |
||||
|
this.stepOne = true |
||||
|
this.stepTwo = false |
||||
|
this.imageSources = [] |
||||
|
this.selectedFiles = [] |
||||
|
}, |
||||
|
saveData() { |
||||
|
// this.formValidate.mainImage === '' |
||||
|
if (this.selectedFiles.length === 0) { |
||||
|
this.$message({ message: '请上传照片', type: 'error', offset: 8 }) |
||||
|
} else { |
||||
|
this.submitLoading = true |
||||
|
|
||||
|
const params = { |
||||
|
'gridId': this.form.gridId, |
||||
|
'stockRegion': this.selectShelfVal.regionName + '-' + removeQUPrefix(this.selectGridVal.gridName) |
||||
|
} |
||||
|
mobileUpload(this.baseApi + '/api/stocktask-task/moveBill', this.selectedFiles, params).then(res => { |
||||
|
console.log(res) |
||||
|
if (res.data.code === 200) { |
||||
|
this.mobileResult = res.data.data |
||||
|
this.stepOne = false |
||||
|
this.stepTwo = true |
||||
|
} else { |
||||
|
this.$message({ message: res.data.message, type: 'error', offset: 8 }) |
||||
|
this.mobileResult = null |
||||
|
} |
||||
|
this.submitLoading = false |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
deleteImage(index) { |
||||
|
this.imageSources.splice(index, 1) |
||||
|
this.selectedFiles.splice(index, 1) |
||||
|
}, |
||||
|
handleClose(done) { |
||||
|
this.showCoverVisible = false |
||||
|
done() |
||||
|
}, |
||||
|
// 查看大图 |
||||
|
showCoverPreview(imgSrc) { |
||||
|
this.showCoverVisible = true |
||||
|
this.previewSrc = imgSrc |
||||
|
}, |
||||
|
// 裁切上传照片设置 ----- |
||||
|
uploadPicture() { |
||||
|
this.cropperModel = true |
||||
|
}, |
||||
|
// 图片上传成功后 |
||||
|
handleUploadSuccess(data) { |
||||
|
console.log(data) |
||||
|
this.formValidate.mainImage = data.url |
||||
|
this.selectedFiles = data.file |
||||
|
// switch (data.name) { |
||||
|
// case 'flagImg': |
||||
|
// this.formValidate.mainImage = 'http://ydfblog.cn/dfs/' + data.url |
||||
|
// console.log('最终输出' + data.name) |
||||
|
// break |
||||
|
// } |
||||
|
this.cropperModel = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.camera-container{ |
||||
|
height: 100%; |
||||
|
} |
||||
|
.mobile-step{ |
||||
|
position: relative; |
||||
|
height: calc(100% / 3); |
||||
|
::v-deep .el-divider--horizontal{ |
||||
|
margin: 0 !important; |
||||
|
.el-divider__text{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
img{ |
||||
|
display: block; |
||||
|
margin-top: -10px; |
||||
|
} |
||||
|
span{ |
||||
|
font-size: 16px; |
||||
|
margin-left: 10px; |
||||
|
font-weight: bold; |
||||
|
color: #0c0e1e; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// padding-left: 20px; |
||||
|
// &::before{ |
||||
|
// content: ''; |
||||
|
// position: absolute; |
||||
|
// top: 0; |
||||
|
// left: 0; |
||||
|
// width: 10px; |
||||
|
// height: 10px; |
||||
|
// border-radius: 50%; |
||||
|
// background-color: #0c0e1e; |
||||
|
// } |
||||
|
// &::after{ |
||||
|
// content: ''; |
||||
|
// position: absolute; |
||||
|
// top: 8px; |
||||
|
// left: 4px; |
||||
|
// width: 2px; |
||||
|
// height: calc(100% - 20px); |
||||
|
// background-color: #0c0e1e; |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
.isMobile-step{ |
||||
|
height: 200px; |
||||
|
} |
||||
|
|
||||
|
.mobile-check-upload{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
.upload-input{ |
||||
|
margin-top: 0 !important; |
||||
|
} |
||||
|
} |
||||
|
// .bg-button{ |
||||
|
// color: #fff; |
||||
|
// background: #1f55eb; |
||||
|
// } |
||||
|
.mobile-dialog{ |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
.upload-input input{ |
||||
|
width: 105px; |
||||
|
} |
||||
|
.step-style{ |
||||
|
display: flex; justify-content: space-between; align-items: center; height: calc(100%); padding: 0 16px; |
||||
|
} |
||||
|
.step-three-text { |
||||
|
justify-content: flex-start; |
||||
|
a{ |
||||
|
font-weight: bold; |
||||
|
color: #1f55eb; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.vue-treeselect__search { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.mobile-stepForm{ |
||||
|
::v-deep .el-form-item__content{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: end; |
||||
|
.upload-zip{ |
||||
|
margin-left: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,271 @@ |
|||||
|
<template> |
||||
|
<div class="cropper-content"> |
||||
|
<div class="cropper-box"> |
||||
|
<div class="cropper"> |
||||
|
<vue-cropper |
||||
|
ref="cropper" |
||||
|
:img="option.img" |
||||
|
:output-size="option.outputSize" |
||||
|
:output-type="option.outputType" |
||||
|
:info="option.info" |
||||
|
:can-scale="option.canScale" |
||||
|
:auto-crop="option.autoCrop" |
||||
|
:auto-crop-width="option.autoCropWidth" |
||||
|
:auto-crop-height="option.autoCropHeight" |
||||
|
:fixed="option.fixed" |
||||
|
:fixed-number="option.fixedNumber" |
||||
|
:full="option.full" |
||||
|
:fixed-box="option.fixedBox" |
||||
|
:can-move="option.canMove" |
||||
|
:can-move-box="option.canMoveBox" |
||||
|
:original="option.original" |
||||
|
:center-box="option.centerBox" |
||||
|
:height="option.height" |
||||
|
:info-true="option.infoTrue" |
||||
|
:max-img-size="option.maxImgSize" |
||||
|
:enlarge="option.enlarge" |
||||
|
:mode="option.mode" |
||||
|
@realTime="realTime" |
||||
|
@imgLoad="imgLoad" |
||||
|
/> |
||||
|
</div> |
||||
|
<!--底部操作工具按钮--> |
||||
|
<div class="footer-btn"> |
||||
|
<div class="scope-btn"> |
||||
|
<label class="btn" for="uploads">上传照片</label> |
||||
|
<input id="uploads" type="file" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" capture="camera" @change="selectImg($event)"> |
||||
|
<el-button size="mini" type="danger" icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button> |
||||
|
<el-button size="mini" type="danger" icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button> |
||||
|
<!-- <el-button size="mini" type="danger" @click="rotateLeft">↺ 左旋转</el-button> |
||||
|
<el-button size="mini" type="danger" @click="rotateRight">↻ 右旋转</el-button> --> |
||||
|
</div> |
||||
|
<div class="upload-cropper-btn"> |
||||
|
<el-button size="mini" type="success" @click="uploadImg('blob')">确认裁切 <i class="el-icon-upload" /></el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--预览效果图--> |
||||
|
<div class="show-preview"> |
||||
|
<div :style="previews.div" class="preview"> |
||||
|
<img :src="previews.url" :style="previews.img"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { VueCropper } from 'vue-cropper' |
||||
|
export default { |
||||
|
name: 'CropperImage', |
||||
|
components: { |
||||
|
VueCropper |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
previews: {}, |
||||
|
option: { |
||||
|
img: '', // 裁剪图片的地址 |
||||
|
outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1) |
||||
|
outputType: 'jpeg', // 裁剪生成图片的格式（jpeg || png || webp） |
||||
|
fixedNumber: [1.53, 1], // 截图框的宽高比例 |
||||
|
infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高 |
||||
|
maxImgSize: 10 * 1024 * 1024, // 最大图片大小 10MB |
||||
|
enlarge: 1, // 图片根据截图框输出比例倍数 |
||||
|
full: false, // 输出原图比例截图 props名full |
||||
|
canMove: true, // 上传图片是否可以移动 |
||||
|
original: false, // 上传图片按照原始比例渲染 |
||||
|
height: true, // 是否按照设备的dpr 输出等比例图片 |
||||
|
canMoveBox: true, // 截图框是否可以拖动 |
||||
|
autoCrop: true, // 是否默认生成截图框 |
||||
|
autoCropWidth: 200, // 默认截图框宽度 |
||||
|
autoCropHeight: 200, // 默认生成截图框高度 |
||||
|
fixedBox: false, // 固定截图框大小 |
||||
|
mode: 'cover', // 图片默认渲染方式 |
||||
|
info: true, // 裁剪框的大小信息 |
||||
|
canScale: true, // 图片是否允许滚轮缩放 |
||||
|
fixed: false, // 是否开启截图框宽高固定比例 |
||||
|
centerBox: false // 截图框是否被限制在图片里面 |
||||
|
}, |
||||
|
imageUrl: '' |
||||
|
} |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (this.imageUrl) { |
||||
|
URL.revokeObjectURL(this.imageUrl) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 初始化函数 |
||||
|
imgLoad(msg) { |
||||
|
console.log('工具初始化函数=====' + msg) |
||||
|
}, |
||||
|
// 图片缩放 |
||||
|
changeScale(num) { |
||||
|
num = num || 1 |
||||
|
this.$refs.cropper.changeScale(num) |
||||
|
}, |
||||
|
// 向左旋转 |
||||
|
rotateLeft() { |
||||
|
this.$refs.cropper.rotateLeft() |
||||
|
}, |
||||
|
// 向右旋转 |
||||
|
rotateRight() { |
||||
|
this.$refs.cropper.rotateRight() |
||||
|
}, |
||||
|
// 实时预览函数 |
||||
|
realTime(data) { |
||||
|
this.previews = data |
||||
|
}, |
||||
|
// 选择图片 |
||||
|
selectImg(e) { |
||||
|
const file = e.target.files[0] |
||||
|
if (!/\.(jpg|jpeg|JPG)$/.test(e.target.value)) { |
||||
|
this.$message({ |
||||
|
message: '图片类型要求：jpeg、jpg', |
||||
|
type: 'error' |
||||
|
}) |
||||
|
return false |
||||
|
} |
||||
|
// 转化为blob |
||||
|
const reader = new FileReader() |
||||
|
reader.onload = (e) => { |
||||
|
let data |
||||
|
if (typeof e.target.result === 'object') { |
||||
|
data = window.URL.createObjectURL(new Blob([e.target.result])) |
||||
|
} else { |
||||
|
data = e.target.result |
||||
|
} |
||||
|
this.option.img = data |
||||
|
} |
||||
|
// 转化为base64 |
||||
|
reader.readAsDataURL(file) |
||||
|
this.selectedFiles = file |
||||
|
}, |
||||
|
// 上传图片 |
||||
|
uploadImg(type) { |
||||
|
const _this = this |
||||
|
if (type === 'blob') { |
||||
|
// 获取截图的blob数据 |
||||
|
this.$refs.cropper.getCropBlob(async(data) => { |
||||
|
console.log('data', data) |
||||
|
// 将 Blob 转换为 File 类型 |
||||
|
const file = new File([data], 'DX.jpg', { type: data.type }) |
||||
|
// 为 File 创建一个临时的 URL |
||||
|
this.imageUrl = URL.createObjectURL(file) |
||||
|
// const formData = new FormData() |
||||
|
// formData.append('file', file, 'DX.jpg') |
||||
|
console.log('file', file) |
||||
|
const imgInfo = { |
||||
|
url: this.imageUrl, |
||||
|
file: file |
||||
|
} |
||||
|
console.log('imgInfo', imgInfo) |
||||
|
_this.$emit('uploadImgSuccess', imgInfo) |
||||
|
// 调用axios上传 |
||||
|
// const { data: res } = await _this.$http.post('/api/file/imgUpload', formData) |
||||
|
// if (res.code === 200) { |
||||
|
// _this.$message({ |
||||
|
// message: res.msg, |
||||
|
// type: 'success' |
||||
|
// }) |
||||
|
// const data = res.data.replace('[', '').replace(']', '').split(',') |
||||
|
// const imgInfo = { |
||||
|
// name: _this.cropperName, |
||||
|
// url: data[0] |
||||
|
// } |
||||
|
// console.log('imgInfo', imgInfo) |
||||
|
// _this.$emit('uploadImgSuccess', imgInfo) |
||||
|
// } else { |
||||
|
// _this.$message({ |
||||
|
// message: '文件服务异常，请联系管理员！', |
||||
|
// type: 'error' |
||||
|
// }) |
||||
|
// } |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 将base64的图片转换为file文件 |
||||
|
convertBase64UrlToBlob(urlData) { |
||||
|
const bytes = window.atob(urlData.split(',')[1])// 去掉url的头，并转换为byte |
||||
|
// 处理异常,将ascii码小于0的转换为大于0 |
||||
|
const ab = new ArrayBuffer(bytes.length) |
||||
|
const ia = new Uint8Array(ab) |
||||
|
for (var i = 0; i < bytes.length; i++) { |
||||
|
ia[i] = bytes.charCodeAt(i) |
||||
|
} |
||||
|
return new Blob([ab], { type: 'image/jpeg' }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.cropper-content{ |
||||
|
display: flex; |
||||
|
display: -webkit-flex; |
||||
|
justify-content: flex-end; |
||||
|
.cropper-box{ |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
.cropper{ |
||||
|
width: auto; |
||||
|
height: 300px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.show-preview{ |
||||
|
flex: 1; |
||||
|
-webkit-flex: 1; |
||||
|
display: flex; |
||||
|
display: -webkit-flex; |
||||
|
justify-content: center; |
||||
|
.preview{ |
||||
|
overflow: hidden; |
||||
|
border:1px solid #67c23a; |
||||
|
background: #cccccc; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.footer-btn{ |
||||
|
margin-top: 30px; |
||||
|
display: flex; |
||||
|
display: -webkit-flex; |
||||
|
justify-content: space-between; |
||||
|
.scope-btn{ |
||||
|
display: flex; |
||||
|
display: -webkit-flex; |
||||
|
justify-content: space-between; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
.upload-cropper-btn{ |
||||
|
flex: 1; |
||||
|
-webkit-flex: 1; |
||||
|
display: flex; |
||||
|
display: -webkit-flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
.btn { |
||||
|
outline: none; |
||||
|
display: inline-block; |
||||
|
line-height: 1; |
||||
|
white-space: nowrap; |
||||
|
cursor: pointer; |
||||
|
-webkit-appearance: none; |
||||
|
text-align: center; |
||||
|
-webkit-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
outline: 0; |
||||
|
-webkit-transition: .1s; |
||||
|
transition: .1s; |
||||
|
font-weight: 500; |
||||
|
padding: 8px 15px; |
||||
|
font-size: 12px; |
||||
|
border-radius: 3px; |
||||
|
color: #fff; |
||||
|
background-color: #409EFF; |
||||
|
border-color: #409EFF; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue