会议室信息
This commit is contained in:
XaoLi717
parent
a4ac8e8d33
commit
ddb909d2a8
21
src/api/home/hysgl/hysinfo/index.ts
Normal file
21
src/api/home/hysgl/hysinfo/index.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import request from "@/config/axios";
|
||||||
|
|
||||||
|
export interface CalendarDate {
|
||||||
|
isSelected: boolean
|
||||||
|
type: string
|
||||||
|
day: string
|
||||||
|
date: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 工作日历API
|
||||||
|
*/
|
||||||
|
export const AgendaApi = {
|
||||||
|
/**
|
||||||
|
* 获取工作Day
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
getAgendaPage: async (params: any) => {
|
||||||
|
return await request.get({ url: `/calendar/agenda/page`, params })
|
||||||
|
},
|
||||||
|
}
|
||||||
305
src/views/Home/hysgl/hysinfo/HyInfoForm.vue
Normal file
305
src/views/Home/hysgl/hysinfo/HyInfoForm.vue
Normal file
@ -0,0 +1,305 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 80%">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
label-width="120px"
|
||||||
|
v-loading="formLoading"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="申请人" prop="userName">
|
||||||
|
<div class="pull-left" v-show="true" v-if="userInfo">{{ userInfo}} </div>
|
||||||
|
<div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="申请部门" prop="deptName">
|
||||||
|
<div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div>
|
||||||
|
<div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="会议标题" prop="title">
|
||||||
|
<el-input v-model="formData.title" placeholder="请输入会议标题" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="会议主题" prop="theme">
|
||||||
|
<el-input v-model="formData.theme" placeholder="请输入会议主题" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="会议目标" prop="target">
|
||||||
|
<el-input v-model="formData.target" placeholder="请输入会议目标" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="会议开始时间" prop="startDate">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData.startDate"
|
||||||
|
type="datetime"
|
||||||
|
value-format="x"
|
||||||
|
placeholder="选择会议开始时间"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="会议结束时间" prop="endDate">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData.endDate"
|
||||||
|
type="datetime"
|
||||||
|
value-format="x"
|
||||||
|
placeholder="选择会议结束时间"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="申请时间" prop="time">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData.time"
|
||||||
|
type="date"
|
||||||
|
value-format="x"
|
||||||
|
placeholder="选择申请时间"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="会议类型" prop="type">
|
||||||
|
<el-select v-model="formData.type" placeholder="请选择会议类型" disabled>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.HYGL_TYPE)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="组织者" prop="organizer">
|
||||||
|
<el-input v-model="formData.organizer" placeholder="请输入组织者" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="主讲人" prop="speaker">
|
||||||
|
<el-input v-model="formData.speaker" placeholder="请输入主讲人" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="记录人员" prop="meetingTaker">
|
||||||
|
<el-input v-model="formData.meetingTaker" placeholder="请输入记录人员" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="参会人数" prop="number">
|
||||||
|
<el-input v-model.number="formData.number" placeholder="请输入参会人数" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="会议室" prop="roomId">
|
||||||
|
<el-select
|
||||||
|
v-model="formData.roomId"
|
||||||
|
placeholder="请选择会议室"
|
||||||
|
@change="getAddress()"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in listHygl"
|
||||||
|
:key="dict.id"
|
||||||
|
:label="dict.name"
|
||||||
|
:value="dict.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item v-if="formData.photo" label="会议室图片" prop="photo">
|
||||||
|
<el-image
|
||||||
|
style="width: 150px;height: 150px;"
|
||||||
|
:src="formData.photo"
|
||||||
|
:preview-src-list="[formData.photo]"
|
||||||
|
fit="scale-down"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="formData.roomAddress" label="会议室地址" prop="roomAddress">
|
||||||
|
<el-input
|
||||||
|
autosize
|
||||||
|
type="textarea"
|
||||||
|
v-model="formData.roomAddress"
|
||||||
|
placeholder="请输入会议室地址"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述" prop="depict">
|
||||||
|
<el-input autosize type="textarea" v-model="formData.depict" placeholder="请输入描述" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备需求" prop="equipmentList">
|
||||||
|
<el-input autosize type="textarea" v-model="formData.equipmentList" placeholder="请输入设备需求" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="网络需求" prop="network">
|
||||||
|
<el-input autosize type="textarea" v-model="formData.network" placeholder="请输入网络需求" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
|
||||||
|
import {getUserProfile} from "@/api/system/user/profile";
|
||||||
|
import {HysglApi, HysglVO} from "@/api/home/hysgl";
|
||||||
|
import {HyglApi} from "@/api/home/hygl";
|
||||||
|
import {propTypes} from "@/utils/propTypes";
|
||||||
|
|
||||||
|
|
||||||
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||||
|
const dialogTitle = ref('会议申请详细信息') // 弹窗的标题
|
||||||
|
const deptInfo = ref('') // 部门信息
|
||||||
|
const userInfo = ref('') // 用户名字
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
const listHygl = ref<HysglVO[]>([]) // 列表的数据
|
||||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||||
|
const formData = ref({
|
||||||
|
id: undefined,
|
||||||
|
title: undefined,
|
||||||
|
userName: undefined,
|
||||||
|
userId: undefined,
|
||||||
|
deptName: undefined,
|
||||||
|
deptId: undefined,
|
||||||
|
time: Date.now(),
|
||||||
|
depict: undefined,
|
||||||
|
type: undefined,
|
||||||
|
theme: undefined,
|
||||||
|
target: undefined,
|
||||||
|
startDate: undefined,
|
||||||
|
endDate: undefined,
|
||||||
|
duration: undefined,
|
||||||
|
roomId: undefined,
|
||||||
|
photo: undefined,
|
||||||
|
roomName: undefined,
|
||||||
|
roomAddress: undefined,
|
||||||
|
organizer: undefined,
|
||||||
|
speaker: undefined,
|
||||||
|
meetingTaker: undefined,
|
||||||
|
number: undefined,
|
||||||
|
equipmentList: undefined,
|
||||||
|
network: undefined,
|
||||||
|
status: undefined,
|
||||||
|
processInstanceId: undefined,
|
||||||
|
})
|
||||||
|
const props = defineProps({
|
||||||
|
id: propTypes.number.def(undefined)
|
||||||
|
})
|
||||||
|
// 获取用户部门
|
||||||
|
const getUserInfo = async () => {
|
||||||
|
const user = await getUserProfile();
|
||||||
|
|
||||||
|
formData.value.deptId = formData.value.deptId || user.dept.id;
|
||||||
|
formData.value.userId = formData.value.userId || user.id;
|
||||||
|
formData.value.deptName = formData.value.deptName || user.dept.name;
|
||||||
|
formData.value.userName = formData.value.userName || user.nickname;
|
||||||
|
|
||||||
|
deptInfo.value = formData.value.deptName ?? '';
|
||||||
|
userInfo.value = formData.value.userName ?? '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAddress = async ()=>{
|
||||||
|
// 提交请求
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
if (formData.value.roomId == undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const dataHysgl = await HysglApi.getHysgl(formData.value.roomId)
|
||||||
|
formData.value.roomAddress = dataHysgl.location
|
||||||
|
formData.value.photo = dataHysgl.photo
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const queryParamsHysgl = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
id: undefined,
|
||||||
|
title: undefined,
|
||||||
|
name: undefined,
|
||||||
|
location: undefined,
|
||||||
|
roomType: undefined,
|
||||||
|
manager: undefined,
|
||||||
|
roomMax: undefined,
|
||||||
|
capacity: undefined,
|
||||||
|
facilities: undefined,
|
||||||
|
roomStatus: 1,
|
||||||
|
photo: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
createTime: [],
|
||||||
|
})
|
||||||
|
/** 查询会议室列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
// 提交请求
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
const dataHygl = await HysglApi.getHysglPage(queryParamsHysgl)
|
||||||
|
listHygl.value = dataHygl.list
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 打开弹窗 */
|
||||||
|
const open = async (id?: number) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
resetForm()
|
||||||
|
// 修改时，设置数据
|
||||||
|
if (id) {
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
formData.value = await HyglApi.getHygl(id)
|
||||||
|
await getUserInfo()
|
||||||
|
await getList()
|
||||||
|
await getAddress()
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||||
|
/** 重置表单 */
|
||||||
|
const resetForm = () => {
|
||||||
|
formData.value = {
|
||||||
|
id: undefined,
|
||||||
|
title: undefined,
|
||||||
|
userName: undefined,
|
||||||
|
userId: undefined,
|
||||||
|
deptName: undefined,
|
||||||
|
deptId: undefined,
|
||||||
|
time: Date.now(),
|
||||||
|
depict: undefined,
|
||||||
|
type: undefined,
|
||||||
|
theme: undefined,
|
||||||
|
target: undefined,
|
||||||
|
startDate: undefined,
|
||||||
|
endDate: undefined,
|
||||||
|
duration: undefined,
|
||||||
|
roomId: undefined,
|
||||||
|
photo: undefined,
|
||||||
|
roomName: undefined,
|
||||||
|
roomAddress: undefined,
|
||||||
|
organizer: undefined,
|
||||||
|
speaker: undefined,
|
||||||
|
meetingTaker: undefined,
|
||||||
|
number: undefined,
|
||||||
|
equipmentList: undefined,
|
||||||
|
network: undefined,
|
||||||
|
status: undefined,
|
||||||
|
processInstanceId: undefined,
|
||||||
|
}
|
||||||
|
formRef.value?.resetFields()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
183
src/views/Home/hysgl/hysinfo/index.vue
Normal file
183
src/views/Home/hysgl/hysinfo/index.vue
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form-item label="会议申请历史" prop="createTime"/>
|
||||||
|
<el-calendar
|
||||||
|
ref="calendar"
|
||||||
|
class="custom-calendar"
|
||||||
|
:model-value="new Date()"
|
||||||
|
>
|
||||||
|
<template #header="{ date }">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24" class="header-date">
|
||||||
|
<span class="cl-title"> {{ date }}</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #date-cell="{ data }">
|
||||||
|
<div
|
||||||
|
:class="'holiday'"
|
||||||
|
style="max-height: 100%; overflow-y: auto; width: 100%;"
|
||||||
|
>
|
||||||
|
<span style="font-size: 12px">{{ data.date.getDate()}}</span>
|
||||||
|
<br/>
|
||||||
|
<span
|
||||||
|
v-for="item in (holidays2[data.day] || [])"
|
||||||
|
:key="item"
|
||||||
|
style="font-size: 12px;color: #eb2f96;border: 1px solid #eb2f96;"
|
||||||
|
>
|
||||||
|
<span @click="getHygl(item.id)">{{item.title}}</span>
|
||||||
|
<br/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</ContentWrap>
|
||||||
|
<!-- 表单弹窗：查看 -->
|
||||||
|
<HyInfoForm ref="formRef"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { CalendarInstance} from 'element-plus';
|
||||||
|
import { HyglApi, HyglVO } from '@/api/home/hygl'
|
||||||
|
|
||||||
|
defineOptions({ name: 'CalendarAgendaIndex' })
|
||||||
|
|
||||||
|
/** 添加/修改操作 */
|
||||||
|
const formRef = ref()
|
||||||
|
//根据id获取数据
|
||||||
|
const getHygl = async (id:number)=>{
|
||||||
|
formRef.value.open(id)
|
||||||
|
}
|
||||||
|
const calendar = ref<CalendarInstance>()
|
||||||
|
|
||||||
|
// 获取当前日期和14天前的日期
|
||||||
|
const endDate2 = new Date();
|
||||||
|
const startDate2 = new Date();
|
||||||
|
startDate2.setDate(endDate2.getDate() - 14); // 设置14天前的日期
|
||||||
|
|
||||||
|
function formatDate(date: Date,time:boolean) {
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours =time? '23' : '00';
|
||||||
|
const minutes =time? '59' : '00';
|
||||||
|
const seconds =time? '59' : '00';
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
}
|
||||||
|
function formatDate2(dat: number) {
|
||||||
|
const date = new Date(dat)
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
}
|
||||||
|
// function formatDate(date: Date,time:boolean) {
|
||||||
|
// const year = date.getFullYear();
|
||||||
|
// const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||||
|
// const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
// const hours =time? String(date.getHours()).padStart(2, '0') : '00';
|
||||||
|
// const minutes =time? String(date.getMinutes()).padStart(2, '0') : '00';
|
||||||
|
// const seconds =time? String(date.getSeconds()).padStart(2, '0') : '00';
|
||||||
|
// return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
// }
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParamsHygl.pageNo = 1
|
||||||
|
queryParamsHygl.createTime = [formatDate(startDate2,false),formatDate(endDate2,true)]
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const listHygl = ref<HyglVO[]>([]) // 列表的数据
|
||||||
|
const queryParamsHygl = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
title: undefined,
|
||||||
|
userName: undefined,
|
||||||
|
userId: undefined,
|
||||||
|
deptName: undefined,
|
||||||
|
deptId: undefined,
|
||||||
|
time: [],
|
||||||
|
depict: undefined,
|
||||||
|
type: undefined,
|
||||||
|
theme: undefined,
|
||||||
|
target: undefined,
|
||||||
|
startDate: [],
|
||||||
|
endDate: [],
|
||||||
|
duration: undefined,
|
||||||
|
roomId: undefined,
|
||||||
|
roomName: undefined,
|
||||||
|
roomAddress: undefined,
|
||||||
|
organizer: undefined,
|
||||||
|
speaker: undefined,
|
||||||
|
meetingTaker: undefined,
|
||||||
|
number: undefined,
|
||||||
|
equipmentList: undefined,
|
||||||
|
network: undefined,
|
||||||
|
status: 2,
|
||||||
|
processInstanceId: undefined,
|
||||||
|
createTime: [] as string[],
|
||||||
|
})
|
||||||
|
const holidays2 = reactive({});
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
try {
|
||||||
|
const hyglData = await HyglApi.getHyglPage(queryParamsHygl)
|
||||||
|
listHygl.value = hyglData.list
|
||||||
|
console.log("hysglData",hyglData.list)
|
||||||
|
for(let item of listHygl.value){
|
||||||
|
const formattedDate = formatDate2(item.createTime);
|
||||||
|
// 如果 holidays2[formattedDate] 不存在或不是数组，初始化为数组
|
||||||
|
if (!Array.isArray(holidays2[formattedDate])) {
|
||||||
|
holidays2[formattedDate] = [];
|
||||||
|
}
|
||||||
|
// 将 title 添加到数组中
|
||||||
|
holidays2[formattedDate].push({id:item.id,title:item.title});
|
||||||
|
}
|
||||||
|
console.log("holidays2",holidays2);
|
||||||
|
} finally {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(()=> {
|
||||||
|
handleQuery()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.custom-calendar .is-today {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.custom-calendar {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
|
||||||
|
border-radius: 5px; /* 可选：添加圆角 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.holiday {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.schedule {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #CCFFCC;
|
||||||
|
color: #3b3e55;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.month-title {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
.cl-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px
|
||||||
|
}
|
||||||
|
.header-date {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user