epmet-work-pc/src/views/modules/visual/basicinfo/peopleList.vue

<template>
  <div class="m-listbox-main">
    <!-- 组织路由 -->
    <div class="div_top g-bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="item in breadList"
                            :key="item.path"
                            :to="{ path: item.path }">
          {{ item.meta.title }}
        </el-breadcrumb-item>

      </el-breadcrumb>
    </div>

    <div>

      <div class="g-listbox">

        <cpt-tb :titleName="'居民列表'"
                :col-list="demand.colList"
                :loading="demand.loading"
                :header="demand.header"
                :list="demand.list"
                :total="total"
                @handleSizeChange="handleSizeChange"
                @handlePageNoChange="handlePageNoChange"
                @operate="toEventInfo"></cpt-tb>

      </div>

    </div>

    <people-more v-show="showedMoreInfo"
                 v-if="info.userId"
                 :userId="info.userId"
                 :gridName="info.gridName"
                 @close="showedMoreInfo = false" />
  </div>

</template>

<script>
import { requestPost } from "@/js/dai/request";
import People from "./people";
import ScreenLoading from "@/views/modules/visual/cpts/loading";
import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
import cptTb from "@/views/modules/visual/cpts/tb";

export default {
  name: "people-list",
  components: {
    People, ScreenLoading, peopleMore, cptTb
  },
  data () {
    return {
      showedMoreInfo: false,
      tableTitle: '党员',
      searchName: '',

      orgLevel: 'search',
      orgId: '',
      pageSize: 10,
      pageNo: 1,
      total: 0,

      //下钻层级记录
      info: {},
      breadList: [],

      demand: {
        loading: true,
        colList: [
          {
            align: "left",
            width: "5%",
          },
          {
            align: "left",
            width: "10%",
          },
          {
            align: "left",
            width: "20%",
          },
          {
            align: "left",
            width: "10%",
          },
          {
            align: "left",
            width: "8%",
          },
          {
            align: "left",
            width: "10%",
          },
          {
            align: "left",
            width: "7%",
          },
          {
            align: "left",
            width: "20%",
          },
          {
            align: "left",
            width: "10%",
          },
        ],
        header: [
          "序号",
          "姓名",
          "所属网格",
          "所属房屋",
          "手机",
          "身份证",
          "性别",
          "出生日期",
          "操作",
        ],
        list: [],

      },
    };
  },
  activated () {
    this.searchName = ''

    const { columnName, label, id, level } = this.$route.query
    this.orgLevel = level
    this.orgId = id
    this.searchName = columnName
    this.tableTitle = label
    this.loadList(id, level)

  },
  deactivated () {
    this.orgLevel = ''
    this.orgId = ''
    this.pageNo = 1
  },
  beforeRouteEnter (to, from, next) {
    const arr = [{ ...from }, { ...to, meta: { title: '人员列表' } }]
    next((vm) => {
      vm.breadList = [...arr]
    })
  },
  methods: {
    handleSearch () {

    },
    toEventInfo () {

    },

    handlePageNoChange (pageNo) {
      this.pageNo = pageNo
      this.loadList(this.orgId, this.orgLevel)

    },
    handleSizeChange (pageSize) {

      this.pageSize = pageSize
      this.loadList(this.orgId, this.orgLevel)

    },


    async loadList (id, level) {
      this.demand.loading = true;

      const url = "/epmetuser/icresiuser/searchbycategory"
      let params = {
        columnName: this.searchName,
        id,
        level,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }

      const { data, code, msg } = await requestPost(url, params)
      this.demand.loading = false;

      if (code === 0) {


        this.demand.total = data.total;

        this.demand.list = data.list.map((item, index) => {
          return [
            index + 1,
            item.name ? item.name : "--",
            item.gridName ? item.gridName : "--",
            item.neighborHoodName + item.buildNum ? item.neighborHoodName + item.buildNum : "--",
            item.mobile ? item.mobile : "--",
            item.idCard ? item.idCard : "--",
            item.gender ? item.gender : "--",
            item.birthday ? item.birthday : "--",

            { type: "operate", list: ["查看"] },
          ];
        });
      } else {
        this.$message.error(msg)
      }
    },

    //点击查看
    handelToPeople (item) {

      this.info = { ...item }
      this.showedMoreInfo = true
    },

    pageCurrentChangeHandle (val) {
      this.pageNo = val
      this.loadList(this.orgId, this.orgLevel)
    },


  },
  destroyed () {
    console.log("我已经离开了！");

  },

};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/basicInfoMain.scss"
  scoped
></style>

<style
  lang="scss"
  src="@/assets/scss/modules/board/listBox.scss"
  scoped
></style>



<style lang="scss" scoped>
.div_search_list {
  .el-input__inner[WarningColor="warning"] {
    border-radius: 8px 0 0 8px;
    height: 53px;
    background-color: #01106800;
    border: 2px solid #0082fb;
    padding-left: 70px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
.list_box {
  width: 100%;
  height: 780px;
  margin: 0 auto;
}

.pagination {
  padding-right: 0;
  margin-top: 0;
  text-align: right;
}
.g-bread {
  padding: 10px 10px 15px;
  ::v-deep .el-breadcrumb__item {
    font-size: 16px;
    .el-breadcrumb__inner {
      color: #fff;
    }
  }
  ::v-deep .el-breadcrumb__item:first-child {
    .el-breadcrumb__inner {
      color: #a0c3d9;
    }
  }
}
</style>