From 474d688ecc725316d507dbab5eb77894917bf040 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Thu, 25 Nov 2021 15:05:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E6=9B=B4=E6=94=B9=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communityService/dqfwzx/cpts/edit.vue     | 468 ++++++++++++++++++
 .../modules/communityService/dqfwzx/index.vue | 316 ++++++++++++
 .../modules/communityService/sqzzz/index.vue  |  12 +-
 3 files changed, 790 insertions(+), 6 deletions(-)
 create mode 100644 src/views/modules/communityService/dqfwzx/cpts/edit.vue
 create mode 100644 src/views/modules/communityService/dqfwzx/index.vue

diff --git a/src/views/modules/communityService/dqfwzx/cpts/edit.vue b/src/views/modules/communityService/dqfwzx/cpts/edit.vue
new file mode 100644
index 00000000..df346a61
--- /dev/null
+++ b/src/views/modules/communityService/dqfwzx/cpts/edit.vue
@@ -0,0 +1,468 @@
+<template>
+  <div>
+    <div>
+      <el-form
+        ref="ref_form"
+        :inline="true"
+        :model="dataForm"
+        :rules="dataRule"
+        :disabled="formType === 'detail'"
+        class="form"
+      >
+        <el-form-item
+          label="中心名称	"
+          prop="centerName"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入中心名称	"
+            v-model="dataForm.centerName"
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="办公电话"
+          prop="workPhone"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入办公电话"
+            v-model="dataForm.workPhone"
+          >
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="社区地址"
+          prop="address"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-input
+            class="item_width_1"
+            maxlength="50"
+            show-word-limit
+            placeholder="请输入社区地址	"
+            v-model="dataForm.address"
+          >
+          </el-input>
+        </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="matterList"
+          label-width="150px"
+          style="display: block"
+        >
+          <div class="m-staffs">
+            <div
+              class="item"
+              :key="'staff' + index"
+              v-for="(item, index) in dataForm.matterList"
+            >
+              <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>
+    </div>
+    <div class="div_btn">
+      <el-button @click="handleCancle">取 消</el-button>
+      <el-button
+        v-if="formType != 'detail'"
+        type="primary"
+        :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";
+
+var map;
+var search;
+var markers;
+var infoWindowList;
+let loading; // 加载动画
+
+export default {
+  data() {
+    return {
+      formType: "add", //表单操作类型 add新增，edit编辑，detail详情
+
+      btnDisable: false,
+
+      partyServiceCenterId: "",
+      dataForm: {
+        centerName: "",
+        address: "",
+        workPhone: "",
+        amStartTime: "",
+        amEndTime: "",
+        pmStartTime: "",
+        pmEndTime: "",
+        longitude: "",
+        latitude: "",
+        matterList: [],
+      },
+    };
+  },
+  components: {},
+  computed: {
+    dataRule() {
+      return {
+        centerName: [
+          { required: true, message: "中心名称	不能为空", trigger: "blur" },
+          {
+            min: 1,
+            max: 50,
+            message: "中心名称	长度在 1 到 50个字符",
+            trigger: "blur",
+          },
+        ],
+        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
+        amStartTime: [
+          { required: true, message: "办公时间不能为空", trigger: "blur" },
+        ],
+        amEndTime: [
+          { required: true, message: "办公时间不能为空", trigger: "blur" },
+        ],
+        pmStartTime: [
+          { required: true, message: "办公时间不能为空", trigger: "blur" },
+        ],
+        pmEndTime: [
+          { required: true, message: "办公时间不能为空", trigger: "blur" },
+        ],
+        workPhone: [
+          { required: true, message: "办公电话不能为空", trigger: "blur" },
+        ],
+        longitude: [
+          { required: true, message: "位置坐标不能为空", trigger: "blur" },
+        ],
+      };
+    },
+  },
+  props: {},
+  watch: {},
+
+  async mounted() {
+    this.initMap();
+  },
+
+  methods: {
+    handleAddStaff() {
+      this.dataForm.matterList = [
+        ...this.dataForm.matterList,
+        { personName: "", personPhone: "" },
+      ];
+    },
+    handleDelStaff(index) {
+      const { matterList } = this.dataForm;
+      matterList.splice(index, 1);
+      this.dataForm.matterList = matterList;
+    },
+    // 地图初始化函数，本例取名为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.partyServiceCenterId = this.dataForm.partyServiceCenterId;
+        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 {
+          this.submit();
+        }
+      });
+    },
+
+    async submit() {
+      let url = "";
+      if (this.formType === "add") {
+        url = "/gov/org/icpartyservicecenter/addpartyservicecenter";
+        // url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
+      } else {
+        url = "/gov/org/icpartyservicecenter/editpartyservicecenter";
+
+        this.dataForm.partyServiceCenterId = this.partyServiceCenterId;
+      }
+
+      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.partyServiceCenterId = "";
+      this.dataForm = {
+        centerName: "",
+        address: "",
+        workPhone: "",
+        amStartTime: "",
+        amEndTime: "",
+        pmStartTime: "",
+        pmEndTime: "",
+        longitude: "",
+        latitude: "",
+        matterList: [],
+      };
+    },
+    // 开启加载动画
+    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/communityService/dqfwzx/index.vue b/src/views/modules/communityService/dqfwzx/index.vue
new file mode 100644
index 00000000..2afa5533
--- /dev/null
+++ b/src/views/modules/communityService/dqfwzx/index.vue
@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <el-card class="resi-card-table">
+      <div class="resi-row-btn">
+        <el-button type="success" size="small" @click="handleAdd"
+          >新增</el-button
+        >
+      </div>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        class="resi-table"
+        :max-height="maxTableHeight"
+      >
+        <el-table-column label="序号" type="index" align="center" width="50" />
+        <el-table-column prop="centerName" label="组织名称"> </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
+            >
+
+            <el-button
+              @click="handleEdit(scope.$index)"
+              type="text"
+              size="small"
+              style="margin-right: 10px; color: #00a7a9"
+              >编辑</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"
+                style="color: #d51010"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 修改弹出框 -->
+    <el-dialog
+      :visible.sync="formShow"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :title="formTitle"
+      width="850px"
+      top="5vh"
+      @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";
+
+export default {
+  components: { editForm },
+  data() {
+    return {
+      openSearch: false,
+
+      formShow: false,
+      formTitle: "",
+      formShow: false,
+
+      agencyId: "",
+
+      tableData: [],
+    };
+  },
+  computed: {
+    maxTableHeight() {
+      return this.clientHeight - 410;
+    },
+    ...mapGetters(["clientHeight"]),
+  },
+  watch: {},
+  async mounted() {
+    await this.loadAgency();
+    this.getTableData();
+  },
+  methods: {
+    handleClose() {
+      this.formShow = false;
+    },
+
+    async handleAdd() {
+      this.formShow = true;
+      await nextTick();
+      console.log(this.$refs);
+      this.$refs.eleEditForm.initForm("add");
+    },
+
+    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 = "/gov/org/icpartyservicecenter/partyservicecenterlist";
+      const { data, code, msg } = await requestPost(url, {
+        orgId: this.agencyId,
+        orgType: "agency",
+      });
+      if (code === 0) {
+        console.log("列表请求成功！！！！！！！！！！！！！！");
+        this.total = data.total || 0;
+        this.tableData = data.list
+          ? data.list.map((item) => {
+              return item;
+            })
+          : [];
+      } else {
+      }
+    },
+
+    //加载组织
+    async loadAgency() {
+      const url = "/epmetuser/customerstaff/staffbasicinfo";
+      let params = {};
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.agencyId = data.agencyId;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs-other-info {
+  .el-tabs__item {
+    // width: 50px;
+    height: 20px;
+    box-sizing: border-box;
+    margin-right: 7px;
+    padding: 0 10px !important;
+    font-size: 8px;
+    font-weight: 500;
+    color: #666666;
+    line-height: 20px;
+    background: #ebecf1;
+    border-radius: 2px;
+  }
+  .el-tabs__nav-wrap::after,
+  .el-tabs__active-bar {
+    display: none;
+  }
+  .el-tabs__nav-next,
+  .el-tabs__nav-prev {
+    line-height: 20px;
+  }
+}
+
+.resi-card-table {
+  margin-top: 20px;
+}
+.resi-row-btn {
+  margin-bottom: 13px;
+  .upload-btn {
+    display: inline-block;
+    margin: 0 10px;
+  }
+}
+.resi-other {
+  width: 100%;
+  display: flex;
+  .resi-other-title {
+    width: 100px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    // padding: 6px 12px 0 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+  }
+  .tabs-other-info {
+    // padding-left: 60px;
+  }
+}
+
+.resi-btns {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.resi-container .resi-card {
+  position: relative;
+  overflow: visible;
+}
+.resi-down {
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 46px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-left: -23rpx;
+  cursor: pointer;
+  background: #ffffff;
+  border-radius: 0 0 10px 10px;
+  img {
+    display: block;
+  }
+}
+.resi-row-box {
+  // height: 104px;
+  overflow: hidden;
+  transition: height 0.5s;
+}
+.resi-row-more {
+  height: max-content;
+  transition: height 0.5s;
+}
+.resi-row {
+  margin-bottom: 20px;
+}
+.resi-search {
+  .el-col {
+    text-align: right;
+  }
+}
+.resi-cell {
+  display: flex;
+  align-items: center;
+  .resi-cell-label {
+    width: 70px;
+    box-sizing: border-box;
+    margin-right: 15px;
+    text-align: right;
+    // line-height: 32;
+  }
+  .resi-cell-value-radio {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+  }
+  .resi-cell-input {
+    width: 180px;
+  }
+  .resi-cell-select {
+    width: 180px;
+    box-sizing: border-box;
+    margin-right: 10px;
+    &-middle {
+      width: 130px;
+    }
+    &-small {
+      width: 88px;
+    }
+  }
+  .resi-cell-select:last-child {
+    margin-right: 0;
+  }
+}
+</style>
diff --git a/src/views/modules/communityService/sqzzz/index.vue b/src/views/modules/communityService/sqzzz/index.vue
index cfa8d72c..e0a6ec96 100644
--- a/src/views/modules/communityService/sqzzz/index.vue
+++ b/src/views/modules/communityService/sqzzz/index.vue
@@ -183,8 +183,8 @@ export default {
 
       fmData: {
         organizationName: "",
-        startDate: "",
-        endDate: "",
+        startTime: "",
+        endTime: "",
         createTime: ["", ""],
       },
 
@@ -201,11 +201,11 @@ export default {
   watch: {
     "fmData.createTime": function (val) {
       if (Array.isArray(val) && val.length == 2) {
-        this.fmData.startDate = val[0];
-        this.fmData.endDate = val[1];
+        this.fmData.startTime = val[0];
+        this.fmData.endTime = val[1];
       } else {
-        this.fmData.startDate = "";
-        this.fmData.endDate = "";
+        this.fmData.startTime = "";
+        this.fmData.endTime = "";
       }
     },
   },