epmet-work-pc/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 { requestPostBi } from "@/js/dai/request-bipass";
import getQueryPara from "dai-js/modules/getQueryPara";

export default {
  name: "resi-list",

  components: {
    cptTb,
    cptBread,
    resiDetails,
  },

  data () {
    return {
      breadList: [
        {
          type: "back",
          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();
    this.getCount();
  },

  methods: {
    handleClickBreadItem ({ item }) {
      if (item.type == "back") {
        this.$router.back();
      }
    },

    handleSearch () { },

    showInfo (index) {
      let item = this.srcTableData[index];
      this.displayedResiId = item.user_id;
    },

    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 = "resident_list";

      const { data, code, msg } = await requestPostBi(
        url,
        {
          queryParam: {
            org_id,
            type: resiType,
            pageNo,
            pageSize,
          },
        },
        {
          // mockId: 60069169,
        }
      );

      this.loading = false;

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

        this.list = data.map((item, index) => {
          return [
            index + 1,
            item.user_name ? item.user_name : "--",
            item.grid ? item.grid : "--",
            item.house ? item.house : "--",
            item.telephone ? item.telephone : "--",
            item.idcard ? item.idcard : "--",
            item.gender ? item.gender : "--",
            item.birthday ? item.birthday : "--",

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

    async getCount () {
      const { org_id, resiType, pageNo, pageSize } = this;

      const url = "resident_list_total";

      const { data, code, msg } = await requestPostBi(
        url,
        {
          queryParam: {
            org_id,
            type: resiType,
            pageNo,
            pageSize,
          },
        },
        {
          // mockId: 63070408,
        }
      );

      if (code === 0) {
        this.total = parseInt(data[0].count);
      } else {
        this.$message.error(msg);
      }
    },
  },

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

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