经典案例优化

src/views/modules/case/typicalcase-add-or-update.vue

@@ -70,7 +70,8 @@
                         <el-row>
                             <el-form-item label="内容描述：" prop="contentDescription">
                                 <el-upload ref="upload"
-                                        :action="uploadUrl"
+                                           :action="uploadUrl"
+                                           id ="quill-upload"
                                            :show-file-list="false"
                                            :before-upload="uploadBeforeUploadHandle"
                                            :on-success="uploadSuccessHandle"
@@ -80,7 +81,7 @@
                                                id="uploadBtn"
                                                size="small">{{ $t('upload.button') }}</el-button>
                                 </el-upload>
-                                <quill-editor ref="myQuillEditor" v-model="item.contentDescription" :options="editorOption"></quill-editor>
+                                <quill-editor ref="myQuillEditor" v-model="item.contentDescription" :options="editorOption" @focus="onEditorFocus(index)"></quill-editor>
                             </el-form-item>
                         </el-row>
                     </div>
@@ -161,28 +162,21 @@ export default {
                       [{ 'align': [] }],//对齐方式
                       ['clean'],//清除字体样式
                       ['image']//上传图片、上传视频
-                  ]
+                  ],
+                  handlers: {
+                      'image': function (value) {
+                          if (value) {
+                              // 给个点击触发Element-ui，input框选择图片文件
+                              document.querySelector('#quill-upload input').click()
+                          } else {
+                              this.quill.format('image', false);
+                          }
+                      }
+                  }
               }
           }
       },
-        // 富文本
-        quillEditor: null,
-        quillEditorToolbarOptions: [
-            ['bold', 'italic', 'underline', 'strike'],
-            ['blockquote', 'code-block', 'image'],
-            [{ 'header': 1 }, { 'header': 2 }],
-            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-            [{ 'script': 'sub' }, { 'script': 'super' }],
-            [{ 'indent': '-1' }, { 'indent': '+1' }],
-            [{ 'direction': 'rtl' }],
-            [{ 'size': ['small', false, 'large', 'huge'] }],
-            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-            [{ 'color': [] }, { 'background': [] }],
-            [{ 'font': [] }],
-            [{ 'align': [] }],
-            ['clean']
-        ],
-        uploadUrl: '',
+      uploadUrl: '',
       dataForm: {
         caseTitle: '',
         caseNumber: 0,
@@ -190,7 +184,8 @@ export default {
         typicalAbstract: '',
         dynamicItem: []
       },
-        requiredFlag: false
+        imgIndex: 0,
+      requiredFlag: false
     }
   },
   computed: {
@@ -212,6 +207,9 @@ export default {
     }
   },
   methods: {
+    onEditorFocus(index) {
+        this.imgIndex = index
+    },
     handleChange (file) {
       this.beforeAvatarUpload(file)
     },
@@ -322,11 +320,13 @@ export default {
 
     // 上传图片成功 (富文本)
     uploadSuccessHandle (res) {
-        let quill = this.$refs.myQuillEditor[0].quill;
+      let quill = this.$refs.myQuillEditor[this.imgIndex].quill;
+        console.log(quill)
       if (res.code !== 0) {
         return this.$message.error(res.msg)
       }
-      this.quill.insertEmbed(this.quill.getSelection().index, 'image', res.data.url)
+      quill.insertEmbed(quill.getSelection().index, 'image', res.data.url)
+      quill.setSelection(quill.getSelection().index + 1)
     },
     // 上传图片ends
     init () {

src/views/modules/case/typicalcase-connect-list.vue

@@ -101,6 +101,7 @@ export default {
                 selectId: '',
                 participantsNum: 0
             },
+            ids: [],
             options: [],
             responseData: []
         }

src/views/modules/case/typicalcase-detail.vue

@@ -46,7 +46,7 @@
                         <el-row>
                             <el-form-item prop="contentDescription"
                                           label="内容描述：">
-                                <p v-html="item.contentDescription"></p>
+                                <p class="ql-editor" v-html="item.contentDescription"></p>
                             </el-form-item>
                         </el-row>
                     </div>

src/views/modules/case/typicalcase-list.vue

@@ -48,6 +48,7 @@
           <template slot-scope="scope">
             <el-button v-if="$hasPermission('case:actbanner:grounding')" type="text" size="small" @click="changeGroundingHandle(scope.row)">{{ changeGroundingText(scope.row.state) }}</el-button>
             <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -66,7 +67,6 @@
     </div>
   </el-card>
 </template>
-
 <script>
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './typicalcase-add-or-update'
@@ -79,7 +79,9 @@ export default {
     return {
       mixinViewModuleOptions: {
         getDataListURL: '/cloudAnalysis/typicalcase/page',
-        getDataListIsPage: true
+        getDataListIsPage: true,
+        deleteURL: '/cloudAnalysis/typicalcase',
+        deleteIsBatch: true
       },
       dataForm: {
         caseTitle: '',