更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 h5/pages/staff/vehicle/apply.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,328 @@
<template>
  <view class="main_app">
    <view class="main_wrap">
      <!--  -->
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>预计用车时段</text>
        </view>
        <view class="value" @click="goBack">
          <text class="mr6" :style="{ color: param.startTime ? '#000000' : '#999999' }">
            <text v-if="param.startTime">
              {{ param.startTime.slice(5, 16) }}至{{
                param.endTime.slice(5, 16)
              }}
            </text>
            <text v-else>请选择</text>
          </text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>申请车辆</text>
        </view>
        <view class="value" @click="goBack">
          <input type="text" disabled placeholder="请输入申请车辆" v-model="param.carCode"
            placeholder-style="color: #999999;" />
        </view>
      </view>
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>预计出发时间</text>
        </view>
        <view class="value" @click="isShowDatetime = true">
          <text class="mr6" :style="{ color: param.planUseDate ? '#000000' : '#999999' }">{{ param.planUseDate ?
            param.planUseDate : "请选择" }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="empty"></view>
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>目的地类别</text>
        </view>
        <view class="value">
          <text>{{ param.type == "1" ? "市外" : "市内" }}</text>
        </view>
      </view>
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>目的地</text>
        </view>
        <view class="value">
          <input type="text" placeholder="请输入" v-model="param.addr" placeholder-style="color: #999999;" />
        </view>
      </view>
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>乘车人员</text>
        </view>
        <view class="value" @click="selPeople">
          <text class="mr6" :style="{
            color:
              param.memberList && param.memberList.length > 0
                ? '#000000'
                : '#999999',
          }">
            <text v-if="param.memberNames">
              <text v-for="(mem, i) in param.memberList" :key="mem.id">
                <template v-if="i < 2">
                  <text>{{ mem.realname }}</text>
                  <text v-if="i < 1 && param.memberList.length > 1">,</text>
                </template>
              </text>
              <text v-if="param.memberList.length > 2">等{{ param.memberList.length }}人</text>
            </text>
            <text v-else>请选择</text>
          </text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="upload_line">
        <view class="label">
          <text style="color: #e42d2d">*</text>
          <text>用车事由</text>
        </view>
        <view class="value">
          <textarea type="text" placeholder="请输入" :maxlength="-1" v-model="param.content"
            placeholder-style="color: #999999;" />
        </view>
      </view>
    </view>
    <view class="tip">
      <view class="title">注意事项：</view>
      <view class="line">1、公司车辆外出需办理用车申请表，经批准后方可外出（借出）。</view>
      <view class="line">2、市外用车需总经办审批。</view>
      <view class="line">3、借出车辆必须遵守交通规则，安全行驶。对于车辆发生交通意外，对当事人及第三方造成人身伤害及损失，公司可以协助处理保险公司赔偿相关事宜，但不承担任何责任和费用。</view>
      <view class="line">4、公司借给申请人用车，申请借车人为第一责任人，不允许转借给其他人使用，若要借给他人使用。责任人要承担全部责任。</view>
      <view class="sub_btn" @click="handleSub">提交</view>
    </view>
    <!--  -->
    <!-- :minDate="new Date(param.startTime).getTime()"
      :maxDate="new Date(param.endTime).getTime()" -->
    <u-datetime-picker :show="isShowDatetime" @confirm="confirmDate" :minDate="new Date(param.startTime).getTime()"
      :maxDate="new Date(param.endTime).getTime()" @cancel="isShowDatetime = false" mode="datetime"></u-datetime-picker>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import { carUseBookCraete } from '@/api'
export default {
  data() {
    return {
      param: {},
      minDate: '',
      isShowDatetime: false,
    }
  },
  mounted() {
    this.$eventBus.$on('applePeo', (res) => {
      this.$set(this.param, 'memberList', res)
      this.$set(this.param, 'memberIds', res.map(i => i.memberId).join(','))
      this.$set(this.param, 'memberNames', res.map(i => i.realname).join(','))
    })
  },
   destroyed() {
      console.log('页面销毁');
      // uni.setStorageSync('vehicleAppForm', {})
   },
  onLoad(option) {
      const param = uni.getStorageSync('vehicleAppForm') || {}
    this.param = { ...param, ...option }
      console.log(this.param);
    this.minDate = new Date().getTime()
    this.param.planUseDate = dayjs(this.param.startTime).format('YYYY-MM-DD HH:mm')
  },
  methods: {
    handleSub() {
      const { param } = this
      console.log('---', param)
      if (!param.planUseDate) return uni.showToast({
        title: '请选择预计用车时间',
        icon: 'none'
      })
      if (!param.addr) return uni.showToast({
        title: '请输入目的地',
        icon: 'none'
      })
      if (!param.memberList || param.memberList.length === 0) return uni.showToast({
        title: '请选择乘车人员',
        icon: 'none'
      })
      if (!param.content) return uni.showToast({
        title: '请输入用车事由',
        icon: 'none'
      })
      carUseBookCraete({
        ...param,
      }).then(res => {
        if (res.code === 200) {
               uni.setStorageSync('vehicleAppForm', {})
          setTimeout(() => {
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            })
          })
          uni.redirectTo({
            url: '/pages/staff/index'
          })
        }
      })
    },
    selPeople() {
      if (this.param.memberList && this.param.memberList.length > 0) {
        setTimeout(() => {
          this.$eventBus.$emit('applePeoDetail', this.param.memberList || [])
        }, 500)
      }
      this.$jump('/pages/staff/vehicle/applePeo')
    },
      goBack() {
         uni.setStorageSync('vehicleAppForm', this.param)
         this.$goBack()
      },
    confirmDate(e) {
      this.param.planUseDate = dayjs(e.value).format('YYYY-MM-DD HH:mm')
      this.isShowDatetime = false
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.main_wrap {
  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx;
    background-color: #fff;
    width: 750rpx;
    margin: 0 -30rpx;

    .label {
      font-size: 30rpx;
      font-weight: 400;

      text {
        &:nth-child(1) {
          color: #e42d2d;
          margin-right: 4rpx;
        }
      }
    }

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

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

  .upload_line {
    padding: 30rpx;
    width: 750rpx;
    margin: 0 -30rpx;
    background-color: #fff;

    textarea {
      margin-top: 12rpx;
      width: 100%;
      height: 120rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #222222;
    }

    .adduser_list_item_ipt1_upload {
      margin-top: 24rpx;
      width: 120rpx;
      height: 120rpx;
      border: 2rpx solid #e5e5e5;
      background: #f7f7f7;
      color: #666666;
      font-size: 22rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.sub_btn {
  // position: fixed;
  // bottom: 84rpx;
  // left: 30rpx;
  margin-top: 60rpx;
  width: 690rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: $uni-color-primary;
  box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
  border-radius: 44rpx;
  font-size: 30rpx;
  color: #ffffff;
}

.tip {
  background: #f7f7f7;
  padding: 30rpx 30rpx 10rpx;
  margin: 0 -30rpx;

  .title {
    line-height: 40rpx;
    margin-bottom: 22rpx;
  }

  .line {
    font-size: 26rpx;
    color: #666666;
    line-height: 36rpx;
  }
}

.main_app {
  padding-bottom: 0;
  // padding-top: 10rpx;
}

.empty {
  width: 750rpx;
  height: 20rpx;
  background-color: #f7f7f7;
  margin: 0 -30rpx;
}
</style>