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"></m-form>
  </m-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ClaimForm',
  data () {
    return {
      formValues: {
        serialNumber: null,
        unifiedCertificationNumber: null,
        organizationNo: null,
        employeeProfitSharingRatio: null
      },
      itemData: {},
      filterLoading: false,
      loading: false,
      items: []
    }
  },
  computed: {
    ...mapGetters(['organizationTree']),
    organizationItems () {
      if (this.organizationTree.length > 0) {
        return this.organizationTree[0].child
      }
      return []
    },
    formItems () {
      return [
        {
          label: '所属机构',
          prop: 'organizationNo',
          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()
              console.log(nodes[0].data.organizationNo, '选中机构编码')
              // this.formValues.organizationNo = nodes[0].data.organizationNo
              // this.formValues.organizationName = nodes[0].data.organizationName
            }
          }
        },
        {
          label: '分润员工',
          prop: 'unifiedCertificationNumber',
          type: 'select',
          options: {
            placeholder: '请选择分润员工',
            filterable: true,
            remote: true,
            labelText: 'employeeName',
            labelValue: 'personnelCode',
            valueKey: 'personnelCode',
            defaultFirstOption: true,
            loading: this.filterLoading,
            items: []
          },
          // handles: {
          //   change: (v) => {
          //     const item = this.items.find(e => e.personnelCode === v)
          //     this.formValues.employeeName = item.employeeName
          //     this.formValues.employeeCode = item.personnelCode
          //   }
          // },
          rules: [
            { required: true, message: '请选择分润员工', trigger: 'change' }
          ]
        }
        // employeeProfitSharingRatio
      ]
    }
  },
  methods: {
    async open (item) {
      console.log(item, '分润认领')
      this.loading = true
      this.$refs.dialog.open()
      // if (!item) {
      //   this.itemData = {}
      //   this.formValues = {
      //     employeeCode: null,
      //     employeeName: null,
      //     organizationNo: null,
      //     organizationName: null
      //   }
      // } else {
      //   await this.remoteMethod(item.employeeName)
      //   this.itemData = item
      //   this.formValues = {
      //     employeeCode: item.employeeCode,
      //     organizationName: item.organizationName,
      //     organizationNo: item.organizationNo,
      //     employeeName: item.employeeName
      //   }
      // }
      this.formValues.serialNumber = item.serialNumber
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        this.loading = false
      })
    },
    onSure () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }
        console.log(this.formValues, 'submit')
        // this.loading = true
        // try {
        //   await saveAllocationConfig({
        //     performanceSalaryManageEmployeeId: this.itemData.performanceSalaryManageEmployeeId,
        //     ...this.formValues
        //   })
        //   this.$refs.dialog.close()
        //   this.$message.success('操作成功')
        //   this.$emit('success')
        // } catch (error) {
        //   this.$message.error(error)
        // } finally {
        //   this.loading = false
        // }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>