wms / wms4_ykkap · Files

<template>
  <a-modal
    :title="title"
    :visible="visible"
    :width="800"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="工序编码">
        <a-input
          v-decorator="['processCode', { rules: [{ required: true, message: '请输入工序编码' }, { max: 50, message: '长度不能超过50个字符' }] }]"
          placeholder="请输入工序编码"
        />
      </a-form-item>

      <a-form-item label="区域名称">
        <a-input
          v-decorator="['zoneName', { rules: [{ required: true, message: '请输入区域名称' }, { max: 100, message: '长度不能超过100个字符' }] }]"
          placeholder="请输入区域名称"
        />
      </a-form-item>

      <a-row>
        <a-col :span="12">
          <a-form-item label="优先级">
            <a-input-number
              v-decorator="['priority', { rules: [{ required: true, message: '请输入优先级' }], initialValue: 1 }]"
              placeholder="优先级（数字越小优先级越高）"
              :min="1"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="巷道列表">
            <a-select
              v-model:value="roadWayList"
              mode="multiple"
              placeholder="请选择巷道"
              style="width: 100%"
              :options="roadWayOptions"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider>位置范围（留空表示不限）</a-divider>

      <a-row>
        <a-col :span="8">
          <a-form-item label="起始行">
            <a-input-number
              v-decorator="['rowStart']"
              placeholder="起始行"
              :min="1"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="结束行">
            <a-input-number
              v-decorator="['rowEnd']"
              placeholder="结束行"
              :min="1"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="">
            <span style="color: #999; font-size: 12px; line-height: 1.5;">
              行1-2:巷道1<br>
              行3-4:巷道2<br>
              行5-6:巷道3<br>
              行7-8:巷道4<br>
              行9-10:巷道5
            </span>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="8">
          <a-form-item label="起始列">
            <a-input-number
              v-decorator="['columnStart']"
              placeholder="起始列"
              :min="1"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="结束列">
            <a-input-number
              v-decorator="['columnEnd']"
              placeholder="结束列"
              :min="1"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="8">
          <a-form-item label="起始层">
            <a-input-number
              v-decorator="['layerStart']"
              placeholder="起始层"
              :min="1"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="结束层">
            <a-input-number
              v-decorator="['layerEnd']"
              placeholder="结束层"
              :min="1"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="库位编码列表">
        <a-textarea
          v-decorator="['locationCodes']"
          placeholder="请输入库位编码，多个用逗号分隔（用于特殊不规则区域）"
          :rows="2"
        />
      </a-form-item>

      <a-row>
        <a-col :span="8">
          <a-form-item label="是否独占">
            <j-dict-select-tag
              v-decorator="['isExclusive', { rules: [{ required: true, message: '请选择是否独占' }], initialValue: 0 }]"
              placeholder="请选择是否独占"
              dictCode="yn"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="是否允许溢出">
            <j-dict-select-tag
              v-decorator="['allowOverflow', { rules: [{ required: true, message: '请选择是否允许溢出' }], initialValue: 0 }]"
              placeholder="请选择是否允许溢出"
              dictCode="yn"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="是否启用">
            <j-dict-select-tag
              v-decorator="['enable', { rules: [{ required: true, message: '请选择是否启用' }], initialValue: 1 }]"
              placeholder="请选择是否启用"
              dictCode="yn"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="备注说明">
        <a-textarea
          v-decorator="['remark']"
          placeholder="请输入备注说明"
          :rows="2"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { postAction, putAction } from '@/api/manage'

export default {
  name: 'ProcessLocationZoneModal',
  props: {
    disableSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '',
      visible: false,
      confirmLoading: false,
      model: {},
      roadWayList: [],
      roadWayOptions: [
        { value: '1', label: '巷道1' },
        { value: '2', label: '巷道2' },
        { value: '3', label: '巷道3' },
        { value: '4', label: '巷道4' },
        { value: '5', label: '巷道5' }
      ]
    }
  },
  beforeCreate() {
    // 创建表单实例
    this.form = this.$form.createForm(this, { name: 'processLocationZoneForm' })
  },
  watch: {
    roadWayList: {
      handler(val) {
        this.model.roadWayList = val.join(',')
      },
      deep: true
    },
    'model.roadWayList': {
      handler(val) {
        if (val && !this.roadWayList.length) {
          this.roadWayList = val.split(',').filter(item => item.trim())
        }
      },
      immediate: true
    }
  },
  methods: {
    add() {
      this.title = '新增工序库位区域配置'
      this.visible = true
      this.model = {}
      this.roadWayList = []

      // 下次DOM更新后重置表单
      this.$nextTick(() => {
        this.form.resetFields()
      })
    },

    edit(record) {
      this.title = '编辑工序库位区域配置'
      this.model = { ...record }
      this.visible = true

      // 下次DOM更新后设置表单值
      this.$nextTick(() => {
        this.form.setFieldsValue({
          processCode: record.processCode,
          zoneName: record.zoneName,
          priority: record.priority || 1,
          rowStart: record.rowStart,
          rowEnd: record.rowEnd,
          columnStart: record.columnStart,
          columnEnd: record.columnEnd,
          layerStart: record.layerStart,
          layerEnd: record.layerEnd,
          locationCodes: record.locationCodes,
          isExclusive: record.isExclusive || 0,
          allowOverflow: record.allowOverflow || 0,
          enable: record.enable || 1,
          remark: record.remark
        })
      })
    },

    handleOk() {
      // 使用Ant Design Vue 1.x/2.x的表单验证
      this.form.validateFields((errors, values) => {
        if (!errors) {
          this.confirmLoading = true

          // 合并表单值和其他数据
          const formData = {
            ...this.model,
            ...values,
            roadWayList: this.model.roadWayList
          }

          const method = this.model.id ? 'put' : 'post'
          const url = this.model.id ? '/processLocationZone/edit' : '/processLocationZone/add'

          const action = this.model.id ? putAction : postAction

          action(url, formData).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
              this.close()
            } else {
              this.$message.error(res.message)
            }
          }).catch(error => {
            console.error(error)
            this.$message.error('操作失败')
          }).finally(() => {
            this.confirmLoading = false
          })
        } else {
          console.error('表单验证失败:', errors)
        }
      })
    },

    handleCancel() {
      this.close()
    },

    close() {
      this.visible = false
      this.model = {}
      this.roadWayList = []
      this.$emit('close')
    }
  }
}
</script>