ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 企标左侧体系树联调

Browse Source
This commit is contained in:
lideqin
2023-09-13 10:47:18 +08:00
parent 708e4146d6
commit aa3509b77a
2 changed files with 58 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/enterpriseStandardLibrary/standard/EnterpriseStandardList.vue
+53 -97
View File
@@ -3,81 +3,44 @@
<div class="page-left-box">
<!-- $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
<a-input-search v-model="treeInput" :placeholder="$t('pleaseEnterTreeSystem')"
@change="handleTreeChange" />
@search="handleTreeSearch" />
<!--:expanded-keys="expandedKeys"-->
<!--:auto-expand-parent="autoExpandParent"-->
<!--@expand="treeExpand"-->
<a-tree
v-if="treeData.length > 0"
:show-line="true"
:show-icon="true"
:tree-data="treeData"
:selectedKeys="currentTreeNode"
:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
@expand="treeExpand"
:default-expand-all="defaultExpandAll"
@select="treeSelect">
<a-icon type="folder" slot="folder" class="tree-icon" />
<template #customNoOperation="{title, key}">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
<template #custom="record">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.key)" @mouseleave="handleTreeMouseout(record.key)">
<a-tooltip>
<template #title>
{{ title }}
{{ record.title }}
</template>
<span v-if="title.indexOf(treeInput) > -1" class="tree-node-custom-title">
{{ title.substr(0, title.indexOf(treeInput)) }}
<span v-if="record.title.indexOf(treeInput) > -1" class="tree-node-custom-title">
{{ record.title.substr(0, record.title.indexOf(treeInput)) }}
<span style="color: #f50">{{ treeInput }}</span>
{{ title.substr(title.indexOf(treeInput) + treeInput.length) }}
{{ record.title.substr(record.title.indexOf(treeInput) + treeInput.length) }}
</span>
<span v-else class="tree-node-custom-title">{{ title }}</span>
<span v-else class="tree-node-custom-title">{{ record.title }}</span>
</a-tooltip>
</div>
</template>
<!-- 没有删除 -->
<template #customNoDelete="{title, key}">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
<a-tooltip>
<template #title>
{{ title }}
</template>
<span v-if="title.indexOf(treeInput) > -1" class="tree-node-custom-title">
{{ title.substr(0, title.indexOf(treeInput)) }}
<span style="color: #f50">{{ treeInput }}</span>
{{ title.substr(title.indexOf(treeInput) + treeInput.length) }}
</span>
<span v-else class="tree-node-custom-title">{{ title }}</span>
</a-tooltip>
<template v-if="key === mouseInNodeKey">
<template v-if="record.key === mouseInNodeKey">
<!-- 新增-->
<a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd"></a-button>
<a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd(record)"></a-button>
<!-- 编辑-->
<a-button class="tree-operate-node-btn" @click="handleTreeEdit">
<i class="iconfont icon-bianji" style="color: #D52C26"></i>
</a-button>
</template>
</div>
</template>
<template #custom="{title, key}">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
<a-tooltip>
<template #title>
{{ title }}
</template>
<span v-if="title.indexOf(treeInput) > -1" class="tree-node-custom-title">
{{ title.substr(0, title.indexOf(treeInput)) }}
<span style="color: #f50">{{ treeInput }}</span>
{{ title.substr(title.indexOf(treeInput) + treeInput.length) }}
</span>
<span v-else class="tree-node-custom-title">{{ title }}</span>
</a-tooltip>
<template v-if="key === mouseInNodeKey">
<!-- 新增-->
<a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd"></a-button>
<!-- 编辑-->
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(title)">
<a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
class="tree-operate-node-btn" @click="handleTreeEdit(record)">
<i class="iconfont icon-bianji" style="color: #D52C26"></i>
</a-button>
<!-- 删除-->
<a-button class="tree-operate-node-btn" @click="handleTreeDelete">
<a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
class="tree-operate-node-btn" @click="handleTreeDelete(record.id)">
<i class="iconfont icon-shanchu_" style="color: #D52C26"></i>
</a-button>
</template>
@@ -132,11 +95,11 @@
<a-menu slot="overlay">
<a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
<a @click="operationClick(operation,record)">
<!-- 编辑图标-->
<!-- 编辑图标 -->
<i class="iconfont icon-bianji operate-btn-icon" v-if="operation.text === $t('edit')" />
<!-- 分享图标-->
<!-- 分享图标 -->
<i class="iconfont icon-fangxingfenxiang operate-btn-icon" v-if="operation.text === $t('share')" />
<!-- 删除图标-->
<!-- 删除图标 -->
<i class="iconfont icon-shanchu_ operate-btn-icon" v-if="operation.text === $t('delete')" />
{{ operation.text }}
</a>
@@ -170,6 +133,7 @@
<script>
import '@assets/less/common.less'
import { StandardSystemTreeNodeType } from '@/enums/commonEnums'
import JTable from '@/components/jero/JTable'
// 搜索组件
import Search from '@/components/customField/Search'
@@ -199,12 +163,14 @@ export default {
mixins: [ConfigurableTableMixin],
data () {
return {
StandardSystemTreeNodeType,
flag: '3',
treeInput: '', // 左侧树搜索框内容
treeData: [], // 左侧树数据
treeDataList: [], // 左侧树的数组结构，用于搜索
expandedKeys: [],
autoExpandParent: true,
defaultExpandAll: false, // 左侧树默认展开所有
currentTreeNode: null, // 当前选中的树节点
mouseInNodeKey: null, // 鼠标悬浮的节点key值
operationList: [
@@ -255,13 +221,13 @@ export default {
getTreeList(params).then(res => {
if (res.success) {
this.treeData = this.dealTreeData(res.result)
// this.treeData = res.result
this.treeData[0].scopedSlots = { title: 'customNoDelete' }
this.treeData[1].scopedSlots = { title: 'customNoOperation' }
this.generateList(this.treeData)
} else {
this.treeData = []
}
}).finally(() => {
this.$nextTick(() => {
this.defaultExpandAll = true
})
})
},
// 处理左侧树数据结构
@@ -274,35 +240,25 @@ export default {
return item
})
},
// 获取左侧树的数组结构（非树结构）
generateList (data) {
for (let i = 0; i < data.length; i++) {
const node = data[i]
const key = node.key
this.treeDataList.push({ key, title: node.title, parentId: node.parentId, nodeCode: node.nodeCode })
if (node.children) {
this.generateList(node.children)
}
}
},
// 根据key获取左侧树节点对象
getNodeByKey (key) {
return this.treeDataList.find(item => item.key === key)
// 左侧树搜索
handleTreeSearch () {
this.treeData = []
this.initTreeData({ nodeName: this.treeInput })
},
// 左侧树搜索框改变
handleTreeChange (e) {
const value = e.target.value
const expandedKeys = this.treeDataList
.map(item => {
if (item.title.indexOf(value) > -1) {
return item.parentId
}
return null
})
.filter((item, i, self) => item && self.indexOf(item) === i)
this.expandedKeys = expandedKeys
this.autoExpandParent = true
},
// handleTreeChange (e) {
// const value = e.target.value
// const expandedKeys = this.treeDataList
// .map(item => {
// if (item.title.indexOf(value) > -1) {
// return item.parentId
// }
// return null
// })
// .filter((item, i, self) => item && self.indexOf(item) === i)
// this.expandedKeys = expandedKeys
// this.autoExpandParent = true
// },
// 左侧树点击展开
treeExpand (expandedKeys) {
this.expandedKeys = expandedKeys
@@ -315,20 +271,20 @@ export default {
this.loadData()
},
// 左侧树点击新增
handleTreeAdd () {
handleTreeAdd (record) {
this.$refs.treeNodeModal.title = this.$t('newlyAdded')
const nodeObj = this.getNodeByKey(this.mouseInNodeKey)
this.$refs.treeNodeModal.add(nodeObj)
this.$refs.treeNodeModal.add(record)
},
// 左侧树点击编辑
handleTreeEdit (name) {
handleTreeEdit (record) {
console.log(record)
this.$refs.treeNodeModal.title = this.$t('edit')
this.$refs.treeNodeModal.edit(this.mouseInNodeKey, name)
this.$refs.treeNodeModal.edit(record)
},
// 左侧树点击删除
handleTreeDelete () {
handleTreeDelete (id) {
const param = {}
param.id = this.mouseInNodeKey
param.id = id
this.$confirm({
title: this.$t('confirmDeletion'),
content: this.$t('confirmDeleteNodes'),
src/views/enterpriseStandardLibrary/standard/modules/TreeNodeModal.vue
+5 -4
View File
@@ -58,15 +58,16 @@ export default {
},
methods: {
add (nodeObj) {
console.log(nodeObj)
this.visible = true
this.form.resetFields()
this.model = Object.assign({}, nodeObj)
this.model.key = nodeObj.id
this.model.nodeCode = nodeObj.nodeCode
},
edit (nodeKey, nodeName) {
edit (record) {
this.visible = true
this.form.resetFields()
this.model.id = nodeKey
this.model.nodeName = nodeName
this.model = Object.assign({}, record)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'nodeName'))
})