修改问题管理

jero-web/src/common/lang/en-us.js

@@ -2024,4 +2024,8 @@ module.exports = {
   verificationTaskValidation: 'Verification task validation',
   platformType: 'Platform Type',
   extensionItems:'Extension Items',
+  problemPriority:'Problem Priority',
+  high:'High',
+  centre:'Centre',
+  low:'Low',
 }

jero-web/src/common/lang/zh-cn.js

@@ -3980,4 +3980,8 @@ module.exports = {
   verificationTaskValidation:'验证任务确认',
   platformType:'平台件类型',
   extensionItems:'扩展任务数量',
+  problemPriority:'问题优先级',
+  high:'高',
+  centre:'中',
+  low:'低',
 }

jero-web/src/views/projectManagement/components/projectStatus.vue

@@ -1,16 +1,16 @@
 <template>
   <a-card :bordered="false">
-<!--    <div class="table-operator" style="margin-bottom: 10px">-->
+    <!--    <div class="table-operator" style="margin-bottom: 10px">-->
-<!--      <div @click="versionStatisticsClick"-->
+    <!--      <div @click="versionStatisticsClick"-->
-<!--           v-if="!this.$route.query.parentId && $t('Parametercollection')!= activeKey"-->
+    <!--           v-if="!this.$route.query.parentId && $t('Parametercollection')!= activeKey"-->
-<!--           class="operator-text">-->
+    <!--           class="operator-text">-->
-<!--        <a-icon type="plus"/>-->
+    <!--        <a-icon type="plus"/>-->
-<!--        {{$t('versionStatistics')}}-->
+    <!--        {{$t('versionStatistics')}}-->
-<!--      </div>-->
+    <!--      </div>-->
-<!--      <div v-else-->
+    <!--      <div v-else-->
-<!--           class="operator-text">-->
+    <!--           class="operator-text">-->
-<!--      </div>-->
+    <!--      </div>-->
-<!--    </div>-->
+    <!--    </div>-->
     <a-tabs type="card" v-model="activeKey" @change="activeKeyChange" class="ant-tabs">
       <a-tab-pane :key="$t('regulatoryComplianceManagement')" :tab="$t('regulatoryComplianceManagement')">
         <regulatoryCompliance @currentStatus="currentStatus"
@@ -25,12 +25,12 @@
         <parameterCollectionProgress @currentStatus="currentStatus" :idList="[]"
                                      v-if="activeKey == $t('parameterCollectionProgressManagement')"/>
       </a-tab-pane>
-      <a-tab-pane :key="$t('Problemanagement')" :tab="$t('Problemanagement')">
-        <nonConformance @currentStatus="currentStatus" v-if="activeKey == $t('Problemanagement')"/>
-      </a-tab-pane>
       <a-tab-pane :key="$t('otastatus')" :tab="$t('otastatus')">
         <otastatus @currentStatus="currentStatus" :idList="idList" v-if="activeKey == $t('otastatus')"/>
       </a-tab-pane>
+      <a-tab-pane :key="$t('Problemanagement')" :tab="$t('Problemanagement')">
+        <nonConformance @currentStatus="currentStatus" v-if="activeKey == $t('Problemanagement')"/>
+      </a-tab-pane>
     </a-tabs>
   </a-card>
 </template>
