remuneration/src/views/accumulatePoints/accumulatePointsIntegralList/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"
    >
      <template #score="{ row }">
        <el-tag type="orange">{{ row.score }}</el-tag>
      </template>
      <template #actions="{ row }">
        <m-button text type="primary" @click="onDetails(row)">查看明细</m-button>
      </template>
    </m-table>
    <AccumulatePointsApplyDetails ref="accumulatePointsApplyDetailsRefs"></AccumulatePointsApplyDetails>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AccumulatePointsApplyDetails from '../components/accumulatePointsApplyDetails.vue'
import {
  getAccumulatePointList
} from '@/api/accumulatePoint'
export default {
  name: 'accumulatePointsIntegralList',
  components: {
    AccumulatePointsApplyDetails
  },
  data () {
    return {
      headers: [
        { label: '员工姓名', prop: 'employeeName' },
        { label: '机构', prop: 'organizationName' },
        { label: '申报积分', prop: 'score', align: 'center' },
        { label: '创建时间', prop: 'createDate' },
        { label: '操作', prop: 'actions' }
      ],
      items: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      },
      loading: false,
      searchValues: {
        employeeName: null,
        organizationName: null
      }
    }
  },
  created () {
    this.onInit()
  },
  computed: {
    ...mapGetters(['organizationTree']),
    searchItems () {
      return [
        { label: '员工姓名', prop: 'employeeName', type: 'input', options: { placeholder: '请输入员工姓名' } },
        {
          label: '机构',
          prop: 'organizationNo',
          type: 'cascader',
          options: {
            placeholder: '请选择机构',
            options: this.organizationTree,
            showAllLevels: false,
            props: {
              emitPath: false,
              checkStrictly: true,
              value: 'organizationNo',
              label: 'organizationName',
              children: 'child'
            }
          }
        }
      ]
    }
  },
  methods: {
    async onInit () {
      this.loading = true
      try {
        const { data } = await getAccumulatePointList({
          page: {
            ...this.pageInfo
          },
          entity: {
            ...this.searchValues
          }
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onDetails (item) {
      this.$refs.accumulatePointsApplyDetailsRefs.open(item, {
        employeeCode: item.employeeCode
      })
    },
    onSearch () {
      this.pageInfo.current = 1
      this.onInit()
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.onInit()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>