对接问题知识库的回复

2022-09-07 15:21:32 +08:00
parent ed2f60b109
commit 1860cfff5e
4 changed files with 316 additions and 131 deletions
@@ -856,7 +856,37 @@
  .table .ant-table-column-title {
    font-weight: bold;
  }
+</style>
+<style scoped lang="less">
+  .box {
+    width: 100%;
+    height: calc(100% - 100px);
+    overflow: auto;
+  }

+  .text {
+    margin-right: 10px;
+  }
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  /deep/ .ant-table-tbody .yellow {
+    background-color: #ffff001f !important;
+    height: 40px !important;
+    border: none !important;
+    padding: 0 !important;
+  }
+  ::v-deep .ant-table-row:first-child {
+    background: #fff!important;
+    /*opacity: 0.9;*/
+  }
+
+  ::v-deep .ant-table-body {
+    background: transparent!important;
+  }
  .content-text {
    width: 100%;
    display: flex;
@@ -891,37 +921,6 @@
    }
  }
 </style>
-<style scoped>
-  .box {
-    width: 100%;
-    height: calc(100% - 100px);
-    overflow: auto;
-  }
-
-  .text {
-    margin-right: 10px;
-  }
-
-  .page {
-    text-align: right;
-    margin-top: 20px;
-  }
-
-  /deep/ .ant-table-tbody .yellow {
-    background-color: #ffff001f !important;
-    height: 40px !important;
-    border: none !important;
-    padding: 0 !important;
-  }
-  ::v-deep .ant-table-row:first-child {
-    background: #fff!important;
-    /*opacity: 0.9;*/
-  }
-
-  ::v-deep .ant-table-body {
-    background: transparent!important;
-  }
-</style>
 <style>
  .resize-table-th {
    position: relative;
@@ -672,7 +672,37 @@
  .table .ant-table-column-title {
    font-weight: bold;
  }
+</style>
+<style scoped lang="less">
+  .box {
+    width: 100%;
+    height: calc(100% - 100px);
+    overflow: auto;
+  }

+  .text {
+    margin-right: 10px;
+  }
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  /deep/ .ant-table-tbody .yellow {
+    background-color: #ffff001f !important;
+    height: 40px !important;
+    border: none !important;
+    padding: 0 !important;
+  }
+  ::v-deep .ant-table-row:first-child {
+    background: #fff!important;
+    opacity: 0.9;
+  }
+
+  ::v-deep .ant-table-body {
+    background: transparent!important;
+  }
  .content-text {
    width: 100%;
    display: flex;
@@ -706,37 +736,6 @@
    }
  }
 </style>
