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"
        >
          <!-- 采购数量 弹框-->
          <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>
        </a-table>
      </div>

      <!-- 委外订单国内 -->
      <div class="outsource-orders-table" style="margin:40px 0">
        <h6 class="table-title">委外订单国内</h6>
        <a-table :columns="outsourceOrderColumns" :data-source="fabricLoss.fabricOMOrderList1" 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="outsourceOrder-abroad-table">
        <h6 class="table-title">委外订单国外</h6>
        <a-table
          :row-key="record => record.id"
          :loading="loading"
          :columns="outsourceOrderAbroadColumns"
          :data-source="fabricLoss.fabricOMOrderList2"
          bordered
          :pagination="false"
        >
          <!-- 材料出库数量 -->
          <span slot="materialsOutQuantityAbroad" slot-scope="text">
            <a>{{ text }}</a>
          </span>

          <!-- 采购入库数量 -->
          <span slot="purchaseInQuantityAbroad" 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="costInvoiceData"
          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="costInvoiceFabricData"
          bordered
          :pagination="false"
          :footer="fabricFooterShow"
        >
          <!-- 发票号码明细  -->
          <span slot="invoiceNum" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

      <!-- 开票成本-成衣 -->
      <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="costInvoiceClothesData"
          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="costInvoiceIngredientData"
          bordered
          :pagination="false"
        >
          <!-- 发票数量 -->
          <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="costPayData"
          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="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>

        <!-- 委外订单国内弹框 -->
        <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 { 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,
    materialsOutQuantityModal,
    purchaseInQuantityModal,
    invoiceNumModal,
    invoiceQuantityModal,
    accidentListModal,
    surplusYarnModal,
    JEllipsis,
    moment
  },
  data() {
    return {
      fabricLoss: {fabricPoOrderList:[],fabricOMOrderList1:[],fabricOMOrderList2:[]}, // 主表信息
      loading: false, // 表格加载
      validatorRules: {
        planNum: [{ required: true, message: '请输入计划单号进行搜索', trigger: 'blur' }]
      },
      // 采购订单 表头
      purchaseOrderColumns: [
        { title: '货物名称', width: 150, dataIndex: 'cinvName', className: 'replacecolor' },
        { title: '批号', width: 80, dataIndex: 'cbatch', className: 'replacecolor' },
        { 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: 'allotQuantity', width: 80, className: 'replacecolor' },
        { title: '委外供应商', dataIndex: 'outsourceSupplier', width: 100, className: 'replacecolor' },
        {
          title: '余纱',
          dataIndex: 'surplusYarn',
          width: 80,
          className: 'replacecolor',
          customCell: this.surplusYarnCustomCell,
          scopedSlots: { customRender: 'surplusYarn' }
        },
        { title: '采购损耗', dataIndex: 'purchaseLoss', width: 80, className: 'replacecolor' }
      ],
      purchaseOrderData: [
        {
          goodsName: '75D 低弹丝白',
          batchNum: '123',
          planQuantity: '1350.512',
          purchaseQuantity: '1389.1',
          purchaseSupplier: '腾依',
          allotQuantity: '1389.1',
          outsourceSupplier: '飞亚',
          surplusYarn: '74859.53',
          purchaseLoss: '0%'
        },
        {
          goodsName: '货物2',
          batchNum: '234',
          planQuantity: '345',
          purchaseQuantity: '355',
          purchaseSupplier: '供应商2',
          allotQuantity: '230',
          outsourceSupplier: '委外供应商2',
          surplusYarn: '8495.7',
          purchaseLoss: '10%'
        },
        { goodsName: '来源余纱', purchaseQuantity: '2570.4' },
        { goodsName: '其他入库的纱', purchaseQuantity: '999' }
      ],

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

        {
          title: '单位',
          children: [
            {
              title: '根',
              dataIndex: 'unitRoot',
              width: 90,
              className: 'replacecolor'
            },
            {
              title: '米',
              dataIndex: 'unitMeter',
              width: 90,
              className: 'replacecolor'
            }
          ]
        },

        {
          title: '采购入库数量',
          dataIndex: 'purchaseInQuantity',
          width: 80,
          className: 'replacecolor',
          customCell: this.purchaseInQuantityCustomCell,
          scopedSlots: { customRender: 'purchaseInQuantity' }
        },
        { title: '物料编码', dataIndex: 'cinvCode', width: 100, className: 'replacecolor' },
        { title: '货物名称', dataIndex: 'cinvName', width: 150, className: 'replacecolor' },
        { title: '颜色', dataIndex: 'color', width: 80, className: 'replacecolor' },
        { title: '计划数量', dataIndex: 'planQuantity', width: 80, className: 'replacecolor' },
        { title: '损耗', dataIndex: 'loss', wiclassName: 'replacecolor' },
        { title: '多发少发', dataIndex: 'moreOrLess', width: 100, className: 'replacecolor' }
      ],
      outsourceOrderData: [
        {
          makeWorkmanship: '织造工厂1',
          factory: '飞亚',
          materialsOutQuantityData: '863',
          purchaseAmount: '**',
          unitRoot: '77',
          unitMeter: '12',
          purchaseInQuantity: '848.9',
          materialCode: '**',
          goodsName: '**',
          color: 'red',
          planQuantity: '**',
          loss: '**',
          moreOrLess: '**'
        },
        {
          makeWorkmanship: '织造工厂2',
          factory: '的亚',
          materialsOutQuantityData: '8263',
          purchaseAmount: '**',
          companyRoot: '**',
          companyMeter: '**',
          purchaseInQuantity: '448.9',
          materialCode: '**',
          goodsName: '**',
          color: 'red',
          planQuantity: '**',
          loss: '**',
          moreOrLess: '**'
        }
      ],

      // 委外订单国外 表头
      outsourceOrderAbroadColumns: [
        { title: '制造工艺', width: 120, dataIndex: 'makeWorkmanship', className: 'replacecolor' },
        { title: '工厂', width: 120, dataIndex: 'factory', className: 'replacecolor' },
        {
          title: '材料出库数量',
          dataIndex: 'materialsOutQuantityAbroadData',
          width: 120,
          className: 'replacecolor',
          customCell: this.materialsOutQuantityAbroadCustomCell,
          scopedSlots: { customRender: 'materialsOutQuantityAbroad' }
        },
        { title: '采购数量', dataIndex: 'purchaseAmount', width: 120, className: 'replacecolor' },
        {
          title: '单位',
          children: [
            {
              title: '根',
              dataIndex: 'unitRoot',
              width: 90,
              className: 'replacecolor'
            },
            {
              title: '米',
              dataIndex: 'unitMeter',
              width: 90,
              className: 'replacecolor'
            }
          ]
        },
        {
          title: '采购入库数量',
          dataIndex: 'purchaseInQuantityAbroad',
          width: 120,
          className: 'replacecolor',
          customCell: this.purchaseInQuantityAbroadCustomCell,
          scopedSlots: { customRender: 'purchaseInQuantityAbroad' }
        },
        { title: '物料编码', dataIndex: 'materialCode', width: 120, className: 'replacecolor' },
        { title: '货物名称', dataIndex: 'goodsName', width: 100, className: 'replacecolor' },
        { title: '颜色', dataIndex: 'color', width: 120, className: 'replacecolor' },
        { title: '计划数量', dataIndex: 'planQuantity', width: 120, className: 'replacecolor' },
        { title: '损耗', dataIndex: 'loss', width: 90, className: 'replacecolor' },
        { title: '多发少发', dataIndex: 'moreOrLess', width: 100, className: 'replacecolor' }
      ],
      outsourceOrderAbroadData: [
        {
          makeWorkmanship: '织造工厂',
          factory: '飞亚',
          materialsOutQuantityAbroadData: '163',
          purchaseAmount: '**',
          unitRoot: '88',
          unitMeter: '22',
          purchaseInQuantityAbroad: '248.9',
          materialCode: '**',
          goodsName: '**',
          color: 'red',
          planQuantity: '**',
          loss: '**',
          moreOrLess: '**'
        },
        {
          makeWorkmanship: '织造工厂3',
          factory: '飞亚',
          materialsOutQuantityAbroadData: '563',
          purchaseAmount: '**',
          companyRoot: '**',
          companyMeter: '**',
          purchaseInQuantityAbroad: '468.9',
          materialCode: '**',
          goodsName: '**',
          color: 'orange',
          planQuantity: '**',
          loss: '**',
          moreOrLess: '**'
        }
      ],

      // 成本发票 表头
      costInvoiceColumns: [
        { title: '类型', width: 120, dataIndex: 'costInvoiceType', className: 'replacecolor' },
        { title: '工厂', width: 120, dataIndex: 'factory', className: 'replacecolor' },
        { title: '成本金额', dataIndex: 'costAmount', 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: 'invoiceNum',

          className: 'replacecolor',
          customCell: this.invoiceNumCustomCell,
          scopedSlots: { customRender: 'invoiceNum' }
        },
        { title: '供应商', width: 120, dataIndex: 'supplier', className: 'replacecolor' },
        { title: '采购发票金额', width: 120, dataIndex: 'PurchaseinvoiceCost', className: 'replacecolor' },
        { title: '出运日期', width: 120, dataIndex: 'outData', 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: [
        { title: '发票号码', width: 120, dataIndex: 'clInvoiceNum', className: 'replacecolor' },
        { title: '委外供应商', width: 120, dataIndex: 'outsourceSupplier', className: 'replacecolor' },
        { title: '成衣加工费', width: 120, dataIndex: 'clProcessCost', className: 'replacecolor' },
        { title: '出运日期', width: 120, dataIndex: 'outData', className: 'replacecolor' },
        { title: '入库数量', width: 120, dataIndex: 'inQuantity', className: 'replacecolor' },
        {
          title: '发票数量',
          dataIndex: 'clInvoiceQuantity',

          width: 120,
          className: 'replacecolor',
          customCell: this.clInvoiceQuantityCustomCell,
          scopedSlots: { customRender: 'clInvoiceQuantity' }
        }
      ],
      costInvoiceClothesData: [
        {
          clInvoiceNum: '18TW-PRU-G30C',
          outsourceSupplier: '委外1',
          clProcessCost: '19350',
          outData: '2018-06-07',
          inQuantity: '34',
          clInvoiceQuantity: '8000'
        },
        {
          clInvoiceNum: '18TW-PRU-G31',
          outsourceSupplier: '委外1',
          clProcessCost: '99000',
          outData: '2018-03-17',
          inQuantity: '34',
          clInvoiceQuantity: '8000'
        },
        {
          clInvoiceNum: '18TW-PRU-G32G',
          outsourceSupplier: '委外1',
          clProcessCost: '34650',
          outData: '2018-06-07',
          inQuantity: '34',
          clInvoiceQuantity: '6000'
        }
      ],

      // 开票成本-辅料 表头
      costInvoiceIngredientColumns: [
        { title: '账套号', width: 120, dataIndex: 'setNo', className: 'replacecolor' },
        { title: '订单号', width: 120, dataIndex: 'orderNum', className: 'replacecolor' },
        { title: '工厂', width: 120, dataIndex: 'factory', className: 'replacecolor' },
        { title: ' 类型', width: 120, dataIndex: 'type', className: 'replacecolor' },
        {
          title: '发票数量',
          width: 120,
          dataIndex: 'ingredientsInvoiceQuantity',
          className: 'replacecolor',
          customCell: this.ingredientsInvoiceQuantityCustomCell,
          scopedSlots: { customRender: 'ingredientsInvoiceQuantity' }
        },
        { title: '开票金额(人民币)', width: 120, dataIndex: 'invoiceAmountCNY', className: 'replacecolor' },
        { title: '开票金额(美金)', width: 120, dataIndex: 'invoiceAmountUSD', className: 'replacecolor' },
        { title: '单位', width: 120, dataIndex: 'unit', className: 'replacecolor' },
        { title: '订单数', width: 120, dataIndex: 'orderQuantity', className: 'replacecolor' },
        { title: '采购入库数', width: 120, dataIndex: 'purchaseInQuantity', className: 'replacecolor' }
      ],
      costInvoiceIngredientData: [
        { factory: '森加', type: '主标', ingredientsInvoiceQuantity: '45900', invoiceAmountCNY: '259.42' },
        { factory: '森加', type: '尺码标', ingredientsInvoiceQuantity: '3670', invoiceAmountCNY: '1475.6' }
      ],

      // 费用支出 表头
      costPayColumns: [
        { title: '账套号', width: 120, dataIndex: 'setNo', className: 'replacecolor' },
        { title: '支出单号', width: 120, dataIndex: 'disbursementSlipNo', className: 'replacecolor' },
        { title: '费用项目', dataIndex: 'expenseItem', width: 120, className: 'replacecolor' },
        { title: ' 支出本币金额', dataIndex: 'disbursedLocalMoney', width: 120, className: 'replacecolor' },
        { title: '支出原币金额', dataIndex: 'disbursedOriginalMoney', width: 120, className: 'replacecolor' },
        { title: '发票号', dataIndex: 'invoiceNum', width: 120, className: 'replacecolor' },
        { title: '制单人', dataIndex: 'preparedBy', 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) {
              this.fabricLoss = res.result;
              // console.log('染损列表', this.dyeLossRateData)
            }else{
              this.fabricLoss = {fabricPoOrderList:[],fabricOMOrderList1:[],fabricOMOrderList2:[]};
              this.$message.error(res.message);
            }
          })
        })
      }
    },
    // 【采购数量】单元格 弹框
    purchaseQuantityCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('点击了单元格')

            if (this.purchaseOrderColumns.cinvName == '来源余纱') {
              console.log('来源余纱this:', this)
              console.log('来源余纱event:', event)
              this.$refs.fromsurplusYarnModal.fromsurplusYarnModVis = true
            }
            if (this.purchaseOrderColumns.cinvName == '其他入库的纱') {
              console.log('其他入库的纱this:', this)
              console.log('其他入库的纱event:', event)
              this.$refs.otherYarnsInModal.otherYarnsInModVis = true
            } else {
              console.log('this:', this)
              console.log('event:', event)
              this.$refs.purchaseAmountModal.purchaseAmountModVis = true
            }
          }
        }
      }
    },

    // 余纱
    surplusYarnCustomCell(record) {
      return {
        on: {
          click: event => {
            // console.log('点击了单元格')
            console.log('this:', this)
            console.log('event:', event)
            this.$refs.surplusYarnModal.surplusYarnModVis = true
          }
        }
      }
    },

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

    // 采购入库数量
    purchaseInQuantityCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            this.$refs.purchaseInQuantityModal.purchaseInQuantityModVis = true
          }
        }
      }
    },

    // 委外 【材料出库数量】
    materialsOutQuantityAbroadCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            this.$refs.materialsOutQuantityModal.materialsOutQuantityModVis = true
          }
        }
      }
    },

    // 委外 【采购入库数量】
    purchaseInQuantityAbroadCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            this.$refs.purchaseInQuantityModal.purchaseInQuantityModVis = true
          }
        }
      }
    },

    // 发票号码
    invoiceNumCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            this.$refs.invoiceNumModal.invoiceNumModVis = true
          }
        }
      }
    },

    // 开票成本-面料 ----合计行
    fabricFooterShow(data) {
      console.log('开票成本-面料 ----合计行')
      console.log('data', data)
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.costInvoiceFabricColumns}
          dataSource={this.fabricFooterDataSource || []}
          showHeader={false}
        ></a-table>
      )
    },

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

    // 成衣-发票数量
    clInvoiceQuantityCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            this.$refs.invoiceQuantityModal.invoiceQuantityModVis = true
          }
        }
      }
    },

    // 辅料-发票数量
    ingredientsInvoiceQuantityCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            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: {
    fabricFooterDataSource() {
      // 开票成本-面料 合计
      const total = Object.assign({}, this.costInvoiceFabricData[0])
      for (const attr in total) {
        total[attr] = '合计'
        break
      }
      return [total]
    },
    clothesFooterDataSource() {
      // 开票成本-面料 合计
      const total = Object.assign({}, this.costInvoiceClothesData[0])
      for (const attr in total) {
        total[attr] = '合计'
        break
      }
      return [total]
    }
  }
}
</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>