sen-yu-new-web/src/views/reportForms/fabric-loss-table.vue

<template>
  <!-- 面料损耗表 -->
  <div id="fabricLossTable" >
    <div >
    <!-- 主要信息 点击搜索后 全部回显-->
    <a-card title="主要信息" >
      <a-row :gutter="24" >
        <div class="table-page-search-wrapper" >
          <a-form-model layout="inline" ref="form" :model="fabricLoss" :rules="validatorRules" class="kk">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="计划单号">
                <a-input-search
                  placeholder="请输入计划单号"
                  v-model="planNO"
                  enter-button
                  @search="onSearch($event,'0')"
                  v-show='showSelect==0'
                />
                <a-input-search
                  placeholder="请输入计划单号"
                  v-text="planNO"
                  enter-button
                  @search="onSearch($event,'0')"
                  v-show='showSelect==1'
                />
                <a-button type="primary" :disabled="edit == '0'" @click="onSearch(planNO,'1')" class="noprint">更新</a-button>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="款号" has-feedback>
                {{fabricLoss.cdefine22}}
                <!-- <a-input v-model="fabricLoss.styleNum"></a-input> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="计划员">
                {{fabricLoss.planner}}
                <!-- <a-input v-model="fabricLoss.planner"></a-input> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="成衣合同号">
                {{fabricLoss.contractNo}}
                <!-- <a-input v-model="fabricLoss.garmentContractNo"></a-input> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="排单数量">
                {{fabricLoss.number}}
                <!-- <a-input v-model="fabricLoss.singleRowNum"></a-input> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="业务员">
                {{fabricLoss.cpersonName}}
                <!-- <a-input v-model="fabricLoss.salesman"></a-input> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="总成本">
                {{fabricLoss.actualMoney}}
                <!-- <a-input v-model="fabricLoss.actualUnitCost"></a-input> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="实际出库数量">
                {{fabricLoss.outboundNumber}}
                <!-- <a-input v-model="fabricLoss.actualOutQuantity"></a-input> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="制单人">
                {{fabricLoss.makingPeople}}
                <!-- <a-input v-model="fabricLoss.preparedBy"></a-input> -->
              </a-form-model-item>
            </a-col>


            <a-col :md="6" :sm="8">
              <a-form-model-item label="查询日期">
                {{fabricLoss.dateTime}}
                <!-- <a-date-picker style="width: 100%" v-model="fabricLoss.queryDate"></a-date-picker> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8" class="noprint">
              <a-button type="primary" @click="openEnclosure">附件</a-button>
            </a-col>
          </a-form-model>
        </div>
      </a-row>
    </a-card>
    </div>
    <div >
    <!-- 子表 -->
    <a-card style="margin:10px 0;">
      <!-- 采购订单 -->
      <div class="purchase-order-table">
        <h6 class="table-title">采购订单</h6>

        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="purchaseOrderColumns"
          :data-source="fabricLoss.fabricPoOrderList"
          bordered
          :pagination="false"
        >
          <template slot="omcVenAbbName" slot-scope="text, record, index">
              <div v-for="(item,index) in record.omcVenAbbNameArray" :key="index">
                {{item}}
              </div>
          </template>
          <!-- 采购数量 弹框-->
          <span slot="purchaseQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>

          <!-- 余纱 -->
          <span slot="surplusYarn" slot-scope="text">
            <a>{{ text }}</a>
          </span>

          <!--  来源余纱 -->
          <span slot="fromSurplusYarn" slot-scope="text">
            <a>{{ text }}</a>
          </span>

          <!--  其他入库的纱  -->
          <span slot="surplusYarn" slot-scope="text">
            <a>{{ text }}</a>
          </span>
          <!-- 分配数量 -->
          <span slot="slotIquantityOut" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

      <!-- 委外订单国内 -->
      <div class="outsource-orders-table" style="margin:40px 0" id="mm">
        <h6 class="table-title">委外订单国内</h6>
        <a-table 
           id="print1"
           ref="form"
          :row-key="record => record.id"
          :columns="outsourceOrderColumns" 
          :data-source="fabricLoss.fabricOMOrderList1" 
          bordered 
          :pagination="false" 
           :scroll="{ x: 1500 }"
          :loading="loading">
          <!-- 材料出库数量 -->
          <span slot="materialsOutQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>

          <!-- 采购入库数量 -->
          <span slot="purchaseInQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>
          <!-- 附件 -->
          <span slot="enclosure" slot-scope="text, record"> 
             <a-button type="primary" @click="openItemOnclosure(record)" :disabled="record.buttonStatus">附件</a-button>
          </span>
        </a-table>
      </div>

      <!-- 委外订单国外 -->
      <div class="outsourceOrder-abroad-table" id="cb">
        <h6 class="table-title">委外订单国外</h6>
        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="outsourceOrderColumns"
          :data-source="fabricLoss.fabricOMOrderList2"
           :scroll="{ x: 1500 }"
          bordered
          :pagination="false"
        >
          <!-- 材料出库数量 -->
          <span slot="materialsOutQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>

          <!-- 采购入库数量 -->
          <span slot="purchaseInQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>
           <!-- 附件 -->
          <span slot="enclosure" slot-scope="text, record"> 
             <a-button type="primary" @click="openItemOnclosure(record)" :disabled="record.buttonStatus">附件</a-button>
          </span>
        </a-table>
      </div>

      <!-- 成本发票 -->
      <div class="cost-invoice-table" style="margin:40px 0">
        <h6 class="table-title">成本发票</h6>
        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="costInvoiceColumns"
          :data-source="fabricLoss.fabricCostInvoiceList"
          bordered
          :pagination="false"
          :footer="costFooterShow"
        >
        </a-table>
      </div>

      <!-- 开票成本-面料 -->
      <div class="costInvoice-fabric-table">
        <h6 class="table-title">开票成本-面料</h6>
        <!-- ref="" -->
        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="costInvoiceFabricColumns"
          :data-source="fabricLoss.fabricCostClothList"
          bordered
          :pagination="false"
          :footer="clothFooterShow"
        >
          <!-- 发票号码明细  -->
          <span slot="invoiceNum" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

      <!-- 开票成本-成衣 :footer="clothesFooterShow"-->
      <div class="costInvoice-clothes-table" style="margin:40px 0">
        <h6 class="table-title">开票成本-成衣</h6>
        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="costInvoiceClothesColumns"
          :data-source="fabricLoss.fabricCostClothesList"
          bordered
          :pagination="false"
          :footer="clothesFooterShow"
        >
          <!-- 发票数量 -->
          <span slot="clInvoiceQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

      <!-- 开票成本-辅料 -->
      <div class="costInvoice-ingredient-table">
        <h6 class="table-title">开票成本-辅料</h6>
        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="costInvoiceIngredientColumns"
          :data-source="fabricLoss.fabricCostAssistList"
          bordered
          :pagination="false"
          :footer="assistFooterShow"
        >
          <!-- 发票数量 -->
          <span slot="ingredientsInvoiceQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

      <!-- 费用支出 -->
      <div class="costPay-table" style="margin:40px 0">
        <h6 class="table-title">费用支出</h6>
        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="costPayColumns"
          :data-source="fabricLoss.fabricExpensesList"
          bordered
          :pagination="false"
          :footer="costPayFooterShow"
        >
        </a-table>
      </div>

      <!-- 事故单 -->
      <div class="accidentBill-table">
        <h6 class="table-title">事故单</h6>
        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="accidentListColumns"
          :data-source="fabricLoss.fabricAccidentList"
          bordered
          :pagination="false"
          :footer="accidentFooterShow"
        >
          <!-- 事故单 -->
          <span slot="accidentNum" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

      

      <!-- 备注信息 1 根据角色判断 显示备注 1 或备注 2-->
      <div class="note-one" style="marginTop:40px;">
        <h6 class="table-title">备注</h6>
        <div class="noteDetail">
          <a-form-model ref="form" :model="fabricLoss" :rues="validatorRules">
            <a-form-model-item prop="noteOne">
              <a-input type="textarea" v-model="fabricLoss.noteOne" style="minHeight:100px;" />
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
      <!-- 采购订单 -->
     

      <!-- 备注信息 2 根据角色判断 显示备注 1 或备注 2-->
      <!-- <div class="note-one" style="marginTop:40px;">
        <h6 class="table-title">备注信息 2</h6>
        <div class="noteDetail">
          <a-form-model ref="form" :model="fabricLoss" :rues="validatorRules">
            <a-form-model-item prop="noteOne">
              <a-input
                type="textarea"
                v-model="fabricLoss.noteTwo"
                placeholder="请输入备注"
                style="minHeight:100px;"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
      </div> -->

      <!-- 页面底部保存 -->
      <a-row :gutter="24" style="marginTop:40px;float:right" class="noprint">
        <a-col :md="12" :sm="12" style="display:flex">
          <a-button type="primary" @click="daYin" style="margin-right:6px" :disabled ="PrintButton">
            打印
          </a-button> 
            <a-button type="primary" @click="save">
            保存
          </a-button>       
        </a-col>
      </a-row>

      <!-- 弹框 -->
      <div>
        <!-- 采购数量弹框  @ok="modalFormOk"-->
        <purchaseAmount-modal ref="purchaseAmountModal" :father="aa"></purchaseAmount-modal>

        <!-- 来源余纱 -->
        <surplusYarn-modal ref="surplusYarnModal" :father="bb"></surplusYarn-modal>

        <!-- 余纱 -->
        <purchaseLeft-modal ref="purchaseLeftModal"></purchaseLeft-modal>

        <!-- 其他入库的纱 -->
        <otherYarnsIn-modal ref="otherYarnsInModal" ></otherYarnsIn-modal>

        <!-- 委外订单国内弹框 -->
        <materialsOutQuantity-modal ref="materialsOutQuantityModal" :father="cc"></materialsOutQuantity-modal>

        <!-- 采购入库数量弹框 -->
        <purchaseInQuantity-modal ref="purchaseInQuantityModal" :father="dd"></purchaseInQuantity-modal>

        <!-- 发票号码弹框 -->
        <invoiceNum-modal ref="invoiceNumModal" :father="ee"></invoiceNum-modal>

        <!-- 发票数量弹框 -->
        <invoiceQuantity-modal ref="invoiceQuantityModal" :father="ff"></invoiceQuantity-modal>

        <!-- 事故单 -->
        <accidentList-modal ref="accidentListModal" :father="gg"></accidentList-modal>

        <!-- 附件 -->
        <attachment-display ref="attachmentDisplay"></attachment-display>
      </div>
    </a-card>
  </div>
  </div>
