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

<template>
  <div>
    <div>
      <el-form
        ref="ref_form"
        :inline="true"
        :model="dataForm"
        :rules="dataRule"
        :disabled="formType === 'detail'"
        class="form"
      >
        <el-form-item
          label="头像"
          label-width="150px"
          prop="imageList"
          style="display: block"
        >
          <div class="imsg-list">
            <div
              v-for="(item, index) in dataForm.imageList"
              :key="index"
              class="imgs-item"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="item"
                fit="fill"
                :preview-src-list="dataForm.imageList"
              ></el-image>
              <i class="el-icon-delete" @click="handleDelimg(item, index)"></i>
            </div>
            <el-upload
              :headers="$getElUploadHeaders()"
              class="avatar-uploader"
              v-if="dataForm.imageList.length < 1 && !disabled"
              :action="uploadUlr"
              :data="{ customerId: customerId }"
              :show-file-list="false"
              :disabled="disabled"
              :on-progress="handleProgress"
              :on-success="handleImgSuccess"
              :before-upload="beforeImgUpload"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
            >
              <el-progress
                v-if="uploading"
                :width="100"
                type="circle"
                :percentage="unloadPencent"
              ></el-progress>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item
          label="组织名称	"
          prop="societyName"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            maxlength="50"
            show-word-limit
            placeholder="请输入组织名称	"
            v-model="dataForm.societyName"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="服务内容"
          prop="serviceMatters"
          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.serviceMatters"
          ></el-input>
        </el-form-item>

        <!--        <el-form-item
            label="负责人姓名	"
            prop="personInCharge"
            label-width="150px"
            style="display: block"
        >
          <el-input
              class="item_width_1"
              maxlength="50"
              show-word-limit
              placeholder="请输入负责人姓名	"
              v-model="dataForm.personInCharge"
          >
          </el-input>
        </el-form-item>-->

        <el-form-item
          label="服务电话	"
          prop="mobile"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            maxlength="50"
            show-word-limit
            placeholder="请输入服务电话	"
            v-model="dataForm.mobile"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="服务时间	"
          prop="serviceTimeStr"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            maxlength="50"
            show-word-limit
            placeholder="请输入服务时间	"
            v-model="dataForm.serviceTimeStr"
          >
          </el-input>
          <!--          <el-date-picker
              v-model="dataForm.serviceTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>-->
        </el-form-item>

        <el-form-item
          label="绑定管理员"
          prop="adminStaffId"
          label-width="150px"
          style="display: block"
        >
          <el-select
            class="item_width_1"
            v-model="dataForm.adminStaffId"
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              v-for="item in staffList"
              :key="item.staffId"
              :label="item.staffName"
              :value="item.staffId"
            >
            </el-option>
          </el-select>
        </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>
    </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 {
      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
      btnLoading: false,
      uploading: false,
      disabled: false,
      customerId: "",
      formType: "add", //表单操作类型 add新增，edit编辑，detail详情

      agencyId: "",

      staffList: [],

      btnDisable: false,

      societyId: "",
      dataForm: {
        societyName: "",
        serviceMatters: "",
        personInCharge: "",
        mobile: "",
        serviceStartTime: "",
        serviceEndTime: "",
        serviceTimeStr: "",
        serviceTime: ["", ""],
        adminStaffId: "",
        address: "",
        longitude: "",
        latitude: "",
        imageList: [],
      },
    };
  },
  components: {},
  computed: {
    dataRule() {
      return {
        societyName: [
          { required: true, message: "组织名称	不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "组织名称	长度在 1 到 50个字符",
            trigger: "blur",
          },
        ],
        imageList: [
          { required: true, message: "头像不能为空", trigger: "blur" },
        ],
        serviceMatters: [
          { required: true, message: "服务内容不能为空", trigger: "blur" },
        ],
        /*personInCharge: [
          {required: true, message: "负责人姓名不能为空", trigger: "blur"},
        ],*/
        /*adminStaffId: [
          { required: true, message: "绑定管理员不能为空", trigger: "blur" },
        ],*/
        mobile: [
          { required: true, message: "服务电话不能为空", trigger: "blur" },
        ],
        serviceTimeStr: [
          { required: true, message: "服务时间不能为空", trigger: "blur" },
        ],
        /*longitude: [
          { required: true, message: "位置坐标不能为空", trigger: "blur" },
        ],*/
      };
    },
  },
  props: {},
  watch: {
    "dataForm.serviceTime": function (val) {
      if (Array.isArray(val) && val.length == 2) {
        this.dataForm.serviceStartTime = val[0];
        this.dataForm.serviceEndTime = val[1];
      }
    },
  },

  async mounted() {
    //this.initMap();

    await this.loadAgency();
    this.loadStaff();
  },

  methods: {
    // 地图初始化函数，本例取名为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: 16.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
        .searchNearby({
          keyword: this.dataForm.address,
          radius: 1000,
          autoExtend: true,
          center: map.getCenter(),
        })
        .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("未检索到相关位置坐标");
          }
        });
    },
    beforeImgUpload(file) {
      const isPNG = file.type === "image/png" || file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 10;

      if (!isPNG) {
        this.$message.error("上传图片只能是 PNG 或 JPEG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isPNG && isLt1M;
    },
    handleProgress(event, file, fileList) {
      this.uploading = true;
      this.unloadPencent = Number(file.percentage.toFixed(0));
    },
    handleImgSuccess(res, file) {
      if (res.code === 0 && res.msg === "success") {
        this.uploading = false;
        this.unloadPencent = 0;
        this.dataForm.imageList.push(res.data.url);
      } else {
        this.$message.error(res.msg);
      }
    },
    handleDelimg(item, index) {
      this.dataForm.imageList.splice(index, 1);
    },
    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;
      this.dataForm.imageList = [];
      if (row) {
        this.dataForm = { ...this.dataForm, ...row };
        if (row.imgUrl) {
          this.dataForm.imageList.push(row.imgUrl);
        }
        this.societyId = this.dataForm.societyId;
        if (row.latitude && row.longitude) {
          map.setCenter(new TMap.LatLng(row.latitude, row.longitude));
        }
      }
    },

    //加载组织
    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);
      }
    },
    //加载网格
    async loadStaff() {
      const url = "/data/aggregator/org/currentOrgStafflist";

      let params = {
        orgId: this.agencyId,
        orgType: "agency",
        pageNo: 1,
        pageSize: 100000,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.staffList = data.staffList.map((item) => {
          return {
            staffId: item.staffId,
            staffName: item.name + "（" + item.mobile + "）",
          };
        });
      } else {
        this.$message.error(msg);
      }
    },

    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 = "/heart/societyorg/add";
        // url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
      } else {
        url = "/heart/societyorg/edit";

        this.dataForm.societyId = this.societyId;
      }

      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.societyId = ""; //小区ID
      this.$refs.ref_form.resetFields();
      this.propertyFormShow = false;
      /*
      this.dataForm = {
        societyName: "",
        serviceMatters: "",
        personInCharge: "",
        mobile: "",
        serviceStartTime: "",
        serviceEndTime: "",
        serviceTime: ["", ""],
        adminStaffId: "",
        address: "",
        longitude: "",
        latitude: "",
        imageList:[]
      };*/
    },
    // 开启加载动画
    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;
}

.avatar-uploader {
  ::v-deep .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-upload:hover {
    border-color: #409eff;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
</style>