zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:会议室预约

This commit is contained in:
shijing 2025-09-25 08:54:41 +08:00
parent 8922fb610d
commit b412841492
3 changed files with 471 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/model/ofm.js
View File

@ -97,6 +97,14 @@ export default {
return await http.post(this.url, data);
}
},
update: {
name: "更新",
req: async function(id, data){
return await http.put(
`${config.API_URL}/ofm/mroombooking/${id}/`,data
);
}
},
delete: {
url: `${config.API_URL}/ofm/mroombooking/delete/`,
name: "批量物理删除",

299
src/views/ofm/booking_form.vue Normal file
View File

@ -0,0 +1,299 @@
<template>
<el-container>
<el-header>
<div class="left-panel-group">
<el-button
type="primary"
icon="el-icon-plus"
@click="handleAdd"
></el-button>
</div>
<div class="right-panel">
<el-input
v-model="query.search"
placeholder="会议室名称"
clearable
@keyup.enter="handleQuery"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id">
<el-table-column label="#" type="index"></el-table-column>
<el-table-column label="标题" prop="title"></el-table-column>
<el-table-column label="会议室名称" prop="mroom_name"></el-table-column>
<el-table-column label="预约日期" prop="mdate"></el-table-column>
<el-table-column label="预约时间" prop="time_ranges">
<template #default="scope">
<span v-for="item in scope.row.time_ranges" :key="item">{{ item }}、</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="250">
<template #default="scope">
<el-button
link
size="small"
type="primary"
@click="handleEidt(scope.row)"
>编辑</el-button>
<el-popconfirm
title="确定删除吗？"
@confirm="handleDel(scope.row)"
>
<template #reference>
<el-button
link
size="small"
type="danger"
>删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-drawer :title="titleMap[type]" v-model="limitedVisible" :size="'80%'">
<el-form
:model="form"
:rules="rules"
ref="addForm"
label-width="100px"
>
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" clearable></el-input>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="会议室" prop="mroom">
<el-select v-model="form.mroom" placeholder="请选择" 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="mdate">
<el-date-picker v-model="form.mdate" type="date" value-format="YYYY-MM-DD" style="width: 100%;"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<div v-for="(item,$index) in timesList" :key="item.value">
<div v-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>
<template #footer>
<el-button @click="handleCancel">取 消</el-button>
<el-button
v-if="type !== 'show'"
type="primary"
:loading="isSaving"
@click="submitHandle()"
>确定</el-button>
</template>
</el-drawer>
</template>
<script>
export default {
name: "index",
data() {
return {
apiObj: this.$API.ofm.mroombooking.list,
query: {},
editId: null,
isSaving: false,
limitedVisible: false,
type: "add",
titleMap: {
add: "新增会议预定",
edit: "编辑会议预定",
show: "查看会议预定",
},
//表单数据
form: {
mroom: "",
mdate: "",
title: "",
slots: [],
},
//验证规则
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},
{value:1,label:'00:30-01:00',isSelect:false},
{value:2,label:'01:00-01:30',isSelect:false},
{value:3,label:'01:30-02:00',isSelect:false},
{value:4,label:'02:00-02:30',isSelect:false},
{value:5,label:'02:30-03:00',isSelect:false},
{value:6,label:'03:00-03:30',isSelect:false},
{value:7,label:'03:30-04:00',isSelect:false},
{value:8,label:'04:00-04:30',isSelect:false},
{value:9,label:'04:30-05:00',isSelect:false},
{value:10,label:'05:00-05:30',isSelect:false},
{value:11,label:'05:30-06:00',isSelect:false},
{value:12,label:'06:00-06:30',isSelect:false},
{value:13,label:'06:30-07:00',isSelect:false},
{value:14,label:'07:00-07:30',isSelect:false},
{value:15,label:'07:30-08:00',isSelect:false},
{value:16,label:'08:00-08:30',isSelect:false},
{value:17,label:'08:30-09:00',isSelect:false},
{value:18,label:'09:00-09:30',isSelect:false},
{value:19,label:'09:30-10:00',isSelect:false},
{value:20,label:'10:00-10:30',isSelect:false},
{value:21,label:'10:30-11:00',isSelect:false},
{value:22,label:'11:00-11:30',isSelect:false},
{value:23,label:'11:30-12:00',isSelect:false},
{value:24,label:'12:00-12:30',isSelect:false},
{value:25,label:'12:30-13:00',isSelect:false},
{value:26,label:'13:00-13:30',isSelect:false},
{value:27,label:'13:30-14:00',isSelect:false},
{value:28,label:'14:00-14:30',isSelect:false},
{value:29,label:'14:30-15:00',isSelect:false},
{value:30,label:'15:00-15:30',isSelect:false},
{value:31,label:'15:30-16:00',isSelect:false},
{value:32,label:'16:00-16:30',isSelect:false},
{value:33,label:'16:30-17:00',isSelect:false},
{value:34,label:'17:00-17:30',isSelect:false},
{value:35,label:'17:30-18:00',isSelect:false},
{value:36,label:'18:00-18:30',isSelect:false},
{value:37,label:'18:30-19:00',isSelect:false},
{value:38,label:'19:00-19:30',isSelect:false},
{value:39,label:'19:30-20:00',isSelect:false},
{value:40,label:'20:00-20:30',isSelect:false},
{value:41,label:'20:30-21:00',isSelect:false},
{value:42,label:'21:00-21:30',isSelect:false},
{value:43,label:'21:30-22:00',isSelect:false},
{value:44,label:'22:00-22:30',isSelect:false},
{value:45,label:'22:30-23:00',isSelect:false},
{value:46,label:'23:00-23:30',isSelect:false},
{value:47,label:'23:30-24:00',isSelect:false}
],
mRoomList: []
};
},
mounted() {
this.getmRoomList();
},
methods: {
getmRoomList(){
let that = this;
that.$API.ofm.mroom.list.req({page:0}).then(res=>{
that.mRoomList = res;
})
},
//添加
handleAdd() {
this.type = "add";
this.limitedVisible = true;
},
handleCancel() {
this.limitedVisible = false;
},
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() {
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(row) {
let that = this;
that.type = "edit";
that.editId = row.id;
that.$API.ofm.mroomslot.list.req({booking:row.id,page:0}).then(res=>{
console.log('mroomslotres',res);
res.forEach(item=>{
that.timesList[item.slot].isSelect = true;
})
})
that.limitedVisible = true;
that.form = Object.assign({}, row);
}
},
async handleDel(row) {
var id = row.id;
var res = await this.$API.ofm.mroom.delete.req(id);
if (res.err_msg) {
this.$message.error(res.err_msg);
} else {
this.$refs.table.refresh();
this.$message.success("删除成功");
}
},
//搜索
handleQuery() {
this.$refs.table.queryData(this.query);
},
};
</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;
}
</style>

