From 1e07cfd8ac6c3e31e94c0ea98dcff61db51e49d1 Mon Sep 17 00:00:00 2001
From: wl <173@qq.com>
Date: 星期一, 09 一月 2023 16:54:39 +0800
Subject: [PATCH] fix: 单选框展示
---
src/views/operate/fivepack/threepack/components/aside/index.vue | 172 +++++++++++++++++++++++++++++---------------------------
1 files changed, 89 insertions(+), 83 deletions(-)
diff --git a/src/views/operate/fivepack/threepack/components/aside/index.vue b/src/views/operate/fivepack/threepack/components/aside/index.vue
index a408d45..16731a5 100644
--- a/src/views/operate/fivepack/threepack/components/aside/index.vue
+++ b/src/views/operate/fivepack/threepack/components/aside/index.vue
@@ -1,100 +1,106 @@
<template>
- <div class="aside">
- <div class="title">缁勭粐鏈烘瀯</div>
- <div class="input">
- <el-input placeholder="杈撳叆缁勭粐鏈烘瀯鍚嶇О"></el-input>
- </div>
- <div class="menu">
- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
- </div>
+ <div class="aside">
+ <div class="title">缁勭粐鏈烘瀯</div>
+ <div class="input">
+ <el-input
+ placeholder="杈撳叆缁勭粐鏈烘瀯鍚嶇О, 鎸変笅enter閿悳绱�"
+ v-model="searchArea"
+ @change="filterTreeNode"
+ ></el-input>
</div>
+ <div class="menu">
+ <el-tree
+ ref="department"
+ :filter-node-method="filterNode"
+ :data="areaData"
+ :props="defaultProps"
+ @node-click="nodeClick"
+ ></el-tree>
+ </div>
+ </div>
</template>
<script>
+import department from "@/api/system/department";
+
export default {
- data() {
- return {
- data: [{
- label: '涓�绾� 1',
- children: [{
- label: '浜岀骇 1-1',
- children: [{
- label: '涓夌骇 1-1-1'
- }]
- }]
- }, {
- label: '涓�绾� 2',
- children: [{
- label: '浜岀骇 2-1',
- children: [{
- label: '涓夌骇 2-1-1'
- }]
- }, {
- label: '浜岀骇 2-2',
- children: [{
- label: '涓夌骇 2-2-1'
- }]
- }]
- }, {
- label: '涓�绾� 3',
- children: [{
- label: '浜岀骇 3-1',
- children: [{
- label: '涓夌骇 3-1-1'
- }]
- }, {
- label: '浜岀骇 3-2',
- children: [{
- label: '涓夌骇 3-2-1'
- }]
- }]
- }],
- defaultProps: {
- children: 'children',
- label: 'label'
- }
- };
- },
- methods: {
- handleNodeClick(data) {
- console.log(data);
- }
+ name: "departmentAside",
+ data() {
+ return {
+ searchArea: null,
+ areaData: [],
+ defaultProps: {
+ children: "children",
+ label: "regionName",
+ },
+ };
+ },
+
+ created() {
+ if (sessionStorage.getItem("area")) {
+ this.areaData = JSON.parse(sessionStorage.getItem("area"));
+ } else {
+ department
+ .getDepartmentList()
+ .then((res) => {
+ this.areaData = res;
+ sessionStorage.setItem("area", JSON.stringify(this.areaData));
+ })
+ .catch((err) => this.$message.error(err));
}
+ },
+
+ methods: {
+ filterTreeNode() {
+ this.$refs.department.filter(this.searchArea);
+ },
+
+ filterNode(value, data) {
+ if (!value) return true;
+ return data.regionName.indexOf(value) !== -1;
+ },
+ nodeClick(data, node, props) {
+ if (node.level > 1) {
+ this.$emit("selectedDepartment", data);
+ }
+ },
+ },
};
</script>
<style lang="scss" scoped>
.aside {
- width: 200px;
- height: calc(100vh - 102px);
- background-color: #09152f;
- padding: 10px;
- display: flex;
- flex-direction: column;
- .title {
- line-height: 60px;
- }
+ width: 200px;
+ height: calc(103vh - 102px);
+ background-color: #ffffff;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ .title {
+ line-height: 60px;
+ color: #333;
+ }
- .input {
- line-height: 30px;
+ .input {
+ line-height: 30px;
- &::v-deep .el-input__inner {
- background-color: #09152f;
- border: 1px solid #17324c;
- }
+ &::v-deep .el-input__inner {
+ // background-color: #09152f;
+ border: 1px solid #17324c;
}
+ }
- .menu {
- margin-top: 20px;
- flex: 1;
- .el-tree{
- height: 100%;
- background-color: #09152f;
- &::v-deep .el-tree-node:focus>.el-tree-node__content{
- background-color: #092c4a;
- }
- &::v-deep .el-tree-node__content:hover{
- background-color: #092c4a;
- }
- }
+ .menu {
+ margin-top: 20px;
+ flex: 1;
+ .el-tree {
+ height: 100%;
+ // background-color: #09152f;
+ // &::v-deep .el-tree-node:focus>.el-tree-node__content{
+ // background-color: #092c4a;
+ // }
+ // &::v-deep .el-tree-node__content:hover{
+ // background-color: #092c4a;
+ // }
}
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0