From 91ac1f39f47a60375b0007eac87152dd933f5a3c Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Mon, 9 May 2022 14:54:05 +0800
Subject: [PATCH] 2222

---
 .../modules/base/huji/chusheng/cpts/edit.vue  | 540 +++++++++++
 .../modules/base/huji/chusheng/index.vue      | 851 ++++++++++++++++++
 2 files changed, 1391 insertions(+)
 create mode 100644 src/views/modules/base/huji/chusheng/cpts/edit.vue
 create mode 100644 src/views/modules/base/huji/chusheng/index.vue

diff --git a/src/views/modules/base/huji/chusheng/cpts/edit.vue b/src/views/modules/base/huji/chusheng/cpts/edit.vue
new file mode 100644
index 00000000..59ec51c3
--- /dev/null
+++ b/src/views/modules/base/huji/chusheng/cpts/edit.vue
@@ -0,0 +1,540 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+      <el-form
+        ref="ref_form"
+        :inline="true"
+        :model="dataForm"
+        :rules="dataRule"
+        :disabled="formType === 'detail'"
+        class="form"
+      >
+        <el-form-item
+          label="组织名称	"
+          prop="organizationName"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入组织名称	"
+            v-model="dataForm.organizationName"
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="组织人数	"
+          prop="organizationPersonCount"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            type="number"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入组织人数	"
+            v-model="dataForm.organizationPersonCount"
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="组织成员	"
+          prop="organizationPersonnel"
+          label-width="150px"
+          style="display: block"
+        >
+          <div class="m-staffs">
+            <div
+              class="item"
+              :key="'staff' + index"
+              v-for="(item, index) in dataForm.organizationPersonnel"
+            >
+              <el-input
+                class="item_width_1"
+                maxlength="50"
+                show-word-limit
+                placeholder="成员姓名"
+                v-model="item.personName"
+              />
+
+              <el-input
+                style="margin-left: 10px"
+                class="item_width_1"
+                maxlength="50"
+                show-word-limit
+                placeholder="联系电话"
+                v-model="item.personPhone"
+              />
+
+              <el-button
+                style="margin-left: 10px"
+                size="small"
+                @click="handleDelStaff(index)"
+                >删除</el-button
+              >
+            </div>
+
+            <div class="item-add">
+              <el-button size="small" @click="handleAddStaff">添加</el-button>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item
+          label="服务事项"
+          prop="serviceItem"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            type="textarea"
+            maxlength="1000"
+            show-word-limit
+            :rows="3"
+            placeholder="请输入服务事项，不超过1000字"
+            v-model="dataForm.serviceItem"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="负责人	"
+          prop="principalName"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入负责人	"
+            v-model="dataForm.principalName"
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="联系电话	"
+          prop="principalPhone"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入联系电话	"
+            v-model="dataForm.principalPhone"
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="创建时间"
+          prop="organizationCreatedTime"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-date-picker
+            v-model="dataForm.organizationCreatedTime"
+            placeholder="创建时间"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item
+          label="位置坐标"
+          prop="longitude"
+          label-width="150px"
+          style="display: block"
+        >
+          <div style="width: 500px">
+            <el-input
+              class="item_width_4"
+              maxlength="50"
+              placeholder="请输入关键字"
+              v-model="dataForm.address"
+            >
+            </el-input>
+            <el-button
+              style="margin-left: 10px"
+              type="primary"
+              size="small"
+              @click="handleSearchMap"
+              >查询</el-button
+            >
+            <div id="app" class="div_map"></div>
+            <div style="margin-top: 10px">
+              <span>经度</span>
+              <el-input
+                class="item_width_3"
+                maxlength="50"
+                placeholder="请输入经度"
+                v-model="dataForm.longitude"
+              >
+              </el-input>
+              <span style="margin-left: 20px">纬度</span>
+              <el-input
+                class="item_width_3"
+                maxlength="50"
+                placeholder="请输入纬度"
+                v-model="dataForm.latitude"
+              >
+              </el-input>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item
+          label="备注"
+          prop="remark"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            type="textarea"
+            maxlength="500"
+            show-word-limit
+            :rows="3"
+            placeholder="请输入备注，不超过500字"
+            v-model="dataForm.remark"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="div_btn resi-btns">
+      <el-button size="small" @click="handleCancle">取 消</el-button>
+      <el-button
+        v-if="formType != 'detail'"
+        type="primary"
+        size="small"
+        :disabled="btnDisable"
+        @click="handleComfirm"
+        >确 定</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { Loading } from "element-ui"; // 引入Loading服务
+import { requestPost } from "@/js/dai/request";
+import formVltHelper from "dai-js/tools/formVltHelper";
+
+var map;
+var search;
+var markers;
+var infoWindowList;
+let loading; // 加载动画
+
+export default {
+  data() {
+    return {
+      formType: "add", //表单操作类型 add新增，edit编辑，detail详情
+
+      btnDisable: false,
+
+      orgId: "",
+      dataForm: {
+        organizationName: "",
+        serviceItem: "",
+        organizationPersonCount: "",
+        principalName: "",
+        principalPhone: "",
+        organizationCreatedTime: "",
+        address: "",
+        remark: "",
+        longitude: "",
+        latitude: "",
+        organizationPersonnel: [],
+      },
+    };
+  },
+  components: {},
+  computed: {
+    dataRule() {
+      return {
+        organizationName: [
+          { required: true, message: "组织名称	不能为空", trigger: "blur" },
+          {
+            min: 1,
+            max: 50,
+            message: "组织名称	长度在 1 到 50个字符",
+            trigger: "blur",
+          },
+        ],
+        organizationPersonCount: [
+          { required: true, message: "组织人数不能为空", trigger: "blur" },
+        ],
+        serviceItem: [
+          { required: true, message: "服务事项不能为空", trigger: "blur" },
+        ],
+        principalName: [
+          { required: true, message: "负责人不能为空", trigger: "blur" },
+        ],
+        principalPhone: [
+          { required: true, message: "联系电话不能为空", trigger: "blur" },
+        ],
+        longitude: [
+          { required: true, message: "位置坐标不能为空", trigger: "blur" },
+        ],
+      };
+    },
+  },
+  props: {},
+  watch: {},
+
+  async mounted() {
+    this.initMap();
+  },
+
+  methods: {
+    handleAddStaff() {
+      this.dataForm.organizationPersonnel = [
+        ...this.dataForm.organizationPersonnel,
+        { personName: "", personPhone: "" },
+      ];
+    },
+    handleDelStaff(index) {
+      const { organizationPersonnel } = this.dataForm;
+      organizationPersonnel.splice(index, 1);
+      this.dataForm.organizationPersonnel = organizationPersonnel;
+    },
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap() {
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519);
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById("app"), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45, // 设置地图旋转角度
+      });
+
+      search = new window.TMap.service.Search({ pageSize: 10 });
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: [],
+      });
+      infoWindowList = Array(10);
+
+      // 监听地图平移结束
+      map.on("panend", () => {
+        this.handleMoveCenter();
+      });
+      this.handleMoveCenter();
+    },
+
+    setMarker(lat, lng) {
+      markers.setGeometries([]);
+      markers.add([
+        {
+          id: "4",
+          styleId: "marker",
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: "marker4",
+          },
+        },
+      ]);
+    },
+
+    handleSearchMap() {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close();
+      });
+      infoWindowList.length = 0;
+      markers.setGeometries([]);
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.dataForm.address,
+          bounds: map.getBounds(),
+        })
+        .then((result) => {
+          let { data } = result;
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng },
+            } = data[0];
+            map.setCenter(new TMap.LatLng(lat, lng));
+            this.setMarker(lat, lng);
+            this.dataForm.latitude = lat;
+            this.dataForm.longitude = lng;
+          } else {
+            this.$message.error("未检索到相关位置坐标");
+          }
+        });
+    },
+
+    handleMoveCenter() {
+      //修改地图中心点
+      const center = map.getCenter();
+      const lat = center.getLat();
+      const lng = center.getLng();
+      this.dataForm.latitude = lat;
+      this.dataForm.longitude = lng;
+      this.setMarker(lat, lng);
+    },
+
+    async initForm(type, row) {
+      this.$refs.ref_form.resetFields();
+
+      this.formType = type;
+      console.log(row);
+      if (row) {
+        this.dataForm = { ...this.dataForm, ...row };
+        this.orgId = this.dataForm.orgId;
+        map.setCenter(new TMap.LatLng(row.latitude, row.longitude));
+      }
+    },
+
+    async handleComfirm() {
+      this.btnDisable = true;
+      setTimeout(() => {
+        this.btnDisable = false;
+      }, 10000);
+      this.$refs["ref_form"].validate((valid, messageObj) => {
+        if (!valid) {
+          app.util.validateRule(messageObj);
+          this.btnDisable = false;
+        } else {
+          if (!formVltHelper.userOrMobile(this.dataForm.principalPhone)) {
+            return this.$message({
+              type: "error",
+              message: "手机号格式有误",
+            });
+          }
+          this.submit();
+        }
+      });
+    },
+
+    async submit() {
+      let url = "";
+      if (this.formType === "add") {
+        url = "/heart/iccommunityselforganization/addcommunityselforganization";
+        // url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
+      } else {
+        url =
+          "/heart/iccommunityselforganization/editcommunityselforganization";
+
+        this.dataForm.orgId = this.orgId;
+      }
+
+      const { data, code, msg } = await requestPost(url, this.dataForm);
+
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "操作成功",
+        });
+        this.resetData();
+        this.$emit("dialogOk");
+        this.btnDisable = false;
+      } else {
+        this.btnDisable = false;
+        this.$message.error(msg);
+      }
+    },
+
+    handleCancle() {
+      this.resetData();
+      this.$emit("dialogCancle");
+    },
+    resetData() {
+      this.orgId = "";
+      this.dataForm = {
+        organizationName: "",
+        serviceItem: "",
+        organizationPersonCount: "",
+        principalName: "",
+        principalPhone: "",
+        organizationCreatedTime: "",
+        address: "",
+        remark: "",
+        longitude: "",
+        latitude: "",
+        organizationPersonnel: [],
+      };
+    },
+    // 开启加载动画
+    startLoading() {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: "正在加载……", // 加载中需要显示的文字
+        background: "rgba(0,0,0,.7)", // 背景颜色
+      });
+    },
+    // 结束加载动画
+    endLoading() {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.item_width_1 {
+  width: 500px;
+}
+.item_width_2 {
+  width: 400px;
+}
+.item_width_3 {
+  margin-left: 10px;
+  width: 200px;
+}
+.item_width_4 {
+  width: 200px;
+}
+
+.div_map {
+  margin-top: 10px;
+}
+
+.div_btn {
+  // display: flex;
+  // justify-content: flex-end;
+}
+.el-tabs {
+  margin: 0 20px;
+}
+.el-upload__tip {
+  color: rgb(155, 155, 155);
+  margin: 0;
+}
+.form {
+  margin-top: 30px;
+}
+
+.m-staffs {
+  width: 468px;
+  .item {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 7px;
+  }
+  .item-add {
+  }
+}
+</style>
+
+<style>
+.el-dialog__body {
+  padding: 0 10px 20px !important;
+}
+</style>
diff --git a/src/views/modules/base/huji/chusheng/index.vue b/src/views/modules/base/huji/chusheng/index.vue
new file mode 100644
index 00000000..5b82941b
--- /dev/null
+++ b/src/views/modules/base/huji/chusheng/index.vue
@@ -0,0 +1,851 @@
+<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-row class="resi-row">
+          <el-col :span="6">
+            <div class="resi-cell">
+              <div class="resi-cell-label">所属网格</div>
+              <div class="resi-cell-value">
+                <el-select
+                  v-model.trim="form.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>
+            </div>
+          </el-col>
+          <el-col :span="18">
+            <div class="resi-cell">
+              <div class="resi-cell-label">所属房屋</div>
+              <div class="resi-cell-value">
+                <el-select
+                  v-model.trim="form.villageId"
+                  placeholder="请选择小区"
+                  size="small"
+                  clearable
+                  class="resi-cell-select"
+                  @clear="handleClearVillage"
+                  @change="handleChangeV"
+                >
+                  <el-option
+                    v-for="item in optionsV"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-select
+                  v-model.trim="form.buildId"
+                  placeholder="楼号"
+                  size="small"
+                  clearable
+                  style="width: 120px"
+                  class="resi-cell-select"
+                  :disabled="changeVDisabled"
+                  @clear="handleClearBuild"
+                  @change="handleChangeB"
+                >
+                  <el-option
+                    v-for="item in optionsB"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-select
+                  v-model.trim="form.unitId"
+                  :disabled="changeBDisabled"
+                  placeholder="单元"
+                  size="small"
+                  clearable
+                  style="width: 120px"
+                  class="resi-cell-select"
+                  @click="handleClearDan"
+                  @change="handleChangeD"
+                >
+                  <el-option
+                    v-for="item in optionsD"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-select
+                  v-model.trim="form.homeId"
+                  :disabled="changeDDisabled"
+                  placeholder="房号"
+                  size="small"
+                  clearable
+                  style="width: 120px"
+                  class="resi-cell-select"
+                >
+                  <el-option
+                    v-for="item in optionsH"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+
+        <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 label="出生日期" prop="birthdayTime">
+          <el-date-picker
+            v-model="fmData.birthdayTime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="享受福利" prop="remark">
+          <el-input
+            v-model="fmData.remark"
+            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>
+      </el-form>
+    </el-card>
+    <el-card class="resi-card-table">
+      <div class="resi-row-btn">
+        <el-button class="diy-button--add" size="small" @click="handleAdd"
+          >新增</el-button
+        >
+        <el-button
+          v-if="false"
+          class="diy-button--export"
+          size="small"
+          @click="handleExportModule('room')"
+          >下载模板</el-button
+        >
+        <el-upload
+          v-if="false"
+          ref="upload"
+          class="upload-btn"
+          action="uploadUlr"
+          :limit="1"
+          :accept="'.xls,.xlsx'"
+          :with-credentials="true"
+          :show-file-list="false"
+          :auto-upload="true"
+          :on-progress="handleProgress"
+          :on-success="handleExcelSuccess"
+          :before-upload="beforeExcelUpload"
+          :http-request="uploadHttpRequest"
+        >
+          <el-button
+            size="small"
+            class="diy-button--delete"
+            :loading="importLoading"
+            >{{ importBtnTitle }}</el-button
+          >
+        </el-upload>
+
+        <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"
+      >
+        <el-table-column label="序号" type="index" align="center" width="50" />
+
+        <el-table-column prop="name" label="姓名" align="center">
+          <template slot-scope="scope">
+            <a class="name-a" @click="handleWatch(scope.$index)">
+              {{ scope.row.name }}
+            </a>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="gridName"
+          align="center"
+          label="所属网格"
+          :show-overflow-tooltip="true"
+        >
+        </el-table-column>
+
+        <el-table-column
+          prop=""
+          label="所属房屋"
+          align="center"
+          :show-overflow-tooltip="true"
+        >
+        </el-table-column>
+
+        <el-table-column
+          prop="mobile"
+          width="100"
+          align="center"
+          label="手机号"
+        >
+        </el-table-column>
+
+        <el-table-column prop="idCard" align="center" label="身份证号">
+        </el-table-column>
+
+        <el-table-column prop="gender" align="center" label="性别">
+        </el-table-column>
+
+        <el-table-column prop="birthday" align="center" label="出生日期">
+        </el-table-column>
+
+        <el-table-column prop="birthplace" align="center" label="出生地">
+        </el-table-column>
+
+        <el-table-column align="center" label="出生人父/母姓名">
+          <template slot-scope="scope">
+            <span> {{ scope.row.father }} / {{ scope.row.mother }} </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="count" align="center" label="胎次">
+        </el-table-column>
+
+        <el-table-column prop="reportDate" align="center" label="申报户口日期">
+        </el-table-column>
+
+        <el-table-column prop="houseHolderName" align="center" label="户主姓名">
+        </el-table-column>
+
+        <el-table-column
+          prop="houseHolderRelation"
+          align="center"
+          label="与户主关系"
+        >
+        </el-table-column>
+
+        <el-table-column fixed="right" label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <!-- <el-button
+              @click="handleWatch(scope.$index)"
+              type="text"
+              size="small"
+              >查看</el-button
+            > -->
+
+            <el-button
+              @click="handleEdit(scope.$index)"
+              type="text"
+              size="small"
+              class="div-table-button--edit"
+              >修改</el-button
+            >
+
+            <el-popconfirm
+              v-if="false"
+              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 editForm from "./cpts/edit";
+import axios from "axios";
+
+export default {
+  components: { editForm },
+  data() {
+    return {
+      openSearch: false,
+
+      formShow: false,
+      formTitle: "组织信息",
+
+      pageNo: 1,
+      pageSize: window.localStorage.getItem("pageSize") || 20,
+      total: 1,
+
+      tableData: [],
+
+      optionsV: [],
+      optionsB: [],
+      optionsH: [],
+      optionsD: [],
+      optionsG: [],
+
+      fmData: {
+        gridId: "",
+        villageId: "",
+        buildId: "",
+        unitId: "",
+        homeId: "",
+        name: "",
+        mobile: "",
+        idCard: "",
+        welfare: "", //福利0否，1是
+        birthdayStart: "",
+        birthdayEnd: "",
+        birthdayTime: ["", ""],
+      },
+
+      importBtnTitle: "导入",
+      importLoading: false,
+
+      //积分记录
+      scoreDiaTitle: "积分记录",
+      scoreDiaShow: false,
+    };
+  },
+  computed: {
+    maxTableHeight() {
+      return this.$store.state.inIframe
+        ? this.clientHeight - 360 + this.iframeHeigh
+        : this.clientHeight - 360;
+    },
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+    changeVDisabled() {
+      return !this.form.villageId;
+    },
+    changeBDisabled() {
+      return !this.form.buildId;
+    },
+    changeDDisabled() {
+      return !this.form.unitId;
+    },
+  },
+  watch: {
+    "fmData.birthdayTime": function (val) {
+      if (Array.isArray(val) && val.length == 2) {
+        this.fmData.birthdayStart = val[0];
+        this.fmData.birthdayEnd = val[1];
+      } else {
+        this.fmData.birthdayStart = "";
+        this.fmData.birthdayEnd = "";
+      }
+    },
+  },
+  mounted() {
+    this.getGridList();
+    this.getValiheList();
+    this.getTableData();
+  },
+  methods: {
+    handleChangeGrid(val) {
+      console.log("val", val);
+      this.form.villageId = "";
+      this.form.buildId = "";
+      this.form.unitId = "";
+      this.form.homeId = "";
+      this.getValiheList();
+    },
+    handleChangeV(val) {
+      console.log("val", val);
+      this.form.buildId = "";
+      this.form.unitId = "";
+      this.form.homeId = "";
+      this.getBuildList();
+    },
+    handleChangeB(val) {
+      console.log("val", val);
+      this.form.unitId = "";
+      this.form.homeId = "";
+      this.getUniList();
+    },
+    handleChangeD(val) {
+      console.log("val", val);
+      this.form.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.form.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.form.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.form.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.form.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("网络错误");
+        });
+    },
+
+    async handleExportModule() {
+      let url = "/heart/iccommunityselforganization/import-template-download";
+
+      let params = {};
+      await this.$http({
+        method: "POST",
+        url,
+        responseType: "blob",
+        data: params,
+      })
+        .then((res) => {
+          // this.download(res.data, title + '.xls')
+          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对象
+          } else this.$message.error("下载失败");
+        })
+        .catch((err) => {
+          console.log("err", err);
+          return this.$message.error("网络错误");
+        });
+    },
+    // 上传大图标成功
+    handleExcelSuccess(res, file) {
+      if (res.code === 0 && res.msg === "success") {
+        console.log("resss---ppp", res);
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    handleProgress(event, file, fileList) {
+      console.log("percentage", file.percentage);
+    },
+
+    beforeExcelUpload(file) {
+      console.log("file", file);
+      const isType = file.type === "application/vnd.ms-excel";
+      const isTypeComputer =
+        file.type ===
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+      const fileType = isType || isTypeComputer;
+      const isLt1M = file.size / 1024 / 1024 < 10;
+      if (!fileType) {
+        this.$message.error("上传文件只能是xls/xlsx格式！");
+      }
+
+      if (!isLt1M) {
+        this.$message.error("上传文件大小不能超过 10MB!");
+      }
+      return fileType && isLt1M;
+    },
+    async uploadHttpRequest(file) {
+      this.importLoading = true;
+      this.importBtnTitle = "正在上传中...";
+      this.$message({
+        showClose: true,
+        message: "导入中，请到系统管理-导入记录中查看进度",
+        duration: 0,
+      });
+      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
+      formData.append("file", file.file); //添加文件对象
+      await this.$http
+        .post(
+          "/heart/iccommunityselforganization/importcommunityselforganization",
+          formData
+        )
+        .then((res) => {
+          console.log("res-up", res);
+          if (res.data.code == 0 && res.data.msg == "success") {
+            // this.$message.success('导入成功')
+            this.getTableData();
+          } else this.$message.error(res.data.msg);
+        })
+        .catch((err) => {
+          console.log("失败", err);
+          file.onError(); //上传失败的文件会从文件列表中删除
+          // this.$message.error('导入失败')
+        });
+      // axios({
+      //   url:
+      //     window.SITE_CONFIG["apiURL"] +
+      //     "/heart/iccommunityselforganization/importcommunityselforganization",
+      //   method: "post",
+      //   data: formData,
+      //   // responseType: "blob",
+      // })
+      //   .then((res) => {
+      //     this.importLoading = false;
+      //     this.importBtnTitle = "导入";
+      //     console.log("resresresresresresres", res);
+
+      //     this.getTableData();
+      //     if (res.data.code == 0) {
+      //       return this.$message.success(res.data.data || "导入成功");
+      //     } else {
+      //       return this.$message.error(res.data.msg);
+      //     }
+      //   })
+      //   .catch((err) => {
+      //     console.log("失败", err);
+      //   });
+      this.importLoading = false;
+      this.importBtnTitle = "导入";
+      this.$refs.upload.clearFiles();
+    },
+
+    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();
+    },
+    async handleAdd() {
+      this.formShow = true;
+      await nextTick();
+      console.log(this.$refs);
+      this.$refs.eleEditForm.initForm("add");
+    },
+
+    async handleChu() {
+      const url =
+        "/heart/iccommunityselforganization/exportcommunityselforganization";
+      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("网络错误");
+        });
+    },
+
+    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 getTableData() {
+      const url = "/epmetuser/birth/page";
+      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;
+        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;
+}
+</style>