epmet-oper-gov/src/views/modules/base/collect.vue

<template>
  <div class="resi-container">
    <el-card ref="searchCard" class="search-card">
         <el-form ref="searchForm" :inline="true" :model="fmData" class="demo-form-inline">
           <el-form-item v-if="communityList.length > 0" label="所在社区" prop="orgId">
            <el-select
                  v-model.trim="fmData.orgId"
                  placeholder="所在社区"
                  size="small"
                  clearable
                  class="resi-cell-input"
                >
                  <el-option
                    v-for="item in communityList"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  >
                  </el-option>
                </el-select>
          </el-form-item>
          <el-form-item label="居住地址" prop="address">
            <el-input
              v-model="fmData.address"
              class="resi-cell-input"
              size="small"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="填写时间" prop="startTime">
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              clearable
              size="small"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </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>
        </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="maxTableHeight"
        :span-method="arraySpanMethod"
      >
        <el-table-column label="序号" prop="desc" align="center" width="50" />
        <el-table-column prop="houseHolderName" width="120" label="户主姓名" align="center" />
        <el-table-column prop="address"  align="center" label="居住地址" :show-overflow-tooltip="true" />
        <el-table-column prop="houseType" align="center" width="120" label="自有/租住" >
          <template slot-scope="scope">
            <span>
              {{ scope.row.houseType == '1' ? '自有' : '租住' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="totalResi" width="120" align="center" label="居住成员人数" />
        <el-table-column prop="memberName" width="120" label="成员姓名" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="memberIdNum" width="180" align="center" label="成员身份证" />
        <el-table-column prop="memberMobile" width="140" align="center" label="成员手机号" />
        <el-table-column prop="heSuanCount" width="140" align="center" label="参加几轮核酸检测 " />
        <el-table-column prop="ymjz" width="140" align="center" label="疫苗接种情况">
          <template slot-scope="scope">
            <span v-if="scope.row.ymjz == 1">全程接种</span>
            <span v-if="scope.row.ymjz == 2">未全程接种</span>
            <span v-if="scope.row.ymjz == 0">未接种</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="organizationCreatedTime" align="center" label="创建时间"> -->
        <!-- <el-table-column fixed="right" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="div-table-button--detail"
              size="small"
              @click="handleWatch(scope.row)"
              >查看</el-button
            >

            <el-button
              @click="handleEdit(scope.$index)"
              type="text"
              size="small"
              class="div-table-button--edit"
              >修改</el-button
            >

            <el-popconfirm
              title="删除之后无法回复，确认删除？"
              @onConfirm="handleDel(scope.row, scope.$index)"
              @confirm="handleDel(scope.row, scope.$index)"
            >
              <el-button
                slot="reference"
                type="text"
                size="small"
                class="div-table-button--delete"
                style="margin-left: 10px;"
                >删除</el-button
              >
            </el-popconfirm>
          </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>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="formShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="formTitle"
      width="850px"
      top="5vh"
      class="dialog-h"
      @closed="handleClose"
    >
      <!-- <edit-form
        ref="eleEditForm"
        @dialogCancle="handleClose"
        @dialogOk="handleEditSuccess"
      ></edit-form> -->
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import axios from "axios";

export default {
  data() {
    return {
      openSearch: false,

      formShow: false,
      formTitle: "组织信息",

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

      tableData: [],
      timeRange: '',
      fmData: {
        orgId: '',
        startTime: "",
        endTime: "",
        address: ''
      },
      communityList: [],
      spanIndex: [], // 合并的行
      importBtnTitle: "导入",
      importLoading: false,
    };
  },
  computed: {
    maxTableHeight() {
      return this.clientHeight - 360;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    timeRange(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 = "";
      }
    },
  },
  mounted() {
    this.getcommunityList()
    this.getTableData();
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log('row-----r', row)
      // console.log('column-----c', column)
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
        let index = this.spanIndex.findIndex(item => item.firstIndex === rowIndex)
        if (index > -1) {
          return {
            rowspan: this.spanIndex[index].len,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    async handleChu() {
      const url =
        "/epmetuser/icresicollect/export";
      const { pageSize, pageNo, fmData } = this;
      axios({
        url: window.SITE_CONFIG["apiURL"] + url,
        method: "post",
        data: {
          pageSize,
          pageNo,
          ...fmData,
        },
        responseType: "blob",
      })
        .then((res) => {
          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对象
        })
        .catch((err) => {
          console.log("获取导出情失败", err);
          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.timeRange = ''
      this.handleSearch()
    },

    async handleWatch(rowIndex) {
      this.formShow = true;
      await nextTick();
      this.$refs.eleEditForm.initForm("detail", this.tableData[rowIndex]);
    },

    async handleEdit(rowIndex) {
      this.formShow = true;
      await nextTick();
      this.$refs.eleEditForm.initForm("edit", this.tableData[rowIndex]);
    },
    handleEditSuccess() {
      this.handleClose();
      this.getTableData();
    },

    async handleDel(rowData, rowIndex) {
      console.log(rowData, rowIndex);
      const url =
        "/heart/iccommunityselforganization/delcommunityselforganization";
      const { tableData } = this;

      const { data, code, msg } = await requestPost(url, {
        orgId: tableData[rowIndex].orgId,
      });

      if (code === 0) {
        this.$message.success("删除成功！");
        this.getTableData();
      } else {
        this.$message.success("操作失败！");
      }
    },
    async getcommunityList() {
      const url =
        "/gov/org/agency/community-list";
      const { data, code, msg } = await requestPost(url);
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.communityList = data
      } else {
      }
    },
    async getTableData() {
      const url =
        "/epmetuser/icresicollect/list";
      const { pageSize, pageNo, fmData } = this;
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        ...fmData,
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.total = data.total || 0;
        let _i = 0
        let arr = []
        this.spanIndex = data.list && data.list.map((item, index) => {
         if (index == 0) _i = 0
         else _i = _i + data.list[index - 1].list.length
          arr.push(_i)
          console.log('_i-----', _i, arr)
          // if (index === data.list.length - 1) firstIndex = _i - item.list.length
          return {
            firstIndex: _i,
            len: item.list.length
          }
        })
        this.tableData = data.list && this.formatArr(data.list)
        console.log('tableData----0', this.spanIndex)
      } else {
      }
    },
    // 数组扁平化
    formatArr(arr) {
      let res = []
      let arr1 = arr.map((n, index) => {
        return {
          ...n,
          list: n.list.length> 0 ? n.list.map(i => {
            return {
              
              ...n,
              ...i,
              desc: index + 1,
              list: []
            }
          }) : []
        }
      })
      arr1.forEach(item => {
        if (item.list && item.list.length > 0) {
          res = res.concat(this.formatArr(item.list))
        } else res.push(item)
      })
      return res
    },
  },
};
</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;
}

</style>