wms-master.git - Gitblit

<template>
  <ElDialog
    :title="dialogTitle"
    :model-value="visible"
    width="820px"
    align-center
    destroy-on-close
    @update:model-value="handleCancel"
    @closed="handleClosed"
  >
    <ArtForm
      ref="formRef"
      v-model="form"
      :items="formItems"
      :rules="rules"
      :span="12"
      :gutter="20"
      label-width="110px"
      :show-reset="false"
      :show-submit="false"
    />
 
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="handleCancel">取消</ElButton>
        <ElButton type="primary" @click="handleSubmit">确定</ElButton>
      </span>
    </template>
  </ElDialog>
</template>
 
<script setup>
  import { computed, nextTick, reactive, ref, watch } from 'vue'
  import ArtForm from '@/components/core/forms/art-form/index.vue'
  import {
    buildPurchaseDialogModel,
    createPurchaseFormState,
    getPurchaseStatusOptions
  } from '../purchasePage.helpers'
 
  const props = defineProps({
    visible: { type: Boolean, default: false },
    dialogType: { type: String, default: 'add' },
    purchaseData: { type: Object, default: () => ({}) },
    typeOptions: { type: Array, default: () => [] },
    wkTypeOptions: { type: Array, default: () => [] }
  })
 
  const emit = defineEmits(['update:visible', 'submit'])
  const formRef = ref()
  const form = reactive(createPurchaseFormState())
 
  const isEdit = computed(() => props.dialogType === 'edit')
  const dialogTitle = computed(() => (isEdit.value ? '编辑PO单' : '新增PO单'))
 
  const rules = computed(() => ({
    type: [{ required: true, message: '请选择单据类型', trigger: 'change' }],
    wkType: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
    source: [{ required: true, message: '请输入来源单号', trigger: 'blur' }],
    anfme: [{ required: true, message: '请输入需求数量', trigger: 'blur' }]
  }))
 
  const dateProps = {
    type: 'datetime',
    valueFormat: 'YYYY-MM-DD HH:mm:ss',
    format: 'YYYY-MM-DD HH:mm:ss',
    clearable: true
  }
 
  const formItems = computed(() => [
    {
      label: '单据类型',
      key: 'type',
      type: 'select',
      props: {
        placeholder: '请选择单据类型',
        clearable: true,
        filterable: true,
        options: props.typeOptions
      }
    },
    {
      label: '业务类型',
      key: 'wkType',
      type: 'select',
      props: {
        placeholder: '请选择业务类型',
        clearable: true,
        filterable: true,
        options: props.wkTypeOptions
      }
    },
    {
      label: '来源单号',
      key: 'source',
      type: 'input',
      props: {
        placeholder: '请输入来源单号',
        clearable: true
      }
    },
    {
      label: '需求数量',
      key: 'anfme',
      type: 'input-number',
      props: {
        placeholder: '请输入需求数量',
        min: 0,
        precision: 2,
        controlsPosition: 'right'
      }
    },
    {
      label: '预计到达时间',
      key: 'preArr',
      type: 'datetime',
      props: {
        ...dateProps,
        placeholder: '请选择预计到达时间'
      }
    },
    {
      label: '已收数量',
      key: 'qty',
      type: 'input-number',
      props: {
        placeholder: '请输入已收数量',
        min: 0,
        precision: 2,
        controlsPosition: 'right'
      }
    },
    {
      label: '收货中数量',
      key: 'workQty',
      type: 'input-number',
      props: {
        placeholder: '请输入收货中数量',
        min: 0,
        precision: 2,
        controlsPosition: 'right'
      }
    },
    {
      label: '收货道口',
      key: 'channel',
      type: 'input',
      props: {
        placeholder: '请输入收货道口',
        clearable: true
      }
    },
    {
      label: 'ERP单号',
      key: 'platCode',
      type: 'input',
      props: {
        placeholder: '请输入ERP单号',
        clearable: true
      }
    },
    {
      label: '计划收货时间',
      key: 'startTime',
      type: 'datetime',
      props: {
        ...dateProps,
        placeholder: '请选择计划收货时间'
      }
    },
    {
      label: '计划结束时间',
      key: 'endTime',
      type: 'datetime',
      props: {
        ...dateProps,
        placeholder: '请选择计划结束时间'
      }
    },
    {
      label: '项目编码',
      key: 'project',
      type: 'input',
      props: {
        placeholder: '请输入项目编码',
        clearable: true
      }
    },
    {
      label: '状态',
      key: 'status',
      type: 'select',
      props: {
        placeholder: '请选择状态',
        options: getPurchaseStatusOptions()
      }
    },
    {
      label: '备注',
      key: 'memo',
      type: 'input',
      span: 24,
      props: {
        type: 'textarea',
        rows: 3,
        placeholder: '请输入备注',
        clearable: true
      }
    }
  ])
 
  const loadFormData = () => {
    Object.assign(form, buildPurchaseDialogModel(props.purchaseData))
  }
 
  const resetForm = () => {
    Object.assign(form, createPurchaseFormState())
    formRef.value?.clearValidate?.()
  }
 
  const handleSubmit = async () => {
    if (!formRef.value) return
    try {
      await formRef.value.validate()
      emit('submit', { ...form })
    } catch {
      return
    }
  }
 
  const handleCancel = () => {
    emit('update:visible', false)
  }
 
  const handleClosed = () => {
    resetForm()
  }
 
  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        loadFormData()
        nextTick(() => {
          formRef.value?.clearValidate?.()
        })
      }
    },
    { immediate: true }
  )
 
  watch(
    () => props.purchaseData,
    () => {
      if (props.visible) {
        loadFormData()
      }
    },
    { deep: true }
  )
</script>