epmet-oper-gov/src/views/modules/shequzhili/tuceng/zhonghe/base.vue

<template>
  <div class="resi-container">
    <el-card ref="searchCard" class="search-card">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="fmData"
        :label-width="'100px'"
        class="demo-form-inline"
      >
        <div>
          <el-form-item prop="gridId" label="所属网格">
            <div class="resi-cell-value">
              <el-select
                v-model.trim="fmData.gridId"
                placeholder="请选择网格"
                size="small"
                clearable
                class="resi-cell-select"
                @change="handleChangeGrid"
              >
                <el-option
                  v-for="item in optionsG"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="所属房屋">
            <div class="resi-cell-value">
              <div class="resi-cell-col">
                <el-form-item prop="villageId">
                  <el-select
                    v-model.trim="fmData.villageId"
                    placeholder="请选择小区"
                    size="small"
                    clearable
                    class="resi-cell-select"
                    @change="handleChangeV"
                  >
                    <el-option
                      v-for="item in optionsV"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="buildId">
                  <el-select
                    v-model.trim="fmData.buildId"
                    placeholder="楼号"
                    size="small"
                    clearable
                    :disabled="changeVDisabled"
                    class="resi-cell-select resi-cell-select-middle"
                    @change="handleChangeB"
                  >
                    <el-option
                      v-for="item in optionsB"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="unitId">
                  <el-select
                    v-model.trim="fmData.unitId"
                    placeholder="单元"
                    size="small"
                    clearable
                    :disabled="changeBDisabled"
                    class="resi-cell-select resi-cell-select-middle"
                    @change="handleChangeD"
                  >
                    <el-option
                      v-for="item in optionsD"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="homeId">
                  <el-select
                    v-model.trim="fmData.homeId"
                    placeholder="房号"
                    size="small"
                    clearable
                    :disabled="changeDDisabled"
                    class="resi-cell-select resi-cell-select-middle"
                  >
                    <el-option
                      v-for="item in optionsH"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="fmData.name"
              class="resi-cell-input"
              size="small"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="fmData.mobile"
              class="resi-cell-input"
              size="small"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="身份证号" prop="idCard">
            <el-input
              v-model="fmData.idCard"
              class="resi-cell-input"
              size="small"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              class="diy-button--search"
              size="small"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              class="diy-button--reset"
              size="small"
              @click="resetForm('searchForm')"
              >重置</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <el-card class="resi-card-table">
      <div class="resi-row-btn">
        <el-button @click="handleChu" class="diy-button--reset" size="small"
          >导出</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="resi-table"
        :height="tableHeight"
      >
        <el-table-column
          label="序号"
          fixed="left"
          type="index"
          align="center"
          width="50"
        />

        <el-table-column
          prop="GRID_ID"
          align="center"
          label="所属网格"
          min-width="160"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="HOME_ID"
          label="所属家庭"
          align="center"
          min-width="160"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="NAME"
          align="center"
          label="姓名"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="MOBILE"
          width="140"
          align="center"
          label="手机号"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column prop="GENDER" align="center" width="60" label="性别">
        </el-table-column>

        <el-table-column
          prop="ID_CARD"
          align="center"
          min-width="160"
          label="身份证号"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="BIRTHDAY"
          align="center"
          label="出生日期"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="REMARKS"
          align="center"
          label="备注"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              @click="handleWatch(scope.$index)"
              type="text"
              size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="parseInt(pageSize)"
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <people-more
      v-if="showedPeopleMoreInfo && currentPepeleId"
      :userId="currentPepeleId"
      :gridName="currentPepeleGridName"
      @close="showedPeopleMoreInfo = false"
    />
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import peopleMore from "@/views/modules/shequ/cpts/people-more";

