oa-ui/src/views/Home/hygl/bk.vue
2024-11-12 10:01:20 +08:00

721 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="会议标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入会议标题" />
</el-form-item>
<el-form-item label="申请人名字" prop="userName">
<el-input v-model="formData.userName" placeholder="请输入申请人名字" />
</el-form-item>
<el-form-item label="申请人id" prop="userId">
<el-input v-model="formData.userId" placeholder="请输入申请人id" />
</el-form-item>
<el-form-item label="申请部门名字" prop="deptName">
<el-input v-model="formData.deptName" placeholder="请输入申请部门名字" />
</el-form-item>
<el-form-item label="申请部门id" prop="deptId">
<el-input v-model="formData.deptId" placeholder="请输入申请部门id" />
</el-form-item>
<el-form-item label="申请时间" prop="time">
<el-date-picker
v-model="formData.time"
type="date"
value-format="x"
placeholder="选择申请时间"
/>
</el-form-item>
<el-form-item label="描述" prop="depict">
<el-input v-model="formData.depict" placeholder="请输入描述" />
</el-form-item>
<el-form-item label="会议类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择会议类型">
<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-form-item label="会议主题" prop="theme">
<el-input v-model="formData.theme" placeholder="请输入会议主题" />
</el-form-item>
<el-form-item label="会议目标" prop="target">
<el-input v-model="formData.target" placeholder="请输入会议目标" />
</el-form-item>
<el-form-item label="开始时间" prop="startDate">
<el-date-picker
v-model="formData.startDate"
type="date"
value-format="x"
placeholder="选择开始时间"
/>
</el-form-item>
<el-form-item label="结束时间" prop="endDate">
<el-date-picker
v-model="formData.endDate"
type="date"
value-format="x"
placeholder="选择结束时间"
/>
</el-form-item>
<el-form-item label="持续时间" prop="duration">
<el-input v-model="formData.duration" placeholder="请输入持续时间" />
</el-form-item>
<el-form-item label="会议室id" prop="roomId">
<el-input v-model="formData.roomId" placeholder="请输入会议室id" />
</el-form-item>
<el-form-item label="会议室名字" prop="roomName">
<el-input v-model="formData.roomName" placeholder="请输入会议室名字" />
</el-form-item>
<el-form-item label="会议室地址" prop="roomAddress">
<el-input v-model="formData.roomAddress" placeholder="请输入会议室地址" />
</el-form-item>
<el-form-item label="组织者" prop="organizer">
<el-input v-model="formData.organizer" placeholder="请输入组织者" />
</el-form-item>
<el-form-item label="主讲人" prop="speaker">
<el-input v-model="formData.speaker" placeholder="请输入主讲人" />
</el-form-item>
<el-form-item label="记录人员" prop="meetingTaker">
<el-input v-model="formData.meetingTaker" placeholder="请输入记录人员" />
</el-form-item>
<el-form-item label="参会人数" prop="number">
<el-input v-model="formData.number" placeholder="请输入参会人数" />
</el-form-item>
<el-form-item label="设备需求" prop="equipmentList">
<el-input v-model="formData.equipmentList" placeholder="请输入设备需求" />
</el-form-item>
<el-form-item label="网络需求" prop="network">
<el-input v-model="formData.network" placeholder="请输入网络需求" />
</el-form-item>
<el-form-item label="审批状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio label="1">请选择字典生成</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="流程实例的编号" prop="processInstanceId">
<el-input v-model="formData.processInstanceId" placeholder="请输入流程实例的编号" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { HyglApi, HyglVO } from '@/api/home/hygl'
/** 会议管理 表单 */
defineOptions({ name: 'HyglForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formType = ref('') // 表单的类型create - 新增update - 修改
const formData = ref({
id: undefined,
title: undefined,
userName: undefined,
userId: undefined,
deptName: undefined,
deptId: undefined,
time: undefined,
depict: undefined,
type: undefined,
theme: undefined,
target: undefined,
startDate: undefined,
endDate: undefined,
duration: undefined,
roomId: undefined,
roomName: undefined,
roomAddress: undefined,
organizer: undefined,
speaker: undefined,
meetingTaker: undefined,
number: undefined,
equipmentList: undefined,
network: undefined,
status: undefined,
processInstanceId: undefined,
})
const formRules = reactive({
title: [{ required: true, message: '会议标题不能为空', trigger: 'blur' }],
userId: [{ required: true, message: '申请人id不能为空', trigger: 'blur' }],
deptId: [{ required: true, message: '申请部门id不能为空', trigger: 'blur' }],
time: [{ required: true, message: '申请时间不能为空', trigger: 'blur' }],
type: [{ required: true, message: '会议类型不能为空', trigger: 'change' }],
startDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
endDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
roomId: [{ required: true, message: '会议室id不能为空', trigger: 'blur' }],
roomAddress: [{ required: true, message: '会议室地址不能为空', trigger: 'blur' }],
organizer: [{ required: true, message: '组织者不能为空', trigger: 'blur' }],
number: [{ required: true, message: '参会人数不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await HyglApi.getHygl(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as HyglVO
if (formType.value === 'create') {
await HyglApi.createHygl(data)
message.success(t('common.createSuccess'))
} else {
await HyglApi.updateHygl(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
title: undefined,
userName: undefined,
userId: undefined,
deptName: undefined,
deptId: undefined,
time: undefined,
depict: undefined,
type: undefined,
theme: undefined,
target: undefined,
startDate: undefined,
endDate: undefined,
duration: undefined,
roomId: 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>
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="会议标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入会议标题"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="申请人名字" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入申请人名字"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="申请人id" prop="userId">
<el-input
v-model="queryParams.userId"
placeholder="请输入申请人id"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="申请部门名字" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入申请部门名字"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="申请部门id" prop="deptId">
<el-input
v-model="queryParams.deptId"
placeholder="请输入申请部门id"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="申请时间" prop="time">
<el-date-picker
v-model="queryParams.time"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="描述" prop="depict">
<el-input
v-model="queryParams.depict"
placeholder="请输入描述"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="会议类型" prop="type">
<el-select
v-model="queryParams.type"
placeholder="请选择会议类型"
clearable
class="!w-240px"
>
<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-form-item label="会议主题" prop="theme">
<el-input
v-model="queryParams.theme"
placeholder="请输入会议主题"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="会议目标" prop="target">
<el-input
v-model="queryParams.target"
placeholder="请输入会议目标"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="开始时间" prop="startDate">
<el-date-picker
v-model="queryParams.startDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="结束时间" prop="endDate">
<el-date-picker
v-model="queryParams.endDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="持续时间" prop="duration">
<el-input
v-model="queryParams.duration"
placeholder="请输入持续时间"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="会议室id" prop="roomId">
<el-input
v-model="queryParams.roomId"
placeholder="请输入会议室id"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="会议室名字" prop="roomName">
<el-input
v-model="queryParams.roomName"
placeholder="请输入会议室名字"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="会议室地址" prop="roomAddress">
<el-input
v-model="queryParams.roomAddress"
placeholder="请输入会议室地址"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="组织者" prop="organizer">
<el-input
v-model="queryParams.organizer"
placeholder="请输入组织者"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="主讲人" prop="speaker">
<el-input
v-model="queryParams.speaker"
placeholder="请输入主讲人"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="记录人员" prop="meetingTaker">
<el-input
v-model="queryParams.meetingTaker"
placeholder="请输入记录人员"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="参会人数" prop="number">
<el-input
v-model="queryParams.number"
placeholder="请输入参会人数"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="设备需求" prop="equipmentList">
<el-input
v-model="queryParams.equipmentList"
placeholder="请输入设备需求"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="网络需求" prop="network">
<el-input
v-model="queryParams.network"
placeholder="请输入网络需求"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="审批状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择审批状态"
clearable
class="!w-240px"
>
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="流程实例的编号" prop="processInstanceId">
<el-input
v-model="queryParams.processInstanceId"
placeholder="请输入流程实例的编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['home:hygl:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['home:hygl:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="id" align="center" prop="id" />
<el-table-column label="会议标题" align="center" prop="title" />
<el-table-column label="申请人名字" align="center" prop="userName" />
<el-table-column label="申请人id" align="center" prop="userId" />
<el-table-column label="申请部门名字" align="center" prop="deptName" />
<el-table-column label="申请部门id" align="center" prop="deptId" />
<el-table-column
label="申请时间"
align="center"
prop="time"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="描述" align="center" prop="depict" />
<el-table-column label="会议类型" align="center" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.HYGL_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="会议主题" align="center" prop="theme" />
<el-table-column label="会议目标" align="center" prop="target" />
<el-table-column
label="开始时间"
align="center"
prop="startDate"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column
label="结束时间"
align="center"
prop="endDate"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="持续时间" align="center" prop="duration" />
<el-table-column label="会议室id" align="center" prop="roomId" />
<el-table-column label="会议室名字" align="center" prop="roomName" />
<el-table-column label="会议室地址" align="center" prop="roomAddress" />
<el-table-column label="组织者" align="center" prop="organizer" />
<el-table-column label="主讲人" align="center" prop="speaker" />
<el-table-column label="记录人员" align="center" prop="meetingTaker" />
<el-table-column label="参会人数" align="center" prop="number" />
<el-table-column label="设备需求" align="center" prop="equipmentList" />
<el-table-column label="网络需求" align="center" prop="network" />
<el-table-column label="审批状态" align="center" prop="status" />
<el-table-column label="流程实例的编号" align="center" prop="processInstanceId" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['home:hygl:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['home:hygl:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<HyglForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { HyglApi, HyglVO } from '@/api/home/hygl'
import HyglForm from './HyglDetail.vue'
/** 会议管理 列表 */
defineOptions({ name: 'Hygl' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<HyglVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = 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: undefined,
processInstanceId: undefined,
createTime: [],
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await HyglApi.getHyglPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await HyglApi.deleteHygl(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await HyglApi.exportHygl(queryParams)
download.excel(data, '会议管理.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>