更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 h5/pages/staff/visitorReport.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,718 @@
<template>
  <view class="visit">
    <view class="list">
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>被访人姓名</text>
        </view>
        <!-- <view class="list_item_content" @click="showName = true"> -->
        <view class="list_item_content">
          <text :style="{ color: form1.receptMemberName ? '#000000' : '' }">{{
            form1.receptMemberName
              ? form1.receptMemberName + " " + form1.receptCompanyName
              : "请选择"
          }}</text>
          <!-- <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon> -->
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>入园时间</text>
        </view>
        <view class="list_item_content" @click="show4 = true">
          <text :style="{ color: form1.starttime ? '#000000' : '' }">{{
            form1.starttime ? form1.starttime : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>离园时间</text>
        </view>
        <view class="list_item_content" @click="openLC">
          <text :style="{ color: form1.endtime ? '#000000' : '' }">{{
            form1.endtime ? form1.endtime : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <div class="empty"></div>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>联系人</text>
        </view>
        <view class="list_item_content"
          ><input
            type="text"
            v-model="form1.name"
            placeholder="请输入联系人姓名"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>手机号</text>
        </view>
        <view class="list_item_content">
          <input
            type="number"
            maxlength="13"
            v-model="form1.phone"
            :placeholder="'请输入联系人手机号'"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>来访单位</text>
        </view>
        <view class="list_item_content"
          ><input
            type="text"
            v-model="form1.companyName"
            placeholder="请输入来访单位的全称"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>入园车辆</text>
        </view>
        <view class="list_item_content" @click="openInput(1)">
          <text :style="{ color: form1.carNos ? '#000000' : '' }">{{
            form1.carNos ? form1.carNos : "请输入车牌号码"
          }}</text>
          <!-- <input type="text" placeholder="请输入车牌号" v-model="form1.carNos" maxlength="8" placeholder-style="color: #999999;" /> -->
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>随车人数</text>
        </view>
        <view class="list_item_content"
          ><input
            type="number"
            v-model="form1.memberNum"
            placeholder="请输入随车人员总数"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="list_item" @click="isShowReason = true">
        <view class="list_item_label">
          <text>*</text>
          <text>来访事由</text>
        </view>
            <view class="list_item_content">
              <text
                class="mr6"
                :style="{ color: form1.reason ? '#000000' : '#999999' }"
                >{{ form1.reason ? form1.reason : "请选择" }}</text
              >
              <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
        <!-- <view class="list_item_content"
          ><input
            type="text"
            v-model="form1.reason"
            placeholder="请输入来访事由"
            placeholder-style="color: #999999;"
        /></view> -->
      </view>
    </view>
    <view class="zw"></view>
    <view class="footer"
      ><view class="footer_btn" @click="submit">提交</view></view
    >
    <!-- å…¥å›­æ—¶é—´ -->
    <u-datetime-picker
      :show="show4"
      :minDate="new Date().getTime()"
      mode="datetime"
         :formatter="formatter"
      @cancel="show4 = false"
      @confirm="setinDate"
    ></u-datetime-picker>
    <!-- ç¦»å›­æ—¶é—´ -->
    <u-datetime-picker
      v-if="form1.starttime"
      :show="show5"
         :formatter="formatter"
      :minDate="formatTimeStamp(form1.starttime)"
      :maxDate="formatTimeStamp(maxTime)"
      mode="datetime"
      @cancel="show5 = false"
      @confirm="setoutDate"
    ></u-datetime-picker>
    <!-- è½¦è¾† -->
    <u-popup
      :show="show2"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show2 = false"
    >
      <view class="addcar">
        <view class="addcar_head">添加车辆</view>
        <view class="addcar_ipt"
          ><input type="text" v-model="carName" placeholder="请输入车牌号"
        /></view>
        <view class="addcar_footer">
          <view class="addcar_footer_item" @click="show2 = false">取消</view>
          <view class="addcar_footer_item t" @click="submitCart">提交</view>
        </view>
      </view>
    </u-popup>
      <!-- æ¥è®¿æ˜¯ç”± -->
      <u-picker
        keyName="title"
        :show="isShowReason"
        closeOnClickOverlay
        :columns="reasonList"
        @confirm="reasonSel"
        @close="isShowReason = false"
        @cancel="isShowReason = false"
      ></u-picker>
		
    <u-picker
      keyName="name"
      :show="showName"
      closeOnClickOverlay
      :columns="memberList"
      @confirm="seleteName"
      @cancel="showName = false"
      @close="showName = false"
    ></u-picker>
    <!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->
    <keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
    <qf-image-cropper
      ref="cropper"
      :width="280"
      :height="280"
      :radius="30"
      @crop="uploadImg"
    ></qf-image-cropper>
  </view>
</template>

<script>
import tlyPictureCut from '@/components/tly-picture-cut/tlyPictureCut.vue'
import keyboardInput from '@/components/keyboard-input/keyboard-input.vue'
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue'
import { getDaysAfterDate } from '@/utils/utils.js'
import { createVisit, getVisitedMember, getVisitReason } from '@/api'
export default {
  data() {
    return {
      photoSrc: '',
      type: '',
      inputType: '',
      show1: false,
      show2: false,
      show4: false,
      show5: false,
      show7: false,
      isShowReason: false,
      showName: false,
      fileList: [],
         reasonList: [],
      memberList: [[{ name: '身份证', id: 0 }, { name: '港澳证件', id: 1 }, { name: '护照', id: 2 }]],
      columnsNames: [[{ name: '张三', id: 0 }, { name: '张三', id: 1 }, { name: '张三', id: 2 }]],
      columns: [],
      cars: [],
      day: null,
      maxTime: '',
      carName: '',
      personnel: [],
      userAnswerId: '',
      form1: {
        receptMemberId: '',
        receptMemberName: '',
        starttime: '',
        endtime: '',
        reason: '',
        carNos: ''
      },
      visit: '',
      form: {},
      accessControl: '',
      verify: ''
    }
  },
  components: { tlyPictureCut, keyboardInput, QfImageCropper },
  onLoad(options) {
    if (options.data) {
      this.form = JSON.parse(options.data)
    }
    this.getUser()
    const userInfo = uni.getStorageSync('userInfo') || {}
    this.$set(this.form1, 'receptMemberName', userInfo.realname)
    this.$set(this.form1, 'receptMemberId', userInfo.id || '')
    this.$set(this.form1, 'receptCompanyName', userInfo.company.name || '')
    // this.getvisit()
    // this.getVisit1()
    // this.getUserValid()
  },
  methods: {
      formatter(type, value) {
         if (type === 'year') {
            return `${value}å¹´`
         }
         if (type === 'month') {
            return `${value}月`
         }
         if (type === 'day') {
            return `${value}日`
         }
         if (type === 'hour') {
            return `${value}时`
         }
         if (type === 'minute') {
            return `${value}分`
         }
         return value
      },
    openInput(type) {
      this.inputType = type
      this.$refs.keyboard.open()
    },
    setPlate(e) {
      if (this.inputType === 1) {
        this.form1.carNos = e
      } else if (this.inputType === 2) {
        this.withUserList.carNos = e
      }
      this.$forceUpdate()
      this.closeInput()
    },
    seleteName(e) {
      this.$set(this.form1, 'receptMemberName', e.value[0].name)
      this.$set(this.form1, 'receptMemberId', e.value[0].id)
      this.$set(this.form1, 'receptCompanyName', e.value[0].companyName)
      this.showName = false
    },
      reasonSel(e) {
         console.log('e',e);
         this.$set(this.form1, 'reason', e.value[0].title)
         this.isShowReason = false
      },
    getUser() {
      getVisitedMember().then(res => {
        this.memberList = [res.data || []]
      })
         getVisitReason().then(res => {
            this.reasonList = [res.data || []]
         })
    },
    closeInput() {
      this.$refs.keyboard.close()
    },
    submit() {
      const { form1 } = this
      if (!this.form1.receptMemberId)
        return uni.showToast({
          title: '请选择有效的被访人',
          icon: 'none'
        })
      if (!this.form1.starttime)
        return uni.showToast({
          title: '入园时间不能为空',
          icon: 'none'
        })
      if (!this.form1.endtime)
        return uni.showToast({
          title: '离园时间不能为空',
          icon: 'none'
        })
      if (!this.form1.name) return uni.showToast({
        title: '联系人不能为空',
        icon: 'none'
      })
      if (!this.form1.phone) return uni.showToast({
        title: '手机号不能为空',
        icon: 'none'
      })
      var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
        var result = re.test(this.form1.phone);
      if (!result) return uni.showToast({
        title: '手机号格式不正确',
        icon: 'none'
      }) 
      if (!this.form1.companyName) return uni.showToast({
        title: '来访单位不能为空',
        icon: 'none'
      })
      if (!this.form1.carNos) return uni.showToast({
        title: '入园车辆不能为空',
        icon: 'none'
      })
      if (!this.form1.memberNum) return uni.showToast({
        title: '随车人数不能为空',
        icon: 'none'
      })
      if (!this.form1.reason) return uni.showToast({
        title: '拜访事由不能为空',
        icon: 'none'
      })
      // this.form1.starttime = this.form1.starttime + ':00'
      // this.form1.endtime = this.form1.endtime + ':00'
      let data = JSON.parse(JSON.stringify(this.form1))
      data.starttime = data.starttime + ':00'
      data.endtime = data.endtime + ':00'
      createVisit({
        ...data,
        type: '2',
        openid: this.$store.state.openId
      })
        .then(res => {
          if (res.code === 200) {
            setTimeout(() => {
              uni.showToast({
                title: '提交成功',
                icon: 'success'
              })
            })
            uni.reLaunch({
              url: `/pages/staff/index`
            })
          }
        })
    },
    deleUser(i) {
      this.personnel.splice(i, 1)
    },
    getVisit1() {
      // æ˜¯å¦éœ€è¦ç­”题
      this.$u.api
        .getSystemDictData({
          dictCode: 'SYSTEM',
          label: 'HEALTH_CARD'
        })
        .then(res => {
          if (res.code === 200) {
            this.visit = res.data.code
          }
        })
      // èµ·å§‹æ—¶é—´æ—¶é•¿
      this.$u.api
        .getSystemDictData({
          dictCode: 'VISIT_CONFIG',
          label: 'VALIDATE_VISIT'
        })
        .then(res => {
          if (res.code === 200) {
            this.day = Number(res.data.code)
            // console.log(nextDay('after', true, this.day))
          }
        })
    },
    submitCart() {
      if (!this.carName)
        return uni.showToast({
          title: '请输入车牌号码',
          icon: 'none'
        })
      this.cars.push(this.carName)
      this.form1.carNos = this.cars.join(',')
      this.carName = ''
      this.show2 = false
    },
    deleCars(i) {
      this.cars.splice(i, 1)
      this.form1.carNos = this.cars.join(',')
    },
    seleMJ(i) {
      this.columns.forEach((item, index) => {
        if (index === i) {
          item.active = !item.active
        }
      })
    },
    openLC() {
      if (!this.form1.starttime)
        return uni.showToast({
          title: '请先选择入园时间',
          icon: 'none'
        })
      this.show5 = true
    },
    setinDate(e) {
      this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
      // this.maxTime = getDaysAfterDate(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM'), this.day)
      this.maxTime = this.form1.starttime.slice(0, 11) + '23:59'
      this.form1.endtime = ''
      this.show4 = false
    },
    setoutDate(e) {
      this.form1.endtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
      this.show5 = false
    },
    formatTimeStamp(date) {
      return Date.parse(new Date(`${date}`)) || Date.parse(new Date(`${date.replace(/-/g, '/')}`))
    },
    // è¢«æ‹œè®¿äººä¿¡æ¯æ ¡éªŒæ–¹å¼ï¼ˆ0手机号单独校验 1手机号和姓名组合校验）
    getUserValid() {
      this.$u.api
        .getSystemDictData({
          dictCode: 'SYSTEM',
          label: 'BEVISITED_USER_VALID'
        })
        .then(res => {
          if (res.code === 200) {
            this.verify = res.data.code
          }
        })
    },
    // èŽ·å–是否需要选择门禁/门禁列表
    getvisit() {
      this.$u.api
        .getSystemDictData({
          dictCode: 'SYSTEM',
          label: 'SELECT_DOORS_VISIT_REQUIRED'
        })
        .then(res => {
          if (res.code === 200) {
            this.accessControl = res.data.code
            if (res.data.code === '1') {
              this.$u.api.deviceRoleList({ type: 1 }).then(device => {
                if (device.code === 200) {
                  if (device.data.length > 0) {
                    device.data.forEach(item => {
                      item.active = false
                    })
                    this.columns = device.data
                  }
                }
              })
            }
          }
        })
    }
  }
};
</script>
<style lang="scss">
page {
  background-color: #f7f7f7 !important;
}
.u-upload__button {
  margin: 0 !important;
}
</style>
<style lang="scss" scoped>
.visit {
  width: 100%;
  padding-top: 10rpx 0;
  .menjin {
    width: 100%;
    .respondent-title {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 600;
      color: #222222;
    }
    .list {
      width: 100%;
      height: 400rpx;
      display: flex;
      flex-direction: column;
      .list_item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          font-size: 28rpx;
          color: #000000;
        }
        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
    .menjin_footer {
      width: 100%;
      padding: 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .menjin_footer_item {
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        background-color: #025eef;
        color: #ffffff;
        font-size: 26rpx;
        margin-left: 30rpx;
        &:first-child {
          margin-left: 0 !important;
        }
      }
    }
  }

  .addcar {
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    .addcar_head {
      text-align: center;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #222222;
    }
    .addcar_ipt {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      background: #f7f7f7;
      border-radius: 50rpx;
      margin-top: 60rpx;
      input {
        width: 100%;
        height: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #000000;
        text-align: center;
      }
    }
    .addcar_footer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 60rpx;
      .t {
        background: #025eef !important;
        color: #ffffff !important;
      }
      .addcar_footer_item {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #025eef;
        text-align: center;
        border-radius: 44rpx;
        border: 1rpx solid #025eef;
        margin-right: 18rpx;
        &:last-child {
          margin-right: 0 !important;
        }
      }
    }
  }
  .list {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    .empty {
      width: 750rpx;
      height: 20rpx;
      background-color: #f7f7f7;
      margin: 0 -30rpx;
    }
    .list_item {
      width: 100%;
      // min-height: 98rpx;
      padding: 30rpx 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #e5e5e5;

      .list_item_label {
        flex-shrink: 0;
        display: flex;
        align-items: center;

        text {
          &:nth-child(2) {
            font-size: 30rpx;
            font-weight: 400;
            color: #222222;
          }

          &:nth-child(1) {
            font-size: 30rpx;
            font-weight: 400;
            color: #e42d2d;
          }
        }
      }

      .list_item_content {
        flex: 1;
        height: 100%;
        margin-left: 30rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          margin-right: 6rpx;
        }

        input {
          width: 100%;
          height: 100%;
          text-align: right;
          font-size: 28rpx;
          font-weight: 400;
          color: #222222;
        }
      }
    }
  }

  .zw {
    width: 100%;
    height: calc(env(safe-area-inset-bottom) + 118rpx);
  }

  .footer {
    width: 100%;
    padding: 0 30rpx;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
      margin-top: 80rpx;
    .footer_btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: $uni-color-primary;
      border-radius: 44rpx;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>