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-11-07 18:58:43 +08:00
parent f42adb7645
commit d8f08072c5
2 changed files with 176 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
src/views/Home/jbgl/JbglCreate.vue
View File

@ -10,54 +10,80 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="申请标题" prop="title"> <el-row>
<el-input v-model="formData.title" placeholder="请输入申请标题" /> <el-col :span="12">
</el-form-item> <el-form-item label="申请人名字" prop="userName">
<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">{{ userInfo}} </div> <div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div>
<div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="申请部门名字" prop="deptName"> <el-col :span="12">
<div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div> <el-form-item label="申请部门名字" prop="deptName">
<div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div> <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div>
</el-form-item> <div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div>
<el-form-item label="申请时间" prop="usageDate"> </el-form-item>
<el-date-picker </el-col>
v-model="formData.usageDate" </el-row>
type="date" <el-row>
value-format="x" <el-col :span="12">
placeholder="选择申请时间" <el-form-item label="申请标题" prop="title">
/> <el-input v-model="formData.title" placeholder="请输入申请标题" />
</el-form-item> </el-form-item>
<el-form-item label="加班类型" prop="type"> </el-col>
<el-select v-model="formData.type" placeholder="请选择加班类型"> <el-col :span="12">
<el-option <el-form-item label="申请时间" prop="usageDate">
v-for="dict in getIntDictOptions(DICT_TYPE.JBGL_TYPE)" <el-date-picker
:key="dict.value" v-model="formData.usageDate"
:label="dict.label" type="date"
:value="dict.value" value-format="x"
/> placeholder="选择申请时间"
</el-select> />
</el-form-item> </el-form-item>
<el-form-item label="加班开始时间" prop="startDate"> </el-col>
<el-date-picker </el-row>
v-model="formData.startDate" <el-row>
type="date" <el-col :span="12">
value-format="x" <el-form-item label="开始时间" prop="startDate">
placeholder="选择加班开始时间" <el-date-picker
/> v-model="formData.startDate"
</el-form-item> type="datetime"
<el-form-item label="加班结束时间" prop="endDate"> value-format="x"
<el-date-picker placeholder="选择加班开始时间"
v-model="formData.endDate" @change="validateDate"
type="date" />
value-format="x" </el-form-item>
placeholder="选择加班结束时间" </el-col>
/> <el-col :span="12">
</el-form-item> <el-form-item label="结束时间" prop="endDate">
<el-form-item label="加班总时长" prop="duration"> <el-date-picker
<el-input v-model.number="formData.duration" placeholder="请输入加班总时长" /> v-model="formData.endDate"
</el-form-item> type="datetime"
value-format="x"
placeholder="选择加班结束时间"
@change="validateDate"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="加班类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择加班类型">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.JBGL_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="duration">
<el-input v-model.number="formData.duration" placeholder="请输入加班总时长" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="加班原因" prop="reason"> <el-form-item label="加班原因" prop="reason">
<el-input v-model="formData.reason" type="textarea" placeholder="请输入加班原因" /> <el-input v-model="formData.reason" type="textarea" placeholder="请输入加班原因" />
</el-form-item> </el-form-item>
@ -74,6 +100,7 @@ import * as DefinitionApi from '@/api/bpm/definition'
import * as UserApi from '@/api/system/user' import * as UserApi from '@/api/system/user'
import {useTagsViewStore} from "@/store/modules/tagsView"; import {useTagsViewStore} from "@/store/modules/tagsView";
import {getUserProfile} from "@/api/system/user/profile"; import {getUserProfile} from "@/api/system/user/profile";
import {number} from "echarts";
/** 加班管理 表单 */ /** 加班管理 表单 */
defineOptions({ name: 'JbglCreate' }) defineOptions({ name: 'JbglCreate' })
@ -93,7 +120,7 @@ const formData = ref({
type: undefined, type: undefined,
startDate: undefined, startDate: undefined,
endDate: undefined, endDate: undefined,
duration: undefined, duration: number | null,
reason: undefined, reason: undefined,
status: undefined, status: undefined,
processInstanceId: undefined, processInstanceId: undefined,
@ -111,6 +138,29 @@ const userList = ref<any[]>([]) // 用户列表
const deptInfo = ref('') // 部门信息 const deptInfo = ref('') // 部门信息
const userInfo = ref('') // 用户名字 const userInfo = ref('') // 用户名字
// 计算属性：计算时间差
watchEffect(() => {
if (formData.value.startDate && formData.value.endDate) {
const start = formData.value.startDate
const end = formData.value.endDate
const differenceInMs = end - start
formData.value.duration = differenceInMs > 0 ? Math.floor(differenceInMs / (1000 * 60 * 60)) : -1;
}else {
formData.value.duration = 0
}
})
// 方法：验证开始时间是否小于结束时间
const validateDate = () => {
if (formData.value.startDate && formData.value.endDate) {
const start = formData.value.startDate
const end = formData.value.endDate
if (start > end) {
formData.value.endDate = undefined
message.error('开始时间不能大于结束时间')
}
}
}
// 获取用户部门 // 获取用户部门
const getUserInfo = async () => { const getUserInfo = async () => {
const user = await getUserProfile(); const user = await getUserProfile();
@ -180,7 +230,7 @@ const formRules = reactive({
type: [{ required: true, message: '加班类型不能为空', trigger: 'change' }], type: [{ required: true, message: '加班类型不能为空', trigger: 'change' }],
startDate: [{ required: true, message: '加班开始时间不能为空', trigger: 'blur' }], startDate: [{ required: true, message: '加班开始时间不能为空', trigger: 'blur' }],
endDate: [{ required: true, message: '加班结束时间不能为空', trigger: 'blur' }], endDate: [{ required: true, message: '加班结束时间不能为空', trigger: 'blur' }],
duration: [{ required: true,type: 'number', message: '加班总时长不能为空且是数字', trigger: 'blur' }], // duration: [{ required: true,type: 'number', message: '加班总时长不能为空且是数字', trigger: 'blur' }],
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
</script> </script>

128
src/views/Home/jbgl/JbglDetail.vue
View File

@ -9,58 +9,82 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="申请标题" prop="title"> <el-row>
<el-input v-model="formData.title" placeholder="请输入申请标题" disabled /> <el-col :span="12">
</el-form-item> <el-form-item label="申请人名字" prop="userName">
<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">{{ userInfo}} </div> <div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div>
<div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="申请部门名字" prop="deptName"> <el-col :span="12">
<div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div> <el-form-item label="申请部门名字" prop="deptName">
<div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div> <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div>
</el-form-item> <div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div>
<el-form-item label="申请时间" prop="usageDate"> </el-form-item>
<el-date-picker </el-col>
v-model="formData.usageDate" </el-row>
type="date" <el-row>
value-format="x" <el-col :span="12">
placeholder="选择申请时间" <el-form-item label="申请标题" prop="title">
disabled <el-input v-model="formData.title" placeholder="请输入申请标题" disabled />
/> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="加班类型" prop="type"> <el-col :span="12">
<el-select v-model="formData.type" placeholder="请选择加班类型" disabled> <el-form-item label="申请时间" prop="usageDate">
<el-option <el-date-picker
v-for="dict in getIntDictOptions(DICT_TYPE.JBGL_TYPE)" v-model="formData.usageDate"
:key="dict.value" type="date"
:label="dict.label" value-format="x"
:value="dict.value" placeholder="选择申请时间"
disabled disabled
/> />
</el-select> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="加班开始时间" prop="startDate"> </el-row>
<el-date-picker <el-row>
v-model="formData.startDate" <el-col :span="12">
type="date" <el-form-item label="开始时间" prop="startDate">
value-format="x" <el-date-picker
placeholder="选择加班开始时间" v-model="formData.startDate"
disabled type="datetime"
/> value-format="x"
</el-form-item> placeholder="选择加班开始时间"
<el-form-item label="加班结束时间" prop="endDate"> disabled
<el-date-picker />
v-model="formData.endDate" </el-form-item>
type="date" </el-col>
value-format="x" <el-col :span="12">
placeholder="选择加班结束时间" <el-form-item label="结束时间" prop="endDate">
disabled <el-date-picker
/> v-model="formData.endDate"
</el-form-item> type="datetime"
<el-form-item label="加班总时长" prop="duration"> value-format="x"
<el-input v-model="formData.duration" placeholder="请输入加班总时长" disabled /> placeholder="选择加班结束时间"
</el-form-item> disabled
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<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.JBGL_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
disabled
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="加班总时长" prop="duration">
<el-input v-model="formData.duration" placeholder="请输入加班总时长" disabled />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="加班原因" prop="reason"> <el-form-item label="加班原因" prop="reason">
<el-input v-model="formData.reason" type="textarea" placeholder="请输入加班原因" disabled /> <el-input v-model="formData.reason" type="textarea" placeholder="请输入加班原因" disabled />
</el-form-item> </el-form-item>