luobisheng
2022-11-28 fa5fd9d4f9c1ba33f26a343942a7941003cc601c
src/views/operate/fivepack/threepack/index.vue
@@ -1,230 +1,149 @@
<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 },
  components: { myAside, storeContent, updateUser },
    created() {
  created() {
    this.search();
  },
  data() {
    return {
      storeCode: null,
      storeStatus: null,
      options: [
        { label: "全部", value: 0 },
        { label: "经营", value: 1 },
        { label: "倒闭", value: 2 },
      ],
      tableData: [],
      dialogUpdate: false,
      currentPage: 1,
      totalNum: 0,
      pageSize: 10,
      userInfo: null,
      updateFlag: false,
      storeInfo: null,
    };
  },
  methods: {
    search(data) {
      let communityId, streetId;
      if (data) {
        communityId = data.id;
        streetId = data.parentId;
      }
      getStoreInfoList({ keyword: this.storeCode, communityId, streetId })
        .then(({ list, pageSize, totalPage }) => {
          this.tableData = list;
          this.pageSize = pageSize;
          this.totalNum = totalPage;
        })
        .catch((err) => this.$message({ type: "error", message: err }));
    },
    handleReset() {
      this.storeCode = "";
      this.storeStatus = null;
      this.currentPage = 1;
      this.search();
    },
    data() {
          return {
            storeCode: null,
            storeStatus: null,
            options: [{ label: '全部', value: 0 }, { label: '经营', value: 1 }, { label: '倒闭', value: 2 }],
            tableData: [],
            dialogUpdate: false,
            currentPage: 1,
            totalNum: 0,
            pageSize: 10,
            userInfo: null,
            updateFlag: false,
            storeInfo: null
          }
      },
    handleView(row, type) {
      this.dialogUpdate = true;
      this.storeInfo = row;
      this.updateFlag = type === "update";
    },
    methods: {
      search(data) {
        let communityId, streetId;
        if (data) {
          communityId = data.parentId;
          streetId = data.id;
        }
        getStoreInfoList({ keyword: this.storeCode, communityId, streetId })
            .then(({ list, pageSize, totalPage }) => {
              this.tableData = list;
              this.pageSize = pageSize;
              this.totalNum = totalPage;
            })
            .catch(err => this.$message({ type: 'error', message: err }));
      },
      handleReset() {
        this.storeCode = '';
        this.storeStatus = null;
        this.search();
      },
      handleView(row, type) {
        this.dialogUpdate = true;
        this.storeInfo = row;
        this.updateFlag = type === 'update';
      },
      handleDelete(id) {
        deleteStoreInfo(id)
            .then(() => {
              this.$message({ type: 'success', message });
              this.search();
            })
            .catch(err => this.$message({ type: 'error', message: err }));
      },
      handleClose() {
        this.dialogUpdate = false;
      },
      closeDialog() {
        this.dialogUpdate = false;
        this.search();
      },
      changeCurrentPage(currentPage) {
        this.currentPage = currentPage;
        this.search();
      },
      tableRowClassName({ row, rowIndex }) {
        if ((rowIndex + 1) % 2 === 0) {
          return "warning-row";
        } else {
          return "success-row";
        }
      },
      selectedDepartment(data) {
        if (!data.children) {
    handleDelete(id) {
      deleteStoreInfo(id)
        .then(() => {
          this.$message({ type: "success", message });
          this.currentPage = 1;
          this.search();
        }
        })
        .catch((err) => this.$message({ type: "error", message: err }));
    },
    handleClose() {
      this.dialogUpdate = false;
    },
    closeDialog() {
      this.dialogUpdate = false;
      this.currentPage = 1;
      this.search();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.search();
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    }
}
    },
    selectedDepartment(data) {
      if (!data.children) {
        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%;
::v-deep .el-header {
  background-color: #09152f;
  color: #000;
  line-height: 60px;
}
    .right{
        flex: 1;
        height: 100%;
        padding-left: 20px;
::v-deep .el-aside {
  background-color: #09152f;
}
      .headerContent {
        display: flex;
        line-height: 100px;
        justify-content: space-between;
        align-items: center;
::v-deep .el-menu {
  background-color: #09152f;
}
        .find {
          display: flex;
        }
::v-deep .el-main,
::v-deep .el-footer {
  background-color: #09152f;
}
        .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 {
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;
        .mainTitle {
          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 {
            background-color: #09152f;
            color: #4b9bb7;
          }
          .operation {
            display: flex;
            .el-button {
              border: none;
            }
            span:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
    &::v-deep .el-dialog__header,
    &::v-deep .el-dialog__body {
        background-color: #06122c;
    }
    &::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>