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

<template>
  <div>
    <m-search class="mb-3" :items="searchItems" v-model="searchValues" :customReset="true" @search="onSearch" @reset="onReset"></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 #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>
      </template>
    </m-table>

    <ClaimForm ref="claimFormRef" staff @success="onInit" />
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date'
import { getCustomerProfitSharingClaim } from '@/api/salary'
import ClaimForm from '../components/form.vue'
export default {
  name: 'salaryClaimStaff',
  components: {
    ClaimForm
  },
  data () {
    return {
      searchItems: [
        {
          label: '月份',
          prop: 'month',
          type: 'datePicker',
          options: {
            clearable: false,
            type: 'month',
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM',
            placeholder: '选择查询月份'
          }
        },
        {
          label: '客户编号',
          prop: 'customerId',
          type: 'input',
          options: {
            placeholder: '请输入客户编号'
          }
        },
        {
          label: '科目名称',
          prop: 'subjectName',
          type: 'input',
          options: {
            placeholder: '请输入科目名称'
          }
        }
      ],
      searchValues: {
        subjectName: null,
        customerId: null,
        month: dateFormat('YYYY-mm', new Date())
      },
      headers: [
        { label: '客户编号', prop: 'customerId' },
        { label: '一级科目编码/名称', prop: 'oneLevelSubject' },
        { label: '二级科目编码/名称', prop: 'twoLevelSubject' },
        { label: '金额', prop: 'amount' },
        { label: '机构名称', prop: 'organizationName' },
        { label: '统一认证号1', prop: 'unifiedCertificationNumber1' },
        { label: '员工姓名1', prop: 'employeeName1' },
        { label: '统一认证号2', prop: 'unifiedCertificationNumber2' },
        { label: '员工姓名2', prop: 'employeeName2' },
        { label: '数据日期', prop: 'dataDate' },
        { label: '管户层级标识', prop: 'customerLevelIdentifier' },
        { label: '客户类别标识', prop: 'customerCategoryIdentifier' },
        { label: '员工分润比例', prop: 'employeeProfitSharingRatio' },
        { label: '操作', prop: 'actions', fixed: 'right' }
      ],
      items: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      },
      loading: false
    }
  },
  methods: {
    async onInit () {
      this.loading = true
      try {
        const { data } = await getCustomerProfitSharingClaim({
          ...this.pageInfo,
          ...this.searchValues
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onAdd () {
      this.$refs.templateRefs.open()
    },
    onEdit (item) {
      this.$refs.claimFormRef.open(item)
    },
    onSearch () {
      if (!this.searchValues.customerId) return this.$message.warning('请输入要查询的客户编码')
      this.pageInfo.current = 1
      this.onInit()
    },
    onReset () {
      this.items = []
      this.total = 0
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.onInit()
    }
  }
}
</script>

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