yudao-team/oa-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

请假管理自动计算天数,详情查看

Browse Source
This commit is contained in:
XaoLi717 2024-12-12 10:00:14 +08:00
parent 75abe5d373
commit 655990607d
3 changed files with 244 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/Home/qjgl/QjglViewForm.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 70%;">
<el-form
ref="formRef"
:model="formData"
label-width="100px"
v-loading="formLoading"
>
<el-row>
<el-col :span="24">
<el-form-item label="请假标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入请假标题" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="起草人" prop="userName">
<el-input v-model="formData.userName" placeholder="请输入起草人" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门" prop="deptId">
<el-input v-model="formData.deptName" placeholder="请输入部门信息" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开始时间" prop="startTime" readonly>
<el-date-picker
v-model="formData.startTime"
type="datetime"
value-format="x"
placeholder="选择开始时间"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endTime" >
<el-date-picker
v-model="formData.endTime"
type="datetime"
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.BPM_OA_LEAVE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="请假天数" prop="day" >
<el-input v-model="formData.day" placeholder="请输入请假天数" disabled/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="请假原因" prop="reason" >
<el-input v-model="formData.reason" placeholder="请输入请假原因" style="height: 100px;" disabled/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</Dialog>
</template>
<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import {QjglApi} from "@/api/home/qjgl";
const formRef = ref() // 表单 Ref
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
id: undefined,
title: undefined,
reason: undefined,
type: undefined,
startTime: undefined,
endTime: undefined,
day: undefined,
filePath: undefined,
userName: undefined,
deptId: undefined,
deptName: undefined,
processInstanceId: undefined,
userId: undefined,
status: undefined
})
/** 打开弹窗 */
const open = async (id?: number) => {
dialogVisible.value = true
dialogTitle.value = '请假数据预览';
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await QjglApi.getQjgl(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
title: undefined,
reason: undefined,
type: undefined,
startTime: undefined,
endTime: undefined,
day: undefined,
filePath: undefined,
userName: undefined,
deptId: undefined,
deptName: undefined,
processInstanceId: undefined,
userId: undefined,
status: undefined
}
formRef.value?.resetFields()
}
</script>
<style scoped lang="scss">
</style>

102
src/views/Home/xjgl/XjglCreate.vue
View File

