hrm前端3版

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

@@ -5,7 +5,7 @@
           <div slot="header" class="panel-header">
             <span>{{ item.title }}</span>
             <div class="actions-inline">
-              <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="openCreate(item.key)">新增</el-button>
+              <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="goCreate(item.key)">新增</el-button>
               <el-select
                 v-if="item.statusField"
                 v-model="item.query.status"
@@ -65,14 +65,21 @@
         <el-col :span="12">
           <el-form :model="stampForm" label-width="110px" size="small">
             <el-form-item label="待盖章文件" prop="targetFileUrl">
-              <el-input v-model="stampForm.targetFileUrl" placeholder="PDF或图片 OSS 完整 URL" />
+              <file-upload
+                v-model="stampForm.targetFileOssId"
+                :limit="1"
+                :file-size="20"
+                :file-type="['pdf', 'png', 'jpg', 'jpeg', 'bmp', 'webp']"
+                :is-show-tip="false"
+                @success="handleTargetUploadSuccess"
+              />
             </el-form-item>
             <el-form-item label="章图片" prop="stampImageUrl">
               <el-select
                 v-model="stampForm.stampImageUrl"
                 filterable
                 clearable
-                placeholder="选择章图（字典配置）"
+                placeholder="选择章图"
                 @change="preloadStampImage"
                 style="width: 100%"
               >
@@ -131,120 +138,14 @@
       </div>
     </el-dialog>
 
-    <el-dialog
-      title="新增申请"
-      :visible.sync="createDialogVisible"
-      width="520px"
-      append-to-body
-    >
-      <div class="create-type-switch">
-        <el-radio-group v-model="createType" size="small" @change="() => (createForm = defaultCreateForm(createType))">
-          <el-radio-button label="leave">请假</el-radio-button>
-          <el-radio-button label="overtime">加班</el-radio-button>
-          <el-radio-button label="travel">出差</el-radio-button>
-          <el-radio-button label="seal">用印</el-radio-button>
-        </el-radio-group>
-        <span class="hint-text" style="margin-left:8px">先选类型，再填写必填项</span>
-      </div>
-      <el-form ref="createFormRef" :model="createForm" :rules="currentCreateRules" label-width="110px" size="small">
-        <el-form-item label="申请人">
-          <el-select
-            v-model="createForm.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>
-        <template v-if="createType === 'leave'">
-          <el-form-item label="请假类型" prop="leaveType">
-            <el-input v-model="createForm.leaveType" placeholder="年假/事假等" />
-          </el-form-item>
-          <el-form-item label="开始时间" prop="startTime">
-            <el-date-picker v-model="createForm.startTime" type="datetime" placeholder="开始" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="结束时间" prop="endTime">
-            <el-date-picker v-model="createForm.endTime" type="datetime" placeholder="结束" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="时长(小时)" prop="hours">
-            <el-input-number v-model="createForm.hours" :min="0.5" :step="0.5" />
-          </el-form-item>
-          <el-form-item label="事由" prop="reason">
-            <el-input v-model="createForm.reason" type="textarea" :rows="2" />
-          </el-form-item>
-        </template>
-        <template v-else-if="createType === 'overtime'">
-          <el-form-item label="加班类型" prop="otType">
-            <el-input v-model="createForm.otType" placeholder="工作日/休息日等" />
-          </el-form-item>
-          <el-form-item label="开始时间" prop="startTime">
-            <el-date-picker v-model="createForm.startTime" type="datetime" placeholder="开始" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="结束时间" prop="endTime">
-            <el-date-picker v-model="createForm.endTime" type="datetime" placeholder="结束" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="时长(小时)" prop="hours">
-            <el-input-number v-model="createForm.hours" :min="0.5" :step="0.5" />
-          </el-form-item>
-          <el-form-item label="事由" prop="reason">
-            <el-input v-model="createForm.reason" type="textarea" :rows="2" />
-          </el-form-item>
-        </template>
-        <template v-else-if="createType === 'travel'">
-          <el-form-item label="开始时间" prop="startTime">
-            <el-date-picker v-model="createForm.startTime" type="datetime" placeholder="开始" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="结束时间" prop="endTime">
-            <el-date-picker v-model="createForm.endTime" type="datetime" placeholder="结束" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="目的地" prop="destination">
-            <el-input v-model="createForm.destination" />
-          </el-form-item>
-          <el-form-item label="事由" prop="reason">
-            <el-input v-model="createForm.reason" type="textarea" :rows="2" />
-          </el-form-item>
-        </template>
-        <template v-else-if="createType === 'seal'">
-          <el-form-item label="用印类型" prop="sealType">
-            <el-input v-model="createForm.sealType" placeholder="合同章/法人章..." />
-          </el-form-item>
-          <el-form-item label="用途说明" prop="purpose">
-            <el-input v-model="createForm.purpose" type="textarea" :rows="2" />
-          </el-form-item>
-          <el-form-item label="申请材料附件" prop="applyFileIds">
-            <file-upload v-model="createForm.applyFileIds" :limit="5" :file-size="50" :file-type="['pdf']" />
-          </el-form-item>
-          <el-form-item label="需要回执">
-            <el-switch v-model="createForm.receiptRequired" :active-value="1" :inactive-value="0" />
-          </el-form-item>
-        </template>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="createDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="createSubmitting" @click="submitCreate">提交</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import {
   listLeaveReq,
