From 8c3506ec587baad8c9b43ad68be74434738a34db Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 28 Oct 2022 10:33:00 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2297=20feat=EF=BC=9Aasset=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E6=94=AF=E6=8C=81=E5=AF=8C=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/bottomBox.scss           | 29 +++++-
 .../src/components/chart/chartList.vue        |  2 +-
 .../src/components/chart/richTextEditor.vue   | 50 +++++-----
 .../bottomBox/tabs/commentsBottomTab.vue      | 91 +++++++++++--------
 .../rightBox/chart/otherChartConfig.vue       |  1 +
 .../common/table/asset/assetCommentTable.vue  | 80 +++++++++-------
 6 files changed, 156 insertions(+), 97 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index 7af1708fc..f4b46fe46 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -273,8 +273,11 @@
     height: 100%;
   }
   .textarea-box {
+    // border: 1px solid $--border-color-light;
+    background-color: $--background-color-empty;
     .textarea-small.el-textarea {
       height: 100% !important;
+      border: 1px solid $--border-color-light;
     }
     .textarea-big.el-textarea {
       height: calc(100% - 40px) !important;
@@ -283,9 +286,31 @@
       height: 100%;
       border-color: transparent;
     }
-    margin-bottom: 10px;
+  }
+  .comment-editor{
     border: 1px solid $--border-color-light;
-    background-color: $--background-color-empty;
+    display: flex;
+    flex-direction: column;
+    .ql-toolbar.ql-snow{
+      border-top: unset !important;
+      border-left: unset !important;
+      border-right: unset !important;
+    }
+    .editor-core{
+      height: auto !important;
+      flex: 1;
+      overflow: hidden;
+    }
+    .ql-container.ql-snow {
+      border: unset !important
+    }
+    .text-too-long{
+      display: none;
+    }
+    .ql-editor.ql-blank::before{
+      font-style: normal;
+      color: $--color-text-placeholder;
+    }
   }
   #assetCommentTable {
     height: calc(100% - 25px) !important;
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 87404c9f2..a38c848ff 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -330,7 +330,7 @@ export default {
       }
       this.scrollTopTimer = setTimeout(() => {
         this.copyDataList.forEach(item => {
-          if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id]) {
+          if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id]) {
             if (this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show) {
               this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show = false
             }
diff --git a/nezha-fronted/src/components/chart/richTextEditor.vue b/nezha-fronted/src/components/chart/richTextEditor.vue
index b28a8e692..674e93025 100644
--- a/nezha-fronted/src/components/chart/richTextEditor.vue
+++ b/nezha-fronted/src/components/chart/richTextEditor.vue
@@ -1,17 +1,18 @@
 <template>
-    <div style="position: relative" class="rich-text-editor" :class="{'rich-text-editor-error':tooLong}">
-      <div :id="id" class="editor-core" ref="editor" style="height:350px;"></div>
-      <div class="text-too-long" v-if="tooLong">{{$t('validate.tooLong')}}</div>
-      <el-upload
-        action=""
-        :auto-upload="false"
-        accept=".jpg,.png"
-        :on-change="uploadChange"
-        style="display: none"
-        ref="upload"
-        >
-      </el-upload>
-    </div>
+  <div style="position: relative" class="rich-text-editor" :class="{'rich-text-editor-error':tooLong}">
+    <div :id="id" class="editor-core" ref="editor" style="height:350px;"></div>
+    <slot></slot>
+    <div class="text-too-long" v-if="tooLong">{{$t('validate.tooLong')}}</div>
+    <el-upload
+      action=""
+      :auto-upload="false"
+      accept=".jpg,.png"
+      :on-change="uploadChange"
+      style="display: none"
+      ref="upload"
+      >
+    </el-upload>
+  </div>
 </template>
 
 <script>
@@ -20,7 +21,11 @@ import Quill from 'quill'
 export default {
   name: 'richTextEditor',
   props: {
-    editData: String
+    editData: String,
+    placeholder: {
+      default: '',
+      type: String
+    }
   },
   data () {
     return {
@@ -38,7 +43,8 @@ export default {
             [{ align: [] }],
             ['image'] // 上传图片
           ]
-        }
+        },
+        placeholder: this.placeholder
       },
       maxLength: 0, // 记录最大长度
       tooLong: false
@@ -72,13 +78,15 @@ export default {
         this.quill.on('text-change', function (delta, oldDelta, source) {
           const length = $self.getHtml().length
           if (length > 60000) {
-            $self.quill.deleteText($self.maxLength - 1, $self.quill.getText().length - 1, 'api')
+            const start = $self.maxLength > 0 ? $self.maxLength - 1 : 0
+            const end = $self.quill.getText().length > 1 ? $self.quill.getText().length - 1 : 1
+            $self.quill.deleteText(start, end, 'api')
             $self.tooLong = true
           } else {
             $self.maxLength = $self.quill.getText().length
             $self.tooLong = false
           }
-          $self.$emit('textChange', $self.quill.root.innerHTML)
+          $self.$emit('textChange', $self.quill.root.innerHTML, $self.quill.getText())
         })
         this.$nextTick(() => {
           this.$emit('after-init')
@@ -108,7 +116,6 @@ export default {
       // 图片小于4M
       const isLt4M = (file.size / 1024 / 1024) < 4
       if (isLt4M) {
-        console.log(this.$axios.defaults.baseURL + 'file/download/')
         const form = new FormData()
         form.append('file', file.raw)
         const res = await this.$post('/file/upload', form, { 'Content-Type': 'multipart/form-data' })
@@ -158,14 +165,13 @@ export default {
 .rich-text-editor-error  {
   border: 1px solid #F56C6C;
 }
-.rich-text-editor-error .ql-container.ql-snow {
-  border: unset !important
-}
-
 .rich-text-editor-error .ql-toolbar.ql-snow{
   border-top: unset !important;
   border-left: unset !important;
   border-right: unset !important;
 }
+.rich-text-editor-error .ql-container.ql-snow {
+  border: unset !important
+}
 
 </style>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/commentsBottomTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/commentsBottomTab.vue
index ad792df39..e4dbbd582 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/commentsBottomTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/commentsBottomTab.vue
@@ -1,8 +1,8 @@
 <template>
   <nz-bottom-data-list
-      :showTitle='showTitle'
-      :obj='obj'
-      id="commentBottomTab"
+    :showTitle='showTitle'
+    :obj='obj'
+    id="commentBottomTab"
     :api="url"
     :custom-table-title.sync="tools.customTableTitle"
     :tabs="tabs"
@@ -13,35 +13,38 @@
   >
     <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
     <template v-slot>
-      <div class="textarea-box" :style="{height: rowBox ?'122px':'33px'}">
-          <el-input
+      <div class="textarea-box" :style="{height: rowBox ?'184px':'33px','margin-bottom': '10px'}">
+        <el-input
+          v-if="!rowBox"
           type="textarea"
-          :class="rowBox ? 'textarea-big' : 'textarea-small'"
+          class="textarea-small"
           :placeholder="$t('overall.addComment') + '...'"
-          v-model="editComment.content"
           @focus="stageZoomIn">
-         </el-input>
-         <div class="textarea-button" v-if="rowBox">
-          <button class="nz-btn nz-btn-size-mini nz-btn-style-normal" style="margin-right: 10px" type="button"  @click="save(editComment,false)"><span>{{$t('overall.save')}}</span></button>
-          <button class="nz-btn nz-btn-size-mini nz-btn-style-light" type="button" @click="cancel()"><span>{{$t('overall.cancel')}}</span></button>
-         </div>
+        </el-input>
+        <rich-text-editor v-else class="comment-editor" ref="richTextEditor" :placeholder="$t('overall.addComment') + '...'" :edit-data="editComment.html" @textChange="textChange(arguments)" style="height:100%;">
+          <div class="textarea-button">
+            <button class="nz-btn nz-btn-size-mini nz-btn-style-normal" style="margin-right: 10px" type="button"  @click="save(editComment,false)"><span>{{$t('overall.save')}}</span></button>
+            <button class="nz-btn nz-btn-size-mini nz-btn-style-light" type="button" @click="cancel()"><span>{{$t('overall.cancel')}}</span></button>
+          </div>
+        </rich-text-editor>
       </div>
-      <div :style="{height: rowBox ?'calc(100% - 124px)':'calc(100% - 35px)'}">
-      <assetCommentTable
-        ref="dataTable"
-        :orderByFa="'id'"
-        v-my-loading="tools.loading"
-        :loading="tools.loading"
-        :api="url"
-        :custom-table-title="tools.customTableTitle"
-        :height="subTableHeight"
-        :table-data="tableData"
-        :terminaLogTab="true"
-        @del="del"
-        @save="save"
-        @orderBy="tableDataSort"
-        @reload="getTableData"
-        @selectionChange="selectionChange"></assetCommentTable>
+      <div :style="{height: rowBox ?'calc(100% - 184px)':'calc(100% - 35px)'}">
+        <assetCommentTable
+          ref="dataTable"
+          :orderByFa="'id'"
+          v-my-loading="tools.loading"
+          :loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="subTableHeight"
+          :table-data="tableData"
+          :terminaLogTab="true"
+          @del="del"
+          @save="save"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange">
+        </assetCommentTable>
       </div>
     </template>
     <template v-slot:pagination>
@@ -56,13 +59,15 @@ import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import assetCommentTable from '@/components/common/table/asset/assetCommentTable'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+import richTextEditor from '@/components/chart/richTextEditor'
 
 export default {
-  name: 'networkBottomTab',
+  name: 'commentsBottomTab',
   mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
   components: {
     nzBottomDataList,
-    assetCommentTable
+    assetCommentTable,
+    richTextEditor
   },
   props: {
     obj: Object,
@@ -85,12 +90,18 @@ export default {
       editComment: {
         id: '',
         content: '',
+        html: '',
         assetId: '',
         replyId: ''
       }
     }
   },
   methods: {
+    textChange (val) {
+      const html = `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${val[0]}</div></div>`
+      this.editComment.html = html
+      this.editComment.content = val[1].substr(0, val[1].length - 1)
+    },
     getTableData () {
       this.$set(this.searchLabel, 'pageSize', '-1')
       this.$set(this.searchLabel, 'assetId', this.obj.id)
@@ -107,11 +118,15 @@ export default {
     // 输入框聚焦事件
     stageZoomIn () {
       this.rowBox = true
+      this.$nextTick(() => {
+        // 聚焦
+        this.$refs.richTextEditor.quill.focus()
+      })
     },
     // 取消事件
     cancel () {
       this.editComment.content = ''
-      this.editComment.id = ''
+      this.editComment.html = ''
       this.rowBox = false
     },
     save (data, flag) {
@@ -157,15 +172,13 @@ export default {
 </script>
 <style lang="scss" scoped>
 .textarea-box >>>.el-textarea__inner {
-    resize: none;
+  resize: none;
 }
-.textarea-box{
-  position: relative;
-}
-.textarea-button{
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
+.comment-editor>>>.textarea-button{
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 10px;
+  padding-right: 10px;
   .nz-btn.nz-btn-size-mini{
     width: 74px;
     height: 30px;
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 6eefe3d65..159ebc567 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -408,6 +408,7 @@ export default {
     textChange (val) {
       const html = `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${val}</div></div>`
       this.chartConfig.param.text = html
+      this.$refs.chartForm.validateField('param.text')
       this.change()
     }
   },
diff --git a/nezha-fronted/src/components/common/table/asset/assetCommentTable.vue b/nezha-fronted/src/components/common/table/asset/assetCommentTable.vue
index acfe8ade9..99c797dab 100644
--- a/nezha-fronted/src/components/common/table/asset/assetCommentTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetCommentTable.vue
@@ -10,11 +10,9 @@
     @header-dragend="dragend"
     @sort-change="tableDataSort"
     @selection-change="selectionChange"
-    @row-dblclick="(row)=>{queryMessage(row)}"
   >
     <el-table-column
       v-for="(item, index) in customTableTitle"
-      v-if="item.show"
       :key="`col-${index}`"
       :fixed="item.fixed"
       :label="item.label"
@@ -33,26 +31,23 @@
       </template>
       <template slot-scope="scope" :column="item">
         <div class="descriptions-info">
-            <div>
-                <i class="nz-icon nz-icon-user" style="margin-right: 4px;"></i>
-                <span class="descriptions-name">{{scope.row.createUser.name}}</span>
-                <span class="descriptions-name-small">@{{scope.row.createUser.name}}</span>
-                <span class="descriptions-time">{{momentTz(scope.row.cts)}}</span>
-                <i v-if="scope.row.createUser.id == userId" class="nz-icon nz-icon-edit descriptions-button" @click="edit(scope.row.id)" :title="$t('overall.edit')" style="margin-right: 18px;cursor: pointer;"></i>
-                <i v-if="scope.row.createUser.id == userId" class="nz-icon nz-icon-delete descriptions-button" @click="$emit('del', scope.row)" :title="$t('overall.delete')" style="cursor: pointer;"></i>
-            </div>
-            <div v-if="editContentId == scope.row.id" class="textarea-box" style="height:122px;margin-top: 5px;margin-bottom: 0px;">
-               <el-input
-               type="textarea"
-               style="height:calc(100% - 40px)"
-               v-model="editComment.content">
-               </el-input>
-               <div class="textarea-button">
+          <div>
+            <i class="nz-icon nz-icon-user" style="margin-right: 4px;"></i>
+            <span class="descriptions-name">{{scope.row.createUser.name}}</span>
+            <span class="descriptions-name-small">@{{scope.row.createUser.name}}</span>
+            <span class="descriptions-time">{{momentTz(scope.row.cts)}}</span>
+            <i v-if="scope.row.createUser.id == userId" class="nz-icon nz-icon-edit descriptions-button" @click="edit(scope.row.id)" :title="$t('overall.edit')" style="margin-right: 18px;cursor: pointer;"></i>
+            <i v-if="scope.row.createUser.id == userId" class="nz-icon nz-icon-delete descriptions-button" @click="$emit('del', scope.row)" :title="$t('overall.delete')" style="cursor: pointer;"></i>
+          </div>
+          <div v-if="editContentId == scope.row.id" class="textarea-box" style="height:184px;margin-top: 5px;">
+            <rich-text-editor class="comment-editor" ref="richTextEditor" :edit-data="editComment.html" @textChange="textChange(arguments)" style="height:100%;">
+              <div class="textarea-button">
                 <button class="nz-btn nz-btn-size-mini nz-btn-style-normal" style="margin-right: 10px" type="button"  @click="$emit('save', editComment,true)"><span>{{$t('overall.save')}}</span></button>
                 <button class="nz-btn nz-btn-size-mini nz-btn-style-light" type="button" @click="cancelEdit()"><span>{{$t('overall.cancel')}}</span></button>
-               </div>
-            </div>
-            <div v-else class="descriptions-content" >{{scope.row.content}}</div>
+              </div>
+            </rich-text-editor>
+          </div>
+          <div v-else class="descriptions-content" v-html="scope.row.html"></div>
         </div>
       </template>
     </el-table-column>
@@ -70,9 +65,13 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import richTextEditor from '@/components/chart/richTextEditor'
 export default {
   name: 'assetCommentTable',
   mixins: [table],
+  components: {
+    richTextEditor
+  },
   props: {
     loading: Boolean
   },
@@ -83,54 +82,69 @@ export default {
       editComment: {
         id: '',
         content: '',
+        html: '',
         assetId: '',
         replyId: ''
       },
       tableTitle: [
         {
           label: 'ID',
-          prop: 'id',
-          show: true
-        }],
+          prop: 'id'
+        }
+      ],
       // 当前用户id
       userId: localStorage.getItem('nz-user-id')
     }
   },
   methods: {
+    textChange (val) {
+      const html = `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${val[0]}</div></div>`
+      this.editComment.html = html
+      this.editComment.content = val[1].substr(0, val[1].length - 1)
+    },
     // 修改
     async edit (id) {
+      if (this.editContentId == id) return
       const response = await this.$get('asset/comment/' + id)
       if (response.code === 200) {
         this.editComment = {
           id: response.data.id,
           content: response.data.content,
+          html: response.data.html,
           assetId: response.data.assetId,
           replyId: response.data.replyId
         }
       }
       this.editContentId = id
+      this.$nextTick(() => {
+        this.$refs.dataTable.doLayout()
+      })
     },
     cancelEdit () {
       this.editContentId = ''
       this.editComment.content = ''
+      this.editComment.html = ''
     }
   }
 }
 </script>
 <style lang="scss" scoped>
->>>.el-textarea__inner {
-    resize: none;
-}
-.textarea-box{
-  position: relative;
-}
-.textarea-button{
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
+.comment-editor>>>.textarea-button{
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 10px;
+  padding-right: 10px;
   .nz-btn.nz-btn-size-mini{
     width: 74px;
     height: 30px;
   }
 }
+#assetCommentTable>>>.descriptions-content {
+  .ql-container.ql-snow{
+    border: unset;
+  }
+  .ql-editor{
+    padding: 0;
+  }
+}
 </style>