Cold_erp_web/src/views/salary/SalaryCount.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { TableColumnCtx } from 'element-plus'
import { Salary_List, Salary_Send, Salary_Excel } from '@/api/salary/index'
import { ElMessage } from 'element-plus'
let date = new Date()
const year = date.getFullYear()
const month = date.getMonth()
const salaryFromData = reactive({
  year: year + '',
  month: (month < 10 ? '0' : '') + month,
  T_uuid: ''
})
const tableTH = [
  { type: 'index', label: '序号', width: '60px' },
  { prop: 'T_user_name', label: '姓名' },
  { prop: 'T_user_dept', label: '部门' },
  { prop: 'T_user_post', label: '岗位' },
  { prop: 'T_base', label: '基本工资', sortable: true, width: '120px' },
  { prop: 'T_post', label: '岗位工资', sortable: true, width: '120px' },
  { prop: 'T_seniority', label: '工龄工资', sortable: true, width: '120px' },
  { prop: 'T_perf', label: '绩效金额', sortable: true, width: '120px' },
  { prop: 'T_perf_score', label: '绩效得分', sortable: true, width: '120px' },
  { prop: 'T_actual_Perf', label: '实发绩效', sortable: true, width: '120px' },
  { prop: 'T_back_payment', label: '其他补款', sortable: true, width: '120px' },
  { prop: 'T_attendance', label: '考勤扣款', sortable: true, width: '120px' },
  { prop: 'T_cut_payment', label: '其他扣款', sortable: true, width: '120px' },
  { prop: 'T_laballot', label: '应发合计', sortable: true, width: '120px' },
  { prop: 'T_pension_insurance', label: '养老保险', sortable: true, width: '120px' },
  { prop: 'T_unemployment_insurance', label: '失业保险', sortable: true, width: '120px' },
  { prop: 'T_medical_insurance', label: '基本医疗保险', sortable: true, width: '140px' },
  { prop: 'T_large_medical_insurance', label: '大额医疗保险', sortable: true, width: '140px' },
  { prop: 'T_housing_fund', label: '公积金', sortable: true, width: '100px' },
  { prop: 'T_tax', label: '个税扣款', sortable: true, width: '120px' },
  { prop: 'T_laborage', label: '扣款合计', sortable: true, width: '120px' },
  { prop: 'T_total', label: '实发合计', sortable: true, width: '120px' }
]
interface User {
  Id: number
  T_user_name: string
  T_base: number
  T_post: number
  T_seniority: number
  T_Perf: number
  T_Perf_score: number
  T_back_payment: number
  T_tax: number
  T_attendance: number
  T_cut_payment: number
  T_pension_insurance: number
  T_unemployment_insurance: number
  T_medical_insurance: number
  T_Large_medical_insurance: number
  T_housing_fund: number
}
interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}
const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
  if (rowIndex === tableData.value.length - 1) {
    if (columnIndex === 2) {
      return [1, 3]
    } else if (columnIndex === 3 || columnIndex === 4) {
      return [0, 0]
    }
  }
}
const initParam = {
  T_date: `${year}-${month < 10 ? '0' : ''}${month}`,
  page: 1,
  page_z: 10
}
const total = ref(0)
const getSalary_List = async () => {
  const res: any = await Salary_List(initParam)
  tableData.value = res.Data.Data
  total.value = res.Data.Num
}
getSalary_List()

const exportSalaryExcel = async () => {
  await Salary_Excel()
}
const publishSalary = async () => {
  // Salary_Send
  if (multipleSelection.value.length === 0 || multipleSelection.value[0]?.Id === 0) {
    ElMessage({
      message: '请选择用户!!!',
      type: 'warning'
    })
    return
  }
  multipleSelection.value.pop()
  for await (let item of multipleSelection.value) {
    Salary_Send({ T_id: item.Id })
  }
}
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const tableData = ref<User[]>([])
</script>

<template>
  <div class="SalaryCount">
    <el-card class="m-b-3">
      <el-row :gutter="24">
        <el-col :span="12" class="d-flex">
          <span class="demonstration">年：</span>
          <el-date-picker
            v-model="salaryFromData.year"
            style="width: 100px"
            value-format="YYYY"
            type="year"
            placeholder="请选择年"
          />
          <span class="demonstration">月：</span>
          <el-date-picker
            v-model="salaryFromData.month"
            style="width: 100px"
            value-format="MM"
            type="month"
            placeholder="请选择月"
          />
        </el-col>
        <el-col :span="12" class="d-flex">
          <el-button type="primary" @click="exportSalaryExcel">导出表格</el-button>
          <el-button type="success" @click="publishSalary">发布</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="table-card">
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        :span-method="arraySpanMethod"
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <template v-for="(item, index) in tableTH" :key="index">
          <el-table-column
            v-if="item.type === 'index'"
            :type="item.type"
            :width="item.width"
            align="center"
            :label="item.label"
          />
          <el-table-column
            v-else
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
            label-class-name="label-table"
            :sortable="item.sortable"
          />
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total,prev, pager, next" :total="total" />
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.SalaryCount {
  height: 100%;
  .table-card {
    height: calc(100% - 72px - 12px);
    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
.label-table {
  white-space: nowrap;
}
.d-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.pagination {
  display: flex;
  justify-content: end;
  margin-top: 2rem;
}
</style>