askbot-dragon 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/fielListView.vue

@@ -36,8 +36,9 @@
                    <!-- @click="openDialog(item, item.name)" -->
                     <span @click.stop="deleteAttch(index)"><i class="iconfont guoran-a-16-09"></i></span>
                     <div class="attch-item-left">
+                        <i v-if="item.url == ''" class="el-icon-loading" style="color:#366AFF;margin: 5px;"></i>
                         <img src="../assets/image/video.png"
-                            v-if="setSrc(item.name) == 'video'" />
+                            v-else-if="setSrc(item.name) == 'video'" />
                         <img src="../assets/image/image.png"
                             v-else-if="setSrc(item.name) == 'image'" />
                         <img src="../assets/image/txt.png"

package/src/components/formTemplate.vue

@@ -58,15 +58,16 @@
                     :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
                     v-if="item.formField.type==='TEXTAREA'&& item.fieldId!=='workorder_description'"
           ></el-input>
-          <ckeditor
+          <div v-else-if="item.fieldId === 'workorder_description'">
+            <ckeditor
               :editor="ckeditor.editor"
               v-model="item.value"
               :config="{...ckeditor.editorConfig,placeholder:item.formField.extInfo && item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'}"
-              v-else-if="item.fieldId==='workorder_description'"
               @ready="(editor)=>currentEditor=editor"
               @focus="(zh,editor)=>currentEditor=editor"
-          ></ckeditor>
-          <file-list-view v-else-if="item.fieldId==='workorder_description'" :attachmentList="attachmentList" @attachDeleteAttch="attachDeleteAttch"></file-list-view>
+            ></ckeditor>
+            <file-list-view  :attachmentList="attachmentList" @attachDeleteAttch="attachDeleteAttch"></file-list-view>
+          </div>
           <el-date-picker
                   v-model=item.value
                   type="date"
@@ -1904,9 +1905,74 @@ export default {
         }
       }
     },
