|
@@ -0,0 +1,516 @@
|
|
|
+<template>
|
|
|
+ <!-- 成本分配统计表 中tabs 部分 -->
|
|
|
+ <div id="tabs">
|
|
|
+ <a-tabs default-active-key="1" @change="tabsCallback">
|
|
|
+ <a-tab-pane key="1" tab="加工单位1">
|
|
|
+ <!-- tabs 面料 -->
|
|
|
+ <div>
|
|
|
+ <h6 class="table-title">面料</h6>
|
|
|
+ <a-table
|
|
|
+ rowKey="(item)=>item.id"
|
|
|
+ :loading="loading"
|
|
|
+ :columns="fabricColumns"
|
|
|
+ :data-source="fabricData"
|
|
|
+ bordered
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <!-- 面料-转入数量 弹框-->
|
|
|
+ <span slot="fabricTransferQuantity" slot-scope="text">
|
|
|
+ <a>{{ text }}</a>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <!-- 面料-余下数量 弹框-->
|
|
|
+ <span slot="fabricRemainingQuantity" slot-scope="text">
|
|
|
+ <a>{{ text }}</a>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- tabs 辅料 -->
|
|
|
+ <div style="margin:40px 0">
|
|
|
+ <h6 class="table-title">辅料</h6>
|
|
|
+ <a-table
|
|
|
+ rowKey="id"
|
|
|
+ :loading="loading"
|
|
|
+ :columns="ingredientsColumns"
|
|
|
+ :data-source="ingredientsData"
|
|
|
+ bordered
|
|
|
+ :pagination="false"
|
|
|
+ :scroll="{ x: 1500 }"
|
|
|
+ >
|
|
|
+ <!--辅料-转入数量 弹框-->
|
|
|
+ <span slot="ingredientsTransferQuantity" slot-scope="text">
|
|
|
+ <a>{{ text }}</a>
|
|
|
+ </span>
|
|
|
+ <!--辅料-余下数量 弹框-->
|
|
|
+ <span slot="ingredientsRemainingQuantity" slot-scope="text">
|
|
|
+ <a>{{ text }}</a>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- tabs 发运明细 -->
|
|
|
+ <div>
|
|
|
+ <h6 class="table-title">发运明细</h6>
|
|
|
+ <a-table
|
|
|
+ rowKey="id"
|
|
|
+ :loading="loading"
|
|
|
+ :columns="shipDetailsColumns"
|
|
|
+ :data-source="shipDetailsData"
|
|
|
+ bordered
|
|
|
+ :pagination="false"
|
|
|
+ :scroll="{ x: 1500 }"
|
|
|
+ >
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- tabs 合计 信息 -->
|
|
|
+ <div style="margin:40px 0">
|
|
|
+ <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="totalInfo.shipmentQuantity"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="辅料金额合计">
|
|
|
+ <a-input v-model="totalInfo.accessoriesAmount"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="辅料不含税金额合计">
|
|
|
+ <a-input v-model="totalInfo.accessoriesExcludTax"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="出运美元外销总价">
|
|
|
+ <a-input v-model="totalInfo.exportPriceUSD"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="出运加工费">
|
|
|
+ <a-input v-model="totalInfo.shipProcesFees"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="面料不含税金额合计">
|
|
|
+ <a-input v-model="totalInfo.fabricExcludTax"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="出运人民币外销金额">
|
|
|
+ <a-input v-model="totalInfo.exportedAmountRMB"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="合计金额">
|
|
|
+ <a-input v-model="totalInfo.amountTotal"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="面料金额合计">
|
|
|
+ <a-input v-model="totalInfo.fabricAmount"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-tab-pane>
|
|
|
+
|
|
|
+ <!-- 加工单位 2 -->
|
|
|
+ <a-tab-pane key="2" tab="加工单位2" force-render>
|
|
|
+ <!-- tabs 面料 -->
|
|
|
+ <div>
|
|
|
+ <h6 class="table-title">面料</h6>
|
|
|
+
|
|
|
+ <a-table
|
|
|
+ rowKey="id"
|
|
|
+ :loading="loading"
|
|
|
+ :columns="fabricColumns"
|
|
|
+ :data-source="fabricData"
|
|
|
+ bordered
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <!-- 转入数量 弹框-->
|
|
|
+ <span slot="fabricTransferQuantity" slot-scope="text">
|
|
|
+ <a>{{ text }}</a>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- tabs 辅料 -->
|
|
|
+ <div style="margin:40px 0">
|
|
|
+ <h6 class="table-title">辅料</h6>
|
|
|
+
|
|
|
+ <a-table
|
|
|
+ rowKey="id"
|
|
|
+ :loading="loading"
|
|
|
+ :columns="ingredientsColumns"
|
|
|
+ :data-source="ingredientsData"
|
|
|
+ bordered
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <!-- 转入数量 弹框-->
|
|
|
+ <span slot="TransferQuantity" slot-scope="text">
|
|
|
+ <a>{{ text }}</a>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- tabs 发运明细 -->
|
|
|
+ <div>
|
|
|
+ <h6 class="table-title">发运明细</h6>
|
|
|
+
|
|
|
+ <a-table
|
|
|
+ rowKey="id"
|
|
|
+ :loading="loading"
|
|
|
+ :columns="shipDetailsColumns"
|
|
|
+ :data-source="shipDetailsData"
|
|
|
+ bordered
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <!-- 转入数量 弹框-->
|
|
|
+ <span slot="fabricTransferQuantity" slot-scope="text">
|
|
|
+ <a>{{ text }}</a>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- tabs 合计信息 -->
|
|
|
+ <div style="margin:40px 0">
|
|
|
+ <h6 class="table-title">发运明细</h6>
|
|
|
+ <p>此处是主表信息的表单回显 方式</p>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
+import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
+import moment from 'moment'
|
|
|
+export default {
|
|
|
+ name: 'Tabs', // 成本分配统计表 中tabs 部分
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ components: { JEllipsis, moment },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ description: '成本分配统计表',
|
|
|
+ totalInfo: {}, // tabs 中合计信息
|
|
|
+ // 面料 表头
|
|
|
+ fabricColumns: [
|
|
|
+ /*
|
|
|
+ text 序号一列默认显示的数据
|
|
|
+ record 一行的所有数据
|
|
|
+ index tbale表格数据的下标,即数组的下标
|
|
|
+ */
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ width: 50,
|
|
|
+ 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.fabricTransferQuantityCustomCell,
|
|
|
+ scopedSlots: { customRender: 'fabricTransferQuantity' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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.fabricRemainingQuantityCustomCell,
|
|
|
+ scopedSlots: { customRender: 'fabricRemainingQuantity' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '损耗',
|
|
|
+ dataIndex: 'loss',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '余下数量的成本',
|
|
|
+ dataIndex: 'remainingQuantityCost',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ fabricData: [
|
|
|
+ { fabricTransferQuantity: '8987', fabricRemainingQuantity: '67', loss: '1.17%' },
|
|
|
+ { fabricTransferQuantity: '6752', fabricRemainingQuantity: '37', loss: '1.17%' }
|
|
|
+ ],
|
|
|
+ // 辅料 表头
|
|
|
+ ingredientsColumns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ width: 90,
|
|
|
+ dataIndex: 'index',
|
|
|
+ key: 'index',
|
|
|
+ fixed: 'left',
|
|
|
+ customRender: (text, record, index) => `${index + 1}`,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ { title: '货物名称', width: 160, dataIndex: 'goodsName', fixed: 'left', className: 'replacecolor' },
|
|
|
+ {
|
|
|
+ title: '转入数量',
|
|
|
+ dataIndex: 'ingredientsTransferQuantity',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor',
|
|
|
+ customCell: this.ingredientsTransferQuantityCustomCell,
|
|
|
+ scopedSlots: { customRender: 'ingredientsTransferQuantity' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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: 100,
|
|
|
+ className: 'replacecolor',
|
|
|
+ customCell: this.ingredientsRemainingQuantityCustomCell,
|
|
|
+ scopedSlots: { customRender: 'ingredientsRemainingQuantity' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '损耗',
|
|
|
+ dataIndex: 'loss',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '人民币金额',
|
|
|
+ dataIndex: 'RMBAmount',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '美元金额',
|
|
|
+ dataIndex: 'USDAmount',
|
|
|
+ width: 120,
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ ingredientsData: [
|
|
|
+ { ingredientsTransferQuantity: '7899', transferCost: '12536', ingredientsRemainingQuantity: '6698' }
|
|
|
+ ],
|
|
|
+ // 发运明细 表头
|
|
|
+ shipDetailsColumns: [
|
|
|
+ {
|
|
|
+ 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: 120,
|
|
|
+ className: 'replacecolor',
|
|
|
+ customCell: this.ingredientsTransferQuantityCustomCell,
|
|
|
+ scopedSlots: { customRender: 'ingredientsTransferQuantity' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '汇率',
|
|
|
+ dataIndex: 'exchangeRate',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+
|
|
|
+ { title: '订单号', dataIndex: 'orderNum', width: 120, className: 'replacecolor' },
|
|
|
+ {
|
|
|
+ title: '产品款号',
|
|
|
+ dataIndex: 'poStyleNum',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '出货数量',
|
|
|
+ dataIndex: 'shipQuantity',
|
|
|
+ width: 100,
|
|
|
+ className: 'replacecolor',
|
|
|
+ customCell: this.ingredientsRemainingQuantityCustomCell,
|
|
|
+ scopedSlots: { customRender: 'ingredientsRemainingQuantity' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '外销单价',
|
|
|
+ dataIndex: 'loss',
|
|
|
+ width: 120,
|
|
|
+ className: 'exportUnitPrice'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ shipDetailsData: [{ invoiceNum: '19TW-PRU-138S', outData: '2019-10-16', exchangeRate: '7.1338' }],
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 渲染订单销售列表
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // tbas
|
|
|
+ tabsCallback(key) {
|
|
|
+ console.log(key)
|
|
|
+ },
|
|
|
+ // 面料-转入数量 弹框
|
|
|
+ fabricTransferQuantityCustomCell() {},
|
|
|
+ // 面料-余下数量 弹框
|
|
|
+ fabricRemainingQuantityCustomCell() {},
|
|
|
+
|
|
|
+ // 辅料-转入数量 弹框
|
|
|
+ ingredientsTransferQuantityCustomCell() {},
|
|
|
+ // 辅料-余下数量 弹框
|
|
|
+ ingredientsRemainingQuantityCustomCell() {},
|
|
|
+
|
|
|
+ // 事故单 单号 弹框
|
|
|
+ accidentListCustomCell(record) {
|
|
|
+ return {
|
|
|
+ on: {
|
|
|
+ click: event => {
|
|
|
+ console.log('this:', this)
|
|
|
+ this.$refs.accidentListModal.accidentListModVis = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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;
|
|
|
+// }
|
|
|
+
|
|
|
+//小标签
|
|
|
+.table-title {
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+// 合计信息 盒子
|
|
|
+.totalBox {
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-tabs-nav .ant-tabs-tab-active {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+/deep/ .ant-tabs-nav .ant-tabs-tab {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+</style>
|