From 55bd7fb6365909a0cbcf0957333c7876bd791bb9 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 21 十一月 2024 16:35:12 +0800
Subject: [PATCH] 问题整改界面 1. 优化各项状态展示效果 2. 新增左侧关键字筛选功能
---
src/components/SideList.vue | 227 ++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 202 insertions(+), 25 deletions(-)
diff --git a/src/components/SideList.vue b/src/components/SideList.vue
index fc8c61f..dc3f4ff 100644
--- a/src/components/SideList.vue
+++ b/src/components/SideList.vue
@@ -1,10 +1,55 @@
<template>
+ <div class="state-label">
+ <el-input
+ v-model="filterText"
+ icon="Search"
+ style="width: 200px"
+ placeholder="鍏抽敭瀛楃瓫閫�"
+ clearable
+ />
+ <el-tooltip v-if="legend" 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
@@ -19,16 +64,80 @@
: '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>
+ <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>
@@ -49,16 +158,59 @@
}
]
},
- loading: Boolean
+ loading: Boolean,
+ // 鏄惁灞曠ず鍥句緥
+ legend: {
+ type: Boolean,
+ default: false
+ }
},
emits: ['itemClick'],
data() {
return {
+ filterText: '',
defaultProps: {
children: 'children',
label: 'title'
},
- isLoading: this.loading
+ 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: {
@@ -77,6 +229,7 @@
for (const [key, value] of itemMap) {
const i = {
title: key,
+ count: value.length,
children: []
};
value.forEach((v) => {
@@ -97,6 +250,9 @@
}
},
watch: {
+ filterText(val) {
+ this.$refs.treeRef.filter(val);
+ },
loading(nValue) {
this.isLoading = nValue;
},
@@ -104,17 +260,17 @@
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;
@@ -123,22 +279,32 @@
},
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;
@@ -146,4 +312,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