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

<template>
  <!-- 详情 - 成本分配汇总 单证 -->
  <!--   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>
          <h6 class="table-title">面料</h6>
          <a-table
            rowKey="(item)=>item.id"
            :loading="loading"
            :columns="fabColumns"
            :data-source="fabData"
            bordered
            :pagination="false"
            :scroll="{ x: 1500, y: 300 }"
          >
            <!-- 面料 -转入数量 弹框-->
            <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">
          <h6 class="table-title">辅料</h6>
          <a-table
            rowKey="id"
            :loading="loading"
            :columns="ingColumns"
            :data-source="ingData"
            bordered
            :pagination="false"
            :scroll="{ x: 1000, y: 300 }"
          >
            <!--辅料-转入数量 弹框-->
            <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>
          <h6 class="table-title">发运明细</h6>
          <a-table
            rowKey="id"
            :loading="loading"
            :columns="shipColumns"
            :data-source="shipData"
            bordered
            :pagination="false"
            :scroll="{ x: 1000, y: 300 }"
          >
          </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">
                  <a-col :md="6" :sm="8">
                    <a-form-item label="出货数量合计">
                      <a-input v-model="sumInfo.shipQua"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="辅料金额合计">
                      <a-input v-model="sumInfo.ingAmount"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="辅料不含税金额合计">
                      <a-input v-model="sumInfo.ingExcludAmount"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="出运美元外销总价">
                      <a-input v-model="sumInfo.exportPriceUSD"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="出运加工费">
                      <a-input v-model="sumInfo.shipProcesFees"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="面料不含税金额合计">
                      <a-input v-model="sumInfo.fabricExcludTax"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="出运人民币外销金额">
                      <a-input v-model="sumInfo.exportedAmountRMB"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="合计金额">
                      <a-input v-model="sumInfo.amountTotal"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="8">
                    <a-form-item label="面料金额合计">
                      <a-input v-model="sumInfo.fabricAmount"></a-input>
                    </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: 90,
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`,
          className: 'replacecolor'
        },
        { title: '货物名称', width: 160, dataIndex: 'goodsName', className: 'replacecolor' },
        {
          title: '转入数量',
          dataIndex: 'fabrictransferQuantity',
          width: 120,
          className: 'replacecolor',
          customCell: this.fabQuaCustomCell,
          scopedSlots: { customRender: 'fabInQuaSlot' }
        },
        {
          title: '转入成本',
          dataIndex: 'transferCost',
          width: 120,
          className: 'replacecolor'
        },

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

      // 辅料
      ingColumns: [
        {
          title: '序号',
          width: 90,
          dataIndex: 'index',
          key: 'index',
          fixed: 'left',
          customRender: (text, record, index) => `${index + 1}`,
          className: 'replacecolor'
        },
        { title: '货物名称', width: 170, dataIndex: 'goodsName', fixed: 'left', className: 'replacecolor' },
        {
          title: '转入数量',
          dataIndex: 'ingredientsTransferQuantity',
          width: 120,
          className: 'replacecolor',
          customCell: this.ingInQuaCustomCell,
          scopedSlots: { customRender: 'ingInQuaSlot' }
        },
        {
          title: '转入成本',
          dataIndex: 'transferCost',
          width: 120,
          className: 'replacecolor'
        },

        { title: '使用数量', dataIndex: 'usageQuantity', width: 120, className: 'replacecolor' },
        {
          title: '购入数量',
          dataIndex: 'purchaseQuantity',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '余下数量',
          dataIndex: 'ingredientsRemainingQuantity',
          width: 140,
          className: 'replacecolor',
          customCell: this.ingRemQuaCustomCell,
          scopedSlots: { customRender: 'ingRemQuaSlot' }
        },
        {
          title: '损耗',
          dataIndex: 'loss',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '人民币金额',
          dataIndex: 'rmbAmount',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '美元金额',
          dataIndex: 'usdAmount',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '不含税金额',
          dataIndex: 'priceExcludingtax',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '转出率',
          dataIndex: 'transferOutrate',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '进项税转出',
          dataIndex: 'inputtaxTransferout',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '用量',
          dataIndex: 'dosage',
          width: 120,
          className: 'replacecolor'
        }
      ],
      ingData: [],

      // 发运明细
      shipColumns: [
        {
          title: '序号',
          width: 90,
          dataIndex: 'index',
          key: 'index',
          fixed: 'left',
          customRender: (text, record, index) => `${index + 1}`,
          className: 'replacecolor'
        },
        { title: '发票号码', width: 180, dataIndex: 'invoiceNum', fixed: 'left', className: 'replacecolor' },
        {
          title: '出运日期',
          dataIndex: 'outData',
          width: 130,
          className: 'replacecolor'
        },
        {
          title: '汇率',
          dataIndex: 'exchangeRate',
          width: 120,
          className: 'replacecolor'
        },

        { title: '订单号', dataIndex: 'orderNum', width: 160, className: 'replacecolor' },
        {
          title: '产品款号',
          dataIndex: 'poStyleNum',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '出货数量',
          dataIndex: 'shipQuantity',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '外销单价',
          dataIndex: 'exportUnitPrice',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '外销总价',
          dataIndex: 'exportPrice',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '人民币金额',
          dataIndex: 'rmbAmount',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '加工单价（人民币）',
          dataIndex: 'procesUnitPricermb',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '加工单价（美元）',
          dataIndex: 'procesUnitPriceusd',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '加工费',
          dataIndex: 'processCost',
          width: 160,
          className: 'replacecolor'
        }
      ],
      shipData: [],
      tabsAllData: [], //tabs所有数据集合
      tabNameList: [], //tabs数组集合
      activeKey: '0',
      sumInfo: {} //合计对象
    }
  },
  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
          }
        }
      }
    },

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

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

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

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