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"
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">
<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-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-form-item label="申请时间" prop="usageDate">
<el-date-picker
v-model="formData.usageDate"
type="date"
value-format="x"
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.JBGL_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</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.number="formData.duration" placeholder="请输入加班总时长" />
</el-form-item>
<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-row>
<el-col :span="12">
<el-form-item label="申请标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入申请标题" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请时间" prop="usageDate">
<el-date-picker
v-model="formData.usageDate"
type="date"
value-format="x"
placeholder="选择申请时间"
/>
</el-form-item>
</el-col>
</el-row>
<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="选择加班开始时间"
@change="validateDate"
/>
</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="选择加班结束时间"
@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-input v-model="formData.reason" type="textarea" placeholder="请输入加班原因" />
</el-form-item>
@ -74,6 +100,7 @@ import * as DefinitionApi from '@/api/bpm/definition'
import * as UserApi from '@/api/system/user'
import {useTagsViewStore} from "@/store/modules/tagsView";
import {getUserProfile} from "@/api/system/user/profile";
import {number} from "echarts";
/** 加班管理 表单 */
defineOptions({ name: 'JbglCreate' })
@ -93,7 +120,7 @@ const formData = ref({
type: undefined,
startDate: undefined,
endDate: undefined,
duration: undefined,
duration: number | null,
reason: undefined,
status: undefined,
processInstanceId: undefined,
@ -111,6 +138,29 @@ const userList = ref<any[]>([]) // 用户列表
const deptInfo = 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 user = await getUserProfile();
@ -180,7 +230,7 @@ const formRules = reactive({
type: [{ required: true, message: '加班类型不能为空', trigger: 'change' }],
startDate: [{ 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
</script>

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

@ -9,58 +9,82 @@
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="申请标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入申请标题" disabled />
</el-form-item>
<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-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-form-item label="申请时间" prop="usageDate">
<el-date-picker
v-model="formData.usageDate"
type="date"
value-format="x"
placeholder="选择申请时间"
disabled
/>
</el-form-item>
<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-form-item label="加班开始时间" prop="startDate">
<el-date-picker
v-model="formData.startDate"
type="date"
value-format="x"
placeholder="选择加班开始时间"
disabled
/>
</el-form-item>
<el-form-item label="加班结束时间" prop="endDate">
<el-date-picker
v-model="formData.endDate"
type="date"
value-format="x"
placeholder="选择加班结束时间"
disabled
/>
</el-form-item>
<el-form-item label="加班总时长" prop="duration">
<el-input v-model="formData.duration" placeholder="请输入加班总时长" disabled />
</el-form-item>
<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-row>
<el-col :span="12">
<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="usageDate">
<el-date-picker
v-model="formData.usageDate"
type="date"
value-format="x"
placeholder="选择申请时间"
disabled
/>
</el-form-item>
</el-col>
</el-row>
<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="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-input v-model="formData.reason" type="textarea" placeholder="请输入加班原因" disabled />
</el-form-item>