klp-oa/klp-ui/src/views/hrm/requests/travel.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="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>