335 lines
12 KiB
Vue
335 lines
12 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-main>
|
|
<el-form
|
|
:model="form"
|
|
:rules="rules"
|
|
ref="addForm"
|
|
label-width="100px"
|
|
>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="用车事由" prop="reason">
|
|
<el-input v-model="form.reason" clearable placeholder="请输入用车事由" :readonly="localMode === 'show'"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="车辆" prop="vehiclereg">
|
|
<el-select v-model="form.vehreg" placeholder="请选择车辆" @change="vehChange" style="width: 100%;" :readonly="localMode === 'show'">
|
|
<el-option
|
|
v-for="item in vehRegList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="用车范围" prop="is_city">
|
|
<el-radio-group v-model="form.is_city" :readonly="localMode ==='show'">
|
|
<el-radio :label="true">市内</el-radio>
|
|
<el-radio :label="false">市外</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="出发地点" prop="location">
|
|
<el-input v-model="form.location" clearable :readonly="localMode ==='show'"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="出发公里数" prop="start_km">
|
|
<el-input v-model="form.start_km" clearable :readonly="localMode ==='show'" type="number">
|
|
<template #append>km</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="归还公里数" prop="end_km" v-if="form.ticket_?.state_?.name=='用车中'">
|
|
<el-input v-model="form.end_km" clearable type="number">
|
|
<template #append>km</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="途经地点" prop="via">
|
|
<el-input v-model="form.via" clearable :readonly="localMode ==='show'" >
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="到达地点" prop="destination">
|
|
<el-input v-model="form.destination" clearable :readonly="localMode ==='show'" >
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="接待人员" prop="reception">
|
|
<el-input v-model="form.reception" clearable :readonly="localMode ==='show'">
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="使用日期" prop="vdate">
|
|
<el-date-picker v-model="form.vdate" type="date" value-format="YYYY-MM-DD" style="width: 100%;" placeholder="请选择使用日期" :readonly="localMode === 'show'" @change="mdateChange"></el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<div v-for="(item,$index) in timesList" :key="item.value">
|
|
<div v-if="item.sloted" class="timeBlock slotedTimeBlock" @click="slotMessage">{{ item.label }}</div>
|
|
<div v-else-if="item.isSelect" class="timeBlock selectedTimeBlock" @click="selectTime($index)">{{ item.label }}</div>
|
|
<div v-else class="timeBlock" @click="selectTime($index)">{{ item.label }}</div>
|
|
</div>
|
|
</el-row>
|
|
</el-form>
|
|
<el-footer>
|
|
<el-button @click="$emit('closed')" style="margin-right: 4px">取消</el-button>
|
|
<ticketd_b
|
|
:workflow_key="'wf_vehicle'"
|
|
title='车辆预定'
|
|
:t_id="form.id"
|
|
:ticket_="form.ticket_"
|
|
:ticket_data="ticket_data"
|
|
@success="$emit('success', localMode)"
|
|
:submit_b_func="submit_b_func"
|
|
ref="ticketd_b"
|
|
/>
|
|
</el-footer>
|
|
</el-main>
|
|
<el-aside width="20%" v-if="form.ticket_">
|
|
<ticketd
|
|
:ticket_="form.ticket_"
|
|
:ticket_data="ticket_data"
|
|
@success="$emit('success')"
|
|
></ticketd>
|
|
</el-aside>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
import ticketd_b from "@/views/wf/ticketd_b.vue";
|
|
import ticketd from '@/views/wf/ticketd.vue'
|
|
export default {
|
|
name: "index",
|
|
components: {
|
|
ticketd_b, ticketd
|
|
},
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: "show",
|
|
},
|
|
t_id: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
bookingTitle: "车辆预定",
|
|
mroomName:'',
|
|
form: {},
|
|
ticket_data: {},
|
|
ticket_:null,
|
|
//验证规则
|
|
rules: {
|
|
vehiclereg: [{ required: true, message: "请输入车辆名称", trigger: "blur" }],
|
|
vdate: [{ required: true, message: "请选择时间", trigger: "blur" }],
|
|
// title: [{ required: true, message: "请输入容纳人数", trigger: "blur" }],
|
|
},
|
|
timesList:[
|
|
{value:0,label:'00:00-00:30',isSelect:false,sloted:false},
|
|
{value:1,label:'00:30-01:00',isSelect:false,sloted:false},
|
|
{value:2,label:'01:00-01:30',isSelect:false,sloted:false},
|
|
{value:3,label:'01:30-02:00',isSelect:false,sloted:false},
|
|
{value:4,label:'02:00-02:30',isSelect:false,sloted:false},
|
|
{value:5,label:'02:30-03:00',isSelect:false,sloted:false},
|
|
{value:6,label:'03:00-03:30',isSelect:false,sloted:false},
|
|
{value:7,label:'03:30-04:00',isSelect:false,sloted:false},
|
|
{value:8,label:'04:00-04:30',isSelect:false,sloted:false},
|
|
{value:9,label:'04:30-05:00',isSelect:false,sloted:false},
|
|
{value:10,label:'05:00-05:30',isSelect:false,sloted:false},
|
|
{value:11,label:'05:30-06:00',isSelect:false,sloted:false},
|
|
{value:12,label:'06:00-06:30',isSelect:false,sloted:false},
|
|
{value:13,label:'06:30-07:00',isSelect:false,sloted:false},
|
|
{value:14,label:'07:00-07:30',isSelect:false,sloted:false},
|
|
{value:15,label:'07:30-08:00',isSelect:false,sloted:false},
|
|
{value:16,label:'08:00-08:30',isSelect:false,sloted:false},
|
|
{value:17,label:'08:30-09:00',isSelect:false,sloted:false},
|
|
{value:18,label:'09:00-09:30',isSelect:false,sloted:false},
|
|
{value:19,label:'09:30-10:00',isSelect:false,sloted:false},
|
|
{value:20,label:'10:00-10:30',isSelect:false,sloted:false},
|
|
{value:21,label:'10:30-11:00',isSelect:false,sloted:false},
|
|
{value:22,label:'11:00-11:30',isSelect:false,sloted:false},
|
|
{value:23,label:'11:30-12:00',isSelect:false,sloted:false},
|
|
{value:24,label:'12:00-12:30',isSelect:false,sloted:false},
|
|
{value:25,label:'12:30-13:00',isSelect:false,sloted:false},
|
|
{value:26,label:'13:00-13:30',isSelect:false,sloted:false},
|
|
{value:27,label:'13:30-14:00',isSelect:false,sloted:false},
|
|
{value:28,label:'14:00-14:30',isSelect:false,sloted:false},
|
|
{value:29,label:'14:30-15:00',isSelect:false,sloted:false},
|
|
{value:30,label:'15:00-15:30',isSelect:false,sloted:false},
|
|
{value:31,label:'15:30-16:00',isSelect:false,sloted:false},
|
|
{value:32,label:'16:00-16:30',isSelect:false,sloted:false},
|
|
{value:33,label:'16:30-17:00',isSelect:false,sloted:false},
|
|
{value:34,label:'17:00-17:30',isSelect:false,sloted:false},
|
|
{value:35,label:'17:30-18:00',isSelect:false,sloted:false},
|
|
{value:36,label:'18:00-18:30',isSelect:false,sloted:false},
|
|
{value:37,label:'18:30-19:00',isSelect:false,sloted:false},
|
|
{value:38,label:'19:00-19:30',isSelect:false,sloted:false},
|
|
{value:39,label:'19:30-20:00',isSelect:false,sloted:false},
|
|
{value:40,label:'20:00-20:30',isSelect:false,sloted:false},
|
|
{value:41,label:'20:30-21:00',isSelect:false,sloted:false},
|
|
{value:42,label:'21:00-21:30',isSelect:false,sloted:false},
|
|
{value:43,label:'21:30-22:00',isSelect:false,sloted:false},
|
|
{value:44,label:'22:00-22:30',isSelect:false,sloted:false},
|
|
{value:45,label:'22:30-23:00',isSelect:false,sloted:false},
|
|
{value:46,label:'23:00-23:30',isSelect:false,sloted:false},
|
|
{value:47,label:'23:30-24:00',isSelect:false,sloted:false}
|
|
],
|
|
vehRegList: [],
|
|
timeselectList: [],
|
|
localMode: this.mode,
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
that.getmRoomList();
|
|
if (that.t_id){
|
|
that.getTid();
|
|
}
|
|
else {
|
|
that.localMode = "add";
|
|
that.form.belong_dept = that.$TOOL.data.get("USER_INFO").belong_dept;
|
|
}
|
|
},
|
|
watch: {
|
|
'form.end_km'(val) {
|
|
this.ticket_data.end_km = val
|
|
},
|
|
deep:true
|
|
},
|
|
methods: {
|
|
getmRoomList(){
|
|
let that = this;
|
|
that.$API.ofm.vehicle.list.req({page:0}).then(res=>{
|
|
that.vehRegList = res;
|
|
})
|
|
},
|
|
getTid (){
|
|
var that = this;
|
|
that.$API.ofm.vehicleUse.item.req(that.t_id).then(res=>{
|
|
console.log('res', res)
|
|
that.form = res;
|
|
that.handleEidt(that.t_id);
|
|
if(res.ticket_.state_.type == 1 && res.create_by == that.$TOOL.data.get("USER_INFO").id ) {
|
|
that.localMode = "edit";
|
|
}else{
|
|
that.localMode = "show";
|
|
}
|
|
})
|
|
},
|
|
getmRoomSlot(){
|
|
let that = this;
|
|
let form = {};
|
|
form.page = 0;
|
|
form.vehiclereg = that.form.vehiclereg;
|
|
form.vdate = that.form.vdate;
|
|
that.timesList.forEach(slot=>{
|
|
slot.sloted = false;
|
|
})
|
|
that.$API.ofm.vehicleslot.list.req(form).then(res=>{
|
|
res.forEach(item=>{
|
|
that.timesList[item.slot].sloted = true;
|
|
})
|
|
})
|
|
},
|
|
mdateChange(){
|
|
let that = this;
|
|
if(that.form.vehiclereg!==''&&that.form.vehiclereg!==null){
|
|
that.getmRoomSlot();
|
|
}
|
|
},
|
|
vehChange(){
|
|
let that = this;
|
|
that.vehRegList.forEach(item=>{
|
|
if(item.id == that.form.vehiclereg){
|
|
that.mroomName = item.name;
|
|
that.bookingTitle = item.name+"预定";
|
|
if(that.form.vdate!==''&&that.form.vdate!==null){
|
|
that.getmRoomSlot();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
selectTime(index){
|
|
let that = this;
|
|
that.form.slots = [];
|
|
that.timesList[index].isSelect = !that.timesList[index].isSelect;
|
|
that.timesList.forEach(item=>{
|
|
if(item.isSelect){
|
|
that.form.slots.push(item.value);
|
|
}
|
|
})
|
|
},
|
|
async submit_b_func() {
|
|
let that = this;
|
|
if(that.localMode == "add") {
|
|
that.form.belong_dept = that.$TOOL.data.get("USER_INFO").belong_dept;
|
|
let res = await that.$API.ofm.vehicleUse.create.req(that.form);
|
|
that.form.id = res.id;
|
|
} else if (that.localMode == "edit") {
|
|
await that.$API.ofm.vehicleUse.update.req(that.form.id, that.form);
|
|
}
|
|
},
|
|
handleEidt(id) {
|
|
let that = this;
|
|
that.$API.ofm.vehicleslot.list.req({booking:id,page:0}).then(res=>{
|
|
res.forEach(item=>{
|
|
that.timesList[item.slot].isSelect = true;
|
|
})
|
|
})
|
|
},
|
|
//搜索
|
|
handleQuery() {
|
|
this.$refs.table.queryData(this.query);
|
|
},
|
|
slotMessage(){
|
|
this.$message.warning("该时间段已被预约，不可选择");
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.left-panel-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: 0;
|
|
}
|
|
.timeBlock{
|
|
width: 100px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
background-color: #b9f0cb;
|
|
}
|
|
.selectedTimeBlock{
|
|
background-color: #00a870;
|
|
color: #fff;
|
|
}
|
|
.slotedTimeBlock{
|
|
background-color: #fac275;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|