remuneration/src/views/salaryFixed/salaryFixedCalculation/index.vue

<template>
  <div class="pa-3 white">
    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
    <m-table
      v-loading="loading"
      :items="items"
      :headers="headers"
      :page-size="pageInfo.size"
      :page-current="pageInfo.current"
      :total="total"
      @page-change="onPageChange"
      @sort-change="onSortChange"
    >
      <!-- <template #card-tools>
        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
      </template> -->
      <!-- <template #actions="{ row }">
        <m-button type="primary" text @click="onEdit(row)">编辑</m-button>
        <m-button type="danger" text @click="onDelete(row)">删除</m-button>
      </template> -->
    </m-table>
  </div>
</template>

<script>
import {
  getSalaryFixedList
} from '@/api/salary'
import { mapGetters } from 'vuex'
export default {
  name: 'salaryFixedCalculation',
  data () {
    return {
      searchValues: {
        employeeName: null
      },
      headers: [
        { label: '姓名', prop: 'employeeName' },
        { label: '所在部门名称', prop: 'deptName' },
        { label: '岗位名称', prop: 'postName' },
        { label: '人员类别', prop: 'personnelCategory' },
        { label: '职务层级', prop: 'jobLevel' },
        { label: '薪酬档次', prop: 'salaryCategory', align: 'center' },
        { label: '薪酬等级', prop: 'salaryLevel', align: 'center' },
        { label: '固定薪资', prop: 'salaryAmount', align: 'center' }
        // { label: '操作', prop: 'actions', fixed: 'right', width: 150 }
      ],
      items: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      },
      orders: [],
      loading: false
    }
  },
  computed: {
    ...mapGetters(['organizationTree']),
    searchItems () {
      return [
        {
          label: '姓名',
          prop: 'employeeName',
          type: 'input',
          options: {
            placeholder: '姓名'
          }
        },
        {
          label: '部门',
          prop: 'organizationNo',
          type: 'cascader',
          options: {
            filterable: true,
            clearable: true,
            placeholder: '请选择部门',
            options: this.organizationTree,
            showAllLevels: false,
            props: {
              emitPath: false,
              value: 'organizationNo',
              label: 'organizationName',
              children: 'child'
            }
          }
        }
      ]
    }
  },
  created () {
    this.onInit()
  },
  methods: {
    async onInit () {
      this.loading = true
      try {
        const { organizationNo, ...param } = this.searchValues
        const { data } = await getSalaryFixedList({
          page: {
            ...this.pageInfo,
            orders: this.orders
          },
          entity: {
            ...param
          },
          organizationNo
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onAdd () {
      this.$refs.fixedSalaryCalculationRefs.open()
    },
    onEdit (item) {
      this.$refs.fixedSalaryCalculationRefs.open(item)
    },
    onDelete (row) {
      this.$confirm('确定删除吗？', '提示')
        .then(async () => {
          try {
            // await ApiName({ id: row.id })
            this.$message.success('删除成功')
            this.onInit()
          } catch (error) {
            this.$message.error(error)
          }
        })
        .catch(_ => {})
    },
    onSearch () {
      this.pageInfo.current = 1
      this.onInit()
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.onInit()
    },
    onSortChange (orders) {
      this.orders = orders
      this.onInit()
    }
  }
}
</script>

<style lang="scss" scoped>
  /* 自定义样式 */
</style>