-<style scoped>
-  .box {
-    width: 100%;
-    height: calc(100% - 100px);
-    overflow: auto;
-  }
-
-  .text {
-    margin-right: 10px;
-  }
-
-  .page {
-    text-align: right;
-    margin-top: 20px;
-  }
-
-  /deep/ .ant-table-tbody .yellow {
-    background-color: #ffff001f !important;
-    height: 40px !important;
-    border: none !important;
-    padding: 0 !important;
-  }
-  ::v-deep .ant-table-row:first-child {
-    background: #fff!important;
-    opacity: 0.9;
-  }
-
-  ::v-deep .ant-table-body {
-    background: transparent!important;
-  }
-</style>
 <style>
  .resize-table-th {
    position: relative;
@@ -3,9 +3,9 @@
    <div class="doc-detail-wrap">
      <div class="doc-detail-header" style="position: fixed;top: 0">
        <div class="doc-detail-title">
-<!--           <span style="line-height: 66px;display: inline-block;float: left">-->
-<!--             <a-icon type="arrow-left" style="margin-right: 6px;"/>-->
-<!--           </span>-->
+          <!--           <span style="line-height: 66px;display: inline-block;float: left">-->
+          <!--             <a-icon type="arrow-left" style="margin-right: 6px;"/>-->
+          <!--           </span>-->
          {{header_text}}
        </div>
      </div>
@@ -35,7 +35,7 @@
                    </div>

                  </div>
-                  <div class="content-box-box" v-else>
+                  <div class="content-box-box" :class="{'content-box-box-color':index % 2 == 1 ? true : false}" v-else>
                    <a v-if="index2 == 0 && item2.relevantUrl"
                       style="color: rgb(33, 201, 204)"
                       :class="{'content-box-box-text-admin':!item2.lableName || item2.lableName == 'null' || item2.lableName == 'undefined'? true : false}"
@@ -116,7 +116,7 @@
      }
    },
    mounted() {
-      document.title = 'Country Card'+ '-' + this.$t('details')
+      document.title = 'Country Card' + '-' + this.$t('details')
      this.queryCountry(() => {
        this.replacePage()
      })
@@ -385,8 +385,8 @@
  .content-box-box {
    width: 340px;
    display: inline-block;
-    height: 80px;
-    line-height: 80px;
+    height: 60px;
+    line-height: 60px;
    text-align: center;
    background: #fff;
    border-right: 1px #d9d9d9 solid;
@@ -421,7 +421,7 @@
  }

  .content-box-top {
-    height: 80px;
+    height: 60px;
  }

  .content-box-top:first-child {
@@ -442,6 +442,10 @@
  }

  .content-box-box-text-admin {
-    height: 80px !important;
+    height: 60px !important;
+  }
+
+  .content-box-box-color {
+    background: #f2f2f2;
  }
 </style>
@@ -2,7 +2,7 @@
  <div class="doc-detail">
    <div class="doc-detail-wrap">
      <div class="doc-detail-header" style="position: fixed;top: 0">
-        <div class="doc-detail-title">
+        <div class="doc-detail-title" :title="queryForm.title">
          <!--           <span style="line-height: 66px;display: inline-block;float: left">-->
          <!--             <a-icon type="arrow-left" @click="back" style="margin-right: 6px;"/>-->
          <!--           </span>-->
@@ -15,76 +15,99 @@
          </div>
        </div>
      </div>
-      <div style="padding-top: 68px;background: #fff">
-        <div class="detail-content" style="padding: 24px">
-          <div class="content-text-top">
-              <span style="margin-right: 10px">
-                 {{$t('issuedBy')}}:{{this.queryForm.createBy}}
-              </span>
-            <span>
-                 {{$t('releaseDate')}}:{{this.queryForm.createTime?this.queryForm.createTime.slice(0,11):''}}
-             </span>
-          </div>
-          <div class="content-text">
-            <div class="text-field" v-for="(item,index) in standardContentList" :key="index">
-              <span class="text-field-left" :title="item.title">{{item.title}}</span>
-              <span class="text-field-right text-field-right-url"
-                    @click="clickButtonToUpload(queryForm[item.value])"
-                    v-if="item.type == 2 && queryForm[item.value]"
-              >{{ $t('viewFile') }}</span>
+      <div class="doc-detail-box">
+        <div style="padding-top: 68px;" class="doc-detail-box-text">
+          <div class="detail-content" style="padding: 24px">
+<!--            <div class="content-text-top">-->
+<!--              <span style="margin-right: 10px">-->
+<!--                 {{$t('issuedBy')}}:{{this.queryForm.createBy}}-->
+<!--              </span>-->
+<!--              <span>-->
+<!--                 {{$t('releaseDate')}}:{{this.queryForm.createTime?this.queryForm.createTime.slice(0,11):''}}-->
+<!--             </span>-->
+<!--            </div>-->
+            <div class="content-text">
+              <div class="text-field" v-for="(item,index) in standardContentList" :key="index">
+                <span class="text-field-left" :title="item.title">{{item.title}}</span>
+                <span class="text-field-right text-field-right-url"
+                      @click="clickButtonToUpload(queryForm[item.value])"
+                      v-if="item.type == 2 && queryForm[item.value]"
+                >{{ $t('viewFile') }}</span>

-              <span class="text-field-right"
-                    :title="queryForm[item.value]" v-else>
+                <span class="text-field-right"
+                      :title="queryForm[item.value]" v-else>
                {{queryForm[item.value]}}
              </span>
+              </div>
            </div>
-          </div>
-          <div class="content" v-html="queryForm.content"></div>
-          <div class="content-icon">
+            <div class="division"></div>
+            <div class="content ql-editor" v-html="queryForm.content"></div>
+            <div class="content-icon">
              <span class="content-icon-text">
                    <a-icon class="icon" type="eye"/>
                    <span>{{this.queryForm.browsingHistoryCount}}</span>
              </span>
-            <span class="content-icon-text" @click="likeClick()">
+              <span class="content-icon-text" @click="likeClick()">
                <a-icon class="icon" :class="{'icon-active':this.isPraise}" type="like"/>
                 <span>{{this.queryForm.praiseCount}}</span>
              </span>
-            <span class="content-icon-text" @click="starClick()">
+              <span class="content-icon-text" @click="starClick()">
                <a-icon class="icon" :class="{'icon-active':this.isCollect}" type="star"/>
                 <span>{{this.queryForm.collectCount}}</span>
              </span>
-          </div>
-          <div class="box-text">
-            <div class="header-text">
-              {{$t('comment')}}
            </div>
-          </div>
-          <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
-            <a-row :gutter="24">
-              <a-col :span="24">
-                <div class="box-title-text">
-                  <a-form-model-item class="itemModel" prop="commentContent">
-                    <a-textarea :placeholder="$t('pleaseEnter')+$t('comment')"
-                                v-model.trim="formInline.commentContent"
-                                :rows="4"/>
-                  </a-form-model-item>
-                </div>
-              </a-col>
-            </a-row>
-          </a-form-model>
-          <div class="content-button">
-            <a-button class="header-btn submit" :loading="loading" @click="release" type="primary">{{$t('release')}}
-            </a-button>
-          </div>
-          <div v-for="(item,index) in releaseList">
-            <div class="box-text">
+            <div class="division"></div>
+            <div class="box-text" style="margin-top: 24px">
              <div class="header-text">
-                <span style="margin-right: 20px">{{item.createBy}}</span>
-                {{item.createTime}}
+                {{$t('comment')}}
              </div>
            </div>
-            <div class="content">
-              {{item.commentContent}}
+            <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+              <a-row :gutter="24">
+                <a-col :span="24">
+                  <div class="box-title-text">
+                    <a-form-model-item class="itemModel" prop="commentContent">
+                      <a-textarea :placeholder="$t('pleaseEnter')+$t('comment')"
+                                  v-model.trim="formInline.commentContent"
+                                  :rows="4"/>
+                    </a-form-model-item>
+                  </div>
+                </a-col>
+              </a-row>
+            </a-form-model>
+            <div class="content-button">
+              <a-button class="header-btn submit" :loading="loading" @click="release" type="primary">{{$t('release')}}
+              </a-button>
+            </div>
+            <div v-for="(item,index) in releaseList" style="margin-bottom: 30px">
+              <div class="box-text-index">
+                <div class="header-text-index">
+                  <span style="margin-right: 20px" class="header-text-index-left">{{item.createBy}}</span>
+                  <span class="header-text-index-text">{{item.createTime}}</span>
+                  <span class="box-icon" @click="messageClick(item)">
+                    <a-icon type="message"/>
+                  </span>
+                </div>
+              </div>
+              <div class="content-index">
+                {{item.commentContent}}
+              </div>
+              <div class="box-comment"
+                   v-for="(val,index1) in item.problemKnowledgeBaseCommentVOList"
+                   v-if="item.problemKnowledgeBaseCommentVOList && item.problemKnowledgeBaseCommentVOList.length > 0">
+                <div class="box-text-index">
+                  <div class="header-text-index">
+                    <span style="margin-right: 20px" class="header-text-index-left">{{val.createBy}}</span>
+                    <span class="header-text-index-text">{{val.createTime}}</span>
+                    <span class="box-icon" @click="messageClick(item)">
+                    <a-icon type="message"/>
+                  </span>
+                  </div>
+                </div>
+                <div class="content-index">
+                  {{val.commentContent}}
+                </div>
+              </div>
            </div>
          </div>
        </div>
@@ -92,6 +115,34 @@
    </div>
    <viewFileModel ref="viewFileModelRef"/>
    <SelectedBy ref="SelectedByRef" :title="$t('forward')" @SelectedByForm="SelectedByForm"></SelectedBy>
+    <a-modal
+      :title="$t('replyToComments')"
+      :width="700"
+      :visible="visibleComment"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @ok="handleOkComment"
+      @cancel="handleCancelComment"
+    >
+      <a-form-model :model="formInlineComment" class="formAdd" :rules="rulesComment" ref="ruleFormComment">
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text" :title="$t('replyToComments')">{{$t('replyToComments')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="'replyContent'">
+                <a-textarea
+                  :placeholder="$t('PleaseEnter')+$t('replyToComments')"
+                  :disabled="false"
+                  v-model="formInlineComment.replyContent" :rows="4"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-modal>
  </div>
 </template>

@@ -100,6 +151,10 @@
  import SelectedBy from '@/components/SelectedBy/index'
  import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
  import { mapGetters } from 'vuex'
+  import 'quill/dist/quill.core.css'
+  import 'quill/dist/quill.snow.css'
+  import 'quill/dist/quill.bubble.css'
+  import { quillEditor } from 'vue-quill-editor'

  export default {
    name: 'problemKnowledgeBaseView',
@@ -109,6 +164,10 @@
    },
    data() {
      return {
+        visibleComment: false,
+        confirmLoading: false,
+        CommentQuery: {},
+        formInlineComment: {},
        standardContentList: [
          {
            title: this.$t('problemClassification'),
@@ -122,9 +181,17 @@
            title: this.$t('standardNo'),
            value: 'standNumber'
          },
+          // {
+          //   title: this.$t('title'),
+          //   value: 'title'
+          // },
          {
-            title: this.$t('title'),
-            value: 'title'
+            title:this.$t('issuedBy'),
+            value: 'createBy'
+          },
+          {
+            title:this.$t('releaseDate'),
+            value: 'createTime'
          },
          {
            title: this.$t('enclosure'),
@@ -134,6 +201,20 @@
        ],
        queryForm: {},
        formInline: {},
+        rulesComment: {
+          replyContent: [
+            {
+              required: true,
+              message: this.$t('replyToComments') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 300,
+              message: this.$t('replyToComments') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ]
+        },
        rules: {
          commentContent: [
            {
@@ -156,6 +237,39 @@
    },
    methods: {
      ...mapGetters(['userInfo']),
+      messageClick(val) {
+        this.CommentQuery = val
+        this.visibleComment = true
+        this.formInlineComment = {}
+        this.$nextTick(() => {
+          this.$refs.ruleFormComment.clearValidate()
+        })
+      },
+      handleOkComment() {
+        this.$refs.ruleFormComment.validate(valid => {
+          if (valid) {
+            let query = {
+              commentId: this.CommentQuery.id,
+              replyContent: this.formInlineComment.replyContent
+            }
+            this.confirmLoading = true
+            postAction('/project/problemKnowledgeBaseReplyEO/add', query).then((res) => {
+              if (res.success) {
+                this.$message.success(this.$t('OperationSuccessful'))
+                this.visibleComment = false
+                this.confirmLoading = false
+                this.releaseData()
+              } else {
+                this.confirmLoading = false
+                this.$message.success(this.$t('operationFailed'))
+              }
+            })
+          }
+        })
+      },
+      handleCancelComment() {
+        this.visibleComment = false
+      },
      SelectedByForm(userIds) {
        let query = {
          userIds: userIds,
@@ -415,7 +529,7 @@
      .text-field-right-url {
        color: #00B3BE !important;
        cursor: pointer;
-        margin-top: 10px;
+        /*margin-top: 10px;*/
      }
    }
  }
@@ -425,6 +539,9 @@
    color: #040B29;
    font-weight: 400;
    word-break: break-word;
+    padding: 24px 0;
+    box-sizing: border-box;
+    margin-top: 32px;
  }

  .content-icon {
@@ -449,12 +566,12 @@
  }

  .content-icon-text .icon {
-    font-size: 24px;
+    font-size: 20px;
    color: #3b4249 !important;
  }

  .content-icon-text .icon-active {
-    font-size: 24px;
+    font-size: 20px;
    color: #00B3BE !important;
  }

@@ -532,10 +649,76 @@
  .content-text-top {
    width: 100%;
    text-align: right;
-    color: #040B29;
+    color: #6F7385;
    font-weight: 400;
-    font-size: 16px;
+    font-size: 14px;
    margin-bottom: 20px;
  }

+  .doc-detail-box {
+    width: 100%;
+    background: #f2f2f2;
+  }
+
+  .doc-detail-box-text {
+    width: 75%;
+    margin: 0 auto;
+    background: #fff;
+  }
+
+  .division {
+    height: 20px;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    background: #f2f2f2;
+    margin-top: 20px;
+  }
+
+  .content-index {
+    font-size: 14px;
+    color: #000F16;
+    font-weight: 400;
+    word-break: break-word;
+    padding: 12px 0;
+    box-sizing: border-box;
+  }
+
+  .header-text-index {
+    font-size: 16px;
+    font-weight: 400;
+    margin-top: 10px;
+    height: 35px;
+    color: #000F16;
+    line-height: 40px;
+  }
+
+  .box-icon {
+    margin-right: 10px;
+    float: right;
+    cursor: pointer;
+  }
+
+  .box-comment {
+    width: calc(100% - 80px);
+    margin-left: 80px;
+    background: #f2f2f2;
+    padding: 6px 24px;
+    box-sizing: border-box;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+
+  .header-text-index-left {
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .header-text-index-text {
+    font-size: 14px;
+    color: #848684;
+  }
 </style>