zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

封装树形组件

Browse Source
This commit is contained in:
ctw committed 2025-01-21 17:02:37 +08:00
1 parent 738d76247d
commit bb4d31b494
5 files changed
+249 -48
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/DepTree/index.vue
+196
View File
@@ -0,0 +1,196 @@
<template>
<div class="container">
<!-- 头部区域 -->
<div class="container-header">
<div class="container-header-input">
<el-input
v-model="searchName"
suffix-icon="search"
:placeholder="placeholder"
clearable
@change="getTreeData"
/>
</div>
<div class="container-header-dropdown" v-if="showExpand">
<el-dropdown :hide-on-click="false">
<el-icon style="transform: rotate(90deg)">
<MoreFilled />
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-button
class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
:icon="isExpand ? 'expand' : 'fold'"
@click="toggleRowExpansionAll(isExpand ? false : true)"
>
{{ isExpand ? "折叠" : "展开" }}
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<!-- 树形结构 -->
<div class="container-tree">
<el-tree
ref="depTreeRef"
:props="props.props"
:data="state.treeList"
:expand-on-click-node="false"
:loading="state.loading"
node-key="id"
highlight-current
default-expand-all
@node-click="handleNodeClick"
>
<template #default="{ node, data }" v-if="$slots.default">
<slot :node="node" :data="data" />
</template>
</el-tree>
</div>
<!-- 底部区域 -->
<div class="container-switch">
<el-switch
v-model="state.isDeep"
@change="handleTreeDeepSearch"
:inactive-text="switchInactiveText"
:active-text="switchActiveText"
/>
</div>
</div>
</template>
<script setup lang="ts" name="dep-tree">
import { useMessage } from "/@/hooks/message"
const props = withDefaults(
defineProps<{
placeholder?: string // 输入框占位符
loading?: boolean // 加载中的状态
showExpand?: boolean // 折叠控制
query?: (searchName?: string) => Promise<any> // 查询函数
props?: object
switchInactiveText?: string | undefined
switchActiveText?: string | undefined
}>(),
{
placeholder: "",
loading: false,
showExpand: true,
query: () => new Promise((resolve) => resolve([])),
props: () => {
return {
label: "name",
children: "children",
value: "id",
}
},
switchInactiveText: "当前级",
switchActiveText: "当前级及子级",
},
)
const emit = defineEmits(["nodeClick", "treeDeepSearch"])
const state = reactive({
treeList: [],
loading: props.loading,
isDeep: false,
})
const depTreeRef = ref()
const searchName = ref() // 查询关键字
const isExpand = ref(true) // 是否展开所有节点
// 获取部门树形结构数据
const getTreeData = () => {
if (props.query instanceof Function) {
state.loading = true
// 调用传入的查询函数，并将查询关键字作为参数传入
const result = props.query(unref(searchName))
// 如果查询结果为 Promise 类型，则进行后续处理
if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
result
.then((r: any) => {
state.treeList = r.data
})
.catch((err) => {
useMessage().error(err.msg)
})
.finally(() => (state.loading = false))
}
}
}
// 点击树形结构节点
const handleNodeClick = (item: any) => emit("nodeClick", item)
// 节点深度搜索
const handleTreeDeepSearch = () => emit("treeDeepSearch", state.isDeep)
// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
const toggleRowExpansionAll = (status: boolean) => {
isExpand.value = status
const nodes = depTreeRef.value.store._getAllNodes()
for (let i = 0; i < nodes.length; i++) {
nodes[i].expanded = status
}
}
onMounted(() => {
getTreeData()
})
defineExpose({
getTreeData,
})
</script>
<style lang="scss" scoped>
.container {
height: 100%;
display: flex;
flex-direction: column;
&-header {
display: flex;
align-items: center;
padding-bottom: 10px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
z-index: 10;
&-input {
width: 90%;
}
&-dropdown {
flex: 1;
margin-left: 5%;
line-height: 100%;
}
}
&-tree {
flex: 1;
overflow: hidden;
&:hover {
overflow: auto;
}
}
&-switch {
display: flex;
justify-content: center;
align-items: center;
padding-top: 10px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
z-index: 10;
}
}
</style>
src/components/QueryTree/index.vue
+38 -32
View File
@@ -2,7 +2,13 @@
<div class="head-container">
<div class="head-container-header">
<div class="head-container-header-input">
<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getdeptTree" />
<el-input
v-model="searchName"
suffix-icon="search"
:placeholder="placeholder"
clearable
@change="getdeptTree"
/>
</div>
<div class="head-container-header-dropdown" v-if="showExpand">
<el-dropdown :hide-on-click="false">
@@ -19,7 +25,7 @@
:icon="isExpand ? 'expand' : 'fold'"
@click="toggleRowExpansionAll(isExpand ? false : true)"
>
{{ isExpand ? '折叠' : '展开' }}
{{ isExpand ? "折叠" : "展开" }}
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
@@ -47,8 +53,8 @@
</template>
<script setup lang="ts" name="query-tree">
import { useMessage } from '/@/hooks/message';
const emit = defineEmits(['search', 'nodeClick']);
import { useMessage } from "/@/hooks/message"
const emit = defineEmits(["search", "nodeClick"])
const props = defineProps({
/**
@@ -60,10 +66,10 @@ const props = defineProps({
type: Object,
default: () => {
return {
label: 'name',
children: 'children',
value: 'id',
};
label: "name",
children: "children",
value: "id",
}
},
},
@@ -74,7 +80,7 @@ const props = defineProps({
*/
placeholder: {
type: String,
default: '',
default: "",
},
/**
@@ -102,20 +108,20 @@ const props = defineProps({
type: Boolean,
default: false,
},
});
})
const state = reactive({
List: [], // 树形结构列表数据
localLoading: props.loading, // 是否加载中
});
})
const deptTreeRef = ref(); // 部门树形结构组件实例引用
const searchName = ref(); // 查询关键字
const isExpand = ref(true); // 是否展开所有节点
const deptTreeRef = ref() // 部门树形结构组件实例引用
const searchName = ref() // 查询关键字
const isExpand = ref(true) // 是否展开所有节点
const buttonClass = computed(() => {
return ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary'];
});
return ["!h-[20px]", "reset-margin", "!text-gray-500", "dark:!text-white", "dark:hover:!text-primary"]
})
/**
* 点击树形结构节点触发的事件。
@@ -123,31 +129,31 @@ const buttonClass = computed(() => {
* @param item 被点击的节点数据。
*/
const handleNodeClick = (item: any) => {
emit('nodeClick', item);
};
emit("nodeClick", item)
}
/**
* 获取部门树形结构数据。
*/
const getdeptTree = () => {
if (props.query instanceof Function) {
state.localLoading = true;
state.localLoading = true
// 调用传入的查询函数，并将查询关键字作为参数传入
const result = props.query(unref(searchName));
const result = props.query(unref(searchName))
// 如果查询结果为 Promise 类型，则进行后续处理
if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
result
.then((r: any) => {
state.List = r.data;
state.List = r.data
})
.catch((err) => {
useMessage().error(err.msg);
});
useMessage().error(err.msg)
})
}
}
};
}
/**
* 切换所有节点的展开/收起状态。
@@ -155,21 +161,21 @@ const getdeptTree = () => {
* @param status 目标状态，true 为展开，false 为收起。
*/
const toggleRowExpansionAll = (status) => {
isExpand.value = status;
const nodes = deptTreeRef.value.store._getAllNodes();
isExpand.value = status
const nodes = deptTreeRef.value.store._getAllNodes()
for (let i = 0; i < nodes.length; i++) {
nodes[i].expanded = status;
nodes[i].expanded = status
}
};
}
onMounted(() => {
getdeptTree();
});
getdeptTree()
})
// 方便父组件调用刷新树方法
defineExpose({
getdeptTree,
});
})
</script>
<style lang="scss" scoped>
.head-container {
src/components/index.ts
+3
View File
@@ -12,6 +12,7 @@ import Tip from "/@/components/Tip/index.vue"
import TagList from "/@/components/TagList/index.vue"
import SvgIcon from "/@/components/SvgIcon/index.vue"
import PreviewImage from "/@/components/PreviewImage/index.vue"
import DepTree from "/@/components/DepTree/index.vue"
// 业务组件
import SelectUser from "/@/components/Select/SelectUser.vue"
@@ -56,6 +57,8 @@ export default {
app.component("TagList", TagList)
app.component("SvgIcon", SvgIcon)
app.component("PreviewImage", PreviewImage)
app.component("DepTree", DepTree)
app.component("SelectUser", SelectUser)
app.component("SelectWalletType", SelectWalletType)
app.component("SelectMch", SelectMch)
src/views/admin/system/user/face-manage.vue
+2 -2
View File
@@ -19,8 +19,8 @@
</el-table-column>
<el-table-column prop="address" align="center" label="操作">
<template #default="{ row }">
<el-button link type="primary" @click="editFace(row)"> <Icon icon="ep:edit" />修改 </el-button>
<el-button link type="danger" @click="delFace(row)"> 删除 </el-button>
<el-button link type="primary" @click="editFace(row)">修改</el-button>
<el-button link type="danger" @click="delFace(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
src/views/admin/system/user/index.vue
+10 -14
View File
@@ -1,15 +1,18 @@
<template>
<div class="layout-padding">
<splitpanes>
<pane size="15">
<pane size="30">
<div class="layout-padding-auto layout-padding-view">
<el-scrollbar>
<query-tree
<dep-tree
ref="queryTreeRef"
:placeholder="$t('common.queryDeptTip')"
:query="deptData.queryList"
:show-expand="true"
@node-click="handleNodeClick"
@treeDeepSearch="treeDeepSearch"
switch-inactive-text="当前部门"
switch-active-text="当前部门及子部门"
>
<!-- 没有数据权限提示 -->
<template #default="{ node, data }">
@@ -20,23 +23,15 @@
:content="$t('sysuser.noDataScopeTip')"
placement="right-start"
>
<span
>{{ node.label }}
<span>
{{ node.label }}
<SvgIcon name="ele-Lock" />
</span>
</el-tooltip>
<span v-if="!data.isLock">{{ node.label }}</span>
</template>
</query-tree>
</dep-tree>
</el-scrollbar>
<div class="flex justify-center items-center pt-2">
<el-switch
v-model="state.queryForm.isDeepDept"
@change="isDeepDeptChange"
inactive-text="当前部门"
active-text="当前部门及子部门"
/>
</div>
</div>
</pane>
<pane class="ml8">
@@ -269,7 +264,8 @@ const deptData = reactive({
},
})
const isDeepDeptChange = () => {
const treeDeepSearch = (isDeep: boolean) => {
state.queryForm.isDeepDept = isDeep
getDataList()
}