storevisit-ui-mobile/src/views/deviceWithin/abnormalVisit.vue

<template>
  <div>
    <!--        顶部条-->
    <van-nav-bar class="navBar" title="异常拜访" left-arrow @click-left="onClickLeft">
      <template #right>
        <span @click="onstopVisit" class="navRightBtnTop">取消拜访</span>
      </template>
    </van-nav-bar>
    <!--        主体内容-->
    <div class="container">
      <div class="lineGrey"></div>
      <van-form class="bgWhite">
        <div class="formLabel">
          <van-cell>
            <template #title> <span class="van-f-red">*</span>异常信息照 </template>
            <template #right-icon>
              <upload-img
                :uploadid="uploadid2"
                :imgArr="imgs"
                @newimgarr="newimgarr1"
                :visitModel="visitModel"
                :visitsId="visitId"
                :taskId="rdId"></upload-img>
            </template>
          </van-cell>
          <div style="padding: 10px 10px 0" v-if="imgs.length > 0">
            <delete-upload-img :imgs="imgs" @delimg="newimgarr1"></delete-upload-img>
          </div>
        </div>
        <div class="formLabel">
          <van-cell>
            <template #title> <span class="van-f-red">*</span>异常事由 </template>
          </van-cell>
          <van-radio-group v-model="abnormalReason" class="z-checkbox">
            <van-radio :name="item.dictValue" v-for="(item, index) in typeList" :key="index">{{
              item.dictLabel
            }}</van-radio>
          </van-radio-group>
        </div>
        <div class="formLabel" style="padding-bottom: 20px">
          <van-cell>
            <van-cell>
              <template #title> <span class="van-f-red">*</span>信息备注 </template>
            </van-cell>
          </van-cell>
          <van-field
            v-model="remark"
            rows="3"
            autosize
            maxlength="260"
            show-word-limit
            label=""
            :formatter="formatter"
            type="textarea"
            placeholder="请填写信息异常信息" />
        </div>
      </van-form>
      <div class="formLabel" style="margin: 20px 16px">
        <van-button
          block
          type="info"
          size="normal"
          style="background-color: #0057ba"
          @click="endVisitsFn"
          >提交</van-button
        >
      </div>
    </div>
    <div id="allmap"></div>
  </div>
</template>

<script>
// import uploadImg from "@/components/uploadImg";
import uploadImg from '@/components/uploadVvisit';
import deleteUploadImg from '@/components/deleteUploadImg1';
import { addVisits, getVisitsDetail, endVisits, getPhotoTypeList1, stopVisit } from '@/api/index';

