tire-platform-ui/src/views/iosBasicData/SeafreightExportF/bills/assembly/feecenter.vue

<template>
    <div>
        <div>
            <el-form :model="assemblyForm" ref="form" label-width="90px" style="margin-bottom: 4px" class="demo-ruleForm">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="客户名称" prop="corpCnName" >
                            <span slot="label">
                                <span style="color: #1e9fff">客户名称</span>
                            </span>
                            <el-input type="age" style="width: 100%;" v-model="assemblyForm.corpCnName"
                                      size="small" autocomplete="off"
                                      disabled
                                      clearable placeholder="客户名称" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="MB/L NO" prop="mblno" >
                            <span slot="label">
                                <span style="color: #1e9fff">MB/L NO</span>
                            </span>
                            <el-input type="age" style="width: 100%;" v-model="assemblyForm.mblno"
                                      size="small" autocomplete="off"
                                      disabled
                                      clearable placeholder="MB/L NO" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="HB/L NO" prop="hblno" >
                            <span slot="label">
                                <span style="color: #1e9fff">HB/L NO</span>
                            </span>
                            <el-input type="age" style="width: 100%;" v-model="assemblyForm.hblno"
                                      size="small" autocomplete="off"
                                      disabled
                                      clearable placeholder="MB/L NO" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="船名" prop="vesselCnName" >
                            <span slot="label">
                                <span style="color: #1e9fff">船名</span>
                            </span>
                            <el-input type="age" style="width: 100%;" v-model="assemblyForm.vesselCnName"
                                      size="small" autocomplete="off"
                                      disabled
                                      clearable placeholder="船名" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="航次" prop="voyageNo" >
                            <span slot="label">
                                <span style="color: #1e9fff">航次</span>
                            </span>
                            <el-input type="age" style="width: 100%;" v-model="assemblyForm.voyageNo"
                                      size="small" autocomplete="off"
                                      disabled
                                      clearable placeholder="航次" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="ETD" prop="etd" >
                            <el-input type="age" style="width: 100%;" v-model="assemblyForm.etd"
                                      size="small" autocomplete="off"
                                      disabled
                                      clearable placeholder="ETD" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="箱型箱量" prop="quantityCntrDescr" >
                            <span slot="label">
                                <span style="color: #1e9fff">箱型箱量</span>
                            </span>
                            <el-input type="age" style="width: 100%;" v-model="assemblyForm.quantityCntrDescr"
                                      size="small" autocomplete="off"
                                      disabled
                                      clearable placeholder="箱型箱量" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>


        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="disabledBox fontSize">
                        <i class="el-icon-coin"></i>
                        <span>应收费用</span>
                    </div>
                </el-col>
                <!--<el-col :span="6">-->
                <!--    <div class="disabledBox">-->
                <!--        <span style="font-size: 14px;margin-right: 5px">签单方式</span>-->
                <!--        <el-select v-model="value" placeholder="请选择" size="small" >-->
                <!--            <el-option-->
                <!--                v-for="item in issuetypefData"-->
                <!--                :key="item.dictKey"-->
                <!--                :label="item.dictValue"-->
                <!--                :value="item.dictValue">-->
                <!--            </el-option>-->
                <!--        </el-select>-->
                <!--    </div>-->
                <!--</el-col>-->
                <el-col :span="15">
                    <el-button type="danger" plain size="small"
                               :disabled="!selectionDList.length" @click="batchDelete('D')">批量删除</el-button>
                    <el-button type="success" plain size="small">应收账单</el-button>
                    <el-button type="primary" plain size="small">应付账单</el-button>
                    <el-button type="primary" plain size="small">打印账单</el-button>
                    <el-button type="success" plain size="small" :disabled="!this.assemblyForm.id" @click="templateClick('D')">应收模板</el-button>
                </el-col>
            </el-row>
            <div style="margin-top: 10px">
                <el-table
                    :row-style="{height:'20px',padding:'0px',fontSize:'12px'}"
                    :cell-style="{padding:'0px',fontSize:'12px'}"
                    :header-cell-style="tableHeaderCellStyle"
                    :data="assemblyForm.feeCenterListD"
                    @selection-change="handleSelectionChange($event,'D')"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        fixed="left"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        type="index"
                        align="center"
                        width="60">
                        <template slot="header" slot-scope="scope">
                            <el-button type="primary" size="small" icon="el-icon-plus" circle
                                       :disabled="detailData.seeDisabled" @click="addDfun"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="corpCnName"
                        header-align="center"
                        label="单位" width="160px">
                        <template slot-scope="{ row }">
                            <search-query v-if="row.edit"
                                          :datalist="corpCnNameData"
                                          :selectValue="row.corpCnName"
                                          :filterable="true"
                                          :clearable="true"
                                          :remote="true"
                                          :buttonIf="false"
                                          :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                          @remoteMethod="getBcorpsListfun($event,'corpCnName')"
                                          @corpChange="corpChange($event,'corpCnName',row)"
                                          @corpFocus="getBcorpsListfun($event,'corpCnName')" >
                            </search-query>
                            <span v-else>{{row.corpCnName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="feeCnName"
                        header-align="center"
                        label="费用简称" width="160px">
                        <template slot-scope="{ row }">
                            <search-query v-if="row.edit"
                                          :datalist="feeCnNameData"
                                          :selectValue="row.feeCnName"
                                          :filterable="true"
                                          :clearable="true"
                                          :remote="true"
                                          :buttonIf="false"
                                          :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                          @remoteMethod="bfeesListfun($event,'feeCnName')"
                                          @corpChange="corpChange($event,'feeCnName',row)"
                                          @corpFocus="bfeesListfun($event,'feeCnName')" >
                            </search-query>
                            <span v-else>{{row.feeCnName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="paymode"
                        header-align="center"
                        label="预付/到付" width="120px">
                        <template slot-scope="{ row }">
                            <el-select v-if="row.edit" v-model="row.paymode" placeholder="请选择">
                                <el-option
                                    v-for="item in paymodeData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <span v-else>{{paymodefun(row.paymode)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="unitNo"
                        header-align="center"
                        label="计量单位" width="120px">
                        <template slot-scope="{ row }">
                            <search-query v-if="row.edit"
                                          :datalist="unitNoData"
                                          :selectValue="row.unitNo"
                                          :filterable="true"
                                          :clearable="true"
                                          :remote="true"
                                          :buttonIf="false"
                                          :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                          @remoteMethod="getBunitsPagefun($event,'unitNo')"
                                          @corpChange="corpChange($event,'unitNo',row)"
                                          @corpFocus="getBunitsPagefun($event,'unitNo')" >
                            </search-query>
                            <span v-else>{{row.unitNo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="curCode"
                        header-align="center"
                        label="币种" width="120px">
                        <template slot-scope="{ row }">
                            <search-query v-if="row.edit"
                                          :datalist="curCodeData"
                                          :selectValue="row.curCode"
                                          :filterable="true"
                                          :clearable="true"
                                          :remote="true"
                                          :buttonIf="false"
                                          :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                          @remoteMethod="getRateListfun($event,'curCode')"
                                          @corpChange="corpChange($event,'curCode',row)"
                                          @corpFocus="getRateListfun($event,'curCode')" >
                            </search-query>
                            <span v-else>{{row.curCode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        header-align="center"
                        label="单价" width="120px">
                        <template slot-scope="{ row }">
                            <el-input v-if="row.edit" type="number" v-model="row.price" size="small"
                                      placeholder="请输入" @blur="priceinputfun($event,row)"></el-input>
                            <span v-else>{{row.price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="quantity"
                        header-align="center"
                        label="数量" width="120px" >
                        <template slot-scope="{ row }">
                            <el-input v-if="row.edit" type="number" v-model="row.quantity" size="small"
                                      placeholder="请输入" @blur="quantityinputfun(row)"></el-input>
                            <span v-else>{{row.quantity}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="rmbAmount"
                        header-align="center"
                        label="CNY(含税)" width="100px">
                    </el-table-column>
                    <el-table-column
                        prop="usdAmount"
                        header-align="center"
                        label="USD(含税)" width="100px">
                    </el-table-column>
                    <el-table-column
                        prop="exrate"
                        header-align="center"
                        label="对CNY汇率" width="100px">
                    </el-table-column>
                    <el-table-column
                        prop="payplace"
                        header-align="center"
                        label="预付地址">
                        <template slot-scope="{ row }">
                            <el-input v-if="row.edit" v-model="row.payplace" size="small"
                                      placeholder="请输入" ></el-input>
                            <span v-else>{{row.payplace}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="remarks"
                        header-align="center"
                        label="备注">
                        <template slot-scope="{ row }">
                            <el-input v-if="row.edit" v-model="row.remarks" size="small"
                                      placeholder="请输入" ></el-input>
                            <span v-else>{{row.remarks}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        header-align="center"
                        width="100">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.edit" type="text" size="small" @click="savefun(scope.row,scope.$index,'D')">保存</el-button>
                            <el-button v-else type="text" size="small" @click="editDfun(scope.row,scope.$index)">编辑</el-button>
                            <el-button type="text" size="small" @click="deletefun(scope.row,scope.$index,'D')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-card class="box-card" style="margin: 20px 0">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="disabledBox meetSize">
                        <i class="el-icon-coin"></i>
                        <span>应付费用</span>
                    </div>
                </el-col>
                <el-col :span="15">
                    <el-button type="danger" plain size="small"
                               :disabled="!selectionCList.length" @click="batchDelete('C')">批量删除</el-button>
                    <el-button type="success" plain size="small" :disabled="!this.assemblyForm.id" @click="templateClick('C')">应付模板</el-button>
                </el-col>
            </el-row>
            <div style="margin-top: 10px">
                <el-table
                    :row-style="{height:'20px',padding:'0px',fontSize:'12px'}"
                    :cell-style="{padding:'0px',fontSize:'12px'}"
                    :header-cell-style="tableHeaderCellStyle"
                    :data="assemblyForm.feeCenterListC"
                    @selection-change="handleSelectionChange($event,'C')"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        fixed="left"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        type="index"
                        align="center"
                        width="60">
                        <template slot="header" slot-scope="scope">
                            <el-button type="primary" size="small" icon="el-icon-plus" circle
                                       :disabled="detailData.seeDisabled" @click="addCfun"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="corpCnName"
                        label="单位" width="160px"
                        header-align="center">
                        <template slot-scope="{ row }">
                            <search-query v-if="row.edit"
                                          :datalist="corpCnNameData"
                                          :selectValue="row.corpCnName"
                                          :filterable="true"
                                          :clearable="true"
                                          :remote="true"
                                          :buttonIf="false"
                                          :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                          @remoteMethod="getBcorpsListfun($event,'corpCnName')"
                                          @corpChange="corpChange($event,'corpCnName',row)"
                                          @corpFocus="getBcorpsListfun($event,'corpCnName')"  >
                            </search-query>
                            <span v-else>{{row.corpCnName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="feeCnName"
                        label="费用简称" width="160px"
                        header-align="center">
                        <template slot-scope="{ row }">
                            <search-query v-if="row.edit"
                                          :datalist="feeCnNameData"
                                          :selectValue="row.feeCnName"
                                          :filterable="true"
                                          :clearable="true"
                                          :remote="true"
                                          :buttonIf="false"
                                          :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                          @remoteMethod="bfeesListfun($event,'feeCnName')"
                                          @corpChange="corpChange($event,'feeCnName',row)"
                                          @corpFocus="bfeesListfun($event,'feeCnName')" >
                            </search-query>
                            <span v-else>{{row.feeCnName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="paymode"
                        label="预付/到付" width="120px"
                        header-align="center">
                        <template slot-scope="{ row }">
                            <el-select v-if="row.edit" v-model="row.paymode" placeholder="请选择">
                                <el-option
                                    v-for="item in paymodeData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <span v-else>{{paymodefun(row.paymode)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="unitNo"
                        label="计量单位" width="120px"
                        header-align="center">
                        <template slot-scope="{ row }">
                            <search-query v-if="row.edit"
                                          :datalist="unitNoData"
                                          :selectValue="row.unitNo"
                                          :filterable="true"
                                          :clearable="true"
                                          :remote="true"
                                          :buttonIf="false"
                                          :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                          @remoteMethod="getBunitsPagefun($event,'unitNo')"
                                          @corpChange="corpChange($event,'unitNo',row)"
                                          @corpFocus="getBunitsPagefun($event,'unitNo')" >
                            </search-query>
                            <span v-else>{{row.unitNo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="curCode"
                        label="币种" width="120px"
                        header-align="center">
                        <template slot-scope="{ row }">
                            <search-query v-if="row.edit"
                                          :datalist="curCodeData"
                                          :selectValue="row.curCode"
                                          :filterable="true"
                                          :clearable="true"
                                          :remote="true"
                                          :buttonIf="false"
                                          :forParameter="{key:'id',label:'code',value:'code'}"
                                          @remoteMethod="getRateListfun($event,'curCode')"
                                          @corpChange="corpChange($event,'curCode',row)"
                                          @corpFocus="getRateListfun($event,'curCode')">
                            </search-query>
                            <span v-else>{{row.curCode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        label="单价" width="120px"
                        header-align="center">
                        <template slot-scope="{ row }">
                            <el-input v-if="row.edit" type="number" v-model="row.price" size="small"
                                      placeholder="请输入" @blur="priceinputfun($event,row)"></el-input>
                            <span v-else>{{row.price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="quantity"
                        label="数量" width="120px"
                        header-align="center">
                        <template slot-scope="{ row }">
                            <el-input v-if="row.edit" type="number" v-model="row.quantity" size="small"
                                      placeholder="请输入" @blur="quantityinputfun(row)"></el-input>
                            <span v-else>{{row.quantity}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="rmbAmount"
                        label="CNY(含税)" width="100px"
                        header-align="center">
                    </el-table-column>
                    <el-table-column
                        prop="usdAmount"
                        label="USD(含税)" width="100px"
                        header-align="center">
                    </el-table-column>
                    <el-table-column
                        prop="exrate"
                        label="对CNY汇率" width="100px"
                        header-align="center">
                    </el-table-column>
                    <el-table-column
                        prop="payplace"
                        label="预付地址"
                        header-align="center">
                        <template slot-scope="{ row }">
                            <el-input v-if="row.edit" v-model="row.payplace" size="small"
                                      placeholder="请输入" ></el-input>
                            <span v-else>{{row.payplace}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="remarks"
                        label="备注" header-align="center">
                        <template slot-scope="{ row }">
                            <el-input v-if="row.edit" v-model="row.remarks" size="small"
                                      placeholder="请输入" ></el-input>
                            <span v-else>{{row.remarks}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        header-align="center"
                        width="100">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.edit" type="text" size="small" @click="savefun(scope.row,scope.$index,'C')">保存</el-button>
                            <el-button v-else type="text" size="small" @click="editCfun(scope.row,scope.$index)">编辑</el-button>
                            <el-button type="text" size="small" @click="deletefun(scope.row,scope.$index,'C')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <div style="display: flex;align-items: center;justify-content: space-around">
            <div style="width: 30%">
                <el-card class="box-card">
                    <div class="bottomFlex" style="justify-content: space-around">
                        <div style="text-align: center">
                            <div class="weightfont">¥</div>
                            <div>CNY</div>
                        </div>
                        <div>
                            <div style="color: #81B337">
                                <span>应收:</span>
                                <span class="weightnum">¥{{assemblyForm.amountDr}}元</span>
                            </div>
                            <div style="color: #6BBCD1">
                                <span>应付:</span>
                                <span class="weightnum">¥{{assemblyForm.amountCr}}元</span>
                            </div>
                        </div>
                        <div class="bottomFlex">
                            <span>利润</span>
                            <span>¥{{assemblyForm.amountProfit}}元</span>
                        </div>
                    </div>
                </el-card>
            </div>
            <div style="width: 30%">
                <el-card class="box-card">
                    <div class="bottomFlex" style="justify-content: space-around">
                        <div style="text-align: center">
                            <div class="weightfont">$</div>
                            <div>USD</div>
                        </div>
                        <div>
                            <div style="color: #81B337">
                                <span>应收:</span>
                                <span class="weightnum">${{assemblyForm.amountDrUsd}}元</span>
                            </div>
                            <div style="color: #6BBCD1">
                                <span>应付:</span>
                                <span class="weightnum">${{assemblyForm.amountCrUsd}}元</span>
                            </div>
                        </div>
                        <div class="bottomFlex">
                            <span>利润</span>
                            <span>${{assemblyForm.amountProfitUsd}}元</span>
                        </div>
                    </div>
                </el-card>
            </div>
            <div style="width: 30%">
                <el-card class="box-card">
                    <div class="bottomFlex" style="justify-content: space-around">
                        <div style="text-align: center">
                            <div class="weightfont">¥</div>
                            <div>CNY合计</div>
                        </div>
                        <div>
                            <div style="color: #81B337">
                                <span>应收:</span>
                                <span class="weightnum">¥{{assemblyForm.amountDrLoc}}元</span>
                            </div>
                            <div style="color: #6BBCD1">
                                <span>应付:</span>
                                <span class="weightnum">¥{{assemblyForm.amountCrLoc}}元</span>
                            </div>
                        </div>
                        <div class="bottomFlex">
                            <span>利润</span>
                            <span>¥{{assemblyForm.amountProfitLoc}}元</span>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>

        <!--模板弹窗-->
        <el-dialog
            title="提示"
            :visible.sync="templateVisible"
            append-to-body
            width="70%"
            :before-close="handleClose">
            <div>
                <el-row>
                    <el-col :span="5">
                        <div class="box">
                            <el-scrollbar>
                                <basic-container>
                                    <avue-tree :option="treeOption" :data="templateData" @node-click="nodeClick">
                                    </avue-tree>
                                </basic-container>
                            </el-scrollbar>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <basic-container>
                            <avue-crud :option="templateOption"
                                       :data="templateRightData"
                                       @selection-change="feeselectionChange">
                            </avue-crud>
                        </basic-container>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="templateVisible = false">取 消</el-button>
                <el-button type="primary" @click="templateExport">导 入</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
    import {getBcorpsList} from "@/api/iosBasicData/bcorps";
    import {bfeesList} from "@/api/iosBasicData/bfees";
    import {getBunitsPage} from "@/api/iosBasicData/bunits";
    import {getRateList} from "@/api/iosBasicData/rateManagement";
    import {feecenterList, feecenterRemove, feecenterSubmit} from "@/api/iosBasicData/feecenter";
    import {getWorkDicts} from "@/api/system/dictbiz";
    import {feecenterTemplateImport, losbfeestemplateGetListTemplate} from "@/api/iosBasicData/bills";
    import {losbfeestemplateDetail} from "@/api/iosBasicData/losbfeestemplate";
    import {requiredMessage} from "@/util/messageReminder";

    export default {
        components: {SearchQuery},
        props:{
            pid:{

            },
            assemblyForm:{
                type:Object
            },
            detailData:{},
        },
        data(){
            return {
                // 签单方式
                issuetypefData:[],
                value:'',
                feeCenterListD:[], // 收
                feeCenterListC:[], // 付
                // 客户数据
                corpCnNameData:[],
                // 费用数据
                feeCnNameData:[],
                // 预付到付数据
                paymodeData:[
                    {
                        label:'预付',
                        value:'PP'
                    },
                    {
                        label:'到付',
                        value:'CC'
                    }
                ],
                // 计算单位数据
                unitNoData:[],
                // 币别数据
                curCodeData:[],
                // 模板弹窗
                templateVisible:false,

                treeOption: {
                    nodeKey: "id",
                    // lazy: true,
                    addBtn: false,
                    menu: false,
                    size: "small",
                    props: {
                        labelText: "标题",
                        label: "cnName",
                        value: "value",
                        children: "children"
                    }
                },
                // 右侧详情数据
                templateRightData:[],
                templateOption:{
                    menu:false,
                    stripe:true,
                    addBtn:false,
                    editBtn:false,
                    delBtn:false,
                    viewBtn:false,
                    index:true,
                    selection:true,
                    column:[
                        {
                            label: '客户',
                            prop:'curCode'
                        },
                        {
                            label: '费用',
                            prop:'feeCnName'
                        },
                        {
                            label: '数量',
                            prop:'quantity'
                        },
                        {
                            label: '单价',
                            prop:'price'
                        },
                        {
                            label: '计量单位',
                            prop:'unitNo'
                        },
                        {
                            label: '币别',
                            prop:'curCode'
                        }
                    ]
                },
                // 左侧数据
                templateData:[],
                lefttemplate:{}, // 左侧选择的数据
                // 选中的数据
                feesselectionList:[],
                selectionDList:[], // 收选择的
                selectionCList:[], // 付选择的
                // 需要加判断是否必填的数据
                messageData:[
                    {
                        name:'客户',
                        value:'corpCnName',
                    },
                    {
                        name:'业务来源',
                        value:'srcType',
                    },
                    {
                        name:'MBLNO',
                        value:'mblno',
                    },
                    {
                        name:'HBLNO',
                        value:'hblno',
                    },
                    {
                        name:'booking NO',
                        value:'bookingNo',
                    },
                    {
                        name:'外提单号',
                        value:'refno',
                    },
                    {
                        name:'船名(VSL)',
                        value:'vesselCnName',
                    },
                    {
                        name:'航次(VOY)',
                        value:'voyageNo',
                    },
                    {
                        name:'ETD',
                        value:'etd',
                    },
                    {
                        name:'装货港',
                        value:'polCnName',
                    },
                    {
                        name:'目的港',
                        value:'destinationNamePrint',
                    },
                    {
                        name:'包装单位',
                        value:'packingUnit',
                    },
                    {
                        name:'船公司',
                        value:'carrierCnName',
                    },
                    {
                        name:'场站',
                        value:'cyCnName',
                    },
                ],

            }
        },
        created() {
        },
        methods:{
            // 模板导入
            templateExport(){
                if (this.feesselectionList.length > 0) {
                    feecenterTemplateImport({
                        ...this.lefttemplate,
                        feesTemplateItemsList:this.feesselectionList,
                        billNoId:this.assemblyForm.id
                    }).then(res=>{
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.$emit('billsDetailfun')
                        this.templateVisible = false
                    })
                }else {
                    this.$message.warning('请先选择要导入的数据')
                }
            },
            // 模板
            templateClick(dc){
                this.templateVisible = true
                losbfeestemplateGetListTemplate(1,50,{
                    dc:dc,
                    status:0
                }).then(res=>{
                    this.templateData = res.data.data.records
                })
            },
            // 左侧选择
            nodeClick(e) {
                this.lefttemplate = e
                losbfeestemplateDetail(e.id).then(res=>{
                    this.templateRightData = res.data.data.feesTemplateItemsList
                })
            },
            // 右侧选择回调
            feeselectionChange(list) {
                this.feesselectionList = list;
            },
            // 应收新增
            addDfun(){
                if (!this.pid) {
                    this.$message({
                        message: '请先保存数据之后才能添加',
                        type: 'warning'
                    });
                    return
                }
                // 判断数据需要的数据是否有
                if (!requiredMessage(this.assemblyForm,this.messageData)) {
                    return;
                }
                this.assemblyForm.feeCenterListD.push({
                    edit:true
                })
            },
            // 应付新增
            addCfun(){
                if (!this.pid) {
                    this.$message({
                        message: '请先保存数据之后才能添加',
                        type: 'warning'
                    });
                    return
                }
                // 判断数据需要的数据是否有
                if (!requiredMessage(this.assemblyForm,this.messageData)) {
                    return;
                }
                this.assemblyForm.feeCenterListC.push({
                    edit:true
                })
            },
            // 应收编辑
            editDfun(row,index){
                this.$delete(this.assemblyForm.feeCenterListD[index], 'edit')
                this.$set(this.assemblyForm.feeCenterListD[index],'edit',true)
            },
            // 应付编辑
            editCfun(row,index){
                this.$delete(this.assemblyForm.feeCenterListC[index], 'edit')
                this.$set(this.assemblyForm.feeCenterListC[index],'edit',true)
            },
            // 应付应付保存
            savefun(row,index,dc){
                // 收付 D=收 C=付
                row.dc = dc
                row.pid = this.pid
                row.sort = index
                row.businessType = this.assemblyForm.businessType // 业务类型
                row.billType = this.assemblyForm.billType // 单据类型
                row.billNo = this.assemblyForm.billNo // 单据编号
                row.billDate = this.assemblyForm.billDate // 单据日期
                row.billCorpId = this.assemblyForm.corpId // 主表客户 id
                row.billCorpCnName = this.assemblyForm.corpCnName // 主表客户中文名称
                row.billCorpEnName = this.assemblyForm.corpEnName // 主表客户英文名称
                row.lineId = this.assemblyForm.lineId // 航线 id
                row.lineCnName = this.assemblyForm.lineCnName // 航线中文名称
                row.lineEnName = this.assemblyForm.lineEnName // 航线英文名称
                row.vesselId = this.assemblyForm.vesselId // 船名 id
                row.vesselCnName = this.assemblyForm.vesselCnName // 中文船名
                row.vesselEnName = this.assemblyForm.vesselEnName // 英文船名
                row.voyageNo = this.assemblyForm.voyageNo // 航次
                row.mblno = this.assemblyForm.mblno // MB/L NO
                row.hblno = this.assemblyForm.hblno // HB/L NO
                row.etd = this.assemblyForm.etd // 开船日期
                row.eta = this.assemblyForm.eta // 到港日期
                row.polId = this.assemblyForm.polId // 装货港 id
                row.polCode = this.assemblyForm.polCode // 装货港代码
                row.polCnName = this.assemblyForm.polCnName // 装货港中文名称
                row.polEnName = this.assemblyForm.polEnName // 装货港英文名称
                row.podId = this.assemblyForm.podId // 卸货港 id
                row.podCode = this.assemblyForm.podCode // 卸货港代码
                row.podCnName = this.assemblyForm.podCnName // 卸货港中文名称
                row.podEnName = this.assemblyForm.podEnName // 卸货港英文名称
                this.feecenterSubmitfun(row)
            },
            // 多选删除
            handleSelectionChange(list,dc){
                if (dc == 'D') {
                    this.selectionDList = list
                }else {
                    this.selectionCList = list
                }
            },
            // 批量删除
            batchDelete(dc){
                let arr = []
                if (dc == 'D') {
                    arr = this.selectionDList.map(item=>{
                        return item.id
                    })
                }else {
                    arr = this.selectionCList.map(item=>{
                        return item.id
                    })
                }
                this.deletefun({id:arr.join(',')})
            },
            // 应收删除
            deletefun(row,index,dc) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    if (row.id) {
                        // 删除接口
                        feecenterRemove(row.id).then(res=>{
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                            this.$emit('billsDetailfun')
                        })
                    }else {
                        if(dc == 'D') {
                            this.assemblyForm.feeCenterListD.splice(index, 1)
                        }else {
                            this.assemblyForm.feeCenterListC.splice(index, 1)
                        }
                    }
                })
            },
            // 客户的回调
            corpChange(value,name,row) {
                if (name == 'corpCnName') {
                    for(let item of this.corpCnNameData) {
                        if (item.cnName == value){
                            this.$set(row,'corpCnName',item.cnName)
                            this.$set(row,'corpEnName',item.enName)
                            this.$set(row,'corpId',item.id)
                        }
                    }
                }else if (name == 'feeCnName') {
                    for(let item of this.feeCnNameData) {
                        if (item.cnName == value){
                            this.$set(row,'feeCnName',item.cnName)
                            this.$set(row,'feeEnName',item.enName)
                            this.$set(row,'feeId',item.id)
                            this.$set(row,'feeCode',item.code)
                        }
                    }
                }else if (name == 'curCode') {
                    for(let item of this.curCodeData) {
                        if (item.code == value){
                            this.$set(row,'curCode',item.code)
                            this.$set(row,'exrate',item.exrate)
                            if (row.curCode == 'CNY') {
                                this.$set(row,'rmbAmount',row.amount)
                                this.$set(row,'usdAmount','')
                            }else {
                                this.$set(row,'usdAmount',row.amount)
                                this.$set(row,'rmbAmount','')
                            }
                        }
                    }
                } else {
                    this.$set(row,name,value)
                }

            },
            // 单价
            priceinputfun(value,row){
                if (Number(value) <= 0) {
                    this.$message({
                        type: "warning",
                        message: "单价不能输入负数!"
                    });
                    return
                }
                this.$set(row,'amount',Number(row.price) * Number(row.quantity?row.quantity:0))
                // 判断是否有币种
                if (!row.curCode) {
                    return;
                }
                if (row.curCode == 'CNY') {
                    this.$set(row,'rmbAmount',row.amount)
                    this.$set(row,'usdAmount','')
                }else {
                    this.$set(row,'usdAmount',row.amount)
                    this.$set(row,'rmbAmount','')
                }
            },
            // 数量
            quantityinputfun(row) {
                if (row.quantity <= 0) {
                    this.$message({
                        type: "warning",
                        message: "数量不能输入负数!"
                    });
                    return
                }
                this.$set(row,'amount',Number(row.price?row.price:0) * Number(row.quantity))
                // 判断是否有币种
                if (!row.curCode) {
                    return;
                }
                if (row.curCode == 'CNY') {
                    this.$set(row,'rmbAmount',row.amount)
                    this.$set(row,'usdAmount','')
                }else {
                    this.$set(row,'usdAmount',row.amount)
                    this.$set(row,'rmbAmount','')
                }
            },
            // 保存接口
            feecenterSubmitfun(row){
                feecenterSubmit(row).then(res=>{
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.$emit('billsDetailfun')
                })
            },
            // 获取客户数据
            getBcorpsListfun(cnName){
                getBcorpsList(1,10,{cnName}).then(res=>{
                    this.corpCnNameData = res.data.data.records
                })
            },
            // 获取费用数据
            bfeesListfun(cnName){
                bfeesList(1,10,{cnName}).then(res=>{
                    this.feeCnNameData = res.data.data.records
                })
            },
            // 获取计算属性
            getBunitsPagefun(){
                let srcBillId = null
                if (this.assemblyForm.billType == 'MH') {
                    srcBillId = this.assemblyForm.masterId
                }else {
                    srcBillId = this.assemblyForm.id
                }
                getBunitsPage({srcBillId}).then(res=>{
                    this.unitNoData = res.data.data.records
                })
            },
            // 获取币别数据
            getRateListfun(cnName){
                getRateList({current:1,size:10,cnName}).then(res=>{
                    console.log(res.data.data,1013)
                    this.curCodeData = res.data.data.records
                })
            },
            // 获取签单方式字典数据
            getWorkDictsfun(){
                getWorkDicts('issue_type_F').then(res=>{
                    this.issuetypefData = res.data.data
                })
            },
            // 预付到付货物显示值
            paymodefun(value){
                for(let item of this.paymodeData) {
                    if (item.value == value) {
                        return item.label
                    }
                }
            },
            // 表头样式
            tableHeaderCellStyle({row,column,rowIndex, columnIndex}){
                return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff"
            },
            // 关闭弹窗
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }

        },
    }
</script>

<style scoped lang="scss">
    .disabledBox {
        display: flex;
        align-items: center;
    }
    .fontSize {
        font-size: 16px;
        color: #81B337;
    }
    .meetSize {
        font-size: 16px;
        color: #54BCBD;
    }
    .bottomFlex {
        display: flex;
        align-items: center;
    }
    .weightfont {
        font-size: 20px;
        font-weight: bold;
    }
    .weightnum {
        font-size: 15px;
        font-weight: 500;
    }
    .fontText {
        font-size: 16px;
        font-weight: 500;
        margin: 3px 0;
    }
    ::v-deep.el-form-item {
        margin-bottom: 0px;
    }

    // 去掉弹框内容的默认padding值
    /deep/.el-dialog .el-dialog__body {
        padding: 0px 20px;
    }
</style>