feat(hrm): 统一审批状态显示并添加外出条打印功能

- 在请假、外出申请页面统一审批状态显示为标签样式
- 将审批状态字段从approveStatus改为approvalStatus
- 添加外出条打印组件，支持PDF格式打印
- 优化审批状态标签颜色和文本显示
- 修复已撤销状态显示错误问题

klp-ui/src/views/wms/hrm/apply/goout.vue

@@ -37,7 +37,7 @@
             <el-form-item label="外出小时数" prop="outHours">
               <el-input v-model="form.outHours" placeholder="选择时间后自动计算，也可手动修改" />
             </el-form-item>
-             <el-form-item label="外出地点" prop="outPlace">
+            <el-form-item label="外出地点" prop="outPlace">
               <el-input v-model="form.outPlace" type="textarea" placeholder="请输入内容" />
             </el-form-item>
             <el-form-item label="外出原因" prop="outReason">
@@ -51,7 +51,8 @@
             </el-form-item>
           </el-form>
           <div style="text-align: center;">
-            <el-button type="primary" @click="handleSubmit" v-loading="loading">{{ form.applyId ? '更新申请' : '提交申请' }}</el-button>
+            <el-button type="primary" @click="handleSubmit" v-loading="loading">{{ form.outId ? '更新申请' : '提交申请'
+            }}</el-button>
             <el-button @click="handleReset">重置表单</el-button>
           </div>
         </el-card>
@@ -63,7 +64,13 @@
             <el-button style="float: right;" icon="el-icon-refresh" @click="getList">刷新</el-button>
           </template>
           <el-table v-loading="loading" :data="leaveRequestList">
-            <el-table-column label="申请状态" align="center" prop="approvalStatus"></el-table-column>
+            <el-table-column prop="approvalStatus" label="审批状态" align="center">
+              <template slot-scope="scope">
+                <el-tag :type="getStatusTagType(scope.row.approvalStatus)">
+                  {{ getStatusText(scope.row.approvalStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
             <el-table-column label="外出类型" align="center" prop="outType">
               <template slot-scope="scope">
                 <dict-tag :options="dict.type.hrm_out_type" :value="scope.row.outType" />
@@ -89,9 +96,13 @@
             <el-table-column label="外出地点" align="center" prop="outPlace" show-overflow-tooltip />
             <el-table-column label="外出原因" align="center" prop="outReason" show-overflow-tooltip />
             <el-table-column label="操作" align="center" width="160">
-              <template slot-scope="scope" v-if="scope.row.approvalStatus === '待审批'">
-                <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)">修改</el-button>
-                <el-button icon="el-icon-delete" size="mini" @click="handleWithdraw(scope.row)">撤回</el-button>
+              <template slot-scope="scope">
+                <el-button icon="el-icon-printer" size="mini" v-if="scope.row.approvalStatus === '已同意'"
+                  @click="handlePrint(scope.row)">打印</el-button>
+                <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)"
+                  v-if="scope.row.approvalStatus === '待审批'">修改</el-button>
+                <el-button icon="el-icon-delete" size="mini" @click="handleWithdraw(scope.row)"
+                  v-if="scope.row.approvalStatus === '待审批'">撤回</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -100,6 +111,8 @@
         </el-card>
       </el-col>
     </el-row>
+
+    <out-label-printer ref="outLabelPrinter" :printer-info="printerInfo"></out-label-printer>
   </div>
 </template>
 
@@ -109,13 +122,15 @@ import { listApproval, updateApproval } from "@/api/wms/approval"
 import { listDept } from "@/api/system/dept"
 import FileUpload from '@/components/FileUpload'
 import DictSelect from '@/components/DictSelect'
+import OutLabelPrinter from '../components/outLabelPrinter'
 
 export default {
   name: 'LeaveApply',
   dicts: ['hrm_leave_shift', 'hrm_out_type', 'hrm_department', 'hrm_leave_employee'],
   components: {
     FileUpload,
-    DictSelect
+    DictSelect,
+    OutLabelPrinter
   },
   data() {
     return {
@@ -134,18 +149,17 @@ export default {
       },
       // 表单校验规则【核心新增：完整必填校验】
       rules: {
-        leaveTitle: [{ required: true, message: '请假原因不能为空', trigger: ['blur', 'change'] }],
-        leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
-        applicantName: [{ required: true, message: '请假人姓名不能为空', trigger: 'change' }],
+        outType: [{ required: true, message: '外出类型不能为空', trigger: 'change' }],
+        applicantName: [{ required: true, message: '外出人姓名不能为空', trigger: 'change' }],
         startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
         endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
-        leaveShift: [{ required: true, message: '请假班次不能为空', trigger: 'change' }],
-        leaveDays: [
-          { required: true, message: '请假天数不能为空', trigger: ['blur', 'change'] },
-        ],
+        outHours: [{ required: true, message: '外出小时数不能为空', trigger: ['blur', 'change'] }],
+        outPlace: [{ required: true, message: '外出地点不能为空', trigger: ['blur', 'change'] }],
+        outReason: [{ required: true, message: '外出原因不能为空', trigger: ['blur', 'change'] }],
         applicantDeptName: [{ required: true, message: '审批部门不能为空', trigger: 'change' }],
       },
-      deptOptions: []
+      deptOptions: [],
+      printerInfo: {},
     }
   },
   // 核心新增：监听开始/结束时间变化，自动计算天数
@@ -247,6 +261,35 @@ export default {
         this.form = response.data;
       });
     },
+    handlePrint(row) {
+      const startYear = new Date(row.startTime).getFullYear()
+      const endYear = new Date(row.endTime).getFullYear()
+      const startMonth = new Date(row.startTime).getMonth() + 1
+      const endMonth = new Date(row.endTime).getMonth() + 1
+      const startDay = new Date(row.startTime).getDate()
+      const endDay = new Date(row.endTime).getDate()
+      const applyName = row.applicantName
+      const approverName = row.approverName
+      const reason = row.outReason
+      const outHours = parseInt(row.outHours)
+      const outPlace = row.outPlace
+      this.printerInfo = {
+        startYear,
+        endYear,
+        startMonth,
+        endMonth,
+        startDay,
+        endDay,
+        applyName,
+        approverName,
+        reason,
+        outHours,
+        outPlace,
+      }
+      this.$nextTick(() => {
+        this.$refs["outLabelPrinter"].print()
+      })
+    },
     /** 提交按钮 */
     handleSubmit() {
       this.form.outTitle = `${this.form.applicantName}-${this.form.outType}-${this.form.startTime}-${this.form.outReason || ''}`
@@ -289,6 +332,27 @@ export default {
         this.loading = false;
       });
     },
+    // 获取审批状态对应的标签类型
+    getStatusTagType(status) {
+      const typeMap = {
+        '待审批': 'warning',
+        '已同意': 'success',
+        '已驳回': 'danger',
+        '已撤销': 'info',
+      }
+      return typeMap[status] || 'default'
+    },
+
+    // 获取审批状态的中文文本
+    getStatusText(status) {
+      const textMap = {
+        '待审批': '待审批',
+        '已同意': '已同意',
+        '已驳回': '已驳回',
+        '已撤销': '已撤销',
+      }
+      return textMap[status] || '未知状态'
+    },
     // 核心新增：自动计算请假天数的方法
     calculateLeaveDays() {
       const { startTime, endTime } = this.form;