<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>