[update 标准拆分] 查看

2024-06-27 17:23:07 +08:00
parent 0d7923d55c
commit 9738921748
5 changed files with 75 additions and 45 deletions
@@ -56,6 +56,25 @@
                                 @dragging="onDragging"
                                 @dragstop="(...args) => onDragstop('sheetContainerRef', ...args)"></vue-draggable-resizable>
      </div>
+      <!--译文-->
+      <div class="translation-text part-ml part-common" ref="translationRef" :style="`width: ${translationRefX}px`" :class="{'hide-clause-label': isContainerExpand}">
+        <div class="part-title">{{ $t('standardRegulationLibrary.translation') }}</div>
+        <div class="standard-content translation-content">
+          <div class="clause-content-item"
+               v-for="clause in clauseContentList"
+               :key="clause.id"
+               @click="handleClickClauseContentItem(clause)">
+            <div class="clause-content-item-title">{{ clause.item_num }} {{ clause.item_title }}</div>
+            <div class="clause-content-item-content"
+                 :class="{'clause-content-item-content-hight': clause.menu_id === hightMenuId}"
+                 v-html="clause.translation"></div>
+          </div>
+        </div>
+        <vue-draggable-resizable :draggable="true" :resizable="false" :w="6" axis="x" :x="translationRefX" :z="2" class="draggable-border"
+                                 :onDrag="(...args) => onDragCallback(100, 500, ...args)" class-name-dragging="dragging"
+                                 @dragging="onDragging"
+                                 @dragstop="(...args) => onDragstop('translationRef', ...args)"></vue-draggable-resizable>
+      </div>
      <!--条文标签-->
      <div class="clause-label part-ml part-common" ref="clauseLabelRef" :style="`width: ${clauseLabelRefX}px`" :class="{'hide-clause-label': !showClauseLabel || isContainerExpand}">
        <div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
@@ -74,31 +93,31 @@
                                 @dragstop="(...args) => onDragstop('clauseLabelRef', ...args)"></vue-draggable-resizable>
      </div>
      <!--条文、条文标签切换-->
-      <div class="clause-label-change part-ml part-common" ref="clauseLabelChangeRef" :class="{'no-expand-clause-label': !isClauseLabelExpand}">
-        <div class="control-clause-label-expand" @click="expandClauseLabel">
-          <a-icon :type="isClauseLabelExpand ? 'right' : 'left'" />
-        </div>
-        <!--条文-->
-        <a-tooltip placement="left">
-          <template #title>{{ $t('docTool.split.article') }}</template>
-          <div class="clause-label-change-item"
-               :class="{'clause-label-change-item-selected': !showClauseLabel}"
-               @click="handleClauseChange(false)">
-            <i class="iconfont icon-ios-list-box" />
-            <span v-show="isClauseLabelExpand">{{ $t('docTool.split.article') }}</span>
-          </div>
-        </a-tooltip>
-        <!--条文标签-->
-        <a-tooltip placement="left">
-          <template #title>{{ $t('docTool.split.clauseLabel') }}</template>
-          <div class="clause-label-change-item"
-               :class="{'clause-label-change-item-selected': showClauseLabel}"
-               @click="handleClauseChange(true)">
-            <i class="iconfont icon-biaoqian-mianxing" />
-            <span v-show="isClauseLabelExpand">{{ $t('docTool.split.clauseLabel') }}</span>
-          </div>
-        </a-tooltip>
-      </div>
+      <!--<div class="clause-label-change part-ml part-common" ref="clauseLabelChangeRef" :class="{'no-expand-clause-label': !isClauseLabelExpand}">-->
+      <!--  <div class="control-clause-label-expand" @click="expandClauseLabel">-->
+      <!--    <a-icon :type="isClauseLabelExpand ? 'right' : 'left'" />-->
+      <!--  </div>-->
+      <!--  &lt;!&ndash;条文&ndash;&gt;-->
+      <!--  <a-tooltip placement="left">-->
+      <!--    <template #title>{{ $t('docTool.split.article') }}</template>-->
+      <!--    <div class="clause-label-change-item"-->
+      <!--         :class="{'clause-label-change-item-selected': !showClauseLabel}"-->
+      <!--         @click="handleClauseChange(false)">-->
+      <!--      <i class="iconfont icon-ios-list-box" />-->
+      <!--      <span v-show="isClauseLabelExpand">{{ $t('docTool.split.article') }}</span>-->
+      <!--    </div>-->
+      <!--  </a-tooltip>-->
+      <!--  &lt;!&ndash;条文标签&ndash;&gt;-->
+      <!--  <a-tooltip placement="left">-->
+      <!--    <template #title>{{ $t('docTool.split.clauseLabel') }}</template>-->
+      <!--    <div class="clause-label-change-item"-->
+      <!--         :class="{'clause-label-change-item-selected': showClauseLabel}"-->
+      <!--         @click="handleClauseChange(true)">-->
+      <!--      <i class="iconfont icon-biaoqian-mianxing" />-->
+      <!--      <span v-show="isClauseLabelExpand">{{ $t('docTool.split.clauseLabel') }}</span>-->
+      <!--    </div>-->
+      <!--  </a-tooltip>-->
+      <!--</div>-->
    </div>
  </a-spin>
 </template>
