| | |
| | | <template> |
| | | <a-spin :spinning="confirmLoading"> |
| | | <j-form-container :disabled="formDisabled"> |
| | | <j-form-container :disabled="true"> |
| | | <!-- 主表单区域 --> |
| | | <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"> |
| | | <a-form-model ref="form1" :model="model" :rules="validatorRules" slot="detail"> |
| | | <a-row> |
| | | <a-col :span="12" > |
| | | <a-col :span="24"> |
| | | <a-form-model-item label="物料编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialNumber"> |
| | | <a-input v-model="model.materialNumber" placeholder="请输入物料编码" ></a-input> |
| | | <a-input v-model="model.materialNumber"></a-input> |
| | | </a-form-model-item> |
| | | </a-col> |
| | | <a-col :span="12" > |
| | | <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-input v-model="model.materialName"></a-input> |
| | | </a-form-model-item> |
| | | </a-col> |
| | | <a-col :span="12" > |
| | | <a-form-model-item label="物料型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialModel"> |
| | | <a-input v-model="model.materialModel" placeholder="请输入物料型号" ></a-input> |
| | | </a-form-model-item> |
| | | </a-col> |
| | | <a-col :span="12" > |
| | | <a-form-model-item label="物料类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialCategory"> |
| | | <j-dict-select-tag type="list" v-model="model.materialCategory" dictCode="material_category" placeholder="请选择物料类型" /> |
| | | </a-form-model-item> |
| | | </a-col> |
| | | <a-col :span="12" > |
| | | <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialUnit"> |
| | | <a-input v-model="model.materialUnit" placeholder="请输入单位" ></a-input> |
| | | <a-col :span="24"> |
| | | <a-form-model-item label="基本计量单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialUnit"> |
| | | <a-input v-model="model.materialUnit"></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"> |
| | | <j-vxe-table |
| | | keep-source |
| | | :ref="refKeys[0]" |
| | | :loading="lswMaterialInventoryTable.loading" |
| | | :columns="lswMaterialInventoryTable.columns" |
| | | :dataSource="lswMaterialInventoryTable.dataSource" |
| | | :maxHeight="300" |
| | | :disabled="formDisabled" |
| | | :rowNumber="true" |
| | | :rowSelection="true" |
| | | :toolbar="true" |
| | | /> |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | <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="materialCategory"> |
| | | <j-dict-select-tag type="list" v-model="model.materialCategory" dictCode="material_category" /> |
| | | </a-form-model-item> |
| | | </a-col> |
| | | </a-row> |
| | | </a-form-model> |
| | | </j-form-container> |
| | | </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' |
| | | import { httpAction } from '@/api/manage' |
| | | |
| | | export default { |
| | | name: 'LswMaterialForm', |
| | | mixins: [JVxeTableModelMixin], |
| | | components: { |
| | | JFormContainer, |
| | | }, |
| | | data() { |
| | | return { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 5 }, |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 }, |
| | | }, |
| | | model:{ |
| | | }, |
| | | // 新增时子表默认添加几行空数据 |
| | | addDefaultRowNum: 1, |
| | | validatorRules: { |
| | | }, |
| | | refKeys: ['lswMaterialInventory', ], |
| | | tableKeys:['lswMaterialInventory', ], |
| | | activeKey: 'lswMaterialInventory', |
| | | // 物料库存信息 |
| | | lswMaterialInventoryTable: { |
| | | loading: false, |
| | | dataSource: [], |
| | | columns: [ |
| | | { |
| | | title: '物料ID', |
| | | key: 'materialId', |
| | | type: JVXETypes.input, |
| | | width:"200px", |
| | | placeholder: '请输入${title}', |
| | | defaultValue:'', |
| | | }, |
| | | { |
| | | title: '批次号', |
| | | key: 'batchNumber', |
| | | type: JVXETypes.input, |
| | | width:"200px", |
| | | placeholder: '请输入${title}', |
| | | defaultValue:'', |
| | | }, |
| | | { |
| | | title: '库存类型', |
| | | key: 'inventoryCategory', |
| | | type: JVXETypes.input, |
| | | width:"200px", |
| | | placeholder: '请输入${title}', |
| | | defaultValue:'', |
| | | }, |
| | | { |
| | | title: '数量', |
| | | key: 'quantity', |
| | | type: JVXETypes.input, |
| | | width:"200px", |
| | | placeholder: '请输入${title}', |
| | | defaultValue:'', |
| | | }, |
| | | { |
| | | title: '库存地ID', |
| | | key: 'warehouseId', |
| | | type: JVXETypes.input, |
| | | width:"200px", |
| | | placeholder: '请输入${title}', |
| | | defaultValue:'', |
| | | }, |
| | | { |
| | | title: '库存状态', |
| | | key: 'inventoryStatus', |
| | | type: JVXETypes.input, |
| | | width:"200px", |
| | | placeholder: '请输入${title}', |
| | | defaultValue:'', |
| | | }, |
| | | ] |
| | | }, |
| | | url: { |
| | | add: "/lswmaterial/lswMaterial/add", |
| | | edit: "/lswmaterial/lswMaterial/edit", |
| | | queryById: "/lswmaterial/lswMaterial/queryById", |
| | | lswMaterialInventory: { |
| | | list: '/lswmaterial/lswMaterial/queryLswMaterialInventoryByMainId' |
| | | }, |
| | | } |
| | | export default { |
| | | name: 'LswMaterialForm', |
| | | components: { |
| | | }, |
| | | data() { |
| | | return { |
| | | confirmLoading: false, |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 5 } |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 } |
| | | }, |
| | | model: {}, |
| | | validatorRules: { |
| | | materialCategory: [ |
| | | { required: true, message: '物料类型必选', trigger: 'change' } |
| | | ] |
| | | }, |
| | | url: { |
| | | add: '', |
| | | edit: '/lsw/lswMaterial/edit' |
| | | } |
| | | } |
| | | }, |
| | | props: { |
| | | //表单禁用 |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false, |
| | | required: false |
| | | } |
| | | }, |
| | | computed: { |
| | | formDisabled() { |
| | | return this.disabled |
| | | } |
| | | }, |
| | | created() { |
| | | //备份model原始值 |
| | | this.modelDefault = JSON.parse(JSON.stringify(this.model)) |
| | | console.log('formDisabled' + this.formDisabled) |
| | | }, |
| | | methods: { |
| | | add() { |
| | | this.edit(this.modelDefault) |
| | | }, |
| | | props: { |
| | | //表单禁用 |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false, |
| | | required: false |
| | | } |
| | | edit(record) { |
| | | this.model = Object.assign({}, record) |
| | | this.visible = true |
| | | }, |
| | | computed: { |
| | | formDisabled(){ |
| | | return this.disabled |
| | | }, |
| | | }, |
| | | created () { |
| | | }, |
| | | methods: { |
| | | addBefore(){ |
| | | this.lswMaterialInventoryTable.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.lswMaterialInventory.list, params, this.lswMaterialInventoryTable) |
| | | submitForm() { |
| | | const that = this |
| | | // 触发表单验证 |
| | | this.$refs.form.validate(valid => { |
| | | if (valid) { |
| | | that.confirmLoading = true |
| | | let httpurl = '' |
| | | let method = '' |
| | | if (!this.model.id) { |
| | | httpurl += this.url.add |
| | | method = 'post' |
| | | } else { |
| | | httpurl += this.url.edit |
| | | method = 'put' |
| | | } |
| | | httpAction(httpurl, this.model, method).then((res) => { |
| | | if (res.success) { |
| | | that.$message.success(res.message) |
| | | that.$emit('ok') |
| | | } else { |
| | | that.$message.warning(res.message) |
| | | } |
| | | }).finally(() => { |
| | | that.confirmLoading = false |
| | | }) |
| | | } |
| | | }, |
| | | //校验所有一对一子表表单 |
| | | 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, // 展开 |
| | | lswMaterialInventoryList: allValues.tablesValue[0].tableData, |
| | | } |
| | | }, |
| | | validateError(msg){ |
| | | this.$message.error(msg) |
| | | }, |
| | | |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |