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

<template>
  <div class="div_people_search">
    <!-- 组织路由 -->
    <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="list_box">
        <div class="info_tip">
          <img src="../../../../assets/img/shuju/title-tip.png"
               alt />
          <div class="tip_title">{{tableTitle}}</div>
        </div>
        <div class="warning-table">
          <div class="table">
            <div class="table-header">
              <div class="td td1">序号</div>
              <div class="td td1">姓名</div>
              <div class="td td3">所属网格</div>
              <div class="td td3">所属房屋</div>
              <div class="td td2">手机</div>
              <div class="td td3">证件号</div>
              <div class="td td1">性别</div>
              <div class="td td2">出生日期</div>
              <div class="td td1">操作</div>

            </div>
            <div v-if="!loading && tableData.length> 0"
                 class="table-body">
              <div class="table-body-tr"
                   v-for="(item,index) in tableData"
                   :key='index'>
                <div class="td td1">{{item.sort}} </div>
                <div class="td td1">{{item.name}} </div>
                <div class="td td3">{{item.gridName}} </div>
                <div class="td td3">{{item.neighborHoodName + item.buildNum}} </div>
                <!-- <div class="td td1">{{item.buildNum}} </div> -->
                <div class="td td2">{{item.mobile}} </div>
                <div class="td td3">{{item.idCard}} </div>
                <div class="td td1">{{item.gender}} </div>
                <div class="td td2">{{item.birthday}} </div>
                <div @click="handelToPeople(item)"
                     class="td td1 btn_detail">{{'查看'}} </div>

              </div>
            </div>

            <div class="table-status"
                 v-if="loading">
              <screen-loading>加载中</screen-loading>
            </div>

            <div class="table-status"
                 v-if="tableData.length == 0 && !loading">
              <div class="no-data">
                <img src="@/assets/img/modules/visual/noData.png"
                     class="no-data-img" />
              </div>
            </div>

          </div>

        </div>
        <div class="pagination">
          <el-pagination hide-on-single-page
                         background
                         layout="prev, pager, next, total"
                         :current-page="pageNo"
                         :page-size="pageSize"
                         :total="total"
                         @current-change="pageCurrentChangeHandle">
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- <people v-if="orgLevel==='people'"
            :uid="selUserId"
            ref="ref_people"></people> -->
    <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";

export default {
  name: "people-list",
  components: {
    People, ScreenLoading, peopleMore
  },
  data () {
    return {
      showedMoreInfo: false,
      tableTitle: '党员',
      loading: false,
      headerList: [],
      tableData: [],
      searchName: '',
      pageSize: 10,
      pageNo: 1,
      total: 0,
      orgLevel: 'search',
      orgId: '',
      selUserId: '',
      //下钻层级记录
      runNum: 0,
      runAgencyArray: [],
      info: {},
      breadList: []
    };
  },
  activated () {

    this.searchName = ''
    this.tableData = []
    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 () {

    },



    async loadList (id, level) {
      this.loading = true
      const url = "/epmetuser/icresiuser/searchbycategory"
      let params = {
        columnName: this.searchName,
        id,
        level,
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }

      const { data, code, msg } = await requestPost(url, params)
      this.loading = false
      if (code === 0) {
        this.total = data.total
        this.tableData = data.list
      } else {
        this.$message.error(msg)
      }
    },

    //点击查看
    handelToPeople (item) {
      // this.toSubAgency('people', this.tableData[index].userId)
      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/visual/searchPerson.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;
}
.warning-table {
  height: 640px;
}
.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>