</template>

<script>
import PurchaseAmountModal from '@views/reportForms/fabric-loss-table/purchaseAmountModal.vue'
import materialsOutQuantityModal from '@views/reportForms/fabric-loss-table/materialsOutQuantityModal.vue'
import purchaseInQuantityModal from '@views/reportForms/fabric-loss-table/purchaseInQuantityModal.vue'
import invoiceNumModal from '@views/reportForms/fabric-loss-table/invoiceNumModal.vue'
import invoiceQuantityModal from '@views/reportForms/fabric-loss-table/invoiceQuantityModal.vue'
import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue'
import surplusYarnModal from '@views/reportForms/fabric-loss-table/surplusYarnModal.vue'
import purchaseLeftModal from '@views/reportForms/fabric-loss-table/purchaseLeftModal.vue'
import otherYarnsInModal from '@views/reportForms/fabric-loss-table/otherYarnsInModal.vue'
import AttachmentDisplay from '@views/reportForms/fabric-loss-table/attachment-display.vue'
import { getFabricLossDatas,saveFabricLossData } from '@api/reportForms/fabric-loss-table'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

export default {
  name: 'FabricLossTable', // 面料损耗表
  mixins: [JeecgListMixin],
  components: {
    // 面料损耗表 所有弹框
    PurchaseAmountModal,
    otherYarnsInModal,
    materialsOutQuantityModal,
    purchaseInQuantityModal,
    invoiceNumModal,
    invoiceQuantityModal,
    accidentListModal,
    surplusYarnModal,
    purchaseLeftModal,
    JEllipsis,
    moment,
    AttachmentDisplay
  },
  data() {
    return {
      PrintButton:true,//打印按钮
      showSelect:0,//计划号是否是输入框
      fabricLoss: {fabricPoOrderList:[],fabricOMOrderList1:[],fabricOMOrderList2:[],fabricCostAssistList:[],fabricCostClothList:[],fabricCostClothesList:[],fabricCostInvoiceList:[],fabricExpensesList:[],fabricAccidentList:[]}, // 主表信息
      loading: false, // 表格加载
      validatorRules: {
        planNum: [{ required: true, message: '请输入计划单号进行搜索', trigger: 'blur' }]
      },
      edit:'0',
      planNO:'',//计划单号
      // 采购订单 表头
      purchaseOrderColumns: [
        { title: '货物名称', width: 180, dataIndex: 'cinvName', className: 'replacecolor', align:'left'},
        /*
        { title: '批号', width: 80, dataIndex: 'cbatch', className: 'replacecolor',
          customRender:function(text,record,index){
            if (text == null || text == undefined){
              return "";
            }
            if (text.indexOf(",")>-1){
              const arr = text.split(',');
              return (<div>
              {
                arr.map(t=>{
                  return (<li>{t}</li>)
                })
              }
              </div>)
            }else{
              return text;
            }
          }
        },*/
        { title: '订单号', width: 80, dataIndex: 'cpoid', className: 'replacecolor',
          customRender:function(text,record,index){
            if (text == null || text == undefined){
              return "";
            }
            if (text.indexOf(",")>-1){
              const arr = text.split(',');
              return (<div>
              {
                arr.map(t=>{
                  return (<li>{t}</li>)
                })
              }
              </div>)
            }else{
              return text;
            }
          }
        },
        { title: '计划数量', dataIndex: 'iquantity', width: 80, className: 'replacecolor' },
        {
          title: '采购数量',
          dataIndex: 'iquantityIn',
          width: 80,
          className: 'replacecolor',
          customCell: this.purchaseQuantityCustomCell,
          scopedSlots: { customRender: 'purchaseQuantity' }
        },

        { title: '采购供应商', dataIndex: 'cvenAbbName', width: 100, className: 'replacecolor' },
        { title: '分配数量', dataIndex: 'iquantityOut', width: 80, className: 'replacecolor' },
        { title: '委外供应商', dataIndex: 'omcVenAbbName', width: 100, className: 'replacecolor',scopedSlots: { customRender: 'omcVenAbbName' }, },
        {
          title: '余纱',
          dataIndex: 'iquantityLeft',
          width: 80,
          className: 'replacecolor',
          customCell: this.surplusYarnCustomCell,
          scopedSlots: { customRender: 'surplusYarn' }
        },
        { title: '采购损耗', dataIndex: 'iquantityLeftRate', width: 80, className: 'replacecolor' }
      ],

      // 委外订单国内 表头
      outsourceOrderColumns: [
        { title: '制造工艺', width: 100, dataIndex: 'cvcname', className: 'replacecolor' },
        { title: '工厂', width: 80, dataIndex: 'cvenAbbName', className: 'replacecolor' },
        {
          title: '材料出库数量',
          dataIndex: 'iquantityOut',
          width: 100,
          className: 'replacecolor',
          customCell: this.materialsOutQuantityCustomCell,
          scopedSlots: { customRender: 'materialsOutQuantity' }
        },
        { title: '计划数量', dataIndex: 'iquantity', width: 100, className: 'replacecolor' },

        {
          title: '单位',
          children: [
            {
              title: '根',
              dataIndex: 'iquantityPCS',
              width: 100,
              className: 'replacecolor'
            },
            {
              title: '米',
              dataIndex: 'iquantityM',
              width: 100,
              className: 'replacecolor'
            }
          ]
        },

        {
          title: '采购入库数量',
          dataIndex: 'iquantityIn',
          width: 100,
          className: 'replacecolor',
          customCell: this.purchaseInQuantityCustomCell,
          scopedSlots: { customRender: 'purchaseInQuantity' }
        },
        { title: '染厂色号', dataIndex: 'ccolorNumber', width: 120, className: 'replacecolor' },
        { title: '物料编码', dataIndex: 'cinvCode', width: 120, className: 'replacecolor' },
        { title: '货物名称', dataIndex: 'cinvName', width: 200, className: 'replacecolor', align:'left' },
        { title: '颜色', dataIndex: 'ccolor', width: 110, className: 'replacecolor' },
        { title: '损耗', dataIndex: 'cquantityLoss',  width: 100,className: 'replacecolor' },
        { title: '多发少发', dataIndex: 'iquantityMoreLess', width: 100, className: 'replacecolor' },
        { title: '附件', dataIndex: 'enclosure', width: 100, className: 'noprint', scopedSlots: { customRender: 'enclosure' }}
      ],

      // 成本发票 表头
      costInvoiceColumns: [
        { title: '类型', width: 120, dataIndex: 'cvcname', className: 'replacecolor' },
        { title: '采购类型', width: 120, dataIndex: 'cbusType', className: 'replacecolor' },
        { title: '工厂', width: 120, dataIndex: 'cvenAbbName', className: 'replacecolor' },
        { title: '成本金额', dataIndex: 'imoney', width: 120, className: 'replacecolor' }
      ],
      costInvoiceData: [
        { costInvoiceType: '纱款', factory: '17TW-C-17B', costAmount: '5081.72' },
        { costInvoiceType: '纱款', factory: '17TW-C-17C', costAmount: '127754.31' },
        { costInvoiceType: '织款', factory: '18TW-C-8', costAmount: '17045.48' },
        { costInvoiceType: '染款', factory: '福隆', costAmount: '59762.4' },
        { costInvoiceType: '织款', factory: '江阴美纶', costAmount: '20482.95' }
      ],

      // 开票成本-面料 表头
      costInvoiceFabricColumns: [
        { title: '序号', width: 80, dataIndex: 'index', className: 'replacecolor' },
        {
          title: '发票号码',
          width: 120,
          dataIndex: 'csbvcode',

          className: 'replacecolor',
          customCell: this.invoiceNumCustomCell,
          scopedSlots: { customRender: 'invoiceNum' }
        },
        { title: '供应商', width: 120, dataIndex: 'cvenName', className: 'replacecolor' },
        { title: '采购发票金额', width: 120, dataIndex: 'inatSum', className: 'replacecolor' },
        { title: '出运日期', width: 120, dataIndex: 'cshipTime', className: 'replacecolor' }
      ],
      costInvoiceFabricData: [
        { invoiceNum: '18TW-MYA-44', supplier: '供应商1', PurchaseinvoiceCost: '888.88', outData: '2018-05-04' },
        { invoiceNum: '18TW-MYA-78', supplier: '供应商1', PurchaseinvoiceCost: '888.88', outData: '2018-05-18' },
        { invoiceNum: '18TW-MYA-34', supplier: '供应商1', PurchaseinvoiceCost: '888.88', outData: '2018-06-1' }
      ],
      costInvoiceClothesColumns:[],
      // 开票成本-成衣 表头无美元
      costInvoiceClothesColumnsM1:[
        { title: '序号', width: 80, dataIndex: 'index', className: 'replacecolor' },
        { title: '发票号码', width: 120, dataIndex: 'cpbvcode', className: 'replacecolor' },
        { title: '委外供应商', width: 120, dataIndex: 'cvenAbbName', className: 'replacecolor' },
        { title: '成衣加工费（人民币）', width: 120, dataIndex: 'isum', className: 'replacecolor' },
        
        { title: '出运日期', width: 120, dataIndex: 'cshipTime', className: 'replacecolor' },
        { title: '入库数量', width: 120, dataIndex: 'iquantity', className: 'replacecolor' },
        {
          title: '发票数量',
          dataIndex: 'ipbvquantity',

          width: 120,
          className: 'replacecolor',
          customCell: this.clInvoiceQuantityCustomCell,
          scopedSlots: { customRender: 'clInvoiceQuantity' }
        }
      ],
      // 开票成本-成衣 表头
      costInvoiceClothesColumnsAll: [
        { title: '序号', width: 80, dataIndex: 'index', className: 'replacecolor' },
        { title: '发票号码', width: 120, dataIndex: 'cpbvcode', className: 'replacecolor' },
        { title: '委外供应商', width: 120, dataIndex: 'cvenAbbName', className: 'replacecolor' },
        { title: '成衣加工费(人民币)', width: 120, dataIndex: 'isum', className: 'replacecolor' },
        { title: '成衣加工费(美元)', width: 120, dataIndex: 'ioriSum', className: 'replacecolor' },        
        { title: '出运日期', width: 120, dataIndex: 'cshipTime', className: 'replacecolor' },
        { title: '入库数量', width: 120, dataIndex: 'iquantity', className: 'replacecolor' },
        {
          title: '发票数量',
          dataIndex: 'ipbvquantity',

          width: 120,
          className: 'replacecolor',
          customCell: this.clInvoiceQuantityCustomCell,
          scopedSlots: { customRender: 'clInvoiceQuantity' }
        }
      ],

      // 开票成本-辅料 表头

      costInvoiceIngredientColumns:[],
      costInvoiceIngredientColumnsM1:[
        { title: '序号', width: 80, dataIndex: 'index', className: 'replacecolor' },
        { title: '账套号', width: 80, dataIndex: 'caccount', className: 'replacecolor' },
        { title: '订单号', width: 140, dataIndex: 'cpoid', className: 'replacecolor' },
        { title: '供应商', width: 120, dataIndex: 'cvenAbbName', className: 'replacecolor' },
        { title: ' 类型', width: 330, dataIndex: 'cinvName', className: 'replacecolor',align:"left" },
        {
          title: '发票数量',
          width: 120,
          dataIndex: 'iquantityInvoice',
          className: 'replacecolor',
          customCell: this.ingredientsInvoiceQuantityCustomCell,
          scopedSlots: { customRender: 'ingredientsInvoiceQuantity' }
        },
        { title: '开票金额(人民币)', width: 120, dataIndex: 'isum', className: 'replacecolor' },
        { title: '单位', width: 120, dataIndex: 'ccomUnitName', className: 'replacecolor' },
        { title: '订单数', width: 120, dataIndex: 'iquantity', className: 'replacecolor' },
        { title: '采购入库数', width: 120, dataIndex: 'iquantityIn', className: 'replacecolor' }
      ],
      costInvoiceIngredientColumnsAll: [
        { title: '账套号', width: 80, dataIndex: 'caccount', className: 'replacecolor' },
        { title: '订单号', width: 140, dataIndex: 'cpoid', className: 'replacecolor' },
        { title: '供应商', width: 120, dataIndex: 'cvenAbbName', className: 'replacecolor' },
        { title: ' 类型', width: 330, dataIndex: 'cinvName', className: 'replacecolor',align:"left" },
        {
          title: '发票数量',
          width: 120,
          dataIndex: 'iquantityInvoice',
          className: 'replacecolor',
          customCell: this.ingredientsInvoiceQuantityCustomCell,
          scopedSlots: { customRender: 'ingredientsInvoiceQuantity' }
        },
        { title: '开票金额(人民币)', width: 120, dataIndex: 'isum', className: 'replacecolor' },
        { title: '开票金额(美元)', width: 120, dataIndex: 'ioriSum', className: 'replacecolor' },
        { title: '单位', width: 120, dataIndex: 'ccomUnitName', className: 'replacecolor' },
        { title: '订单数', width: 120, dataIndex: 'iquantity', className: 'replacecolor' },
        { title: '采购入库数', width: 120, dataIndex: 'iquantityIn', className: 'replacecolor' }
      ],
      costInvoiceIngredientData: [
        { factory: '森加', type: '主标', ingredientsInvoiceQuantity: '45900', invoiceAmountCNY: '259.42' },
        { factory: '森加', type: '尺码标', ingredientsInvoiceQuantity: '3670', invoiceAmountCNY: '1475.6' }
      ],

      // 费用支出 表头
      costPayColumns: [
        { title: '账套号', width: 120, dataIndex: 'caccount', className: 'replacecolor' },
        { title: '支出单号', width: 120, dataIndex: 'cspvcode', className: 'replacecolor' },
        { title: '费用项目', dataIndex: 'cexpName', width: 120, className: 'replacecolor' },
        { title: '支出人民币金额', dataIndex: 'inatMoney', width: 120, className: 'replacecolor' },
        { title: '支出美元金额', dataIndex: 'imoney', width: 120, className: 'replacecolor',customRender: (text, record, index) => {
            if (record.imoney == record.inatMoney)
              return "";
            else
              return record.imoney;
           } },
        { title: '发票号', dataIndex: 'cinvoinceNo', width: 120, className: 'replacecolor' },
        { title: '制单人', dataIndex: 'cmaker', width: 120, className: 'replacecolor' }
      ],
      costPayData: [{}],

      // 事故单 表头
      accidentListColumns: [
        {
          title: '单号',
          width: 120,
          dataIndex: 'cpbvcode',
          className: 'replacecolor',
          customCell: this.accidentListCustomCell,
          scopedSlots: { customRender: 'cpbvcode' }
        },
        { title: '事故承担方', width: 120, dataIndex: 'cvenAbbName', className: 'replacecolor' },
        { title: '金额', dataIndex: 'ioriSum', width: 120, className: 'replacecolor' }
      ],
      accidentListData: [{ accidentNum: '1100011' }, { accidentNum: '3540011' }],

      noteOne: '', // 备注 1
      noteTwo: '' // 备注 2
    }
  },

  methods: {
    daYin(){
      //  printJS({
	    //      printable:this.fabricLoss.fabricOMOrderList1,
	    //      properties:[
      //        {field:'cvcname',displayName:'制造工艺',columnSize:1},
      //        {field:'cvenAbbName',displayName:'工厂',columnSize:1},
      //        {field:'iquantityOut',displayName:'材料出库数量',columnSize:1},
      //        {field:'iquantity', displayName:'计划数量',columnSize:1},
      //        {field:'iquantityIn', displayName:'采购入库数量',columnSize:1},
      //        {field:'cinvCode', displayName:'物料编码',columnSize:1},
      //        {field:'cinvName', displayName:'货物名称',columnSize:1},
      //        {field:'ccolor', displayName:'颜色',columnSize:1},
      //        {field:'cquantityLoss', displayName:'损耗',columnSize:1},
      //        {field:'iquantityMoreLess', displayName:'多发少发',columnSize:1},
      //        ],
	    //      type:'json',
	    //      header:'C001',
	         //样式设置
	        //  gridStyle:'border:2px solid #3971A5;text-align: center',
	        //  gridHeaderStyle:'color:red; border:2px solid #3971A5;'
	    //  })
         this.showSelect = 1
         this.$nextTick(() => {
          const html = window.document.getElementById('fabricLossTable').innerHTML 
         const win = window.open();
         const style = '<style>\n'
         +'.noprint{display:none}'
         +'.ant-table-body{overflow-x: hidden !important }' //去除滚动条
         +'.kk{display:flex;flex-wrap: wrap}' //主要信息并排
         +'.ant-col-sm-8{width:40%;margin-bottom: 6px;}'
         +'.ant-form-item-label{width:45%;font-size: 12px;}'
         +'.ant-form-item-children{font-size: 12px}'
         +'.ant-card-head-title{font-weight: bold;font-size: 0.67em;margin-bottom: 9px;}'
         +'.ant-form-item-control-wrapper{width:100%}'
         +'.ant-input{width:100%}'
         +'.ant-form-item{display:flex}'
         + 'table{width: 100% !important;border-collapse: collapse;border-spacing: 0;overflow-x:hidden;}\n'
         + 'th,td{width:5%;height: 18px;border: 1px solid #999;font-size: 12px;color: #666;max-width:2000px;text-align: center;}\n'
         +'.ant-table-row-cell-break-word{width:5% !important}'
         + 'th{color: #333}\n'
         + 'a{color: #666; text-decoration:none;}\n'
         + '</style>';
         win.document.write(style+html);
         win.focus();
         win.print();
         win.close();
		     this.showSelect = 0
        })
        
    },
    // 【计划单号】 搜索
    onSearch(value,update) {
      if (value == "" || value == null){
        this.$message.error('请输入计划号！');
      }else{
        this.loading = true;
        this.$nextTick(() => {
          getFabricLossDatas({csocode:value,update:update}).then(res => {
            this.loading = false;
            if (res.success) {
              this.PrintButton = false
              // 开票成本成衣：获取原币和本币金额是否完全相同，完全相同隐藏美元列
              var findList = this.fabricLoss.fabricCostClothesList.filter(e=>e.ioriSum!=e.isum);
              if (findList.length == 0)
                this.costInvoiceClothesColumns = this.costInvoiceClothesColumnsM1;
              else
                this.costInvoiceClothesColumns = this.costInvoiceClothesColumnsAll;
              // 开票成本辅料：获取原币和本币金额是否完全相同，完全相同隐藏美元列
              findList = this.fabricLoss.fabricCostAssistList.filter(e=>e.ioriSum!=e.isum);
              if (findList.length == 0)
                this.costInvoiceIngredientColumns = this.costInvoiceIngredientColumnsM1;
              else
                this.costInvoiceIngredientColumns = this.costInvoiceIngredientColumnsAll;
              this.fabricLoss = res.result;
              this.edit = this.fabricLoss.edit
              // 委外订单国内附件按钮状态
              this.fabricLoss.fabricOMOrderList1.map(item=>{
                item.buttonStatus = false
                if(!item.accessorItemList||item.accessorItemList.length == 0  ){
                  item.buttonStatus = true
                }
              })
              // 委外订单国外附件按钮状态
             this.fabricLoss.fabricOMOrderList2.map(item=>{
                item.buttonStatus = false
                if(!item.accessorItemList||item.accessorItemList.length == 0 ){
                  item.buttonStatus = true
                }
              })
              this.fabricLoss.fabricCostClothesList.map((item,index) => {item.index = index +1})
              this.fabricLoss.fabricCostClothList.map((item,index) => {item.index = index +1})
              this.fabricLoss.fabricCostAssistList.map((item,index) => {item.index = index +1})
              this.fabricLoss.fabricPoOrderList.map(item => {
                item["omcVenAbbNameArray"] = item.omcVenAbbName ? (item.omcVenAbbName.split(",")) : ''
              })
              if (this.fabricLoss.fabricAccidentList == null){
                this.fabricLoss.fabricAccidentList = [];
              }
            }else{
              this.fabricLoss = {fabricPoOrderList:[],fabricOMOrderList1:[],fabricOMOrderList2:[],fabricCostAssistList:[],fabricCostClothList:[],fabricCostClothesList:[],fabricCostInvoiceList:[],fabricExpensesList:[],fabricAccidentList:[]};
              this.$message.info(res.message);
            }
            this.judgeListLength()
          })
        })
      }
    },
    //判断哪个列表为空
    judgeListLength(){
      var data = [
        {List:this.fabricLoss.fabricPoOrderList,class:'.purchase-order-table'},
        {List:this.fabricLoss.fabricOMOrderList1,class:'.outsource-orders-table'},
        {List:this.fabricLoss.fabricOMOrderList2,class:'.outsourceOrder-abroad-table'},
        {List:this.fabricLoss.fabricCostInvoiceList,class:'.cost-invoice-table'},
        {List:this.fabricLoss.fabricCostClothList,class:'.costInvoice-fabric-table'},
        {List:this.fabricLoss.fabricCostClothesList,class:'.costInvoice-clothes-table'},
        {List:this.fabricLoss.fabricCostAssistList,class:'.costInvoice-ingredient-table'},
        {List:this.fabricLoss.fabricExpensesList,class:'.costPay-table'},
        {List:this.fabricLoss.fabricAccidentList,class:'.accidentBill-table'},
      ]
      data.map(item=>{
        if(item.List.length == 0){
           var bb =document.querySelector(item.class)
            bb.className = 'noprint'
        }
      })
    },
    // 【采购数量】单元格 弹框
    purchaseQuantityCustomCell(record) {
      return {
        on: {
          click: event => {

            if (record.cinvName == '来源余纱') {
              this.$refs.surplusYarnModal.surplusYarnData = record.fabricPoOrderOutList;
              this.$refs.surplusYarnModal.allDataList = record.fabricPoOrderOutList;
              this.$refs.surplusYarnModal.queryParam = {};
              this.$refs.surplusYarnModal.surplusYarnModVis = true
            }else if (record.cinvName == '其他入库的纱') {
              this.$refs.otherYarnsInModal.otherYarnsInData = record.fabricPoOrderOutList;
              this.$refs.otherYarnsInModal.allDataList = record.fabricPoOrderOutList;
              this.$refs.otherYarnsInModal.queryParam = {};
              this.$refs.otherYarnsInModal.otherYarnsInModVis = true
            } else {
              this.$refs.purchaseAmountModal.purchaseAmountData = record.fabricPoOrderInList;              
              this.$refs.purchaseAmountModal.allDataList = record.fabricPoOrderInList;
              this.$refs.purchaseAmountModal.queryParam = {};
              this.$refs.purchaseAmountModal.purchaseAmountModVis = true
            }
          }
        }
      }
    },

    // 余纱
    surplusYarnCustomCell(record) {
      return {
        on: {
          click: event => {
            this.$refs.purchaseLeftModal.surplusYarnData = record.fabricPoOrderOutList;
            this.$refs.purchaseLeftModal.allDataList = record.fabricPoOrderOutList;
            this.$refs.purchaseLeftModal.queryParam = {};
            this.$refs.purchaseLeftModal.surplusYarnModVis = true
          }
        }
      }
    },

    // 【材料出库数量】 弹框
    materialsOutQuantityCustomCell(record) {
      return {
        on: {
          click: event => {
            this.$refs.materialsOutQuantityModal.materialsOutQuantityData = record.fabricMoOrderCKList;
            this.$refs.materialsOutQuantityModal.allDataList = record.fabricMoOrderCKList;
            this.$refs.materialsOutQuantityModal.queryParam = {};
            this.$refs.materialsOutQuantityModal.materialsOutQuantityModVis = true
          }
        }
      }
    },

    // 采购入库数量
    purchaseInQuantityCustomCell(record) {
      return {
        on: {
          click: event => {
            this.$refs.purchaseInQuantityModal.purchaseInQuantityData = record.fabricMoOrderRKList;
            this.$refs.purchaseInQuantityModal.allDataList = record.fabricMoOrderRKList;
            this.$refs.purchaseInQuantityModal.queryParam = {};
            this.$refs.purchaseInQuantityModal.purchaseInQuantityModVis = true
          }
        }
      }
    },


    // 开票成本-面料弹框
    invoiceNumCustomCell(record) {
      return {
        on: {
          click: event => {
            this.$refs.invoiceNumModal.invoiceNumData = record.fabricCostClothDetailList;
            this.$refs.invoiceNumModal.allDataList = record.fabricCostClothDetailList;
            this.$refs.invoiceNumModal.queryParam = {};
            this.$refs.invoiceNumModal.invoiceNumModVis = true;
          }
        }
      }
    },

    //成本发票 -----合计行
    costFooterShow(data){
       return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.costInvoiceColumns}
          dataSource={this.costFooterDataSource || []}
          showHeader={false}
        ></a-table>
      )
    },
    


    // 开票成本-成衣 ----合计行
    clothesFooterShow(data) {
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.costInvoiceClothesColumns}
          dataSource={this.clothesFooterDataSource || []}
          showHeader={false}
        ></a-table>
      )
    },

    // 开票成本-辅料 ----合计行
    assistFooterShow(data) {
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.costInvoiceIngredientColumns}
          dataSource={this.assistFooterDataSource || []}
          showHeader={false}
        ></a-table>
      )
    },
    //费用支出 ----合计行
    costPayFooterShow(){
       return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.costPayColumns}
          dataSource={this.costPayFooterDataSource || []}
          showHeader={false}
        ></a-table>
      )
    },
    //事故单 -----合计
    accidentFooterShow(){
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.accidentListColumns}
          dataSource={this.accidentFooterDataSource || []}
          showHeader={false}
        ></a-table>
      )
    },
    // 开票成本-面料 ----合计行
    clothFooterShow(data) {
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.costInvoiceFabricColumns}
          dataSource={this.clothFooterDataSource || []}
          showHeader={false}
        ></a-table>
      )
    },

    // 开票成本成衣-弹框
    clInvoiceQuantityCustomCell(record) {
      return {
        on: {
          click: event => {
            this.$refs.invoiceQuantityModal.invoiceQuantityData = record.fabricCostClothesDetailList;
            this.$refs.invoiceQuantityModal.allDataList = record.fabricCostClothesDetailList;
            this.$refs.invoiceQuantityModal.invoiceQuantityModVis = true;
          }
        }
      }
    },

    // 开票成本辅料-弹框
    ingredientsInvoiceQuantityCustomCell(record) {
      return {
        on: {
          click: event => {
            this.$refs.invoiceQuantityModal.invoiceQuantityData = record.fabricCostAssistDetailList;
            this.$refs.invoiceQuantityModal.allDataList = record.fabricCostAssistDetailList;
            this.$refs.invoiceQuantityModal.queryParam = {};
            this.$refs.invoiceQuantityModal.invoiceQuantityModVis = true
          }
        }
      }
    },

    // 事故单 单号 弹框
    accidentListCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            this.$refs.accidentListModal.accidentListModVis = true
          }
        }
      }
    },

    save() {
      const that = this
      if (this.fabricLoss.makingPeople == null){
        that.$message.info('没有可保存的数据，请先查询数据');
        return;
      }
      this.confirmLoading = true;
      console.log(this.fabricLoss);
      saveFabricLossData(this.fabricLoss).then(res => {
        that.confirmLoading = false;
        if (res.success) {
          this.$message.success(res.message);
          that.fabricLoss =  res.result;
        }else{
          this.$message.error(res.message)
        }
      });
    },
     // 附件
    openEnclosure(){
      this.$refs.attachmentDisplay.AttachmentModVis = true
      var attachList = [];
      if (this.fabricLoss != null && this.fabricLoss.accessorItemList != null){
        this.fabricLoss.accessorItemList.forEach(e=>{
          var attach = {};
          attach.name = e.filename;
          attach.src=e.fileurl;
          attachList.push(attach);
        });
      }
      this.$refs.attachmentDisplay.attachmentData =  attachList;
    },
    openItemOnclosure(record){
      var attachList = [];
        record.accessorItemList.forEach(e=>{
          var attach = {};
          attach.name = e.filename;
          attach.src=e.fileurl;
          attachList.push(attach);
        });
      this.$refs.attachmentDisplay.AttachmentModVis = true
      this.$refs.attachmentDisplay.attachmentData =  attachList;
    },

    // father
    aa() {},
    bb() {},
    cc() {},
    dd() {},
    ee() {},
    ff() {},
    gg() {}
  },

  // 出现滚动条，合计栏跟随 table 滚动
  // watch: {
  //   dataSource(val) {
  //     console.log(val)
  //     // 同步表与footer滚动
  //     let dom = this.$refs.TableInfo.$el.querySelectorAll('.ant-table-body')[0]
  //     dom.addEventListener(
  //       'scroll',
  //       () => {
  //         this.$refs.TableInfo.$el.querySelectorAll('.ant-table-body')[1].scrollLeft = dom.scrollLeft
  //         console.log('走到这')
  //       },
  //       true
  //     )
  //   }
  // },
  // 构建合计数据 --合计
  computed: {
    costFooterDataSource(){
       //成本发票 合计
       var item = {
        "cbusType":"合计"
      };
      var imoney = 0;
      for (let row of this.fabricLoss.fabricCostInvoiceList){
        imoney += row.imoney*1;
      }
      
      item.imoney= parseFloat(imoney.toFixed(2));
      return [item];
    },
   
    clothFooterDataSource() {
      // 开票成本-面料 合计
      var item = {
        "csbvcode":"合计"
      };
      var inatSum = 0;
      for (let row of this.fabricLoss.fabricCostClothList){
        inatSum += row.inatSum*1;
      }
      
      item.inatSum= parseFloat(inatSum.toFixed(2));
      return [item];
    },
    clothesFooterDataSource() {
      // 开票成本-衬衣 合计
      var item = {
        "cpbvcode":"合计"
      };
      var isum = 0,ioriSum=0,iquantity=0,ipbvquantity=0;
      for (let row of this.fabricLoss.fabricCostClothesList){
        isum += row.isum*1;
        ioriSum += row.ioriSum*1;
        iquantity += row.iquantity*1;
        ipbvquantity += row.ipbvquantity*1;
      }
      
      item.isum= parseFloat(isum.toFixed(2));
      item.ioriSum = parseFloat(ioriSum.toFixed(2));
      item.iquantity = parseFloat(iquantity.toFixed(4));
      item.ipbvquantity = parseFloat(ipbvquantity.toFixed(4));
      return [item];
    },
    assistFooterDataSource() {
      // 开票成本-辅料 合计
      var item = {
        "caccount":"合计"
      };
      var isum = 0,ioriSum=0,iquantity=0,iquantityIn=0,iquantityInvoice=0;
      for (let row of this.fabricLoss.fabricCostAssistList){
        isum += row.isum*1;
        ioriSum += row.ioriSum*1;
        iquantity += row.iquantity*1;
        iquantityIn += row.iquantityIn*1;
        iquantityInvoice += row.iquantityInvoice*1;
      }
      
      item.isum= parseFloat(isum.toFixed(2));
      item.ioriSum = parseFloat(ioriSum.toFixed(2));
      item.iquantity = parseFloat(iquantity.toFixed(4));
      item.iquantityIn = parseFloat(iquantityIn.toFixed(4));
      item.iquantityInvoice = parseFloat(iquantityInvoice.toFixed(4));
      return [item];
    },
    costPayFooterDataSource(){
      //费用支出 合计
       var item = {
        "cspvcode":"合计"
      };
      var inatMoney = 0,imoney=0
      for (let row of this.fabricLoss.fabricExpensesList){
        inatMoney += row.inatMoney*1;
        if(row.inatMoney == row.imoney ){
          imoney += 0
        }else{
          imoney += row.imoney*1
        }
        
      }
      item.inatMoney = parseFloat(inatMoney.toFixed(4));
      item.imoney = parseFloat(imoney.toFixed(4));
      return [item];
    },
    accidentFooterDataSource(){
      //费用支出 合计
       var item = {
        "cvenAbbName":"合计"
      };
      var ioriSum = 0
      for (let row of this.fabricLoss.fabricAccidentList){
          ioriSum += row.ioriSum*1       
      }
      item.ioriSum = parseFloat(ioriSum.toFixed(4));
      return [item];
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }

/deep/ .ant-table-footer .ant-table.body {
  // overflow: hidden !important;
}
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
  border: none;
  padding: 0;
}
/deep/ .ant-form-item-children {
  display: flex;
}
/deep/ form :not(.ant-input-group-wrapper) > .ant-input-group, form .ant-input-group-wrapper{
  width: 65% !important;
}
/deep/ .ant-input-group{
  padding-right: 6px !important;
}
</style>