添加裁切功能

src/components/ImageCropper/index.vue

@@ -2,6 +2,7 @@
     <div class="ant-upload-preview">
         <div style="width: 100%">
             <el-upload class="avatar-uploader" :class="[disabled ? 'uploadDisabled' : null]" :disabled="disabled" :accept="accept" :show-file-list="false" action :before-upload="beforeUpload" :http-request="handleChange">
+                <i v-if="isDelete && imageUrl" class="el-icon-error" @click.stop="onDelete" style="position: absolute;right: -14px;font-size: 24px;top: -14px;color: #787878;background: #fff;"></i>
                 <img v-if="imageUrl" :src="imageUrl" class="avatar" :style="showBox" />
                 <span v-else>
                     <i v-if="loading" class="el-icon-loading avatar-uploader-icon" :style="showBox"></i>
@@ -28,6 +29,7 @@ export default {
       default: function() {
         return {
           autoCrop: true, //是否默认生成截图框
+          enlarge: 1, //  图片放大倍数
           autoCropWidth: 200, //默认生成截图框宽度
           autoCropHeight: 200, //默认生成截图框高度
           fixedBox: false, //是否固定截图框大小 不允许改变
@@ -36,6 +38,7 @@ export default {
         }
       }
     },
+    // 显示图片原始图片
     showSize: {
       type: Boolean,
       default: false,
@@ -45,11 +48,16 @@ export default {
       type: Number,
       default: 2
     },
+    isDelete: {
+      type: Boolean,
+      default: false
+    },
     // 图片地址
     imageUrl: {
       type: String,
       default: ''
     },
+    // 默认图片格式
     accept: {
       type: String,
       default: '.png,.jpg,.jpeg,.gif'
@@ -86,6 +94,9 @@ export default {
     }
   },
   methods: {
+    onDelete() { // 删除图片
+      this.$emit('update:imageUrl', '')
+    },
     //从本地选择文件
     handleChange(info) {
       if (this.isStopRun) {
@@ -166,7 +177,7 @@ export default {
   margin-right: 20px;
   cursor: pointer;
   position: relative;
-  overflow: hidden;
+  // overflow: hidden;
 }
 ::v-deep .avatar-uploader.uploadDisabled {
   .el-upload--text {

src/views/categroyManager/specialSetup/branchSetting.vue

@@ -217,7 +217,7 @@
           :label-width="formLabelWidth"
         >
           <div style="width: 300px !important" class="ant-upload-preview">
-            <el-upload
+            <!-- <el-upload
               class="avatar-uploader"
               action="/api-web/uploadFile"
               accept=".png"
@@ -236,7 +236,23 @@
                 <i class="el-icon-plus avatar-uploader-icon"></i>
                 <span class="upload-desc">添加上传图片</span>
               </span>
-            </el-upload>
+            </el-upload> -->
+            <image-cropper
+              :options="{
+                autoCrop: true, //是否默认生成截图框
+                autoCropWidth: 300, //默认生成截图框宽度
+                autoCropHeight: 300, //默认生成截图框高度
+                fixedBox: true, //是否固定截图框大小 不允许改变
+                previewsCircle: false, //预览图是否是圆形
+                title: '上传企业公章', //模态框上显示的标题
+              }"
+              isDelete
+              :imgSize="5"
+              accept=".png"
+              :acceptArray="['image/png']"
+              :imageUrl.sync="form.corporateSeal"
+              @crop-upload-success="cropSuccess1"
+            />
             <div class="tips" style="line-height: 1.3; color: red">
               请上传透明背景PNG格式公章图片；<br />
               仅支持图片格式：png，大小：5MB；
@@ -249,7 +265,7 @@
           :label-width="formLabelWidth"
         >
           <div style="width: 300px !important" class="ant-upload-preview">
-            <el-upload
+            <!-- <el-upload
               class="avatar-uploader"
               action="/api-web/uploadFile"
               accept=".png"
@@ -268,7 +284,23 @@
                 <i class="el-icon-plus avatar-uploader-icon"></i>
                 <span class="upload-desc">添加上传图片</span>
               </span>
-            </el-upload>
+            </el-upload> -->
+            <image-cropper
+              :options="{
+                autoCrop: true, //是否默认生成截图框
+                autoCropWidth: 300, //默认生成截图框宽度
+                autoCropHeight: 300, //默认生成截图框高度
+                fixedBox: true, //是否固定截图框大小 不允许改变
+                previewsCircle: false, //预览图是否是圆形
+                title: '上传企业财务公章', //模态框上显示的标题
+              }"
+              isDelete
+              :imgSize="5"
+              accept=".png"
+              :acceptArray="['image/png']"
+              :imageUrl.sync="form.corporateFinancialSeal"
+              @crop-upload-success="cropSuccess2"
+            />
             <div class="tips" style="line-height: 1.3; color: red">
               请上传透明背景PNG格式公章图片；<br />
               仅支持图片格式：png，大小：5MB；
@@ -376,9 +408,10 @@ import {
 } from "@/api/specialSetting";
 import { vaildStudentUrl } from "@/utils/validate";
 import { queryEmployByOrganId } from "@/api/systemManage";
+import ImageCropper from "@/components/ImageCropper";
 export default {
   name: "branchSetting",
-  components: { pagination, qrCode },
+  components: { pagination, qrCode, ImageCropper },
   data() {
     return {
       headers: {
@@ -446,6 +479,12 @@ export default {
     this.getAreaList();
   },
   methods: {
+    cropSuccess1(data) {
+      this.form.corporateSeal = data.data.url;
+    },
+    cropSuccess2(data) {
+      this.form.corporateFinancialSeal = data.data.url;
+    },
     onReSet(){
       this.searchForm.search = ''
       this.search();

src/views/organManager/components/organInfo.vue

@@ -81,7 +81,7 @@
           ]"
         >
           <div style="width: 300px !important" class="ant-upload-preview">
-            <el-upload
+            <!-- <el-upload
               class="avatar-uploader"
               :class="[isDisabled ? 'uploadDisabled' : null]"
               action="/api-web/uploadFile"
@@ -101,7 +101,23 @@
                 <i class="el-icon-plus avatar-uploader-icon"></i>
                 <span class="upload-desc">添加上传图片</span>
               </span>
-            </el-upload>
+            </el-upload> -->
+            <image-cropper
+              :options="{
+                autoCrop: true, //是否默认生成截图框
+                autoCropWidth: 300, //默认生成截图框宽度
+                autoCropHeight: 300, //默认生成截图框高度
+                fixedBox: true, //是否固定截图框大小 不允许改变
+                previewsCircle: false, //预览图是否是圆形
+                title: '上传企业公章', //模态框上显示的标题
+              }"
+              :disabled="isDisabled"
+              :imgSize="5"
+              accept=".png"
+              :acceptArray="['image/png']"
+              :imageUrl="form.corporateChops"
+              @crop-upload-success="cropSuccess1"
+            />
             <div
               class="tips"
               v-show="!isDisabled && tenantInfo != 'SETTING'"
@@ -124,7 +140,7 @@
           ]"
         >
           <div style="width: 300px !important" class="ant-upload-preview">
-            <el-upload
+            <!-- <el-upload
               class="avatar-uploader"
               :class="[isDisabled ? 'uploadDisabled' : null]"
               action="/api-web/uploadFile"
@@ -144,7 +160,23 @@
                 <i class="el-icon-plus avatar-uploader-icon"></i>
                 <span class="upload-desc">添加上传图片</span>
               </span>
-            </el-upload>
+            </el-upload> -->
+            <image-cropper
+              :options="{
+                autoCrop: true, //是否默认生成截图框
+                autoCropWidth: 300, //默认生成截图框宽度
+                autoCropHeight: 300, //默认生成截图框高度
+                fixedBox: true, //是否固定截图框大小 不允许改变
+                previewsCircle: false, //预览图是否是圆形
+                title: '上传企业财务公章', //模态框上显示的标题
+              }"
+              :disabled="isDisabled"
+              :imgSize="5"
+              accept=".png"
+              :acceptArray="['image/png']"
+              :imageUrl="form.corporateFinanceChops"
+              @crop-upload-success="cropSuccess2"
+            />
             <div
               class="tips"
               v-show="!isDisabled && tenantInfo != 'SETTING'"
@@ -508,9 +540,13 @@ export default {
   methods: {
     //上传图片成功
     cropSuccess(data) {
-      // this.imgUrl = data.data.avatar
       this.form.logo = data.data.url;
-      console.log(this.form.logo);
+    },
+    cropSuccess1(data) {
+      this.form.corporateChops = data.data.url;
+    },
+    cropSuccess2(data) {
+      this.form.corporateFinanceChops = data.data.url;
     },
     themeChange(item) {
       // 切换主题时设置跟主题对应的主题色