remuneration/src/views/salary/claim/components/form.vue

<template>
  <m-dialog title="分润认领" ref="dialog" @sure="onSure">
    <m-form ref="form" :items="formItems" v-model="formValues" v-loading="loading">
      <template #customerId>
        <el-tag>{{ itemData.customerId }}</el-tag>
      </template>
      <template #employeeProfitSharingRatio>
        <el-tag>{{ itemData.employeeProfitSharingRatio * 100 }}</el-tag>
      </template>
      <template #[`employeeProfitSharingRatio.append`]>
        %
      </template>
    </m-form>
  </m-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getRosterList } from '@/api/system'
export default {
  name: 'ClaimForm',
  data () {
    return {
      isStaff: false,
      formValues: {
        serialNumber: null,
        unifiedCertificationNumber: null,
        organizationNo: null,
        employeeProfitSharingRatio: null
      },
      itemData: {},
      filterLoading: false,
      loading: false,
      empList: [],
      items: [],
      submitApi: null
    }
  },
  computed: {
    ...mapGetters(['organizationTree']),
    organizationItems () {
      if (this.organizationTree.length > 0) {
        return this.organizationTree[0].child
      }
      return []
    },
    formItems () {
      return [
        {
          label: '客户编号',
          prop: 'customerId'
        }, {
          label: '员工分润比例',
          prop: 'employeeProfitSharingRatio'
        },
        {
          label: '所属机构',
          prop: 'organizationNo',
          hidden: !this.isStaff,
          type: 'cascader',
          rules: [
            { required: true, message: '请选择所属机构', trigger: 'change' }
          ],
          options: {
            ref: 'organizationNo',
            filterable: true,
            clearable: true,
            placeholder: '请选择所属机构',
            options: this.organizationItems,
            showAllLevels: false,
            props: {
              emitPath: false,
              checkStrictly: true,
              value: 'organizationNo',
              label: 'organizationName',
              children: 'child'
            }
          },
          handles: {
            change: (v) => {
              const nodes = this.$refs.form.$refs.organizationNo.getCheckedNodes()
              this.getEmpData(nodes[0]?.data?.organizationNo)
            }
          }
        },
        {
          label: '分润员工',
          prop: 'unifiedCertificationNumber',
          type: 'select',
          options: {
            placeholder: '请输入员工姓名',
            filterable: true,
            remote: true,
            labelText: 'employeeName',
            labelValue: 'personnelCode',
            valueKey: 'personnelCode',
            defaultFirstOption: true,
            loading: this.filterLoading,
            items: this.empList
          },
          rules: [
            { required: true, message: '请选择分润员工', trigger: 'change' }
          ]
        },
        {
          label: '分润比例(%)',
          prop: 'employeeProfitSharingRatio',
          type: 'input',
          slots: ['append'],
          required: true,
          options: {
            placeholder: '请输入分润比例'
          },
          rules: [
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  return callback(new Error('请输入分润比例'))
                }
                if (isNaN(value) || isNaN(parseFloat(value))) {
                  callback(new Error('请输入数字值'))
                } else {
                  if (value > 100 || value < 0) {
                    callback(new Error('请输入0-100的数字值'))
                  } else {
                    callback()
                  }
                }
              },
              trigger: ['blur', 'change']
            }
          ]
        }
      ]
    }
  },
  methods: {
    async getEmpData (organizationNo) {
      if (!organizationNo) {
        this.empList = []
        return
      }
      try {
        this.filterLoading = true
        const params = {
          organizationNo,
          page: { current: 1, size: 9999 }
        }
        const { data } = await getRosterList(params)
        this.empList = data.records
      } catch (error) {
        this.empList = []
        this.$message.error(error)
      } finally {
        this.filterLoading = false
      }
    },
    async open (item, isStaff, api) {
      this.submitApi = api
      this.isStaff = isStaff
      this.loading = true
      this.itemData = item || {}
      this.$refs.dialog.open()
      this.formValues = {
        serialNumber: item.serialNumber,
        customerId: item.customerId,
        organizationNo: item.organizationNo,
        unifiedCertificationNumber: null,
        employeeProfitSharingRatio: null
      }
      await this.getEmpData(item.organizationNo)
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        this.loading = false
      })
    },
    close () {
      this.$refs.dialog.close()
    },
    setLoading (val) {
      this.loading = val
    },
    onSure () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }
        const { employeeProfitSharingRatio, ...query } = this.formValues
        this.$emit('submit', {
          ...query,
          employeeProfitSharingRatio: employeeProfitSharingRatio / 100
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>