[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"
@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;
@@ -133,7 +133,7 @@
</div>
<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') }}
</a-button>
</div>
+2 -2
View File
@@ -35,7 +35,7 @@
<a-col :md="4" class="operator-col">
<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') }}
</a-button>
</div>
@@ -97,7 +97,7 @@
<p class="result-abolish">{{ StandardStatus.ABOLISH.text }}</p>
</div>
<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>
<template v-if="retrievalModeCurrent === '1'">
<!-- 全文检索 -->
@@ -100,10 +100,10 @@
</a-form-model-item>
<!--是否必填-->
<a-form-model-item :label="$t('system.tag.required')" prop="fieldMustInput">
<j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn"
:placeholder="$t('pleaseSelect') + $t('system.tag.required')" />
</a-form-model-item>
<!--<a-form-model-item :label="$t('system.tag.required')" prop="fieldMustInput">-->
<!-- <j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn"-->
<!-- :placeholder="$t('pleaseSelect') + $t('system.tag.required')" />-->
<!--</a-form-model-item>-->
<!--使用范围-->
<!--<a-form-model-item :label="$t('system.tag.usableRange')" prop="usableRange">-->
<!-- <j-multi-select-tag v-model="form.usableRange"-->
@@ -163,8 +163,8 @@
<script>
import JDictSelectTag from '../../../../components/dict/JDictSelectTag'
import { FieldType, StandardSource, TagsAttributeTypeEnums, TagsTypeEnums } from '../../../../enums/commonEnums'
import { addTag, ajaxGetDictItems, editTag, queryDictName } from '../../../../api/api'
import { FieldType, TagsAttributeTypeEnums, TagsTypeEnums } from '../../../../enums/commonEnums'
import { addTag, editTag, queryDictName } from '../../../../api/api'
export default {
name: 'ClauseSplittingDrawer',
@@ -113,12 +113,12 @@
</a-form-model-item>
</a-col>
<!--是否必填-->
<a-col :span="24">
<a-form-model-item :label="$t('system.tag.required')" prop="fieldMustInput">
<j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn"
:placeholder="$t('pleaseSelect') + $t('system.tag.required')" />
</a-form-model-item>
</a-col>
<!--<a-col :span="24">-->
<!-- <a-form-model-item :label="$t('system.tag.required')" prop="fieldMustInput">-->
<!-- <j-dict-select-tag type="list" v-model="form.fieldMustInput" dictCode="yn"-->
<!-- :placeholder="$t('pleaseSelect') + $t('system.tag.required')" />-->
<!-- </a-form-model-item>-->
<!--</a-col>-->
<template>
<!--对应标准模块展示-->