hrm前端3版

klp-ui/src/views/hrm/requests/leave.vue

@@ -0,0 +1,137 @@
+<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>