mo 3 роки тому
батько
коміт
a79aa42b71

+ 2 - 1
src/components/Editor/index.vue

@@ -34,11 +34,12 @@
     >
       <el-form :model="dialogForm" ref="diologForm" :rules="dialogFormRules">
         <el-form-item label="封面图地址" label-width="90px">
+          <!--        v-loading="uploadImgLoading" -->
           <el-upload
             class="avatar-uploader"
             style="line-height: 0; display: inline-block"
             :show-file-list="false"
-            v-loading="uploadImgLoading"
+
             accept=".jpg, .jpeg, .png"
             :on-success="handleImgSuccess"
             :on-error="handleUploadImgError"

+ 1 - 0
src/components/ImageCropper/index.vue

@@ -2,6 +2,7 @@
   <div class="ant-upload-preview">
     <div style="width: 100%">
       <el-upload
+      ref="upload"
         class="avatar-uploader"
         :class="[disabled ? 'uploadDisabled' : null]"
         :disabled="disabled"

+ 9 - 5
src/views/contentManager/contentOperation.vue

@@ -109,7 +109,7 @@
           <p style="color: red">上传视频尺寸建议:1242px * 2208px;</p>
         </el-form-item>
         <el-form-item v-else
-                      key="coverImage"
+                      key="coverImage1"
                       :label="type == 8 ? '广告图' : '封面图'"
                       prop="coverImage">
           <!-- <el-upload class="avatar-uploader"
@@ -149,12 +149,13 @@
             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>
-        <!-- 闪页管理 BANNER管理 APP按钮管理 广告管理 -->
+        <!-- 闪页管理 BANNER管理 APP按钮管理 广告管理   广告管理的上传图片-->
         <el-form-item label="内容"
                       v-show="type != 8 && type != 5 && type != 3 && type != 6 && outUrlRadio != 1"
                       prop="content"
                       :rules="[{ required: type != 8 && type != 5 && type != 3 && type != 6 && outUrlRadio != 1 ? true : false, message: '请编辑内容', trigger: 'blur' }]">
-          <quill-editor class="ql-editor"
+
+          <!-- <quill-editor class="ql-editor"
                         v-model="form.content"
                         ref="myQuillEditor"
                         :options="editorOption"
@@ -169,7 +170,8 @@
                      multiple
                      action="/api-web/uploadFile">
             <Button icon="ios-cloud-upload-outline"></Button>
-          </el-upload>
+          </el-upload> -->
+          <Editor :form="form.content" id='Editor1' alias="Editor1" ref="opFlow" :keyWord="'opFlow'" class="Editor" @onEditorChange='onEditorChange'/>
         </el-form-item>
         <el-form-item>
           <el-button @click="onSubmit('form')"
@@ -287,6 +289,7 @@ import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import Quill from "quill";
 import { quillEditor } from "vue-quill-editor";
+import Editor from "@/components/Editor";
 // 工具栏配置
 const toolbarOptions = [
   ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
@@ -350,7 +353,8 @@ export default {
   name: "contentOperation",
   components: {
     quillEditor,
-    ImageCropper
+    ImageCropper,
+    Editor
   },
   data () {
     let that = this;

+ 30 - 25
src/views/teacherManager/teacherOperation/components/teacherOperation.vue

@@ -396,8 +396,9 @@
       </div>
       <div class="right">
         <div class="teacherIcon">
-          <img v-if="topForm.avatar" key="avatar" :src="topForm.avatar" alt />
-          <img v-else key="avatar" src="@/assets/images/base/woman.png" alt />
+           <image-cropper ref="imgCropper" :options="cropperOptions" :imgSize="2" showSize :imageUrl="topForm.avatar?topForm.avatar:avatar1" @crop-upload-success="handleSuccess" />
+          <!-- <img v-if="topForm.avatar" key="avatar" :src="topForm.avatar" alt />
+          <img v-else key="avatar1" src="@/assets/images/base/woman.png" alt /> -->
         </div>
         <!-- <el-upload
           class="ivu-upload"
@@ -410,8 +411,8 @@
           multiple
           action="/api-web/uploadFile"
         >  -->
-           <image-cropper :options="cropperOptions" :imgSize="2" showSize :imageUrl="topForm.avatar" @crop-upload-success="handleSuccess" />
-          <el-button icon="ios-cloud-upload-outline">修改头像</el-button>
+
+          <!-- <el-button icon="ios-cloud-upload-outline" @click="$refs.imgCropper.$refs.upload.submit">修改头像</el-button> -->
           <!--
                v-if="pageType != 'create'"
             <el-button
@@ -423,7 +424,7 @@
             }"
             >新增头像</el-button
           > -->
-        </el-upload>
+        <!-- </el-upload> -->
         <p class="iconP">
           推荐图片尺寸:200x200;
           <br />支持的格式:jpg,jpeg,png,gif;
@@ -443,6 +444,8 @@ import store from "@/store";
 import { permission } from "@/utils/directivePage";
 import { jobNature, ProbationPeriodList } from "@/utils/searchArray";
 import { isvalidPhone } from "@/utils/validate";
+import ImageCropper from "@/components/ImageCropper";
+import avatar1 from '@/assets/images/base/woman.png'
 import dayjs from "dayjs";
 let validPhone = (rule, value, callback) => {
   if (!value) {
@@ -462,6 +465,7 @@ export default {
       headers: {
         Authorization: getToken(),
       },
+      avatar1,
       jobNature: jobNature,
       ProbationPeriodList: ProbationPeriodList,
       organId: null,
@@ -549,17 +553,17 @@ export default {
       },
       cropperOptions: {
         autoCrop: true, //是否默认生成截图框
-        autoCropWidth: 300, //默认生成截图框宽度
-        autoCropHeight: 300, //默认生成截图框高度
+        autoCropWidth: 200, //默认生成截图框宽度
+        autoCropHeight: 200, //默认生成截图框高度
         fixedBox: true, //是否固定截图框大小 不允许改变
         previewsCircle: false, //预览图是否是圆形
         title: "老师头像", //模态框上显示的标题
       },
     };
   },
-  // components:{
-  //   imageCropper
-  // },
+  components:{
+    ImageCropper
+  },
   created() {},
   mounted() {
     this.pageType = this.$route.query.type;
@@ -771,10 +775,11 @@ export default {
       // 获取富文本组件实例
       // let quill = this.editor
       // 如果上传成功
-      if (res.code == 200) {
+      // if (res.code == 200) {
+        console.log(res)
         // 获取光标所在位置
         this.topForm.avatar = res.data.url;
-      }
+      // }
     },
     // 选择分部
     switchOrgan() {
@@ -867,19 +872,19 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    .teacherIcon {
-      width: 150px;
-      height: 150px;
-      // border: 1px solid #444;
-      border-radius: 50%;
-      overflow: hidden;
-      margin-bottom: 20px;
-      img {
-        width: 150px;
-        height: 150px;
-        object-fit: cover;
-      }
-    }
+    // .teacherIcon {
+    //   width: 150px;
+    //   height: 150px;
+    //   // border: 1px solid #444;
+    //   border-radius: 50%;
+    //   overflow: hidden;
+    //   margin-bottom: 20px;
+    //   img {
+    //     width: 150px;
+    //     height: 150px;
+    //     object-fit: cover;
+    //   }
+    // }
   }
   .iconP {
     margin-top: 10px;