remuneration/src/views/bonus/approve/index.vue

<template>
  <div class="white pa-3">
    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch"></m-search>
    <m-table
      :items="items"
      :headers="headers"
      v-loading="loading"
      :total="total"
      :page-size="pageInfo.size"
      :page-current="pageInfo.current"
      @page-change="onPageChange"
    >
      <template #status="{ row }">
        <el-tag :type="statusList[row.status]?.type ?? 'info'">{{ statusList[row.status]?.label ?? '未知状态' }}</el-tag>
      </template>
      <template #actions="{ row }">
        <el-button type="text" @click="onShowDetails(row)">查看详情</el-button>
      </template>
    </m-table>
    <ApproveDetails ref="approveDetailsRefs"></ApproveDetails>
  </div>
</template>

<script>
import {
  getBonusApprovePage
} from '@/api/bonus'
import ApproveDetails from './approveDetails.vue'
import { STATUS_LIST } from '../utils'
export default {
  name: 'bonusAllocationApprove',
  components: {
    ApproveDetails
  },
  data () {
    return {
      statusList: STATUS_LIST,
      loading: false,
      items: [],
      headers: [
        { label: '月份', prop: 'month' },
        { label: '分配机构', prop: 'opOrganizationName' },
        // { label: '分配员工', prop: 'opNickname', align: 'center' },
        { label: '员工类型', prop: 'employeeCategory', align: 'center' },
        { label: '状态', prop: 'status', align: 'center' },
        { label: '数据版本', prop: 'version', align: 'center' },
        { label: '审核信息', prop: 'authMsg' },
        { label: '操作', prop: 'actions' }
      ],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      },
      searchValues: {}
    }
  },
  computed: {
    searchItems () {
      return [
        {
          label: '月份',
          prop: 'month',
          type: 'datePicker',
          options: {
            placeholder: '请选择月份',
            clearable: false,
            type: 'month',
            valueFormat: 'yyyy-MM',
            format: 'yyyy 年 MM 月'
          }
        },
        {
          label: '机构',
          prop: 'organizationName',
          type: 'input',
          options: {
            placeholder: '请输入机构'
          }
        },
        {
          label: '员工类型',
          prop: 'employeeCategory',
          type: 'input',
          options: {
            placeholder: '请输入员工类型'
          }
        }
      ]
    }
  },
  created () {
    this.onInit()
  },
  methods: {
    async onInit () {
      try {
        const { data } = await getBonusApprovePage({
          page: {
            ...this.pageInfo
          },
          entity: {}
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      }
    },
    onPageChange (page) {
      this.pageInfo.current = page
      this.onInit()
    },
    onSearch () {
      this.pageInfo.current = 1
      this.onInit()
    },
    onShowDetails () {
      this.$refs.approveDetailsRefs.open()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>