Cold_erp_web/src/views/salary/SalaryCount.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { TableColumnCtx } from 'element-plus'
import { Salary_List, Salary_Send, Salary_Excel } from '@/api/salary/index'

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
}

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 initParam = reactive({
  T_date: `${salaryFromData.year}-${salaryFromData.month}`,
  page: 1,
  page_z: 999
})
const multipleSelection = ref<User[]>([])

const tableTH = [
  { type: 'selection', width: '60px', fixed: 'left' },
  { type: 'index', label: '序号', width: '60px', fixed: 'left' },
  { prop: 'T_user_name', label: '姓名', fixed: 'left', width: '80px' },
  { prop: 'T_user_dept', label: '部门', fixed: 'left', width: '80px' },
  { prop: 'T_user_post', label: '岗位', fixed: 'left', width: '100px' },
  { 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' }
]

const salarDateYearChange = (val: string) => {
  if (!val) return
  initParam.T_date = `${val}-${salaryFromData.month}`
  getSalary_List()
}
const salarDateMonthChange = (val: string) => {
  if (!val) return
  initParam.T_date = `${salaryFromData.year}-${val}`
  getSalary_List()
}

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 exportSalaryExcel = async () => {
  const res: any = await Salary_Excel({ T_date: `${salaryFromData.year}-${salaryFromData.month}` })
  if (res.Code === 200) {
    window.open(res.Data)
  }
}
// 发布
const publishSalary = async () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请选择用户!!!')
    return
  }

  for await (let item of multipleSelection.value) {
    Salary_Send({ T_id: item.Id })
  }
  ElMessage.success('发布成功!!!')
}

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const selectableDisable = (row: any) => {
  if (row.Id === 0) return false
  return true
}

const tableData = ref<User[]>([])
const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  } else {
    return 'success-row'
  }
}

const getSalary_List = async () => {
  const res: any = await Salary_List(initParam)
  tableData.value = res.Data.Data
}
getSalary_List()
</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="请选择年"
            @change="salarDateYearChange"
          />
          <span class="demonstration">月：</span>
          <el-date-picker
            v-model="salaryFromData.month"
            style="width: 100px"
            popper-class="picker-date"
            format="MM"
            value-format="MM"
            type="month"
            placeholder="请选择月"
            @change="salarDateMonthChange"
          />
        </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%"
        :row-class-name="tableRowClassName"
      >
        <template v-for="(item, index) in tableTH" :key="index">
          <el-table-column
            v-if="item.type === 'index' || item.fixed === 'left' || item.type === 'selection'"
            :selectable="selectableDisable"
            :type="item.type"
            align="center"
            v-bind="item"
          />
          <el-table-column
            v-else
            :selectable="selectableDisable"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
            label-class-name="label-table"
            :sortable="item.sortable"
          />
        </template>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.SalaryCount {
  height: 100%;
  .table-card {
    height: calc(100% - 72px - 12px);
    :deep(.el-card__body) {
      height: 100%;
    }
  }
}
.d-flex {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: nowrap;
}
:deep(.el-table .warning-row) {
  background-color: var(--el-color-warning-light-9);
}
:deep(.el-table .success-row) {
  background-color: var(--el-color-success-light-9);
}
</style>