itemCRUDDialog.vue 10.3 KB
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1000px"
    append-to-body
    @close="$emit('update:show', false)"
  >
    <el-form ref="diaForm"
             :title="title"
             :model="data"
             label-width="50%"
             :rules="rules" >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="物料编码" prop="code">
            <el-input v-model="data.code" placeholder="请输入货主编码"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="货主编码" prop="companyCode">
            <el-select v-model="data.companyCode" placeholder="请输入货主编码">
              <el-option v-for="item in selectionOptions.company"
                         :label="item.name"
                         :key="item.code"
                         :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>



        <el-col :span="8">
          <el-form-item label="物料名称" prop="name">
            <el-input v-model="data.name" placeholder="请输入物料名称"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="物料类别" prop="type">
            <el-select v-model="data.type" placeholder="请输入物料类别">
              <el-option v-for="item in selectionOptions.typeData"
                         :label="item.name"
                         :key="item.code"
                         :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="data.unit" placeholder="请输入单位"/>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="规格" prop="spec">
            <el-input v-model="data.spec" placeholder="请输入规格"/>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="ABC分类" prop="abcClass">
            <el-input v-model="data.abcClass" placeholder="请输入ABC分类"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="保质期(天)" prop="daysToExpire">
            <el-input v-model="data.daysToExpire" placeholder="请输入保质期(天)"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="定位规则" prop="locatingRule">
            <el-select v-model="data.locatingRule" placeholder="请选择定位规则">
              <el-option v-for="item in selectionOptions.locationRule"
                         :label="item.description"
                         :key="item.code"
                         :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="分配规则" prop="allocationRule">
            <el-select v-model="data.allocationRule" placeholder="请选择分配规则">
              <el-option v-for="item in selectionOptions.allocationRule"
                         :label="item.description"
                         :key="item.code"
                         :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>



        <el-col :span="8">
          <el-form-item label="补货规则" prop="replenishmentRule">
            <el-select v-model="data.replenishmentRule" placeholder="请选择补货规则">
              <el-option v-for="item in selectionOptions.replenishmentRule"
                         :label="item.description"
                         :key="item.code"
                         :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="空货位规则" prop="emptyLocRule">
            <el-select v-model="data.emptyLocRule" placeholder="请选择空货位规则">
              <el-option v-for="item in selectionOptions.emptyLocRule"
                         :label="item.description"
                         :key="item.code"
                         :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="属性模板" prop="attributeTemplateCode">
            <el-input v-model="data.attributeTemplateCode" maxlength="11" placeholder="请输入属性模板"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="出库流程" prop="shippingFlow">
            <el-select v-model="data.shippingFlow" maxlength="11" placeholder="请选择出库流程">
              <el-option v-for="item in selectionOptions.shippingFlow"
                         :label="item.name"
                         :key="item.code"
                         :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="入库流程" prop="receivingFlow">
            <el-select v-model="data.receivingFlow" maxlength="11" placeholder="请选择入库流程">
              <el-option v-for="item in selectionOptions.receivingFlow"
                         :label="item.name"
                         :key="item.code"
                         :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="记录序列号" prop="trackSerialNum">
            <el-input v-model="data.trackSerialNum" maxlength="11" placeholder="请输入记录序列号"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="自动生成序列号" prop="autoGenSerialNum">
            <el-select v-model="data.autoGenSerialNum" maxlength="11" placeholder="是否自动生成序列号">
              <el-option value=0 label="是"></el-option>
              <el-option value=1 label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="自动生成序列号表达式" prop="autoGenSerialNumFormat">
            <el-input v-model="data.autoGenSerialNumFormat" maxlength="11" placeholder="请输入自动生成序列号表达式"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="序列号模板" prop="snTemplateCode">
            <el-input v-model="data.snTemplateCode" maxlength="11" placeholder="请输入序列号模板"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="临期预警天数" prop="expiringDays">
            <el-input v-model="data.expiringDays" maxlength="11" placeholder="请输入临期预警天数"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="收货预警天数" prop="minShelfLifeDays">
            <el-input v-model="data.minShelfLifeDays" maxlength="11" placeholder="请输入收货预警天数"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="状态" prop="enable">
            <el-switch v-model="data.enable"
                       :active-value="0"
                       :inactive-value="1"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import { add, edit } from '@/api/config/InventoryInfo/material'

  export default{
    name: 'itemCRUDDialog',
    props:{
      show:{
        type:Boolean,
        default:false
      },
      switch:{
        type:Boolean,
        default:false
      },
      diaForm: {
        type:String,
        default:''
      },
      temDiaForm: {
        type:String
      },
      selectionOptions:{
        type:Object,
        default:()=>({})
      },
      title: {
        type:String,
        default:''
      }
    },
    watch:{
      show(){
        this.visible = this.show
        if (!this.switch){
          this.data = {}
        }else {
          if (this.temDiaForm){
            this.data = JSON.parse(this.temDiaForm)
          }else {
            this.data = JSON.parse(this.diaForm)
          }
        }
      }
    },
    data() {
      return {
        visible: this.show,
        data:{},
        rules: {
          code: [
            { required: true, message: '请输入物料编码', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入物料名称', trigger: 'blur' }
          ],
          companyCode: [
            { required: true, message: '请选择货主', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择物料类型', trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      /** 提交按钮 */
      submitForm: function() {
        this.$refs['diaForm'].validate(valid => {
          if (valid) {
            if (this.switch) {
              edit(this.data).then(response => {
                if (response.code === 200) {
                  this.$emit('globalQuery')
                  this.msgSuccess('修改成功')
                  this.visible = false
                }
              })
            } else {
              add(this.data).then(response => {
                if (response.code === 200) {
                  this.$emit('globalQuery')
                  this.msgSuccess('新增成功')
                  this.visible = false
                }
              })
            }
          }
        })
      },
      // 重置对话框表单
      reset() {
        this.resetForm('diaForm')
        this.$emit('clear')
      },
      //关闭对话框
      cancel() {
        this.reset()
        this.visible = false
      },
    }
  }
</script>

<style scoped>

</style>