[update uat 150] 解读表增加译文展开

src/components/StandardResolutionSheet.vue

@@ -107,10 +107,11 @@
         <!--                         @dragstop="(...args) => onDragstop('standardCatalogueRef', ...args)"></vue-draggable-resizable>-->
       </div>
       <!--内容和译文-->
-      <div class="content-and-translation" :class="{'hide-translation': isContainerExpand}">
+      <div class="content-and-translation" :class="{'hide-translation': isContainerExpand, 'hide-content': isTranslationExpand}">
         <!--标准内容-->
         <div class="sheet-container part-ml" ref="sheetContainerRef"
              @click="handleClickContent"
+             :class="{'hide-translation-text': isTranslationExpand}"
              :style="showClauseLabel === showClauseLabelEnums.hideTranslation ? 'width: 100%' : ''">
           <!--标准名称-->
           <div class="standard-name">
@@ -146,7 +147,12 @@
              class="translation-text part-ml part-common" ref="translationRef"
              @click="handleClickContent"
              :class="{'hide-translation-text': isContainerExpand}">
-          <div class="part-title">{{ $t('standardRegulationLibrary.translation') }}</div>
+          <div class="part-title flex-between">
+            <span>{{ $t('standardRegulationLibrary.translation') }}</span>
+            <a-button type="link" :icon="isTranslationExpand ? 'fullscreen-exit' : 'fullscreen'" @click="handleTranslationExpand">
+              {{ isTranslationExpand ? $t('putAway') : $t('open') }}
+            </a-button>
+          </div>
           <div class="standard-content translation-content">
             <div class="clause-content-item" v-if="Object.keys(clauseLabelInfo).length">
               <div class="clause-content-item-title">{{ clauseLabelInfo.item_num }} {{ clauseLabelInfo.title_translation }}</div>
@@ -163,7 +169,7 @@
       </div>
       <!--条文标签-->
       <div class="clause-label part-ml part-common" ref="clauseLabelRef"
-           :class="{'hide-clause-label': (showClauseLabel === showClauseLabelEnums.hideClauseLable) || isContainerExpand}">
+           :class="{'hide-clause-label': (showClauseLabel === showClauseLabelEnums.hideClauseLable) || isContainerExpand || isTranslationExpand}">
         <div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
         <div class="has-title-part-content">
           <template v-for="clause in clauseField">
@@ -209,8 +215,8 @@
             <span v-show="isClauseLabelExpand">{{ $t('docTool.split.clauseLabel') }}</span>
           </div>
         </a-tooltip>
-        <!--展示译文-->
-        <a-tooltip placement="left">
+        <!--隐藏译文(展开译文就不能展示该按钮)-->
+        <a-tooltip placement="left" v-if="!isTranslationExpand">
           <template #title>{{ $t('docTool.split.originalText') }}</template>
           <div class="clause-label-change-item"
                :class="{'clause-label-change-item-selected': showClauseLabel === showClauseLabelEnums.hideTranslation}"
@@ -284,6 +290,7 @@ export default {
       isClauseLabelExpand: true, // 条文/条文标签切换部分是否展开，控制是否只显示图标
       isCatalogueExpand: true, // 标准目录收起
       isContainerExpand: false, // 条文是否展开
+      isTranslationExpand: false, // 译文是否展开
       loading: false,
       spiltInfo: {}, // 拆分的整体信息
       clauseContentList: [], // 条文内容的数据
@@ -510,6 +517,13 @@ export default {
       //   this.isCatalogueExpand = true
       // }
     },
+    /**
+     * 译文展开
+     */
+    handleTranslationExpand () {
+      this.isTranslationExpand = !this.isTranslationExpand
+      this.isCatalogueExpand = !this.isTranslationExpand
+    },
     /**
      * 条文标签切换
      * @param flag - 1 隐藏条文标签 2 全部显示 3 隐藏译文
@@ -628,6 +642,9 @@ export default {
   &.hide-translation .sheet-container {
     width: 100%;
   }
+  &.hide-content .translation-text {
+    width: 100%;
+  }
 }
 
 .sheet-container {
@@ -649,7 +666,8 @@ export default {
   height: calc(100% - 40px);
 }
 
-.hide-translation-text {
+.hide-translation-text,
+.hide-content-text {
   width: 0 !important;
   overflow: hidden;
   margin-left: 0;
@@ -889,4 +907,9 @@ export default {
 .table-page-search-wrapper .ant-form-inline /deep/ .ant-form-item > .ant-form-item-label {
   min-width: auto;
 }
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>