hcm前端2版

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

@@ -1,10 +1,40 @@
 <template>
   <div class="hrm-page">
+    <section class="stats-grid">
+      <el-card class="metal-panel kpi-card" shadow="hover">
+        <div class="kpi-title">薪酬方案数</div>
+        <div class="kpi-value">{{ payPlanList.length }}</div>
+        <div class="kpi-sub">启用 {{ payPlanList.filter(i => i.status === 'active').length }} 个</div>
+      </el-card>
+      <el-card class="metal-panel kpi-card" shadow="hover">
+        <div class="kpi-title">薪酬批次数</div>
+        <div class="kpi-value">{{ payRunList.length }}</div>
+        <div class="kpi-sub">审批中 {{ payRunList.filter(i => i.status === 'pending').length }} 个</div>
+      </el-card>
+      <el-card class="metal-panel kpi-card" shadow="hover">
+        <div class="kpi-title">工资条总额(应发)</div>
+        <div class="kpi-value">￥{{ formatNumber(payslipList.reduce((s, i) => s + (Number(i.amountGross) || 0), 0)) }}</div>
+        <div class="kpi-sub">实发 ￥{{ formatNumber(payslipList.reduce((s, i) => s + (Number(i.amountNet) || 0), 0)) }}</div>
+      </el-card>
+      <el-card class="metal-panel kpi-card" shadow="hover">
+        <div class="kpi-title">指标快照</div>
+        <div class="kpi-value">{{ statList.length }}</div>
+        <div class="kpi-sub">最新日期：{{ latestStatDate || '-' }}</div>
+      </el-card>
+    </section>
+
     <section class="panel-grid triple">
       <el-card class="metal-panel" shadow="hover">
         <div slot="header" class="panel-header">
           <span>薪酬方案</span>
-          <el-button size="mini" icon="el-icon-refresh" @click="loadPayPlan">刷新</el-button>
+          <div class="actions-inline">
+            <el-select v-model="payPlanQuery.status" size="mini" placeholder="状态" clearable style="width:120px" @change="loadPayPlan">
+              <el-option label="启用" value="active" />
+              <el-option label="草稿/停用" value="inactive" />
+            </el-select>
+            <el-button size="mini" type="primary" icon="el-icon-plus" @click="openPlanDialog()">新增</el-button>
+            <el-button size="mini" icon="el-icon-refresh" @click="loadPayPlan">刷新</el-button>
+          </div>
         </div>
         <el-table :data="payPlanList" v-loading="payPlanLoading" height="320" stripe>
           <el-table-column label="方案" prop="planName" min-width="140" />
@@ -15,13 +45,26 @@
             </template>
           </el-table-column>
           <el-table-column label="描述" prop="remark" min-width="160" show-overflow-tooltip />
+          <el-table-column label="操作" width="140" fixed="right">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="openPlanDialog(scope.row)">编辑</el-button>
+              <el-button size="mini" type="text" @click="delPlan(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
         </el-table>
       </el-card>
 
       <el-card class="metal-panel" shadow="hover">
         <div slot="header" class="panel-header">
           <span>薪酬批次</span>
-          <el-button size="mini" icon="el-icon-refresh" @click="loadPayRun">刷新</el-button>
+          <div class="actions-inline">
+            <el-select v-model="payRunQuery.status" size="mini" placeholder="状态" clearable style="width:120px" @change="loadPayRun">
+              <el-option label="审批中" value="pending" />
+              <el-option label="已完成" value="approved" />
+            </el-select>
+            <el-button size="mini" type="primary" icon="el-icon-plus" @click="openRunDialog()">新增</el-button>
+            <el-button size="mini" icon="el-icon-refresh" @click="loadPayRun">刷新</el-button>
+          </div>
         </div>
         <el-table :data="payRunList" v-loading="payRunLoading" height="320" stripe>
           <el-table-column label="批次" prop="runName" min-width="140" />
@@ -32,6 +75,12 @@
             </template>
           </el-table-column>
           <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+          <el-table-column label="操作" width="140" fixed="right">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="openRunDialog(scope.row)">编辑</el-button>
+              <el-button size="mini" type="text" @click="delRun(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
         </el-table>
       </el-card>
 
