sen-yu-new-web/src/views/book/detailsBookDrawer.vue

<template>
  <!-- 新增托书  -->
  <div id="addBookDrawer">
    <a-drawer
      title="详情"
      width="89%"
      placement="right"
      :closable="true"
      :visible="visible"
      @close="handleCancel">
      <!-- 主表信息 填写 为什么原先图部分回显？？-->
      <a-card :bordered="true">
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="form" :model="addBook" :rules="validatorRules">
           <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-model-item label="托书日期" prop="shippingOrderDate">
                  {{addBook.shippingOrderDate}}
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="托书号" prop="shippingOrderNumber">
                  {{addBook.shippingOrderNumber}}
                  
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="经营单位" prop="unitInOperation">
                  {{addBook.unitInOperation}}
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="经营单位地址" prop="unitInOperationAddress">
                  {{addBook.unitInOperationAddress | ellipsis}}
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="装运期限" prop="latestDateOfShipment">
                  {{addBook.latestDateOfShipment}}
                </a-form-model-item>
              </a-col>


              <a-col :md="6" :sm="8">
                <a-form-model-item label="最终船期" prop="theFinalShippingDate">
                  {{addBook.theFinalShippingDate}}
                 
                </a-form-model-item>
              </a-col>

               <a-col :md="6" :sm="8">
                <a-form-model-item label="运抵国别" prop="arriveInCountry">
                  {{addBook.arriveInCountry}}
                  <!-- <a-input placeholder="请输入运抵国别" v-model="addBook.arriveInCountry"></a-input> -->
                </a-form-model-item>
              </a-col>

              
              <a-col :md="6" :sm="8">
                <a-form-model-item label="贸易国别" prop="tradeCountry">
                  {{addBook.tradeCountry}}
                  <!-- <a-input placeholder="请输入贸易国别" v-model="addBook.tradeCountry"></a-input> -->
                </a-form-model-item>
              </a-col>

               <a-col :md="6" :sm="8">
                <a-form-model-item label="收货人" prop="consignee">
                  {{addBook.consignee | ellipsis}}
                
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="收货人地址" prop="consigneeAddress">
                  {{addBook.consigneeAddress | ellipsis}}
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="通知方" prop="notifyParty">
                  {{addBook.notifyParty}}
              
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="通知方地址" prop="notifyPartyAddress">
                  {{addBook.notifyPartyAddress}}
              
                </a-form-model-item>
              </a-col>


             
              <a-col :md="6" :sm="8">
                <a-form-model-item label="出口口岸" prop="exportPort">
                  {{addBook.exportPort}}
                    
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="目的港" prop="destinationPort">
                  {{addBook.destinationPort}}
                  
                  <!-- <a-input placeholder="请输入目的港" v-model="addBook.destinationPort"></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="收汇方式" prop="exchangeEarningsValue">
                  {{addBook.exchangeEarningsValue}}
                   
                  <!-- <a-input placeholder="请输入收汇方式" v-model="addBook.exchangeEarningsValue"></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="成交方式" prop="termsOfDeliveryvalue">
                  {{addBook.termsOfDeliveryvalue}}
               
                  <!-- <a-input placeholder="请输入成交方式" v-model="addBook.termsOfDeliveryvalue"></a-input> -->
                </a-form-model-item>
              </a-col>

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="金额" prop="money">
                  {{addBook.money}}
                 
                </a-form-model-item>
              </a-col> -->

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="人民币" prop="cny">
                  {{addBook.cny}}
                 
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="美元" prop="usd">
                    {{addBook.usd}}
                  
                </a-form-model-item>
              </a-col> -->
            </a-row>
          </a-form-model>
        </div>
      </a-card>

      <!--操作按钮区域 参照装箱单  増行-->
      <a-card :bordered="true" style="margin:10px 0  40px 0;">
        <!-- 子表-->
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="formRef" :rules="validatorRules">
            <a-table
              bordered
              :row-key="record => record.id"
              :columns="addBookColumns"
              :data-source="addBookData"
              :loading="loading"
              :pagination="false"
              :scroll="{ x: 1500,y: 350 }"
              @change="handleTableChange"
            >
            </a-table>
            <div class="amount">
               <span class="all">总数量：{{ allMount.toFixed(2) }}</span>
               <span class="all">总箱数：{{ allBox.toFixed(2) }}</span>
               <span class="all">总毛重：{{ allGross.toFixed(2) }}</span>
               <span class="all">总净重：{{ allNet.toFixed(2) }}</span>
               <span class="all">总金额：{{ allMoney.toFixed(2) }}</span>
               <span class="all">总体积：{{ allVloum.toFixed(3) }}</span>
             </div>
          </a-form-model>
          
          <!-- 人民币、美金 -->
          <a-row style="margin:60px 0;">
            <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
              <h6 class="table-title">人民币</h6>
              <a-table
                :row-key="record => record.id"
                :loading="loading"
                :columns="CNYColumns"
                :scroll="{ y: 200 }"
                :data-source="rmbList"
                bordered
                :pagination="false"
              >
             <template slot="CNYfreighForward" slot-scope="text, record, index">
                <a-form-model-item prop="CNYfreighForward" :rules="rules.CNYfreighForward" >
                  <a-input placeholder="请输入货代" v-model="record.freightForwarder" />
                </a-form-model-item>
              </template>
              <template slot="CNYmoney" slot-scope="text, record, index">
                <a-form-model-item prop="CNYmoney" :rules="rules.CNYmoney" >
                  <a-input placeholder="请输入金额" v-model="record.amount" />
                </a-form-model-item>
                </template>
                <!-- CNY项目列 -->
                <template slot="CNYProjectList" slot-scope="text, record, index">
                  <a-form-model-item prop="CNYProjectList" :rules="rules.CNYProjectList">
                    <a-select v-model="record.itemColumn" style="width:100%" placeholder="请输入项目列" >
                      <a-select-option value="1">项目列1</a-select-option>
                      <a-select-option value="2">项目列2</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </template>
              </a-table>
            </div>

            <div class="purchase-order-table" style="width:48%;float:right;">
              <h6 class="table-title">美金</h6>
              <a-table
                :row-key="record => record.id"
                :loading="loading"
                :columns="USDColumns"
                :data-source="usdList"
                :scroll="{ y: 200 }"
                bordered
                :pagination="false"
              >
               <template slot="USDfreighForward" slot-scope="text, record, index">
                <a-form-model-item prop="USDfreighForward" :rules="rules.USDfreighForward" >
                 <a-input placeholder="请输入货代" v-model="record.freightForwarder" />
                </a-form-model-item>
              </template>
              <template slot="USDmoney" slot-scope="text, record, index">
                <a-form-model-item prop="USDmoney" :rules="rules.USDmoney" >
                  <a-input placeholder="请输入金额" v-model="record.amount" />
                </a-form-model-item>
              </template>
                <!-- USD项目列 -->
                <template slot="USDProjectList" slot-scope="text, record, index">
                  <a-form-model-item prop="USDProjectList" :rules="rules.USDProjectList">
                    <a-select v-model="record.itemColumn" style="width:100%" >
                      <a-select-option value="1">项目列1</a-select-option>
                      <a-select-option value="2">项目列2</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </template>
              </a-table>
            </div>
          </a-row>
          <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="推送成功单据"  prop="accessory">
              <ul v-for="(item, index) in timeMesage" :key="index" >
                <li>{{ item }} </li>
              </ul>
            </a-form-model-item>
        </a-col>
        <a-col :span="12">
            <a-form-model-item label="失败信息"  prop="accessory">
              <span>{{ addBook.failMesage }}</span>
            </a-form-model-item>
        </a-col>
        </a-row>
        </a-spin>
      </a-card>

      <!-- 页面底部保存取消 -->
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 999
        }"
      >
          <!-- <a-button :style="{ marginRight: '8px' }" @click="handleCancel">关闭</a-button>
          <a-button type="primary" :style="{ marginRight: '8px' }" @click="editMoney" :disabled="disabled">保存</a-button> -->

      </div>
    </a-drawer>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'
