klp-oa/klp-ui/src/views/perf/index/SalaryPanel.vue

<template>
  <div class="salary-panel">
    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <el-input v-model="query.employeeId" size="small" placeholder="员工ID" clearable style="width: 140px" @keyup.enter.native="loadList" />
        <!-- 状态筛选：当前阶段为保证统计页能直接聚合展示，临时停用 status 参数筛选 -->
        <!-- <el-select v-model="query.status" size="small" placeholder="状态" clearable style="width: 110px" @change="loadList">
          <el-option label="草稿" :value="'0'" />
          <el-option label="已确认" :value="'1'" />
          <el-option label="已归档" :value="'2'" />
        </el-select> -->
        <el-button size="small" type="primary" icon="el-icon-search" @click="loadList">查询</el-button>
      </div>
      <div class="toolbar-right">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button size="small" type="success" icon="el-icon-s-operation" :loading="generating" @click="handleBatchGenerate">一键生成</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-wrap">
    <el-table :data="list" stripe size="small" v-loading="loading" empty-text="暂无薪资记录" class="inline-edit-table" border>
      <!-- 只读列 -->
      <!-- <el-table-column prop="employeeId" label="员工ID" width="90" /> -->
      <!-- 状态列：同上，临时停用 -->
      <!-- <el-table-column prop="status" label="状态" width="70" align="center">
        <template slot-scope="scope">
          <el-tag :type="statusType(scope.row.status)" size="small">{{ statusLabel(scope.row.status) }}</el-tag>
        </template>
      </el-table-column> -->

      <!-- 薪资基数 -->
      <el-table-column label="底薪" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.baseSalary" class="cell-input cell-input--base" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="绩效基数" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.perfBase" class="cell-input cell-input--base" @change="markDirty(s.row)" />
      </template></el-table-column>

      <!-- 考核得分 -->
      <el-table-column label="考核得分" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.perfScore" class="cell-input cell-input--coeff" @change="markDirty(s.row)" />
      </template></el-table-column>

      <!-- 系数 -->
      <el-table-column label="绩效系数" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.perfCoeff" class="cell-input cell-input--coeff" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="车间系数" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.deptCoeff" class="cell-input cell-input--coeff" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="岗位系数" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.posCoeff" class="cell-input cell-input--coeff" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="固定系数" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.fixedCoeff" class="cell-input cell-input--coeff" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="调整系数" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.adjCoeff" class="cell-input cell-input--coeff" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="手动调整系数" width="100" align="right"><template slot-scope="s">
        <input v-model="s.row.adjCoeffManual" class="cell-input cell-input--coeff" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="总系数" width="80" align="right"><template slot-scope="s">
        <input v-model="s.row.totalCoeff" class="cell-input cell-input--coeff" @change="markDirty(s.row)" />
      </template></el-table-column>

      <!-- 绩效工资 -->
      <el-table-column label="绩效工资" width="100" align="right"><template slot-scope="s">
        <input v-model="s.row.perfWage" class="cell-input cell-input--amount" @change="markDirty(s.row)" />
      </template></el-table-column>

      <!-- 动态扣款列 -->
      <el-table-column
        v-for="item in deductionItems" :key="'ded-'+item.itemName"
        :label="item.itemName" width="100" align="right"
      ><template slot-scope="s">
        <input v-model="s.row._d[item.itemName]" class="cell-input cell-input--deduct" @change="onDeductChange(s.row); markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="扣款合计" width="90" align="right">
        <template slot-scope="scope"><span class="cell-readonly cell-readonly--deduct">{{ scope.row._deductionsTotal }}</span></template>
      </el-table-column>

      <!-- 动态奖励列 -->
      <el-table-column
        v-for="item in bonusItems" :key="'bon-'+item.itemName"
        :label="item.itemName" width="100" align="right"
      ><template slot-scope="s">
        <input v-model="s.row._b[item.itemName]" class="cell-input cell-input--bonus" @change="onBonusChange(s.row); markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="奖励合计" width="90" align="right">
        <template slot-scope="scope"><span class="cell-readonly cell-readonly--bonus">{{ scope.row._bonusesTotal }}</span></template>
      </el-table-column>

      <!-- 金额 -->
      <el-table-column label="其他金额" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.otherAmount" class="cell-input cell-input--amount" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="实领薪资" width="100" align="right"><template slot-scope="s">
        <input v-model="s.row.actualSalary" class="cell-input cell-input--amount" @change="markDirty(s.row)" />
      </template></el-table-column>

      <!-- 参考值 -->
      <el-table-column label="固薪参考" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.fixedSalaryRef" class="cell-input cell-input--ref" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="调薪参考" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.adjSalaryRef" class="cell-input cell-input--ref" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="包薪每班参考" width="100" align="right"><template slot-scope="s">
        <input v-model="s.row.baoPerShiftRef" class="cell-input cell-input--ref" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="包薪参考" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.baoSalaryRef" class="cell-input cell-input--ref" @change="markDirty(s.row)" />
      </template></el-table-column>
      <el-table-column label="总薪参考" width="90" align="right"><template slot-scope="s">
        <input v-model="s.row.totalSalaryRef" class="cell-input cell-input--ref" @change="markDirty(s.row)" />
      </template></el-table-column>

      <!-- 备注 -->
      <el-table-column label="备注" min-width="140"><template slot-scope="s">
        <input v-model="s.row.remark" class="cell-input cell-input--remark" @change="markDirty(s.row)" />
      </template></el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="90" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row._dirty" type="text" size="mini" icon="el-icon-check" :loading="scope.row._saving" class="btn-save" @click="saveRow(scope.row)">保存</el-button>
          <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <div class="pagination-wrapper">
      <el-pagination
        :current-page="query.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { listPerfSalary, addPerfSalary, updatePerfSalary, delPerfSalary } from '@/api/perf/salary'
