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

<template>
  <!-- 成本分配详情-->
  <div id="costAllocationDrawer">
    <a-drawer
      title="详情"
      width="89%"
      placement="right"
      :closable="true"
      :visible="visible"
      @close="onClose"
    >
      <!-- 主表信息 -->
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="计划单号">
                  <a-input v-model="costAllocation.planNum"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="产品款号" has-feedback>
                  <a-input v-model="costAllocation.poStyleNum"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="外销员">
                  <a-input v-model="costAllocation.exportSales"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="成衣合同号">
                  <a-input v-model="costAllocation.garmentContractNo"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="部门">
                  <a-input v-model="costAllocation.department"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="客户简称">
                  <a-input v-model="costAllocation.customerShortName"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="加工单位">
                  <a-input v-model="costAllocation.processUnit"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="出运日期">
                  <a-date-picker style="width: 100%" v-model="costAllocation.outData"></a-date-picker>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="计划数量">
                  <a-input v-model="costAllocation.planQuantity"></a-input>
                </a-form-item>
              </a-col>

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

              <a-col :md="6" :sm="8">
                <a-form-item label="人民币费用支出">
                  <a-input
                    v-model="costAllocation.RMBExpense"
                    style="color:#027db4;"
                    @click="mainTableExpenseCNY"
                  ></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="税率%">
                  <a-input v-model="costAllocation.taxRate"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="实际出货数量">
                  <a-input v-model="costAllocation.actualShipQuantity"></a-input>
                </a-form-item>
              </a-col>

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

              <a-col :md="6" :sm="8">
                <a-form-item label="美元费用支出">
                  <a-input
                    v-model="costAllocation.USDExpense"
                    style="color:#027db4;"
                    @click="mainTableExpenseUSD"
                  ></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="加工费">
                  <a-input v-model="costAllocation.processCost"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="短出数">
                  <a-input v-model="costAllocation.shortSeveral"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="短出货值">
                  <a-input v-model="costAllocation.shortValue"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="短出面料成本">
                  <a-input v-model="costAllocation.fabricShortCost"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="事故单美金金额">
                  <a-input v-model="costAllocation.accidentUSDAmount"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="面料含税成本">
                  <a-input v-model="costAllocation.fabricCostIncludesTax"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="辅料含税成本">
                  <a-input v-model="costAllocation.excipienCostIncludesTax"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="销售订单本币总额">
                  <a-input v-model="costAllocation.salesOrdersLocalTotal"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="事故单人民币金额">
                  <a-input v-model="costAllocation.accidentCNYAmount"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="面料不含税成本">
                  <a-input v-model="costAllocation.fabricCostNotIncludesTax"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="辅料不含税成本">
                  <a-input v-model="costAllocation.excipienCostNotIncludesTax"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="销售订单原币总额">
                  <a-input v-model="costAllocation.salesOrdersOriginalTotal"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="制单人">
                  <a-input v-model="costAllocation.preparedBy"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <h4 style="color:red;">
                  标记
                  <span>（计算结果是负值时，该标记是红色）</span>
                </h4>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>

      <!-- 子表 -->
      <a-card :bordered="false">

        <!--tabs 组件引入  -->
        <div style="marginTop:60px;">
          <tabs />
        </div>

        <!-- 事故单 -->
        <div style="margin:60px 0 40px 0">
          <h6 class="table-title">事故单</h6>
          <a-table
            rowKey="id"
            :loading="loading"
            :columns="accidentListColumns"
            :data-source="accidentListData"
            bordered
            :pagination="false"
          >
            <!-- 事故单 -->
            <span slot="accidentNum" slot-scope="text">
              <a>{{ text }}</a>
            </span>
          </a-table>
        </div>

        <!-- 费用支出 -->
        <div>
          <h6 class="table-title">费用支出</h6>
          <a-table
            rowKey="id"
            :loading="loading"
            :columns="costPayColumns"
            :data-source="costPayData"
            bordered
            :pagination="false"
          >
          </a-table>
        </div>

        <!-- 备注信息 1 根据角色权限控制【填写】、【查看】-->
        <div class="note-one" style="marginTop:40px;">
          <h6 class="table-title">备注信息 1</h6>
          <div class="noteDetail">
            <a-input type="textarea" v-model="noteOne" placeholder="请输入备注 1" style="minHeight:100px;" />
            <a-button type="primary" @click="savenoteOne">保存</a-button>
          </div>
        </div>

        <!-- 备注信息 2 根据角色权限控制【填写】、【查看】-->
        <div class="note-two" style="marginTop:40px;">
          <h6 class="table-title">备注信息 2</h6>
          <div class="noteDetail">
            <a-input type="textarea" v-model="noteTwo" placeholder="请输入备注 2" style="minHeight:100px;" />
            <a-button type="primary" @click="savenoteTwo">保存</a-button>
          </div>
        </div>
      </a-card>
    </a-drawer>

    <!-- 所有弹框 -->
    <div>
      <!-- 主表 人民币费用支出  弹框 -->
      <mainTableExpenseCNY-modal ref="mainTableExpenseCNYModal" :father="aa"></mainTableExpenseCNY-modal>
      <!-- 主表 美元费用支出  弹框 -->
      <mainTableExpenseUSD-modal ref="mainTableExpenseUSDModal" :father="bb"></mainTableExpenseUSD-modal>
      <!-- 事故单 -->
      <accidentList-modal ref="accidentListModal" :father="cc"></accidentList-modal>
    </div>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'
