添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 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>
</style>