feat(人员薪资): 新增查看明细与发放记录

gaoluyang

5 天以前 834dc4ee2233ae13f87dd1722e86a583e428cebc

feat(人员薪资): 新增查看明细与发放记录

列表增加「查看明细」按钮，展示工资表全字段人员明细及实发合计；
已发放工资表增加「发放记录」按钮，展示发放信息与发放明细；新增发放时间列。

Co-Authored-By: Claude Code <noreply@anthropic.com>

 src/views/personnelManagement/monthlyStatistics/index.vue

@@ -93,6 +93,90 @@
      @close="auditDialogVisible = false"
      @success="handleAuditSuccess"
    />
    <el-dialog v-model="issueRecordVisible" title="发放记录" width="820px" append-to-body>
      <template v-if="issueRecordRow">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="工资主题">{{ issueRecordRow.salaryTitle }}</el-descriptions-item>
          <el-descriptions-item label="工资月份">{{ issueRecordRow.salaryMonth }}</el-descriptions-item>
          <el-descriptions-item label="工资总额">{{ formatAmount(issueRecordRow.totalSalary) }}</el-descriptions-item>
          <el-descriptions-item label="发放银行">{{ issueRecordRow.payBank || "-" }}</el-descriptions-item>
          <el-descriptions-item label="发放时间">{{ issueRecordRow.payTime || "-" }}</el-descriptions-item>
          <el-descriptions-item label="审核人">{{ issueRecordRow.auditUserName || "-" }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ issueRecordRow.remark || "-" }}</el-descriptions-item>
        </el-descriptions>
        <div class="issue-record-title">发放明细（{{ issueRecordDetails.length }} 人）</div>
        <el-table :data="issueRecordDetails" border size="small" max-height="360">
          <el-table-column prop="staffName" label="姓名" width="90" />
          <el-table-column prop="deptName" label="部门" width="110" />
          <el-table-column prop="postName" label="岗位" width="110" />
          <el-table-column label="应发工资" width="110" align="right">
            <template #default="{ row }">{{ formatAmount(row.grossSalary) }}</template>
          </el-table-column>
          <el-table-column label="扣款合计" width="110" align="right">
            <template #default="{ row }">{{ formatAmount(row.deductSalary) }}</template>
          </el-table-column>
          <el-table-column label="实发工资" width="110" align="right">
            <template #default="{ row }">{{ formatAmount(row.netSalary) }}</template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip />
        </el-table>
      </template>
      <template #footer>
        <el-button @click="issueRecordVisible = false">关闭</el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="detailDialogVisible"
      :title="`${detailRow.salaryTitle || '工资表'} - 人员明细`"
      width="90%"
      append-to-body
    >
      <el-descriptions :column="4" border size="small">
        <el-descriptions-item label="工资月份">
          {{ detailRow.salaryMonth || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ statusName(detailRow.status) }}
        </el-descriptions-item>
        <el-descriptions-item label="工资总额">
          {{ formatAmount(detailRow.totalSalary) }}
        </el-descriptions-item>
        <el-descriptions-item label="审核人">
          {{ detailRow.auditUserName || "-" }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="detailRow.staffSalaryDetailList || []"
        border
        size="small"
        max-height="460"
        style="margin-top: 12px"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="staffName" label="姓名" width="100" />
        <el-table-column prop="deptName" label="部门" width="110" />
        <el-table-column prop="postName" label="岗位" width="100" />
        <el-table-column prop="basicSalary" label="基本工资" width="100" align="right" />
        <el-table-column prop="pieceSalary" label="计件工资" width="100" align="right" />
        <el-table-column prop="hourlySalary" label="计时工资" width="100" align="right" />
        <el-table-column prop="otherIncome" label="其他收入" width="100" align="right" />
        <el-table-column prop="socialPersonal" label="社保个人" width="100" align="right" />
        <el-table-column prop="fundPersonal" label="公积金个人" width="120" align="right" />
        <el-table-column prop="otherDeduct" label="其他支出" width="100" align="right" />
        <el-table-column prop="socialSupplementAmount" label="社保补缴" width="100" align="right" />
        <el-table-column prop="salaryTax" label="工资个税" width="100" align="right" />
        <el-table-column prop="grossSalary" label="应发工资" width="100" align="right" />
        <el-table-column prop="deductSalary" label="应扣工资" width="100" align="right" />
        <el-table-column prop="netSalary" label="实发工资" width="100" align="right" />
        <el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
      </el-table>
      <div class="detail-total">
        实发合计：<span>¥ {{ detailTotal }}</span>
      </div>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

@@ -149,6 +233,7 @@
  },
  { label: "工资总额", prop: "totalSalary", width: 120 },
  { label: "支付银行", prop: "payBank", width: 120 },
  { label: "发放时间", prop: "payTime", width: 160, formatData: (v) => v || "-" },
  { label: "审核人", prop: "auditUserName", width: 110 },
  { label: "备注", prop: "remark", minWidth: 120 },
  {
@@ -156,8 +241,13 @@
    label: "操作",
    align: "center",
    fixed: "right",
    width: 180,
    width: 320,
    operation: [
      {
        name: "查看明细",
        type: "text",
        clickFun: (row) => openDetail(row),
      },
      {
        name: "编辑",
        type: "text",
@@ -180,6 +270,12 @@
        type: "text",
        disabled: (row) => Number(row?.status) !== 4,
        clickFun: (row) => openIssue(row),
      },
      {
        name: "发放记录",
        type: "text",
        disabled: (row) => Number(row?.status) !== 5,
        clickFun: (row) => openIssueRecord(row),
      },
    ],
  },
@@ -209,6 +305,37 @@
const auditDialogVisible = ref(false);
const auditRow = ref(null);
const auditDiaRef = ref(null);
const issueRecordVisible = ref(false);
const issueRecordRow = ref(null);

const issueRecordDetails = computed(() =>
  Array.isArray(issueRecordRow.value?.staffSalaryDetailList)
    ? issueRecordRow.value.staffSalaryDetailList
    : []
);

const detailDialogVisible = ref(false);
const detailRow = ref({});

const detailTotal = computed(() => {
  const list = Array.isArray(detailRow.value?.staffSalaryDetailList)
    ? detailRow.value.staffSalaryDetailList
    : [];
  const sum = list.reduce((acc, item) => acc + Number(item?.netSalary || 0), 0);
  return sum.toFixed(2);
});

const openDetail = (row) => {
  detailRow.value = row || {};
  detailDialogVisible.value = true;
};

const formatAmount = (v) => (v == null || v === "" ? "-" : Number(v).toFixed(2));

const openIssueRecord = (row) => {
  issueRecordRow.value = row || null;
  issueRecordVisible.value = true;
};

const issueBankOptions = computed(() => {
  const options = Array.isArray(bankSetting.value?.options) ? bankSetting.value.options : [];
@@ -410,4 +537,20 @@
.table_list {
  margin-top: 20px;
}
.issue-record-title {
  margin: 16px 0 8px;
  font-weight: 600;
  font-size: 14px;
}
.detail-total {
  margin-top: 12px;
  text-align: right;
  font-size: 14px;
  color: #606266;
}
.detail-total span {
  color: #f56c6c;
  font-weight: 700;
  font-size: 16px;
}
</style>