hrm前端3版

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>