[update 标准拆分] 查看

This commit is contained in:
danshihao
2024-06-27 17:23:07 +08:00
parent 0d7923d55c
commit 9738921748
5 changed files with 75 additions and 45 deletions
+60 -30
View File
@@ -56,6 +56,25 @@
@dragging="onDragging" @dragging="onDragging"
@dragstop="(...args) => onDragstop('sheetContainerRef', ...args)"></vue-draggable-resizable> @dragstop="(...args) => onDragstop('sheetContainerRef', ...args)"></vue-draggable-resizable>
</div> </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="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> <div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
@@ -74,31 +93,31 @@
@dragstop="(...args) => onDragstop('clauseLabelRef', ...args)"></vue-draggable-resizable> @dragstop="(...args) => onDragstop('clauseLabelRef', ...args)"></vue-draggable-resizable>
</div> </div>
<!--条文条文标签切换--> <!--条文条文标签切换-->
<div class="clause-label-change part-ml part-common" ref="clauseLabelChangeRef" :class="{'no-expand-clause-label': !isClauseLabelExpand}"> <!--<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"> <!-- <div class="control-clause-label-expand" @click="expandClauseLabel">-->
<a-icon :type="isClauseLabelExpand ? 'right' : 'left'" /> <!-- <a-icon :type="isClauseLabelExpand ? 'right' : 'left'" />-->
</div> <!-- </div>-->
<!--条文--> <!-- &lt;!&ndash;条文&ndash;&gt;-->
<a-tooltip placement="left"> <!-- <a-tooltip placement="left">-->
<template #title>{{ $t('docTool.split.article') }}</template> <!-- <template #title>{{ $t('docTool.split.article') }}</template>-->
<div class="clause-label-change-item" <!-- <div class="clause-label-change-item"-->
:class="{'clause-label-change-item-selected': !showClauseLabel}" <!-- :class="{'clause-label-change-item-selected': !showClauseLabel}"-->
@click="handleClauseChange(false)"> <!-- @click="handleClauseChange(false)">-->
<i class="iconfont icon-ios-list-box" /> <!-- <i class="iconfont icon-ios-list-box" />-->
<span v-show="isClauseLabelExpand">{{ $t('docTool.split.article') }}</span> <!-- <span v-show="isClauseLabelExpand">{{ $t('docTool.split.article') }}</span>-->
</div> <!-- </div>-->
</a-tooltip> <!-- </a-tooltip>-->
<!--条文标签--> <!-- &lt;!&ndash;条文标签&ndash;&gt;-->
<a-tooltip placement="left"> <!-- <a-tooltip placement="left">-->
<template #title>{{ $t('docTool.split.clauseLabel') }}</template> <!-- <template #title>{{ $t('docTool.split.clauseLabel') }}</template>-->
<div class="clause-label-change-item" <!-- <div class="clause-label-change-item"-->
:class="{'clause-label-change-item-selected': showClauseLabel}" <!-- :class="{'clause-label-change-item-selected': showClauseLabel}"-->
@click="handleClauseChange(true)"> <!-- @click="handleClauseChange(true)">-->
<i class="iconfont icon-biaoqian-mianxing" /> <!-- <i class="iconfont icon-biaoqian-mianxing" />-->
<span v-show="isClauseLabelExpand">{{ $t('docTool.split.clauseLabel') }}</span> <!-- <span v-show="isClauseLabelExpand">{{ $t('docTool.split.clauseLabel') }}</span>-->
</div> <!-- </div>-->
</a-tooltip> <!-- </a-tooltip>-->
</div> <!--</div>-->
</div> </div>
</a-spin> </a-spin>
</template> </template>
@@ -136,6 +155,7 @@ export default {
loading: false, loading: false,
spiltInfo: {}, // 拆分的整体信息 spiltInfo: {}, // 拆分的整体信息
clauseContentList: [], // 条文内容的数据 clauseContentList: [], // 条文内容的数据
translationContentList: [], // 译文内容的数据
clauseLabelInfo: {}, // 条文标签数据 clauseLabelInfo: {}, // 条文标签数据
clauseLabelHideField: ['item_content'], 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], 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, // 是否拖拽中 isDragging: false, // 是否拖拽中
standardCatalogueRefX: 280, // 标准目录默认宽度 standardCatalogueRefX: 280, // 标准目录默认宽度
sheetContainerRefX: 0, // 标准内容默认宽度 sheetContainerRefX: 0, // 标准内容默认宽度
clauseLabelRefX: 400 // 条文标签默认宽度 clauseLabelRefX: 360, // 条文标签默认宽度
translationRefX: 280 // 译文部分默认宽度
} }
}, },
mounted () { 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 this.sheetContainerRefX = boxWidth - this.standardCatalogueRefX - this.clauseLabelRefX
}, },
methods: { methods: {
@@ -260,11 +281,11 @@ export default {
this.isContainerExpand = !this.isContainerExpand this.isContainerExpand = !this.isContainerExpand
if (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 this.isCatalogueExpand = false
} else { } 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 this.isCatalogueExpand = true
} }
}, },
@@ -385,10 +406,19 @@ export default {
transition: width .2s linear; transition: width .2s linear;
} }
.translation-text {
position: relative;
width: 280px;
height: 100%;
}
.translation-content {
height: calc(100% - 40px);
}
.clause-label { .clause-label {
position: relative; position: relative;
width: 400px; width: 400px;
height: 100%; height: 100%;
margin-right: 16px;
//overflow: hidden; //overflow: hidden;
transition: width .2s linear; transition: width .2s linear;
@@ -466,7 +496,7 @@ export default {
.part-title { .part-title {
height: 40px; height: 40px;
background: rgba(213, 44, 38, 0.12); background: rgba(0, 100, 250, 0.12);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
line-height: 40px; line-height: 40px;
padding: 0 24px; padding: 0 24px;
@@ -133,7 +133,7 @@
</div> </div>
<div class="table-operator"> <div class="table-operator">
<!--导出--> <!--导出-->
<a-button icon="upload" type="primary" ghost @click="handleExportXls($t('dashboard.advancedSearch.exportName'), '.xlsx')"> <a-button icon="upload" v-has="'dashboard:advancedSearch:export'" type="primary" ghost @click="handleExportXls($t('dashboard.advancedSearch.exportName'), '.xlsx')">
{{ $t('export') }} {{ $t('export') }}
</a-button> </a-button>
</div> </div>
+2 -2
View File
@@ -35,7 +35,7 @@
<a-col :md="4" class="operator-col"> <a-col :md="4" class="operator-col">
<div class="right-btns"> <div class="right-btns">
<!-- 导出 --> <!-- 导出 -->
<a-button icon="upload" type="primary" ghost @click="handleExportXls($t('dashboard.generalSearch.exportName'), '.xlsx')"> <a-button v-has="'dashboard:generalSearch:export'" icon="upload" type="primary" ghost @click="handleExportXls($t('dashboard.generalSearch.exportName'), '.xlsx')">
{{ $t('export') }} {{ $t('export') }}
</a-button> </a-button>
</div> </div>
@@ -97,7 +97,7 @@
<p class="result-abolish">{{ StandardStatus.ABOLISH.text }}</p> <p class="result-abolish">{{ StandardStatus.ABOLISH.text }}</p>
</div> </div>
<p class="result-date">{{ $t('dashboard.generalSearch.implementationDate') }} {{ item.implementationDate || global.emptyLine }}</p> <p class="result-date">{{ $t('dashboard.generalSearch.implementationDate') }} {{ item.implementationDate || global.emptyLine }}</p>
<a-button :disabled="judgeAbolish(item)" @click="filePreviewAll(item)" style="margin-left: 8px;" type="primary" ghost>{{ $t('dashboard.generalSearch.viewText') }}</a-button> <a-button v-has="'dashboard:generalSearch:viewText'" :disabled="judgeAbolish(item)" @click="filePreviewAll(item)" style="margin-left: 8px;" type="primary" ghost>{{ $t('dashboard.generalSearch.viewText') }}</a-button>
</div> </div>
<template v-if="retrievalModeCurrent === '1'"> <template v-if="retrievalModeCurrent === '1'">
<!-- 全文检索 --> <!-- 全文检索 -->
@@ -100,10 +100,10 @@
</a-form-model-item> </a-form-model-item>
<!--是否必填--> <!--是否必填-->
<a-form-model-item :label="$t('system.tag.required')" prop="fieldMustInput"> <!--<a-form-model-item :label="$t('system.tag.required')" prop="fieldMustInput">-->
<j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn" <!-- <j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn"-->
:placeholder="$t('pleaseSelect') + $t('system.tag.required')" /> <!-- :placeholder="$t('pleaseSelect') + $t('system.tag.required')" />-->
</a-form-model-item> <!--</a-form-model-item>-->
<!--使用范围--> <!--使用范围-->
<!--<a-form-model-item :label="$t('system.tag.usableRange')" prop="usableRange">--> <!--<a-form-model-item :label="$t('system.tag.usableRange')" prop="usableRange">-->
<!-- <j-multi-select-tag v-model="form.usableRange"--> <!-- <j-multi-select-tag v-model="form.usableRange"-->
@@ -163,8 +163,8 @@
<script> <script>
import JDictSelectTag from '../../../../components/dict/JDictSelectTag' import JDictSelectTag from '../../../../components/dict/JDictSelectTag'
import { FieldType, StandardSource, TagsAttributeTypeEnums, TagsTypeEnums } from '../../../../enums/commonEnums' import { FieldType, TagsAttributeTypeEnums, TagsTypeEnums } from '../../../../enums/commonEnums'
import { addTag, ajaxGetDictItems, editTag, queryDictName } from '../../../../api/api' import { addTag, editTag, queryDictName } from '../../../../api/api'
export default { export default {
name: 'ClauseSplittingDrawer', name: 'ClauseSplittingDrawer',
@@ -113,12 +113,12 @@
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<!--是否必填--> <!--是否必填-->
<a-col :span="24"> <!--<a-col :span="24">-->
<a-form-model-item :label="$t('system.tag.required')" prop="fieldMustInput"> <!-- <a-form-model-item :label="$t('system.tag.required')" prop="fieldMustInput">-->
<j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn" <!-- <j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn"-->
:placeholder="$t('pleaseSelect') + $t('system.tag.required')" /> <!-- :placeholder="$t('pleaseSelect') + $t('system.tag.required')" />-->
</a-form-model-item> <!-- </a-form-model-item>-->
</a-col> <!--</a-col>-->
<template> <template>
<!--对应标准模块展示--> <!--对应标准模块展示-->