From 62182a3d0b1f28b1a54d054fda7f951382086d05 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 11 六月 2024 17:56:43 +0800
Subject: [PATCH] 最新版本
---
admin/src/components/common/UploadFaceImg.vue | 197 ++++++++++++++++++++++++
admin/src/components/business/OperaMemberWindow.vue | 5
admin/src/components/common/ImageCropper.vue | 227 ++++++++++++++++++++++++++++
admin/src/views/business/platformInterfaceLog.vue | 12
admin/package-lock.json | 5
admin/src/views/business/interfaceLog.vue | 12
admin/package.json | 1
7 files changed, 445 insertions(+), 14 deletions(-)
diff --git a/admin/package-lock.json b/admin/package-lock.json
index 38ced85..387d70a 100644
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
@@ -13920,6 +13920,11 @@
"clipboard": "^2.0.0"
}
},
+ "vue-cropper": {
+ "version": "0.6.5",
+ "resolved": "https://registry.npmmirror.com/vue-cropper/-/vue-cropper-0.6.5.tgz",
+ "integrity": "sha512-lSvY6IpeA/Tv/iPZ/FOkMHVRBPSlm7t57nuHEZFBMRNOH8ElvfqVlnHGDOAMlvPhh9gHiddiQoASS+fY0MFX0g=="
+ },
"vue-eslint-parser": {
"version": "7.6.0",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz?cache=0&sync_timestamp=1614679548045&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.6.0.tgz",
diff --git a/admin/package.json b/admin/package.json
index b47b3e7..0bfc7de 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -26,6 +26,7 @@
"qrcodejs2": "0.0.2",
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
+ "vue-cropper": "^0.6.5",
"vue-json-viewer": "^2.2.22",
"vue-router": "^3.5.1",
"vuescroll": "^4.17.3",
diff --git a/admin/src/components/business/OperaMemberWindow.vue b/admin/src/components/business/OperaMemberWindow.vue
index c3eb8db..df26e7c 100644
--- a/admin/src/components/business/OperaMemberWindow.vue
+++ b/admin/src/components/business/OperaMemberWindow.vue
@@ -41,7 +41,7 @@
<el-input v-model="form.code" placeholder="璇疯緭鍏ュ憳宸ュ伐鍙�" v-trim/>
</el-form-item>
<el-form-item label="浜鸿劯鐓х墖" prop="faceImgFull" >
- <UploadAvatarImage
+ <UploadFaceImg
:file="{ 'imgurlfull': form.faceImgFull, 'imgurl': form.faceImg }"
:uploadData="uploadData"
@uploadSuccess="uploadAvatarSuccess"
@@ -57,11 +57,12 @@
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
+import UploadFaceImg from '@/components/common/UploadFaceImg'
import {checkMobile, validIdCardNo, validIdCardNoNew} from '@/utils/form'
export default {
name: 'OperaCompanyWindow',
extends: BaseOpera,
- components: { GlobalWindow, UploadAvatarImage },
+ components: { GlobalWindow, UploadAvatarImage,UploadFaceImg },
data () {
return {
uploadData: {
diff --git a/admin/src/components/common/ImageCropper.vue b/admin/src/components/common/ImageCropper.vue
new file mode 100644
index 0000000..7929744
--- /dev/null
+++ b/admin/src/components/common/ImageCropper.vue
@@ -0,0 +1,227 @@
+<template>
+ <div class="iconShot">
+ <div class="icon-dialog">
+ <div class="clip">
+ <div class="img" ref="img">
+ <vue-cropper
+ ref="cropper"
+ :img="imgSrc"
+ :canScale="options.canScale"
+ :autoCrop="options.autoCrop"
+ :canMove="options.canMove"
+ :centerBox="options.centerBox"
+ :autoCropWidth="options.autoCropWidth"
+ :autoCropHeight="options.autoCropHeight"
+ @realTime="realTime"
+ ></vue-cropper>
+ </div>
+ <div class="previews">
+ <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="鍥剧墖">
+ <!-- <el-image-->
+ <!-- v-if="cutImgSrc"-->
+ <!-- style="width: 100px; height: 100px;vertical-align: middle;border-radius: 50%;"-->
+ <!-- :src="cutImgSrc"-->
+ <!-- fit="fill"></el-image>-->
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { VueCropper } from 'vue-cropper'
+import {upload} from "@/api/system/common";
+export default {
+ name: 'ImageCropper',
+ components: { VueCropper },
+ props: {
+ imgSrc: {
+ type: String,
+ default: ''
+ },
+ // 鍥炴樉涓婃淇濆瓨鐨勬埅鍥剧殑浣嶇疆
+ location: {
+ type: Object,
+ default () {
+ return {}
+ }
+ }
+ // iconItem:{
+ // type:Object,
+ // default(){
+ // return {};
+ // }
+ // }
+ },
+ data () {
+ return {
+ // 瀛︿範鎴浘閫夐」
+ iconForm: {
+ originImgBase64: '',
+ imgBase64: ''
+ // location: "",
+ // matchingName: "",
+ // matchingType: "",
+ // note: "",
+ // picGroupId: "0",
+ // tsId: "",
+ },
+ // 鍌ㄥ瓨鎴浘鍖哄煙鐨勫浘鐗�,鑷繁浼�
+ // imgSrc:'',
+ // 鍌ㄥ瓨鎴浘鍚庣殑鐢熸垚鐨刡ase64鍥剧墖
+ cutImgSrc: '',
+ // cropper鎻掍欢鐨勯厤缃�
+ options: {
+ canScale: false,
+ autoCrop: true,
+ canMove: false,
+ centerBox: true,
+ autoCropWidth: 200,
+ autoCropHeight: 200,
+ fixed: true,
+ fixedNumber: [1, 1]
+ },
+ // 鎴浘妗嗙浉瀵瑰浘鐗囩殑浣嶇疆
+ clipAxis: {},
+ // 鎴浘鍥炴樉鏍囧織,鍙Е鍙戜竴娆″疄鐜板洖鏄撅紝
+ flag: true
+ }
+ },
+ mounted () {
+
+ },
+ watch: {
+ },
+ methods: {
+ getImagecropper(){
+ return this.$refs.cropper
+ },
+ // 瀛︿範鎴浘妗嗗彉鍖栦簨浠�
+ realTime (data) {
+ if (data.h) {
+ // 鑾峰彇鍥剧墖鐩稿瀹瑰櫒鐨勪綅缃�
+ const img = this.$refs.cropper.getImgAxis()
+ // 鑾峰彇鎴浘妗嗙浉瀵瑰鍣ㄧ殑浣嶇疆
+ const clip = this.$refs.cropper.getCropAxis()
+ this.clipAxis.x = clip.x1 - img.x1
+ this.clipAxis.y = clip.y1 - img.y1
+ // 鑾峰彇鎴浘鍥剧墖
+ this.$refs.cropper.getCropData(img => {
+ this.clipAxis.width = data.w
+ this.clipAxis.height = data.h
+ this.cutImgSrc = img
+ })
+ // 鑾峰彇鍘熷浘base64鐨勫浘鐗�
+ // this.imageUrlToBase64(data.url);
+
+ // 鍥炬爣鍒楄〃缂栬緫鍥炴樉(鍒濆鍖栧彧瑙﹀彂涓�娆�)
+ if (this.location.height != undefined && this.flag) {
+ this.$nextTick(() => {
+ // auto crop
+ this.$refs.cropper.goAutoCrop()
+ this.$nextTick(() => {
+ // if cropped and has position message, update crop box
+ this.$refs.cropper.cropOffsertX = this.location.x + img.x1
+ this.$refs.cropper.cropOffsertY = this.location.y + img.y1
+ this.$refs.cropper.cropW = this.location.width
+ this.$refs.cropper.cropH = this.location.height
+
+ // this.iconForm.location=this.iconItem.location;
+ // this.iconForm.matchingName=this.iconItem.matchingName;
+ // this.iconForm.matchingType=this.iconItem.matchingType;
+ // this.iconForm.note=this.iconItem.note;
+ // this.picGroupId=this.iconItem.picGroupId.split(',');
+ // this.iconForm.id=this.iconItem.id;
+ // this.iconForm.tsId=this.iconItem.tsId;
+ this.flag = false
+ })
+ })
+ }
+ }
+ },
+ // 鍘熷浘閫氳繃canvas杞负base64鐨勬牸寮�
+ imageUrlToBase64 (src) {
+ // 涓�瀹氳璁剧疆涓簂et锛屼笉鐒跺浘鐗囦笉鏄剧ず
+ const image = new Image()
+ // 瑙ｅ喅璺ㄥ煙闂
+ image.setAttribute('crossOrigin', 'anonymous')
+ const imageUrl = src
+ image.src = imageUrl
+
+ // image.onload涓哄紓姝ュ姞杞�
+ image.onload = () => {
+ var canvas = document.createElement('canvas')
+ canvas.width = image.width
+ canvas.height = image.height
+ var context = canvas.getContext('2d')
+ context.drawImage(image, 0, 0, image.width, image.height)
+
+ // var quality = 0.8;
+ // 杩欓噷鐨刣ataurl灏辨槸base64绫诲瀷
+ const dataURL = canvas.toDataURL('image/jpeg')// 浣跨敤toDataUrl灏嗗浘鐗囪浆鎹㈡垚jpeg鐨勬牸寮�
+ this.iconForm.originImgBase64 = dataURL
+ }
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.iconShot {
+ .icon-dialog {
+ .clip {
+ .img {
+ height: 400px;
+ // display: inline-block;
+
+ .vue-cropper {
+ background-image: none;
+ }
+ .cropper-move {
+ cursor: default;
+ }
+ .cropper-face.cropper-move {
+ cursor: move;
+ }
+
+ }
+ .previews {
+ width: 100%;
+ height: 100px;
+ position: relative;
+ >img {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ max-height: 100%;
+ }
+ }
+ }
+
+ }
+ .icon-options {
+ font-size: 12px;
+ font-weight: 200;
+ >.el-row {
+ >.el-col {
+ >.el-row {
+ height: 36px;
+ line-height: 36px;
+ >.el-col:nth-child(1) {
+ font-weight: 600;
+ text-align: right;
+ }
+ .el-col:nth-child(2) {
+ .el-input,.el-select {
+ width: 185px !important;
+ }
+ }
+ >.el-col {
+ padding: 0 10px;
+ }
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/admin/src/components/common/UploadFaceImg.vue b/admin/src/components/common/UploadFaceImg.vue
new file mode 100644
index 0000000..5e72d18
--- /dev/null
+++ b/admin/src/components/common/UploadFaceImg.vue
@@ -0,0 +1,197 @@
+<template>
+ <div>
+ <el-upload
+ class="avatar-uploader"
+ accept=".png,.jpg,.jpeg"
+ :style="customStyle"
+ action=""
+ :auto-upload="false"
+ :show-file-list="false"
+ :on-change='openUpdateIcon'>
+ <img v-if=" file.imgurlfull" style="width: 100%;" :src="file.imgurlfull" :style="customStyle" class="avatar">
+ <div v-else :style="customStyle">
+ <i class="el-icon-plus avatar-uploader-icon"></i>
+ <div class="tips-style">{{ tipsLabel }}</div>
+ </div>
+ </el-upload>
+ <el-dialog
+ append-to-body
+ :close-on-click-modal="false"
+ title="涓婁紶鍥剧墖"
+ :visible.sync="updateImg"
+ width="800px"
+ class="icon-dialog-wrapper dialong-com-style">
+ <ImageCropper ref="iconShot" v-if="updateImg" :imgSrc="img" >
+ </ImageCropper>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="updateImg = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="uploadIcon">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import ImageCropper from '@/components/common/ImageCropper'
+import { upload } from '@/api/system/common'
+export default {
+ components: { ImageCropper },
+ props: {
+ file: {
+ type: Object,
+ default: () => {}
+ },
+ tipsLabel: '',
+ customStyle: {
+ type: String,
+ default: 'width: 90px; height: 90px;'
+ },
+ uploadData: Object
+ },
+ data () {
+ return {
+ fileInfo:{},
+ img: null,
+ updateImg: false,
+ imageSrc: null,
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/upload'
+ }
+ },
+
+ methods: {
+ uploadIcon () {
+ // 鑾峰彇瑁佸壀鍚庣殑鍥剧墖
+ this.$refs.iconShot.getImagecropper().getCropBlob((fileData) => { // 鑾峰彇褰撳墠瑁佸壀濂界殑鏁版嵁
+ // 娉ㄦ鏃剁殑data鏄竴涓狟lob鏁版嵁锛岄儴鍒嗘帴鍙ｆ帴鏀剁殑鏄疐ile杞寲鐨凢ormData鏁版嵁
+ console.log(fileData)
+ const formData = new FormData()
+
+ formData.append('folder', 'member')
+ formData.append(
+ 'file',
+ new File(
+ [fileData], // 灏咮lob绫诲瀷杞寲鎴怓ile绫诲瀷
+ this.fileInfo.name, // 璁剧疆File绫诲瀷鐨勬枃浠跺悕绉�
+ { type: this.fileInfo.type } // 璁剧疆File绫诲瀷鐨勬枃浠剁被鍨�
+ )
+ )
+ upload(formData).then(res => {
+ console.log(res)
+ this.file.imgurl = res.imgaddr
+ this.file.imgurlfull = res.url
+ this.$message.success('涓婁紶鎴愬姛')
+ this.imageSrc = res.url
+ this.updateImg = false
+ this.$emit('uploadSuccess', { imgurl: res.imgaddr, imgurlfull: res.url, name: res.originname })
+ this.$emit('uploadEnd')
+ })
+ })
+ },
+
+ // 涓婁紶鍥剧墖
+ openUpdateIcon (file, fileList) {
+ const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
+ const isLt2M = file.size / 1024 / 1024 < 2
+ if (!isJPG) {
+ this.$message.error('涓婁紶澶村儚鍥剧墖鍙兘鏄� JPG/PNG 鏍煎紡!')
+ return false
+ }
+ if (!isLt2M) {
+ this.$message.error('涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 2MB!')
+ return false
+ }
+ // 涓婁紶鎴愬姛鍚庡皢鍥剧墖鍦板潃璧嬪�肩粰瑁佸壀妗嗘樉绀哄浘鐗�
+ this.$nextTick(async () => {
+ // base64鏂瑰紡
+ // this.option.img = await fileByBase64(file.raw)
+ this.fileInfo.name = file.name
+ this.fileInfo.type = file.type
+ console.log(file, fileList)
+ this.img = URL.createObjectURL(file.raw)
+ // this.loading = false
+ this.updateImg = true
+ })
+ },
+ handleAvatarSuccess (res, file) {
+ if (res.code == 200) {
+ const { data } = res
+ this.file.imgurl = data.imgaddr
+ this.file.imgurlfull = data.url
+ this.$message.success('涓婁紶鎴愬姛')
+ this.imageSrc = data.url
+ this.updateImg = true
+ // this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname })
+ } else {
+ this.$message.error('涓婁紶澶辫触')
+ }
+ this.$emit('uploadEnd')
+ },
+ uploadError () {
+ this.$message.error('涓婁紶澶辫触')
+ this.$emit('uploadEnd')
+ },
+ // // 鎷︽埅
+ beforeAvatarUpload (file) {
+ this.$emit('uploadBegin')
+ return true
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+$image-width: 90px;
+.avatar-uploader {
+ width: $image-width;
+ height: $image-width;
+}
+::v-deep .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 {
+ line-height: 90px;
+ font-size: 28px;
+ color: #8c939d;
+ width: $image-width;
+ height: $image-width;
+ text-align: center;
+}
+.avatar {
+ width: 100% !important;
+ height: auto !important;
+ display: block;
+}
+.tips-style {
+ height: 13px;
+ font-size: 13px;
+ font-weight: 400;
+ color: #999999;
+ line-height: 13px;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-upload--picture-card{
+ width: 90px !important;
+ height: 90px !important;
+}
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+.icon {
+ -webkit-transform: translate(-50%,-50%);
+ -ms-transform: translate(-50%,-50%);
+ transform: translate(0%, -85%);
+}
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+</style>
diff --git a/admin/src/views/business/interfaceLog.vue b/admin/src/views/business/interfaceLog.vue
index 910a21c..4fd6355 100644
--- a/admin/src/views/business/interfaceLog.vue
+++ b/admin/src/views/business/interfaceLog.vue
@@ -113,16 +113,16 @@
methods: {
changeRadio (e) {
if (e === '0') {
- this.searchForm.startTime = timeForMat(0)[0]
- this.searchForm.endTime = timeForMat(0)[1]
+ this.searchForm.startDate = timeForMat(0)[0]
+ this.searchForm.endDate = timeForMat(0)[1]
this.time = timeForMat(0)
} else if (e === '1') {
- this.searchForm.startTime = timeForMat(6)[0]
- this.searchForm.endTime = timeForMat(6)[1]
+ this.searchForm.startDate = timeForMat(6)[0]
+ this.searchForm.endDate = timeForMat(6)[1]
this.time = timeForMat(6)
} else if (e === '2') {
- this.searchForm.startTime = timeForMat(29)[0]
- this.searchForm.endTime = timeForMat(29)[1]
+ this.searchForm.startDate = timeForMat(29)[0]
+ this.searchForm.endDate = timeForMat(29)[1]
this.time = timeForMat(29)
}
this.search()
diff --git a/admin/src/views/business/platformInterfaceLog.vue b/admin/src/views/business/platformInterfaceLog.vue
index c554833..70b00ca 100644
--- a/admin/src/views/business/platformInterfaceLog.vue
+++ b/admin/src/views/business/platformInterfaceLog.vue
@@ -113,16 +113,16 @@
methods: {
changeRadio (e) {
if (e === '0') {
- this.searchForm.startTime = timeForMat(0)[0]
- this.searchForm.endTime = timeForMat(0)[1]
+ this.searchForm.startDate = timeForMat(0)[0]
+ this.searchForm.endDate = timeForMat(0)[1]
this.time = timeForMat(0)
} else if (e === '1') {
- this.searchForm.startTime = timeForMat(6)[0]
- this.searchForm.endTime = timeForMat(6)[1]
+ this.searchForm.startDate = timeForMat(6)[0]
+ this.searchForm.endDate = timeForMat(6)[1]
this.time = timeForMat(6)
} else if (e === '2') {
- this.searchForm.startTime = timeForMat(29)[0]
- this.searchForm.endTime = timeForMat(29)[1]
+ this.searchForm.startDate = timeForMat(29)[0]
+ this.searchForm.endDate = timeForMat(29)[1]
this.time = timeForMat(29)
}
this.search()
--
Gitblit v1.9.3