352 lines
12 KiB
Vue
352 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="title">
|
|
<el-input v-model="form.title" clearable placeholder="请输入会议名称"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="会议室" prop="mroom">
|
|
<el-select v-model="form.mroom" placeholder="请选择会议室" @change="mRoomChange" style="width: 100%;">
|
|
<el-option
|
|
v-for="item in mRoomList"
|
|
: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="key_participants">
|
|
<el-input v-model="form.key_participants" clearable placeholder="请输入参会领导"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="会议人数" prop="participant_count">
|
|
<el-input-number v-model="form.participant_count" clearable style="width: 100%;" :precision="0" :step="1" min="1"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="会议时间" prop="mdate">
|
|
<el-date-picker v-model="form.mdate" type="date" value-format="YYYY-MM-DD" style="width: 100%;" placeholder="请选择会议时间" @change="mdateChange"></el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="备注">
|
|
<el-input v-model="form.note" clearable placeholder="备注"></el-input>
|
|
</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 v-show="type!=='show'">
|
|
<ticketd_b_start
|
|
:workflow_key="'booking'"
|
|
:title="bookingTitle"
|
|
:t_id="form.id"
|
|
:ticket_="form.ticket_"
|
|
@success="()=>{$emit('success')}"
|
|
:submit_b_func="submit_b_func"
|
|
ref="ticketd_b_start"
|
|
></ticketd_b_start>
|
|
<el-button @click="$emit('closed')">取消</el-button>
|
|
</el-footer>
|
|
</el-main>
|
|
<el-aside width="20%" v-if="form.ticket">
|
|
<ticketd :ticket_="form.ticket_" @success="$emit('success')"></ticketd>
|
|
</el-aside>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
import ticketd_b_start from "@/views/wf/ticketd_b_start.vue";
|
|
import ticketd from '@/views/wf/ticketd.vue'
|
|
export default {
|
|
emits: ["success", "closed"],
|
|
name: "index",
|
|
components: {
|
|
ticketd_b_start, ticketd
|
|
},
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: "add",
|
|
},
|
|
editId: {
|
|
type: String,
|
|
default: "add",
|
|
},
|
|
bookingIitem: {
|
|
type: String,
|
|
default: "add",
|
|
},
|
|
t_id: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
apiObj: this.$API.ofm.mroombooking.list,
|
|
bookingTitle: "会议预定",
|
|
query: {},
|
|
mroomName:'',
|
|
isSaving: false,
|
|
limitedVisible: false,
|
|
titleMap: {
|
|
add: "新增会议预定",
|
|
edit: "编辑会议预定",
|
|
show: "查看会议预定",
|
|
},
|
|
//表单数据
|
|
form: {
|
|
note: "",
|
|
mroom: "",
|
|
mdate: "",
|
|
title: "",
|
|
slots: [],
|
|
ticket_: null,
|
|
belong_dept: "",
|
|
participant_count: 0,
|
|
key_participants: "",
|
|
},
|
|
//验证规则
|
|
rules: {
|
|
mroom: [{ required: true, message: "请输入会议室名称", trigger: "blur" }],
|
|
mdate: [{ 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}
|
|
],
|
|
mRoomList: [],
|
|
timeselectList: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
that.getmRoomList();
|
|
that.getTid();
|
|
if(that.type=='add'){
|
|
that.form.belong_dept = that.$TOOL.data.get("USER_INFO").belong_dept;
|
|
}
|
|
if(that.type=='edit'||that.type=='show'){
|
|
that.form = that.bookingIitem;
|
|
that.mroomName = that.bookingIitem.mroom_name;
|
|
that.bookingTitle = that.mroomName+"预定";
|
|
that.handleEidt(that.editId);
|
|
}
|
|
},
|
|
methods: {
|
|
getmRoomList(){
|
|
let that = this;
|
|
that.$API.ofm.mroom.list.req({page:0}).then(res=>{
|
|
that.mRoomList = res;
|
|
})
|
|
},
|
|
getTid (){
|
|
var that = this;
|
|
if (that.t_id) {
|
|
that.$API.wpm.handover.item.req(that.t_id).then(res=>{
|
|
that.setData(res);
|
|
if(res.ticket_.state_.type == 1 && res.create_by == that.$TOOL.data.get("USER_INFO").id ) {
|
|
that.type = "edit";
|
|
}else{
|
|
that.type = "show";
|
|
}
|
|
that.$nextTick(()=>{
|
|
that.$refs.ticketd_b_start.init();
|
|
})
|
|
})
|
|
}
|
|
},
|
|
mRoomChange(){
|
|
let that = this;
|
|
that.mRoomList.forEach(item=>{
|
|
if(item.id == that.form.mroom){
|
|
that.mroomName = item.name;
|
|
that.bookingTitle = item.name+"预定";
|
|
if(that.form.mdate!==''&&that.form.mdate!==null){
|
|
that.getmRoomSlot();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
mdateChange(){
|
|
let that = this;
|
|
if(that.form.mroom!==''&&that.form.mroom!==null){
|
|
that.getmRoomSlot();
|
|
}
|
|
},
|
|
getmRoomSlot(){
|
|
let that = this;
|
|
let form = {};
|
|
form.page = 0;
|
|
form.mroom = that.form.mroom;
|
|
form.mdate = that.form.mdate;
|
|
that.timesList.forEach(slot=>{
|
|
slot.sloted = false;
|
|
})
|
|
that.$API.ofm.mroomslot.list.req(form).then(res=>{
|
|
console.log('getmRoomSlot',res);
|
|
res.forEach(item=>{
|
|
that.timesList[item.slot].sloted = true;
|
|
})
|
|
})
|
|
},
|
|
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);
|
|
}
|
|
})
|
|
},
|
|
submitHandle() {
|
|
let that = this;
|
|
this.$refs.addForm.validate((valid) => {
|
|
if (valid) {
|
|
that.isSaving = true;
|
|
that.submit();
|
|
}
|
|
});
|
|
},
|
|
async submit_b_func() {
|
|
let that = this;
|
|
if(that.type == "add") {
|
|
let res = await that.$API.ofm.mroombooking.create.req(that.form);
|
|
that.form.id = res.id;
|
|
} else if (that.type == "edit") {
|
|
await that.$API.ofm.mroombooking.update.req(that.form.id, that.form);
|
|
}
|
|
},
|
|
async submit() {
|
|
let that = this,res = null;
|
|
console.log('that.form',that.form);
|
|
try {
|
|
if (that.type === "add") {
|
|
res = await that.$API.ofm.mroombooking.create.req(that.form);
|
|
} else {
|
|
res = await that.$API.ofm.mroombooking.update.req(that.form.id,that.form);
|
|
}
|
|
that.isSaving = false;
|
|
that.limitedVisible = false;
|
|
that.$refs.table.refresh();
|
|
} catch (e) {
|
|
that.isSaving = false;
|
|
}
|
|
},
|
|
handleEidt(id) {
|
|
let that = this;
|
|
that.$API.ofm.mroomslot.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>
|
|
|