sen-yu-new-web/src/views/reportForms/cost-allocation-table/tabs.vue

<template>
  <!-- 报表 - tabs  -->
  <!--   default-active-key="1"-->
  <div id="unitTabs">
    <a-tabs @change="tabsCallback" :default-active-key="activeKey">
      <a-tab-pane v-for="(item, index) in tabNameList" :key="index" :tab="item">
        <!-- tabs 面料 -->
        <div :class="[(fabData.length==0?'noprint': '')]">
          <h6 class="table-title">面料</h6>
          <a-table
            rowKey="(item)=>item.id"
            :loading="loading"
            :columns="fabColumns"
            :data-source="fabData"
            bordered
            :pagination="false"
            :scroll="{ x: 1500 }"
          >
          <!-- 表头 -->
           <span slot="transferCostTitle" class="fontColor">
              转入成本
            </span>
            <span slot="remainingQuantitycostTitle" class="fontColor">
              余下数量的成本
            </span>
            <!-- 面料 -转入数量 弹框-->
            <span slot="fabInQuaSlot" slot-scope="text">
              <a>{{ text }}</a>
            </span>

            <!-- 余下数量-->
            <span slot="fabRemaQuaSlot" slot-scope="text">
              <a>{{ text }}</a>
            </span>
          </a-table>
        </div>

        <!-- tabs 辅料   -->
        <div style="margin:30px 0" :class="[(ingData.length==0?'noprint': '')]">
          <h6 class="table-title">辅料</h6>
          <a-table
            rowKey="(item)=>item.id"
            :loading="loading"
            :columns="ingColumns"
            :data-source="ingData"
            bordered
            :pagination="false"
            :scroll="{ x: 1500 }"
          >
          <!-- 表头 -->
          <span slot="transferCostTitle" class="fontColor">
              转入成本
          </span>
            <!--辅料-转入数量 弹框-->
            <span slot="ingInQuaSlot" slot-scope="text">
              <a>{{ text }}</a>
            </span>
            <!--辅料-余下数量 弹框-->
            <span slot="ingRemQuaSlot" slot-scope="text">
              <a>{{ text }}</a>
            </span>
          </a-table>
        </div>

        <!-- tabs 发运明细   :scroll="{ x: 1500 }"-->
        <div :class="[(shipData.length==0?'noprint': '')]">
          <h6 class="table-title">发运明细</h6>
          <a-table
            rowKey="(item)=>item.id"
            :loading="loading"
            :columns="shipColumns"
            :data-source="shipData"
            bordered
            :pagination="false"
            :scroll="{ x: 1500 }"
            class="shipData"
          >
          </a-table>
        </div>

        <!-- tabs 合计 信息 -->
        <div style="marginTop:30px;">
          <h6 class="table-title">合计信息</h6>
          <div style="border: 1px solid #e8e8e8;padding: 20px 20px 0 20px;">
            <a-row :gutter="24">
              <div class="table-page-search-wrapper">
                <a-form layout="inline" class="kk">
                  <a-col :md="6" :sm="8">
                    <a-form-item label="出货数量合计" >
                      <a-input v-model="sumInfo.shipQua" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.shipQua}}</span>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="出运美元外销总价" >
                      <a-input v-model="sumInfo.exportPriceUSD" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.exportPriceUSD}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item label="出运人民币外销金额">
                      <a-input v-model="sumInfo.exportedAmountRMB" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.exportedAmountRMB}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item label="成本合计金额">
                      <a-input v-model="sumInfo.amountTotal" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.amountTotal}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item label="面料金额合计" >
                      <a-input v-model="sumInfo.fabricAmount" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.fabricAmount}}</span>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="辅料金额合计">
                      <a-input v-model="sumInfo.ingAmount" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.ingAmount}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item label="出运加工费">
                      <a-input v-model="sumInfo.shipProcesFees" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.shipProcesFees}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8" class="noprint">
                    <a-form-item ></a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item label="面料不含税金额合计">
                      <a-input v-model="sumInfo.fabricExcludTax" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.fabricExcludTax}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item label="辅料不含税金额合计" >
                      <a-input v-model="sumInfo.ingExcludAmount" v-show='showSelect==0'></a-input>
                      <span v-show='showSelect==1'>{{sumInfo.ingExcludAmount}}</span>
                    </a-form-item>
                  </a-col>
                </a-form>
              </div>
            </a-row>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>

    <!-- tabs内弹框 -->
    <div>
      <!-- 面料 转入数量 -->
      <fabInQua-modal ref="fabInQuaModal" :father="aa"></fabInQua-modal>

      <!-- 余下数量 -->
      <fabRemQua-modal ref="fabRemQuaModal" :father="bb"></fabRemQua-modal>

      <!-- 辅料 转入数量 -->
      <ingInQua-modal ref="ingInQuaModal" :father="cc"></ingInQua-modal>
      <!-- 余下数量 -->
      <ingRemQua-modal ref="ingRemQuaModal" :father="bb"></ingRemQua-modal>
    </div>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import fabInQuaModal from '@views/cost-allocation-total/modal/fabInQuaModal.vue'