289
src/views/ofm/mroombooking.vue
View File

@ -25,21 +25,13 @@
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id">
<el-table-column label="#" type="index"></el-table-column>
<el-table-column
label="会议室名称"
prop="name"
min-width="100"
></el-table-column>
<el-table-column
label="位置"
prop="location"
min-width="100"
></el-table-column>
<el-table-column
label="容纳人数"
prop="capacity"
min-width="120"
>
<el-table-column label="标题" prop="title"></el-table-column>
<el-table-column label="会议室名称" prop="mroom_name"></el-table-column>
<el-table-column label="预约日期" prop="mdate"></el-table-column>
<el-table-column label="预约时间" prop="time_ranges">
<template #default="scope">
<span v-for="item in scope.row.time_ranges" :key="item">{{ item }}、</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="250">
<template #default="scope">
@ -47,20 +39,18 @@
link
size="small"
type="primary"
@click="mroomEidt(scope.row)"
>编辑
</el-button>
@click="handleEidt(scope.row)"
>编辑</el-button>
<el-popconfirm
title="确定删除吗？"
@confirm="mroomDel(scope.row)"
@confirm="handleDel(scope.row)"
>
<template #reference>
<el-button
link
size="small"
type="danger"
>删除</el-button
>
>删除</el-button>
</template>
</el-popconfirm>
</template>
@ -68,23 +58,41 @@
</scTable>
</el-main>
</el-container>
<el-dialog :title="titleMap[type] " v-model="limitedVisible" width="600px">
<el-drawer :title="titleMap[type]" v-model="limitedVisible" :size="'80%'">
<el-form
:model="addForm"
:model="form"
:rules="rules"
ref="addForm"
label-width="100px"
label-position="left"
>
<el-form-item label="会议室名称" prop="name">
<el-input v-model="addForm.name" clearable></el-input>
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" clearable></el-input>
</el-form-item>
<el-form-item label="地点" prop="location">
<el-input v-model="addForm.location" clearable></el-input>
<el-row>
<el-col :span="12">
<el-form-item label="会议室" prop="mroom">
<el-select v-model="form.mroom" placeholder="请选择" 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-form-item label="容纳人数" prop="capacity">
<el-input v-model="addForm.capacity" clearable></el-input>
</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%;"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<div v-for="(item,$index) in timesList" :key="item.value">
<div v-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>
<template #footer>
<el-button @click="handleCancel">取 消</el-button>
@ -93,70 +101,121 @@
type="primary"
:loading="isSaving"
@click="submitHandle()"
>保 存</el-button
>
>确定</el-button>
</template>
</el-dialog>
</el-drawer>
</template>
<script>
// import degraDialog from "../wf/degraD3.vue";
export default {
name: "index",
// components: {
// degraDialog
// },
data() {
return {
workflowName:"",
workFlowId:'',
apiObj: this.$API.wf.workflow.list,
selection: [],
checkList: [],
fileList: [],
timeRange: [],
lending_type: "",
apiObj: this.$API.ofm.mroombooking.list,
query: {},
editId: null,
isSaving: false,
limitedVisible: false,
limitedWatch: false,
type: "add",
titleMap: {
add: "新增",
edit: "编辑",
show: "查看",
add: "新增会议预定",
edit: "编辑会议预定",
show: "查看会议预定",
},
//表单数据
addForm: {
seal: [],
seal_other: "",
filename: "",
contents: "",
file_count: "",
is_lending: "",
contacts: "",
lending_date: "",
return_date: "",
actual_return_date: "",
reason: "",
form: {
mroom: "",
mdate: "",
title: "",
slots: [],
},
//验证规则
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},
{value:1,label:'00:30-01:00',isSelect:false},
{value:2,label:'01:00-01:30',isSelect:false},
{value:3,label:'01:30-02:00',isSelect:false},
{value:4,label:'02:00-02:30',isSelect:false},
{value:5,label:'02:30-03:00',isSelect:false},
{value:6,label:'03:00-03:30',isSelect:false},
{value:7,label:'03:30-04:00',isSelect:false},
{value:8,label:'04:00-04:30',isSelect:false},
{value:9,label:'04:30-05:00',isSelect:false},
{value:10,label:'05:00-05:30',isSelect:false},
{value:11,label:'05:30-06:00',isSelect:false},
{value:12,label:'06:00-06:30',isSelect:false},
{value:13,label:'06:30-07:00',isSelect:false},
{value:14,label:'07:00-07:30',isSelect:false},
{value:15,label:'07:30-08:00',isSelect:false},
{value:16,label:'08:00-08:30',isSelect:false},
{value:17,label:'08:30-09:00',isSelect:false},
{value:18,label:'09:00-09:30',isSelect:false},
{value:19,label:'09:30-10:00',isSelect:false},
{value:20,label:'10:00-10:30',isSelect:false},
{value:21,label:'10:30-11:00',isSelect:false},
{value:22,label:'11:00-11:30',isSelect:false},
{value:23,label:'11:30-12:00',isSelect:false},
{value:24,label:'12:00-12:30',isSelect:false},
{value:25,label:'12:30-13:00',isSelect:false},
{value:26,label:'13:00-13:30',isSelect:false},
{value:27,label:'13:30-14:00',isSelect:false},
{value:28,label:'14:00-14:30',isSelect:false},
{value:29,label:'14:30-15:00',isSelect:false},
{value:30,label:'15:00-15:30',isSelect:false},
{value:31,label:'15:30-16:00',isSelect:false},
{value:32,label:'16:00-16:30',isSelect:false},
{value:33,label:'16:30-17:00',isSelect:false},
{value:34,label:'17:00-17:30',isSelect:false},
{value:35,label:'17:30-18:00',isSelect:false},
{value:36,label:'18:00-18:30',isSelect:false},
{value:37,label:'18:30-19:00',isSelect:false},
{value:38,label:'19:00-19:30',isSelect:false},
{value:39,label:'19:30-20:00',isSelect:false},
{value:40,label:'20:00-20:30',isSelect:false},
{value:41,label:'20:30-21:00',isSelect:false},
{value:42,label:'21:00-21:30',isSelect:false},
{value:43,label:'21:30-22:00',isSelect:false},
{value:44,label:'22:00-22:30',isSelect:false},
{value:45,label:'22:30-23:00',isSelect:false},
{value:46,label:'23:00-23:30',isSelect:false},
{value:47,label:'23:30-24:00',isSelect:false}
],
mRoomList: []
};
},
mounted() {
this.getmRoomList();
},
methods: {
//添加工作流
getmRoomList(){
let that = this;
that.$API.ofm.mroom.list.req({page:0}).then(res=>{
that.mRoomList = res;
})
},
//添加
handleAdd() {
this.type = "add";
this.limitedVisible = true;
},
handleCancel() {
this.limitedVisible = false; // 关闭弹窗
this.lending_type = ""; // 重置 lending_type
// 如果需要，也可以重置整个表单：
// this.addForm = { lending_type: "", ...其他字段... };
this.limitedVisible = false;
},
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) => {
@ -166,18 +225,14 @@ export default {
}
});
},
async submit() {
let that = this;
let res = null;
let that = this,res = null;
console.log('that.form',that.form);
try {
if (that.type === "add") {
res = await that.$API.ofm.mroom.create.req(that.addForm);
res = await that.$API.ofm.mroombooking.create.req(that.form);
} else {
res = await that.$API.ofm.mroom.update.req(
that.editId,
that.addForm
);
res = await that.$API.ofm.mroombooking.update.req(that.form.id,that.form);
}
that.isSaving = false;
that.limitedVisible = false;
@ -186,19 +241,21 @@ export default {
that.isSaving = false;
}
},
fileUPSuccess(res) {
handleEidt(row) {
let that = this;
console.log('res',res);
this.test_file = res.path;
},
mroomEidt(row) {
this.type = "edit";
this.editId = row.id;
this.limitedVisible = true;
this.addForm = Object.assign({}, row);
that.type = "edit";
that.editId = row.id;
that.$API.ofm.mroomslot.list.req({booking:row.id,page:0}).then(res=>{
console.log('mroomslotres',res);
res.forEach(item=>{
that.timesList[item.slot].isSelect = true;
})
})
that.limitedVisible = true;
that.form = Object.assign({}, row);
}
},
async mroomDel(row) {
async handleDel(row) {
var id = row.id;
var res = await this.$API.ofm.mroom.delete.req(id);
if (res.err_msg) {
@ -216,53 +273,27 @@ export default {
};
</script>
<style scoped>
.treeMain {
height: 280px;
overflow: auto;
border: 1px solid #dcdfe6;
margin-bottom: 10px;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
background-color: #fefefe;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-color: #f5f5f5;
}
.node rect {
stroke: #606266;
fill: #fff;
}
.edgePath path {
stroke: #606266;
fill: #333;
stroke-width: 1.5px;
}
g.conditions > rect {
fill: #00ffd0;
stroke: #000;
}
.el-icon-close {
cursor: pointer;
}
.left-panel-group {
display: flex;
align-items: center;
gap: 6px; /* 按钮之间的间隙，可以调小点 */
margin-left: 0; /* 靠左 */
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;
}
</style>