remuneration/src/views/salary/claim/staff/index.vue

<template>
  <div>
    <div v-if="!customerId" style="min-height: 400px;" class="d-flex justify-center align-center">
      <div>
        <el-input v-model="customerIdModel" placeholder="请输入客户编号"></el-input>
      </div>
      <m-button class="ml-3" type="orange" @click="onSearchCustomer">查询</m-button>
    </div>
    <template v-if="customerId">
      <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
      <m-table
        v-loading="loading"
        :cardTitle="cardTitle"
        :items="items"
        :headers="headers"
        :page-size="pageInfo.size"
        :page-current="pageInfo.current"
        :total="total"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <template #employeeProfitSharingRatio="{ row }">
          {{ row.employeeProfitSharingRatio * 100 + '%' }}
        </template>
        <template #actions="{ row }">
          <m-button type="primary" text @click="onEdit(row)">分润认领</m-button>
        </template>
      </m-table>
    </template>

    <StaffForm ref="staffFormRefs"  @success="initPage" />
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date'
import { getCustomerProfitSharingClaim, getClaimRatioMax } from '@/api/salary'
import StaffForm from './staffForm'
import { HEADERS } from '../utils'
export default {
  name: 'salaryClaimStaff',
  components: {
    StaffForm
  },
  data () {
    return {
      customerIdModel: null,
      customerId: null,
      searchItems: [
        {
          label: '月份',
          prop: 'month',
          type: 'datePicker',
          options: {
            clearable: false,
            type: 'month',
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM',
            placeholder: '选择查询月份'
          }
        },
        {
          label: '客户编号',
          prop: 'customerId',
          type: 'input',
          options: {
            clearable: false,
            placeholder: '请输入客户编号'
          }
        },
        {
          label: '科目名称',
          prop: 'subjectName',
          type: 'input',
          options: {
            placeholder: '请输入科目名称'
          }
        }
      ],
      searchValues: {
        subjectName: null,
        customerId: null,
        month: dateFormat('YYYY-mm', new Date())
      },
      headers: HEADERS,
      items: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      },
      orders: [],
      loading: false,
      cardTitle: null,
      maxRatio: 0
    }
  },
  methods: {
    async onInit (cardTitle) {
      this.cardTitle = cardTitle
      this.customerIdModel = null
      this.customerId = null
      this.searchValues.customerId = null
    },
    async onSearchCustomer () {
      this.customerId = this.customerIdModel
      this.searchValues.customerId = this.customerIdModel
      this.loading = true
      await this.getRatioMax()
      this.initPage()
    },
    async getRatioMax () {
      try {
        const { data } = await getClaimRatioMax()
        this.maxRatio = data
      } catch (error) {
        this.$message.error(error)
      }
    },
    async initPage () {
      this.loading = true
      try {
        const { data } = await getCustomerProfitSharingClaim({
          page: {
            ...this.pageInfo,
            orders: this.orders
          },
          ...this.searchValues
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onEdit (item) {
      this.$refs.staffFormRefs.open({
        ...item,
        maxRatio: this.maxRatio
      })
    },
    onSearch () {
      if (!this.searchValues.customerId) return this.$message.warning('请输入要查询的客户编码')
      this.pageInfo.current = 1
      this.initPage()
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.initPage()
    },
    onSortChange (v) {
      this.orders = v
      this.initPage()
    }
  }
}
</script>

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