@@ -136,6 +155,7 @@ export default {
      loading: false,
      spiltInfo: {}, // 拆分的整体信息
      clauseContentList: [], // 条文内容的数据
+      translationContentList: [], // 译文内容的数据
      clauseLabelInfo: {}, // 条文标签数据
      clauseLabelHideField: ['item_content'],
      needDictField: [FieldType.USER_SINGLE.value, FieldType.ORGAN_SINGLE.value, FieldType.STANDARD_MORE.value, FieldType.ORGAN_MORE.value, FieldType.OPTION_SINGLE.value, FieldType.OPTION_MORE.value, FieldType.TREE.value],
@@ -143,12 +163,13 @@ export default {
      isDragging: false, // 是否拖拽中
      standardCatalogueRefX: 280, // 标准目录默认宽度
      sheetContainerRefX: 0, // 标准内容默认宽度
-      clauseLabelRefX: 400 // 条文标签默认宽度
+      clauseLabelRefX: 360, // 条文标签默认宽度
+      translationRefX: 280 // 译文部分默认宽度
    }
  },
  mounted () {
    // 容器实际剩余宽度 = 右侧内容宽度 - 内容中的间距
-    const boxWidth = this.$refs.sheetBoxRef.getBoundingClientRect().width - this.$refs.clauseLabelChangeRef.getBoundingClientRect().width - (16 * 3)
+    const boxWidth = this.$refs.sheetBoxRef.getBoundingClientRect().width - this.$refs.translationRef.getBoundingClientRect().width - (16 * 4)
    this.sheetContainerRefX = boxWidth - this.standardCatalogueRefX - this.clauseLabelRefX
  },
  methods: {
@@ -260,11 +281,11 @@ export default {
      this.isContainerExpand = !this.isContainerExpand
      if (this.isContainerExpand) {
        // 展开主要内容前：主要内容宽 = 当前宽度 + 条文标签宽度（未隐藏时） + 标准目录宽度（未隐藏时）
-        this.sheetContainerRefX = this.sheetContainerRefX + (this.showClauseLabel ? this.clauseLabelRefX : 0) + (this.isCatalogueExpand ? this.standardCatalogueRefX : 0)
+        this.sheetContainerRefX = this.sheetContainerRefX + (this.showClauseLabel ? this.clauseLabelRefX : 0) + (this.isCatalogueExpand ? this.standardCatalogueRefX : 0) + this.translationRefX
        this.isCatalogueExpand = false
      } else {
        // 收起主要内容前：主要内容宽 = 当前宽度 - 条文标签宽度（隐藏时） - 标准目录宽度（隐藏时）
-        this.sheetContainerRefX = this.sheetContainerRefX - (this.showClauseLabel ? this.clauseLabelRefX : 0) - (!this.isCatalogueExpand ? this.standardCatalogueRefX : 0)
+        this.sheetContainerRefX = this.sheetContainerRefX - (this.showClauseLabel ? this.clauseLabelRefX : 0) - (!this.isCatalogueExpand ? this.standardCatalogueRefX : 0) - this.translationRefX
        this.isCatalogueExpand = true
      }
    },
@@ -385,10 +406,19 @@ export default {
  transition: width .2s linear;
 }

+.translation-text {
+  position: relative;
+  width: 280px;
+  height: 100%;
+}
+.translation-content {
+  height: calc(100% - 40px);
+}
 .clause-label {
  position: relative;
  width: 400px;
  height: 100%;
+  margin-right: 16px;
  //overflow: hidden;
  transition: width .2s linear;

@@ -466,7 +496,7 @@ export default {

 .part-title {
  height: 40px;
-  background: rgba(213, 44, 38, 0.12);
+  background: rgba(0, 100, 250, 0.12);
  border-radius: 8px 8px 0 0;
  line-height: 40px;
  padding: 0 24px;