+    verificationDescription () {
+      let textFlag = true
+      let imageFlag = true
+      let attachmentFlag = true
+      let errorText = ''
+      let checkDescription = {
+        checkText:this.workOrderDestail.checkText ? this.workOrderDestail.checkText : false,
+        checkImage:this.workOrderDestail.checkImage ? this.workOrderDestail.checkImage : false,
+        checkAttachment:this.workOrderDestail.checkAttachment ? this.workOrderDestail.checkAttachment : false,
+        required:this.workOrderDestail.required ? this.workOrderDestail.required : false,
+      }
+      if (checkDescription.checkText) {
+        if (!this.workOrderDestail.value) {
+          textFlag = false
+        } else {
+          let d = document.createElement('div')
+          d.innerHTML = this.workOrderDestail.value
+          if (!d.innerText) {
+            textFlag = false
+          }
+          d = null
+        }
+      }
+      if (checkDescription.checkImage && !this.workOrderDestail.value.includes('img')) {
+        imageFlag = false
+      }
+      if (checkDescription.checkAttachment && this.attachments.length == 0) {
+        attachmentFlag = false
+      }
+      if (!textFlag) {
+        errorText = '问题描述必须要有文字'
+      }
+      if (!imageFlag) {
+        errorText = '问题描述必须要有图片'
+      }
+      if (!attachmentFlag) {
+        errorText = '问题描述必须要有附件'
+      }
+      if (!textFlag && (!imageFlag || !attachmentFlag)) {
+        errorText = '问题描述必须要有文字和' + !imageFlag ? '图片' : '附件'
+      }
+      if (!imageFlag && !attachmentFlag) {
+        errorText = '问题描述必须要有图片和附件'
+      }
+      if (!imageFlag && !attachmentFlag && !textFlag) {
+        errorText = '问题描述必须要有文字、图片和附件'
+      }
+      if (errorText) {
+        this.$message.error(errorText);
+        return false
+      } else {
+        if (checkDescription.required && !this.workOrderDestail.value) {
+          this.$message.error('问题描述是必填的');
+          return false
+        }
+        return true
+      }
+    },
     //提交按钮事件
     submitClick() {
-
+      if (this.uploadImgQueue || this.attachmentList.some(arrach => { return !arrach.url })) {
+        this.$message.warning('文件正在上传，请稍后')
+        return
+      }
+      if(!this.verificationDescription()) {
+        return
+      }
+      console.log(this.workOrderDestail);
       for (let i=0;i<this.formShow.form.formFieldRelation.length;i++)
       {
         if(this.formShow.form.formFieldRelation[i].formField.type==='CASCADER')
@@ -1990,13 +2056,15 @@ export default {
       }
       let extInfo = {
         extInfoFieldValue:this.extInfoFieldValue,
-        attachmentList:this.attachmentList
       }
       this.$set(this.formShow,'extInfo',extInfo)
       let newForm = JSON.parse(JSON.stringify(this.formShow));
       for (let i=0;i<newForm.form.formFieldRelation.length;i++){
         if (newForm.form.formFieldRelation[i].fieldId === 'workorder_description'){
           newForm.form.formFieldRelation[i].value =  newForm.form.formFieldRelation[i].value.replace(/<img/g, "<img onclick='previewImage(this)' ")
+          console.log(newForm.form.formFieldRelation[i]);
+          this.$set(newForm.form.formFieldRelation[i].formField.extInfo,'attachments',this.attachments)
+          this.$set(newForm.form.formFieldRelation[i].formField.extInfo,'attachmentList',this.attachmentList)
         }
       }
       console.debug('formShow',this.formShow.form,newForm.form)
@@ -2733,16 +2801,38 @@ export default {
               this.uploadImgQueue = false
             }
           }
-          if (uploadList[index].childNodes[0].getAttribute('type') == 'MyFile') {
+          if (uploadList[index].childNodes[0].getAttribute('type') == 'MyFile' || uploadList[index].childNodes[0].getAttribute('type') == 'FileUpload') {
             let span = uploadList[index].getElementsByClassName('ask-component-placeholder-span')[0]
             const text = span.innerText
-            const value = span.getAttribute('data')
-            this.attachments.push(value)
-            console.log(span.innerText,'texttext');
-            this.attachmentList.push({
-              name: text,
-              url: value
-            })
+            let value = ''
+            let id = ''
+            if (typeof span.getAttribute('data') == 'string' && !span.getAttribute('data').includes('default')) {
+              id = span.getAttribute('data')
+              this.attachmentList.push({
+                name: text,
+                id: id,
+                url: '',
+              })
+            } else {
+              value = JSON.parse(span.getAttribute('data')).default
+              id = JSON.parse(span.getAttribute('data')).id
+              this.attachments.push(value)
+              this.attachmentList = this.attachmentList.filter(attach => {
+                return attach.id != id
+              })
+              this.attachmentList.push({
+                name: text,
+                url: value,
+              })
+              let time = setTimeout(() => {
+                this.currentEditor.model.change(writer => {
+                  writer.setSelection(writer.createPositionAt(this.currentEditor.model.document.getRoot(), 'end'));
+                })
+                this.currentEditor.editing.view.focus();
+                clearTimeout(time)
+              }, 500)
+            }
+            uploadList[index].setAttribute('type', 'MyFile')
             let ht = '<span class="ask-component-placeholder-container">' + uploadList[index].innerHTML + '</span>'
             newVal = newVal.replace(ht, '')
             span = null

package/src/components/utils/ckeditor.js

@@ -54,7 +54,17 @@ class MyUploadAdapter {
         );
         res.then(resp=>{
             imgInfo.url = ossFileUrl(ossConfig, resp.name)
-            console.log(imgInfo)
+            let root =  this.editor.model.document.getRoot()
+            let children = root.getChildren()
+            for(let child of children){
+                for (let index = 0; index < child._children._nodes.length; index++) {
+                    if(child._children._nodes[index].name == 'askComponentPlaceholderContainer'){
+                        this.editor.model.change(writer => {
+                            writer.remove(child);
+                        });
+                    }
+                }
+            }
             let command = this.editor.commands.get("insertAskComponent");
             command.execute({
                 tag: "img",

package/src/components/utils/ckeditorfileUpload/common.js

@@ -1,5 +1,6 @@
 import Command from "@ckeditor/ckeditor5-core/src/command";
 import { multipartUpload, ossFileUrl } from "../AliyunIssUtil";
+import { v4 as uuidv4 } from "uuid";
 const ossConfig = {
     region: "oss-cn-zhangjiakou",
     //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
@@ -30,14 +31,28 @@ export default class FileCommand extends Command {
             let files = inputObj.files;
             for (let index = 0; index < files.length; index++) {
                 const filed = files[index];
+                let uid =  uuidv4()
+                let command = this.editor.commands.get("insertAskComponent");
+                command.execute({
+                    tag: "span-editable",
+                    options: {
+                        name: filed.name,
+                        data: uid,
+                        editable:false,
+                        type:'FileUpload'
+                    },
+                })
                 this.upload(filed).then(res =>{
                     // 需要回调通知父组件 上传成功
-                    let command = this.editor.commands.get("insertAskComponent");
+                    let data = JSON.stringify({
+                        id: uid,
+                        default:res.default
+                    })
                     command.execute({
                         tag: "span-editable",
                         options: {
                             name: filed.name,
-                            data: res.default,
+                            data: data ,
                             editable:false,
                             type:'MyFile'
                         },