左边树形菜单结构调整

zhanghua

2022-11-28 90871991488f00182721b764a98492b0ea08d65e

左边树形菜单结构调整

 src/views/operate/fivepack/threepack/index.vue

@@ -1,14 +1,22 @@
<template>
    <div class="userList">
  <el-container style="height: 100%">
    <el-aside heigth="100%" width="200px ">
      <myAside @selectedDepartment="selectedDepartment" />
    </el-aside>

    <el-container>
      <store-content :model="'three-pack'" />
    </div>
    </el-container>
  </el-container>
</template>
<script>
import myAside from "./components/aside";
import updateUser from "@/views/operate/fivepack/threepack/components/updateUser";
import storeContent from "@/views/operate/fivepack/threepack/components/content";
import { getStoreInfoList, deleteStoreInfo } from "@/api/operate/storeManagement";
import {
  getStoreInfoList,
  deleteStoreInfo,
} from "@/api/operate/storeManagement";

export default {
    components: { myAside, storeContent, updateUser },
@@ -21,7 +29,11 @@
          return {
            storeCode: null,
            storeStatus: null,
            options: [{ label: '全部', value: 0 }, { label: '经营', value: 1 }, { label: '倒闭', value: 2 }],
      options: [
        { label: "全部", value: 0 },
        { label: "经营", value: 1 },
        { label: "倒闭", value: 2 },
      ],
            tableData: [],
            dialogUpdate: false,
            currentPage: 1,
@@ -29,16 +41,16 @@
            pageSize: 10,
            userInfo: null,
            updateFlag: false,
            storeInfo: null
          }
      storeInfo: null,
    };
      },

    methods: {
      search(data) {
        let communityId, streetId;
        if (data) {
          communityId = data.parentId;
          streetId = data.id;
        communityId = data.id;
        streetId = data.parentId;
        }
        getStoreInfoList({ keyword: this.storeCode, communityId, streetId })
            .then(({ list, pageSize, totalPage }) => {
@@ -46,28 +58,30 @@
              this.pageSize = pageSize;
              this.totalNum = totalPage;
            })
            .catch(err => this.$message({ type: 'error', message: err }));
        .catch((err) => this.$message({ type: "error", message: err }));
      },

      handleReset() {
        this.storeCode = '';
      this.storeCode = "";
        this.storeStatus = null;
      this.currentPage = 1;
        this.search();
      },

      handleView(row, type) {
        this.dialogUpdate = true;
        this.storeInfo = row;
        this.updateFlag = type === 'update';
      this.updateFlag = type === "update";
      },

      handleDelete(id) {
        deleteStoreInfo(id)
            .then(() => {
              this.$message({ type: 'success', message });
          this.$message({ type: "success", message });
          this.currentPage = 1;
              this.search();
            })
            .catch(err => this.$message({ type: 'error', message: err }));
        .catch((err) => this.$message({ type: "error", message: err }));
      },

      handleClose() {
@@ -76,6 +90,7 @@

      closeDialog() {
        this.dialogUpdate = false;
      this.currentPage = 1;
        this.search();
      },

@@ -93,138 +108,42 @@
      },
      selectedDepartment(data) {
        if (!data.children) {
          this.search();
        this.searchData = data;
        this.search(data);
      } else {
        data.parentId = data.id;
        data.id = null;
        this.searchData = data;
        this.search(data);
        }
      }
    }
}
      this.currentPage = 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.userList {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7;
    display: flex;
    height: 100%;

    .right{
        flex: 1;
        height: 100%;
        padding-left: 20px;

      .headerContent {
        display: flex;
        line-height: 100px;
        justify-content: space-between;
        align-items: center;

        .find {
          display: flex;
        }

        .search-item {
          display: flex;
          padding: 10px;
        }

        .findBtn {
          line-height: 100px;
          margin-left: 15px;
          display: flex;
          align-items: center;

          .el-button {
            padding: 12px 25px;
          }
        }

        .addBtn {
          padding: 12px 30px;
          margin-left: 20%;
        }
      }

      main {
::v-deep .el-header {
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;

        .mainTitle {
  color: #000;
          line-height: 60px;
        }

        .el-link {
          color: #4b9bb7;
        }

        .leftPx {
          margin-left: 10px;
        }

        .pagination {
          margin-top: 50px;
          display: flex;
          line-height: 50px;
          justify-content: center;

          .el-pagination {
            &::v-deep li,
            &::v-deep .btn-prev,
            &::v-deep .btn-next {
              background-color: #071f39;
              color: #4b9bb7;
            }
          }
        }

        .el-table {
          color: #4b9bb7;
          font-size: 10px;

          &::v-deep .el-table__empty-block {
::v-deep .el-aside {
            background-color: #09152f;
            color: #4b9bb7;
          }

          .operation {
            display: flex;

            .el-button {
              border: none;
::v-deep .el-menu {
  background-color: #09152f;
            }

            span:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
    &::v-deep .el-dialog__header,
    &::v-deep .el-dialog__body {
        background-color: #06122c;
::v-deep .el-main,
::v-deep .el-footer {
  background-color: #09152f;
    }

    &::v-deep .el-dialog__header {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        line-height: 60px;
    }

    &::v-deep .el-dialog__title {
        color: #4b9bb7;
    }

    &::v-deep .el-dialog__close {
        width: 20px;
        height: 20px;
        // color: #fff;
    }

    &::v-deep .el-dialog__body {
        padding: 0;
    }
::v-deep .el-tree-node__label {
  line-height: 30px;
  font-size: 14px;
  // color: rgb(75, 155, 183);
}
</style>

 src/views/systemSetting/device/point/index.vue

@@ -171,7 +171,7 @@
::v-deep .el-tree-node__label {
  line-height: 30px;
  font-size: 14px;
  color: rgb(75, 155, 183);
  // color: rgb(75, 155, 183);
}
</style>
<script>
@@ -190,6 +190,7 @@
      pageSize: 10,
      videoData: [],
      value: "",
      searchData: null,
    };
  },
  methods: {
@@ -213,19 +214,21 @@
        .catch((err) => this.$message.error(err));
    },
    selectedDepartment(data) {
      this.currentPage = 1;
   
      if (!data.children) {
        this.searchData = data;
        this.getVideoPointList(data);
      } else {
        data.parentId = data.id;
        data.id = null;
        this.searchData = data;
        this.getVideoPointList(data);
      }
      this.currentPage = 1;
    },
    current_change(e) {
      this.currentPage = e;

      this.getVideoPointList();
      this.getVideoPointList(this.searchData);
    },
  },
};