@@ -47,14 +96,24 @@
               clearable
               @keyup.enter.native="loadPayslip"
             />
+            <el-input
+              v-model="payslipQuery.empName"
+              placeholder="员工姓名/工号"
+              size="mini"
+              style="width: 150px"
+              clearable
+              @keyup.enter.native="loadPayslip"
+            />
             <el-button size="mini" type="primary" @click="loadPayslip">查询</el-button>
+            <el-button size="mini" type="primary" icon="el-icon-plus" @click="openPayslipDialog()">新增</el-button>
+            <el-button size="mini" icon="el-icon-download" :loading="exportLoading" @click="exportPayslip">导出</el-button>
           </div>
         </div>
         <div class="dual-tables">
           <div class="table-half">
             <div class="table-title">工资条</div>
-            <el-table :data="payslipList" v-loading="payslipLoading" height="230" stripe>
-              <el-table-column label="员工" prop="empId" min-width="100" />
+            <el-table :data="payslipList" v-loading="payslipLoading" height="230" stripe @row-click="openPayslipDetail">
+              <el-table-column label="员工" prop="empName" min-width="120" />
               <el-table-column label="应发" prop="amountGross" min-width="100">
                 <template slot-scope="scope">￥{{ formatNumber(scope.row.amountGross) }}</template>
               </el-table-column>
@@ -66,11 +125,24 @@
                   <el-tag :type="statusType(scope.row.status)" size="mini">{{ scope.row.status || '-' }}</el-tag>
                 </template>
               </el-table-column>
+              <el-table-column label="操作" width="140" fixed="right">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" @click.stop="openPayslipDialog(scope.row)">编辑</el-button>
+                  <el-button size="mini" type="text" @click.stop="delPayslipRow(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </div>
           <div class="table-half">
             <div class="table-title">指标快照</div>
-            <el-table :data="statList" v-loading="statLoading" height="230" stripe>
+            <div class="actions-inline" style="margin-bottom:6px">
+              <el-select v-model="statQuery.statType" size="mini" placeholder="类型" clearable style="width:140px" @change="loadStatSnapshot">
+                <el-option label="工资成本" value="cost" />
+                <el-option label="人均成本" value="per_capita_cost" />
+                <el-option label="奖金" value="bonus" />
+              </el-select>
+            </div>
+            <el-table :data="statList" v-loading="statLoading" height="200" stripe>
               <el-table-column label="类型" prop="statType" min-width="120" />
               <el-table-column label="维度" prop="dimension" min-width="120" show-overflow-tooltip />
               <el-table-column label="数值" prop="value" min-width="100" />
@@ -80,11 +152,137 @@
         </div>
       </el-card>
     </section>
