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

<template>
  <div>
    <m-empty v-if="!permission.includes('salary:claim:sharingClaim:list')"></m-empty>
    <m-search v-permission="['salary:claim:sharingClaim:list']" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
    <m-table
      :cardTitle="cardTitle"
      v-loading="loading"
      v-permission="['salary:claim:sharingClaim:list']"
      :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="onClaim(row, false)" v-if="!majorOrganization">分润认领</m-button>
        <m-button type="primary" text @click="onClaim(row, true)" v-if="majorOrganization">专业部门分配</m-button>
      </template>
    </m-table>

    <ClaimForm ref="claimFormRef" @submit="onSubmit" />
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date'
import {
  getProfitSharingClaim,
  getCustomerProfitSharingClaimDeptAdd,
  getCustomerProfitSharingClaimAdd,
  getAccessOrganization
} from '@/api/salary'
import ClaimForm from '../components/form.vue'
import {
  HEADERS
} from '../utils'
import { mapGetters } from 'vuex'
export default {
  name: 'salaryClaimSharing',
  components: {
    ClaimForm
  },
  data () {
    return {
      searchValues: {
        manageOrganizationNo: null,
        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,
      isDept: false,
      organizationItems: [],
      defaultManageOrganization: {},
      majorOrganization: false
    }
  },
  computed: {
    ...mapGetters(['permission']),
    searchItems () {
      return [
        {
          label: '机构名称',
          prop: 'manageOrganizationNo',
          type: 'select',
          options: {
            clearable: false,
            placeholder: '请选择机构名称',
            items: this.organizationItems,
            labelValue: 'organizationNo'
          }
        },
        {
          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: '请输入科目名称'
          }
        }
      ]
    }
  },
  methods: {
    async onInit (cardTitle) {
      if (this.cardTitle) {
        this.cardTitle = cardTitle
      }
      const data = await this.onGetDeptList()
      if (!data) {
        return
      }
      this.searchValues.manageOrganizationNo = data[0].organizationNo
      this.defaultManageOrganization = data[0]
      this.majorOrganization = data[0].majorOrganization
      this.getPage()
    },
    async getPage () {
      if (!this.searchValues.manageOrganizationNo) {
        this.$message.warning('请选择机构')
        return
      }
      this.loading = true
      try {
        const { data } = await getProfitSharingClaim({
          page: {
            ...this.pageInfo,
            orders: this.orders
          },
          ...this.searchValues
        })
        this.majorOrganization = this.organizationItems.find(e => e.organizationNo === this.searchValues.manageOrganizationNo).majorOrganization
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async onGetDeptList () {
      try {
        const { data } = await getAccessOrganization()
        if (!data.length) {
          return
        }
        this.organizationItems = data.map(e => {
          return {
            ...e,
            label: `${e.parentOrganizationName} - ${e.organizationName}`
          }
        })
        return data
      } catch (error) {
        this.$message.error(error)
      }
    },
    onClaim (item, isDept) {
      this.isDept = isDept
      this.$refs.claimFormRef.open(item, isDept)
    },
    async onSubmit (query) {
      this.$refs.claimFormRef.setLoading(true)
      const submitApi = this.isDept ? getCustomerProfitSharingClaimDeptAdd : getCustomerProfitSharingClaimAdd
      try {
        await submitApi(query)
        this.$refs.claimFormRef.close()
        this.$message.success('操作成功')
        this.getPage()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.$refs.claimFormRef.setLoading(false)
      }
    },
    onSearch () {
      if (!this.searchValues.manageOrganizationNo) {
        this.searchValues.manageOrganizationNo = this.defaultManageOrganization.organizationNo
      }
      this.pageInfo.current = 1
      this.getPage()
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.getPage()
    },
    onSortChange (v) {
      this.orders = v
      this.getPage()
    }
  }
}
</script>

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