import { listEmployeeInfo } from '@/api/wms/employeeInfo'
import { listPerfDeptItemConfig } from '@/api/perf/deptItemConfig'

export default {
  name: 'SalaryPanel',
  props: {
    deptId: { type: [Number, String], default: null },
    deptName: { type: String, default: '' },
    period: { type: String, default: '' }
  },
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
        employeeId: '',
        // status: ''
      },
      deductionItems: [],
      bonusItems: [],
      generating: false
    }
  },
  watch: {
    deptId: { immediate: true, handler: 'onDeptChange' },
    period: 'onDeptChange'
  },
  methods: {
    fmt(val) {
      return val != null ? val : '-'
    },
    // statusType(status) {
    //   return { '0': 'info', '1': 'warning', '2': 'success' }[status] || 'info'
    // },
    // statusLabel(status) {
    //   return { '0': '草稿', '1': '已确认', '2': '已归档' }[status] || '草稿'
    // },
    onDeptChange() {
      this.loadItemConfig()
      this.loadList()
    },
    loadItemConfig() {
      if (!this.deptId || !this.period) return
      listPerfDeptItemConfig({ deptId: this.deptId, month: this.period + '-01' }).then(res => {
        const rows = res.rows || []
        this.deductionItems = rows.filter(r => r.itemType === 1 && r.isEnabled === 1)
        this.bonusItems = rows.filter(r => r.itemType === 2 && r.isEnabled === 1)
      }).catch(() => {
        this.deductionItems = []
        this.bonusItems = []
      })
    },
    /* 解析扣款/奖励 JSON 到行对象 */
    parseRowItems(row) {
      if (!row._d) {
        const d = {}
        try { Object.assign(d, JSON.parse(row.deductionsJson || '{}')) } catch {}
        this.deductionItems.forEach(item => { if (!(item.itemName in d)) d[item.itemName] = '' })
        this.$set(row, '_d', d)
      }
      if (!row._b) {
        const b = {}
        try { Object.assign(b, JSON.parse(row.bonusesJson || '{}')) } catch {}
        this.bonusItems.forEach(item => { if (!(item.itemName in b)) b[item.itemName] = '' })
        this.$set(row, '_b', b)
      }
      this.recalcTotals(row)
    },
    recalcTotals(row) {
      const sumD = Object.values(row._d || {}).reduce((s, v) => s + (parseFloat(v) || 0), 0)
      const sumB = Object.values(row._b || {}).reduce((s, v) => s + (parseFloat(v) || 0), 0)
      this.$set(row, '_deductionsTotal', sumD)
      this.$set(row, '_bonusesTotal', sumB)
    },
    onDeductChange(row) { this.recalcTotals(row) },
    onBonusChange(row) { this.recalcTotals(row) },
    markDirty(row) { this.$set(row, '_dirty', true) },

    loadList() {
      if (!this.deptId || !this.period) return
      this.loading = true
      const params = {
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        deptId: this.deptId,
        period: this.period,
        employeeId: this.query.employeeId || undefined
      }
      listPerfSalary(params).then(res => {
        this.list = (res.rows || []).map(r => {
          this.$set(r, '_dirty', false)
          this.$set(r, '_saving', false)
          this.parseRowItems(r)
          return r
        })
        this.total = res.total || 0
      }).finally(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.loadList()
    },
    handlePageChange(val) {
      this.query.pageNum = val
      this.loadList()
    },
    handleAdd() {
      const row = {
        employeeId: '',
        deptId: this.deptId,
        period: this.period,
        baseSalary: '',
        perfBase: '',
        perfScore: '',
        perfCoeff: '',
        deptCoeff: '',
        posCoeff: '',
        fixedCoeff: '',
        adjCoeff: '',
        adjCoeffManual: '',
        totalCoeff: '',
        perfWage: '',
        deductionsJson: '{}',
        bonusesJson: '{}',
        otherAmount: '',
        actualSalary: '',
        fixedSalaryRef: '',
        adjSalaryRef: '',
        baoPerShiftRef: '',
        baoSalaryRef: '',
        totalSalaryRef: '',
        status: '0',
        remark: '',
        _dirty: true,
        _saving: false,
        _d: {},
        _b: {},
        _deductionsTotal: 0,
        _bonusesTotal: 0
      }
      this.deductionItems.forEach(item => { row._d[item.itemName] = '' })
      this.bonusItems.forEach(item => { row._b[item.itemName] = '' })
      this.list.unshift(row)
    },
    saveRow(row) {
      this.$set(row, '_saving', true)
      const data = { ...row }
      // 序列化扣款/奖励 JSON
      data.deductionsJson = JSON.stringify(row._d || {})
      data.bonusesJson = JSON.stringify(row._b || {})
      data.deductionsTotal = row._deductionsTotal
      data.bonusesTotal = row._bonusesTotal
      // 清理内部字段
      delete data._d; delete data._b; delete data._dirty; delete data._saving
      delete data._deductionsTotal; delete data._bonusesTotal

      const api = data.id ? updatePerfSalary : addPerfSalary
      api(data).then(res => {
        // 乐观更新：如果是新增，用返回值更新 id
        if (!data.id && res.data) {
          this.$set(row, 'id', res.data.id || res.data)
        }
        this.$set(row, '_dirty', false)
        this.$message.success('保存成功')
      }).catch(() => {
        this.$message.error('保存失败')
        this.loadList() // 失败则重新加载以回滚
      }).finally(() => {
        this.$set(row, '_saving', false)
      })
    },
    handleDel(row) {
      if (!row.id) {
        // 未保存的新行直接移除
        const idx = this.list.indexOf(row)
        if (idx >= 0) this.list.splice(idx, 1)
        return
      }
      this.$confirm(`确认删除该薪资记录吗？`, '提示', { type: 'warning' }).then(() => {
        delPerfSalary(row.id).then(() => {
          this.$message.success('删除成功')
          this.loadList()
        })
      }).catch(() => {})
    },
    handleBatchGenerate() {
      if (!this.deptName) {
        this.$message.warning('缺少部门名称')
        return
      }
      this.$confirm(`确认根据"${this.deptName}"下的在职员工，一键生成本月薪资记录吗？`, '提示', { type: 'info' }).then(() => {
        this.generating = true
        listEmployeeInfo({ dept: this.deptName, isLeave: 0, pageSize: 9999 }).then(empRes => {
          const employees = empRes.rows || []
          if (employees.length === 0) {
            this.$message.warning('该部门下暂无在职员工')
            return
          }
          listPerfSalary({ deptId: this.deptId, period: this.period, pageSize: 9999 }).then(salaryRes => {
            const existing = new Set((salaryRes.rows || []).map(r => String(r.employeeId)))
            const toInsert = employees.filter(e => !existing.has(String(e.employeeId) || String(e.infoId)))
            if (toInsert.length === 0) {
              this.$message.info('该部门下所有在职员工已有本月薪资记录')
              return
            }
            const emptyJson = JSON.stringify({})
            const tasks = toInsert.map(emp => addPerfSalary({
              employeeId: emp.employeeId || emp.infoId || '',
              deptId: this.deptId,
              period: this.period,
              baseSalary: emp.baseSalary || 0,
              perfBase: emp.perfBase || 0,
              posCoeff: emp.posCoeffDefault || 0,
              perfScore: 0,
              perfCoeff: 0,
              deptCoeff: 0,
              fixedCoeff: 0,
              adjCoeff: 0,
              adjCoeffManual: 0,
              totalCoeff: 0,
              perfWage: 0,
              deductionsJson: emptyJson,
              deductionsTotal: 0,
              bonusesJson: emptyJson,
              bonusesTotal: 0,
              otherAmount: 0,
              actualSalary: 0,
              fixedSalaryRef: '',
              adjSalaryRef: '',
              baoPerShiftRef: '',
              baoSalaryRef: '',
              totalSalaryRef: '',
              status: '0',
              remark: ''
            }))
            return Promise.allSettled(tasks)
          }).then(results => {
            if (!results) return
            const ok = results.filter(r => r.status === 'fulfilled').length
            const fail = results.filter(r => r.status === 'rejected').length
            this.$message.success(`生成完成：成功 ${ok} 条${fail > 0 ? `，失败 ${fail} 条` : ''}`)
            this.loadList()
          })
        }).finally(() => {
          this.generating = false
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.salary-panel {
  padding: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.table-wrap {
  flex: 1;
  overflow: auto;
}

::v-deep .inline-edit-table {
  border: none;
  &::before, &::after { display: none; }
  th { border: none; padding: 2px 4px; font-size: 12px; color: #909399; }
  td {
    border: none;
    border-right: 1px solid #ebeef5;
    padding: 0;
  }
  .el-table__body tr:hover td { background-color: #f5f7fa !important; }
  .cell { padding: 0; height: 100%; }
}

/* 原生 input */
.cell-input {
  width: 100%;
  height: 28px;
  border: none;
  outline: none;
  text-align: right;
  padding: 0 6px;
  font-size: 12px;
  color: #303133;
  font-family: inherit;
  box-sizing: border-box;
  display: block;
  line-height: 28px;
  transition: background-color 0.15s;

  &:focus {
    background-color: #fff;
    box-shadow: 0 0 0 1px #409eff inset;
    border-radius: 0;
  }

  &--base  { background-color: #e8f4fd; }
  &--coeff { background-color: #fff8e1; }
  &--deduct { background-color: #ffebee; }
  &--bonus { background-color: #e8f5e9; }
  &--amount { background-color: #f3e5f5; }
  &--ref   { background-color: #f5f5f5; }
  &--remark { background-color: #fafafa; text-align: left; }
}

.cell-readonly {
  display: block;
  text-align: right;
  padding: 0 6px;
  font-size: 12px;
  color: #303133;
  font-weight: 500;
  line-height: 28px;
  height: 28px;

  &--deduct { color: #e53935; }
  &--bonus  { color: #43a047; }
}

.btn-save {
  color: #67c23a !important;
}

.pagination-wrapper {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.el-table .el-button + .el-button {
  margin-left: 0;
}
</style>