<template> <a-modal :title="title" :width="800" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel"> <a-spin :spinning="confirmLoading"> <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model"> <!-- 主表单区域 --> <a-row class="form-row" :gutter="0"> <a-col :lg="8"> <a-form-model-item label="托盘号" :rules="[{ required: true, message: '请输入托盘号!' }]"> <a-input placeholder="请输入托盘号" v-model="quickMainModel.containerCode"/> </a-form-model-item> </a-col> <a-col :lg="8"> <a-form-model-item label="入库口"> <a-input placeholder="请输入入库口" v-model="quickMainModel.toPort"/> </a-form-model-item> </a-col> </a-row> <!-- 子表单区域 --> <a-tabs defaultActiveKey="1"> <a-tab-pane tab="物料信息" key="1"> <div> <a-row type="flex" style="margin-bottom:10px" :gutter="16"> <a-col :span="8">物料编码</a-col> <a-col :span="5">数量</a-col> </a-row> <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in quickMainModel.receiptEntityList" :key="index"> <a-col :span="6" style="display: none"> <a-form-model-item> <a-input placeholder="id" v-model="item.id"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item> <j-search-select-tag placeholder="请做出你的选择" v-model="item.materialCode" dict="material,name,code" :pageSize="5" :async="true"> </j-search-select-tag> </a-form-model-item> </a-col> <a-col :span="5"> <a-form-model-item> <a-input placeholder="数量" v-model="item.qty"/> </a-form-model-item> </a-col> <a-col :span="2"> <a-form-model-item> <a-icon type="minus-circle" @click="delRowCustom(index)" style="fontSize :20px"/> </a-form-model-item> </a-col> </a-row> <a-button type="dashed" style="width: 98%;margin-top: 10px" @click="addRowCustom"> <a-icon type="plus"/> 添加物料信息 </a-button> </div> </a-tab-pane> </a-tabs> </a-form-model> </a-spin> </a-modal> </template> <script> import JEditableTable from '@/components/jeecg/JEditableTable' import {execute, quickReceipt} from '@/api/api' import JDate from '@/components/jeecg/JDate' export default { name: 'MaterialTaskModal', components: { JDate, JEditableTable }, data() { return { title: '操作', visible: false, confirmLoading: false, model: {}, labelCol: { xs: {span: 24}, sm: {span: 6} }, wrapperCol: { xs: {span: 24}, sm: {span: 24 - 6} }, activeKey: '1', quickMainModel: { receiptEntityList: [{}], }, // 客户信息 url: { add: '/test/jeecgOrderMain/add', edit: '/test/jeecgOrderMain/edit', } } }, created() { }, methods: { handleOk() { this.validateFields() }, handleCancel() { this.visible = false }, addRowCustom() { this.quickMainModel.receiptEntityList.push({}); this.$forceUpdate(); }, delRowCustom(index) { console.log(index) this.quickMainModel.receiptEntityList.splice(index, 1); this.$forceUpdate(); }, addRowTicket() { this.quickMainModel.jeecgOrderTicketList.push({}); console.log(this.quickMainModel.jeecgOrderTicketList) this.$forceUpdate(); }, delRowTicket(index) { console.log(index) this.quickMainModel.jeecgOrderTicketList.splice(index, 1); this.$forceUpdate(); }, edit(record) { this.visible = true this.activeKey = '1' this.quickMainModel = Object.assign({ receiptEntityList: [{}] }, record); }, /** 触发表单验证 */ validateFields() { // 触发表单验证 this.$refs.form.validate(valid => { //alert(JSON.stringify(this.quickMainModel)); this.receipt(this.quickMainModel); }) }, /** 整理成formData */ classifyIntoFormData(allValues) { let orderMain = Object.assign(this.model, allValues.formValue) return { ...orderMain, // 展开 receiptEntityList: allValues.tablesValue[0].values, } }, receipt(record) { this.confirmLoading = true this.model = Object.assign({}, record); quickReceipt(this.model).then((res) => { this.loading = false; if (res.success) { this.$message.success(res.message); this.$emit('ok'); this.visible = false } else { this.$message.error(res.message); } this.confirmLoading = false }); }, } } </script> <style scoped> </style>