[update] 修改UAT问题：外来标准和企标增加左侧树收起展开功能
This commit is contained in:
lideqin
@@ -1,55 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-card :bordered="false" class="page-left-right-layout">
|
<a-card :bordered="false" class="page-left-right-layout">
|
||||||
<div class="page-left-box">
|
<div class="page-left-box" :style="isLeftExpand ? {width: '0px', padding: '0px', borderRight: 'none'} : {}">
|
||||||
<a-input-search v-model="treeInput"
|
<template v-if="!isLeftExpand">
|
||||||
class="tree-search"
|
<a-input-search v-model="treeInput"
|
||||||
:placeholder="$t('pleaseEnterTreeSystem')"
|
class="tree-search"
|
||||||
@search="handleTreeSearch" />
|
:placeholder="$t('pleaseEnterTreeSystem')"
|
||||||
<div class="page-tree-box page-tree-box-has-search">
|
@search="handleTreeSearch" />
|
||||||
<a-spin :spinning="treeLoading">
|
<div class="page-tree-box page-tree-box-has-search">
|
||||||
<a-tree
|
<a-spin :spinning="treeLoading">
|
||||||
v-if="treeData.length > 0"
|
<a-tree
|
||||||
:show-line="true"
|
v-if="treeData.length > 0"
|
||||||
:show-icon="true"
|
:show-line="true"
|
||||||
:tree-data="treeData"
|
:show-icon="true"
|
||||||
:expanded-keys.sync="expandedKeys"
|
:tree-data="treeData"
|
||||||
:selectedKeys="currentTreeNode"
|
:expanded-keys.sync="expandedKeys"
|
||||||
:default-expand-all="defaultExpandAll"
|
:selectedKeys="currentTreeNode"
|
||||||
draggable
|
:default-expand-all="defaultExpandAll"
|
||||||
@drop="onDropCataSort">
|
draggable
|
||||||
<template #title="record">
|
@drop="onDropCataSort">
|
||||||
<div class="tree-operate-node"
|
<template #title="record">
|
||||||
@mouseenter="handleTreeMouseover(record.key)"
|
<div class="tree-operate-node"
|
||||||
@mouseleave="handleTreeMouseout(record.key)"
|
@mouseenter="handleTreeMouseover(record.key)"
|
||||||
@click="treeSelect(record)">
|
@mouseleave="handleTreeMouseout(record.key)"
|
||||||
<a-icon class="parent-node-icon" type="folder" v-if="record.dataRef.children && record.dataRef.children.length > 0" />
|
@click="treeSelect(record)">
|
||||||
<a-tooltip placement="topLeft">
|
<a-icon class="parent-node-icon" type="folder" v-if="record.dataRef.children && record.dataRef.children.length > 0" />
|
||||||
<template #title>
|
<a-tooltip placement="topLeft">
|
||||||
{{ record.title }}
|
<template #title>
|
||||||
</template>
|
{{ record.title }}
|
||||||
<span class="tree-node-custom-title">{{ record.title }}</span>
|
</template>
|
||||||
</a-tooltip>
|
<span class="tree-node-custom-title">{{ record.title }}</span>
|
||||||
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.key !== mouseInNodeKey || record.key === 'myCollect'}">
|
</a-tooltip>
|
||||||
<!-- 新增 -->
|
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.key !== mouseInNodeKey || record.key === 'myCollect'}">
|
||||||
<a-button icon="plus" class="tree-operate-node-btn" v-has="'enterpriseStandard:tree:add'"
|
<!-- 新增 -->
|
||||||
@click="handleTreeAdd(record)"></a-button>
|
<a-button icon="plus" class="tree-operate-node-btn" v-has="'enterpriseStandard:tree:add'"
|
||||||
<!-- 编辑 -->
|
@click="handleTreeAdd(record)"></a-button>
|
||||||
<a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
|
<!-- 编辑 -->
|
||||||
v-has="'enterpriseStandard:tree:edit'"
|
<a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
|
||||||
class="tree-operate-node-btn" @click="handleTreeEdit(record)">
|
v-has="'enterpriseStandard:tree:edit'"
|
||||||
<i class="iconfont icon-bianji"></i>
|
class="tree-operate-node-btn" @click="handleTreeEdit(record)">
|
||||||
</a-button>
|
<i class="iconfont icon-bianji"></i>
|
||||||
<!-- 删除 -->
|
</a-button>
|
||||||
<a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
|
<!-- 删除 -->
|
||||||
v-has="'enterpriseStandard:tree:delete'"
|
<a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
|
||||||
class="tree-operate-node-btn" @click="handleTreeDelete(record.id)">
|
v-has="'enterpriseStandard:tree:delete'"
|
||||||
<i class="iconfont icon-shanchu_"></i>
|
class="tree-operate-node-btn" @click="handleTreeDelete(record.id)">
|
||||||
</a-button>
|
<i class="iconfont icon-shanchu_"></i>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</a-tree>
|
||||||
</a-tree>
|
</a-spin>
|
||||||
</a-spin>
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="control-standard-left-expand" @click="expandLeft">
|
||||||
|
<a-icon :type="isLeftExpand ? 'right' : 'left'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-right-box">
|
<div class="page-right-box">
|
||||||
@@ -265,7 +270,8 @@ export default {
|
|||||||
defaultSearchParams: { // 默认查询条件
|
defaultSearchParams: { // 默认查询条件
|
||||||
standard_state: `${EnterpriseStandardStatus.CURRENTLY_EFFECTIVE.value}`
|
standard_state: `${EnterpriseStandardStatus.CURRENTLY_EFFECTIVE.value}`
|
||||||
},
|
},
|
||||||
disabledMixinsCreate: true
|
disabledMixinsCreate: true,
|
||||||
|
isLeftExpand: false // 是否左侧收齐
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -305,6 +311,10 @@ export default {
|
|||||||
this.initTreeData()
|
this.initTreeData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 左侧树收起展开
|
||||||
|
expandLeft () {
|
||||||
|
this.isLeftExpand = !this.isLeftExpand
|
||||||
|
},
|
||||||
// 获取左侧树数据
|
// 获取左侧树数据
|
||||||
initTreeData (params, isPackUpExpand = true) {
|
initTreeData (params, isPackUpExpand = true) {
|
||||||
this.treeLoading = true
|
this.treeLoading = true
|
||||||
@@ -845,4 +855,27 @@ export default {
|
|||||||
.icon-star {
|
.icon-star {
|
||||||
color: rgba(243, 129, 65, 0.50);
|
color: rgba(243, 129, 65, 0.50);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-left-box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.control-standard-left-expand {
|
||||||
|
width: 12px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 0 12px 12px 0;
|
||||||
|
background-color: @primary-color;
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
left: 100%;
|
||||||
|
top: calc(50% - 52px);
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -2px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,59 +1,64 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-card :bordered="false" class="page-left-right-layout">
|
<a-card :bordered="false" class="page-left-right-layout">
|
||||||
<!-- 树部分-->
|
<!-- 树部分-->
|
||||||
<div class="page-left-box">
|
<div class="page-left-box" :style="isLeftExpand ? {width: '0px', padding: '0px', borderRight: 'none'} : {}">
|
||||||
<a-input-search v-model="treeInput" class="tree-search"
|
<template v-if="!isLeftExpand">
|
||||||
:placeholder="$t('standardRegulationLibrary.foreignStandard.treeSearchPlaceholder')"
|
<a-input-search v-model="treeInput" class="tree-search"
|
||||||
@search="handleTreeSearch" />
|
:placeholder="$t('standardRegulationLibrary.foreignStandard.treeSearchPlaceholder')"
|
||||||
<div class="page-tree-box page-tree-box-has-search">
|
@search="handleTreeSearch" />
|
||||||
<a-spin :spinning="treeLoading">
|
<div class="page-tree-box page-tree-box-has-search">
|
||||||
<a-tree :show-line="true"
|
<a-spin :spinning="treeLoading">
|
||||||
:show-icon="true"
|
<a-tree :show-line="true"
|
||||||
:tree-data="treeData"
|
:show-icon="true"
|
||||||
:expanded-keys.sync="expandedKeys"
|
:tree-data="treeData"
|
||||||
:selected-keys="selectedTreeKeys"
|
:expanded-keys.sync="expandedKeys"
|
||||||
draggable
|
:selected-keys="selectedTreeKeys"
|
||||||
@drop="onDropCataSort">
|
draggable
|
||||||
<template #title="record">
|
@drop="onDropCataSort">
|
||||||
<div class="tree-operate-node"
|
<template #title="record">
|
||||||
@mouseenter="handleTreeMouseover(record.key)"
|
<div class="tree-operate-node"
|
||||||
@mouseleave="handleTreeMouseout(record.key)"
|
@mouseenter="handleTreeMouseover(record.key)"
|
||||||
@click="handleSelectTreeNode(record)">
|
@mouseleave="handleTreeMouseout(record.key)"
|
||||||
<a-icon class="parent-node-icon"
|
@click="handleSelectTreeNode(record)">
|
||||||
type="folder"
|
<a-icon class="parent-node-icon"
|
||||||
v-if="record.dataRef.children && record.dataRef.children.length > 0" />
|
type="folder"
|
||||||
<a-tooltip placement="topLeft">
|
v-if="record.dataRef.children && record.dataRef.children.length > 0" />
|
||||||
<template #title>
|
<a-tooltip placement="topLeft">
|
||||||
{{ record.title }}
|
<template #title>
|
||||||
</template>
|
{{ record.title }}
|
||||||
<span class="tree-node-custom-title">{{ record.title }}</span>
|
</template>
|
||||||
</a-tooltip>
|
<span class="tree-node-custom-title">{{ record.title }}</span>
|
||||||
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.key !== mouseInNodeKey}">
|
</a-tooltip>
|
||||||
<!-- 新增-->
|
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.key !== mouseInNodeKey}">
|
||||||
<a-button icon="plus"
|
<!-- 新增-->
|
||||||
class="tree-operate-node-btn"
|
<a-button icon="plus"
|
||||||
@click.stop="handleAddTreeNode(record)"
|
class="tree-operate-node-btn"
|
||||||
v-if="record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value"
|
@click.stop="handleAddTreeNode(record)"
|
||||||
v-has="'domesticStandard:tree:add'"></a-button>
|
v-if="record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value"
|
||||||
<!-- 编辑，根节点不能编辑-->
|
v-has="'domesticStandard:tree:add'"></a-button>
|
||||||
<a-button class="tree-operate-node-btn"
|
<!-- 编辑，根节点不能编辑-->
|
||||||
@click.stop="handleEditTreeNode(record)"
|
<a-button class="tree-operate-node-btn"
|
||||||
v-has="'domesticStandard:tree:edit'"
|
@click.stop="handleEditTreeNode(record)"
|
||||||
v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value && record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value">
|
v-has="'domesticStandard:tree:edit'"
|
||||||
<i class="iconfont icon-bianji" />
|
v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value && record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value">
|
||||||
</a-button>
|
<i class="iconfont icon-bianji" />
|
||||||
<!-- 删除，根节点不能删除-->
|
</a-button>
|
||||||
<a-button class="tree-operate-node-btn"
|
<!-- 删除，根节点不能删除-->
|
||||||
v-has="'domesticStandard:tree:delete'"
|
<a-button class="tree-operate-node-btn"
|
||||||
v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value && record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value"
|
v-has="'domesticStandard:tree:delete'"
|
||||||
@click.stop="handleDelTreeNode(record)">
|
v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value && record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value"
|
||||||
<i class="iconfont icon-shanchu_" />
|
@click.stop="handleDelTreeNode(record)">
|
||||||
</a-button>
|
<i class="iconfont icon-shanchu_" />
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</a-tree>
|
||||||
</a-tree>
|
</a-spin>
|
||||||
</a-spin>
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="control-standard-left-expand" @click="expandLeft">
|
||||||
|
<a-icon :type="isLeftExpand ? 'right' : 'left'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 表格部分-->
|
<!-- 表格部分-->
|
||||||
@@ -313,7 +318,8 @@ export default {
|
|||||||
treeLoading: false,
|
treeLoading: false,
|
||||||
isCollection: false,
|
isCollection: false,
|
||||||
expandedKeys: [], // 展开的节点
|
expandedKeys: [], // 展开的节点
|
||||||
needFilterTableBtn: true
|
needFilterTableBtn: true,
|
||||||
|
isLeftExpand: false // 是否左侧收齐
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -326,6 +332,10 @@ export default {
|
|||||||
this.initTreeData()
|
this.initTreeData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 左侧树收起展开
|
||||||
|
expandLeft () {
|
||||||
|
this.isLeftExpand = !this.isLeftExpand
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 获取树数据
|
* 获取树数据
|
||||||
*/
|
*/
|
||||||
@@ -828,4 +838,27 @@ export default {
|
|||||||
.icon-star {
|
.icon-star {
|
||||||
color: rgba(243, 129, 65, 0.50);
|
color: rgba(243, 129, 65, 0.50);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-left-box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.control-standard-left-expand {
|
||||||
|
width: 12px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 0 12px 12px 0;
|
||||||
|
background-color: @primary-color;
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
left: 100%;
|
||||||
|
top: calc(50% - 52px);
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -2px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user