xgxt_sd/zhxg_pc
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
18154758993
2025-07-28 15:52:07 +08:00
commit cd0e77b332
1304 changed files with 302802 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

503
src/views/routine/reservation/index.vue Normal file
View File

@@ -0,0 +1,503 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-row>
<el-col :span="5">
<el-form-item label="功能房" prop="roomName">
<el-input v-model="queryParams.roomName" placeholder="请输入功能房名" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="使用状态" prop="rtState">
<el-select v-model="queryParams.rtState" placeholder="请选择使用状态" clearable>
<el-option v-for="dict in dict.type.routine_rtfureservation_rt_state" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="审批状态" prop="auStatus">
<el-select v-model="queryParams.auStatus" placeholder="请选择审批状态" clearable>
<el-option v-for="dict in dict.type.rt_fu_audit_au_status" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item style="margin-left: 100px;">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="margin-left: 20px;">重置</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="5">
<el-form-item label="申请人" prop="rtCreatRole">
<el-input v-model="queryParams.rtCreatRole" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="1.5" style="text-align: right;">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
v-hasPermi="['staff:oneStopCommunityConstruction:export']">导出</el-button>
</el-col>
</el-row>
</el-form>
<el-table v-loading="loading" :border="true" :data="reservationList" class="custom-table">
<el-table-column label="序号" align="center" width="66" prop="id" />
<el-table-column label="申请人" align="center" width="120" prop="rtCreatRole" />
<el-table-column label="使用部门/学院" align="center" width="140" prop="rtDepar" />
<el-table-column label="功能房名称" align="center" width="130" prop="roomName" />
<el-table-column label="主题" align="center" width="100" prop="rtTheme" />
<el-table-column label="试用期间图片" align="center" width="120" prop="resPath">
<template slot-scope="scope">
<div class="images">
<template v-if="scope.row.resPath && scope.row.resPath.length > 0">
<el-image style="width: 100px; height: 100px;"
:src="baseUrl + scope.row.resPath.split(',')[0]"></el-image>
</template>
<template v-else>
<span>没有照片</span>
</template>
</div>
</template>
</el-table-column>
<el-table-column label="参与人员类型" align="center" width="120" prop="rtRole" />
<el-table-column label="参与人数" align="center" width="60" prop="rtPeople" />
<el-table-column label="预约用途" align="center" width="90" prop="rtPurpose" />
<el-table-column label="预约时间段" align="center" width="150" prop="rtYuyue" />
<el-table-column label="使用状态" align="center" width="90" prop="rtState">
<template slot-scope="scope" v-if="scope.row.audit.auStatus != 2">
<dict-tag :options="dict.type.routine_rtfureservation_rt_state" :value="scope.row.rtState" />
</template>
</el-table-column>
<el-table-column label="审批状态" align="center" width="90" prop="auStatus">
<template slot-scope="scope">
<dict-tag :options="dict.type.rt_fu_audit_au_status" :value="scope.row.audit.auStatus" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<div style="display: flex;">
<el-button size="mini" type="text" @click="handleDetail(scope.row)">查看详情</el-button>
<el-button v-if="scope.row.rtState === 2" size="mini" type="text"
@click="goReservation()">使用结束反馈</el-button>
<el-button v-if="scope.row.audit.auStatus == 0" size="mini" type="text"
@click="handleAudit(scope.row)">审批</el-button>
</div>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改功能房预约对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="功能房名" prop="roomName">
<el-input v-model="form.roomName" placeholder="请输入功能房名" />
</el-form-item>
<el-form-item label="主题" prop="rtTheme">
<el-input v-model="form.rtTheme" placeholder="请输入主题" />
</el-form-item>
<el-form-item label="参与人数" prop="rtPeople">
<el-input v-model="form.rtPeople" placeholder="请输入参与人数" />
</el-form-item>
<el-form-item label="预约时间" prop="rtTime">
<el-input v-model="form.rtTime" placeholder="请输入预约时间" />
</el-form-item>
<el-form-item label="审批状态" prop="rtStatus">
<el-input v-model="form.rtStatus" placeholder="请输入审批状态" />
</el-form-item>
<el-form-item label="使用状态0未使用" prop="rtState">
<el-input v-model="form.rtState" placeholder="请输入使用状态0未使用" />
</el-form-item>
<el-form-item label="图片存储" prop="rtImgs">
<image-upload v-model="form.rtImgs" />
</el-form-item>
<el-form-item label="创建角色" prop="rtCreatRole">
<el-input v-model="form.rtCreatRole" placeholder="请输入创建角色" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 审批弹出框 -->
<el-dialog :title="title" :visible.sync="outerVisible">
<!-- 内层弹出框 -->
<div style="height: 60vh;padding: 20px; position: relative;">
<el-dialog width="40%" title="不同意说明" :visible.sync="innerVisible" append-to-body
style="position: absolute; top: 100px;">
<div style="display: flex; height: 30vh; justify-content: center; margin-top: 50px;"> <label>不同意说明</label>
<el-input style="width: 70%; margin-left: 20px;" type="textarea" :rows="4" placeholder="请输入内容"
v-model="queryParams.reason">
</el-input>
<div style="position: absolute; bottom: 20px; right: 10px;">
<el-button @click="innerVisible = false" style="margin-right: 10px;">取 消</el-button>
<el-button @click="disAgree" style="margin-right: 10px;">确定</el-button>
</div>
</div>
</el-dialog>
<el-form ref="form" :model="form" label-width="100px">
<el-row :gutter="20">
<el-col :span="10" class="custom-left">
<el-form-item label="主题" prop="rtTheme">
<el-input v-model="form.rtTheme" placeholder="请输入主题" />
</el-form-item>
</el-col>
<el-col :span="10" class="custom-right">
<el-form-item label="参与人数" prop="rtPeople">
<el-input v-model="form.rtPeople" placeholder="请输入参与人数" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10" class="custom-left">
<el-form-item label="人员类型" prop="rtRole">
<el-select v-model="form.rtRole" placeholder="选择参与人员类型" clearable>
<el-option v-for="dict in dict.type.routine_rtfureservation_rt_role" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" class="custom-right">
<el-form-item label="预约用途" prop="rtPurpose">
<el-select v-model="form.rtPurpose" placeholder="选择预约用途" clearable>
<el-option v-for="dict in dict.type.routine_rtfureservations_rt_purpose" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10" class="custom-left">
<el-form-item label="预约时间段">
<div style="display: flex;">{{ form.rtTime }}/{{ form.roStartTime }}-{{ form.roEndTime }}</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style=" position: absolute; bottom: 20px; right: 10px;">
<el-button @click="outerVisible = false" style="margin-right: 10px;">取 消</el-button>
<el-button @click="approveAudit" style="margin-right: 10px;">同意</el-button>
<el-button @click="innerVisible = true">不同意</el-button>
</div>
</div>
</el-dialog>
<!-- 使用反馈弹出框 -->
<el-dialog :title="title" :visible.sync="feedback" append-to-body>
<div style="display: flex; height: 50vh; justify-content: center; margin-top: 100px;"> <label>使用反馈</label>
<el-input style="width: 70%; margin-left: 50px;" type="textarea" :rows="10" placeholder="请输入内容"
v-model="textarea1">
</el-input>
<div style="position: absolute; bottom: 20px; right: 10px;">
<el-button @click="feedback = false" style="margin-right: 50px;">取 消</el-button>
<el-button style="margin-right: 50px;">确定</el-button>
</div>
</div>
</el-dialog>
<!-- 查看详情弹出框 -->
<el-dialog :title="title" :visible.sync="openDetail" width="1000px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="功能房名" prop="roomName">
{{ form.roomName }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主题" prop="rtTheme">
{{ form.rtTheme }}
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="申请人" prop="rtCreatRole">
{{ form.rtCreatRole }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="使用部门/学院" prop="rtDepar">
{{ form.rtDepar }}
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="参与人数" prop="rtPeople">
{{ form.rtPeople }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="预约时间" prop="rtTime">
{{ form.rtTime }} {{ form.roStartTime }} - {{ form.roEndTime }}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="不同意原因" v-if="form.audit && form.audit.reason && form.audit.reason.trim() !== ''">
{{ form.audit.reason }}
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancelDetail">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listReservation, getReservation, delReservation, addReservation, updateReservation, myReverDetail } from "@/api/routine/reservation";
import { updateAudit } from "@/api/routine/audit";
export default {
name: "Reservation",
dicts: ['routine_rtfureservation_rt_state', 'rt_fu_audit_au_status', 'routine_rtfureservation_rt_role', 'routine_rtfureservations_rt_purpose'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 功能房预约表格数据
reservationList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
roomName: null,
rtTheme: null,
rtRole: null,
rtPeople: null,
rtPurpose: null,
rtTime: null,
rtStatus: null,
rtState: null,
rtImgs: null,
rtCreattime: null,
rtCreatRole: null,
rtDepar: null,
rtYuyue: null,
auStatus: null
},
// 表单参数
form: {},
// 表单校验
rules: {
},
outerVisible: false,
innerVisible: false,
feedback: false,
textarea1: '',
baseUrl: process.env.VUE_APP_BASE_API,
openDetail: false,
};
},
created() {
this.getList();
},
methods: {
/** 查询功能房预约列表 */
getList() {
this.loading = true;
listReservation(this.queryParams).then(response => {
this.reservationList = response.rows.map(item => ({
...item,
rtYuyue: `${item.rtTime} ${item.roStartTime} ~ ${item.rtTime} ${item.roEndTime}`,
// resPath:item.rtFuResourceList[0].resPath
}));
console.log(this.reservationList);
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
cancelDetail() {
this.openDetail = false;
},
// 表单重置
reset() {
this.form = {
id: null,
roomName: null,
rtTheme: null,
rtRole: null,
rtPeople: null,
rtPurpose: null,
rtTime: null,
rtStatus: null,
rtState: null,
rtImgs: null,
rtCreattime: null,
rtCreatRole: null,
auStatus: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加功能房预约";
},
/** 查看详情按钮操作 */
handleDetail(row) {
this.reset();
const id = row.id || this.ids
getReservation(id).then(response => {
this.form = response.data;
this.openDetail = true;
this.title = "查看功能房详情";
console.log(this.form);
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateReservation(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addReservation(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除功能房预约编号为"' + ids + '"的数据项？').then(function () {
return delReservation(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('routine/reservation/export', {
...this.queryParams
}, `reservation_${new Date().getTime()}.xlsx`)
},
// 审批弹出框
handleAudit(row) {
console.log(row);
console.log(row.audit.id)
this.title = "预约审批"
this.selectedAudit = row.audit.id;
console.log(this.selectedAudit);
getReservation(row.id).then(response => {
this.form = response.data;
});
this.outerVisible = true;
},
//审批
approveAudit() {
const approvalData = {
id: this.selectedAudit,
auStatus: 1,
};
console.log(approvalData);
updateAudit(approvalData).then(response => {
this.$message.success("审批成功");
this.outerVisible = false;
this.getList();
}).catch(error => {
this.$message.error("审批失败：" + error.message);
});
},
//不同意理由
disAgree() {
const disAgree = {
id: this.selectedAudit,
reason: this.queryParams.reason,
auStatus: 2 // 将审批状态更新为2，表示不同意
};
updateAudit(disAgree).then(response => {
this.$message.success("提交成功");
this.innerVisible = false;
this.getList();
}).catch(error => {
this.$message.error("提交失败：" + error.message);
});
this.innerVisible = false;
this.outerVisible = false;
},
goReservation() {
this.feedback = true
this.title = "添加使用结束反馈"
}
}
};
</script>
<style scoped>
.custom-table {
/* 设置表格内容居中 */
text-align: center;
}
/* 如果需要调整表头也居中，可以添加以下样式 */
.custom-table .el-table__header th {
text-align: center;
}
.custom-left {
margin-right: 100px;
margin-bottom: 30px;
}
</style>