161 lines
4.3 KiB
Vue
161 lines
4.3 KiB
Vue
<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-date-picker
|
|
v-model="query.slot_b__mdate"
|
|
type="date"
|
|
value-format="YYYY-MM-DD" />
|
|
<el-select v-model="query.slot_b__mroom" clearable placeholder="请选择会议室">
|
|
<el-option
|
|
v-for="item in mRoomList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
<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="handleShow(scope.row)"
|
|
>查看</el-button>
|
|
<el-button
|
|
link
|
|
size="small"
|
|
type="primary"
|
|
v-if="scope.row.ticket_.state_.type==1"
|
|
@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%'">
|
|
<bookingDialog
|
|
:type="type"
|
|
:editId="editId"
|
|
:bookingIitem="bookingIitem"
|
|
@success="handleSuccess"
|
|
@closed="handleCancel"
|
|
></bookingDialog>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import bookingDialog from "./booking_form.vue";
|
|
export default {
|
|
name: "index",
|
|
components: { bookingDialog },
|
|
data() {
|
|
return {
|
|
apiObj: this.$API.ofm.mroombooking.list,
|
|
query: {},
|
|
editId: null,
|
|
isSaving: false,
|
|
limitedVisible: false,
|
|
type: "add",
|
|
titleMap: {
|
|
add: "新增会议预定",
|
|
edit: "编辑会议预定",
|
|
show: "查看会议预定",
|
|
},
|
|
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;
|
|
},
|
|
handleSuccess(){
|
|
this.$refs.table.refresh();
|
|
this.limitedVisible = false;
|
|
},
|
|
handleEidt(row) {
|
|
let that = this;
|
|
that.type = "edit";
|
|
that.editId = row.id;
|
|
that.bookingIitem = row;
|
|
that.limitedVisible = true;
|
|
},
|
|
handleShow(row){
|
|
let that = this;
|
|
that.type = "show";
|
|
that.editId = row.id;
|
|
that.bookingIitem = row;
|
|
that.limitedVisible = true;
|
|
},
|
|
async handleDel(row) {
|
|
var id = row.id;
|
|
var res = await this.$API.ofm.mroombooking.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;
|
|
}
|
|
</style>
|
|
|