QR/laws_chery_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update 拆分] 拆分查看页调整

Browse Source
This commit is contained in:
danshihao
2024-07-01 16:24:10 +08:00
parent c368e20b4a
commit a126b41e82
3 changed files with 145 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StandardResolutionSheet.vue
+128 -106
View File
@@ -3,7 +3,7 @@
<!-- 搜索条件 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-row :gutter="24" style="margin: 0;">
<!--适用零部件-->
<a-col :md="4" :sm="12">
<a-form-item :label="$t('standardRegulationLibrary.applicableComponents')">
@@ -72,7 +72,7 @@
<!-- 拖拽中不能选中内容 -->
<div class="sheet-box" :class="{ disabledSelect: isDragging }" ref="sheetBoxRef">
<!--标准目录-->
<div class="standard-catalogue part-common" ref="standardCatalogueRef" :style="`width: ${standardCatalogueRefX}px`"
<div class="standard-catalogue part-common" ref="standardCatalogueRef"
:class="isCatalogueExpand ? 'expand-catalogue' : 'no-expand-catalogue'">
<div class="control-standard-catalogue-expand" @click="expandCatalogue">
<a-icon :type="isCatalogueExpand ? 'left' : 'right'" />
@@ -89,60 +89,63 @@
</template>
</a-tree>
</div>
<vue-draggable-resizable v-show="isCatalogueExpand" :draggable="true" :resizable="false" :w="6" axis="x" :x="standardCatalogueRefX" :z="2" class="draggable-border"
:onDrag="(...args) => onDragCallback(100, 500, ...args)" class-name-dragging="dragging"
@dragging="onDragging"
@dragstop="(...args) => onDragstop('standardCatalogueRef', ...args)"></vue-draggable-resizable>
<!--<vue-draggable-resizable v-show="isCatalogueExpand" :draggable="true" :resizable="false" :w="6" axis="x" :x="standardCatalogueRefX" :z="2" class="draggable-border"-->
<!-- :onDrag="(...args) => onDragCallback(100, 500, ...args)" class-name-dragging="dragging"-->
<!-- @dragging="onDragging"-->
<!-- @dragstop="(...args) => onDragstop('standardCatalogueRef', ...args)"></vue-draggable-resizable>-->
</div>
<!--标准内容-->
<div class="sheet-container part-ml" ref="sheetContainerRef" :style="`width: ${sheetContainerRefX}px;`">
<!--标准名称-->
<div class="standard-name">
<a-tooltip placement="topLeft">
<template #title>
{{ spiltInfo.serialNumber }}
</template>
<span> {{ spiltInfo.serialNumber }}《{{ spiltInfo.fileName }}》</span>
</a-tooltip>
<a-button type="link" :icon="isContainerExpand ? 'fullscreen-exit' : 'fullscreen'" @click="handleContainerExpand">
{{ isContainerExpand ? $t('putAway') : $t('open') }}
</a-button>
</div>
<!--条文内容-->
<div class="standard-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.item_content"></div>
<!--内容和译文-->
<div class="content-and-translation" :class="{'hide-translation': isContainerExpand}">
<!--标准内容-->
<div class="sheet-container part-ml" ref="sheetContainerRef">
<!--标准名称-->
<div class="standard-name">
<a-tooltip placement="topLeft">
<template #title>
{{ spiltInfo.serialNumber }}
</template>
<span> {{ spiltInfo.serialNumber }}《{{ spiltInfo.fileName }}》</span>
</a-tooltip>
<a-button type="link" :icon="isContainerExpand ? 'fullscreen-exit' : 'fullscreen'" @click="handleContainerExpand">
{{ isContainerExpand ? $t('putAway') : $t('open') }}
</a-button>
</div>
</div>
<vue-draggable-resizable :draggable="true" :resizable="false" :w="6" axis="x" :x="sheetContainerRefX" :z="2" class="draggable-border"
:onDrag="(...args) => onDragCallback(100, null, ...args)" class-name-dragging="dragging"
@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-if="Object.keys(clauseLabelInfo).length">
<div class="clause-content-item-title">{{ clauseLabelInfo.item_num }} {{ clauseLabelInfo.item_title }}</div>
<div class="clause-content-item-content"
v-html="clauseLabelInfo.translation"></div>
<!--条文内容-->
<div class="standard-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.item_content"></div>
</div>
</div>
<a-list v-else :data-source="[]"></a-list>
<!--<vue-draggable-resizable :draggable="true" :resizable="false" :w="6" axis="x" :x="sheetContainerRefX" :z="2" class="draggable-border"-->
<!-- :onDrag="(...args) => onDragCallback(100, null, ...args)" class-name-dragging="dragging"-->
<!-- @dragging="onDragging"-->
<!-- @dragstop="(...args) => onDragstop('sheetContainerRef', ...args)"></vue-draggable-resizable>-->
</div>
<!--译文-->
<div class="translation-text part-ml part-common" ref="translationRef" :class="{'hide-translation-text': isContainerExpand}">
<div class="part-title">{{ $t('standardRegulationLibrary.translation') }}</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.item_title }}</div>
<div class="clause-content-item-content"
v-html="clauseLabelInfo.translation"></div>
</div>
<a-list v-else :data-source="[]"></a-list>
</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>
<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" :class="{'hide-clause-label': !showClauseLabel || isContainerExpand}">
<div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
<div class="has-title-part-content">
<template v-for="clause in clauseField">
@@ -158,37 +161,37 @@
</div>
</template>
</div>
<vue-draggable-resizable :draggable="true" :resizable="false" :w="6" axis="x" :x="clauseLabelRefX" :z="2" class="draggable-border"
:onDrag="(...args) => onDragCallback(100, 500, ...args)" class-name-dragging="dragging"
@dragging="onDragging"
@dragstop="(...args) => onDragstop('clauseLabelRef', ...args)"></vue-draggable-resizable>
<!--<vue-draggable-resizable :draggable="true" :resizable="false" :w="6" axis="x" :x="clauseLabelRefX" :z="2" class="draggable-border"-->
<!-- :onDrag="(...args) => onDragCallback(100, 500, ...args)" class-name-dragging="dragging"-->
<!-- @dragging="onDragging"-->
<!-- @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>-->
<!-- &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 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>
<!--查看上传文件-->
<upload-file ref="uploadFile" :return-url="false" disabled />
</div>
@@ -242,14 +245,14 @@ export default {
standardCatalogueRefX: 280, // 标准目录默认宽度
sheetContainerRefX: 0, // 标准内容默认宽度
clauseLabelRefX: 360, // 条文标签默认宽度
translationRefX: 280 // 译文部分默认宽度
translationRefX: 0 // 译文部分默认宽度
}
},
mounted () {
this.getSysCategoryTree()
// 容器实际剩余宽度 = 右侧内容宽度 - 内容中的间距
const boxWidth = this.$refs.sheetBoxRef.getBoundingClientRect().width - this.$refs.translationRef.getBoundingClientRect().width - (16 * 4)
this.sheetContainerRefX = boxWidth - this.standardCatalogueRefX - this.clauseLabelRefX
// const boxWidth = this.$refs.sheetBoxRef.getBoundingClientRect().width - this.$refs.clauseLabelChangeRef.getBoundingClientRect().width - (16 * 4)
// this.sheetContainerRefX = boxWidth - this.standardCatalogueRefX - this.clauseLabelRefX
},
methods: {
// 查看文件
@@ -323,7 +326,7 @@ export default {
})
},
initDetailInfo (queryParams) {
this.loading = true
// this.loading = true
const params = Object.assign({}, this.queryParams, queryParams)
if (this.horizontalOverstep) {
params.horizontalOverstep = true
@@ -383,28 +386,29 @@ export default {
*/
handleContainerExpand () {
this.isContainerExpand = !this.isContainerExpand
if (this.isContainerExpand) {
// 展开主要内容前：主要内容宽 = 当前宽度 + 条文标签宽度（未隐藏时） + 标准目录宽度（未隐藏时）
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.translationRefX
this.isCatalogueExpand = true
}
this.isCatalogueExpand = !this.isContainerExpand
// if (this.isContainerExpand) {
// // 展开主要内容前：主要内容宽 = 当前宽度 + 条文标签宽度（未隐藏时） + 标准目录宽度（未隐藏时）
// 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.translationRefX
// this.isCatalogueExpand = true
// }
},
/**
* 条文标签切换
* @param flag
*/
handleClauseChange (flag) {
const beforeFlag = this.showClauseLabel
// const beforeFlag = this.showClauseLabel
this.showClauseLabel = flag
// 如果值改变了，就进行宽度调整
if (beforeFlag !== flag) {
// 主要内容宽 = 当前宽度 +(收起)|-(展开) 条文标签宽度
this.sheetContainerRefX = this.sheetContainerRefX + (this.clauseLabelRefX * (this.showClauseLabel ? -1 : 1))
}
// if (beforeFlag !== flag) {
// // 主要内容宽 = 当前宽度 +(收起)|-(展开) 条文标签宽度
// this.sheetContainerRefX = this.sheetContainerRefX + (this.clauseLabelRefX * (this.showClauseLabel ? -1 : 1))
// }
},
/**
* 展开或收起条文/条文标签面板
@@ -413,8 +417,8 @@ export default {
this.isClauseLabelExpand = !this.isClauseLabelExpand
// TODO 右侧切换条文和条文标签折叠宽度有改的话，需要修改这里的差值
// 根据展开或收起，给主要内容减少或增加宽度
const diff = Math.abs(130 - 45)
this.sheetContainerRefX = this.sheetContainerRefX + (diff * (this.isClauseLabelExpand ? -1 : 1))
// const diff = Math.abs(130 - 45)
// this.sheetContainerRefX = this.sheetContainerRefX + (diff * (this.isClauseLabelExpand ? -1 : 1))
},
/**
* 展开或收起标准目录
@@ -422,7 +426,7 @@ export default {
expandCatalogue () {
this.isCatalogueExpand = !this.isCatalogueExpand
// 主要内容宽 = 当前宽度 +(收起)|-(展开) 标准目录宽度
this.sheetContainerRefX = this.sheetContainerRefX + (this.standardCatalogueRefX * (this.isCatalogueExpand ? -1 : 1))
// this.sheetContainerRefX = this.sheetContainerRefX + (this.standardCatalogueRefX * (this.isCatalogueExpand ? -1 : 1))
}
}
}
@@ -440,8 +444,8 @@ export default {
// 禁止flex自动扩充或收缩，拖拽必须要绝对单位
& > div {
flex-grow: 0;
flex-shrink: 0;
//flex-grow: 0;
//flex-shrink: 0;
}
}
@@ -501,23 +505,41 @@ export default {
width: 0 !important;
}
// 内容和译文为了平分宽度
.content-and-translation {
display: flex;
flex: auto;
&.hide-translation .sheet-container {
width: 100%;
}
}
.sheet-container {
position: relative;
height: 100%;
width: 100%;
//flex: 1;
width: 50%;
//width: 0;
transition: width .2s linear;
}
.translation-text {
width: 50%;
transition: width .2s linear;
position: relative;
width: 280px;
//width: 280px;
height: 100%;
}
.translation-content {
height: calc(100% - 40px);
}
.hide-translation-text {
width: 0 !important;
overflow: hidden;
margin-left: 0;
}
.clause-label {
position: relative;
width: 400px;
@@ -589,7 +611,7 @@ export default {
}
&-item-selected {
background: #FAE6E5;
background: rgba(0, 100, 250, 0.12);
}
}
src/views/dashboard/search/AdvancedSearch.vue
+16 -10
View File
@@ -188,7 +188,13 @@
<div v-else class="table-text">{{ global.emptyLine }}</div>
</a-tooltip>
</template>
<!--条文内容-->
<template slot="item_content" slot-scope="{text, record}">
<div class="table-text" v-if="text || text === 0" @click="showContent('item_content', text,record)">
{{ text && text !== 'null' ? text.replace(/<.*?>/ig, ' ') : '' }}
</div>
<div class="table-text" v-else>{{ global.emptyLine }}</div>
</template>
</j-table>
</div>
</div>
@@ -348,7 +354,7 @@ export default {
align: 'center',
width: 180,
dataIndex: 'item_content',
scopedSlots: { customRender: 'text' }
scopedSlots: { customRender: 'item_content' }
},
{ // 适用零部件
title: this.$t('dashboard.advancedSearch.applicableComponents'),
@@ -389,56 +395,56 @@ export default {
title: this.$t('dashboard.advancedSearch.responsibleDepartment'),
align: 'center',
width: 180,
dataIndex: 'responsible_department',
dataIndex: 'responsible_department_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 责任部门专业模块
title: this.$t('dashboard.advancedSearch.responsibleDepartmentModule'),
align: 'center',
width: 180,
dataIndex: 'responsible_module',
dataIndex: 'responsible_module_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 关联部门
title: this.$t('dashboard.advancedSearch.relatedDepartments'),
align: 'center',
width: 180,
dataIndex: 'related_department',
dataIndex: 'related_department_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 关联部门专业模块
title: this.$t('dashboard.advancedSearch.relatedDepartmentModule'),
align: 'center',
width: 180,
dataIndex: 'related_module',
dataIndex: 'related_module_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 适用车型
title: this.$t('dashboard.advancedSearch.applications'),
align: 'center',
width: 180,
dataIndex: 'applications',
dataIndex: 'applications_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 动力类型
title: this.$t('dashboard.advancedSearch.powerType'),
align: 'center',
width: 180,
dataIndex: 'power_type',
dataIndex: 'power_type_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 专业领域
title: this.$t('dashboard.advancedSearch.professionalField'),
align: 'center',
width: 180,
dataIndex: 'domain_area',
dataIndex: 'domain_area_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 配置需求
title: this.$t('dashboard.advancedSearch.configurationRequirements'),
align: 'center',
width: 180,
dataIndex: 'configuration_requirements',
dataIndex: 'configuration_requirements_dictText',
scopedSlots: { customRender: 'text' }
}
],
src/views/documentTool/documentSplit/StandardSplitSheet.vue
+1 -1
View File
@@ -24,7 +24,7 @@ export default {
<style scoped lang="less">
.split-content {
height: 100vh;
padding: 20px;
padding: 20px 0 20px 20px;
background-color: #eff1f4;
}