@ -27,34 +27,6 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="销假天数" prop="day">
<el-row style="width: 100%;" :gutter="2">
<el-col :span="22">
<el-input v-model.number="formData.day" placeholder="请输入销假天数" />
</el-col>
<el-col :span="2">
<el-button @click="openForm()" size="small" type="text">
<Icon icon="ep:plus" />
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="请假类型" prop="qjglType">
<el-select v-model="formData.qjglType" placeholder="请选择请假类型">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_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="startTime">
@ -63,6 +35,7 @@
type="datetime"
value-format="x"
placeholder="选择销假开始时间"
@change="getDay()"
/>
</el-form-item>
</el-col>
@ -73,13 +46,44 @@
type="datetime"
value-format="x"
placeholder="选择销假结束时间"
@change="getDay()"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="请假id" prop="qjglId">
<el-input v-model="formData.qjglId" placeholder="请输入请假id" />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="销假天数" prop="day">
<el-row style="width: 100%;margin-bottom: 5px;" :gutter="2">
<el-col :span="22">
<el-input v-model.number="formData.day" placeholder="请输入销假天数" disabled />
</el-col>
<el-col :span="2">
<el-button @click="openForm()" size="small" type="text">
<Icon icon="ep:plus" />
</el-button>
</el-col>
</el-row>
<el-row style="width: 100%;" :gutter="2">
<el-col :span="24">
<el-link @click="openQjglForm()" class="mx-1" type="primary">查看详情</el-link>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="请假类型" prop="qjglType">
<el-select v-model="formData.qjglType" placeholder="请选择请假类型" disabled>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="销假原因" prop="cancelReason">
<el-input autosize v-model="formData.cancelReason" type="textarea" placeholder="请输入销假原因" />
</el-form-item>
@ -93,7 +97,10 @@
</el-row>
</template>
</el-card>
<!-- 选择请假数据 -->
<SelectQjgl ref="selectRef" @success="changeForm"/>
<!-- 查看请假数据 -->
<QjglViewForm ref="selectQjglRef" />
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
@ -104,6 +111,7 @@ import {useTagsViewStore} from "@/store/modules/tagsView";
import {getUserProfile} from "@/api/system/user/profile";
import {FormProcessMappingApi} from "@/api/bpm/formprocessmapping";
import SelectQjgl from "@/views/Home/qjgl/SelectQjgl.vue";
import QjglViewForm from "@/views/Home/qjgl/QjglViewForm.vue";
/** 销假管理 表单 */
defineOptions({ name: 'XjglForm' })
@ -116,6 +124,7 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
const formData = ref({
id: undefined,
title: undefined,
qjglTitle: undefined,
userName: undefined,
userId: undefined,
deptName: undefined,
@ -124,7 +133,7 @@ const formData = ref({
qjglType: undefined,
startTime: undefined,
endTime: undefined,
day: undefined,
day: 0,
cancelReason: undefined,
remarks: undefined,
status: undefined,
@ -149,15 +158,44 @@ const formRef = ref() // 表单 Ref
const userInfo = ref('')
const deptInfo = ref('')
const selectQjglRef = ref()
const openQjglForm = ()=> {
selectQjglRef.value.open(formData.value.qjglId);
}
/** 添加/修改操作 车辆选择 */
const selectRef = ref()
const openForm = () => {
selectRef.value.open()
}
const oneDay = 24 * 60 * 60 * 1000;
const getDay = ()=> {
if (formData.value.startTime && formData.value.endTime) {
const startTime = formData.value.startTime
const endTime = formData.value.endTime
if (startTime > endTime) {
formData.value.endTime = undefined
message.error("开始时间必须大于结束时间")
return;
}
const timeDiff = endTime - startTime;
if (timeDiff != undefined && timeDiff > 0) {
formData.value.day = Math.floor(timeDiff / oneDay);
}else {
formData.value.startTime = undefined
formData.value.endTime = undefined
message.error("开始时间必须大于结束时间")
return;
}
}
}
/** 获取数据后赋值 */
const changeForm = (val:any) => {
const form = formData.value
form.qjglId = val.id
form.qjglTitle = val.title
form.qjglType = val.type
form.startTime = val.startTime
form.endTime = val.endTime

56
src/views/Home/xjgl/XjglDetail.vue
View File

@ -24,25 +24,6 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="销假天数" prop="day">
<el-input v-model="formData.day" placeholder="请输入销假天数" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="请假类型" prop="qjglType">
<el-select v-model="formData.qjglType" placeholder="请选择请假类型" disabled>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_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="startTime">
@ -67,9 +48,34 @@
</el-form-item>
</el-col>
</el-row>
<el-form-item label="请假id" prop="qjglId">
<el-input v-model="formData.qjglId" placeholder="请输入请假id" disabled />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="销假天数" prop="day">
<el-row style="width: 100%; margin-bottom: 5px">
<el-col :span="24">
<el-input v-model="formData.day" placeholder="请输入销假天数" disabled />
</el-col>
</el-row>
<el-row style="width: 100%;">
<el-col :span="24">
<el-link @click="openQjglForm()" class="mx-1" type="primary">查看详情</el-link>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="请假类型" prop="qjglType">
<el-select v-model="formData.qjglType" placeholder="请选择请假类型" disabled>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="销假原因" prop="cancelReason">
<el-input v-model="formData.cancelReason" type="textarea" placeholder="请输入销假原因" disabled />
</el-form-item>
@ -78,11 +84,13 @@
</el-form-item>
</el-form>
</el-card>
<QjglViewForm ref="selectQjglRef" />
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import { XjglApi } from '@/api/home/xjgl'
import QjglViewForm from "@/views/Home/qjgl/QjglViewForm.vue";
/** 销假管理 表单 */
defineOptions({ name: 'XjglForm' })
@ -127,6 +135,10 @@ const formRules = reactive({
})
const formRef = ref() // 表单 Ref
const selectQjglRef = ref()
const openQjglForm = ()=> {
selectQjglRef.value.open(formData.value.qjglId);
}
/** 打开弹窗 */
defineExpose({ open }) // 提供 open 方法，用于打开弹窗