epmet-work-pc-chengyang/src/views/dataBoard/renfang/resi/list.vue

<template>
  <div class="g-pgi">
    <!-- 组织路由 -->
    <cpt-bread :separator="'/'"
               @tap="handleClickBreadItem"
               :breadList="breadList"></cpt-bread>

    <div class="m-title">
      <img class="title_img"
           src="@/assets/images/index/list-logo.png"
           alt />
      <div class="tip_title">{{ tableTitle }}</div>
      <div class="title_line"></div>
    </div>

    <div class="g-listbox">
      <cpt-tb :col-list="colList"
              :loading="loading"
              :header="header"
              :list="list"
              :total="total"
              @handleSizeChange="handleSizeChange"
              @handlePageNoChange="handlePageNoChange"
              @operate="showInfo"></cpt-tb>
    </div>

    <resi-details @close="displayedResiId = ''"
                  :resi-id="displayedResiId"
                  v-if="displayedResiId" />
  </div>
</template>

<script>
import cptTb from "@/views/dataBoard/cpts/tb";
import cptBread from "@/views/dataBoard/renfang/cpts/bread";
import resiDetails from "@/views/dataBoard/cpts/resi-details";
import { requestPost } from "@/js/dai/request";
import getQueryPara from "dai-js/modules/getQueryPara";

export default {
  name: "resi-list",

  components: {
    cptTb,
    cptBread,
    resiDetails,
  },

  data () {
    return {
      breadList: [
        {
          path: "/dataBoard/renfang/index",
          meta: {
            title: "人房总览",
          }
        },
        {
          meta: {
            title: "居民列表",
          }
        },
      ],

      tableTitle: "居民列表",
      searchName: "",

      orgLevel: "",
      org_id: "",
      resiType: "", // 流动 常驻 全部

      loading: true,
      pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
      pageNo: 1,
      total: 0,
      srcTableData: [],
      list: [],

      colList: [
        {
          align: "left",
          width: "5%",
        },
        {
          align: "left",
          width: "10%",
        },
        {
          align: "left",
          width: "20%",
        },
        {
          align: "left",
          width: "20%",
        },
        {
          align: "left",
          width: "15%",
        },
        {
          align: "left",
          width: "10%",
        },
        {
          align: "left",
          width: "5%",
        },
        {
          align: "left",
          width: "10%",
        },
        {
          align: "left",
          width: "10%",
        },
      ],

      header: [
        "序号",
        "姓名",
        "所属网格",
        "所属房屋",
        "联系电话",
        "证件号",
        "性别",
        "出生日期",
        "操作",
      ],

      displayedResiId: "",
    };
  },

  activated () {
    this.org_id = getQueryPara("org_id");
    this.resiType = getQueryPara("type");
    const type_name = getQueryPara("type_name");
    this.breadList[1].meta.title = type_name + "居民列表";
    this.tableTitle = type_name + "居民列表";

    this.pageNo = 1;
    this.getList();
  },

  methods: {
    handleClickBreadItem ({ item }) {
      this.$router.push({
        path: item.path,
      });
    },

    handleSearch () { },

    showInfo (index) {
      let item = this.srcTableData[index];
      this.$router.push({
        path: "/dataBoard/overview/resident",
        query: {
          user_id: item.resiId,
          type:'renfang'
        },
      });
    },

    handlePageNoChange (pageNo) {
      this.pageNo = pageNo;
      this.getList();
    },

    handleSizeChange (pageSize) {
      localStorage.setItem('dataBoard_PageSize', pageSize);
      this.pageSize = pageSize;
      this.getList();
    },

    async getList () {
      const { org_id,resiType, pageNo, pageSize } = this;
      this.loading = true;

      const url = "/actual/base/residentBaseInfo/page";

      var categoryKey = "FLOATING_FLAG";
      var reverseOption = "";

      if(resiType==='0'){
        reverseOption="y";
      }else if(resiType==='1'){
        reverseOption="";
      }else{
        categoryKey = "";
      }

      const { data, code, msg } = await requestPost(
        url,
        {
            agencyId:org_id,
            categoryKey: categoryKey,
            reverseOption:reverseOption,
            pageNo,
            pageSize,
        },
        {
          // mockId: 60069169,
        }
      );

      this.loading = false;

      if (code === 0) {
        this.srcTableData = data.list;
        this.total = data.total;

        this.list = data.list.map((item, index) => {
          return [
            index + 1,
            item.name ? item.name : "--",
            item.gridName ? item.gridName : "--",
            item.homeName ? item.homeName : "--",
            item.mobile ? item.mobile : "--",
            item.idNum ? item.idNum : "--",
            item.gender === "1" ? "男" : (item.gender === "2" ? "女" : "--"),
            item.birthday ? item.birthday : "--",

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

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

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