doors-windows-web/src/views/production/mrp/modules/MRPEdit.vue

<template>
    <a-modal
      title="编辑"
       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" >保存</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" >
                <a-row :gutter="24">
                    <a-col :md="4" :sm="24">
                        <a-form-item label="生产组织">
                            <a-input-search placeholder="请输入" v-model="form.productionOrg" @search="onSearchPlanOrg" readOnly ></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.projectName" @search="onSearchProject" readOnly ></a-input-search>
                        </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%" />
                        </a-form-item>
                    </a-col>
                    
                    <a-col  :md="4" :sm="24">
                        <a-form-item label="单据号">
                            <a-input placeholder="请输入" v-model="form.orderCode" ></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="业务员">
                            <a-input-search placeholder="请输入" v-model="form.salesperson" @search="onSearchPerson" readOnly></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.planDept" @search="onSearchDept" readOnly ></a-input-search>
                        </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-search placeholder="请输入" v-model="form.remarks"  @search="onSearch" ></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%'  @change="changeType">
                                <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.workNo"  ></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="updataProRequirment" v-if="form.type=='工装'">更新采购需求</a-button>
            <a-button  size="small" @click="generatePurchaseOrder">生成采购单</a-button>
            <a-button  size="small" @click="generatetRansferOrder">生成转库单</a-button>
       </div>
       <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="需求" :key="refKeys[0]" :forceRender="true">
                <demand ref="demand"></demand>
            </a-tab-pane>
            <a-tab-pane tab="供应" :key="refKeys[1]" :forceRender="true">
                <supply ref="supply"></supply>
            </a-tab-pane>
            <a-tab-pane tab="供需平衡结果" :key="refKeys[2]" :forceRender="true">
                <supplyDemandBalance ref="supplyDemandBalance"></supplyDemandBalance>
            </a-tab-pane>
            <a-tab-pane tab="采购需求" :key="refKeys[3]" :forceRender="true">
                <ProRequirements ref="ProRequirements"></ProRequirements>
            </a-tab-pane>
            <a-tab-pane tab="转库需求" :key="refKeys[4]" :forceRender="true" v-if="form.type=='工装'">
                <TraRequirements ref="TraRequirements"></TraRequirements>
            </a-tab-pane>
        </a-tabs>
       
    </a-card>
    <a-card :bordered="false" class="bottom" style="margin-bottom:1%">
        <div class="table-page-search-wrapper">
            <a-form layout="inline" >
                <a-row :gutter="24">
                    <a-col :md="6" :sm="24">
                        <a-form-item label="制单人">
                            <a-input placeholder="请输入" v-model="form1.createBy" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24">
                        <a-form-item label="审批人">
                            <a-input placeholder="请输入" v-model="form1.reviewer" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24">
                        <a-form-item label="最后修改人">
                            <a-input placeholder="请输入" v-model="form1.updateBy" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24">
                        <a-form-item label="最后修改时间">
                            <a-date-picker showTime valueFormat="YYYY-MM-DD" format = "YYYY-MM-DD" v-model="form1.updateTime" disabled/>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
         </div>
    </a-card>
    <organizationPopup ref="organizationPopup" @okData="okDataOrganization"></organizationPopup>
    <OperatorsPopup ref="OperatorsPopup" @okData="okDataOperators"></OperatorsPopup>
    <projectPopup ref="projectPopup" @okData="okData"></projectPopup>
    <deparmentPopup ref="deparmentPopup" @okData="okDataDeparment"></deparmentPopup>
    </a-modal>
  </template>
  <script>
  
      import { FormTypes } from '@/utils/JEditableTableUtil'
      import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
      import moment from "moment"
      import { httpAction ,getAction,postAction,putAction} from '@/api/manage'
      import demand from './demand'
      import supply from './supply'
      import supplyDemandBalance from './supplyDemandBalance'
      import ProRequirements from './ProRequirements'
      import TraRequirements from './TraRequirements'
      import organizationPopup from '../../Popup/organizationPopup.vue'
      import projectPopup from '../../Popup/projectPopup'
      import OperatorsPopup from '../../Popup/OperatorsPopup.vue'
      import deparmentPopup from '../../Popup/deparmentPopup.vue'
      export default {
        name: 'MRPEdit',
        mixins: [JEditableTableModelMixin],
        components: {
            demand,
            supply,
            supplyDemandBalance,
            ProRequirements,
            TraRequirements,
            organizationPopup,
            projectPopup,
            deparmentPopup,
            OperatorsPopup
        },
        data() {
          return {
            visible:false,
            form:{},
            form1:{},
            execute:undefined,
            dataSource:[],
            loading:false,
            // ipagination:{},
            selectedRowKeys:[],
            selectedRows:[],
            activeKey:'demand',
            refKeys:['demand','supply','supplyDemandBalance','ProRequirements','Warehousing'],
          }
        },
        created() {
          
        },
        methods: {
            handleCancel(){
                this.visible=false
                this.activeKey='demand',
                this.dataSource = [] 
                this.form={}
                this.form1={}
                this.$emit('ok')
            },
            handleTableChange(){

            },
            onSearch(){
               
            },
            onSearchProject(){
                this.$refs.projectPopup.visible = true
                this.$refs.projectPopup.getData()
            },
            onSearchDept(){
                this.$refs.deparmentPopup.visible = true
                this.$refs.deparmentPopup.getData()
            },
            okData(data){
                this.$set(this.form,'projectName',data.Name)
                this.$set(this.form,'project',data.ID)
            },
            okDataDeparment(data){
                this.$set(this.form,'planDept',data.Name)
            },
            getMainData(id){
                getAction('/MRPOperationList/madeOperationList/queryById',{id:id}).then(res=>{
                    if(res.success){
                       this.form=res.result
                       this.form1=res.result
                       this.getDemandData(this.form.id)
                       this.getSupplyData(this.form.id)
                       this.getSupplyDemandBalanceData(this.form.id)
                       this.getProRequirementsData(this.form.id)
                       if(this.form.type=='工装'){
                        this.getTraRequirementsData(this.form.id)
                       }  
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            getDemandData(id){
                getAction('/MRPOperationList/madeOperationList/queryMadeOperationListDemandByMainId',{id:id}).then(res=>{
                    if(res.success){
                      this.$refs.demand.dataSource = res.result
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            getSupplyData(id){
                getAction('/MRPOperationList/madeOperationList/queryMadeOperationListProvideByMainId',{id:id}).then(res=>{
                    if(res.success){
                      this.$refs.supply.dataSource = res.result
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            getSupplyDemandBalanceData(id){
                getAction('/MRPOperationList/madeOperationList/queryMadeOperationListResultByMainId',{id:id}).then(res=>{
                    if(res.success){
                      this.$refs.supplyDemandBalance.dataSource = res.result
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            getProRequirementsData(id){
                getAction('/MRPOperationList/madeOperationList/queryMadeOperationListPurchaseByMainId',{id:id}).then(res=>{
                    if(res.success){
                      this.$refs.ProRequirements.dataSource = res.result
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            getTraRequirementsData(id){
                getAction('/MRPOperationList/madeOperationList/queryMadeOperationListDepositByMainId',{id:id}).then(res=>{
                    if(res.success){
                      this.$refs.TraRequirements.dataSource = res.result
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            onSearchPlanOrg(){
                this.$refs.organizationPopup.visible = true
                this.$refs.organizationPopup.getData()
            },
            okDataOrganization(data){
                this.$set(this.form,'productionOrg',data.Name)
            },
            changeType(prop){
                if(prop=='工装'){
                    this.getTraRequirementsData(this.form.id)
                }
            },
            onSearchPerson(){
                this.$refs.OperatorsPopup.visible = true
                this.$refs.OperatorsPopup.getData()
            },
            okDataOperators(data){
                this.$set(this.form,'salesperson',data.Name)
            },
            handleOk(){
                var madeOperationListPage = this.form
                madeOperationListPage.madeOperationListDemandList = this.$refs.demand.dataSource
                madeOperationListPage.madeOperationListDepositList = this.$refs.TraRequirements.dataSource
                madeOperationListPage.madeOperationListProvideList = this.$refs.supply.dataSource
                madeOperationListPage.madeOperationListPurchaseList = this.$refs.ProRequirements.dataSource
                madeOperationListPage.madeOperationListResultList = this.$refs.supplyDemandBalance.dataSource
                this.loading = true
                postAction('/MRPOperationList/madeOperationList/edit', madeOperationListPage).then((res) => {
                    if (res.success) {
                        this.$message.success('编辑成功！');
                        this.handleCancel()
                    } else {
                        this.$message.error(res.message);
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            updataProRequirment(){
                this.$confirm({
                    title: '确认更新采购需求',
                    content: '是否更新采购需求?',
                    onOk:  ()=> {
                    }
                })
            },
            generatePurchaseOrder(){
                this.$confirm({
                    title: '确认生成采购单',
                    content: '是否生成采购单?',
                    onOk:  ()=> {
                    }
                })
            },
            generatetRansferOrder(){
                this.$confirm({
                    title: '确认生成转库单',
                    content: '是否生成转库单?',
                    onOk:  ()=> {
                    }
                })
            }

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