import fabRemQuaModal from '@views/cost-allocation-total/modal/fabRemQuaModal.vue'
import ingInQuaModal from '@views/cost-allocation-total/modal/ingInQuaModal.vue'
import ingRemQuaModal from '@views/cost-allocation-total/modal/ingRemQuaModal.vue'

export default {
  name: 'UnitTabs', //  Tabs 详情
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    moment,
    fabInQuaModal, // 面料 转入数量
    fabRemQuaModal, //  余下数量
    ingInQuaModal, // 辅料 转入数量
    ingRemQuaModal // 余下数量
  },
  data() {
    // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
    return {
      // 面料
      fabColumns: [
        {
          title: '序号',
          width: '6%',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`,
          className: 'replacecolor'
        },
        { title: '货物名称', width: '10%', dataIndex: 'goodsName', className: 'replacecolor' },
        {
          title: '转入数量',
          dataIndex: 'fabrictransferQuantity',
          width: '10%',
          className: 'replacecolor',
          customCell: this.fabQuaCustomCell,
          scopedSlots: { customRender: 'fabInQuaSlot' },
        },
        {
          title: '转入成本',
          dataIndex: 'transferCost',
          width: '10%',
          className: 'replacecolor',
          // slots:{title:'transferCostTitle'} ,
        },

        { title: '单耗/件', dataIndex: 'unitConsumption', width: '10%', className: 'replacecolor' },
        { title: '使用数量', dataIndex: 'usageQuantity', width: '10%', className: 'replacecolor' },
        { title: '计划数量', dataIndex: 'planQuantity', width: '10%', className: 'replacecolor' },
        {
          title: '购入数量',
          dataIndex: 'purchaseQuantity',
          width: '10%',
          className: 'replacecolor'
        },
        {
          title: '余下数量',
          dataIndex: 'fabricremainingQuantity',
          width: '7%',
          className: 'replacecolor',
          customCell: this.fabRemQuaCustomCell,
          scopedSlots: { customRender: 'fabRemaQuaSlot' }
        },
        {
          title: '损耗',
          dataIndex: 'loss',
          width: '10%',
          className: 'replacecolor'
        },
        {
          title: '余下数量的成本',
          dataIndex: 'remainingQuantitycost',
          width: '10%',
          className: 'replacecolor',
          // slots:{title:'remainingQuantitycostTitle'} ,

        }
      ],
      fabData: [],

      // 辅料
      ingColumns: [
        {
          title: '序号',
          width: '6%',
          dataIndex: 'index',
          key: 'index',
          fixed: 'left',
          customRender: (text, record, index) =>{
            if(record.goodsName!=='合计'){
              return index + 1
            }else{
              return ''
            }
          },
          className: 'replacecolor'
        },
        { title: '货物名称', width: '12%', dataIndex: 'goodsName', fixed: 'left', className: 'replacecolor' },
        {
          title: '转入数量',
          dataIndex: 'ingredientsTransferQuantity',
          width: '10%',
          className: 'replacecolor',
          customCell: this.ingInQuaCustomCell,
          scopedSlots: { customRender: 'ingInQuaSlot' }
        },
        {
          title: '转入成本',
          dataIndex: 'transferCost',
          width: '10%',
          className: 'replacecolor',
          // slots:{title:'transferCostTitle'} ,
        },

        { title: '使用数量', dataIndex: 'usageQuantity', width: '8%', className: 'replacecolor' },
        {
          title: '购入数量',
          dataIndex: 'purchaseQuantity',
          width: '10%',
          className: 'replacecolor'
        },
        {
          title: '余下数量',
          dataIndex: 'ingredientsRemainingQuantity',
          width: '9%',
          className: 'replacecolor',
          customCell: this.ingRemQuaCustomCell,
          scopedSlots: { customRender: 'ingRemQuaSlot' }
        },
        {
          title: '损耗',
          dataIndex: 'loss',
          width: '8%',
          className: 'replacecolor'
        },
        {
          title: '人民币金额',
          dataIndex: 'rmbAmount',
          width: '8%',
          className: 'replacecolor'
        },
        {
          title: '美元金额',
          dataIndex: 'usdAmount',
          width: '8%',
          className: 'replacecolor',
          customRender: (text, record, index) => {
            if (record.rmbAmount == record.usdAmount)
              return "";
            else
              return record.usdAmount;
           } 
        },
        {
          title: '不含税金额',
          dataIndex: 'priceExcludingtax',
          width: '8%',
          className: 'replacecolor'
        },
        // {
        //   title: '转出率',
        //   dataIndex: 'transferOutrate',
        //   width: 120,
        //   className: 'replacecolor'
        // },
        // {
        //   title: '进项税转出',
        //   dataIndex: 'inputtaxTransferout',
        //   width: 160,
        //   className: 'replacecolor'
        // },
        {
          title: '用量',
          dataIndex: 'dosage',
          width: '8%',
          className: 'replacecolor'
        }
      ],
      ingData: [],

      // 发运明细
      shipColumns: [
        {
          title: '序号',
          width: '6%',
          dataIndex: 'index',
          key: 'index',
          fixed: 'left',
          customRender: (text, record, index) => `${index + 1}`,
          className: 'replacecolor'
        },
        { title: '发票号码', width: '15%', dataIndex: 'invoiceNum', fixed: 'left', className: 'replacecolor' },
        {
          title: '出运日期',
          dataIndex: 'outdata',
          width: '8%',
          fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: '小po',
          width: '7%',
          dataIndex: 'smallPo',
          fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: '汇率',
          dataIndex: 'exchangeRate',
          width: '8%',
          className: 'replacecolor'
        },

        { title: '订单号', dataIndex: 'orderNum', width: '10%', className: 'replacecolor' },
        {
          title: '产品款号',
          dataIndex: 'poStyleNum',
          width: '9%',
          className: 'replacecolor'
        },
        {
          title: '出货数量',
          dataIndex: 'shipQuantity',
          width: '9%',
          className: 'replacecolor'
        },
        {
          title: '外销单价',
          dataIndex: 'exportUnitPrice',
          width: '9%',
          className: 'replacecolor'
        },
        {
          title: '外销总价',
          dataIndex: 'exportPrice',
          width: '9%',
          className: 'replacecolor'
        },
        {
          title: '人民币金额',
          dataIndex: 'rmbAmount',
          width: '9%',
          className: 'replacecolor'
        },
        {
          title: '加工单价（人民币）',
          dataIndex: 'procesUnitPricermb',
          width: '9%',
          className: 'replacecolor'
        },
        {
          title: '加工单价（美元）',
          dataIndex: 'procesUnitPriceusd',
          width: '9%',
          className: 'replacecolor',
          customRender: (text, record, index) => {
            if (record.procesUnitPricermb == record.procesUnitPriceusd)
              return "";
            else
              return record.procesUnitPriceusd;
           } 
        },
        {
          title: '加工费(人民币)',
          dataIndex: 'processCost',
          width: '8%',
          className: 'replacecolor'
        }
      ],
      shipData: [],
      tabsAllData: [], //tabs所有数据集合
      tabNameList: [], //tabs数组集合
      activeKey: '0',
      sumInfo: {} //合计对象
    }
  },
   props: {
    showSelect: {
      type: String,
      default: null
    }
  },
  created() {},
  methods: {
    tabsCallback(key) {
      this.activeKey = key
      // console.log('点击的是', this.activeKey)
      if (key == 0) {
        var oneData = this.tabsAllData[0]
        this.fabData = oneData.syCostAllocationFabricList
        this.ingData = oneData.syCostAllocationIngredientList
        this.shipData = oneData.syCostAllocationShipdetailList
      }
      if (key == 1) {
        var twoData = this.tabsAllData[1]
        this.fabData = twoData.syCostAllocationFabricList
        this.ingData = twoData.syCostAllocationIngredientList
        this.shipData = twoData.syCostAllocationShipdetailList
      }
    },

    // 面料 -转入数量 弹框
    fabQuaCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('面料 - 转入数量')
            this.$refs.fabInQuaModal.fabInQuaModVis = true
            record.syTransfers.map(item=>{
              if(item.unitCost){
                 item.unitCost =  (item.unitCost).toFixed(3)
              }
            })
            this.$refs.fabInQuaModal.data = record.syTransfers
          }
        }
      }
    },

    // 面料 -余下数量 弹框
    fabRemQuaCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('面料 - 余下数量')
            this.$refs.fabRemQuaModal.fabRemQuaModVis = true
            this.$refs.fabRemQuaModal.data = record.syRemaining
          }
        }
      }
    },

    // 辅料-转入数量 弹框
    ingInQuaCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('辅料 - 转入数量')
            this.$refs.ingInQuaModal.ingInQuaModVis = true
            record.syTransfers.map(item=>{
              if(item.unitCost){
               item.unitCost =  (item.unitCost).toFixed(3)
              }
            })
            this.$refs.ingInQuaModal.data = record.syTransfers
          }
        }
      }
    },
    // 辅料-余下数量 弹框
    ingRemQuaCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('辅料 - 余下数量')
            this.$refs.ingRemQuaModal.ingRemQuaModVis = true
            this.$refs.ingRemQuaModal.data = record.syRemaining
          }
        }
      }
    },

    aa() {},
    bb() {},
    cc() {}
  },

  computed: {
    // 合计数据
    // sumInfoSource() {}
  }
}
</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;
// }

//tbas内 小标签
.table-title {
  font-weight: 700;
}
.fontColor{
  color: red;
}

/deep/ .ant-tabs-nav .ant-tabs-tab-active {
  font-size: 18px;
}
/deep/ .ant-tabs-nav .ant-tabs-tab {
  font-size: 18px;
}
/deep/ .ant-tabs-nav .ant-tabs-tab {
  padding: 0 0 10px 0;
}
/deep/ .fontColor .ant-form-item-label > label{
  color: red !important;
}
/deep/.ant-table-fixed{
  width:18% !important
}
/deep/.shipData>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-content>.ant-table-fixed-left>.ant-table-body-outer>.ant-table-body-inner>.ant-table-fixed>{
  width:29% !important
}

</style>