EmploymentSite/h5app/src/views/pages/work/signin/index.vue

<template>
  <ion-page class="list-page">
    <ion-header class="header-theme2 header-theme3">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline()" @click="onBack"></ion-icon>
        </ion-buttons>
        <ion-title>外出走访签到</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-item class="search-item">
        当前时间：{{ dayjs(new Date()).format("YYYY-MM-DD HH:mm") }}
      </ion-item>
      <div id='signInMap' style=' width: 100%; height: 200px; z-index: 100'></div>
      <div class="bw-vue-form">
        <div class="form-select">
          <ion-label>外出类型<span class="danger">*</span></ion-label>
          <ion-select interface="action-sheet" placeholder="请选择外出类型" cancel-text="取消"
                      id="signinType" v-model="dataModel.signinType" @change="signinTypeChange()">
            <ion-select-option v-for="(record,key) in signinTypeList" :key="key"
                               v-model:value="record.value">
              {{ record.name }}
            </ion-select-option>
          </ion-select>
        </div>
        <div class="form-select" v-if="dataModel.signinType===1">
          <ion-label>走访企业<span class="danger">*</span></ion-label>
          <company-select ref="refCompanySelect" @resultInfo="onCompanySelect"></company-select>
        </div>
        <div class="form-select" v-if="dataModel.signinType===2">
          <ion-label>走访人员<span class="danger">*</span></ion-label>
          <job-user-select ref="refJobuserSelect" @resultInfo="onJobUserSelect"></job-user-select>
        </div>
        <div class="form-input">
          <ion-label>服务内容</ion-label>
          <ion-textarea v-model="dataModel.content" rows="5" cols="20" placeholder="请填写服务内容"></ion-textarea>
        </div>
        <div class="form-input">
          <ion-label>照片</ion-label>
          <b-image :file-ref-id="dataModel.signinId" :readonly="false" :is-single="false"></b-image>
        </div>
      </div>
      <div class="btn-box">
        <ion-button @click="onSave">确定签到</ion-button>
      </div>
    </ion-content>

  </ion-page>
</template>
<script>
import {defineComponent, reactive, ref, toRefs} from "vue";
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import {useUserStore} from "../../../../store/modules/user";
import dayjs from 'dayjs';
import {getPosition} from "@/utils/position";
import thIcon from "@/assets/icon/th.jpg"
import {arrowBackOutline} from "ionicons/icons";
import {useRouter} from "vue-router";
import {saveSignin} from "@/api/position";
import CompanySelect from "@/components/companySelect.vue";
import JobUserSelect from "@/components/jobUserSelect.vue";
import {getSysDictionaryList} from "../../../../api/system/dictionary";
import {v4 as uuidv4} from 'uuid';
import BImage from "@/components/bImage.vue";

const presentAlert = async (header, message) => {
  const alert = await alertController.create({
    header: header,
    message: message,
    buttons: [
      '确定'
    ],
  });

  await alert.present();
}

export default defineComponent({
  name: 'signInMap',
  components: {CompanySelect, JobUserSelect, BImage},
  methods: {
    arrowBackOutline() {
      return arrowBackOutline
    }, dayjs
  },
  setup() {
    const router = useRouter()
    const userStore = useUserStore();
    const userInfo = ref(userStore.getUserInfo);
    const position = reactive({
      longitude: null,
      latitude: null
    });
    const T = window.T;
    const zoom = 14;
    let map = null;
    let label = null;
    let marker = null;
    const refCompanySelect = ref();
    const refJobuserSelect = ref();
    const formState = reactive({
      dataModel: {
        signinId: null,
        signinType: null,
        companyID: null,
        companyName: '',
        jobuserID: null,
        longitude: null,
        latitude: null,
        content: '',
        createUserID: userInfo.value.userID
      }
    });
    const signinTypeList = ref([]);

    const getSigninTypeList = async function () {
      const signinTypeListResult = await getSysDictionaryList("SigninType");
      signinTypeList.value = signinTypeListResult;
    }

    const setMarker = () => {
      // 删除点
      if (marker != null) {
        map.removeOverLay(marker);
      }
      //设置显示地图的中心点和级别
      map.centerAndZoom(new T.LngLat(114.40, 23.08), zoom);

      // 获取定位
      getPosition().then((data) => {
        if (data.longitude && data.latitude) {
          position.longitude = data.longitude;
          position.latitude = data.latitude;

          // 设置中心点
          map.centerAndZoom(new T.LngLat(position.longitude, position.latitude), zoom);
          const icon = new T.Icon({
            iconUrl: thIcon,
            iconSize: new T.Point(30, 30),
            iconAnchor: new T.Point(10, 56)
          })
          label = new T.Label({
            text: userInfo.value.siteUserName, //文本标注的内容
            position: new T.LngLat(position.longitude, position.latitude), //文本标注的地理位置
            offset: new T.Point(-40, 20) //文本标注的位置偏移值
          })
          const point = new T.LngLat(position.longitude, position.latitude, {
            icon: icon
          })
          // 创建标注
          marker = new T.Marker(point);
          //向地图上标记
          map.addOverLay(label);
          map.addOverLay(marker);
        }
      })
    }

    const initMap = () => {
      //初始化地图对象
      map = new T.Map("signInMap");

      setMarker();
    }

    function onBack() {
      router.go(-1)
    }

    // 保存
    function onSave() {
      if(!(position.latitude && position.longitude)){
        presentAlert('提示', '获取位置信息失败');
        return false;
      }

      if (!formState.dataModel.signinType) {
        presentAlert('提示', '请选择打卡类型');
        return false;
      }

      if (formState.dataModel.signinType === 1 && !formState.dataModel.companyID) {
        presentAlert('提示', '请选择走访企业');
        return false;
      }

      if (formState.dataModel.signinType === 2 && !formState.dataModel.jobuserID) {
        presentAlert('提示', '请选择走访人员');
        return false;
      }

      formState.dataModel.latitude = position.latitude;
      formState.dataModel.longitude = position.longitude;
      // 发送请求
      saveSignin(formState.dataModel).then(() => {
        onBack();
        presentAlert('提示', '签到成功');
      });
    }

    const onCompanySelect = (data) => {
      formState.dataModel.companyID = data.value;
    };

    const onJobUserSelect = (data) => {
      formState.dataModel.jobuserID = data.value;
    };

    const signinTypeChange = () => {
      formState.dataModel.companyID = '';
      formState.dataModel.jobuserID = '';
    };

    const resetData = function () {
      formState.dataModel.signinId = uuidv4();
      formState.dataModel.companyID = null;
      formState.dataModel.jobuserID = '';
      formState.dataModel.signinType = null;
      formState.dataModel.longitude = null;
      formState.dataModel.latitude = null;
      formState.dataModel.content = '';
    };

    onIonViewDidEnter(() => {
      resetData();

      initMap();

      getSigninTypeList();
    });

    return {
      ...toRefs(formState),
      refCompanySelect,
      refJobuserSelect,
      signinTypeList,
      onBack,
      onSave,
      onCompanySelect,
      onJobUserSelect,
      getSigninTypeList,
      signinTypeChange
    }
  }
});
</script>

<style lang="less">
.btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px;
}
</style>