修改文档对比的细节问题

2022-08-01 11:27:14 +08:00
parent ad433b5e80
commit 61a980bdeb
4 changed files with 678 additions and 61 deletions
@@ -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>