From 61a980bdeb0ffa25eb08a4e1a84a59fd45e3a662 Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Mon, 1 Aug 2022 11:27:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E6=A1=A3=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94=E7=9A=84=E7=BB=86=E8=8A=82=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/commentList.vue                | 393 ++++++++++++++++++
 .../components/comparisonResults.vue          | 234 ++++++++---
 .../components/documentDataComparison.vue     | 106 ++++-
 .../documentComparison/index.vue              |   6 +-
 4 files changed, 678 insertions(+), 61 deletions(-)
 create mode 100644 jero-web/src/views/documentTools/documentComparison/components/commentList.vue

diff --git a/jero-web/src/views/documentTools/documentComparison/components/commentList.vue b/jero-web/src/views/documentTools/documentComparison/components/commentList.vue
new file mode 100644
index 000000000..1dc268765
--- /dev/null
+++ b/jero-web/src/views/documentTools/documentComparison/components/commentList.vue
@@ -0,0 +1,393 @@
+<template>
+  <div>
+    <a-drawer
+      :title="$t('comment')"
+      :maskClosable="false"
+      :width="482"
+      placement="right"
+      :closable="true"
+      @close="handleCancel"
+      :visible="visible">
+      <div class="button-box">
+        <a-input-search class="box-input box-input-search" allowClear
+                        @search="allowClearChange"
+                        :placeholder="$t('PleaseEnter')+$t('comment')"
+                        v-model="commentContent"></a-input-search>
+        <a-button @click="submitQuery" style="margin-right: 8px;" type="primary">{{$t('query')}}</a-button>
+        <a-button @click="handleSubmit" class="button-text" :title="$t('publishComment')" type="primary">
+          {{$t('publishComment')}}
+        </a-button>
+      </div>
+      <div class="comment-box" v-if="dataList && dataList.length > 0">
+        <div class="comment-box-top-box" v-for="(item,index) in dataList" :key="index">
+<!--          <div class="title-text">{{$t('record')+(index + 1)}}</div>-->
+          <div class="box-content">
+            <div class="img-box">
+              <img src="../../../../assets/daiban.png" class="img" alt="">
+            </div>
+            <div class="box-text">
+              <span class="box-text-name">{{item.name}}</span>
+              <span calss="box-text-time">{{item.createTime}}</span>
+            </div>
+            <div class="box-text-text">
+              {{item.content}}
+            </div>
+            <div class="box-icon" @click="messageClick(item)">
+              <a-icon type="message"/>
+            </div>
+          </div>
+          <div class="inside-box" v-if="item.projectCommentVOList && item.projectCommentVOList.length > 0">
+            <div class="box-content-inside" v-for="(val,indexOne) in item.projectCommentVOList" :key="indexOne">
+              <div class="img-box">
+                <img src="../../../../assets/daiban.png" class="img" alt="">
+              </div>
+              <div class="box-text">
+                <span class="box-text-name">{{val.name}}</span>
+                <span calss="box-text-time">{{val.createTime}}</span>
+              </div>
+              <div class="box-text-text">
+                {{val.content}}
+              </div>
+              <div class="box-icon" @click="messageClick(item)">
+                <a-icon type="message"/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="comment-box-text" v-else>{{$t('noComment')}}</div>
+      <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
+    </a-drawer>
+    <a-modal
+      :title="title"
+      :width="500"
+      :visible="visibleComment"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @ok="handleOkComment"
+      @cancel="handleCancelComment"
+    >
+      <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+        <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="title">{{title}}</span>
+              </div>
+              <a-form-model-item v-if="title == $t('replyToComments')" class="itemModel" :prop="'replyContent'">
+                <a-textarea
+                  :placeholder="$t('PleaseEnter')+title"
+                  :disabled="false"
+                  v-model="formInline.replyContent" :rows="4"/>
+              </a-form-model-item>
+              <a-form-model-item v-else-if="title == $t('publishComment')" class="itemModel" :prop="'commentContent'">
+                <a-textarea
+                  :placeholder="$t('PleaseEnter')+title"
+                  :disabled="false"
+                  v-model="formInline.commentContent" :rows="4"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-modal>
+  </div>
+
+</template>
+
+<script>
+  import { getAction, postAction } from '@/api/manage'
+
+  export default {
+    name: 'commentList',
+    data() {
+      return {
+        visible: false,
+        dataList: [],
+        formInline: {},
+        commentContent: '',
+        loading: false,
+        title: this.$t('comment'),
+        confirmLoading: false,
+        visibleComment: false,
+        url: {
+          list: '/project/projectCommentEO/list',
+          add: '/project/projectCommentEO/add',
+          edit: '/project/projectReplyEO/add'
+        },
+        rules: {
+          commentContent: [
+            {
+              required: true,
+              message: this.$t('publishComment') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            }
+          ],
+          replyContent: [
+            {
+              required: true,
+              message: this.$t('replyToComments') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            }
+          ]
+        }
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      handleCancel() {
+        this.visible = false
+      },
+      getData() {
+        this.visible = true
+        this.getList()
+      },
+      handleSubmit() {
+        this.title = this.$t('publishComment')
+        this.formInline = {}
+        this.visibleComment = true
+        this.$nextTick(() => {
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      allowClearChange() {
+        this.getList()
+      },
+      submitQuery() {
+        this.getList()
+      },
+      getList() {
+        this.loading = true
+        getAction(this.url.list, {
+          projectLibraryId: this.$route.query.id,
+          commentContent: this.commentContent
+        }).then((res) => {
+          if (res.success) {
+            this.loading = false
+            this.dataList = res.result || []
+          } else {
+            this.loading = false
+            this.dataList = []
+          }
+        })
+      },
+      handleOkComment() {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            let url = ''
+            let query = {}
+            if (this.title == this.$t('publishComment')) {
+              url = this.url.add
+              query = {
+                commentContent: this.formInline.commentContent,
+                projectLibraryId: this.$route.query.id
+              }
+            } else if (this.title == this.$t('replyToComments')) {
+              url = this.url.edit
+              query = {
+                replyContent: this.formInline.replyContent,
+                projectCommentId: this.formInline.projectCommentId
+              }
+            }
+            this.confirmLoading = true
+            postAction(url, query).then((res) => {
+              if (res.success) {
+                this.$message.success(this.$t('OperationSuccessful'))
+                this.visibleComment = false
+                this.confirmLoading = false
+                this.getList()
+              } else {
+                this.confirmLoading = false
+                this.$message.success(this.$t('operationFailed'))
+              }
+            })
+          }
+        })
+      },
+      handleCancelComment() {
+        this.visibleComment = false
+      },
+      messageClick(row) {
+        this.formInline = {}
+        this.formInline.projectCommentId = row.id
+        this.title = this.$t('replyToComments')
+        this.visibleComment = true
+        this.$nextTick(() => {
+          this.$refs.ruleForm.clearValidate()
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .comment-box {
+    position: absolute;
+    left: 0;
+    height: calc(100% - 140px);
+    width: 100%;
+    overflow: auto;
+    padding: 0 24px 24px 24px;
+    box-sizing: border-box;
+  }
+
+  .comment-box-top-box {
+    padding: 30px 24px 24px 24px;
+    box-sizing: border-box;
+    border: 1px solid #F1F2F4;
+    border-radius: 4px;
+    margin-bottom: 24px;
+  }
+
+  .img-box {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 8px;
+    position: absolute;
+
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .box-text {
+    display: inline-block;
+    position: absolute;
+    margin-left: 40px;
+
+    .box-text-name {
+      font-size: 14px;
+      font-weight: bold;
+      color: #040B29;
+      margin-right: 8px;
+    }
+
+    .box-text-time {
+      font-size: 14px;
+      font-weight: 400;
+      color: #6F7385;
+    }
+  }
+
+  .box-text-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+    margin-top: 22px;
+    margin-left: 40px;
+  }
+
+  .title-text {
+    font-size: 16px;
+    font-weight: 400;
+    color: #040B29;
+    margin-bottom: 18px;
+  }
+
+  .box-content {
+    position: relative;
+  }
+
+  .box-content-inside {
+    position: relative;
+    margin-bottom: 15px;
+  }
+
+  .box-icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+  }
+
+  .inside-box {
+    background: #F6F7FA;
+    border-radius: 4px;
+    margin-left: 40px;
+    width: calc(100% - 40px);
+    padding: 18px;
+    box-sizing: border-box;
+    margin-top: 15px;
+  }
+
+  .button-box {
+    text-align: right;
+    margin-bottom: 24px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 100;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    /*align-items: center;*/
+  }
+
+  .title-text {
+    width: 74px;
+    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: 48px;
+  }
+
+  .itemModel {
+    width: calc(100% - 64px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+
+  .title-text-text {
+    margin-top: 9px;
+  }
+
+  .comment-box-text {
+    text-align: center;
+    margin-top: 40px;
+  }
+
+  .box-input {
+    width: calc(100% - 168px);
+    margin-right: 8px;
+  }
+
+  .button-text {
+    width: 73px;
+    overflow: hidden;
+    padding: 0 8px;
+    box-sizing: border-box;
+  }
+</style>
+<style>
+  .box-input-search .ant-input-suffix .ant-input-search-icon{
+    display: none;
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentTools/documentComparison/components/comparisonResults.vue b/jero-web/src/views/documentTools/documentComparison/components/comparisonResults.vue
index 9c73a544e..81de1c7e2 100644
--- a/jero-web/src/views/documentTools/documentComparison/components/comparisonResults.vue
+++ b/jero-web/src/views/documentTools/documentComparison/components/comparisonResults.vue
@@ -11,7 +11,7 @@
         <div class="doc-detail-right">
           <div @click="exportComparisonReportClick" class="operator-text-text"
                :title="$t('exportComparisonReport')">
-            <a-icon type="export" />
+            <a-icon type="export"/>
             {{$t('exportComparisonReport')}}
           </div>
           <div @click="commentClick" class="operator-text-text"
@@ -24,7 +24,8 @@
       <div style="padding-top: 68px;background: #fff">
         <div class="detail-content">
           <div class="detail-content-header" style="margin-bottom: 20px">
-            <a-checkbox @change="onChange" style="margin-left: 20px;float: left"></a-checkbox>
+            <a-checkbox @change="onChange" :indeterminate="indeterminate" :checked="checkAll"
+                        style="margin-left: 20px;float: left"></a-checkbox>
             <div class="detail-content-header-content">
               <div class="detail-content-header-content-left">
                 所选标准：GB 23456-2020 机动车标准 FMVSS 114 中文.word
@@ -37,10 +38,53 @@
               </div>
             </div>
           </div>
-          <a-checkbox-group @change="onChange" style="width: 100%;overflow: overlay;height: calc(100vh - 300px)">
+          <a-checkbox-group @change="checkboxChange" v-model="checkboxList"
+                            style="width: 100%;overflow: overlay;height: calc(100vh - 300px)">
             <div class="detail-content-content">
               <a-checkbox value="A" class="detail-checkbox">
               </a-checkbox>
+              <div class="detail-content-content-text">
+                <div class="detail-content-content-text-left">
+                  <div class="detail-content-left">
+                    <div class="detail-content-left-top">
+                      <span>第10条</span>
+                      <span style="margin-left: 10px">光反射器</span>
+                    </div>
+                    <div class="detail-content-left-button">
+                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板
+                      sdf kdsf kljsfkldsfdsfdsf
+                    </div>
+                  </div>
+                  <div class="detail-content-right">
+                    <div class="detail-content-left-top">
+                      <span>第10条</span>
+                      <span style="margin-left: 10px">光反射器</span>
+                    </div>
+                    <div class="detail-content-left-button">
+                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板收到反是馈就但是罚款决定书发的科技示范
+                    </div>
+                  </div>
+                  <div class="detail-content-bottom">
+                    <div class="detail-content-bottom-left" :title="$t('comparisonDifferenceComment')">
+                      <a-icon type="message"/>
+                      {{$t('comparisonDifferenceComment')}}:
+                    </div>
+                    <div class="detail-content-bottom-right">
+                      差异是各单位在结构上的差别程度成员在时间横轴上的位置的差别程经理与其他的差别程度 横轴上的位置的差别程经理与其他的差别程度差异
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-content-content-text-right">
+                  <span class="text-button-one">
+                   <a class="text-button" @click="comparaEdit">{{$t('edit')}}</a>
+                   <a class="text-button" @click="comparaDelete">{{$t('delete')}}</a>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="detail-content-content">
+              <a-checkbox value="B" class="detail-checkbox">
+              </a-checkbox>
               <div class="detail-content-content-text">
                 <div class="detail-content-content-text-left">
                   <div class="detail-content-left">
@@ -81,49 +125,7 @@
               </div>
             </div>
             <div class="detail-content-content">
-              <a-checkbox value="A" class="detail-checkbox">
-              </a-checkbox>
-              <div class="detail-content-content-text">
-                <div class="detail-content-content-text-left">
-                  <div class="detail-content-left">
-                    <div class="detail-content-left-top">
-                      <span>第10条</span>
-                      <span style="margin-left: 10px">光反射器</span>
-                    </div>
-                    <div class="detail-content-left-button">
-                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板
-                      sdf kdsf kljsfkldsfdsfdsf
-                    </div>
-                  </div>
-                  <div class="detail-content-right">
-                    <div class="detail-content-left-top">
-                      <span>第10条</span>
-                      <span style="margin-left: 10px">光反射器</span>
-                    </div>
-                    <div class="detail-content-left-button">
-                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板收到反是馈就但是罚款决定书发的科技示范
-                    </div>
-                  </div>
-                  <div class="detail-content-bottom">
-                    <div class="detail-content-bottom-left" :title="$t('comparisonDifferenceComment')">
-                      <a-icon type="message"/>
-                      {{$t('comparisonDifferenceComment')}}:
-                    </div>
-                    <div class="detail-content-bottom-right">
-                      差异是各单位在结构上的差别程度成员在时间横轴上的位置的差别程经理与其他的差别程度 横轴上的位置的差别程经理与其他的差别程度差异
-                    </div>
-                  </div>
-                </div>
-                <div class="detail-content-content-text-right">
-                  <span class="text-button-one">
-                   <a class="text-button">{{$t('edit')}}</a>
-                   <a class="text-button">{{$t('delete')}}</a>
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div class="detail-content-content">
-              <a-checkbox value="A" class="detail-checkbox">
+              <a-checkbox value="C" class="detail-checkbox">
               </a-checkbox>
               <div class="detail-content-content-text">
                 <div class="detail-content-content-text-left">
@@ -166,7 +168,7 @@
             </div>
           </a-checkbox-group>
           <div class="detail-content-content">
-            <a-checkbox value="A" class="detail-checkbox">
+            <a-checkbox value="D" class="detail-checkbox">
             </a-checkbox>
             <div class="detail-content-content-text">
               <div class="detail-content-content-text-left">
@@ -190,8 +192,8 @@
               </div>
               <div class="detail-content-content-text-right">
                   <span class="text-button-one">
-                   <a class="text-button">{{$t('edit')}}</a>
-                   <a class="text-button">{{$t('delete')}}</a>
+                   <a class="text-button" @click="fullTextEdit">{{$t('edit')}}</a>
+                    <!--                   <a class="text-button">{{$t('delete')}}</a>-->
                   </span>
               </div>
             </div>
@@ -199,16 +201,70 @@
         </div>
       </div>
     </div>
+    <a-modal
+      :title="title"
+      :width="600"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @cancel="visible = false"
+    >
+      <template slot="footer">
+        <a-button key="back" @click="visible = false">
+          {{$t('cancel')}}
+        </a-button>
+        <a-button type="primary" @click="fullTextCommentsSubmit">
+          {{$t('submit')}}
+        </a-button>
+      </template>
+      <a-form-model :model="formInlineText" class="formAdd" :rules="rulesText" ref="ruleFormText">
+        <div class="box-title-text-Remarks" v-if="title == $t('fullTextComments')">
+          <div class="title-text-Remarks" :title="$t('fullTextComments')">
+            <span>{{$t('fullTextComments')}}</span>
+          </div>
+          <a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="dreUserIdName">
+            <a-textarea :placeholder="$t('pleaseEnter')+$t('fullTextComments')"
+                        v-model="formInlineText.fullTextComments"
+                        :rows="4"/>
+          </a-form-model-item>
+        </div>
+        <div class="box-title-text-Remarks" v-if="title == $t('comparativeComments')">
+          <div class="title-text-Remarks" :title="$t('comparativeComments')">
+            <span>{{$t('comparativeComments')}}</span>
+          </div>
+          <a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="dreUserIdName">
+            <a-textarea :placeholder="$t('pleaseEnter')+$t('comparativeComments')"
+                        v-model="formInlineText.comparativeComments"
+                        :rows="4"/>
+          </a-form-model-item>
+        </div>
+      </a-form-model>
+    </a-modal>
     <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
+    <commentList ref="commentListRef"/>
   </div>
 </template>
 
 <script>
+  import { getAction, postAction, downloadFile, deleteAction } from '@/api/manage'
+  import commentList from './commentList'
+
   export default {
     name: 'comparisonResults',
+    components: {
+      commentList
+    },
     data() {
       return {
-        loading: false
+        loading: false,
+        checkboxList: [],
+        confirmLoading: false,
+        visible: false,
+        formInlineText: {},
+        rulesText: {},
+        title: '',
+        indeterminate: false,
+        checkAll: false
       }
     },
     methods: {
@@ -218,10 +274,65 @@
         })
       },
       commentClick() {
-
+        this.$refs.commentListRef.getData()
       },
       exportComparisonReportClick() {
 
+      },
+      checkboxChange(checkedList) {
+        this.indeterminate = !!checkedList.length && checkedList.length < this.checkboxList.length
+        this.checkAll = checkedList.length === this.checkboxList.length
+      },
+      onChange(event) {
+        this.checkAll = event.target.checked
+        if (event.target.checked) {
+          this.checkboxList = ['A', 'B', 'C', 'D']
+        } else {
+          this.checkboxList = []
+        }
+        if (this.checkboxList.length == 0) {
+          this.checkAll = false
+          this.indeterminate = false
+        }
+      },
+      fullTextCommentsSubmit() {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      fullTextEdit() {
+        this.visible = true
+        this.title = this.$t('fullTextComments')
+        this.formInlineText = {}
+        this.$nextTick(() => {
+          this.$refs.ruleFormText.clearValidate()
+        })
+      },
+      comparaEdit() {
+        this.visible = true
+        this.title = this.$t('comparativeComments')
+        this.formInlineText = {}
+        this.$nextTick(() => {
+          this.$refs.ruleFormText.clearValidate()
+        })
+      },
+      comparaDelete(val) {
+        let _this = this
+        this.$confirm({
+          content: _this.$t('ConfirmDelete'),
+          onOk() {
+            deleteAction(_this.url.deleteOne, { id: val.id }).then((res) => {
+              if (res.success) {
+                _this.$message.success(_this.$t('OperationSuccessful'))
+                _this.getList()
+              } else {
+                _this.$message.warning(_this.$t('operationFailed'))
+              }
+            })
+          }
+        })
       }
     }
   }
@@ -461,4 +572,25 @@
     text-justify: inter-ideograph;
     word-break: break-all
   }
+
+  .box-title-text-Remarks {
+    line-height: 1.4;
+    display: flex;
+    /*align-items: center;*/
+    margin-bottom: 10px;
+  }
+
+  .title-text-Remarks {
+    width: 68px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 6px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentTools/documentComparison/components/documentDataComparison.vue b/jero-web/src/views/documentTools/documentComparison/components/documentDataComparison.vue
index 73e53956b..cdf207ef6 100644
--- a/jero-web/src/views/documentTools/documentComparison/components/documentDataComparison.vue
+++ b/jero-web/src/views/documentTools/documentComparison/components/documentDataComparison.vue
@@ -40,7 +40,8 @@
                 />
               </div>
               <div class="detail-content-content-right">
-                <div class="detail-content-content-right-data">
+                <div class="detail-content-content-right-data" @click="detailLeft(0)"
+                     :class="{'detail-content-content-right-data-blue':false}">
                   <div class="detail-content-content-right-data-text">
                     1、范围
                   </div>
@@ -49,7 +50,8 @@
                     本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
                   </div>
                 </div>
-                <div class="detail-content-content-right-data">
+                <div class="detail-content-content-right-data" @click="detailLeft(1)"
+                     :class="{'detail-content-content-right-data-blue':true}">
                   <div class="detail-content-content-right-data-text">
                     1、范围
                   </div>
@@ -77,7 +79,8 @@
                 />
               </div>
               <div class="detail-content-content-right">
-                <div class="detail-content-content-right-data">
+                <div class="detail-content-content-right-data-right" @click="detailRight(0)"
+                     :class="{'detail-content-content-right-data-blue-right':true}">
                   <div class="detail-content-content-right-data-text">
                     1、范围
                   </div>
@@ -86,7 +89,7 @@
                     本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
                   </div>
                 </div>
-                <div class="detail-content-content-right-data">
+                <div class="detail-content-content-right-data-right" @click="detailRight(1)">
                   <div class="detail-content-content-right-data-text">
                     1、范围
                   </div>
@@ -95,7 +98,7 @@
                     本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
                   </div>
                 </div>
-                <div class="detail-content-content-right-data">
+                <div class="detail-content-content-right-data-right" @click="detailRight(2)">
                   <div class="detail-content-content-right-data-text">
                     1、范围
                   </div>
@@ -104,7 +107,7 @@
                     本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
                   </div>
                 </div>
-                <div class="detail-content-content-right-data">
+                <div class="detail-content-content-right-data-right" @click="detailRight(3)">
                   <div class="detail-content-content-right-data-text">
                     1、范围
                   </div>
@@ -136,6 +139,36 @@
         </div>
       </div>
     </div>
+    <a-modal
+      :title="$t('fullTextComments')"
+      :width="600"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @cancel="visible = false"
+    >
+      <template slot="footer">
+        <a-button type="primary" @click="fullTextCommentsEdit">
+          {{$t('edit')}}
+        </a-button>
+        <a-button type="primary" @click="fullTextCommentsSubmit">
+          {{$t('submit')}}
+        </a-button>
+      </template>
+      <a-form-model :model="formInlineText" class="formAdd" :rules="rulesText" ref="ruleFormText">
+        <div class="box-title-text-Remarks">
+          <div class="title-text-Remarks" :title="$t('fullTextComments')">
+            <span>{{$t('fullTextComments')}}</span>
+          </div>
+          <a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="dreUserIdName">
+            <a-textarea :placeholder="$t('pleaseEnter')+$t('fullTextComments')"
+                        v-model="formInlineText.fullTextComments"
+                        :disabled="fullTextDisabled"
+                        :rows="4"/>
+          </a-form-model-item>
+        </div>
+      </a-form-model>
+    </a-modal>
     <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
   </div>
 </template>
@@ -146,8 +179,13 @@
     data() {
       return {
         formInline: {},
+        formInlineText: {},
         rules: {},
+        rulesText: {},
         loading: false,
+        visible: false,
+        confirmLoading: false,
+        fullTextDisabled: false,
         gData: [
           {
             title: '0-0sdf dsfdsfdsfdsfds',
@@ -182,10 +220,37 @@
         window.open(newUrl.href, '_blank')
       },
       addFullTextCommentClick() {
-
+        this.visible = true
+        this.fullTextDisabled = true
       },
       turnOffAutomaticMatchingClick() {
 
+      },
+      fullTextCommentsEdit() {
+        this.fullTextDisabled = false
+      },
+      fullTextCommentsSubmit() {
+
+      },
+      detailLeft(num) {
+        let detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
+        if (detailLeftColor && detailLeftColor.length > 0) {
+          detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
+        }
+        let detailLeft = document.getElementsByClassName('detail-content-content-right-data')
+        if (detailLeft && detailLeft.length > 0) {
+          detailLeft[num].classList.add('detail-content-content-right-data-color')
+        }
+      },
+      detailRight(num) {
+        let detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
+        if (detailRightColor && detailRightColor.length > 0) {
+          detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
+        }
+        let detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
+        if (detailRight && detailRight.length > 0) {
+          detailRight[num].classList.add('detail-content-content-right-data-color-right')
+        }
       }
     }
   }
@@ -332,6 +397,16 @@
     border: 1px solid #EFF1F3;
     border-radius: 4px;
     margin-bottom: 22px;
+    cursor: pointer;
+  }
+
+  .detail-content-content-right-data-right {
+    padding: 22px 24px;
+    box-sizing: border-box;
+    border: 1px solid #EFF1F3;
+    border-radius: 4px;
+    margin-bottom: 22px;
+    cursor: pointer;
   }
 
   .detail-content-content-right-data:last-child {
@@ -387,4 +462,21 @@
     overflow: hidden;
     text-align: right;
   }
+
+  .detail-content-content-right-data-blue {
+    border: 1px #21c9cc solid;
+  }
+
+  .detail-content-content-right-data-blue-right {
+    border: 1px #21c9cc solid;
+  }
+
+  .detail-content-content-right-data-color {
+    border: 1px red solid;
+  }
+
+  .detail-content-content-right-data-color-right {
+    border: 1px red solid;
+  }
+
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentTools/documentComparison/index.vue b/jero-web/src/views/documentTools/documentComparison/index.vue
index d83c91ba1..3c6a715c5 100644
--- a/jero-web/src/views/documentTools/documentComparison/index.vue
+++ b/jero-web/src/views/documentTools/documentComparison/index.vue
@@ -257,13 +257,13 @@
         window.open(newUrl.href, '_blank')
       },
       subscribe() {
+
+      },
+      edit() {
         let newUrl = this.$router.resolve({
           path: '/documentDataComparison'
         })
         window.open(newUrl.href, '_blank')
-      },
-      edit() {
-
       },
       initiatingProcessClick() {
         let newUrl = this.$router.resolve({