wms-master.git - Gitblit

<template>
  <ElDialog
    :title="dialogTitle"
    :model-value="visible"
    width="980px"
    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 {
    buildLocDialogModel,
    createLocFormState,
    filterLocAreaOptionsByWarehouse,
    getLocBinaryOptions,
    getLocStatusOptions,
    getLocUseStatusOptions
  } from '../locPage.helpers'
 
  const props = defineProps({
    visible: { type: Boolean, default: false },
    dialogType: { type: String, default: 'add' },
    locData: { type: Object, default: () => ({}) },
    warehouseOptions: { type: Array, default: () => [] },
    areaOptions: { type: Array, default: () => [] },
    locTypeOptions: { type: Array, default: () => [] }
  })
 
  const emit = defineEmits(['update:visible', 'submit'])
  const formRef = ref()
  const form = reactive(createLocFormState())
 
  const isEdit = computed(() => props.dialogType === 'edit')
  const dialogTitle = computed(() => (isEdit.value ? '编辑库位' : '新增库位'))
 
  const filteredAreaOptions = computed(() =>
    filterLocAreaOptionsByWarehouse(props.areaOptions || [], form.warehouseId)
  )
 
  function createInputFormItem(label, key, placeholder, extraProps = {}, extraConfig = {}) {
    return {
      label,
      key,
      type: 'input',
      props: {
        placeholder,
        clearable: true,
        ...extraProps
      },
      ...extraConfig
    }
  }
 
  function createNumberFormItem(label, key, placeholder, extraProps = {}, extraConfig = {}) {
    return {
      label,
      key,
      type: 'number',
      props: {
        min: 0,
        controlsPosition: 'right',
        placeholder,
        ...extraProps
      },
      ...extraConfig
    }
  }
 
  function createSelectFormItem(label, key, placeholder, options, extraProps = {}, extraConfig = {}) {
    return {
      label,
      key,
      type: 'select',
      props: {
        placeholder,
        clearable: true,
        options,
        ...extraProps
      },
      ...extraConfig
    }
  }
 
  const rules = computed(() => ({
    warehouseId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
    areaId: [{ required: true, message: '请选择库区', trigger: 'change' }],
    code: [{ required: true, message: '请输入库位号', trigger: 'blur' }],
    typeIds: [{ type: 'array', required: true, message: '请选择库位类型', trigger: 'change' }],
    row: [{ required: true, message: '请输入排', trigger: 'change' }],
    col: [{ required: true, message: '请输入列', trigger: 'change' }],
    lev: [{ required: true, message: '请输入层', trigger: 'change' }],
    useStatus: [{ required: true, message: '请选择使用状态', trigger: 'change' }]
  }))
 
  const formItems = computed(() => [
    createSelectFormItem('仓库', 'warehouseId', '请选择仓库', props.warehouseOptions, { filterable: true }),
    createSelectFormItem('库区', 'areaId', '请选择库区', filteredAreaOptions.value, { filterable: true }),
    createInputFormItem('库位号', 'code', '请输入库位号'),
    createSelectFormItem('库位类型', 'typeIds', '请选择库位类型', props.locTypeOptions, {
      multiple: true,
      collapseTags: true,
      filterable: true
    }),
    createSelectFormItem('使用状态', 'useStatus', '请选择使用状态', getLocUseStatusOptions(), { filterable: true }),
    createSelectFormItem('状态', 'status', '请选择状态', getLocStatusOptions()),
    createNumberFormItem('排', 'row', '请输入排'),
    createNumberFormItem('列', 'col', '请输入列'),
    createNumberFormItem('层', 'lev', '请输入层'),
    createNumberFormItem('巷道', 'channel', '请输入巷道'),
    createInputFormItem('容器编码', 'barcode', '请输入容器编码'),
    createInputFormItem('存放单位', 'unit', '请输入存放单位'),
    createSelectFormItem('虚拟库位', 'flagLogic', '请选择虚拟库位', getLocBinaryOptions()),
    createSelectFormItem('标签管理', 'flagLabelMange', '请选择标签管理', getLocBinaryOptions()),
    createNumberFormItem('长', 'length', '请输入长', { step: 0.01, precision: 2 }),
    createNumberFormItem('宽', 'width', '请输入宽', { step: 0.01, precision: 2 }),
    createNumberFormItem('高', 'height', '请输入高', { step: 0.01, precision: 2 }),
    createNumberFormItem('最大零件数', 'maxParts', '请输入最大零件数'),
    createNumberFormItem('最大包装数', 'maxPack', '请输入最大包装数'),
    createInputFormItem('功能属性', 'fucAtrrs', '请输入功能属性', {}, { span: 24 }),
    createInputFormItem('属性', 'locAttrs', '请输入属性', {}, { span: 24 }),
    createInputFormItem(
      '备注',
      'memo',
      '请输入备注',
      { type: 'textarea', rows: 3 },
      { span: 24 }
    )
  ])
 
  const loadFormData = () => {
    Object.assign(form, buildLocDialogModel(props.locData))
  }
 
  const resetForm = () => {
    Object.assign(form, createLocFormState())
    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.locData,
    () => {
      if (props.visible) {
        loadFormData()
      }
    },
    { deep: true }
  )
 
  watch(
    () => form.warehouseId,
    () => {
      if (!form.areaId) {
        return
      }
      const available = filteredAreaOptions.value.some((item) => Number(item.value) === Number(form.areaId))
      if (!available) {
        form.areaId = void 0
      }
    }
  )
</script>