import tabs from '@views/reportForms/cost-allocation-table/tabs.vue' // tabs组件
import mainTableExpenseCNYModal from '@views/reportForms/cost-allocation-table/mainTableExpenseCNYModal.vue'
import mainTableExpenseUSDModal from '@views/reportForms/cost-allocation-table/mainTableExpenseUSDModal.vue'

import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue' // 事故单

export default {
  name: 'CostAllocationTable', // 成本分配统计表
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, tabs, mainTableExpenseCNYModal, mainTableExpenseUSDModal, accidentListModal },

  data() {
    return {
      description: '成本分配统计表详情 ',
      loading: false, // 表格加载
      costAllocation: [], // 成本分配统计

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

      // 事故单 表头
      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' }, {}],
      // 费用支出 表头
      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: [{}],
      visible: false // 成本分配统计表详情  抽屉
    }
  },
  created() {},
  methods: {
    // 同步按钮  synchronization() {},

    //  主表：人民币费用支出  弹框
    mainTableExpenseCNY() {
      console.log('点击:主表人民币费用支出')
      this.$refs.mainTableExpenseCNYModal.mainTableExpenseCNYModVis = true
    },
    // 主表：美元费用支出  弹框
    mainTableExpenseUSD() {
      console.log('点击:主表美元费用支出')
      this.$refs.mainTableExpenseUSDModal.mainTableExpenseUSDModVis = true
    },

    // 事故单 单号 弹框
    accidentListCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            // 调用【面料损耗表】中的【事故单】弹框
            this.$refs.accidentListModal.accidentListModVis = true
          }
        }
      }
    },
    // ---------------------------------------
    // 保存备注 1
    savenoteOne() {
      console.log('保存 备注 1')
    },
    // 保存备注 2
    savenoteTwo() {
      console.log('保存 备注 2')
    },

    onClose() {
      // 关闭抽屉
      this.visible = false
    },

    // --------------------------------------------------
    // father 方法
    aa() {},
    bb() {},
    cc() {}
  },
  computed: {},
  mounted() {}
}
</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-card-body {
  padding: 0;
}
/deep/ .ant-tabs {
  border: 6px solid rgba(24, 144, 255,.3);
  padding: 12px;
  border-radius: 12px;
}
</style>