import {editMoney} from '@api/document/book.js'

export default {
  name: 'AddBookDrawer', // 新增 托书
  mixins: [JeecgListMixin],
  components: {  JEllipsis, moment }, // 参照装箱单 弹框
  data() {
    let ellipsis = (v, l = 15) => <j-ellipsis value={v} length={l} />
    return {
      disabled:true,
      timeMesage:[],
      // 表头
      addBookColumns: [
        {
          title: '款号',
          dataIndex: 'styleNumber',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
         {
          title: '小po',
          dataIndex: 'smailPo',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '数量',
          dataIndex: 'number',
          width: 100,
          ellipsis: true,
          className: 'replacecolor'
        },
         {
          title: '箱数',
          dataIndex: 'boxNumber',
          width: 100,
          ellipsis: true,
          className: 'replacecolor'
        },
         {
          title: '毛重',
          dataIndex: 'grossWeight',
          width: 100,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '净重',
          dataIndex: 'netWeight',
          width: 100,
          ellipsis: true,
          // scopedSlots: { customRender: 'containerCode' },
          className: 'replacecolor'
        },
        {
          title: '体积',
          dataIndex: 'volume',
          width: 100,
          ellipsis: true,
          // scopedSlots: { customRender: 'containerNo' },
          // className: 'replacecolor'
        },
        {
          title: '分销点',
          dataIndex: 'distributionPoint',
          width: 100,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '集装箱号',
          dataIndex: 'containerNumber',
          ellipsis: true,
          scopedSlots: { customRender: 'containerNumber' },
          width: 100,
          // fixed: 'left',
          className: 'replacecolor'
        },
        //   {
        //   title: '集装箱代号',
        //   dataIndex: 'containerCode',
        //   scopedSlots: { customRender: 'containerCode' },
        //   width: 120,
        //   ellipsis: true,
        //   className: 'replacecolor'
        // },
          {
          title: '单价',
          dataIndex: 'unitPrice',
          width: 100,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '金额',
          dataIndex: 'totalPrice',
          width: 100,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '净价总金额',
          dataIndex: 'totalNetPrice',
          width: 120,
           ellipsis: true,
          className: 'replacecolor'
        },
         {
          title: '制单人',
          dataIndex: 'createBy',
          width: 120,
          ellipsis: true,
          // fixed: 'left',
          className: 'replacecolor'
        },
           {
          title: '采购/委外订单号',
          dataIndex: 'purOrSubOrder',
          width: 160,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '英文名称',
          dataIndex: 'englishName',
          width: 160,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '业务员',
          dataIndex: 'salesman',
          width: 160,
          ellipsis: true,
          className: 'replacecolor'
        },
      ],
      addBookData: [],
      CNYColumns: [
        {
          title: '货代',
          dataIndex: 'freightForwarderName',
          width: 60,
          className: 'replacecolor',
          //scopedSlots: { customRender: 'CNYfreighForward' },
        },
        {
          title: '金额',
          dataIndex: 'amount',
          width: 60,
          className: 'replacecolor',
          //scopedSlots: { customRender: 'CNYmoney' },
        },
        {
          title: '项目列',
          dataIndex: 'itemColumnName',
         // scopedSlots: { customRender: 'CNYProjectList' },
          width: 60,
          className: 'replacecolor'
        }
      ],
      rmbList: [{}],
      USDColumns: [
        {
          title: '货代',
          dataIndex: 'freightForwarderName',
         // scopedSlots: { customRender: 'USDfreighForward' },
          width: 60,
          className: 'replacecolor'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          //scopedSlots: { customRender: 'USDmoney' },
          width: 60,
          className: 'replacecolor'
        },
        {
          title: '项目列',
          dataIndex: 'itemColumnName',
          width: 60,
          //scopedSlots: { customRender: 'USDProjectList' },
          className: 'replacecolor'
        }
      ],
      usdList: [{}],
      loading: false, // 表格加载
      addBook: {},
      confirmLoading: false,
      visible: false,
      dateFormat: 'YYYY-MM-DD',
      allMount:0,
      allGross:0,
      allNet:0,
      allMoney:0,
      allVloum:0,
      allBox:0,
      validatorRules: {
          shippingOrderDate:[{required: true, message: '托书日期不能为空!'}],
          consignee:[{required: true, message: '收货人不能为空!'}],
          shippingOrderNumber:[{required: true, message: '预托书号不能为空!'}],
      }
    }
  },
  created() {},
  watch: {
    addBookData(val) {
      this.allGross = 0
      this.allMoney = 0
      this.allMount = 0
      this.allNet = 0
      this.allBox = 0
        val.map(item=>{
          this.allGross+=Number(item.grossWeight)
          this.allMoney+=Number(item.totalPrice)
          this.allMount+=Number(item.number)
          this.allNet+=Number(item.netWeight)
          this.allBox += Number(item.boxNumber)
        })
        this.getTotalVolumn()
      }
    },
   filters: {
                //文字数超出时，超出部分使用...
                ellipsis(value) {
                    if (!value) return ''
                    if (value.length > 20) {
                        return value.slice(0, 30) + '...'
                    }
                    return value
                }
            },
  methods: {

    //  // 新增托书 子表合计
    // addBookFooterShow(data) {
    //   console.log('新增托书 子表 ----合计行')
    //   console.log('data', data)
    //   return (
    //     <a-table
    //       rowKey={Math.random}
    //       bordered={false}
    //       pagination={false}
    //       columns={this.addBookColumns}
    //       dataSource={this.addBookFooterDataSource || []}
    //       showHeader={false}
    //     ></a-table>
    //   )
    // },
    getTotalVolumn(){
      this.allVloum = 0
      var containerNumberArr = [],
          readyFabricArr = []
      // var headData = JSON.parse(JSON.stringify(this.addBook));
      var    vol = 0
      for (var i=0; i<this.addBookData.length; i++){
        var rowData = this.addBookData[i];
        if(rowData.readyFabric == '面料'){
          containerNumberArr.push(rowData.containerNumber)
          readyFabricArr.push(rowData.readyFabric)
        }
        if (rowData.volume != undefined && rowData.volume != ""){
          vol += rowData.volume*1;
        }
      }
       var totalVolume = parseFloat(vol.toFixed(4));
      containerNumberArr = [...new Set(containerNumberArr)]
      readyFabricArr = [...new Set(readyFabricArr)]
      if(readyFabricArr.length == 1 && readyFabricArr[0] == '面料'){
        totalVolume = (containerNumberArr.length)*68;
      }
      this.allVloum = totalVolume
    },
    
    // 抽屉 取消
    handleCancel() {
      console.log('点击抽屉取消')
      this.close()
    },

    editMoney(){
      var param = {
        id:this.addBook.id
      }
       param.rmbList = this.rmbList
       param.usdList = this.usdList
        editMoney(param).then(res => {
          if (res.success) {
            this.$message.success('修改成功')
           this.close()
          }else {
             this.$message.error(res.message);
          }
        })
    },

    close() {
      this.$emit('close')
      this.addBook ={}
      this.addBookData =[]
      this.rmbList = []
      this.usdList = []
      this.visible = false
    },

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

// 抽屉里的card样式
/deep/ .ant-drawer-content {
  background-color: #f0f2f5;
}
/deep/ .ant-drawer-body {
  padding: 10px;
}
/deep/ .ant-table-footer .ant-table.body {
  // overflow: hidden !important;
}
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
  border: none;
  padding: 0;
}
// /deep/.ant-form{
//   position: relative;
// }
.amount{
  // position:absolute;
  // bottom: 2%;
  width: 50%;
}
.all{
  margin-right: 4%;
}
</style>