-  listOvertimeReq,
   listTravelReq,
   listSealReq,
-  listEmployee,
-  addLeaveReq,
-  addOvertimeReq,
-  addTravelReq,
-  addSealReq,
   approveSealReq,
   rejectSealReq,
   cancelSealReq,
@@ -264,6 +165,7 @@ export default {
       stampSubmitting: false,
       stampForm: {
         targetFileUrl: '',
+        targetFileOssId: '',
         stampImageUrl: '',
         pageNo: 1,
         xPx: 0,
@@ -274,30 +176,11 @@ export default {
       currentSeal: null,
       previewNatural: { width: 0, height: 0 },
       marker: { visible: false, x: 0, y: 0, width: 0, height: 0 },
-      stampImageNatural: { width: 0, height: 0 },
-      employees: [],
-      createDialogVisible: false,
-      createType: '',
-      createSubmitting: false,
-      createForm: {},
-      createRules: {
-        empId: [{ required: true, message: '请选择申请人', trigger: 'change' }],
-        leaveType: [{ required: true, message: '请选择请假类型', trigger: 'blur' }],
-        otType: [{ required: true, message: '请输入加班类型', trigger: 'blur' }],
-        sealType: [{ required: true, message: '请输入用印类型', trigger: 'blur' }],
-        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
-        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
-        hours: [{ required: true, message: '请输入时长', trigger: 'blur' }],
-        destination: [{ required: true, message: '请输入目的地', trigger: 'blur' }],
-        purpose: [{ required: true, message: '请输入用途说明', trigger: 'blur' }],
-        applyFileIds: [{ required: true, message: '请上传附件', trigger: 'change' }],
-        reason: [{ required: true, message: '请输入事由', trigger: 'blur' }]
-      }
+      stampImageNatural: { width: 0, height: 0 }
     }
   },
   created() {
     this.initRequests()
-    this.loadEmployees()
   },
   computed: {
     applicantDisplay() {
@@ -305,23 +188,18 @@ export default {
       const name = user.nickName || user.userName || ''
       const id = user.userId || user.userId === 0 ? user.userId : ''
       return name ? `${name}${id ? ` (${id})` : ''}` : id || '当前登录人'
-    },
-    currentCreateRules() {
-      // 动态裁剪规则，避免多余必填影响校验
-      const keys = {
-        leave: ['empId', 'leaveType', 'startTime', 'endTime', 'hours', 'reason'],
-        overtime: ['empId', 'otType', 'startTime', 'endTime', 'hours', 'reason'],
-        travel: ['empId', 'startTime', 'endTime', 'destination', 'reason'],
-        seal: ['empId', 'sealType', 'purpose', 'applyFileIds']
-      }[this.createType] || []
-      const picked = {}
-      keys.forEach(k => {
-        if (this.createRules[k]) picked[k] = this.createRules[k]
-      })
-      return picked
     }
   },
   methods: {
+    goCreate(key) {
+      const routeNameMap = {
+        leave: 'HrmLeaveRequest',
+        travel: 'HrmTravelRequest',
+        seal: 'HrmSealRequest'
+      }
+      const name = routeNameMap[key]
+      if (name) this.$router.push({ name })
+    },
     statusType(status) {
       if (!status) return 'info'
       const map = { pending: 'warning', draft: 'info', approved: 'success', rejected: 'danger' }
@@ -336,7 +214,6 @@ export default {
     initRequests() {
       this.requestBlocks = [
         { key: 'leave', title: '请假单', typeField: 'leaveType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadLeaveReq },
-        { key: 'overtime', title: '加班单', typeField: 'overtimeType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadOvertimeReq },
         { key: 'travel', title: '出差单', typeField: 'travelType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadTravelReq },
         { key: 'seal', title: '用印申请', typeField: 'sealType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadSealReq }
       ]
@@ -353,17 +230,6 @@ export default {
           block.loading = false
         })
     },
-    loadOvertimeReq() {
-      const block = this.requestBlocks.find(i => i.key === 'overtime')
-      block.loading = true
-      listOvertimeReq(block.query)
-        .then(res => {
-          block.list = res.rows || []
-        })
-        .finally(() => {
-          block.loading = false
-        })
-    },
     loadTravelReq() {
       const block = this.requestBlocks.find(i => i.key === 'travel')
       block.loading = true
@@ -411,6 +277,10 @@ export default {
     },
     submitStamp() {
       if (!this.currentSeal) return
+      if (!this.stampForm.targetFileUrl) {
+        this.$message.warning('请先上传待盖章文件')
+        return
+      }
       this.stampSubmitting = true
       stampSealJava(this.currentSeal.bizId, this.stampForm)
         .then(() => {
@@ -474,66 +344,11 @@ export default {
         height: hRatio * displayHeight
       }
     },
-    openCreate(type) {
-      this.createType = type
-      this.createDialogVisible = true
-      this.createForm = this.defaultCreateForm(type)
-      this.$nextTick(() => this.$refs.createFormRef && this.$refs.createFormRef.clearValidate())
-    },
-    defaultCreateForm(type) {
-      const common = { empId: '', remark: '' }
-      if (type === 'leave') {
-        return { ...common, leaveType: '', startTime: '', endTime: '', hours: 0, reason: '' }
-      }
-      if (type === 'overtime') {
-        return { ...common, otType: '', startTime: '', endTime: '', hours: 0, reason: '' }
-      }
-      if (type === 'travel') {
-        return { ...common, startTime: '', endTime: '', destination: '', reason: '' }
-      }
-      if (type === 'seal') {
-        return { ...common, sealType: '', purpose: '', applyFileIds: '', receiptRequired: 0 }
-      }
-      return common
-    },
-    loadEmployees() {
-      listEmployee({ pageNum: 1, pageSize: 500 }).then(res => {
-        this.employees = res.rows || res.data || []
-      })
-    },
-    submitCreate() {
-      if (!this.createType) return
-      const apiMap = {
-        leave: addLeaveReq,
-        overtime: addOvertimeReq,
-        travel: addTravelReq,
-        seal: addSealReq
-      }
-      const fn = apiMap[this.createType]
-      if (!fn) return
-      // 默认申请人取当前登录用户
-      const payload = { ...this.createForm }
-      const userId = this.$store?.state?.user?.userId
-      if (userId) {
-        payload.empId = userId
-      } else {
-        this.$message.error('未获取到当前登录用户，无法提交')
-        return
-      }
-      this.$refs.createFormRef.validate(valid => {
-        if (!valid) return
-        this.createSubmitting = true
-        fn(payload)
-          .then(() => {
-            this.$message.success('提交成功')
-            this.createDialogVisible = false
-            const block = this.requestBlocks.find(i => i.key === this.createType)
-            block && block.loader()
-          })
-          .finally(() => {
-            this.createSubmitting = false
-          })
-      })
+    handleTargetUploadSuccess(fileList) {
+      const first = (fileList && fileList[0]) || {}
+      this.stampForm.targetFileUrl = first.url || ''
+      this.stampForm.targetFileOssId = first.ossId || ''
+      this.marker.visible = false
     }
   }
 }

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>

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

@@ -0,0 +1,133 @@
+<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="120px" size="small">
+        <el-form-item label="申请人" prop="empId">
+          <el-select v-model="form.empId" filterable 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="sealType">
+          <el-input v-model="form.sealType" placeholder="合同章/法人章/财务章等" />
+        </el-form-item>
+        <el-form-item label="用途说明" prop="purpose">
+          <el-input v-model="form.purpose" type="textarea" :rows="3" placeholder="填写用印用途与背景" />
+        </el-form-item>
+        <el-form-item label="申请材料附件" prop="applyFileIds">
+          <file-upload
+            v-model="form.applyFileIds"
+            :limit="5"
+            :file-size="50"
+            :file-type="['pdf']"
+          />
+          <div class="hint-text">仅支持 PDF，最多 5 个，单个不超过 50MB</div>
+        </el-form-item>
+        <el-form-item label="需要回执">
+          <el-switch v-model="form.receiptRequired" :active-value="1" :inactive-value="0" />
+        </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, addSealReq } from '@/api/hrm'
+import FileUpload from '@/components/FileUpload'
+
+export default {
+  name: 'HrmSealRequest',
+  components: { FileUpload },
+  data() {
+    return {
+      employees: [],
+      submitting: false,
+      form: {
+        empId: '',
+        sealType: '',
+        purpose: '',
+        applyFileIds: '',
+        receiptRequired: 0,
+        remark: ''
+      },
+      rules: {
+        empId: [{ required: true, message: '请选择申请人', trigger: 'change' }],
+        sealType: [{ required: true, message: '请输入用印类型', trigger: 'blur' }],
+        purpose: [{ required: true, message: '请输入用途说明', trigger: 'blur' }],
+        applyFileIds: [{ required: true, message: '请上传 PDF 附件', trigger: 'change' }]
+      }
+    }
+  },
+  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 }
+        addSealReq(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>

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

@@ -0,0 +1,167 @@
+<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="120px" size="small">
+        <el-form-item label="申请人" prop="empId">
+          <el-select v-model="form.empId" filterable 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-row :gutter="12">
+          <el-col :span="12">
+            <el-form-item label="开始时间" prop="startTime">
+              <el-date-picker v-model="form.startTime" type="datetime" placeholder="开始时间" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="结束时间" prop="endTime">
+              <el-date-picker v-model="form.endTime" type="datetime" placeholder="结束时间" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="目的地" prop="destination">
+          <el-input v-model="form.destination" placeholder="城市/地址" />
+        </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="差旅附件" prop="travelFileIds">
+          <file-upload
+            v-model="form.travelFileIds"
+            :limit="8"
+            :file-size="50"
+            :file-type="['pdf', 'jpg', 'jpeg', 'png', 'doc', 'docx']"
+            multiple
+          />
+          <div class="hint-text">上传机票、酒店、行程单等（pdf/jpg/png/doc/docx）</div>
+        </el-form-item>
+        <el-form-item label="收款人" prop="payeeName">
+          <el-input v-model="form.payeeName" placeholder="收款人姓名/公司" />
+        </el-form-item>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-form-item label="开户行" prop="bankName">
+              <el-input v-model="form.bankName" placeholder="XX银行XX支行" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="银行账号" prop="bankAccount">
+              <el-input v-model="form.bankAccount" placeholder="汇款账号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <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, addTravelReq } from '@/api/hrm'
+import FileUpload from '@/components/FileUpload'
+
+export default {
+  name: 'HrmTravelRequest',
+  components: { FileUpload },
+  data() {
+    return {
+      employees: [],
+      submitting: false,
+      form: {
+        empId: '',
+        startTime: '',
+        endTime: '',
+        destination: '',
+        reason: '',
+        travelFileIds: '',
+        payeeName: '',
+        bankName: '',
+        bankAccount: '',
+        remark: ''
+      },
+      rules: {
+        empId: [{ required: true, message: '请选择申请人', trigger: 'change' }],
+        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
+        destination: [{ required: true, message: '请输入目的地', trigger: 'blur' }],
+        reason: [{ required: true, message: '请输入事由', trigger: 'blur' }],
+        travelFileIds: [{ required: true, message: '请上传差旅附件', trigger: 'change' }],
+        payeeName: [{ required: true, message: '请输入收款人', trigger: 'blur' }],
+        bankName: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
+        bankAccount: [{ 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 }
+        addTravelReq(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: 800px;
+  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>