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-22 15:12:37 +08:00
parent 89573aef30
commit 6ca2e31211
4 changed files with 75 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/system/internalWorkGroup/WorkingGroupList.vue
+21 -25
View File
@@ -15,43 +15,41 @@
:replaceFields="{children: 'subset', title: 'name', key: 'id'}"
:default-expand-all="defaultExpandAll"
@select="treeSelect">
<a-icon type="folder" slot="folder" class="tree-icon" />
<a-icon type="file" slot="file" class="tree-icon" />
<!-- 没有删除 -->
<template #customNoDelete="{name, id}">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(id)" @mouseleave="handleTreeMouseout(id)">
<template #customNoDelete="record">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
<a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
<a-tooltip>
<template #title>
{{ name }}
{{ record.name }}
</template>
<span class="tree-node-custom-title">{{ name }}</span>
<span class="tree-node-custom-title">{{ record.name }}</span>
</a-tooltip>
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': id !== mouseInNodeKey}">
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
<!-- 新增-->
<a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button>
<!-- 编辑-->
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(name)" v-has="'sys:innerWorkingGroup:tree:edit'">
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(record.name)" v-has="'sys:innerWorkingGroup:tree:edit'">
<i class="iconfont icon-bianji" style="color: #D52C26"></i>
</a-button>
</div>
</div>
</template>
<template #custom="{name, id}">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(id)" @mouseleave="handleTreeMouseout(id)">
<template #custom="record">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
<a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
<a-tooltip>
<template #title>
{{ name }}
{{ record.name }}
</template>
<span class="tree-node-custom-title">{{ name }}</span>
<span class="tree-node-custom-title">{{ record.name }}</span>
</a-tooltip>
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': id !== mouseInNodeKey}">
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
<!-- 新增-->
<a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button>
<!-- 编辑-->
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(name)" v-has="'sys:innerWorkingGroup:tree:edit'">
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(record.name)" v-has="'sys:innerWorkingGroup:tree:edit'">
<i class="iconfont icon-bianji" style="color: #D52C26"></i>
</a-button>
<!-- 删除-->
@@ -235,6 +233,7 @@ export default {
getWorkGroupTreeList(params).then(res => {
if (res.success) {
this.treeData = this.dealTreeData(res.result)
this.treeData[0].scopedSlots = { title: 'customNoDelete' }
} else {
this.treeData = []
}
@@ -249,12 +248,8 @@ export default {
dealTreeData (treeData) {
return treeData.map(item => {
if (item.subset && item.subset.length > 0) {
item.scopedSlots = { icon: 'folder', title: 'custom' }
item.scopedSlots = { title: 'custom' }
item.subset = this.dealTreeData(item.subset)
} else if (item.level === 1) {
item.scopedSlots = { icon: 'folder', title: 'customNoDelete' }
} else {
item.scopedSlots = { icon: 'file', title: 'custom' }
}
return item
})
@@ -393,12 +388,13 @@ export default {
</script>
<style scoped lang="less">
.tree-icon {
/deep/ .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
color: #1D2129;
}
/deep/ .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
display: none;
.parent-node-icon {
color: #1D2129;
font-size: 16px;
margin-right: 10px;
}
</style>