export default {
  props: {
    elseParams: {
      type: Array,
      default: () => [],
    },
  },

  components: { peopleMore },
  data() {
    return {
      openSearch: false,

      formShow: false,
      formTitle: "",

      pageNo: 1,
      pageSize: window.localStorage.getItem("pageSize") || 20,
      total: 1,

      tableData: [],

      optionsV: [],
      optionsB: [],
      optionsH: [],
      optionsD: [],
      optionsG: [],

      optionsWelfare: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "0",
          label: "否",
        },
      ],

      fmData: {
        gridId: "",
        villageId: "",
        buildId: "",
        unitId: "",
        homeId: "",
        name: "",
        mobile: "",
        idCard: "",
      },
      rangeTime: [],

      searchH: 0,
      tableHeight: 0,

      // 显示人员详情
      showedPeopleMoreInfo: false,

      currentPepeleId: "",
      currentPepeleGridName: "",
    };
  },
  computed: {
    ...mapGetters(["clientHeight", "iframeHeight"]),
    maxTableHeight() {
      console.log("computed-searchH---", this.searchH);
      const h = this.clientHeight - this.searchH + this.iframeHeight;
      const _h = this.clientHeight - this.searchH;
      console.log("computed-searchH---_h", _h);
      return this.$store.state.inIframe ? h : _h;
    },

    changeVDisabled() {
      return !this.fmData.villageId;
    },
    changeBDisabled() {
      return !this.fmData.buildId;
    },
    changeDDisabled() {
      return !this.fmData.unitId;
    },
  },
  watch: {
    rangeTime: function (val) {
      console.log("val----", val);
      if (Array.isArray(val) && val.length == 2) {
        this.fmData.startTime = val[0];
        this.fmData.endTime = val[1];
      } else {
        this.fmData.startTime = "";
        this.fmData.endTime = "";
      }
    },
    searchH() {
      const h = this.clientHeight - this.searchH + this.iframeHeight;
      const _h = this.clientHeight - this.searchH;
      console.log("computed-searchH---_h", _h);

      this.$nextTick(() => {
        this.tableHeight = this.$store.state.inIframe ? h : _h;
      });
    },
  },
  mounted() {
    this.getGridList();
    this.getValiheList();
    this.getTableData();
    this.searchH = this.$refs.searchCard.$el.offsetHeight + 270;
    console.log("searchH----", this.$refs.searchCard.$el.offsetHeight);
  },
  methods: {
    async handleWatch(rowIndex) {
      let item = this.tableData[rowIndex];
      this.currentPepeleId = item.icResiUserId;
      this.currentPepeleGridName = item.GRID_ID;
      await nextTick();
      this.showedPeopleMoreInfo = true;
    },

    handleClearVillage() {
      this.fmData.buildId = "";
      this.fmData.homeId = "";
    },
    handleClearBuild() {
      this.fmData.buildId = "";
      this.fmData.unitId = "";
      this.fmData.homeId = "";
    },
    handleClearDan() {
      this.fmData.unitId = "";
      this.fmData.homeId = "";
    },
    handleChangeGrid(val) {
      console.log("val", val);
      this.fmData.villageId = "";
      this.fmData.buildId = "";
      this.fmData.unitId = "";
      this.fmData.homeId = "";
      this.getValiheList();
    },
    handleChangeV(val) {
      console.log("val", val);
      this.fmData.buildId = "";
      this.fmData.unitId = "";
      this.fmData.homeId = "";
      this.getBuildList();
    },
    handleChangeB(val) {
      console.log("val", val);
      this.fmData.unitId = "";
      this.fmData.homeId = "";
      this.getUniList();
    },
    handleChangeD(val) {
      console.log("val", val);
      this.fmData.homeId = "";
      this.getHouseList();
    },

    getGridList() {
      const { user } = this.$store.state;
      this.$http
        .post("/gov/org/customergrid/gridoption", {
          agencyId: user.agencyId,
          purpose: "query",
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsG = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    getValiheList() {
      const { user } = this.$store.state;
      this.$http
        .post("/gov/org/icneighborhood/neighborhoodoption", {
          gridId: this.fmData.gridId,
          agencyId: "",
          // agencyId: user.agencyId
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsV = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    getBuildList() {
      this.$http
        .post("/gov/org/icbuilding/buildingoption", {
          neighborHoodId: this.fmData.villageId,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsB = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    getUniList() {
      this.$http
        .post("/gov/org/icbuildingunit/unitoption", {
          buildingId: this.fmData.buildId,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsD = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    getHouseList() {
      this.$http
        .post("/gov/org/ichouse/houseoption", { unitId: this.fmData.unitId })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsH = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getTableData();
    },

    handleClose() {
      this.formShow = false;
    },
    handleSearch(val) {
      console.log(this.fmData);
      this.pageNo = 1;
      this.getTableData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.handleSearch();
    },

    computeQueryParams() {
      const { elseParams, fmData } = this;

      return {
        formCode: "resi_base_info",
        pageNo: 1,
        pageSize: 20,
        conditions: [
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "GRID_ID",
            columnValue: [fmData.gridId],
          },
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "VILLAGE_ID",
            columnValue: [fmData.villageId],
          },
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "BUILD_ID",
            columnValue: [fmData.buildId],
          },
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "UNIT_ID",
            columnValue: [fmData.unitId],
          },
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "HOME_ID",
            columnValue: [fmData.homeId],
          },
          {
            queryType: "like",
            tableName: "ic_resi_user",
            columnName: "NAME",
            columnValue: [fmData.name],
          },
          {
            queryType: "like",
            tableName: "ic_resi_user",
            columnName: "MOBILE",
            columnValue: [fmData.mobile],
          },
          {
            queryType: "like",
            tableName: "ic_resi_user",
            columnName: "ID_CARD",
            columnValue: [fmData.idCard],
          },
          ...elseParams,
        ],
      };
    },

    async handleChu() {
      const url = "/epmetuser/icMoveIn/export";
      const { pageSize, pageNo } = this;
      await this.$http({
        method: "POST",
        url,
        responseType: "blob",
        data: {
          pageSize,
          pageNo,
          ...this.computeQueryParams(),
        },
      })
        .then((res) => {
          console.log("res----dddd", res);
          this.formatData(res);
        })
        .catch((err) => {
          console.log("err", err);
          this.exportLoading = false;
          return this.$message.error("网络错误");
        });
    },
    formatData(res) {
      const fileReader = new FileReader();
      fileReader.onloadend = () => {
        try {
          const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败
          // 后台信息
          console.log("jsonData---1", jsonData);
          return this.$message.error(jsonData.msg);
        } catch (err) {
          // 解析成对象失败，说明是正常的文件流
          // 下载文件
          console.log("errr-----", err, this);
          this.downloadFile(res);
        }
      };
      fileReader.readAsText(res.data);
    },
    downloadFile(res) {
      if (res.headers["content-disposition"]) {
        let fileName = window.decodeURI(
          res.headers["content-disposition"].split(";")[1].split("=")[1]
        );
        console.log("filename", fileName);
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        var url = window.URL.createObjectURL(blob);
        var aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = url;
        aLink.setAttribute("download", fileName);
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink); //下载完成移除元素
        window.URL.revokeObjectURL(url); //释放掉blob对象
        this.$message.success("导出成功");
        this.$emit("close");
      } else this.$message.error("下载失败");
    },

    async getTableData() {
      const url = "/epmetuser/icresiuser/listresi";
      const { pageSize, pageNo, fmData } = this;
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        ...this.computeQueryParams(),
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.total = data.total || 0;
        this.tableData = data.list
          ? data.list.map((item) => {
              return item;
            })
          : [];
      } else {
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";

.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
}
.resi-card-table {
  margin-top: 20px;
}
.resi-row-btn {
  margin-bottom: 13px;
  .upload-btn {
    display: inline-block;
    margin: 0 10px;
  }
}

.resi-btns {
  margin-top: 20px;
  text-align: center;
}

.resi-container .resi-card {
  position: relative;
  overflow: visible;
}

.demo-form-inline {
  // display: flex;
  // align-items: center;
  // margin-bottom: 20px;

  .resi-cell-label {
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
    margin-right: 15px;
    // text-align: right;
    // line-height: 32;
  }
  .resi-cell-label1 {
    width: max-content;
  }
  .resi-cell-value-radio {
    display: flex;
    align-items: center;
    min-height: 32px;
  }
  .resi-cell-input {
    width: 200px;
  }
  .resi-cell--daterange {
    max-width: 260px;
  }
  .resi-cell-select {
    width: 200px;
    box-sizing: border-box;
    margin-right: 10px;
    &-middle {
      width: 120px;
    }
    &-small {
      width: 88px;
    }
  }
  .resi-cell-select:last-child {
    margin-right: 0;
  }
}

.mt10 {
  margin-top: 10px;
}
</style>