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

<template>
  <!-- 面料损耗表 -->
  <div id="fabricLossTable" >
    <!-- 主要信息 点击搜索后 全部回显-->
    <a-card title="主要信息" >
      <a-row :gutter="24" >
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="form" :model="fabricLoss" :rules="validatorRules">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="计划单号">
                <a-input-search
                  placeholder="请输入计划单号"
                  enter-button
                  @search="onSearch"
                />
              </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.actualPrice}}
                <!-- <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.price}}
                <!-- <a-input v-model="fabricLoss.costPerUnit"></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">
              <a-button type="primary">附件</a-button>
            </a-col>
          </a-form-model>
        </div>
      </a-row>
    </a-card>

    <!-- 子表 -->
    <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.omcVenAbbName" :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">
        <h6 class="table-title">委外订单国内</h6>
        <a-table 
          :row-key="record => record.id"
          :columns="outsourceOrderColumns" 
          :data-source="fabricLoss.fabricOMOrderList1" 
          bordered 
          :pagination="false" 
          :loading="loading">
          <!-- 材料出库数量 -->
          <span slot="materialsOutQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>

          <!-- 采购入库数量 -->
          <span slot="purchaseInQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

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

          <!-- 采购入库数量 -->
          <span slot="purchaseInQuantity" slot-scope="text">
            <a>{{ text }}</a>
          </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"
        >
        </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"
        >
        </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.accidentListData"
          bordered
          :pagination="false"
        >
          <!-- 事故单 -->
          <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">备注信息 1</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" placeholder="请输入备注" 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">
        <a-col :md="12" :sm="12">
          <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>

        <!-- 其他入库的纱 -->
        <otherYarnsIn-modal ref="otherYarnsInModal" :father="hh"></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>
      </div>
    </a-card>
  </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 otherYarnsInModal from '@views/reportForms/fabric-loss-table/otherYarnsInModal.vue'
import { getFabricLossDatas } 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,
    JEllipsis,
    moment
  },
  data() {
    return {
      fabricLoss: {fabricPoOrderList:[],fabricOMOrderList1:[],fabricOMOrderList2:[],fabricCostAssistList:[],fabricCostClothList:[],fabricCostClothesList:[],fabricCostInvoiceList:[],fabricExpensesList:[]}, // 主表信息
      loading: false, // 表格加载
      validatorRules: {
        planNum: [{ required: true, message: '请输入计划单号进行搜索', trigger: 'blur' }]
      },
      // 采购订单 表头
      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: 120,
          className: 'replacecolor',
          customCell: this.materialsOutQuantityCustomCell,
          scopedSlots: { customRender: 'materialsOutQuantity' }
        },
        { title: '计划数量', dataIndex: 'iquantity', width: 120, className: 'replacecolor' },

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

        {
          title: '采购入库数量',
          dataIndex: 'iquantityIn',
          width: 120,
          className: 'replacecolor',
          customCell: this.purchaseInQuantityCustomCell,
          scopedSlots: { customRender: 'purchaseInQuantity' }
        },
        { title: '物料编码', dataIndex: 'cinvCode', width: 120, className: 'replacecolor' },
        { title: '货物名称', dataIndex: 'cinvName', width: 340, className: 'replacecolor', align:'left' },
        { title: '颜色', dataIndex: 'ccolor', width: 120, className: 'replacecolor' },
        { title: '损耗', dataIndex: 'cquantityLoss', wiclassName: 'replacecolor' },
        { title: '多发少发', dataIndex: 'iquantityMoreLess', width: 120, className: 'replacecolor' }
      ],

      // 成本发票 表头
      costInvoiceColumns: [
        { title: '类型', width: 120, dataIndex: 'cvcname', 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: 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: 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: 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: '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: 'accidentNum',
          className: 'replacecolor',
          customCell: this.accidentListCustomCell,
          scopedSlots: { customRender: 'accidentNum' }
        },
        { title: '事故承担方', width: 120, dataIndex: 'accidentUndertaker', className: 'replacecolor' },
        { title: '金额', dataIndex: 'amount', width: 120, className: 'replacecolor' }
      ],
      accidentListData: [{ accidentNum: '1100011' }, { accidentNum: '3540011' }],

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

  methods: {
    // 【计划单号】 搜索
    onSearch(value) {
      if (value == "" || value == null){
        this.$message.error('请输入计划号！');
      }else{
        this.loading = true;
        this.$nextTick(() => {
          getFabricLossDatas({csocode:value}).then(res => {
            this.loading = false;
            if (res.success) {
              
              // 开票成本成衣：获取原币和本币金额是否完全相同，完全相同隐藏美元列
              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.fabricLoss.fabricPoOrderList.map(item => {
                item.omcVenAbbName = item.omcVenAbbName ? (item.omcVenAbbName.split(",")) : ''
              })
            }else{
              this.fabricLoss = {fabricPoOrderList:[],fabricOMOrderList1:[],fabricOMOrderList2:[],fabricCostAssistList:[],fabricCostClothList:[],fabricCostClothesList:[],fabricCostInvoiceList:[],fabricExpensesList:[]};
              this.$message.info(res.message);
            }
          })
        })
      }
    },
    // 【采购数量】单元格 弹框
    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.surplusYarnModal.surplusYarnData = record.fabricPoOrderOutList;
            this.$refs.surplusYarnModal.allDataList = record.fabricPoOrderOutList;
            this.$refs.surplusYarnModal.queryParam = {};
            this.$refs.surplusYarnModal.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;
          }
        }
      }
    },


    // 开票成本-成衣 ----合计行
    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>
      )
    },
    // 开票成本-面料 ----合计行
    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() {
      console.log('保存，数据保存到哪？')
      const that = this
      this.$refs.form.validate(valid => {
        if (valid) {
          //  alert('保存!')
          console.log('备注信息:', this.fabricLoss.noteOne, '计划单号:', this.fabricLoss.planNum)
          // that.$message.success(res.message)
          that.$message.success('保存成功，数据添加到成本分配汇总')
        } else {
          this.$message.info('请选择计划单号、输入备注信息')
        }
      })
    },

    // 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: {
    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];
    }
  }
}
</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;
}
</style>