`
<template>
  <p-modal
    title='详情'
    width='400px'
    destroyOnClose
    :visible='visible'
    :confirm-loading='spinning'
    @ok='handleOk'
    @cancel='handleCancel'
  >
    <p-spin :spinning='spinning'>
      <p-form-model ref='formTarget' :model='form' :label-col='{ span: 6 }' :wrapper-col='{ span: 18 }' :rules="{
                        productId:[{required: true, message: '请输入产成品编码', trigger: 'change'}],
                        process:[{required: true, message: '请输入工序', trigger: 'change'}],
                        kitNum:[{required: true, message: '请输入最大台套数', trigger: 'change'}],
                    }" class='plg-grid-from'>
        <p-form-model-item label='产成品编码' prop='productId'>
          <p-input v-model='form.productId' placeholder='请输入产成品编码' />
        </p-form-model-item>
        <p-form-model-item label='工序' prop='process'>
          <p-input v-model='form.process' placeholder='请输入工序' />
        </p-form-model-item>
        <p-form-model-item label='最大台套数' prop='kitNum'>
          <p-input-number v-model='form.kitNum' placeholder='请输入最大台套数' style='width: 100%' />
        </p-form-model-item>
      </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import { add, update } from './api'

export default {
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: '',
    editData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      spinning: false,
      form: {}
    }
  },
  watch: {
    visible: {
      handler(nVal) {
        if (nVal && this.type !== 'add') {
          this.form = { ...this.editData }
        }
      },
      immediate: true
    }
  },
  methods: {
    handleOk() {
      this.$refs.formTarget.validate(flag => {
        if (!flag) return
        if (this.type === 'add') this.onAdd()
        if (this.type === 'edit') this.onUpdate()
      })
    },
    onAdd() {
      const params = { ...this.form }
      this.spinning = true
      add(params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('back')
          this.handleCancel()
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    },
    onUpdate() {
      const params = { ...this.form }
      this.spinning = true
      update(params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('back')
          this.handleCancel()
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    },
    handleCancel() {
      this.form = {}
      this.$emit('change', false)
    }
  }
}
</script>

<style scoped>

</style>`