export default {
  name: 'abnormalVisit',
  components: { uploadImg, deleteUploadImg },
  data() {
    return {
      flag: false,
      cont: 0,
      checkboxGroup: [],
      PhotoTypeList: [],
      radio: '',
      typeList: '',
      imgs: [],
      abnormalReason: '',
      uploadid2: 'uploadid2',
      remark: '',
      lat: '',
      lon: '',
      storeCode: '',
      dialogms: true,
      visitModel: '',
    };
  },
  created() {
    this.getPhotoTypeList();
    this.urlParameter = this.$route.query;
    this.storeId = this.$route.query.storeId + '';
    this.visitId = this.$route.query.visitId;
    this.rdId = this.$route.query.rdId + '';
    this.storeCode = this.$route.query.storeCode;
    this.lat = this.$route.query.lat + '';
    this.lon = this.$route.query.lon + '';
    this.visitModel = this.$route.query.visitModel + '';
    this.imgs = [];
    this.remark = '';
    this.abnormalReason = '';
  },
  watch: {
    $route(to, from) {
      if (from.path == '/deviceWithin/index' && to.path == '/abnormalVisit') {
        this.urlParameter = this.$route.query;
        this.storeId = this.$route.query.storeId + '';
        this.visitId = this.$route.query.visitId;
        this.rdId = this.$route.query.rdId + '';
        this.storeCode = this.$route.query.storeCode;
        this.lat = this.$route.query.lat + '';
        this.lon = this.$route.query.lon + '';
        this.visitModel = this.$route.query.visitModel + '';
        this.imgs = [];
        this.remark = '';
        this.abnormalReason = '';
      }
      if (from.path == '/abnormalVisit' && to.path == '/deviceWithin/index') {
        localStorage.removeItem('visitId');
      }
    },
  },
  activated() {
    this.imgs = [];
    this.remark = '';
    this.abnormalReason = '';
    this.visitModel = this.$route.query.visitModel + '';
    if (this.$route.query.type == 'edit') {
      this.visitId = this.$route.query.visitId + '';
      localStorage.setItem('visitId', this.$route.query.visitId);
      this.getVisitsDetailFn();
    } else {
      this.addVisits();
    }
  },
  methods: {
    // 结束拜访
    onstopVisit() {
      this.$dialog
        .confirm({
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          title: '系统提示',
          message: '取消拜访会清空填写的拜访内容和照片，是否确认？',
        })
        .then(() => {
          stopVisit({ visitsId: this.visitId }).then((res) => {
            if (res.code == 200) {
              this.$dialog
                .alert({
                  title: '系统提示',
                  message: '拜访中任务结束成功！',
                })
                .then(() => {
                  window.location.replace(window.location.origin + '/mobile/deviceWithin/index');
                });
            } else {
              this.$toast(res.msg);
            }
          });
        });
    },
    formatter(value) {
      return value.replace(
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
        ''
      );
    },
    getVisitsDetailFn() {
      getVisitsDetail({ visitsId: this.$route.query.visitId }).then((res) => {
        if (res.code == 200) {
          this.list = res.data;
          this.abnormalReason = res.data.abnormalReason + '';
          this.remark = res.data.remark;
          if (res.data.visitSource == 2) {
            this.imgs = res.data.sysFileInfos;
          }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getPhotoTypeList() {
      getPhotoTypeList1({}).then((res) => {
        this.typeList = res.data;
      });
    },
    newimgarr1(val) {
      this.imgs.push(val);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    addVisits() {
      var that = this;
      var map = new TMap.Map('allmap', {
        zoom: 14,
        center: new TMap.LatLng(39.986785, 116.301012),
      });
      var geocoder = new TMap.service.Geocoder();
      var markers = new TMap.MultiMarker({ map: map, geometries: [] });
      markers.setGeometries([]);
      var input = [that.urlParameter.marklat, that.urlParameter.marklon];
      var location = new TMap.LatLng(Number(input[0]), Number(input[1]));
      map.setCenter(location);
      markers.updateGeometries([{ id: 'main', position: location }]);
      geocoder.getAddress({ location: location }).then(
        function (result) {
          var addresses = result.result.formatted_addresses;
          var params = {
            storeId: that.storeId,
            storeCode: that.storeCode,
            visitSource: '2',
            visitEntry: '0',
            lat: that.lat,
            lon: that.lon,
            visitModel: that.$route.query.visitModel,
            routeDetailsId: that.rdId,
            locationCity: '',
            locationRemark: addresses.recommend,
            locationAccuracy: that.urlParameter.PointSum,
          };
          localStorage.setItem('address', '');
          if (that.visitId != null) {
            params.id = that.visitId;
          }
          addVisits(params).then((res) => {
            if (res.code == 200) {
              localStorage.setItem('visitId', res.data);
              that.visitId = res.data;
            } else {
              this.$toast(res.msg);
            }
          });
        },
        function (err) {
          var params = {
            storeId: that.storeId,
            storeCode: that.storeCode,
            visitSource: '2',
            visitEntry: '0',
            lat: that.urlParameter.lat,
            lon: that.urlParameter.lon,
            visitModel: that.$route.query.visitModel,
            routeDetailsId: that.rdId,
            locationCity: '',
            locationRemark: '',
            locationAccuracy: that.urlParameter.PointSum,
          };
          localStorage.setItem('address', '');
          if (that.visitId != null) {
            params.id = that.visitId;
          }
          addVisits(params).then((res) => {
            if (res.code == 200) {
              localStorage.setItem('visitId', res.data);
              that.visitId = res.data;
            } else {
              this.$toast(res.msg);
            }
          });
        }
      );
    },
    endVisitsFn() {
      var insert = '';
      if (this.$route.query.type == 'edit') {
        insert = false;
      } else {
        insert = true;
      }
      if (this.imgs.length == 0) {
        this.$toast('请上传图片');
        return;
      } else if (this.abnormalReason == '') {
        this.$toast('请选择事由');
        return;
      } else if (this.remark.trim() == '') {
        this.$toast('请填写异常内容');
        return;
      } else {
        let dwellTime = this.weekend(localStorage.getItem('startTime'), new Date());
        endVisits({
          visitSource: '2',
          dwellTime: dwellTime,
          remark: this.remark,
          visitType: '0',
          insert: insert,
          abnormalReason: this.abnormalReason,
          id: this.visitId,
          storeCode: this.storeCode,
          visitModel: this.$route.query.visitModel,
        }).then((res) => {
          if (res.code == 200) {
            this.$dialog
              .alert({
                title: '系统提示',
                message: '保存成功',
              })
              .then(() => {
                if (insert) {
                  window.location.replace(window.location.origin + '/mobile/deviceWithin/index');
                } else {
                  this.$router.go(-1);
                }
              });
            localStorage.removeItem('visitId');
            localStorage.removeItem('startTime');
          } else {
            this.$toast.fail(res.msg);
          }
        });
      }
    },
    weekend(time1) {
      var arrtime1 = new Date(time1).getTime();
      var arrtime2 = new Date().getTime();
      return Math.round((arrtime2 - arrtime1) / 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding-bottom: 50px;
}
.van-f-red {
  color: red;
  width: 4px;
  display: inline-block;
}
.formLabel {
  margin: 0 16px;
  border-bottom: 1px solid #f1f1f1;
}
.formLabel .van-cell {
  padding: 10px 0;
}
.z-checkbox .van-radio {
  padding: 6px 0;
}
</style>
<style>
.bgWhite {
  background-color: white;
}
.formLabel .van-field {
  border: 1px solid #f1f1f1;
  padding: 10px;
  width: 100%;
  background-color: #f1f1f1;
}
.formLabel .van-field__control {
  padding: 0 10px;
}
.lineGrey {
  height: 10px;
  width: 100%;
  background: #f1f1f1;
}
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}
.navRightBtnTop {
  color: white;
  background: #74a4d9;
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
}
#allmap {
  width: 20px;
  height: 20px;
  left: -1000px;
  position: relative;
}
</style>