From 0440ca2be24e4aa0230b9eba3fa2125609fea05d Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 13 Dec 2022 15:34:50 +0800
Subject: [PATCH] fix

---
 src/components/img-upload/Cropper.vue |   6 +-
 src/components/modules/content.vue    | 127 ++++++++++++++++++++++++--
 src/const/modules.js                  |  27 +++---
 src/pages/article/list/index.vue      |   2 +-
 src/pages/column/page/application.vue |  10 +-
 src/pages/column/page/edu.vue         |   1 +
 src/pages/column/page/research.vue    |   8 +-
 7 files changed, 151 insertions(+), 30 deletions(-)

diff --git a/src/components/img-upload/Cropper.vue b/src/components/img-upload/Cropper.vue
index 93b7cf4..81591e8 100644
--- a/src/components/img-upload/Cropper.vue
+++ b/src/components/img-upload/Cropper.vue
@@ -17,7 +17,7 @@
           :auto-crop-width="option.autoCropWidth"
           :auto-crop-height="option.autoCropHeight"
           :fixed-box="option.fixedBox"
-          :fixed="option.fixed"
+          :fixed="fixed"
           :fixed-number="fixedNumber"
           @realTime="realTime" />
         <!-- <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"></vueCropper> -->
@@ -80,6 +80,10 @@ export default {
     fixedNumber: {
       type: Array,
       default: [1, 0.26]
+    },
+    fixed: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
diff --git a/src/components/modules/content.vue b/src/components/modules/content.vue
index 7d78745..45f472f 100644
--- a/src/components/modules/content.vue
+++ b/src/components/modules/content.vue
@@ -9,10 +9,11 @@
           <el-upload
             v-if="item.type === 'upload'"
             class="uploader"
-            accept=".jpg,.png,.jpeg"
-            :on-success="res => uploadSuccess(res, data.form)"
+            accept=".jpg,.png,.jpeg,.gif"
+            :on-change="res => changeFile(res, data.form)"
             :show-file-list="false"
-            :action="api.upload">
+            :action="api.upload"
+            :auto-upload="false">
               <img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
               <div class="uploader-default" v-else>
                 <i class="el-icon-plus"></i>
@@ -39,17 +40,32 @@
         <el-button type="primary" @click="contentSubmit">确定</el-button>
       </span>
     </el-dialog>
+
     <Link ref="link" :visible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
+
+    <!-- 剪裁组件弹窗 -->
+    <el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false">
+      <Cropper
+        ref="cropper"
+        :img-file.sync="file"
+        :is-upload="isUpload"
+        :fixed="fixed"
+        :fixedNumber.sync="fixedNumber"
+        @upload="customUpload" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Link from '@/components/modules/link'
 import Util from '@/libs/util'
+import Cropper from '@/components/img-upload/Cropper'
+import Axios from 'axios'
 export default {
   props: ['data', 'visible'],
   components: {
-    Link
+    Link,
+    Cropper
   },
   data() {
     return {
@@ -57,6 +73,13 @@ export default {
       linkVisible: false,
       linkForm: {},
       curIndex: 0,
+      cropperModel: false,
+      isUpload: false,
+      file: {}, // 当前被选择的图片文件
+      fileId: '',
+      curForm: {},
+      fixed: false,
+      fixedNumber: [0.88, 1]
     };
   },
   watch: {
@@ -75,6 +98,14 @@ export default {
       // 这两张类型的模块才需要处理参数
       if (type === 'form' || type === 'introduce') {
         forms.map(e => {
+          if (e.type === 'upload') {
+            if (e.fixedNumber) {
+              this.fixed = true
+              this.fixedNumber = e.fixedNumber
+            } else {
+              this.fixed = false
+            }
+          }
           if (e.required) {
             this.rules[e.prop] = [
               {
@@ -90,12 +121,88 @@ export default {
     close() {
       this.$emit('update:visible', false)
     },
-    // 上传成功
-    uploadSuccess(res, row) {
-      // let url = this.form.columnBanner
-      // url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
-      this.$set(row, 'pic', res.url)
-      // row.pic = res.url
+    // 图片裁剪上传事件
+    customUpload(data) {
+      const blob = this.dataURItoBlob(data)
+      const formData = new FormData()
+      formData.append('file', blob, this.file.name)
+      this.imgUpload(formData)
+    },
+    // 压缩图片
+    compress(img) {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      // let initSize = img.src.length;
+      const width = img.width
+      const height = img.height
+      canvas.width = width
+      canvas.height = height
+      // 铺底色
+      ctx.fillStyle = '#fff'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(img, 0, 0, width, height)
+      // 进行压缩
+      const ndata = canvas.toDataURL('image/jpeg', 0.8)
+      return ndata
+    },
+    // base64转成bolb对象
+    dataURItoBlob(base64Data) {
+      let byteString
+      if (base64Data.split(',')[0].indexOf('base64') >= 0) {
+        byteString = atob(base64Data.split(',')[1])
+      } else {
+        byteString = unescape(base64Data.split(',')[1])
+      }
+      const mimeString = base64Data
+        .split(',')[0]
+        .split(':')[1]
+        .split(';')[0]
+      const ia = new Uint8Array(byteString.length)
+      for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i)
+      }
+      return new Blob([ia], {
+        type: mimeString
+      })
+    },
+    // 图片上传到服务器
+    imgUpload(formData) {
+      this.isUpload = true
+      Axios({
+        method: 'post',
+        url: this.api.upload,
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        },
+      }).then(({ data }) => {
+        this.$set(this.curForm, 'pic', data.url)
+      }).catch(res => {})
+      this.$refs.cropper.isDisabled = false
+      this.isUpload = false
+      this.cropperModel = false
+    },
+    // 图片改变钩子
+    changeFile(file, form) {
+      const { size, name } = file
+      const ext = name.substring(name.lastIndexOf('.') + 1)
+      if (!Util.isImg(ext)) {
+        this.$message.error('请上传图片！')
+        return false
+      }
+      if (size / 1024 / 1024 > 5) {
+        this.$message.error('请上传5M以内的图片！')
+        return false
+      }
+      this.file = file
+      this.curForm = form
+      this.cropperModel = true
+      this.$nextTick(() => {
+        this.$refs.cropper.updateImg({
+          url: window.URL.createObjectURL(file.raw),
+          size: file.size
+        })
+      })
     },
     // 展示链接设置
     toLink(row, i = 0) {
diff --git a/src/const/modules.js b/src/const/modules.js
index 67ff9f2..5f67a88 100644
--- a/src/const/modules.js
+++ b/src/const/modules.js
@@ -1426,7 +1426,8 @@ export default {
           type: 'upload',
           prop: 'pic',
           label: '图片',
-          required: true
+          required: true,
+          fixedNumber: [0.88, 1]
         },
         {
           type: 'input',
@@ -2788,7 +2789,7 @@ export default {
       list: [
         {
           pic: 'http://192.168.31.136/images/research/3.png',
-          title: 'Accelerator',
+          title: 'Accelerator Cryogenic System',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -2803,7 +2804,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/research/4.png',
-          title: 'Physics',
+          title: 'Accelerator Laser Science ',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -2818,7 +2819,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/research/5.png',
-          title: 'Mechanical Engineering',
+          title: 'Quantum Materials',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -2833,7 +2834,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/research/6.png',
-          title: 'Digital Light-source',
+          title: 'Surface Science and Catalysis',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -2848,7 +2849,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/research/7.png',
-          title: 'Beam Lines',
+          title: 'Atomic and Molecular Science',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -2863,7 +2864,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/research/8.png',
-          title: 'End Stations',
+          title: 'Atmospheric and Interstellar Science',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -3358,7 +3359,7 @@ export default {
       list: [
         {
           pic: 'http://192.168.31.136/images/application/3.png',
-          title: 'Accelerator',
+          title: 'Biomedicine',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -3373,7 +3374,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/application/4.png',
-          title: 'Physics',
+          title: 'Advanced Materials ',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -3388,7 +3389,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/application/5.png',
-          title: 'Mechanical Engineering',
+          title: 'Advanced Manufacturing',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -3403,7 +3404,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/application/6.png',
-          title: 'Digital Light-source',
+          title: 'High-throughput Measurements ',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -3418,7 +3419,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/application/7.png',
-          title: 'Beam Lines',
+          title: 'Marine Titanium Alloy',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -3433,7 +3434,7 @@ export default {
         },
         {
           pic: 'http://192.168.31.136/images/application/8.png',
-          title: 'End Stations',
+          title: 'Lead Bismuth Reactor',
           link: {
             linkName: '无',
             connectionType: 1,
diff --git a/src/pages/article/list/index.vue b/src/pages/article/list/index.vue
index ce18694..135281e 100644
--- a/src/pages/article/list/index.vue
+++ b/src/pages/article/list/index.vue
@@ -2,7 +2,7 @@
   <div class="flex page">
     <div style="width: 218px;border-right: 1px solid #EBEDF0">
       <p class="page-name mb">全部栏目</p>
-      <div style="height: 504px;overflow: auto">
+      <div style="height: calc(100% - 50px);overflow: auto">
         <el-tree ref="column" :data="columns" highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id" @node-click="initData"></el-tree>
       </div>
     </div>
diff --git a/src/pages/column/page/application.vue b/src/pages/column/page/application.vue
index 7c5b1dd..5aca6c2 100644
--- a/src/pages/column/page/application.vue
+++ b/src/pages/column/page/application.vue
@@ -243,13 +243,17 @@ export default {
     height: 353px;
   }
   .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 143px;
     font-size: 30px;
     font-family: SFProDisplay-Bold, SFProDisplay;
     font-weight: bold;
-    line-height: 143px;
-    color: #272727;
+    line-height: 40px;
     text-align: center;
-    background-color: #fff;
+    color: #272727;
+    background-color: #F5F5F5;
   }
 }
 .news-block {
diff --git a/src/pages/column/page/edu.vue b/src/pages/column/page/edu.vue
index 5af548a..13d61ae 100644
--- a/src/pages/column/page/edu.vue
+++ b/src/pages/column/page/edu.vue
@@ -96,6 +96,7 @@ export default {
       text-align: right;
       .texts {
         left: 0;
+        text-align: left;
       }
     }
   }
diff --git a/src/pages/column/page/research.vue b/src/pages/column/page/research.vue
index 077f785..e9fd034 100644
--- a/src/pages/column/page/research.vue
+++ b/src/pages/column/page/research.vue
@@ -174,12 +174,16 @@ export default {
     height: 353px;
   }
   .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 143px;
     font-size: 30px;
     font-family: SFProDisplay-Bold, SFProDisplay;
     font-weight: bold;
-    line-height: 143px;
-    color: #272727;
+    line-height: 40px;
     text-align: center;
+    color: #272727;
     background-color: #F5F5F5;
   }
 }