+
+    <el-dialog title="工资条详情" :visible.sync="payslipDetailVisible" width="520px" append-to-body>
+      <el-descriptions :column="2" size="small" border>
+        <el-descriptions-item label="员工">{{ payslipDetail.empName || payslipDetail.empId }}</el-descriptions-item>
+        <el-descriptions-item label="批次">{{ payslipDetail.batchNo || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="应发">￥{{ formatNumber(payslipDetail.amountGross) }}</el-descriptions-item>
+        <el-descriptions-item label="实发">￥{{ formatNumber(payslipDetail.amountNet) }}</el-descriptions-item>
+        <el-descriptions-item label="状态">{{ payslipDetail.status || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="周期">{{ payslipDetail.period || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="发放日期">{{ payslipDetail.payDate || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="备注">{{ payslipDetail.remark || '-' }}</el-descriptions-item>
+      </el-descriptions>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="payslipDetailVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 方案弹窗 -->
+    <el-dialog title="薪酬方案" :visible.sync="planDialogVisible" width="480px" append-to-body>
+      <el-form ref="planFormRef" :model="planForm" :rules="planRules" label-width="100px" size="small">
+        <el-form-item label="方案名称" prop="planName">
+          <el-input v-model="planForm.planName" />
+        </el-form-item>
+        <el-form-item label="币种">
+          <el-input v-model="planForm.currency" placeholder="如：CNY" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="planForm.status" placeholder="选择状态" style="width: 100%">
+            <el-option label="启用" value="active" />
+            <el-option label="停用/草稿" value="inactive" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="planForm.remark" type="textarea" :rows="2" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="planDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="planSubmitting" @click="submitPlan">保存</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 批次弹窗 -->
+    <el-dialog title="薪酬批次" :visible.sync="runDialogVisible" width="480px" append-to-body>
+      <el-form ref="runFormRef" :model="runForm" :rules="runRules" label-width="100px" size="small">
+        <el-form-item label="批次名称" prop="runName">
+          <el-input v-model="runForm.runName" />
+        </el-form-item>
+        <el-form-item label="核算周期" prop="period">
+          <el-input v-model="runForm.period" placeholder="如 2024-08" />
+        </el-form-item>
+        <el-form-item label="关联方案" prop="planId">
+          <el-select v-model="runForm.planId" placeholder="选择方案" filterable style="width: 100%">
+            <el-option v-for="plan in payPlanList" :key="plan.planId" :label="plan.planName" :value="plan.planId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="runForm.status" placeholder="选择状态" style="width: 100%">
+            <el-option label="审批中" value="pending" />
+            <el-option label="已完成" value="approved" />
+            <el-option label="草稿" value="draft" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="runForm.remark" type="textarea" :rows="2" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="runDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="runSubmitting" @click="submitRun">保存</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 工资条弹窗 -->
+    <el-dialog title="工资条" :visible.sync="payslipDialogVisible" width="520px" append-to-body>
+      <el-form ref="payslipFormRef" :model="payslipForm" :rules="payslipRules" label-width="110px" size="small">
+        <el-form-item label="员工" prop="empId">
+          <el-select v-model="payslipForm.empId" filterable placeholder="选择员工" style="width: 100%" :loading="employeeLoading">
+            <el-option v-for="emp in employeeOptions" :key="emp.empId" :label="`${emp.empName || emp.empCode || emp.empId}`" :value="emp.empId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="批次号" prop="batchNo">
+          <el-input v-model="payslipForm.batchNo" />
+        </el-form-item>
+        <el-form-item label="应发金额" prop="amountGross">
+          <el-input-number v-model="payslipForm.amountGross" :min="0" :step="100" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="实发金额" prop="amountNet">
+          <el-input-number v-model="payslipForm.amountNet" :min="0" :step="100" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="周期" prop="period">
+          <el-input v-model="payslipForm.period" placeholder="如 2024-08" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="payslipForm.status" placeholder="选择状态" style="width: 100%">
+            <el-option label="待发" value="pending" />
+            <el-option label="已发" value="paid" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="payslipForm.remark" type="textarea" :rows="2" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="payslipDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="payslipSubmitting" @click="submitPayslip">保存</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listPayPlan, listPayRun, listPayslip, listStatSnapshot } from '@/api/hrm'
+import {
+  listPayPlan,
+  getPayPlan,
+  addPayPlan,
+  updatePayPlan,
+  delPayPlan,
+  listPayRun,
+  getPayRun,
+  addPayRun,
+  updatePayRun,
+  delPayRun,
+  listPayslip,
+  getPayslip,
+  addPayslip,
+  updatePayslip,
+  delPayslip,
+  listEmployee,
+  listStatSnapshot
+} from '@/api/hrm'
 
 export default {
   name: 'HrmPayroll',
@@ -92,13 +290,42 @@ export default {
     return {
       payPlanList: [],
       payPlanLoading: false,
+      payPlanQuery: { status: undefined },
       payRunList: [],
       payRunLoading: false,
+      payRunQuery: { status: undefined },
       payslipList: [],
       payslipLoading: false,
-      payslipQuery: { batchNo: '' },
+      payslipQuery: { batchNo: '', empName: '' },
       statList: [],
-      statLoading: false
+      statLoading: false,
+      statQuery: { statType: undefined },
+      payslipDetailVisible: false,
+      payslipDetail: {},
+      employeeOptions: [],
+      employeeLoading: false,
+      exportLoading: false,
+      planDialogVisible: false,
+      planSubmitting: false,
+      planForm: {},
+      planRules: { planName: [{ required: true, message: '请输入方案名称', trigger: 'blur' }] },
+      runDialogVisible: false,
+      runSubmitting: false,
+      runForm: {},
+      runRules: {
+        runName: [{ required: true, message: '请输入批次名称', trigger: 'blur' }],
+        period: [{ required: true, message: '请输入核算周期', trigger: 'blur' }],
+        planId: [{ required: true, message: '请选择方案', trigger: 'change' }]
+      },
+      payslipDialogVisible: false,
+      payslipSubmitting: false,
+      payslipForm: {},
+      payslipRules: {
+        empId: [{ required: true, message: '请输入员工ID', trigger: 'blur' }],
+        amountGross: [{ required: true, message: '请输入应发金额', trigger: 'blur' }],
+        amountNet: [{ required: true, message: '请输入实发金额', trigger: 'blur' }],
+        batchNo: [{ required: true, message: '请输入批次号', trigger: 'blur' }]
+      }
     }
   },
   created() {
@@ -106,6 +333,7 @@ export default {
     this.loadPayRun()
     this.loadPayslip()
     this.loadStatSnapshot()
+    this.loadEmployees()
   },
   methods: {
     statusType(status) {
@@ -119,7 +347,7 @@ export default {
     },
     loadPayPlan() {
       this.payPlanLoading = true
-      listPayPlan({ pageNum: 1, pageSize: 50 })
+      listPayPlan({ pageNum: 1, pageSize: 50, status: this.payPlanQuery.status })
         .then(res => {
           this.payPlanList = res.rows || []
         })
@@ -129,7 +357,7 @@ export default {
     },
     loadPayRun() {
       this.payRunLoading = true
-      listPayRun({ pageNum: 1, pageSize: 50 })
+      listPayRun({ pageNum: 1, pageSize: 50, status: this.payRunQuery.status })
         .then(res => {
           this.payRunList = res.rows || []
         })
@@ -139,7 +367,7 @@ export default {
     },
     loadPayslip() {
       this.payslipLoading = true
-      listPayslip({ pageNum: 1, pageSize: 50, batchNo: this.payslipQuery.batchNo })
+      listPayslip({ pageNum: 1, pageSize: 50, batchNo: this.payslipQuery.batchNo, empName: this.payslipQuery.empName })
         .then(res => {
           this.payslipList = res.rows || []
         })
@@ -149,13 +377,169 @@ export default {
     },
     loadStatSnapshot() {
       this.statLoading = true
-      listStatSnapshot({ pageNum: 1, pageSize: 50 })
+      listStatSnapshot({ pageNum: 1, pageSize: 50, statType: this.statQuery.statType })
         .then(res => {
           this.statList = res.rows || []
         })
         .finally(() => {
           this.statLoading = false
         })
+    },
+    loadEmployees() {
+      this.employeeLoading = true
+      listEmployee({ pageNum: 1, pageSize: 500 })
+        .then(res => {
+          this.employeeOptions = res.rows || []
+        })
+        .finally(() => {
+          this.employeeLoading = false
+        })
+    },
+    openPayslipDetail(row) {
+      this.payslipDetail = { ...row }
+      this.payslipDetailVisible = true
+    },
+    // 方案 CRUD
+    openPlanDialog(row) {
+      this.planForm = row ? { ...row } : { planName: '', currency: 'CNY', status: 'active', remark: '' }
+      this.planDialogVisible = true
+      this.$nextTick(() => this.$refs.planFormRef && this.$refs.planFormRef.clearValidate())
+    },
+    submitPlan() {
+      this.$refs.planFormRef.validate(valid => {
+        if (!valid) return
+        this.planSubmitting = true
+        const api = this.planForm.planId ? updatePayPlan : addPayPlan
+        api(this.planForm)
+          .then(() => {
+            this.$message.success('已保存')
+            this.planDialogVisible = false
+            this.loadPayPlan()
+          })
+          .finally(() => {
+            this.planSubmitting = false
+          })
+      })
+    },
+    delPlan(row) {
+      this.$confirm('确认删除该方案吗？', '提示', { type: 'warning' }).then(() => {
+        delPayPlan(row.planId).then(() => {
+          this.$message.success('已删除')
+          this.loadPayPlan()
+        })
+      })
+    },
+    // 批次 CRUD
+    openRunDialog(row) {
+      this.runForm = row
+        ? { ...row }
+        : { runName: '', period: '', planId: this.payPlanList[0]?.planId, status: 'pending', remark: '' }
+      this.runDialogVisible = true
+      this.$nextTick(() => this.$refs.runFormRef && this.$refs.runFormRef.clearValidate())
+    },
+    submitRun() {
+      this.$refs.runFormRef.validate(valid => {
+        if (!valid) return
+        this.runSubmitting = true
+        const api = this.runForm.runId ? updatePayRun : addPayRun
+        api(this.runForm)
+          .then(() => {
+            this.$message.success('已保存')
+            this.runDialogVisible = false
+            this.loadPayRun()
+          })
+          .finally(() => {
+            this.runSubmitting = false
+          })
+      })
+    },
+    delRun(row) {
+      this.$confirm('确认删除该批次吗？', '提示', { type: 'warning' }).then(() => {
+        delPayRun(row.runId).then(() => {
+          this.$message.success('已删除')
+          this.loadPayRun()
+        })
+      })
+    },
+    // 工资条 CRUD
+    openPayslipDialog(row) {
+      this.payslipForm = row
+        ? { ...row }
+        : {
+            empId: '',
+            batchNo: '',
+            amountGross: 0,
+            amountNet: 0,
+            period: '',
+            status: 'pending',
+            remark: ''
+          }
+      this.payslipDialogVisible = true
+      this.$nextTick(() => this.$refs.payslipFormRef && this.$refs.payslipFormRef.clearValidate())
+    },
+    submitPayslip() {
+      this.$refs.payslipFormRef.validate(valid => {
+        if (!valid) return
+        this.payslipSubmitting = true
+        const api = this.payslipForm.slipId ? updatePayslip : addPayslip
+        api(this.payslipForm)
+          .then(() => {
+            this.$message.success('已保存')
+            this.payslipDialogVisible = false
+            this.loadPayslip()
+          })
+          .finally(() => {
+            this.payslipSubmitting = false
+          })
+      })
+    },
+    delPayslipRow(row) {
+      this.$confirm('确认删除该工资条吗？', '提示', { type: 'warning' }).then(() => {
+        delPayslip(row.slipId).then(() => {
+          this.$message.success('已删除')
+          this.loadPayslip()
+        })
+      })
+    },
+    exportPayslip() {
+      if (!this.payslipList.length) {
+        this.$message.info('暂无可导出的数据')
+        return
+      }
+      this.exportLoading = true
+      try {
+        const headers = ['员工', '批次号', '应发', '实发', '周期', '状态', '发放日期', '备注']
+        const rows = this.payslipList.map(i => [
+          i.empName || i.empId || '',
+          i.batchNo || '',
+          i.amountGross || '',
+          i.amountNet || '',
+          i.period || '',
+          i.status || '',
+          i.payDate || '',
+          (i.remark || '').replace(/\r?\n/g, ' ')
+        ])
+        const tableRows = [headers, ...rows]
+          .map(
+            r =>
+              '<tr>' +
+              r
+                .map(v => `<td style="mso-number-format:'\\@';">${String(v).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</td>`)
+                .join('') +
+              '</tr>'
+          )
+          .join('')
+        const html = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"></head><body><table>${tableRows}</table></body></html>`
+        const blob = new Blob([html], { type: 'application/vnd.ms-excel;charset=utf-8;' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `payslips_${Date.now()}.xls`
+        a.click()
+        URL.revokeObjectURL(url)
+      } finally {
+        this.exportLoading = false
+      }
     }
   }
 }
@@ -166,6 +550,12 @@ export default {
   padding: 16px 20px 32px;
   background: #f8f9fb;
 }
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 12px;
+}
 .panel-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -188,6 +578,24 @@ export default {
   gap: 8px;
   align-items: center;
 }
+.kpi-card {
+  .kpi-title {
+    font-size: 13px;
+    color: #7a7d85;
+    margin-bottom: 4px;
+  }
+  .kpi-value {
+    font-size: 22px;
+    font-weight: 700;
+    color: #303133;
+    line-height: 1.3;
+  }
+  .kpi-sub {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 2px;
+  }
+}
 .dual-tables {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -203,6 +611,9 @@ export default {
   margin-bottom: 6px;
 }
 @media (max-width: 1200px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
   .panel-grid {
     grid-template-columns: 1fr;
   }