对接问题知识库的回复

jero-web/src/components/tableCollection/index.vue

@@ -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;

jero-web/src/components/tableCollection/index1.vue

@@ -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;

jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue

@@ -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">-->
+          <!--           <span style="line-height: 66px;display: inline-block;float: left">-->
-<!--             <a-icon type="arrow-left" style="margin-right: 6px;"/>-->
+          <!--             <a-icon type="arrow-left" style="margin-right: 6px;"/>-->
-<!--           </span>-->
+          <!--           </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;
+    height: 60px;
-    line-height: 80px;
+    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>

jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseView.vue

@@ -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,16 +15,17 @@
           </div>
         </div>
       </div>
-      <div style="padding-top: 68px;background: #fff">
+      <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">
+<!--            <div class="content-text-top">-->
-              <span style="margin-right: 10px">
+<!--              <span style="margin-right: 10px">-->
-                 {{$t('issuedBy')}}:{{this.queryForm.createBy}}
+<!--                 {{$t('issuedBy')}}:{{this.queryForm.createBy}}-->
-              </span>
+<!--              </span>-->
-            <span>
+<!--              <span>-->
-                 {{$t('releaseDate')}}:{{this.queryForm.createTime?this.queryForm.createTime.slice(0,11):''}}
+<!--                 {{$t('releaseDate')}}:{{this.queryForm.createTime?this.queryForm.createTime.slice(0,11):''}}-->
-             </span>
+<!--             </span>-->
-          </div>
+<!--            </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>
@@ -39,7 +40,8 @@
               </span>
               </div>
             </div>
-          <div class="content" v-html="queryForm.content"></div>
+            <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"/>
@@ -54,7 +56,8 @@
                  <span>{{this.queryForm.collectCount}}</span>
               </span>
             </div>
-          <div class="box-text">
+            <div class="division"></div>
+            <div class="box-text" style="margin-top: 24px">
               <div class="header-text">
                 {{$t('comment')}}
               </div>
@@ -76,22 +79,70 @@
               <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 v-for="(item,index) in releaseList" style="margin-bottom: 30px">
-            <div class="box-text">
+              <div class="box-text-index">
-              <div class="header-text">
+                <div class="header-text-index">
-                <span style="margin-right: 20px">{{item.createBy}}</span>
+                  <span style="margin-right: 20px" class="header-text-index-left">{{item.createBy}}</span>
-                {{item.createTime}}
+                  <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">
+              <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>
       </div>
     </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'),
+            title:this.$t('issuedBy'),
-            value: 'title'
+            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>