doors-windows-web/src/views/production/productionTotalOrder/modules/productionTotalOrderAdd.vue

<template>
    <a-modal
      :title="defaultMethod=='add'?'新增':'编辑'"
       width="95%"
      :visible="visible"
      :maskClosable="false"
      switchFullscreen
      @cancel="handleCancel"
      @ok='handleOk'
      >
      <template slot="footer">
        <a-button  @click="handleCancel">关闭</a-button>
        <a-button type="primary"  @click="handleOk" v-if="allowEdit=='yes'">保存</a-button>
     </template>
      <a-card :bordered="false" class="top" style="margin-bottom:1%;margin-top:1%" :loading = 'loading'>
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="24">
                        <a-form-item label="生产组织">
                            <a-input-search placeholder="请输入" v-model="form.productionOrg" @search="onSearch" :disabled="allowEdit=='no'"></a-input-search>
                        </a-form-item>
                    </a-col>
                    <a-col  :md="4" :sm="24">
                        <a-form-item label="单据号">
                            <a-input placeholder="请输入" v-model="form.orderCode" :disabled="allowEdit=='no'"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="单据日期">
                            <a-date-picker showTime valueFormat="YYYY-MM-DD" format = "YYYY-MM-DD" v-model="form.orderDate" style="width:100%" :disabled="allowEdit=='no'"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="单据状态">
                            <a-select v-model="form.state"  style='width:100%' :disabled="allowEdit=='no'">
                                <a-select-option value='自由'> 自由</a-select-option>
                                <a-select-option value='已批准'> 已批准</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="业务员">
                            <a-input placeholder="请输入" v-model="form.salesperson" :disabled="allowEdit=='no'"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="计划部门">
                            <a-input-search placeholder="请输入" v-model="form.planDept" @search="onSearch" :disabled="allowEdit=='no'"></a-input-search>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="项目">
                            <a-input-search placeholder="请输入" v-model="form.project" @search="onSearch" :disabled="allowEdit=='no'"></a-input-search>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="备注">
                            <a-input-search placeholder="请输入" v-model="form.remarks"  @search="onSearch" :disabled="allowEdit=='no'"></a-input-search>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="业务类型">
                            <a-select v-model="form.type"  style='width:100%'  :disabled="allowEdit=='no'">
                                <a-select-option value='工装'> 工装</a-select-option>
                                <a-select-option value='家装'> 家装</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="制单人">
                            <a-input placeholder="请输入" v-model="form.createBy"  disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="审核人">
                            <a-input placeholder="请输入" v-model="form.reviewer" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="工单号">
                            <a-input placeholder="请输入" v-model="form.workNo" :disabled="allowEdit=='no'"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="项目编码" >
                            <a-input placeholder="请输入" v-model="form.projectCode" :disabled="allowEdit=='no'"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="来源标识" >
                            <a-input placeholder="请输入" v-model="form.sourceInfo" :disabled="allowEdit=='no'"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="改单版本" >
                            <a-input placeholder="请输入" v-model="form.version" :disabled="allowEdit=='no'"></a-input>
                        </a-form-item>
                    </a-col>
                    
                </a-row>
            </a-form>
        </div>
     </a-card>
     <a-card :bordered="false" class="three" style="margin-bottom:1%" :loading = 'loading'>
       <div class="table-operator">
            <a-button type="danger" size="small"  @click="addList" :disabled="allowEdit=='no'">增行</a-button>
            <a-button size="small" @click="delectRow" :disabled="allowEdit=='no'">删行</a-button>
            <a-select v-model="execute"  style='width:9%' placeholder="委外" @change="changeChose">
                <a-select-option value='生产出入库页签' > 生产出入库页签</a-select-option>
                <a-select-option value='选择委外材料明细'  v-if="allowEdit=='no'" > 选择委外材料明细</a-select-option>
                <a-select-option value='修改入库颜色'  v-if="allowEdit=='no'" > 修改入库颜色</a-select-option>
                <a-select-option value='修改出库颜色'  v-if="allowEdit=='no'" > 修改出库颜色</a-select-option>
                <a-select-option value='委外增行'  v-if="allowEdit=='no'"> 委外增行</a-select-option>
                <a-select-option value='委外拆分行'  v-if="allowEdit=='no'"> 委外拆分行</a-select-option>
                <a-select-option value='委外删行'  v-if="allowEdit=='no'"> 委外删行</a-select-option>
                <a-select-option value='委外保存'  v-if="allowEdit=='no'"> 委外保存</a-select-option>
            </a-select>
       </div>
       <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="成品明细" :key="refKeys[0]" :forceRender="true">
               <productDetails ref="productDetails"></productDetails>
            </a-tab-pane>
            <a-tab-pane tab="材料明细" :key="refKeys[1]" :forceRender="true">
               <material ref="material" @changeEdit = 'changeEdit' @clearn="clearnExecute"></material>
            </a-tab-pane>
            <a-tab-pane tab="委外其他出库" :key="refKeys[2]" :forceRender="true">
                <Outbound ref='Outbound' @changeOutColor ='changeEdit'></Outbound>
            </a-tab-pane>
            <a-tab-pane tab="委外其他入库" :key="refKeys[3]" :forceRender="true">
                <Warehousing ref='Warehousing' @changeWareColor ='changeEdit'></Warehousing>
            </a-tab-pane>
        </a-tabs>
       
    </a-card>
    </a-modal>
  </template>
  <script>
  
      import { FormTypes } from '@/utils/JEditableTableUtil'
      import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
      import productDetails from './productDetails'
      import material from './material'
      import Outbound from './Outbound'
      import Warehousing from './Warehousing'
      import moment from "moment"
      import { httpAction ,getAction,postAction,putAction} from '@/api/manage'
      export default {
        name: 'materialProcurementAdd',
        mixins: [JEditableTableModelMixin],
        components: {
            productDetails,
            material,
            Outbound,
            Warehousing
        },
        data() {
          return {
            visible:false,
            form:{},
            form1:{},
            execute:'',
            defaultMethod:'add',
            allowEdit:'yes',
            allowEditMaterial:'no',
            dataSource:[],
            loading:false,
            // ipagination:{},
            selectedRowKeys:[],
            selectedRows:[],
            activeKey:'finishProduct',
            refKeys:['finishProduct','material','Outbound','Warehousing'],
          }
        },
        created() {
          
        },
        methods: {
            handleCancel(){
                this.visible=false
                this.defaultMethod='add'
                this.allowEdit = 'yes'
                this.activeKey='finishProduct',
                this.execute = ''
                this.dataSource = [] 
                this.form={}
                this.form1={}
                this.$refs.material.allowEditMaterial ='no'
                this.$refs.Warehousing.allowEditColor ='no'
                this.$refs.Outbound.allowEditColor ='no'
                this.$emit('ok')
            },
            changeChose(prop){
                if(prop=='选择委外材料明细'){
                    this.$refs.material.allowEditMaterial ='yes'
                }else if(prop == '修改入库颜色'){
                    this.$refs.Warehousing.allowEditColor ='yes'
                }else if(prop == '修改出库颜色'){
                    this.$refs.Outbound.allowEditColor ='yes'
                }else if(prop == '委外增行'){
                    this.$refs.material.addMaterial()
                }else if(prop =='委外拆分行'){
                    this.$refs.material.copyRow()
                }else if(prop =='委外删行'){
                    this.$refs.material.delecteCopyRow()
                }else if(prop =='委外保存'){
                    this.changeEdit()
                }
            },
            handleOk(){
                var madeProductionOrdersPage = this.form
                madeProductionOrdersPage.madeProductionOrdersFinishedList = this.$refs.productDetails.dataSource
                madeProductionOrdersPage.madeProductionOrdersMaterialList = this.$refs.material.dataSource
                madeProductionOrdersPage.madeProductionOrdersOutList = this.$refs.Outbound.dataSource
                madeProductionOrdersPage.madeProductionOrdersInList = this.$refs.Warehousing.dataSource
                this.loading = true
                if(this.defaultMethod=='add'){
                    postAction('/productionOrder/madeProductionOrders/add', madeProductionOrdersPage).then((res) => {
                        if (res.success) {
                            this.$message.success('添加成功！');
                            this.handleCancel()
                            this.$emit('ok')
                        } else {
                            this.$message.error(res.message);
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                }else{
                    postAction('/productionOrder/madeProductionOrders/edit', madeProductionOrdersPage).then((res) => {
                        if (res.success) {
                            this.handleCancel()
                            this.$emit('ok')
                            this.$message.success('编辑成功！');
                        } else {
                            this.$message.error(res.message);
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                }                
            },
            changeEdit(){
                var madeProductionOrdersPage = this.form
                madeProductionOrdersPage.madeProductionOrdersFinishedList = this.$refs.productDetails.dataSource
                madeProductionOrdersPage.madeProductionOrdersMaterialList = this.$refs.material.dataSource
                madeProductionOrdersPage.madeProductionOrdersOutList = this.$refs.Outbound.dataSource
                madeProductionOrdersPage.madeProductionOrdersInList = this.$refs.Warehousing.dataSource
                postAction('/productionOrder/madeProductionOrders/editChild', madeProductionOrdersPage).then((res) => {
                        if (res.success) {
                            console.log(res.message);
                            this.$refs.productDetails.dataSource = madeProductionOrdersPage.madeProductionOrdersFinishedList
                            this.$refs.material.dataSource = madeProductionOrdersPage.madeProductionOrdersMaterialList
                            this.$refs.Outbound.dataSource = madeProductionOrdersPage.madeProductionOrdersOutList
                            this.$refs.Warehousing.dataSource = madeProductionOrdersPage.madeProductionOrdersInList
                        } else {
                            this.$message.error(res.message);
                        }
                    }).finally(() => {
                    })
            },
            handleTableChange(){

            },
            onSearch(){
               
            },
            //获取主表信息
            getMainData(id){
                getAction('/productionOrder/madeProductionOrders/queryById',{id:id}).then(res=>{
                    if(res.success){
                       this.form=res.result
                       this.getProductData(this.form.id)
                       this.getMaterialData(this.form.id)
                       this.getOutboundData(this.form.id)
                       this.getWarehousingData(this.form.id)
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            //获取子表信息
            getProductData(id){
                //成品明细
                this.$refs.productDetails.allowEdit = this.allowEdit
                getAction('/productionOrder/madeProductionOrders/queryMadeProductionOrdersFinishedByMainId',{id:id}).then(res=>{
                    if(res.success){
                        this.$refs.productDetails.dataSource =res.result
                        this.$refs.productDetails.dataSource.map((item,index)=>{
                            item.rowNo =index+1
                       })
                       
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            //获取子表信息
            getMaterialData(id){
                //材料明细
                this.$refs.material.allowEdit = this.allowEdit
                getAction('/productionOrder/madeProductionOrders/queryMadeProductionOrdersMaterialByMainId',{id:id}).then(res=>{
                    if(res.success){
                        this.$refs.material.dataSource =res.result
                        this.$refs.material.dataSource.map((item,index)=>{
                            item.rowNo =index+1
                       })
                       
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
             //获取子表信息
             getOutboundData(id){
                //委外出库
                getAction('/productionOrder/madeProductionOrders/queryMadeProductionOrdersOutByMainId',{id:id}).then(res=>{
                    if(res.success){
                        this.$refs.Outbound.dataSource =res.result
                        this.$refs.Outbound.dataSource.map((item,index)=>{
                            item.rowNo =index+1
                       })
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            //获取子表信息
            getWarehousingData(id){
                //委外入库
                getAction('/productionOrder/madeProductionOrders/queryMadeProductionOrdersInByMainId',{id:id}).then(res=>{
                    if(res.success){
                        this.$refs.Warehousing.dataSource =res.result
                        this.$refs.Warehousing.dataSource.map((item,index)=>{
                            item.rowNo =index+1
                       })
                       
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            addList(){
                if(this.activeKey=='finishProduct'){
                    this.$refs.productDetails.addList()
                }else if(this.activeKey=='material'){
                    this.$refs.material.addList()
                }
                // else if(this.activeKey=='Outbound'){
                //     this.$refs.Outbound.addList()
                // }else if(this.activeKey=='Warehousing'){
                //     this.$refs.Warehousing.addList()
                // }
            },
            delectRow(){
                if(this.activeKey=='finishProduct'){
                    this.$refs.productDetails.delectRow()
                }else if(this.activeKey=='material'){
                    this.$refs.material.delectRow()
                }
                // else if(this.activeKey=='Outbound'){
                //     this.$refs.Outbound.delectRow()
                // }else if(this.activeKey=='Warehousing'){
                //     this.$refs.Warehousing.delectRow()
                // }
            },
            clearnExecute(){
                this.execute = ''
            }

        }
      }
  </script>
  
  <style scoped lang="less">
    /* @import '~@assets/less/common.less' */
    /deep/.ant-input{
        height:29px;
    }
    /deep/.ant-select-selection--single {
        height: 29px;
    }
    /deep/.ant-select{
        font-size: 12px;
    }
    /deep/.ant-form label{
        font-size: 12px;
    }
    /deep/.table-page-search-wrapper .ant-form-inline .ant-form-item{
        margin-bottom:9px
    }
    /deep/.moddle>.ant-card-body{
        padding-bottom:0px;
        padding-top: 12px;
    }
    /deep/.top>.ant-card-body{
        padding-bottom:0px;
        padding-top: 12px;
    }
    /deep/.ant-btn{
        height:28px
    }
    /deep/.ant-modal-body{
        padding-bottom: 0px;
        padding-top: 0px;
    }
    // /deep/.ant-modal-body{
    //     background: #f0f2f5;
    // }
    /deep/.ant-modal-content{
        background: #f0f2f5;
    }
    /deep/.ant-card-body .table-operator {
        margin-bottom: 0px;
    }
    /deep/.three>.ant-card-body{
        padding-bottom:12px;
        padding-top: 12px;
    }
    /deep/.bottom>.ant-card-body{
        padding-bottom:0px;
        padding-top: 12px;
    }

    /deep/.ant-calendar-picker{
        min-width: 0px !important;  
    }
    /deep/.sonItem {
        margin-bottom:0px !important
    }
    /deep/#sonList>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-content>.ant-table-scroll>.ant-table-body>.ant-table-fixed>.ant-table-tbody > tr > td {
        padding: 0px 8px !important;
    }
  </style>