<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(','))
|
})
|
},
|
onLoad(option) {
|
console.log(option)
|
this.param = { ...this.param, ...option }
|
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) {
|
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')
|
},
|
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>
|
