From 8082bc697540d50b49614f9d0db0e2eff88948d8 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 30 Aug 2023 10:19:45 +0800
Subject: [PATCH] fix

---
 src/components/quill/index.vue          |   4 +-
 src/views/parnerOperation/learnMg.vue   |  69 +++++----------
 src/views/parnerOperation/schemeSet.vue |  16 ++--
 src/views/shop/addProduct/index.vue     | 109 +++++++++++++++++++++---
 4 files changed, 132 insertions(+), 66 deletions(-)

diff --git a/src/components/quill/index.vue b/src/components/quill/index.vue
index 6a6349c..33a7a17 100644
--- a/src/components/quill/index.vue
+++ b/src/components/quill/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
-    <el-radio-group class="type-radio"
+    <el-radio-group v-if="!readonly"
+                    class="type-radio"
                     v-model="type"
                     @change="typeChange">
       <el-radio :label="0">富文本</el-radio>
@@ -28,6 +29,7 @@
                   v-show="type"
                   ref="md"
                   :ishljs="true"
+                  :subfield="false"
                   @change="mdChange"
                   @imgAdd="imgAdd" />
   </div>
diff --git a/src/views/parnerOperation/learnMg.vue b/src/views/parnerOperation/learnMg.vue
index de3ebc5..06b1fd1 100644
--- a/src/views/parnerOperation/learnMg.vue
+++ b/src/views/parnerOperation/learnMg.vue
@@ -424,15 +424,19 @@ export default {
     },
     // 新增所属分类
     addClass () {
-      this.classifications.push({
-        edit: true,
-        id: '',
-        classificationName: ''
-      })
+      this.classifications.find(e => e.edit) ?
+        Util.errorMsg('请先保存分类！') :
+        this.classifications.push({
+          edit: true,
+          id: '',
+          classificationName: ''
+        })
     },
     // 编辑所属分类
     editClass (row) {
-      this.$set(row, 'edit', 1)
+      this.classifications.find(e => e.edit) ?
+        Util.errorMsg('请先保存分类！') :
+        this.$set(row, 'edit', 1)
     },
     // 删除所属分类
     delClass (row, i) {
@@ -496,15 +500,19 @@ export default {
     },
     // 新增标签
     addLabel () {
-      this.labels.push({
-        edit: true,
-        id: '',
-        labelName: ''
-      })
+      this.labels.find(e => e.edit) ?
+        Util.errorMsg('请先保存主题！') :
+        this.labels.push({
+          edit: true,
+          id: '',
+          labelName: ''
+        })
     },
     // 编辑标签
     editLabel (row) {
-      this.$set(row, 'edit', 1)
+      this.labels.find(e => e.edit) ?
+        Util.errorMsg('请先保存主题！') :
+        this.$set(row, 'edit', 1)
     },
     // 删除标签
     delLabel (row, i) {
@@ -576,43 +584,6 @@ export default {
       formData.append('file', data, 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
diff --git a/src/views/parnerOperation/schemeSet.vue b/src/views/parnerOperation/schemeSet.vue
index 030e4fb..2e18eca 100644
--- a/src/views/parnerOperation/schemeSet.vue
+++ b/src/views/parnerOperation/schemeSet.vue
@@ -404,15 +404,19 @@ export default {
     },
     // 新增所属分类
     addClass () {
-      this.classifications.push({
-        edit: true,
-        id: '',
-        classificationName: ''
-      })
+      this.classifications.find(e => e.edit) ?
+        Util.errorMsg('请先保存分类！') :
+        this.classifications.push({
+          edit: true,
+          id: '',
+          classificationName: ''
+        })
     },
     // 编辑所属分类
     editClass (row) {
-      this.$set(row, 'edit', 1)
+      this.classifications.find(e => e.edit) ?
+        Util.errorMsg('请先保存分类！') :
+        this.$set(row, 'edit', 1)
     },
     // 删除所属分类
     delClass (row, i) {
diff --git a/src/views/shop/addProduct/index.vue b/src/views/shop/addProduct/index.vue
index 001d65d..7dba491 100644
--- a/src/views/shop/addProduct/index.vue
+++ b/src/views/shop/addProduct/index.vue
@@ -243,8 +243,9 @@
               <el-upload class="avatar-uploader"
                          accept=".jpg,.png,.jpeg"
                          :before-remove="beforeCoverRemove"
-                         :on-success="uploadSuccess"
+                         :on-change="file => changeFile(file, 1)"
                          :limit="1"
+                         :auto-upload="false"
                          :action="api.fileupload"
                          :headers="headers"
                          name="file">
@@ -268,7 +269,8 @@
                           prop="miniProgramPictureAddress">
               <el-upload accept=".jpg,.png,.jpeg"
                          :before-upload="beforeUpload"
-                         :on-success="uploadSuccessInterface"
+                         :on-change="file => changeFile(file, 2)"
+                         :auto-upload="false"
                          :action="api.fileupload"
                          :headers="headers"
                          :show-file-list="false"
@@ -298,7 +300,8 @@
               <el-upload class="avatar-uploader"
                          accept=".jpg,.png,.jpeg"
                          :on-remove="handleMiniRemove"
-                         :on-success="uploadSuccessMini"
+                         :on-change="file => changeFile(file, 3)"
+                         :auto-upload="false"
                          :limit="1"
                          :action="api.fileupload"
                          :headers="headers"
@@ -714,6 +717,22 @@
                    @click="submitProduct">确定</el-button>
       </span>
     </el-dialog>
+
+    <!-- 剪裁组件弹窗 -->
+    <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="true"
+               :fixedNumber.sync="fixedNumber"
+               :autoCropWidth="autoCropWidth"
+               :autoCropHeight="autoCropHeight"
+               @upload="customUpload" />
+    </el-dialog>
   </div>
 </template>
 
@@ -723,6 +742,8 @@ import Setting from "@/setting";
 import quill from "@/components/quill";
 import Editor from '@tinymce/tinymce-vue'
 import editorConfig from '@/utils/editor'
+import Cropper from '@/components/img-upload/Cropper'
+import Axios from 'axios'
 export default {
   data () {
     return {
@@ -832,7 +853,15 @@ export default {
       updateTime: 0,
       nameRepeat: false,
       appletList: [],
-      isPython: false
+      isPython: false,
+
+      cropperModel: false,
+      isUpload: false,
+      fixedNumber: [1.74, 1],
+      autoCropWidth: 484,
+      autoCropHeight: 278,
+      file: {}, // 当前被选择的图片文件
+      picType: 1
     };
   },
   watch: {
@@ -879,7 +908,8 @@ export default {
     }, 1000)
   },
   components: {
-    Editor
+    Editor,
+    Cropper
   },
   methods: {
     getData () {
@@ -1033,11 +1063,11 @@ export default {
           form.mallPrices.find(e => e.settlementPriceType && e.area === 0).settlementPrice = data.settlementPrice
           this.getProfessionalClassData(form.mallDisciplines[0])
           this.getProfessionalData(form.mallDisciplines[0])
-          mall.courseHours = data.expectedCourse
-          mall.coverDrawing = data.coverUrl
-          mall.appletIcon = data.miniProgramPictureAddress
-          mall.productIntroduction = data.briefIntroduction
-          mall.marketUnitPrice = data.marketPrice
+          if (data.expectedCourse) mall.courseHours = data.expectedCourse
+          if (data.coverUrl) mall.coverDrawing = data.coverUrl
+          if (data.miniProgramPictureAddress) mall.appletIcon = data.miniProgramPictureAddress
+          if (data.briefIntroduction) mall.productIntroduction = data.briefIntroduction
+          if (data.marketPrice) mall.marketUnitPrice = data.marketPrice
           // 判断是否是python系统
           const systemIds = data.systemIds.split(',')
           this.isPython = systemIds.filter(e => e != 12 && e != 13).length
@@ -1395,6 +1425,64 @@ export default {
     uploadSuccess (res) {
       this.form.mall.coverDrawing = res.data.filesResult.fileUrl
     },
+
+    // 图片裁剪上传事件
+    customUpload (data) {
+      const formData = new FormData()
+      formData.append('file', data, this.file.name)
+      this.imgUpload(formData)
+    },
+    // 图片上传到服务器
+    imgUpload (formData) {
+      this.isUpload = true
+      Axios({
+        method: 'post',
+        url: this.api.fileUploadNakadai,
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          ...this.headers
+        },
+      }).then(({ data }) => {
+        const url = data.filesResult.fileUrl
+        if (this.picType == 2) {
+          this.form.mall.interfaceDiagrams.push(url)
+        } else {
+          this.form.mall[this.picType == 1 ? 'coverDrawing' : 'appletIcon'] = url
+        }
+      }).catch(res => { })
+      this.$refs.cropper.isDisabled = false
+      this.isUpload = false
+      this.cropperModel = false
+    },
+    // 图片改变钩子
+    changeFile (file, type) {
+      this.picType = type
+      if (type === 1 || type === 2) {
+        this.fixedNumber = [1.74, 1]
+        this.autoCropWidth = 484
+        this.autoCropHeight = 278
+      } else {
+        this.fixedNumber = [1, 1]
+        this.autoCropWidth = 57
+        this.autoCropHeight = 57
+      }
+      const { name } = file
+      const ext = name.substring(name.lastIndexOf('.') + 1)
+      if (!Util.isImg(ext)) {
+        this.$message.error('请上传图片！')
+        return false
+      }
+      this.file = file
+      this.cropperModel = true
+      this.$nextTick(() => {
+        this.$refs.cropper.updateImg({
+          url: window.URL.createObjectURL(file.raw),
+          size: file.size
+        })
+      })
+    },
+
     beforeCoverRemove () {
       this.form.mall.coverDrawing = ''
     },
@@ -1438,6 +1526,7 @@ export default {
         if (!form.classificationIds) return Util.errorMsg('请选择产品分类！')
         if (!form.typeIds) return Util.errorMsg('请选择产品类型！')
         if (!form.supplierIds.length) return Util.errorMsg('请选择供应厂商！')
+        if (this.isPython && !mall.themeId) return Util.errorMsg('请选择主题UI！')
         if (!mall.coverDrawing) return Util.errorMsg('请上传封面图！')
         if (!mall.marketUnitPrice) return Util.errorMsg('请输入市场建议单价！')
         let priceInvalid = 0