NEZ-2297 feat：asset评论内容支持富文本

2022-10-28 10:33:00 +08:00
parent 2261e71560
commit 8c3506ec58
6 changed files with 156 additions and 97 deletions
--- 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;
--- 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
            }
--- a/nezha-fronted/src/components/chart/richTextEditor.vue
+++ b/nezha-fronted/src/components/chart/richTextEditor.vue
@@ -1,6 +1,7 @@
 <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>
+    <slot></slot>
    <div class="text-too-long" v-if="tooLong">{{$t('validate.tooLong')}}</div>
    <el-upload
      action=""
@@ -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>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/commentsBottomTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/commentsBottomTab.vue
@@ -13,20 +13,22 @@
  >
    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
    <template v-slot>
-      <div class="textarea-box" :style="{height: rowBox ?'122px':'33px'}">
+      <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">
+        <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)'}">
+      <div :style="{height: rowBox ?'calc(100% - 184px)':'calc(100% - 35px)'}">
        <assetCommentTable
          ref="dataTable"
          :orderByFa="'id'"
@@ -41,7 +43,8 @@
          @save="save"
          @orderBy="tableDataSort"
          @reload="getTableData"
-        @selectionChange="selectionChange"></assetCommentTable>
+          @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) {
@@ -159,13 +174,11 @@ export default {
 .textarea-box >>>.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;
--- 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()
    }
  },
--- 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"
@@ -41,18 +39,15 @@
            <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 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>
+            </rich-text-editor>
          </div>
-            <div v-else class="descriptions-content" >{{scope.row.content}}</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>