@@ -60,8 +60,8 @@
       }
     },
     methods: {
-      activeKeyChange(){
+      activeKeyChange() {
-         this.$emit('projectStatusForm',this.activeKey)
+        this.$emit('projectStatusForm', this.activeKey)
       },
       currentStatus(item) {
         this.$emit('currentStatus', item)
@@ -89,7 +89,8 @@
 
 <style scoped>
   @import '~@assets/less/common.less';
-  ::v-deep .ant-card-body{
+
-    padding: 0 0 24px 0 ;
+  ::v-deep .ant-card-body {
+    padding: 0 0 24px 0;
   }
 </style>

jero-web/src/views/projectManagement/projectNonConformance/index.vue

@@ -165,6 +165,17 @@
               {{result.problemState ? result.problemState : ''}}
              </span>
         </div>
+        <span slot="problemPriority" slot-scope="text,result">
+            <span v-if="result.problemState == $t('red')">
+                  {{$t('high')}}
+            </span>
+           <span v-else-if="result.problemState == $t('yellow')">
+                  {{$t('centre')}}
+            </span>
+           <span v-else-if="result.problemState == $t('green')">
+                  {{$t('low')}}
+            </span>
+        </span>
 <!--                <span slot="problemType" slot-scope="text,result">-->
 <!--                   <span>{{result.flag== 'NEW'?result.problemType_dictText:result.problemType}}</span>-->
 <!--                </span>-->
@@ -296,6 +307,14 @@
             ellipsis: true,
             scopedSlots: { customRender: 'CertificationProgress' }
           },
+          {
+            title: this.$t('problemPriority'),
+            align: 'left',
+            dataIndex: 'problemPriority',
+            width: 120,
+            ellipsis: true,
+            scopedSlots: { customRender: 'problemPriority' }
+          },
           {
             title: this.$t('createTime'),
             align: 'left',

jero-web/src/views/projectManagement/projectNonConformance/moudles/TrackingModel.vue

@@ -0,0 +1,356 @@
+<template>
+  <div>
+    <a-modal
+      :title="$t('progresstracking')"
+      :width="800"
+      :visible="visibletrack"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @ok="handleOk"
+      @cancel="Cancel"
+    >
+      <a-form-model :model="formInlinetracking" class="formAdd" :rules="rulestracking" ref="ruleFormtracking">
+        <a-row :gutter="24">
+          <a-col :span="24" style="height: 417px">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text" :title="$t('progresstracking')">
+                {{$t('progresstracking')}}</span>
+              </div>
+              <a-form-model-item class="itemModel itemModel-explain ql-snow"
+                                 style="height: 357px" prop="progressTracking">
+                <quill-editor
+                  class="text-editor"
+                  ref="myQuillEditorRef"
+                  v-model="formInlinetracking.progressTracking"
+                  :content="formInlinetracking.progressTracking"
+                  style="height: 300px"
+                  :options="editorOption"
+                  @blur="quilleditorBlurTracking"
+                  @change="onEditorChangeTracking($event)"
+                />
+                <!--                <a-textarea :placeholder="$t('pleaseEnter')+$t('progresstracking')"-->
+                <!--                            v-model="formInlinetracking.progressTracking"-->
+                <!--                            style="width: 90%"-->
+                <!--                            :maxLength="500"-->
+                <!--                            :rows="4"/>-->
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-modal>
+
+    <a-upload
+      name="file"
+      id="iviewUp"
+      accept='.png,.jpg,.gif,.jpeg,.pjpeg,.pjp'
+      :multiple="false"
+      class="trackingUpload"
+      :action="uploadAction"
+      :headers="headers"
+      style="width: 0;display: none"
+      @change="handleChangeTracking"
+    >
+    </a-upload>
+  </div>
+
+</template>
+
+<script>
+  import axios from 'axios'
+  import Vue from 'vue'
+  import 'quill/dist/quill.core.css'
+  import 'quill/dist/quill.snow.css'
+  import 'quill/dist/quill.bubble.css'
+  import { quillEditor } from 'vue-quill-editor'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+  const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+    ['blockquote', 'code-block'],
+
+    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
+    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
+    [{ 'direction': 'rtl' }],                         // text direction
+
+    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+    [{ 'font': [] }],
+    [{ 'align': [] }],
+    ['link', 'image', 'video'],
+    ['clean']                                         // remove formatting button
+  ]
+
+  export default {
+    name: 'TrackingModel',
+    components: {
+      quillEditor
+    },
+    data() {
+      return {
+        headers: {},
+        uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
+        formInlinetracking: {},
+        editorOption: { // 富文本框配置
+          placeholder: '',
+          theme: 'snow', // or 'bubble'
+          modules: {
+            clipboard: {
+              // 粘贴版，处理粘贴时候带图片
+              matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]]
+            },
+            toolbar: {
+              container: toolbarOptions, // 工具栏
+              handlers: {
+                'image': function(value) {
+                  if (value) {
+                    document.querySelector('.trackingUpload .ant-upload input').click()
+                  } else {
+                    this.quill.format('image', false)
+                  }
+                }
+              }
+            }
+          }
+        },
+        visibletrack: false,
+        confirmLoading: false,
+        rulestracking: {
+          progressTracking: [
+            {
+              required: true,
+              message: this.$t('text') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            }
+          ]
+        }
+      }
+    },
+    created() {
+      const token = Vue.ls.get(ACCESS_TOKEN)
+      this.headers = { 'X-Access-Token': token }
+    },
+    methods: {
+      add() {
+        this.visibletrack = true
+        this.isDisplayIndex = true
+        this.$nextTick(() => {
+          this.formInlinetracking = {}
+          this.formInlinetracking = { ...this.formInlinetracking }
+          this.$refs.ruleFormtracking.clearValidate()
+          this.myQuillEditor()
+        })
+      },
+      onEditorChangeTracking({ quill, html, text }) {
+        this.formInlinetracking.progressTracking = html
+      },
+      quilleditorBlurTracking() {
+        this.$refs.ruleFormtracking.validateField('progressTracking')
+      },
+      handleCustomMatcher(node, Delta) {
+        let ops = []
+        Delta.ops.forEach(op => {
+          if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，如果是字符串则可以添加
+            ops.push({
+              insert: op.insert
+            })
+          }
+        })
+        Delta.ops = ops
+        return Delta
+      },
+      handleChangeTracking(info) {
+        let { file } = info
+        const status = info.file.status
+        if (status === 'done') {
+          let vm = this
+          let quill = this.$refs.myQuillEditorRef.quill
+          let length = quill.getSelection().index
+          let fileName = file.response.result.fileName
+          let index1 = fileName.lastIndexOf('.')
+          let index2 = fileName.length
+          let fileSuffix = fileName.substring(index1, index2)
+          // window._CONFIG['domianWebImgURL']
+          quill.insertEmbed(length, 'image', window._CONFIG['domianWebImgURL']+ '/sys/common/download/' + file.response.result.id + fileSuffix)
+          quill.setSelection(length + 1)
+          this.quillUpdateImg = false
+        } else if (status === 'uploading') {
+
+        }
+      },
+      myQuillEditor() {
+        setTimeout(() => {
+          let quill = this.$refs.myQuillEditorRef.quill
+          this.$forceUpdate()
+          quill.root.addEventListener(
+            'paste',
+            (evt) => {
+              if (
+                evt.clipboardData &&
+                evt.clipboardData.files &&
+                evt.clipboardData.files.length
+              ) {
+                evt.preventDefault();
+                [].forEach.call(evt.clipboardData.files, (file) => {
+                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+                    return
+                  }
+                  const formData = new FormData()
+                  formData.append('file', file)
+                  axios({
+                    url: this.uploadAction,
+                    method: 'post',
+                    data: formData,
+                    headers: {
+                      'Content-Type': 'multipart/form-data',
+                      'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)
+                    }
+                  })
+                    .then((res) => {
+                      if (res.data.success) {
+                        let quill = this.$refs.myQuillEditorRef.quill
+                        let length = quill.getSelection().index
+                        let fileName = res.data.result.fileName
+                        let index1 = fileName.lastIndexOf('.')
+                        let index2 = fileName.length
+                        let fileSuffix = fileName.substring(index1, index2)
+                        // window._CONFIG['domianWebImgURL']
+                        quill.insertEmbed(length, 'image', window._CONFIG['domianWebImgURL']+ '/sys/common/download/' + res.data.result.id)
+                        quill.setSelection(length + 1)
+                      }
+                    })
+                })
+              }
+            },
+            false
+          )
+        }, 500)
+      },
+      handleOk() {
+        this.$refs.ruleFormtracking.validate(valid => {
+           if (valid){
+               this.$emit('TrackingModelForm',this.formInlinetracking.progressTracking)
+             this.visibletrack = false
+           }
+        })
+      },
+      Cancel() {
+        this.visibletrack = false
+      }
+    }
+  }
+</script>
+
+<style>
+  .ant-select-disabled {
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .ant-input-disabled {
+    color: rgba(0, 0, 0, 0.65) !important;
+  }
+</style>
+<style scoped>
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+  }
+
+  .title-text {
+    width: 114px;
+    text-align: right;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 42px;
+    line-height: 42px;
+  }
+
+  .box-input {
+    display: inline-block;
+    height: 38px;
+    width: 100%;
+  }
+
+  .itemModel {
+    width: calc(100% - 130px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .title-text-text {
+    margin-top: 9px;
+  }
+
+  .formAdd {
+    margin-bottom: 40px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+
+  .title-text-text {
+    margin-top: 9px;
+  }
+
+  .formAdd {
+    margin-bottom: 40px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    z-index: 100;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .button-text {
+    height: 38px;
+    margin-top: 4px;
+  }
+
+  ::v-deep .ant-select-tree-treenode-switcher-close {
+    width: 255px;
+  }
+
+  ::v-deep .ant-select-tree-node-content-wrapper {
+    float: right;
+    margin-top: -2px !important;
+  }
+
+  ::v-deep .ant-select-tree-title {
+    width: 100%;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-word;
+  }
+
+  ::v-deep .itemModel-explain .ant-form-explain {
+    margin-top: 60px
+  }
+
+  ::v-deep .ql-snow .ql-picker {
+    height: 36px;
+  }
+</style>

jero-web/src/views/projectManagement/projectNonConformance/moudles/addModel.vue

@@ -55,7 +55,7 @@
                   <a-input class="box-input"
                            v-model='formInline.psIssue'
                            :disabled="disabled"
-                           :placeholder="$t('PleaseEnter')+'PS-issue'"/>
+                           :placeholder="$t('PleaseEnter')+'PS-issue'+$t('link')"/>
                 </a-form-model-item>
               </div>
             </a-col>
@@ -176,11 +176,28 @@
                   <span class="title-text-text"
                         :title="$t('descriptions')">{{$t('descriptions')}}</span>
                 </div>
-                <a-form-model-item class="itemModel" prop="descriptions">
+                <a-form-model-item class="itemModel itemModel-explain ql-snow"
-                  <a-input class="box-input"
+                                   prop="descriptions">
-                           v-model='formInline.description'
+                  <div style="width: calc(100% - 80px);display: inline-block">
-                           :disabled="disabled"
+                    <quill-editor
-                           :placeholder="$t('PleaseEnter')+$t('descriptions')"/>
+                      v-if="!isDescription"
+                      class="text-editor"
+                      ref="myQuillEditor"
+                      @ready="onEditorReady($event)"
+                      v-model="formInline.description"
+                      :content="formInline.description"
+                      style="height: 300px;"
+                      :options="editorOption"
+                      @blur="quilleditorBlur"
+                      @change="onEditorChange($event)"
+                    />
+                  </div>
+                  <span v-if="!isDescription" @click="putAwayClick" class="putAway">{{$t('putAway')}}</span>
+                  <span v-if="isDescription" @click="putAwayClick" class="putAway">{{$t('open')}}</span>
+                  <!--                  <a-input class="box-input"-->
+                  <!--                           v-model='formInline.description'-->
+                  <!--                           :disabled="disabled"-->
+                  <!--                           :placeholder="$t('PleaseEnter')+$t('descriptions')"/>-->
                 </a-form-model-item>
               </div>
             </a-col>
@@ -203,7 +220,9 @@
                     <a-icon class="icon-text" @click="addClick(index)" style='margin-left: 10px;font-size: 18px;'
                             v-if="formInline.fileLinkList.length - 1 == index"
                             type="plus"/>
-                    <a-icon class="icon-text" v-if="formInline.fileLinkList.length > 1 && formInline.fileLinkList.length - 1 !== index" style='margin-left: 10px;font-size: 18px;'
+                    <a-icon class="icon-text"
+                            v-if="formInline.fileLinkList.length > 1 && formInline.fileLinkList.length - 1 !== index"
+                            style='margin-left: 10px;font-size: 18px;'
                             @click="deleteClick(index)"
                             type="minus"/>
                   </div>
@@ -226,16 +245,34 @@
                         :title="$t('progresstracking')">{{$t('progresstracking')}}</span>
                 </div>
                 <a-form-model-item class="itemModel" prop="progresstracking">
-                  <div v-for="(item,index) in formInline.progressTrackingList" :key="index">
+                  <div style="width: 100%;display: flex;margin-bottom: 20px"
+                       v-for="(item,index) in formInline.progressTrackingList" :key="index">
                     <!--                    <span>{{item}}</span>-->
-                    <a-input class="box-input"
+                    <div style="width: calc(100% - 116px);display: inline-block">
-                             style='width: 88%'
+                      <quill-editor
-                             v-model='item.progressTracking'
+                        class="text-editor trackingClass"
+                        ref="myQuillEditorRef"
                         :disabled="true"
-                             :title='item.progressTracking'
+                        v-if="!item.isDescription"
-                             :placeholder="$t('PleaseEnter')+$t('progresstracking')"/>
+                        v-model="item.progressTracking"
-                    <a @click="addprogresstrackingClick(index)" style='margin-left: 10px' v-if="formInline.progressTrackingList.length - 1 == index">{{$t('newlyAdded')}}</a>
+                        :content="item.progressTracking"
-                    <a @click="deleteprogresstrackingClick(index,item)" v-if="formInline.progressTrackingList.length > 0" :disabled="disabled" style='margin-left: 10px' >{{$t('delete')}}</a>
+                        style="width: 100%;height: 200px;display: inline-block"
+                        :options="editorOption"
+                      />
+                    </div>
+                    <!--                    <a-input class="box-input"-->
+                    <!--                             style='width: 88%'-->
+                    <!--                             v-model='item.progressTracking'-->
+                    <!--                             :disabled="true"-->
+                    <!--                             :title='item.progressTracking'-->
+                    <!--                             :placeholder="$t('PleaseEnter')+$t('progresstracking')"/>-->
+                    <a @click="addprogresstrackingClick(index)" style='margin-left: 10px'
+                       v-if="formInline.progressTrackingList.length - 1 == index">{{$t('newlyAdded')}}</a>
+                    <a @click="deleteprogresstrackingClick(index,item)"
+                       v-if="formInline.progressTrackingList.length > 0" :disabled="disabled" style='margin-left: 10px'>{{$t('delete')}}</a>
+
+                    <span v-if="!item.isDescription" @click="openClick(item)" class="putAway">{{$t('putAway')}}</span>
+                    <span v-if="item.isDescription" @click="openClick(item)" class="putAway">{{$t('open')}}</span>
                   </div>
                 </a-form-model-item>
               </div>
@@ -249,11 +286,15 @@
                   <span class="title-text-text"
                         :title="$t('conculsion')">{{$t('conculsion')}}</span>
                 </div>
-                <a-form-model-item class="itemModel" :prop="this.formInline.problemState == this.$t('green') ? 'conclusion' : ''">
+                <a-form-model-item class="itemModel"
-                  <a-input class="box-input"
+                                   :prop="this.formInline.problemState == this.$t('green') ? 'conclusion' : ''">
-                           v-model='formInline.conclusion'
+                  <a-textarea :placeholder="$t('pleaseEnter')+$t('conculsion')"
-                           :disabled="disabled"
+                              v-model="formInline.conclusion"
-                           :placeholder="$t('PleaseEnter')+$t('conculsion')"/>
+                              :rows="4"/>
+                  <!--                  <a-input class="box-input"-->
+                  <!--                           v-model='formInline.conclusion'-->
+                  <!--                           :disabled="disabled"-->
+                  <!--                           :placeholder="$t('PleaseEnter')+$t('conculsion')"/>-->
                 </a-form-model-item>
               </div>
             </a-col>
@@ -276,7 +317,8 @@
                     <a-icon class="icon-text" @click="addvidenceClick(index)" style='margin-left: 10px;font-size: 18px;'
                             v-if="formInline.approvalEvidenceLinkList.length - 1 == index"
                             type="plus"/>
-                    <a-icon class="icon-text" v-if="formInline.approvalEvidenceLinkList.length > 1 && formInline.approvalEvidenceLinkList.length - 1 !== index"
+                    <a-icon class="icon-text"
+                            v-if="formInline.approvalEvidenceLinkList.length > 1 && formInline.approvalEvidenceLinkList.length - 1 !== index"
                             style='margin-left: 10px;font-size: 18px;' @click="deletevidenceClick(index)"
                             type="minus" :disabled="disabled"/>
                   </div>
@@ -318,34 +360,84 @@
                 {{$t('progresstracking')}}</span>
               </div>
               <a-form-model-item class="itemModel" prop="progressTracking">
-                <a-textarea :placeholder="$t('pleaseEnter')+$t('progresstracking')"
+                <quill-editor
+                  class="text-editor"
+                  ref="myQuillEditor"
+                  @ready="onEditorReady($event)"
                   v-model="formInlinetracking.progressTracking"
-                            style="width: 90%"
+                  :content="formInlinetracking.progressTracking"
-                            :maxLength="500"
+                  style="height: 300px"
-                            :rows="4"/>
+                  :options="editorOption"
+                  @blur="quilleditorBlur"
+                  @change="onEditorChange($event)"
+                />
+                <!--                <a-textarea :placeholder="$t('pleaseEnter')+$t('progresstracking')"-->
+                <!--                            v-model="formInlinetracking.progressTracking"-->
+                <!--                            style="width: 90%"-->
+                <!--                            :maxLength="500"-->
+                <!--                            :rows="4"/>-->
               </a-form-model-item>
             </div>
           </a-col>
         </a-row>
       </a-form-model>
     </a-modal>
+    <a-upload
+      name="file"
+      id="iviewUp"
+      accept='.png,.jpg,.gif,.jpeg,.pjpeg,.pjp'
+      :multiple="false"
+      :action="uploadAction"
+      :headers="headers"
+      style="width: 0;display: none"
+      @change="handleChange"
+    >
+    </a-upload>
     <uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"/>
+    <TrackingModel ref="TrackingModelRef" @TrackingModelForm="TrackingModelForm"/>
   </div>
 </template>
 
 <script>
-// import defaultTemplate from './defaultTemplate'
+  // import defaultTemplate from './defaultTemplate'
-// import solicitOpinions from './solicitOpinions'
+  // import solicitOpinions from './solicitOpinions'
-// import releaseStandard from './releaseStandard'
+  // import releaseStandard from './releaseStandard'
-// import industryTemplate from './industryTemplate'
+  // import industryTemplate from './industryTemplate'
-// import addModel from './a/ddModel'
+  // import addModel from './a/ddModel'
-import Standardselection from '@/components/Standardselection/index'
+  import 'quill/dist/quill.core.css'
-import uploadFile from '@/components/uploadFile/file'
+  import 'quill/dist/quill.snow.css'
-import { getAction, postAction,putAction, downloadFile } from '@/api/manage'
+  import 'quill/dist/quill.bubble.css'
-import moment from 'moment'
+  import Standardselection from '@/components/Standardselection/index'
-import { mapGetters } from 'vuex'
+  import TrackingModel from './TrackingModel'
+  import uploadFile from '@/components/uploadFile/file'
+  import { quillEditor } from 'vue-quill-editor'
+  import { getAction, postAction, putAction, downloadFile } from '@/api/manage'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
+  import moment from 'moment'
+  import { mapGetters } from 'vuex'
+  import axios from 'axios'
+  import Vue from 'vue'
 
-export default {
+  const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+    ['blockquote', 'code-block'],
+
+    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
+    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
+    [{ 'direction': 'rtl' }],                         // text direction
+
+    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+    [{ 'font': [] }],
+    [{ 'align': [] }],
+    ['link', 'image', 'video'],
+    ['clean']                                         // remove formatting button
+  ]
+  export default {
     name: 'fillAdd',
     components: {
       // defaultTemplate,
@@ -355,9 +447,33 @@ export default {
       // addModel
       Standardselection,
       uploadFile,
+      quillEditor,
+      TrackingModel
     },
     data() {
       return {
+        editorOption: { // 富文本框配置
+          placeholder: '',
+          theme: 'snow', // or 'bubble'
+          modules: {
+            clipboard: {
+              // 粘贴版，处理粘贴时候带图片
+              matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]]
+            },
+            toolbar: {
+              container: toolbarOptions, // 工具栏
+              handlers: {
+                'image': function(value) {
+                  if (value) {
+                    document.querySelector('.ant-upload input').click()
+                  } else {
+                    this.quill.format('image', false)
+                  }
+                }
+              }
+            }
+          }
+        },
         rules: {
           title: [
             {
@@ -379,11 +495,11 @@ export default {
               message: this.$t('conculsion') + this.$t('cannotEmpty'),
               trigger: 'change'
             }
-        ],
+          ]
         },
         visible: false,
         visibletrack: false,
-      rulestracking:{
+        rulestracking: {
           progressTracking: [
             {
               required: true,
@@ -393,23 +509,25 @@ export default {
           ]
         },
         formInline: {
-        fileLinkList:[{}],
+          fileLinkList: [{}],
-        progressTrackingList:[{}],
+          progressTrackingList: [{
-        approvalEvidenceLinkList:[{}],
+            isDescription:true,
-        dutyTerritory:undefined,
+          }],
-        projectId:undefined,
+          approvalEvidenceLinkList: [{}],
-        problemState:undefined,
+          dutyTerritory: undefined,
+          projectId: undefined,
+          problemState: undefined
         },
-      data:{},
+        data: {},
-      formInlinetracking:{},
+        formInlinetracking: {},
         confirmLoading: false,
         title: '',
         disabled: false,
         isTrue: false,
         chapterContentsList: [],
-      firstLevelDutyTerritoryList:[],
+        firstLevelDutyTerritoryList: [],
         projectNameList: [],
-      ProblemstateList:[this.$t('red'),this.$t('yellow'),this.$t('green'),],
+        ProblemstateList: [this.$t('red'), this.$t('yellow'), this.$t('green')],
         templateDisabled: false,
         contentTemplateList: [
           {
@@ -429,17 +547,30 @@ export default {
             text: this.$t('industryInformationDynamicTemplate')
           }
         ],
-      index:'',
+        index: '',
-      problemState:'',
+        problemState: '',
         url: {
           add: '/project/problemManagementEO/add',
           edit: '/project/problemManagementEO/edit',
           queryById: '/report/lawsMonthlyReportWriteEO/queryById'
-      }
+        },
+        isDisplayIndex: false,
+        headers: {},
+        uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
+        isDescription: false
       }
     },
     mounted() {
 
+    },
+    created() {
+      const token = Vue.ls.get(ACCESS_TOKEN)
+      this.headers = { 'X-Access-Token': token }
+    },
+    computed: {
+      editor() {
+        return this.$refs.myQuillEditor.quill
+      }
     },
     methods: {
       // bringInStandardInformationClick() {
@@ -470,24 +601,23 @@ export default {
         this.formInline.lawsId = id
         this.formInline = { ...this.formInline }
       },
-    change(value){
+      change(value) {
-      if(value != this.problemState && this.title == this.$t('edit')){
+        if (value != this.problemState && this.title == this.$t('edit')) {
-        if(this.problemState == null || this.problemState == ''){
+          if (this.problemState == null || this.problemState == '') {
             this.problemState = this.$t('emptyc')
           }
           let time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
-        let text = this.userInfo().username + ' ' + time + ' ' + this.$t('Problemstate')+this.$t('by')+ '\'' + this.problemState + '\'' +this.$t('Changeto') + '\'' + value + '\''
+          let text = this.userInfo().username + ' ' + time + ' ' + this.$t('Problemstate') + this.$t('by') + '\'' + this.problemState + '\'' + this.$t('Changeto') + '\'' + value + '\''
-        console.log(this.formInline.progressTrackingList[0])
+          if (JSON.stringify(this.formInline.progressTrackingList[0]) == '{}' || this.formInline.progressTrackingList[0].progressTracking == '') {
-        if(JSON.stringify(this.formInline.progressTrackingList[0]) == '{}' || this.formInline.progressTrackingList[0].progressTracking == ''){
+            this.formInline.progressTrackingList.forEach((item, index) => {
-          this.formInline.progressTrackingList.forEach((item,index) => {
               item.progressTracking = text
             })
             return
           }
-        this.formInline.progressTrackingList.push({progressTracking:text})
+          this.formInline.progressTrackingList.push({ progressTracking: text })
         }
       },
-    Standardselectioninput(val){
+      Standardselectioninput(val) {
         this.formInline.lawsName = val
       },
       clickButtonToUpload(item) {
@@ -523,13 +653,15 @@ export default {
         this.visible = true
         this.disabled = false
         this.formInline = {
-        fileLinkList:[{}],
+          fileLinkList: [{}],
-        progressTrackingList:[{}],
+          progressTrackingList: [{}],
-        approvalEvidenceLinkList:[{}]
+          approvalEvidenceLinkList: [{}]
         }
+        this.isDisplayIndex = true
         this.$nextTick(() => {
           this.formInline = { ...this.formInline }
           this.$refs.ruleForm.clearValidate()
+          this.myQuillEditor()
         })
       },
       edit(row) {
@@ -539,29 +671,28 @@ export default {
         this.title = this.$t('edit')
         this.problemState = row.problemState
         this.formInline = row
-      if(this.formInline.dutyTerritory != null){
+        if (this.formInline.dutyTerritory != null) {
           this.formInline.dutyTerritory = this.formInline.dutyTerritory.split(',')
-      }else{
+        } else {
           this.formInline.dutyTerritory = undefined
         }
-      if(this.formInline.problemState == null){
+        if (this.formInline.problemState == null) {
           this.formInline.problemState = undefined
         }
-      if(this.formInline.progressTrackingList == null){
+        if (this.formInline.progressTrackingList == null) {
           this.formInline.progressTrackingList = [{}]
         }
-      if(this.formInline.approvalEvidenceLinkList == null){
+        if (this.formInline.approvalEvidenceLinkList == null) {
           this.formInline.approvalEvidenceLinkList = [{}]
         }
-      if(this.formInline.fileLinkList == null){
+        if (this.formInline.fileLinkList == null) {
           this.formInline.fileLinkList = [{}]
         }
-      if(this.formInline.projectId != null){
+        if (this.formInline.projectId != null) {
           this.formInline.projectId = this.formInline.projectId.split(',')
-      }else{
+        } else {
           this.formInline.projectId = undefined
         }
-      console.log(this.formInline)
         this.visible = true
         this.disabled = false
         this.templateDisabled = true
@@ -569,7 +700,7 @@ export default {
           this.$refs.ruleForm.clearValidate()
         })
       },
-    addClick(index){
+      addClick(index) {
         this.formInline.fileLinkList.splice(index + 1, 0, {})
         this.formInline = { ...this.formInline }
       },
@@ -577,7 +708,7 @@ export default {
         this.formInline.fileLinkList.splice(index, 1)
         this.formInline = { ...this.formInline }
       },
-    addvidenceClick(index){
+      addvidenceClick(index) {
         this.formInline.approvalEvidenceLinkList.splice(index + 1, 0, {})
         this.formInline = { ...this.formInline }
       },
@@ -585,21 +716,31 @@ export default {
         this.formInline.approvalEvidenceLinkList.splice(index, 1)
         this.formInline = { ...this.formInline }
       },
-    addprogresstrackingClick(index){
+      TrackingModelForm(row) {
+        let time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+        let text = this.userInfo().username + ' ' + time + ' ' + row
+        this.formInline.progressTrackingList.forEach((item, index) => {
+          if (!item.progressTracking) {
+            this.formInline.progressTrackingList.splice(0, 1)
+          }
+        })
+        this.formInline.progressTrackingList.splice(this.index + 1, 1, { progressTracking: text })
+      },
+      addprogresstrackingClick(index) {
         this.index = index
         this.formInlinetracking = {}
-      this.visibletrack = true
+        this.$refs.TrackingModelRef.add()
         this.$nextTick(() => {
-        this.formInlinetracking = { ...this.formInlinetracking }
+          // this.formInlinetracking = { ...this.formInlinetracking }
           this.isTrue = true
           this.$refs.ruleForm.clearValidate()
         })
       },
-    deleteprogresstrackingClick(index,item) {
+      deleteprogresstrackingClick(index, item) {
-      if(item.progressTracking && item.progressTracking != ''){
+        if (item.progressTracking && item.progressTracking != '') {
-        if(index == 0){
+          if (index == 0) {
             item.progressTracking = ''
-        }else{
+          } else {
             this.formInline.progressTrackingList.splice(index, 1)
           }
         }
@@ -608,24 +749,22 @@ export default {
       handleCancel() {
         this.visible = false
       },
-    Cancel(){
+      Cancel() {
         this.visibletrack = false
         this.formInlinetracking = {}
         this.$refs.ruleFormtracking.clearValidate()
       },
-    handleOk(){
+      handleOk() {
-      console.log(this.formInlinetracking)
         let time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
         this.$refs.ruleFormtracking.validate(valid => {
           if (valid) {
             let text = this.userInfo().username + ' ' + time + ' ' + this.formInlinetracking.progressTracking
-          this.formInline.progressTrackingList.forEach((item,index) => {
+            this.formInline.progressTrackingList.forEach((item, index) => {
-            console.log(item.progressTracking)
+              if (!item.progressTracking) {
-            if(!item.progressTracking){
+                this.formInline.progressTrackingList.splice(0, 1)
-              this.formInline.progressTrackingList.splice(0,1)
               }
             })
-          this.formInline.progressTrackingList.splice(this.index+1, 1, {progressTracking:text})
+            this.formInline.progressTrackingList.splice(this.index + 1, 1, { progressTracking: text })
             this.visibletrack = false
           }
         })
@@ -650,10 +789,10 @@ export default {
             //   }
             // })
             let formInline = JSON.parse(JSON.stringify(this.formInline))
-          if(this.formInline.dutyTerritory && this.formInline.dutyTerritory instanceof Array){
+            if (this.formInline.dutyTerritory && this.formInline.dutyTerritory instanceof Array) {
               this.formInline.dutyTerritory = this.formInline.dutyTerritory.join(',')
             }
-          if(this.formInline.projectId && this.formInline.projectId instanceof Array){
+            if (this.formInline.projectId && this.formInline.projectId instanceof Array) {
               this.formInline.projectId = this.formInline.projectId.join(',')
             }
             // let fileLinkList = []
@@ -701,27 +840,123 @@ export default {
             })
           }
         })
+      },
+
+      onEditorReady(quill) {
+        if (this.formInline.description) {
+          document.getElementsByClassName('ql-editor')[0].innerHTML = this.formInline.description
+        }
+      },
+      onEditorChange({ quill, html, text }) {
+        this.formInline.description = html
+      },
+      quilleditorBlur() {
+        this.$refs.ruleForm.validateField('description')
+      },
+      handleCustomMatcher(node, Delta) {
+        let ops = []
+        Delta.ops.forEach(op => {
+          if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，如果是字符串则可以添加
+            ops.push({
+              insert: op.insert
+            })
+          }
+        })
+        Delta.ops = ops
+        return Delta
+      },
+      handleChange(info) {
+        let { file } = info
+        const status = info.file.status
+        if (status === 'done') {
+          let vm = this
+          let quill = this.$refs.myQuillEditor.quill
+          let length = quill.getSelection().index
+          let fileName = file.response.result.fileName
+          let index1 = fileName.lastIndexOf('.')
+          let index2 = fileName.length
+          let fileSuffix = fileName.substring(index1, index2)
+          quill.insertEmbed(length, 'image', window._CONFIG['domianWebImgURL'] + '/sys/common/download/' + file.response.result.id + fileSuffix)
+          quill.setSelection(length + 1)
+          this.quillUpdateImg = false
+        } else if (status === 'uploading') {
+
+        }
+      },
+      myQuillEditor() {
+        setTimeout(() => {
+          let quill = this.$refs.myQuillEditor.quill
+          this.$forceUpdate()
+          quill.root.addEventListener(
+            'paste',
+            (evt) => {
+              if (
+                evt.clipboardData &&
+                evt.clipboardData.files &&
+                evt.clipboardData.files.length
+              ) {
+                evt.preventDefault();
+                [].forEach.call(evt.clipboardData.files, (file) => {
+                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+                    return
+                  }
+                  const formData = new FormData()
+                  formData.append('file', file)
+                  axios({
+                    url: this.uploadAction,
+                    method: 'post',
+                    data: formData,
+                    headers: {
+                      'Content-Type': 'multipart/form-data',
+                      'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)
+                    }
+                  })
+                    .then((res) => {
+                      if (res.data.success) {
+                        let quill = this.$refs.myQuillEditor.quill
+                        let length = quill.getSelection().index
+                        let fileName = res.data.result.fileName
+                        let index1 = fileName.lastIndexOf('.')
+                        let index2 = fileName.length
+                        let fileSuffix = fileName.substring(index1, index2)
+                        quill.insertEmbed(length, 'image', window._CONFIG['domianWebImgURL'] + '/sys/common/download/' + res.data.result.id + fileSuffix)
+                        quill.setSelection(length + 1)
+                      }
+                    })
+                })
+              }
+            },
+            false
+          )
+        }, 500)
+      },
+      putAwayClick() {
+        this.isDescription = !this.isDescription
+      },
+      openClick(item){
+        item.isDescription = !item.isDescription
+        this.formInline = {...this.formInline}
+      },
     }
   }
-}
 </script>
 <style>
-.ant-select-disabled {
+  .ant-select-disabled {
     color: rgba(0, 0, 0, 0.65);
-}
+  }
 
-.ant-input-disabled {
+  .ant-input-disabled {
     color: rgba(0, 0, 0, 0.65) !important;
-}
+  }
 </style>
 <style scoped>
 
-.box-title-text {
+  .box-title-text {
     line-height: 1.4;
     display: flex;
-}
+  }
 
-.title-text {
+  .title-text {
     width: 114px;
     text-align: right;
     display: inline-block;
@@ -733,42 +968,42 @@ export default {
     white-space: nowrap;
     height: 42px;
     line-height: 42px;
-}
+  }
 
-.box-input {
+  .box-input {
     display: inline-block;
     height: 38px;
     width: 100%;
-}
+  }
 
-.itemModel {
+  .itemModel {
     width: calc(100% - 130px);
     display: inline-block;
     margin-top: 2px;
-}
+  }
 
-.title-text-text {
+  .title-text-text {
     margin-top: 9px;
-}
+  }
 
-.formAdd {
+  .formAdd {
     margin-bottom: 40px;
-}
+  }
 
-.Required {
+  .Required {
     color: red;
     margin-right: 4px;
-}
+  }
 
-.title-text-text {
+  .title-text-text {
     margin-top: 9px;
-}
+  }
 
-.formAdd {
+  .formAdd {
     margin-bottom: 40px;
-}
+  }
 
-.drawer-bootom-button {
+  .drawer-bootom-button {
     position: absolute;
     bottom: 0;
     z-index: 100;
@@ -779,28 +1014,62 @@ export default {
     left: 0;
     background: #fff;
     border-radius: 0 0 2px 2px;
-}
+  }
 
-.button-text {
+  .button-text {
     height: 38px;
     margin-top: 4px;
-}
+  }
 
-::v-deep .ant-select-tree-treenode-switcher-close {
+  ::v-deep .ant-select-tree-treenode-switcher-close {
     width: 255px;
-}
+  }
 
-::v-deep .ant-select-tree-node-content-wrapper {
+  ::v-deep .ant-select-tree-node-content-wrapper {
     float: right;
     margin-top: -2px !important;
-}
+  }
 
-::v-deep .ant-select-tree-title {
+  ::v-deep .ant-select-tree-title {
     width: 100%;
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     word-break: break-word;
-}
+  }
+
+  ::v-deep .itemModel-explain .ant-form-explain {
+    margin-top: 60px
+  }
+
+  ::v-deep .ql-snow .ql-picker {
+    height: 36px;
+  }
+
+  ::v-deep .trackingClass .ql-toolbar {
+    display: none;
+  }
+
+  ::v-deep .trackingClass .ql-toolbar.ql-snow + .ql-container.ql-snow {
+    border-top: 1px solid #ccc;
+  }
+
+  ::v-deep .trackingClass .ql-container {
+    height: 100%;
+  }
+
+  ::v-deep .itemModel-explain .ant-form-item-children {
+    display: flex;
+  }
+
+  .putAway {
+    margin-left: 10px;
+    color: #00B3BE;
+    cursor: pointer;
+  }
+
+  ::v-deep .itemModel-explain .ql-container {
+    height: calc(100% - 100px);
+  }
 </style>