[update] 文档对比的弹框拆分出来

2023-08-22 16:12:33 +08:00
parent 0c65e30e98
commit ca8d334c45
9 changed files with 276 additions and 225 deletions
@@ -204,7 +204,7 @@
    width: calc(100% - 130px);
    display: inline-block;
    margin-top: 2px;
-    height: 40px;
+    height: 100%;
    margin-bottom: 24px;
    /deep/ .ant-form-item-control-wrapper {
      width: 100%;
@@ -231,31 +231,32 @@ export default {
      this.getList()
    },
    getList () {
-      const queryParam = JSON.parse(JSON.stringify(this.queryParam))
-      Object.keys(queryParam).forEach(val => {
-        if (queryParam[val] instanceof Array) {
-          queryParam[val] = queryParam[val].join(',')
-        }
-      })
-      const query = {
-        pageNo: this.ipagination.current,
-        pageSize: this.ipagination.pageSize,
-        ...queryParam
-      }
-      this.loading = true
-      getAction(this.url.list, query).then((res) => {
-        if (res.success) {
-          if (res.result.current > 1 && res.result.records.length === 0) {
-            this.ipagination.current = 1
-            this.getList()
-            return
-          }
-          this.dataSource = res.result.records || []
-          this.ipagination.total = res.result.total
-        }
-      }).finally(() => {
-        this.loading = false
-      })
+      this.dataSource = [{ id: 1, serialNumberLeft: '11' }]
+      // const queryParam = JSON.parse(JSON.stringify(this.queryParam))
+      // Object.keys(queryParam).forEach(val => {
+      //   if (queryParam[val] instanceof Array) {
+      //     queryParam[val] = queryParam[val].join(',')
+      //   }
+      // })
+      // const query = {
+      //   pageNo: this.ipagination.current,
+      //   pageSize: this.ipagination.pageSize,
+      //   ...queryParam
+      // }
+      // this.loading = true
+      // getAction(this.url.list, query).then((res) => {
+      //   if (res.success) {
+      //     if (res.result.current > 1 && res.result.records.length === 0) {
+      //       this.ipagination.current = 1
+      //       this.getList()
+      //       return
+      //     }
+      //     this.dataSource = res.result.records || []
+      //     this.ipagination.total = res.result.total
+      //   }
+      // }).finally(() => {
+      //   this.loading = false
+      // })
    },
    batchDelete () {
      if (this.selectedRowKeys.length > 0) {
@@ -263,11 +264,11 @@ export default {
          content: this.$t('confirmBatchDeletion'),
          onOk: () => {
            const idList = []
-            const selectedRowKeysRecord = JSON.parse(JSON.stringify(this.selectedRowKeysRecord))
-            for (let i = 0; i < selectedRowKeysRecord.length; i++) {
-              if (selectedRowKeysRecord[i].createBy === this.userInfoQuery.username &&
-                selectedRowKeysRecord[i].releaseState === 'draft') {
-                idList.push(selectedRowKeysRecord[i].id)
+            const selectedRows = JSON.parse(JSON.stringify(this.selectedRows))
+            for (let i = 0; i < selectedRows.length; i++) {
+              if (selectedRows[i].createBy === this.userInfoQuery.username &&
+                selectedRows[i].releaseState === 'draft') {
+                idList.push(selectedRows[i].id)
              }
            }
            if (idList.length > 0) {
@@ -14,7 +14,7 @@
                        :placeholder="$t('pleaseEnter')+$t('docTool.comparison.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('docTool.comparison.publishComment')" type="primary">
+        <a-button @click="handleSubmit" :title="$t('docTool.comparison.publishComment')" type="primary">
          {{$t('docTool.comparison.publishComment')}}
        </a-button>
      </div>
@@ -57,80 +57,28 @@
      </div>
      <div class="comment-box-text" v-else>{{$t('docTool.comparison.noComment')}}</div>
    </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('docTool.comparison.replyToComments')" class="item-model" :prop="'replyContent'">
-                <a-textarea
-                  :placeholder="$t('pleaseEnter')+title"
-                  :disabled="false"
-                  :maxLength="500"
-                  v-model.trim="formInline.replyContent" :rows="4"/>
-              </a-form-model-item>
-              <a-form-model-item v-else-if="title === $t('docTool.comparison.publishComment')" class="item-model" :prop="'commentContent'">
-                <a-textarea
-                  :placeholder="$t('pleaseEnter')+title"
-                  :disabled="false"
-                  :maxLength="500"
-                  v-model.trim="formInline.commentContent" :rows="4"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
-        </a-row>
-      </a-form-model>
-    </a-modal>
+    <comparison-add-reply-comment ref="comparisonAddReplyComment"></comparison-add-reply-comment>
  </div>
 </template>

 <script>
-import { getAction, postAction } from '@/api/manage'
+import { getAction } from '@/api/manage'
+// 添加评论和回复评论弹框
+import ComparisonAddReplyComment from './ComparisonAddReplyComment'

 export default {
  name: 'CommentList',
+  components: { ComparisonAddReplyComment },
  data () {
    return {
      visible: false,
      dataList: [],
-      formInline: {},
      commentContent: '',
      loading: false,
-      title: this.$t('docTool.comparison.comment'),
-      confirmLoading: false,
-      visibleComment: false,
      url: {
        list: '/compare/sarFileCompareResComment/queryListByInfoId',
        add: '/compare/sarFileCompareResComment/add',
        edit: '/compare/sarFileCompareResComment/edit'
-      },
-      rules: {
-        commentContent: [
-          {
-            required: true,
-            message: this.$t('docTool.comparison.publishComment') + this.$t('cannotEmpty'),
-            trigger: 'blur'
-          }
-        ],
-        replyContent: [
-          {
-            required: true,
-            message: this.$t('docTool.comparison.replyToComments') + this.$t('cannotEmpty'),
-            trigger: 'blur'
-          }
-        ]
      }
    }
  },
@@ -144,12 +92,8 @@ export default {
      this.getList()
    },
    handleSubmit () {
-      this.title = this.$t('docTool.comparison.publishComment')
-      this.formInline = {}
-      this.visibleComment = true
-      this.$nextTick(() => {
-        this.$refs.ruleForm.clearValidate()
-      })
+      this.$refs.comparisonAddReplyComment.title = this.$t('docTool.comparison.publishComment')
+      this.$refs.comparisonAddReplyComment.open({})
    },
    allowClearChange () {
      this.getList()
@@ -172,54 +116,11 @@ export default {
        this.loading = false
      })
    },
-    handleOkComment () {
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          let url = ''
-          let query = {}
-          let Action
-          if (this.title === this.$t('docTool.comparison.publishComment')) {
-            url = this.url.add
-            Action = postAction
-            query = {
-              comment: this.formInline.commentContent,
-              infoId: this.$route.query.id
-            }
-          } else if (this.title === this.$t('docTool.comparison.replyToComments')) {
-            Action = postAction
-            url = this.url.add
-            query = {
-              comment: this.formInline.replyContent,
-              parentId: this.formInline.projectCommentId,
-              infoId: this.$route.query.id
-            }
-          }
-          this.confirmLoading = true
-          Action(url, query).then((res) => {
-            if (res.success) {
-              this.$message.success(this.$t('operationSuccessful'))
-              this.visibleComment = false
-              this.getList()
-            } else {
-              this.$message.warning(this.$t('operationFailed'))
-            }
-          }).finally(() => {
-            this.confirmLoading = false
-          })
-        }
-      })
-    },
-    handleCancelComment () {
-      this.visibleComment = false
-    },
    messageClick (row) {
-      this.formInline = {}
-      this.formInline.projectCommentId = row.id
-      this.title = this.$t('docTool.comparison.replyToComments')
-      this.visibleComment = true
-      this.$nextTick(() => {
-        this.$refs.ruleForm.clearValidate()
-      })
+      const obj = {}
+      obj.projectCommentId = row.id
+      this.$refs.comparisonAddReplyComment.title = this.$t('docTool.comparison.replyToComments')
+      this.$refs.comparisonAddReplyComment.open(obj)
    }
  }
 }
@@ -0,0 +1,77 @@
+<template>
+  <a-modal
+    :title="$t('docTool.comparison.fullTextComments')"
+    :width="600"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :maskClosable="false"
+    @cancel="visible = false"
+  >
+    <template slot="footer">
+      <a-button type="primary" :loading="confirmLoading" @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('docTool.comparison.fullTextComments')">
+          <span>{{$t('docTool.comparison.fullTextComments')}}</span>
+        </div>
+        <a-form-model-item class="item-model" style="width: calc(100% - 113px)" prop="comment">
+          <a-textarea :placeholder="$t('pleaseEnter')+' '+$t('docTool.comparison.fullTextComments')"
+                      v-model.trim="formInlineText.comment"
+                      :maxLength="500"
+                      :rows="4"/>
+        </a-form-model-item>
+      </div>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+import { putAction } from '@/api/manage'
+
+export default {
+  name: 'ComparisonAddFullComment',
+  data () {
+    return {
+      visible: false, // 全文评论弹框是否显示
+      confirmLoading: false,
+      formInlineText: {},
+      rulesText: {}
+    }
+  },
+  methods: {
+    open (comments) {
+      this.formInlineText.comment = comments
+    },
+    // 添加全文评论弹框的提交按钮
+    fullTextCommentsSubmit () {
+      this.$refs.ruleFormText.validate(valid => {
+        if (valid) {
+          const formInlineText = Object.assign({}, this.formInlineText)
+          this.confirmLoading = true
+          const query = {
+            id: this.$route.query.id,
+            comments: formInlineText.comment
+          }
+          putAction('/compare/sarFileCompareInfo/editComments', query).then((res) => {
+            if (res.success) {
+              this.$message.success(this.$t('operationSuccessful'))
+              this.visible = false
+            } else {
+              this.$message.warning(this.$t('operationFailed'))
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,122 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="500"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :maskClosable="false"
+    @ok="handleOkComment"
+    @cancel="handleCancelComment"
+  >
+    <a-form-model :model="formInline" :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('docTool.comparison.replyToComments')" class="item-model" :prop="'replyContent'">
+              <a-textarea
+                :placeholder="$t('pleaseEnter')+title"
+                :disabled="false"
+                :maxLength="500"
+                v-model.trim="formInline.replyContent"
+                :autoSize="{ minRows: 2, maxRows: 6 }" />
+            </a-form-model-item>
+            <a-form-model-item v-else-if="title === $t('docTool.comparison.publishComment')" class="item-model" :prop="'commentContent'">
+              <a-textarea
+                :placeholder="$t('pleaseEnter')+title"
+                :disabled="false"
+                :maxLength="500"
+                v-model.trim="formInline.commentContent"
+                :autoSize="{ minRows: 2, maxRows: 6 }"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+import { postAction } from '@/api/manage'
+
+export default {
+  name: 'ComparisonAddReplyComment',
+  data () {
+    return {
+      title: this.$t('docTool.comparison.comment'),
+      visible: false,
+      confirmLoading: false,
+      formInline: {},
+      rules: {
+        commentContent: [
+          {
+            required: true,
+            message: this.$t('docTool.comparison.publishComment') + this.$t('cannotEmpty'),
+            trigger: 'blur'
+          }
+        ],
+        replyContent: [
+          {
+            required: true,
+            message: this.$t('docTool.comparison.replyToComments') + this.$t('cannotEmpty'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    open (formInLine) {
+      this.visible = true
+      this.formInline = Object.assign({}, formInLine)
+    },
+    handleOkComment () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          let url = ''
+          let query = {}
+          let Action
+          if (this.title === this.$t('docTool.comparison.publishComment')) {
+            url = this.url.add
+            Action = postAction
+            query = {
+              comment: this.formInline.commentContent,
+              infoId: this.$route.query.id
+            }
+          } else if (this.title === this.$t('docTool.comparison.replyToComments')) {
+            Action = postAction
+            url = this.url.add
+            query = {
+              comment: this.formInline.replyContent,
+              parentId: this.formInline.projectCommentId,
+              infoId: this.$route.query.id
+            }
+          }
+          this.confirmLoading = true
+          Action(url, query).then((res) => {
+            if (res.success) {
+              this.$message.success(this.$t('operationSuccessful'))
+              this.visible = false
+              this.getList()
+            } else {
+              this.$message.warning(this.$t('operationFailed'))
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancelComment () {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import'~@assets/less/common.less';
+</style>
@@ -243,7 +243,7 @@ export default {
    ...mapGetters(['userInfo']),
    goBack () {
      this.$router.push({
-        path: '/documentComparison'
+        path: '/documentTool/documentComparison'
      })
    },
    // 评论按钮点击
@@ -113,51 +113,24 @@
        </div>
      </div>
    </div>
-    <a-modal
-      :title="$t('docTool.comparison.fullTextComments')"
-      :width="600"
-      :visible="visible"
-      :confirm-loading="textDataLoading"
-      :maskClosable="false"
-      @cancel="visible = false"
-    >
-      <template slot="footer">
-        <a-button type="primary" :loading="textDataLoading" @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('docTool.comparison.fullTextComments')">
-            <span>{{$t('docTool.comparison.fullTextComments')}}</span>
-          </div>
-          <a-form-model-item class="item-model" style="width: calc(100% - 113px)" prop="comment">
-            <a-textarea :placeholder="$t('pleaseEnter')+' '+$t('docTool.comparison.fullTextComments')"
-                        v-model.trim="formInlineText.comment"
-                        :maxLength="500"
-                        :rows="4"/>
-          </a-form-model-item>
-        </div>
-      </a-form-model>
-    </a-modal>
+    <comparison-add-full-comment ref="comparisonAddFullComment"></comparison-add-full-comment>
  </a-spin>
 </template>

 <script>
-import { postAction, putAction, getAction } from '@/api/manage'
+import { postAction, getAction } from '@/api/manage'
+// 添加全文评论弹框
+import ComparisonAddFullComment from './ComparisonAddFullComment'

 export default {
  name: 'DocumentDataComparison',
+  components: { ComparisonAddFullComment },
  data () {
    return {
      formInline: {},
-      formInlineText: {},
      loadingText: false,
      rules: {},
-      rulesText: {},
      loading: false,
-      textDataLoading: false,
-      visible: false, // 全文评论弹框是否显示
      resultData: {},
      isMatching: true, // 自动匹配是否开启
      dataLeft: {},
@@ -284,18 +257,13 @@ export default {
    },
    // 添加全文评论按钮点击
    addFullTextCommentClick () {
-      this.visible = true
      const query = {
        id: this.$route.query.id
      }
-      this.textDataLoading = true
      postAction('/compare/sarFileCompareInfo/getComparisonDetail', query).then((res) => {
        if (res.success) {
-          this.formInlineText.comment = res.result.comments || ''
-          this.formInlineText = { ...this.formInlineText }
+          this.$refs.comparisonAddFullComment.open(res.result.comments || '')
        }
-      }).finally(() => {
-        this.textDataLoading = false
      })
    },
    // 关闭自动匹配、开启自动匹配
@@ -303,45 +271,20 @@ export default {
      this.isMatching = !this.isMatching
      this.$message.success(this.$t('operationSuccessful'))
    },
-    // 添加全文评论弹框的提交按钮
-    fullTextCommentsSubmit () {
-      this.$refs.ruleFormText.validate(valid => {
-        if (valid) {
-          const formInlineText = JSON.parse(JSON.stringify(this.formInlineText))
-          this.textDataLoading = true
-          const query = {
-            id: this.$route.query.id,
-            comments: formInlineText.comment
-          }
-          putAction('/compare/sarFileCompareInfo/editComments', query).then((res) => {
-            if (res.success) {
-              this.$message.success(this.$t('operationSuccessful'))
-              this.visible = false
-            } else {
-              this.$message.warning(this.$t('operationFailed'))
-            }
-          }).finally(() => {
-            this.textDataLoading = false
-          })
-        }
-      })
-    },
    // 获取文件对比详情
    getData () {
      const query = {
        id: this.$route.query.id
      }
-      // this.loading = true
+      this.loading = true
      postAction('/compare/sarFileCompareInfo/getComparisonDetail', query).then((res) => {
        if (res.success) {
          this.resultData = res.result || {}
-          this.formInlineText.comment = res.result.comments || ''
-          this.formInlineText = { ...this.formInlineText }
        } else {
          this.resultData = {}
        }
      }).finally(() => {
-        // this.loading = false
+        this.loading = false
      })
    },
    // 点击左侧文档内容
@@ -514,7 +457,8 @@ export default {
 .detail-content {
  padding-top: 68px;
  background: #fff;
-  padding-bottom: 20px;
+  padding-bottom: 30px;
+  overflow-y: auto;
  &-cont {
    width: 100%;
    overflow: hidden;
@@ -34,15 +34,15 @@
      <a-button type="primary" @click="handleSubmit" :loading="loading">{{$t('submit')}}</a-button>
    </div>

-    <a-modal
-      :title="titleItem"
-      class="split-error"
-      :visible="preErrVisible"
-      @cancel="handleErrCancel"
-      :footer="false"
-    >
-      <div class="err-value" v-html="errValue"></div>
-    </a-modal>
+<!--    <a-modal-->
+<!--      :title="titleItem"-->
+<!--      class="split-error"-->
+<!--      :visible="preErrVisible"-->
+<!--      @cancel="handleErrCancel"-->
+<!--      :footer="false"-->
+<!--    >-->
+<!--      <div class="err-value" v-html="errValue"></div>-->
+<!--    </a-modal>-->
  </a-drawer>
 </template>

@@ -51,6 +51,7 @@ import { downloadFile, httpAction } from '@/api/manage'
 import Search from '@/components/customField/Search'
 import TableData from '@/components/customField/TableData'
 import SplitUpload from '@/components/splitUpload/SplitUpload'
+import { Modal } from 'ant-design-vue'

 export default {
  name: 'ImportResult',
@@ -73,9 +74,9 @@ export default {
      },
      operationList: [],
      accept: 'application/x-zip-compressed,application/zip',
-      preErrVisible: false,
-      errValue: '',
-      titleItem: '' // 错误标题
+      // preErrVisible: false,
+      // errValue: '',
+      // titleItem: '' // 错误标题
    }
  },
  methods: {
@@ -140,9 +141,14 @@ export default {
              if (res.data.code === 1) {
                this.$message.error(res.data.message)
              } else {
-                this.titleItem = '失败'
-                this.preErrVisible = true
-                this.errValue = res.data.message
+                Modal.info({
+                  title: '失败',
+                  content: res.data.message,
+                  class: 'err-modal' // 去掉一下footer的按钮
+                })
+                // this.titleItem = '失败'
+                // this.preErrVisible = true
+                // this.errValue = res.data.message
              }
            }
          }).finally(() => {
@@ -294,7 +294,7 @@ export default {
    ...mapGetters(['userInfo']),
    goBack () {
      this.$router.push({
-        path: '/documentComparison'
+        path: '/documentTool/documentComparison'
      })
    },
    searchQueryLeft () {