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

<template>
  <!-- 详情 成本分配汇总-->
  <div id="costDetailDrawer">
    <a-drawer title="详情" width="89%" placement="right" :closable="true" :visible="visible" @close="onClose">
      <!-- 主表信息 -->
      <a-card :bordered="true">
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-model-item label="计划单号" prop="planNum">
                  {{ detailsPlanNum.planNum }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="产品款号" prop="poStyleNum">
                  {{ detailsPlanNum.poStyleNum }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="外销员" prop="exportSales">
                  {{ detailsPlanNum.exportSales }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="成衣合同号" prop="garmentContractno">
                  {{ detailsPlanNum.garmentContractno }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="部门" prop="department">
                  {{ detailsPlanNum.department }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="客户简称" prop="customerShortame">
                  {{ detailsPlanNum.customerShortame }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="加工单位" prop="processUnit">
                  {{ detailsPlanNum.processUnit }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="出运日期" prop="outdata">
                  {{ detailsPlanNum.outdata }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="计划数量" prop="planQuantity">
                  {{ detailsPlanNum.planQuantity }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="美元外销总价" prop="usdTotalexportprice">
                  {{ detailsPlanNum.usdTotalexportprice }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="人民币费用支出" prop="rmbExpense">
                  <a href="javascript:void(0)" @click="mainTableExpenseCNY()">{{ detailsPlanNum.rmbExpense }}</a>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="税率%" prop="taxrate">
                  {{ detailsPlanNum.taxrate }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="实际出货数量" prop="actualShipquantity">
                  {{ detailsPlanNum.actualShipquantity }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="人民币外销金额" prop="rmbExportamount">
                  {{ detailsPlanNum.rmbExportamount }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="美元费用支出" prop="usdExpense">
                  <a href="javascript:void(0)" @click="mainTableExpenseUSD()">{{ detailsPlanNum.usdExpense }}</a>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="加工费" prop="rmbProcesscost">
                  {{ detailsPlanNum.rmbProcesscost }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="短出数" prop="shortseveral">
                  {{ detailsPlanNum.shortseveral }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="短出货值" prop="shortvalue">
                  {{ detailsPlanNum.shortvalue }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="短出面料成本" prop="fabricshortcost">
                  {{ detailsPlanNum.fabricshortcost }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="事故单美金金额" prop="accidentUsdamount">
                  {{ detailsPlanNum.accidentUsdamount }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="面料含税成本" prop="fabriccostIncludestax">
                  {{ detailsPlanNum.fabriccostIncludestax }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="辅料含税成本" prop="excipiencostIncludestax">
                  {{ detailsPlanNum.excipiencostIncludestax }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="销售订单本币总额" prop="salesordersLocaltotal">
                  {{ detailsPlanNum.salesordersLocaltotal }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="事故单人民币金额" prop="accidentcnyAmount">
                  {{ detailsPlanNum.accidentcnyAmount }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="面料不含税成本" prop="fabriccostNotincludestax">
                  {{ detailsPlanNum.fabriccostNotincludestax }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="辅料不含税成本" prop="excipiencostNotincludestax">
                  {{ detailsPlanNum.excipiencostNotincludestax }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="销售订单原币总额" prop="salesrrdersOriginaltotal">
                  {{ detailsPlanNum.salesrrdersOriginaltotal }}
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="制单人" prop="preparedBy">
                  {{ detailsPlanNum.preparedBy }}
                </a-form-model-item>
              </a-col>

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

      <!-- 子表 -->
      <a-card :bordered="true" style="margin:10px 0">
        <!--tabs 组件引入  style="marginTop:60px;" -->
        <div>
          <tabs ref="unitTabs" />
        </div>
      </a-card>

      <!-- 事故单 -->
      <a-card :bordered="true" style="margin:10px 0">
        <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"
            :scroll="{ y: 300 }"
          >
            <!-- 事故单 -->
            <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>

        <!-- 备注信息 根据角色权限控制【填写】、【查看】-->
        <div class="note-one" style="marginTop:40px;">
          <h6 class="table-title">备注信息</h6>
          <div class="noteDetail">
            {{ detailsPlanNum.remarks }}
          </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/cost-allocation-total/tabs.vue' // tabs组件

import mainTableExpenseCNYModal from '@views/cost-allocation-total/modal/mainTableExpenseCNYModal.vue'
import mainTableExpenseUSDModal from '@views/cost-allocation-total/modal/mainTableExpenseUSDModal.vue'
import accidentListModal from '@views/cost-allocation-total/modal/accidentListModal.vue' // 事故单

import { costByPlanNum } from '@api/document/cost-allocation-total.js'

export default {
  name: 'CostDetailDrawer', // 详情抽屉
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, tabs, mainTableExpenseCNYModal, mainTableExpenseUSDModal, accidentListModal },

  data() {
    return {
      loading: false, // 表格加载
      detailsPlanNum: {}, //详情所有数据
      remarks: '', // 备注

      // 事故单 表头
      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: [],

      // 费用支出 表头
      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,
      record: {} //点击的计划单号
    }
  },
  created() {
    this.getALLDetail()
  },
  methods: {
    // 详情所有数据
    getALLDetail() {
      this.$nextTick(() => {
        // console.log('详情拿到planNum', this.record.planNum)
        costByPlanNum({ plannum: this.record.planNum, type: 'query' }).then(res => {
          if (res.success) {
            this.detailsPlanNum = res.result //所有详情
            this.accidentListData = res.result.syCostAllocationAccidentList //事故单
            this.costPayData = res.result.syCostAllocationCostpayList //支出费用

            // tabs 名称集合
            this.$refs.unitTabs.tabNameList = res.result.processUnit.split(',')

            //所有tabs数据
            this.$refs.unitTabs.tabsAllData = res.result.processUnitList

            // 页面打开加载的数据
            var oneData = this.$refs.unitTabs.tabsAllData[0]
            this.$refs.unitTabs.fabData = oneData.syCostAllocationFabricList
            this.$refs.unitTabs.ingData = oneData.syCostAllocationIngredientList
            this.$refs.unitTabs.shipData = oneData.syCostAllocationShipdetailList

            this.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }
        })
      })
    },

    //  主表：人民币费用支出  弹框
    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
          }
        }
      }
    },

    onClose() {
      this.visible = false
    },

    // --------------------------------------------------
    // father 方法
    aa() {},
    bb() {},
    cc() {}
  }
}
</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;
// }

// 抽屉里的card样式
/deep/ .ant-drawer-content {
  background-color: #f0f2f5;
}
/deep/ .ant-drawer-body {
  padding: 10px;
}

// 回显label文字
/deep/.ant-form-item-label > label {
  font-weight: 700;
  color: #333;
}
</style>