CycleCountDetailForm.vue 9.07 KB
<template>
   <a-spin :spinning="confirmLoading">
     <j-form-container :disabled="formDisabled">
       <!-- 主表单区域 -->
       <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
         <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="盘点主单id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cycleCountHeadId">
              <a-input v-model="model.cycleCountHeadId" placeholder="请输入盘点主单id" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="盘点主单code" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cycleCountHeadCode">
              <a-input v-model="model.cycleCountHeadCode" placeholder="请输入盘点主单code" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="任务表头" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taskHeaderId">
              <a-input v-model="model.taskHeaderId" placeholder="请输入任务表头" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="任务明细头" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taskDetailId">
              <a-input v-model="model.taskDetailId" placeholder="请输入任务明细头" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="warehouseCode">
              <a-input v-model="model.warehouseCode" placeholder="请输入仓库" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="货主" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyCode">
              <a-input v-model="model.companyCode" placeholder="请输入货主" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="库存明细头" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="inventoryDetailId">
              <a-input v-model="model.inventoryDetailId" placeholder="请输入库存明细头" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="库位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="locationCode">
              <a-input v-model="model.locationCode" placeholder="请输入库位" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="容器" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="containerCode">
              <a-input v-model="model.containerCode" placeholder="请输入容器" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="库存状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="inventorySts">
              <a-input v-model="model.inventorySts" placeholder="请输入库存状态" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="系统数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="systemQty">
              <a-input v-model="model.systemQty" placeholder="请输入系统数量" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="实盘数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="countedQty">
              <a-input v-model="model.countedQty" placeholder="请输入实盘数量" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="差异数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gapQty">
              <a-input v-model="model.gapQty" placeholder="请输入差异数量" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="失败原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rejectionNote">
              <a-input v-model="model.rejectionNote" placeholder="请输入失败原因" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="完成用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="completedBy">
              <a-input v-model="model.completedBy" placeholder="请输入完成用户" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="completedAt">
              <a-input v-model="model.completedAt" placeholder="请输入完成时间" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-model-item label="盘点明细状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enableStatus">
              <a-input v-model="model.enableStatus" placeholder="请输入盘点明细状态" ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
     </j-form-container>
      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="盘点容器明细表" :key="refKeys[0]" :forceRender="true">
          <cycle-count-detail-child-form ref="cycleCountDetailChildForm" @validateError="validateError" :disabled="formDisabled"></cycle-count-detail-child-form>
        </a-tab-pane>

      </a-tabs>
    </a-spin>
</template>

<script>

  import { FormTypes,getRefPromise,VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
  import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import CycleCountDetailChildForm from './CycleCountDetailChildForm.vue'

  export default {
    name: 'CycleCountDetailForm',
    mixins: [JEditableTableModelMixin],
    components: {
    CycleCountDetailChildForm,
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        model:{
        },
validatorRules: {
},
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        refKeys: ['cycleCountDetailChild', ],
        tableKeys:[],
        activeKey: 'cycleCountDetailChild',
        // 盘点容器明细表
        cycleCountDetailChildTable: {
          loading: false,
          dataSource: [],
          columns: [
          ]
        },
        url: {
          add: "/cycleCountDetail/cycleCountDetail/add",
          edit: "/cycleCountDetail/cycleCountDetail/edit",
          cycleCountDetailChild: {
            list: '/cycleCountDetail/cycleCountDetail/queryCycleCountDetailChildByMainId'
          },
        }
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
    },
    methods: {
     addBefore(){
            this.$refs.cycleCountDetailChildForm.clearFormData()
      },
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
          this.$refs.cycleCountDetailChildForm.initFormData(this.url.cycleCountDetailChild.list,this.model.id)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
        }
      },
      //校验所有一对一子表表单
    validateSubForm(allValues){
        return new Promise((resolve,reject)=>{
          Promise.all([
              this.$refs.cycleCountDetailChildForm.validate(0),
          ]).then(() => {
            resolve(allValues)
          }).catch(e => {
            if (e.error === VALIDATE_NO_PASSED) {
              // 如果有未通过表单验证的子表,就自动跳转到它所在的tab
              this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
            } else {
              console.error(e)
            }
          })
        })
    },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)

        return {
          ...main, // 展开
          cycleCountDetailChildList: this.$refs.cycleCountDetailChildForm.getFormData(),
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
     close() {
        this.visible = false
        this.$emit('close')
        this.$refs.form.clearValidate();
      },

    }
  }
</script>

<style scoped>
</style>