138 lines
4.2 KiB
Vue
138 lines
4.2 KiB
Vue
<template>
|
|
<div class="request-page">
|
|
<el-card class="form-card" shadow="never">
|
|
<div slot="header" class="card-header">
|
|
<span>请假申请</span>
|
|
<div class="actions">
|
|
<el-button size="mini" icon="el-icon-arrow-left" @click="$router.back()">返回</el-button>
|
|
</div>
|
|
</div>
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px" size="small">
|
|
<el-form-item label="申请人" prop="empId">
|
|
<el-select
|
|
v-model="form.empId"
|
|
filterable
|
|
clearable
|
|
placeholder="选择申请人"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="emp in employees"
|
|
:key="emp.empId"
|
|
:label="emp.empName || emp.empNo || emp.empId"
|
|
:value="emp.empId"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="请假类型" prop="leaveType">
|
|
<el-input v-model="form.leaveType" placeholder="年假/事假/病假等" />
|
|
</el-form-item>
|
|
<el-form-item label="开始时间" prop="startTime">
|
|
<el-date-picker v-model="form.startTime" type="datetime" placeholder="请选择开始时间" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="结束时间" prop="endTime">
|
|
<el-date-picker v-model="form.endTime" type="datetime" placeholder="请选择结束时间" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="时长(小时)" prop="hours">
|
|
<el-input-number v-model="form.hours" :min="0.5" :step="0.5" style="width: 180px" />
|
|
</el-form-item>
|
|
<el-form-item label="事由" prop="reason">
|
|
<el-input v-model="form.reason" type="textarea" :rows="3" placeholder="请填写请假事由" />
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="可选" />
|
|
</el-form-item>
|
|
<div class="form-actions">
|
|
<el-button @click="$router.back()">取消</el-button>
|
|
<el-button type="primary" :loading="submitting" @click="submit">提交申请</el-button>
|
|
</div>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listEmployee, addLeaveReq } from '@/api/hrm'
|
|
|
|
export default {
|
|
name: 'HrmLeaveRequest',
|
|
data() {
|
|
return {
|
|
employees: [],
|
|
submitting: false,
|
|
form: {
|
|
empId: '',
|
|
leaveType: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
hours: 0,
|
|
reason: '',
|
|
remark: ''
|
|
},
|
|
rules: {
|
|
empId: [{ required: true, message: '请选择申请人', trigger: 'change' }],
|
|
leaveType: [{ required: true, message: '请输入请假类型', trigger: 'blur' }],
|
|
startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
|
|
endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
|
|
hours: [{ required: true, message: '请输入时长', trigger: 'blur' }],
|
|
reason: [{ required: true, message: '请输入事由', trigger: 'blur' }]
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.loadEmployees()
|
|
const userId = this.$store?.state?.user?.userId
|
|
if (userId) this.form.empId = userId
|
|
},
|
|
methods: {
|
|
loadEmployees() {
|
|
listEmployee({ pageNum: 1, pageSize: 500 }).then(res => {
|
|
this.employees = res.rows || res.data || []
|
|
})
|
|
},
|
|
submit() {
|
|
this.$refs.formRef.validate(valid => {
|
|
if (!valid) return
|
|
this.submitting = true
|
|
const payload = { ...this.form }
|
|
addLeaveReq(payload)
|
|
.then(() => {
|
|
this.$message.success('提交成功')
|
|
this.$router.push('/hrm/requests')
|
|
})
|
|
.finally(() => {
|
|
this.submitting = false
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.request-page {
|
|
padding: 16px 20px 32px;
|
|
background: #f8f9fb;
|
|
}
|
|
.form-card {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
</style>
|