remuneration/src/views/salary/solution/components/ListTemplate.vue

<template>
  <div v-loading="loading">
    <m-search v-if="showSearch" class="mb-3" :items="searchItems" v-model="searchQuery" @search="onSearch" @reset="onSearch">
      <template #button>
        <slot name="button"></slot>
      </template>
    </m-search>
    <m-table
      :card-title="cardTitle"
      :items="items"
      :headers="headers"
      :total="total"
      :page-size="pageInfo.size"
      :page-current="pageInfo.current"
      v-bind="$attrs"
      @page-change="onPageChange"
      @sort-change="onSortChange"
    >
      <template #card-tools>
        <slot name="tool"></slot>
      </template>
      <template #actions="{ row }">
        <slot name="actions" :row="row"></slot>
      </template>
    </m-table>
  </div>
</template>

<script>
import {
  getSolutionPage
} from '@/api/salary'
export default {
  name: 'salary-solution-list',
  props: {
    cardTitle: String,
    showSearch: {
      type: Boolean,
      default: true
    },
    history: {
      type: Number,
      default: 0
    },
    uuid: String
  },
  inject: ['env'],
  data () {
    return {
      searchQuery: {
        title: null
      },
      searchItems: [
        {
          label: '名称',
          prop: 'title',
          type: 'input',
          options: {
            placeholder: '请输入规则名称'
          }
        }
      ],
      items: [],
      headers: [
        { label: '名称', prop: 'title' },
        { label: '描述', prop: 'tag' },
        { label: '创建日期', prop: 'createDate' },
        { label: '操作', prop: 'actions' }
      ],
      loading: false,
      total: 0,
      orders: [{
        asc: false,
        column: 'performance_solution_id'
      }],
      pageInfo: {
        current: 1,
        size: 10
      },
      query: {}
    }
  },
  methods: {
    async onInit (entity, headers) {
      this.headers = headers ?? this.headers
      this.query = entity ? { ...entity } : {}
      this.getList()
    },
    async getList () {
      this.loading = true
      try {
        const { data } = await getSolutionPage({
          page: {
            ...this.pageInfo,
            orders: this.orders
          },
          entity: {
            ...this.searchQuery,
            history: this.history,
            uuid: this.uuid,
            env: this.env,
            ...this.query
          }
        })
        this.items = data.records.map(e => e.entity)
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      this.pageInfo.current = 1
      this.getList()
    },
    onPageChange (page) {
      this.pageInfo.current = page
      this.getList()
    },
    onSortChange (v) {
      this.orders = v
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>