Merge remote-tracking branch 'origin/master'

jiangping

2024-05-31 6be28040e74e1ff7764478174a9b5d706fe4fc39

 h5/pages/staff/vehicle/apply.vue

@@ -1,215 +1,315 @@
<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.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</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">
                  <input type="text" placeholder="请输入申请车辆" v-model="param.receptMemberName" 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.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</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>{{ 111 }}</text>
               </view>
         </view>
         <view class="line">
               <view class="label">
                  <text>*</text>
                  <text>目的地</text>
               </view>
               <view class="value">
                  <input type="text" placeholder="请输入" v-model="param.address" placeholder-style="color: #999999;" />
               </view>
         </view>
         <view class="line">
               <view class="label">
                  <text>*</text>
                  <text>乘车人员</text>
               </view>
               <view class="value"  @click="$jump('/pages/staff/memberSel')">
                  <text class="mr6" :style="{ color: param.peo ? '#000000' : '#999999' }">{{ param.peo ? param.peo : '请选择' }}</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.reson" 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>
      <view class="sub_btn" @click="handleSub">提交</view>
      <!--  -->
      <u-datetime-picker :show="isShowDatetime" :minDate="minDate" @confirm="confirmDate" @cancel="isShowDatetime = false" mode="date"></u-datetime-picker>
   </view>
  <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(11, 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="$jump('/pages/staff/vehicle/applePeo')">
          <text
            class="mr6"
            :style="{
              color:
                param.memberList && param.memberList.length > 0
                  ? '#000000'
                  : '#999999',
            }"
          >
            <text v-if="param.memberNames">
              {{ param.memberNames }}
            </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>
    <view class="sub_btn" @click="handleSub">提交</view>
    <!--  -->
    <u-datetime-picker
      :show="isShowDatetime"
      :minDate="new Date(param.startTime).getTime()"
      :maxDate="new Date(param.endTime).getTime()"
      @confirm="confirmDate"
      @cancel="isShowDatetime = false"
      mode="datetime"
    ></u-datetime-picker>
  </view>
</template>

<script>
   import dayjs from 'dayjs'
   export default {
      data() {
         return {
            param: {},
            minDate: '',
            isShowDatetime: false,
         };
      },
      created(){
         this.minDate = new Date().getTime()
      },
      methods: {
         handleSub() {
            console.log('---');
         },
         confirmDate(e) {
            console.log(e.value);
            this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
            this.isShowDate = false
         }
      }
   }
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.id).join(','))
      this.$set(this.param, 'memberNames', res.map(i => i.name).join(','))
    })
  },
  onLoad(option) {
    console.log(option)
    this.param = { ...option }
    this.minDate = new Date().getTime()

  },
  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) {
          setTimeout(() => {
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            })
          })
          uni.redirectTo({
            url: '/pages/staff/index'
          })
        }
      })
    },
    confirmDate(e) {

      this.param.planUseDate = dayjs(e.value).format('YYYY-MM-DD HH:mm')
      this.isShowDatetime = false
    }
  }
}
</script>

<style lang="scss">
.main_wrap {
   .line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #e5e5e5;
      padding: 30rpx 0;
      .label {
         font-size: 30rpx;
         font-weight: 400;
         text {
            &:nth-child(1) {
               color: #e42d2d;
               margin-right: 4rpx;
            }
         }
      }
      .value {
         flex: 1;
         height: 100%;
         margin-left: 30rpx;
         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 0;
      textarea {
         margin-top: 12rpx;
         width: 100%;
         height: 180rpx;
         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%;
         }
      }
   }
  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .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 0;
    textarea {
      margin-top: 12rpx;
      width: 100%;
      height: 180rpx;
      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;
   width: 690rpx;
   height: 88rpx;
   line-height: 88rpx;
   text-align: center;
   background: #279BAA;
   box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
   border-radius: 44rpx;
   font-size: 30rpx;
   color: #FFFFFF;
.sub_btn {
  position: fixed;
  bottom: 84rpx;
  left: 30rpx;
  width: 690rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #279baa;
  box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
  border-radius: 44rpx;
  font-size: 30rpx;
  color: #ffffff;
}
.tip{
      background: #F7F7F7;
      padding: 30rpx 30rpx 180rpx;
      margin: 0 -30rpx;
      .title{
         line-height: 40rpx;
         margin-bottom: 22rpx;
      }
      .line{
         font-size: 26rpx;
         color: #666666;
         line-height: 36rpx;
      }
   }
.tip {
  background: #f7f7f7;
  padding: 30rpx 30rpx 180rpx;
  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;
  padding-bottom: 0;
  // padding-top: 10rpx;
}

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