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

<template>
    <a-modal
      title="详情"
       width="95%"
      :visible="visible"
      :maskClosable="false"
      switchFullscreen
      @cancel="handleCancel"
      >
      <template slot="footer">
        <a-button  @click="handleCancel">关闭</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></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></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/>
                        </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>
                                <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></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></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></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></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>
                                <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></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></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></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></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'>
       <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="成品明细" :key="refKeys[0]" :forceRender="true">
               <productDetailsParticulars ref="productDetailsParticulars"></productDetailsParticulars>
            </a-tab-pane>
            <a-tab-pane tab="材料明细" :key="refKeys[1]" :forceRender="true">
               <materialDetail ref="materialDetail" ></materialDetail>
            </a-tab-pane>
            <a-tab-pane tab="入库暂存" :key="refKeys[2]" :forceRender="true">
                <TemporaryStorageDetail ref='TemporaryStorageDetail'></TemporaryStorageDetail>
            </a-tab-pane>
            <a-tab-pane tab="余料管理" :key="refKeys[3]" :forceRender="true">
                <SurplusMaterialsDetail ref='SurplusMaterialsDetail'></SurplusMaterialsDetail>
            </a-tab-pane>
        </a-tabs>
       
    </a-card>
    </a-modal>
  </template>
  <script>
  
      import { FormTypes } from '@/utils/JEditableTableUtil'
      import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
      import materialDetail from './materialDetail'
      import TemporaryStorageDetail from './TemporaryStorageDetail'
      import productDetailsParticulars from './productDetailsParticulars'
      import SurplusMaterialsDetail from './SurplusMaterialsDetail'
      import moment from "moment"
      import { httpAction ,getAction,postAction,putAction} from '@/api/manage'
      export default {
        name: 'productionTotalOrderDetail',
        mixins: [JEditableTableModelMixin],
        components: {
            materialDetail,
            TemporaryStorageDetail,
            productDetailsParticulars,
            SurplusMaterialsDetail
        },
        data() {
          return {
            visible:false,
            form:{},
            dataSource:[],
            loading:false,
            // ipagination:{},
            selectedRowKeys:[],
            selectedRows:[],
            activeKey:'finishProduct',
            refKeys:['finishProduct','material','TemporaryStorage','SurplusMaterials'],
          }
        },
        created() {
          
        },
        methods: {
            handleCancel(){
                this.visible=false
                this.dataSource = [] 
                this.form={}
            },
            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.getTemporaryStorageData(this.form.id)
                       this.getSurplusMaterialsDetailData(this.form.id)
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            //获取子表信息
            getProductData(id){
                //成品明细
                getAction('/productionOrder/madeProductionOrders/queryMadeProductionOrdersFinishedByMainId',{id:id}).then(res=>{
                    if(res.success){
                        this.$refs.productDetailsParticulars.dataSource =res.result
                        this.$refs.productDetailsParticulars.dataSource.map((item,index)=>{
                            item.rowNo =index+1
                       })
                       
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            //获取子表信息
            getMaterialData(id){
                //材料明细
                getAction('/productionOrder/madeProductionOrders/queryMadeProductionOrdersMaterialByMainId',{id:id}).then(res=>{
                    if(res.success){
                        this.$refs.materialDetail.dataSource =res.result
                        this.$refs.materialDetail.dataSource.map((item,index)=>{
                            item.rowNo =index+1
                       })
                       
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
             //获取子表信息
             getTemporaryStorageData(id){
                //委外出库
                getAction('/productionOrder/madeProductionOrders/queryMadeProductionOrdersInByMainId',{id:id}).then(res=>{
                    if(res.success){
                        this.$refs.TemporaryStorageDetail.dataSource =res.result
                        this.$refs.TemporaryStorageDetail.dataSource.map((item,index)=>{
                            item.rowNo =index+1
                       })
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            //获取子表信息
            getSurplusMaterialsDetailData(id){
                //余料管理
                getAction('/productionOrder/madeProductionOrders/queryMadeProductionOrdersOutByMainId',{id:id}).then(res=>{
                    if(res.success){
                        this.$refs.SurplusMaterialsDetail.dataSource =res.result
                        this.$refs.SurplusMaterialsDetail.dataSource.map((item,index)=>{
                            item.rowNo =index+1
                       })
                       
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },

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