From 58c0f11fe2f23a1be2dec768f9ac02107301a634 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 19 九月 2025 17:30:36 +0800
Subject: [PATCH] 2025.9.19 数据产品（待完成）
---
src/components/SideList.vue | 293 +++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 239 insertions(+), 54 deletions(-)
diff --git a/src/components/SideList.vue b/src/components/SideList.vue
index 4b440fe..a3a795c 100644
--- a/src/components/SideList.vue
+++ b/src/components/SideList.vue
@@ -1,36 +1,153 @@
<template>
- <el-tree
- class="el-tree"
- v-loading="isLoading"
- :data="dataList"
- :props="defaultProps"
- @node-click="handleNodeClick"
- default-expand-all
- highlight-current
- check-on-click-node
- empty-text="鏆傛棤璁板綍"
- >
- <template #default="{ node, data }">
- <div
- :class="
- data.selected
- ? 'selected-tree-node custom-tree-node'
- : 'custom-tree-node'
- "
- >
- <el-icon v-if="data.type == 2" color="var(--el-color-success)"
- ><SuccessFilled
- /></el-icon>
- <el-icon v-else-if="data.type == 1" color="var(--el-color-warning)"
- ><WarningFilled
- /></el-icon>
- <el-icon v-else-if="data.type == 0" color="var(--el-color-danger)"
- ><WarningFilled
- /></el-icon>
- <div>{{ node.label }}</div>
- </div>
- </template>
- </el-tree>
+ <div style="padding-right: 10px;">
+ <div v-if="legend" class="state-label">
+ <el-input
+ v-model="filterText"
+ icon="Search"
+ style="width: 180px"
+ placeholder="鍏抽敭瀛楃瓫閫�"
+ clearable
+ />
+ <el-tooltip placement="bottom-start" effect="dark">
+ <template #content>
+ <el-space>
+ <el-space
+ v-for="(item, index) in stateLabels"
+ :key="index"
+ :size="1"
+ >
+ <el-icon :color="item.color">
+ <component :is="item.icon"></component>
+ </el-icon>
+ {{ item.name }}
+ <!-- <el-text size="small">{{ item.name }}</el-text> -->
+ </el-space>
+ </el-space>
+ <br />
+ <el-space>
+ <el-space :size="1">
+ <el-icon :size="16" color="var(--el-color-success)">
+ <Avatar />
+ </el-icon>
+ 姝ｅ湪鎵ц宸℃煡
+ </el-space>
+ <el-space :size="1">
+ <el-icon :size="16" color="var(--el-color-info)">
+ <Avatar />
+ </el-icon>
+ 鏈墽琛�
+ </el-space>
+ </el-space>
+ </template>
+ <el-space>
+ <el-icon class="cursor-p" :size="16" color="var(--el-color-primary)"
+ ><QuestionFilled
+ /></el-icon>
+ <el-text size="small" class="cursor-p">瀹℃牳鐘舵�佸浘渚�</el-text>
+ </el-space>
+ </el-tooltip>
+ </div>
+ <el-tree
+ ref="treeRef"
+ class="el-tree"
+ v-loading="isLoading"
+ :data="dataList"
+ :props="defaultProps"
+ @node-click="handleNodeClick"
+ :filter-node-method="filterNode"
+ default-expand-all
+ highlight-current
+ check-on-click-node
+ empty-text="鏆傛棤璁板綍"
+ >
+ <template #default="{ node, data }">
+ <slot :node="node" :data="data">
+ <div
+ :class="
+ data.selected
+ ? 'selected-tree-node custom-tree-node'
+ : 'custom-tree-node'
+ "
+ >
+ <el-icon
+ v-if="data.status == '姝ｅ湪鎵ц'"
+ :size="16"
+ color="var(--el-color-success)"
+ style="margin-left: -16px"
+ >
+ <Avatar />
+ </el-icon>
+ <el-icon
+ v-if="data.status == '鏈墽琛�'"
+ :size="16"
+ color="var(--el-color-info)"
+ style="margin-left: -16px"
+ >
+ <Avatar />
+ </el-icon>
+ <!-- <el-icon :color="stateLabels[data.type].color">
+ <component :is="stateLabels[data.type].icon"></component>
+ </el-icon> -->
+ <el-icon
+ v-if="data.type == 0"
+ :size="16"
+ color="var(--el-color-info)"
+ >
+ <SuccessFilled />
+ </el-icon>
+ <el-icon
+ v-else-if="data.type == 1"
+ :size="16"
+ color="var(--el-color-danger)"
+ >
+ <QuestionFilled />
+ </el-icon>
+ <el-icon
+ v-else-if="data.type == 2"
+ :size="16"
+ color="var(--el-color-warning)"
+ >
+ <QuestionFilled />
+ </el-icon>
+ <el-icon
+ v-else-if="data.type == 3"
+ :size="16"
+ color="var(--el-color-danger)"
+ >
+ <WarnTriangleFilled />
+ </el-icon>
+ <el-icon
+ v-else-if="data.type == 4"
+ :size="16"
+ color="var(--el-color-danger)"
+ >
+ <WarningFilled />
+ </el-icon>
+ <el-icon
+ v-else-if="data.type == 5"
+ :size="16"
+ color="var(--el-color-warning)"
+ >
+ <WarningFilled />
+ </el-icon>
+ <el-icon
+ v-else-if="data.type == 6"
+ :size="16"
+ color="var(--el-color-success)"
+ >
+ <SuccessFilled />
+ </el-icon>
+ <!-- <el-text>{{ node.label }}</el-text> -->
+ {{ node.label }}
+ <span v-if="data.count">
+ {{ '_(' + data.count + ')' }}
+ <!-- <el-text size="small">鐐规</el-text>) -->
+ </span>
+ </div>
+ </slot>
+ </template>
+ </el-tree>
+ </div>
</template>
<script>
@@ -43,20 +160,63 @@
type: 0,
title: 'title',
categoly: '2022-10-10',
- data: {},
- },
- ],
+ data: {}
+ }
+ ]
},
loading: Boolean,
+ // 鏄惁灞曠ず鍥句緥
+ legend: {
+ type: Boolean,
+ default: false
+ }
},
emits: ['itemClick'],
data() {
return {
+ filterText: '',
defaultProps: {
children: 'children',
- label: 'title',
+ label: 'title'
},
isLoading: this.loading,
+ stateLabels: [
+ {
+ color: 'var(--el-color-info)',
+ name: '鏃犻棶棰�',
+ icon: 'SuccessFilled'
+ },
+ {
+ color: 'var(--el-color-danger)',
+ name: '闂鏈鏍�',
+ icon: 'QuestionFilled'
+ },
+ {
+ color: 'var(--el-color-warning)',
+ name: '闂閮ㄥ垎瀹℃牳',
+ icon: 'QuestionFilled'
+ },
+ {
+ color: 'var(--el-color-danger)',
+ name: '鏈暣鏀�',
+ icon: 'WarnTriangleFilled'
+ },
+ {
+ color: 'var(--el-color-danger)',
+ name: '鏁存敼鏈鏍�',
+ icon: 'WarningFilled'
+ },
+ {
+ color: 'var(--el-color-warning)',
+ name: '鏁存敼閮ㄥ垎瀹℃牳',
+ icon: 'WarningFilled'
+ },
+ {
+ color: 'var(--el-color-success)',
+ name: '瀹℃牳瀹屾垚',
+ icon: 'SuccessFilled'
+ }
+ ]
};
},
computed: {
@@ -75,7 +235,8 @@
for (const [key, value] of itemMap) {
const i = {
title: key,
- children: [],
+ count: value.length,
+ children: []
};
value.forEach((v) => {
i.children.push(v);
@@ -92,51 +253,64 @@
}
});
return list;
- },
+ }
},
watch: {
+ filterText(val) {
+ this.$refs.treeRef.filter(val);
+ },
loading(nValue) {
- this.isLoading = nValue
+ this.isLoading = nValue;
},
//褰撴暟鎹涓�娆℃洿鏂版椂
dataList(nValue) {
if (this.isLoading) {
if (nValue.length > 0) {
- this.dataList.forEach((d) => {
- d.children.forEach((c) => {
- c.selected = false;
- });
- });
+ // this.dataList.forEach((d) => {
+ // d.children.forEach((c) => {
+ // c.selected = false;
+ // });
+ // });
if (nValue[0].children.length > 0) {
const c = nValue[0].children[0];
- c.selected = true;
+ // c.selected = true;
this.$emit('itemClick', c);
} else {
- nValue[0].selected = true;
+ // nValue[0].selected = true;
}
}
this.isLoading = false;
}
- },
+ }
},
methods: {
handleNodeClick(data) {
- this.dataList.forEach((d) => {
- d.children.forEach((c) => {
- c.selected = false;
- });
- });
- data.selected = true;
+ // this.dataList.forEach((d) => {
+ // d.children.forEach((c) => {
+ // c.selected = false;
+ // });
+ // });
+ // data.selected = true;
//鐖惰妭鐐圭殑鐐瑰嚮浜嬩欢涓嶅仛浼犻��
if (data.children == undefined) {
this.$emit('itemClick', data);
}
},
- },
+
+ filterNode(value, data) {
+ if (!value) return true;
+ return data.title.includes(value);
+ }
+ }
};
</script>
<style lang="scss" scoped>
+.el-tree {
+ // background-color: aliceblue;
+ // width: var(--el-aside-width, 200px)
+}
+
.custom-tree-node {
display: flex;
align-items: center;
@@ -144,4 +318,15 @@
.selected-tree-node {
color: var(--el-color-primary);
}
+
+.state-label {
+ position: sticky;
+ z-index: 1;
+ top: 0;
+ background-color: white;
+ // box-shadow: var(--el-box-shadow-light);
+ border-bottom: var(--el-border);
+ display: flex;
+ padding-bottom: 4px;
+}
</style>
--
Gitblit v1.9.3