epmet-oper-gov/src/views/modules/communityService/sqzzz/cpts/edit.vue

<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="categoryCode"
                      label-width="150px"
                      style="display: block">
          <el-select v-model="dataForm.categoryCode"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in categoryList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </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-autocomplete class="item_width_1"
                               v-model="item.personName"
                               :fetch-suggestions="querySearchVolunteer"
                               placeholder="成员姓名"
                               :maxlength="50"
                               show-word-limit
                               @select="(vItem) => handleSelectVolunteer(index, vItem)"
                               :disabled="item.icResiUserId != ''"></el-autocomplete>

              <el-input style="margin-left: 10px"
                        class="item_width_1"
                        show-word-limit
                        placeholder="联系电话"
                        :disabled="item.icResiUserId != ''"
                        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-select v-model="searchValue"
                       filterable
                       style="width: 500px"
                       remote
                       :reserve-keyword="true"
                       placeholder="请输入关键词"
                       :remote-method="remoteMethod"
                       :loading="loading">
              <el-option v-for="(item,index) in searchOptions"
                         @click.native="handleClickKey(index)"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <div id="app"
                 class="div_map"></div>
          </div>
        </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="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";
import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";

var map;
var search;
var markers;
var infoWindowList;
let loading; // 加载动画
var geocoder; // 新建一个正逆地址解析类

export default {
  components: {},
  props: {},
  data () {
    return {
      formType: "add", //表单操作类型 add新增，edit编辑，detail详情

      searchOptions: [],
      searchValue: '',
      resultList: [],
      loading: false,

      btnDisable: false,

      orgId: "",
      dataForm: {
        organizationName: "",
        categoryCode: "",
        serviceItem: "",
        organizationPersonCount: "",
        principalName: "",
        principalPhone: "",
        organizationCreatedTime: "",
        address: "",
        remark: "",
        longitude: "",
        latitude: "",
        organizationPersonnel: [],
      },
      categoryList: [],
      volunteerList: [],
    };
  },
  computed: {
    dataRule () {
      return {
        organizationName: [
          { required: true, message: "组织名称	不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "组织名称	长度在 1 到 50个字符",
            trigger: "blur",
          },
        ],
        categoryCode: [
          { required: true, message: "分类名称不能为空", 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" },
        ],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        longitude: [
          { required: true, message: "请拖动地图选择坐标点", trigger: "blur" },
        ],
      };
    },
  },
  watch: {},

  async mounted () {
    this.getCategoryList();
    this.getVolunteerList();

  },

  methods: {

    async remoteMethod (query) {

      if (query !== '') {
        this.loading = true;

        const { msg, data } = await map.searchNearby(query);
        this.loading = false;
        this.resultList = []

        if (msg == "success" && data.resultList && data.resultList.length > 0) {

          if (data.resultList && data.resultList.length > 0) {
            this.resultList = data.resultList

            this.searchOptions = this.resultList.map(item => {
              return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };

            });

          }
        } else {
          this.searchOptions = [
            {
              value: '0',
              label: '未检索到结果'
            }
          ]
        }
      } else {
        this.searchOptions = [];
      }
    },

    handleClickKey (index) {
      let selPosition = this.resultList[index]
      let lonlat = selPosition.lonlat.split(" ")
      map.setCenter(lonlat[1], lonlat[0]);
      map.setMarker(lonlat[1], lonlat[0]);
      this.dataForm.latitude = lonlat[1];
      this.dataForm.longitude = lonlat[0];
      this.dataForm.address = selPosition.address + selPosition.name
    },

    querySearchVolunteer (queryString, cb) {
      const { volunteerList } = this;
      var results = queryString
        ? volunteerList.filter((item) => {
          return item.value.indexOf(queryString) !== -1;
        })
        : volunteerList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    handleSelectVolunteer (index, vItem) {
      this.dataForm.organizationPersonnel[index] = {
        personName: vItem.name,
        personPhone: vItem.mobile,
        icResiUserId: vItem.icResiUserId,
      };
    },

    async getVolunteerList () {
      const url = "/epmetuser/icresiuser/volunteer-list";
      const params = {};
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.volunteerList = data.map((item) => {
          return {
            name: item.name,
            value: item.label,
            mobile: item.mobile,
            icResiUserId: item.icResiUserId,
          };
        });
      } else {
        this.$message.error(msg);
      }
    },

    async getCategoryList () {
      const url = "/sys/dict/data/dictlist";
      const params = {
        dictType: "self_org_category",
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.categoryList = data;
      } else {
        this.$message.error(msg);
      }
    },
    handleAddStaff () {
      this.dataForm.organizationPersonnel = [
        ...this.dataForm.organizationPersonnel,
        { personName: "", personPhone: "", icResiUserId: "" },
      ];
    },
    handleDelStaff (index) {
      const { organizationPersonnel } = this.dataForm;
      organizationPersonnel.splice(index, 1);
      this.dataForm.organizationPersonnel = organizationPersonnel;
    },

    async initForm (type, row) {
      this.$refs.ref_form.resetFields();

      this.formType = type;
      console.log(row);

      let { latitude, longitude } = this.$store.state.user;
      if (row) {
        this.dataForm = { ...this.dataForm, ...row };
        this.orgId = this.dataForm.orgId;

      } else {
        this.dataForm.latitude = latitude
        this.dataForm.longitude = longitude
      }
      if (!map) {
        this.initMap(this.dataForm.latitude, this.dataForm.longitude);
      }


    },

    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap (latitude, longitude) {

      map = new daiMap(
        document.getElementById("app"),
        { latitude, longitude },
        {
          zoom: 16.2, // 设置地图缩放级别
          pitch: 43.5, // 设置俯仰角
          rotation: 45, // 设置地图旋转角度
        }
      );

      // 监听地图平移结束
      map.on("dragend", (e) => {
        this.handleMoveCenter(e);
      });

      map.setCenter(latitude, longitude);
      map.setMarker(latitude, longitude);

    },


    async handleMoveCenter () {
      //修改地图中心点
      const { lat, lng } = map.getCenter();
      this.dataForm.latitude = lat;
      this.dataForm.longitude = lng;
      map.setMarker(lat, lng);

      let { msg, data } = await map.getAddress(lat, lng);
      if (msg == "success") {
        this.dataForm.address = data.address
        this.searchValue = data.address
        this.searchOptions = []

      }
    },



    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: "手机号格式有误",
          //   });
          // }
          const {
            dataForm: { organizationPersonnel },
          } = this;
          let vlt = organizationPersonnel.every((item) => {
            return item.personName && item.personPhone;
          });
          if (!vlt) {
            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.searchValue = ''
      this.searchOptions = []
      this.resultList = []

      this.orgId = "";
      this.dataForm = {
        organizationName: "",
        serviceItem: "",
        organizationPersonCount: "",
        categoryCode: "",
        principalName: "",
        principalPhone: "",
        organizationCreatedTime: "",
        address: "",
        remark: "",
        longitude: "",
        latitude: "",
        organizationPersonnel: [],
      };
    },

    // async handleSearchMap () {
    //   const { msg, data } = await map.searchNearby(this.keyWords);
    //   if (msg == "success") {
    //     const { lat, lng } = data;
    //     map.setCenter(lat, lng);
    //     map.setMarker(lat, lng);
    //     this.dataForm.latitude = lat;
    //     this.dataForm.longitude = lng;
    //     this.handleMoveCenter()
    //   } else {
    //     this.$message.error("未检索到相关位置坐标");
    //   }
    // },

    // 开启加载动画
    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: 430px;
}

.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>