<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 :span="24"> <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 :span="24"> <a-form-model-item label="物料编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialCode"> <a-input v-model="model.materialCode" placeholder="请输入物料编码"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="物料名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialName"> <a-input v-model="model.materialName" placeholder="请输入物料名称"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="物料单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialUnit"> <a-input v-model="model.materialUnit" placeholder="请输入物料单位"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="qty"> <a-input-number v-model="model.qty" placeholder="请输入数量" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="是否可用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enable"> <j-dict-select-tag type="list" v-model="model.enable" dictCode="enable_status" placeholder="请选择是否可用"/> </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="bom子表" :key="refKeys[0]" :forceRender="true"> <j-vxe-table keep-source :ref="refKeys[0]" :loading="bomDetailTable.loading" :columns="bomDetailTable.columns" :dataSource="bomDetailTable.dataSource" :maxHeight="300" :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" /> </a-tab-pane> </a-tabs> </a-spin> </template> <script> import {getAction} from '@/api/manage' import {JVxeTableModelMixin} from '@/mixins/JVxeTableModelMixin.js' import {JVXETypes} from '@/components/jeecg/JVxeTable' import {getRefPromise, VALIDATE_FAILED} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js' import {validateDuplicateValue} from '@/utils/util' import JFormContainer from '@/components/jeecg/JFormContainer' export default { name: 'BomHeaderForm', mixins: [JVxeTableModelMixin], components: { JFormContainer, }, data() { return { labelCol: { xs: {span: 24}, sm: {span: 5}, }, wrapperCol: { xs: {span: 24}, sm: {span: 16}, }, model: {}, // 新增时子表默认添加几行空数据 addDefaultRowNum: 1, validatorRules: { materialCode: [ {required: true, message: '请输入物料编码!'}, ], }, refKeys: ['bomDetail',], tableKeys: ['bomDetail',], activeKey: 'bomDetail', // bom子表 bomDetailTable: { loading: false, dataSource: [], columns: [ { title: '物料编码', key: 'materialCode', type: JVXETypes.input, width: "200px", placeholder: '请输入${title}', defaultValue: '', validateRules: [{required: true, message: '${title}不能为空'}], }, { title: '物料名称', key: 'materialName', type: JVXETypes.input, width: "200px", placeholder: '请输入${title}', defaultValue: '', validateRules: [{required: true, message: '${title}不能为空'}], }, { title: '物料单位', key: 'materialUnit', type: JVXETypes.input, width: "200px", placeholder: '请输入${title}', defaultValue: '', }, { title: '组套层次', key: 'buildLevel', type: JVXETypes.input, width: "200px", placeholder: '请输入${title}', defaultValue: '', }, { title: '组套序号', key: 'buildSequence', type: JVXETypes.input, width: "200px", placeholder: '请输入${title}', defaultValue: '', }, { title: '数量', key: 'qty', type: JVXETypes.input, width: "200px", placeholder: '请输入${title}', defaultValue: '', validateRules: [{required: true, message: '${title}不能为空'}], }, ] }, url: { add: "/config/bomHeader/add", edit: "/config/bomHeader/edit", queryById: "/config/bomHeader/queryById", bomDetail: { list: '/config/bomHeader/queryBomDetailByMainId' }, } } }, props: { //表单禁用 disabled: { type: Boolean, default: false, required: false } }, computed: { formDisabled() { return this.disabled }, }, created() { }, methods: { addBefore() { this.bomDetailTable.dataSource = [] }, getAllTable() { let values = this.tableKeys.map(key => getRefPromise(this, key)) return Promise.all(values) }, /** 调用完edit()方法之后会自动调用此方法 */ editAfter() { this.$nextTick(() => { }) // 加载子表数据 if (this.model.id) { let params = {id: this.model.id} this.requestSubTableData(this.url.bomDetail.list, params, this.bomDetailTable) } }, //校验所有一对一子表表单 validateSubForm(allValues) { return new Promise((resolve, reject) => { Promise.all([]).then(() => { resolve(allValues) }).catch(e => { if (e.error === VALIDATE_FAILED) { // 如果有未通过表单验证的子表,就自动跳转到它所在的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, // 展开 bomDetailList: allValues.tablesValue[0].tableData, } }, validateError(msg) { this.$message.error(msg) }, } } </script> <style scoped> </style>