tire-platform-ui/src/components/tradeAgency/fee-oceanFreight.vue

<template>
    <div>
        <avue-crud :option="optionD" :table-loading="loading" :data="form.feeCenterListD" id="out-table" ref="crudD"
            @selection-change="selectionDChange" @resetColumn="resetColumn('crudD', 'optionD', 'optionDBack', 392)"
            @saveColumn="saveColumn('crudD', 'optionD', 'optionDBack', 392)" :row-class-name="tableRowClassName">
            <template slot="menuLeft">
                <div style="display: inline-block;margin-right: 20px" class="disabledBox fontSize">
                    <i class="el-icon-coin"></i>
                    <span>应收费用</span>
                </div>
                <el-button type="info" plain size="small" :disabled="disabled"
                    @click="allClick('一键保存', 'D')">一键保存</el-button>
                <el-button type="info" plain size="small" :disabled="disabled"
                    @click="allClick('一键编辑', 'D')">一键编辑</el-button>
                <el-button type="danger" plain size="small" :disabled="disabled || selectionDList.length == 0"
                    @click="allClick('批量删除', 'D')">批量删除</el-button>
                <el-button type="primary" plain size="small" :disabled="disabled || selectionDList.length == 0"
                    @click="allClick('生成账单', 'D')">生成账单</el-button>
                <el-button type="danger" plain size="small" :disabled="disabled || selectionDList.length == 0"
                    @click="allClick('撤销账单', 'D')">撤销账单</el-button>
                <el-button type="primary" plain size="small" @click="$refs.printD.openDialog()">打印账单</el-button>
                <el-button type="success" plain size="small" :disabled="disabled"
                    @click="allClick('应收模板', 'D')">应收模板</el-button>
                <el-button type="primary" plain size="small" :disabled="disabled || selectionDList.length == 0"
                    @click="allClick('生成应付', 'D')">生成应付</el-button>
            </template>
            <template slot="indexHeader" slot-scope="{row,index}">
                <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="disabled" circle @click="addRow('D')">
                </el-button>
            </template>
            <template slot="index" slot-scope="{row,index}">
                <span>{{ index + 1 }}</span>
            </template>
            <template slot="corpCnNameForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.corpCnName" placeholder="往来单位" key="id" label="cnName"
                    res="records" url="/blade-los/bcorps/listByType?corpTypeName=客户" :filterable="true" :remote="true"
                    dataName="cnName" @selectChange="rowDicChange('corpCnName', $event, row)"></dic-select>
                <span v-else>{{ row.corpCnName }}</span>
            </template>
            <template slot="feeCnNameForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.feeCnName" placeholder="费用名称" key="id" label="cnName"
                    res="records" url="/blade-los/bfees/list" :filterable="true" :remote="true" dataName="cnName"
                    @selectChange="rowDicChange('feeCnName', $event, row)"></dic-select>
                <span v-else>{{ row.feeCnName }}</span>
            </template>
            <template slot="unitNo" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.unitNo" placeholder="收费标准" key="id" label="code"
                    url="/blade-los/bunits/selectList" :filterable="true"
                    @selectChange="rowDicChange('unitNo', $event, row)"></dic-select>
                <span v-else>{{ row.unitNo }}</span>
            </template>
            <tempalte slot="quantityForm" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit" v-model="row.quantity" @change="countChange(row)" :controls="false"
                    placeholder="请输入 数量" size="small" style="width: 100%;"></el-input-number>
                <span v-else>{{ row.quantity }}</span>
            </tempalte>
            <tempalte slot="priceForm" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit" v-model="row.price" @change="countChange(row)" :controls="false"
                    placeholder="请输入 单价" size="small" style="width: 100%;"></el-input-number>
                <span v-else>{{ row.price }}</span>
            </tempalte>
            <template slot="curCodeForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.curCode" placeholder="币别" key="id" label="code"
                    :url="'/blade-los/bcurrency/getExrate?date=' + defaultDate + '&dc=' + row.dc" :filterable="true"
                    @selectChange="rowDicChange('curCode', $event, row)"></dic-select>
                <span v-else>{{ row.curCode }}</span>
            </template>
            <tempalte slot="exrate" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit" v-model="row.exrate" @change="countChange(row)" :controls="false"
                    placeholder="请输入 汇率" size="small" style="width: 100%;"></el-input-number>
                <span v-else>{{ row.exrate }}</span>
            </tempalte>
            <tempalte slot="stlExrate" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit" v-model="row.stlExrate" :controls="false" placeholder="请输入 结算汇率"
                    size="small" style="width: 100%;"></el-input-number>
                <span v-else>{{ row.stlExrate }}</span>
            </tempalte>
        </avue-crud>
        <avue-crud style="margin-top: 10px;" :option="optionC" :table-loading="loading" :data="form.feeCenterListC"
            id="out-table" ref="crudC" @selection-change="selectionCChange"
            @resetColumn="resetColumn('crudC', 'optionC', 'optionCBack', 393)"
            @saveColumn="saveColumn('crudC', 'optionC', 'optionCBack', 393)" :row-class-name="tableRowClassName">
            <template slot="menuLeft">
                <div style="display: inline-block;margin-right: 20px" class="disabledBox fontSize">
                    <i class="el-icon-coin"></i>
                    <span>应付费用</span>
                </div>
                <el-button type="info" plain size="small" :disabled="disabled"
                    @click="allClick('一键保存', 'C')">一键保存</el-button>
                <el-button type="info" plain size="small" :disabled="disabled"
                    @click="allClick('一键编辑', 'C')">一键编辑</el-button>
                <el-button type="danger" plain size="small" :disabled="disabled || selectionCList.length == 0"
                    @click="allClick('批量删除', 'C')">批量删除</el-button>
                <el-button type="primary" plain size="small" :disabled="disabled || selectionCList.length == 0"
                    @click="allClick('生成账单', 'C')">生成账单</el-button>
                <el-button type="danger" plain size="small" :disabled="disabled || selectionCList.length == 0"
                    @click="allClick('撤销账单', 'C')">撤销账单</el-button>
                <el-button type="primary" plain size="small" :disabled="disabled"
                    @click="allClick('增值税', 'C')">增值税</el-button>
                <el-button type="danger" plain size="small" :disabled="disabled" @click="allClick('关税', 'C')">关税</el-button>
                <el-button type="primary" plain size="small" @click="$refs.printC.openDialog()">打印账单</el-button>
                <el-button type="success" plain size="small" :disabled="disabled"
                    @click="allClick('应付模板', 'C')">应付模板</el-button>
                <el-button type="primary" plain size="small" :disabled="disabled || selectionCList.length == 0"
                    @click="allClick('生成应收', 'C')">生成应收</el-button>
                <el-button type="success" plain size="small" :disabled="disabled"
                    @click="allClick('转押', 'C')">转押</el-button>
                <el-button plain size="small" :disabled="disabled" @click="allClick('撤销转押', 'C')">撤销转押</el-button>
            </template>
            <template slot="indexHeader" slot-scope="{row,index}">
                <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="disabled" circle @click="addRow('C')">
                </el-button>
            </template>
            <template slot="index" slot-scope="{row,index}">
                <span>{{ index + 1 }}</span>
            </template>
            <template slot="corpCnNameForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.corpCnName" placeholder="往来单位" key="id" label="cnName"
                    res="records" url="/blade-los/bcorps/listByType?corpTypeName=客户" :filterable="true" :remote="true"
                    dataName="cnName" @selectChange="rowDicChange('corpCnName', $event, row)"></dic-select>
                <span v-else>{{ row.corpCnName }}</span>
            </template>
            <template slot="feeCnNameForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.feeCnName" placeholder="费用名称" key="id" label="cnName"
                    res="records" url="/blade-los/bfees/list" :filterable="true" :remote="true" dataName="cnName"
                    @selectChange="rowDicChange('feeCnName', $event, row)"></dic-select>
                <span v-else>{{ row.feeCnName }}</span>
            </template>
            <template slot="unitNo" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.unitNo" placeholder="付费标准" key="id" label="code"
                    url="/blade-los/bunits/selectList" :filterable="true"
                    @selectChange="rowDicChange('unitNo', $event, row)"></dic-select>
                <span v-else>{{ row.unitNo }}</span>
            </template>
            <tempalte slot="quantityForm" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit" v-model="row.quantity" @change="countChange(row)" :controls="false"
                    placeholder="请输入 数量" size="small" style="width: 100%;"></el-input-number>
                <span v-else>{{ row.quantity }}</span>
            </tempalte>
            <tempalte slot="priceForm" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit" v-model="row.price" @change="countChange(row)" :controls="false"
                    placeholder="请输入 单价" size="small" style="width: 100%;"></el-input-number>
                <span v-else>{{ row.price }}</span>
            </tempalte>
            <template slot="curCodeForm" slot-scope="{ row }">
                <dic-select v-if="row.$cellEdit" v-model="row.curCode" placeholder="币别" key="id" label="code"
                    :url="'/blade-los/bcurrency/getExrate?date=' + defaultDate + '&dc=' + row.dc" :filterable="true"
                    @selectChange="rowDicChange('curCode', $event, row)"></dic-select>
                <span v-else>{{ row.curCode }}</span>
            </template>
            <tempalte slot="exrate" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit" v-model="row.exrate" @change="countChange(row)" :controls="false"
                    placeholder="请输入 汇率" size="small" style="width: 100%;"></el-input-number>
                <span v-else>{{ row.exrate }}</span>
            </tempalte>
            <tempalte slot="stlExrate" slot-scope="{ row }">
                <el-input-number v-if="row.$cellEdit" v-model="row.stlExrate" :controls="false" placeholder="请输入 结算汇率"
                    size="small" style="width: 100%;"></el-input-number>
                <span v-else>{{ row.stlExrate }}</span>
            </tempalte>
        </avue-crud>
        <el-dialog title="提示" :visible.sync="templateVisible" append-to-body width="70%" :close-on-click-modal="false"
            :before-close="handleClose">
            <div>
                <el-row>
                    <el-col :span="5">
                        <basic-container>
                            <avue-tree :option="treeOption" :data="templateData" @node-click="nodeClick">
                            </avue-tree>
                        </basic-container>
                    </el-col>
                    <el-col :span="19">
                        <avue-crud :option="templateOption" :data="templateRightData" ref="templateRef"
                            @selection-change="feeselectionChange">
                        </avue-crud>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="templateVisible = false; feesselectionList = []; templateRightData = []">取
                    消</el-button>
                <el-button type="primary" size="mini" @click="templateExport">导 入</el-button>
            </span>
        </el-dialog>
        <el-dialog append-to-body title="转押" class="el-dialogDeep" :visible.sync="subDialog" width="70%"
            :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" @closed="subClosed"
            v-dialog-drag>
            <avue-crud ref="subCrud" :table-loading="loading" :data="subData" :option="subOptions" :page.sync="page"
                :search.sync="query" @search-change="searchChange" @search-reset="searchReset"
                @selection-change="subselectionChange" @current-change="currentChange" @size-change="sizeChange"
                @row-click="rowClick" @on-load="onLoad">
            </avue-crud>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="subDialog = false">取 消</el-button>
                <el-button size="mini" :disabled="subselectionList.length != 1" type="primary" @click="subSubmit">确
                    认</el-button>
            </span>
        </el-dialog>
        <business-reports :id="form.id" :itemIds="itemIds" ref="printD" businessValue="HYJK" classifyCode="费用"
            groupCode="应收" :selecList="selectionDList"></business-reports>
        <business-reports :id="form.id" :itemIds="itemIds" ref="printC" businessValue="HYJK" classifyCode="费用"
            groupCode="应付" :selecList="selectionCList"></business-reports>
    </div>
</template>

<script>
import dicSelect from "@/components/dicSelect/main";
import { bcurrencyGetExrate } from "@/api/iosBasicData/rateManagement";
import { submitListTrade, feeRemove, generateBill, revokeBill, synchronization, feecenterTemplateImport } from "@/api/tradeAgency/tradeAgency";
import { defaultDate } from "@/util/date";
import { losbfeestemplateDetail } from "@/api/iosBasicData/losbfeestemplate";
import { losbfeestemplateGetListTemplate } from "@/api/iosBasicData/bills";
import businessReports from "@/components/tradeAgency/businessReportsJK.vue";
import { getListTradeV1, transferOfPledge, revokeTransferOfPledge } from "@/api/tradeAgency/oceanFreightImport";
import _ from "lodash";
export default {
    components: {
        dicSelect,
        businessReports
    },
    props: {
        detailData: {},
        disabled: {
            type: Boolean,
            default: false,
        },
        form: {
            type: Object,
            default: () => {
            }
        }
    },
    data() {
        return {
            loading: false,
            query: {},
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            subData: [],
            subOptions: {
                header: false,
                tip: false,
                border: true,
                index: true,
                menu: false,
                selection: true,
                align: 'center',
                searchMenuSpan: 18,
                height: '450',
                column: [
                    {
                        label: "客户名称",
                        prop: "corpCnName",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "提单号",
                        prop: "mblno",
                        width: "120",
                        overHidden: true,
                        search: true,
                    },
                    {
                        label: "预计到港",
                        prop: "bookingDate",
                        width: "120",
                        overHidden: true,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss"
                    },
                    {
                        label: "箱型箱量",
                        prop: "quantityCntrDescr",
                        width: "100",
                        overHidden: true
                    },
                    {
                        label: "船代",
                        prop: "bookingAgentCnName",
                        overHidden: true
                    },
                    {
                        label: "船公司",
                        prop: "carrierCnName",
                        overHidden: true
                    },
                    {
                        label: "制单人",
                        prop: "createUserName",
                        overHidden: true
                    },
                ]
            },
            subDialog: false,
            subselectionList: [],
            treeOption: {
                nodeKey: "id",
                // lazy: true,
                addBtn: false,
                menu: false,
                size: "small",
                props: {
                    labelText: "标题",
                    label: "cnName",
                    value: "value",
                    children: "children"
                }
            },
            templateOption: {
                height: 400,
                menu: false,
                tip: false,
                stripe: true,
                addBtn: false,
                editBtn: false,
                delBtn: false,
                viewBtn: false,
                index: true,
                selection: true,
                header: false,
                column: [
                    {
                        label: '客户',
                        prop: 'corpCnName',
                        overHidden: true,
                    },
                    {
                        label: '客户类型',
                        prop: 'corpType',
                        overHidden: true,
                    },
                    {
                        label: '费用',
                        prop: 'feeCnName',
                        overHidden: true,
                    },
                    {
                        label: '数量',
                        prop: 'quantity',
                        overHidden: true,
                    },
                    {
                        label: '单价',
                        prop: 'price',
                        overHidden: true,
                    },
                    {
                        label: '计量单位',
                        prop: 'unitNo',
                        overHidden: true,
                    },
                    {
                        label: '币别',
                        prop: 'curCode',
                        overHidden: true,
                    }
                ]
            },
            templateVisible: false,
            defaultDate: defaultDate(new Date()),
            optionD: {},
            optionDBack: {
                height: 'auto',
                calcHeight: 30,
                menuWidth: 140,
                tip: false,
                border: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                menu: false,
                refreshBtn: false,
                selection: true,
                align: 'center',
                column: [
                    {
                        label: "index",
                        prop: "index",
                        width: "55",
                        headerslot: true,
                    },
                    {
                        label: "账单",
                        prop: "accStatus",
                        width: '80',
                        overHidden: true,
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }]
                    },
                    {
                        label: "结算状态",
                        prop: "stlStatus",
                        width: '80',
                        overHidden: true,
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }]
                    },
                    {
                        label: "往来单位",
                        prop: "corpCnName",
                        width: '160',
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请选择往来单位',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "提单号",
                        prop: "mblno",
                        width: '160',
                        overHidden: true,
                    },
                    {
                        label: "费用名称",
                        prop: "feeCnName",
                        width: '120',
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请选择费用名称',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "收费标准",
                        prop: "unitNo",
                        width: '120',
                        overHidden: true,
                    },
                    {
                        label: "单价",
                        prop: "price",
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入单价',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "数量",
                        prop: "quantity",
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入数量',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "金额",
                        prop: "amount",
                        overHidden: true,
                    },
                    {
                        label: "币别",
                        prop: "curCode",
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请选择币别',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "外币金额",
                        prop: "amountLoc",
                        overHidden: true,
                    },
                    {
                        label: "汇率",
                        prop: "exrate",
                        overHidden: true,
                    },
                    {
                        label: "结算汇率",
                        prop: "stlExrate",
                        overHidden: true,
                    },
                    {
                        label: "结算日期",
                        prop: "stlDate",
                        width: "120",
                        cell: true,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 00:00:00",
                        overHidden: true
                    },
                    {
                        label: "天数",
                        prop: "days",
                        overHidden: true,
                    },
                    {
                        label: "入库日期",
                        prop: "storageDate",
                        overHidden: true,
                    },
                    {
                        label: "出库日期",
                        prop: "outboundDate",
                        overHidden: true,
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        cell: true,
                        width: '200',
                        overHidden: true,
                    },
                ]
            },
            optionC: {},
            optionCBack: {
                maxHeight: 400,
                calcHeight: 30,
                menuWidth: 140,
                tip: false,
                border: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                menu: false,
                refreshBtn: false,
                selection: true,
                align: 'center',
                column: [
                    {
                        label: "index",
                        prop: "index",
                        width: "55",
                        headerslot: true,
                    },
                    {
                        label: "账单",
                        prop: "accStatus",
                        width: '80',
                        overHidden: true,
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }]
                    },
                    {
                        label: "结算状态",
                        prop: "stlStatus",
                        width: '80',
                        overHidden: true,
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }]
                    },
                    {
                        label: "往来单位",
                        prop: "corpCnName",
                        width: '160',
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请选择往来单位',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "提单号",
                        prop: "mblno",
                        width: '160',
                        overHidden: true,
                    },
                    {
                        label: "费用名称",
                        prop: "feeCnName",
                        width: '120',
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请选择费用名称',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "付费标准",
                        prop: "unitNo",
                        width: '120',
                        overHidden: true,
                    },
                    {
                        label: "单价",
                        prop: "price",
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入单价',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "数量",
                        prop: "quantity",
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入数量',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "金额",
                        prop: "amount",
                        overHidden: true,
                    },
                    {
                        label: "币别",
                        prop: "curCode",
                        cell: true,
                        slot: true,
                        formslot: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请选择币别',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "外币金额",
                        prop: "amountLoc",
                        overHidden: true,
                    },
                    {
                        label: "汇率",
                        prop: "exrate",
                        overHidden: true,
                    },
                    {
                        label: "结算汇率",
                        prop: "stlExrate",
                        overHidden: true,
                    },
                    {
                        label: "结算日期",
                        prop: "stlDate",
                        width: "120",
                        cell: true,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 00:00:00",
                        overHidden: true
                    },
                    {
                        label: "天数",
                        prop: "days",
                        overHidden: true,
                    },
                    {
                        label: "入库日期",
                        prop: "storageDate",
                        overHidden: true,
                    },
                    {
                        label: "出库日期",
                        prop: "outboundDate",
                        overHidden: true,
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        cell: true,
                        width: '200',
                        overHidden: true,
                    },
                ]
            },
            selectionDList: [],
            selectionCList: [],
            templateData: [],
            lefttemplate: {}, // 左侧选择的数据
            feesselectionList: [], // 清空多选
            templateRightData: [],
            itemIds: null,
        }
    },
    async created() {
        this.optionD = await this.getColumnData(this.getColumnName(392), this.optionDBack);
        this.optionC = await this.getColumnData(this.getColumnName(393), this.optionCBack);
    },
    methods: {
        // 模板导入
        templateExport() {
            if (!this.lefttemplate.id) {
                this.$message.warning('请选择左侧客户')
                return
            }
            if (this.feesselectionList.length > 0) {
                feecenterTemplateImport({
                    ...this.lefttemplate,
                    feesTemplateItemsList: this.feesselectionList,
                    billNoId: this.form.id
                }).then(res => {
                    if (res.data.msg.indexOf('未导入') >= 0) {
                        this.$message({
                            type: "error",
                            message: res.data.msg
                        });
                    } else {
                        this.$message({
                            type: "success",
                            message: res.data.msg
                        });
                    }
                    this.feesselectionList = [] // 清空多选
                    this.templateRightData = [] // 清空数据
                    this.lefttemplate = {}//左侧数据
                    this.$emit('getDetails', this.form.id)
                    this.templateVisible = false
                })
            } else {
                this.$message.warning('请先选择要导入的数据')
            }
        },
        // 模板
        // 左侧选择
        nodeClick(e) {
            this.lefttemplate = e
            losbfeestemplateDetail(e.id).then(res => {
                this.templateRightData = res.data.data.feesTemplateItemsList
            })
        },
        // 关闭弹窗
        handleClose(done) {
            this.feesselectionList = [] // 清空多选
            this.templateRightData = [] // 清空数据
            done();

        },
        subSubmit() {
            let obj = {}
            obj = {
                id: this.form.id,
                billId: this.subselectionList[0].id
            }
            transferOfPledge(obj).then(res => {
                this.$message.success("确认成功");
                this.$emit('getDetails', this.form.id)
                this.subDialog = false
            })
        },
        subselectionChange(list) {
            this.subselectionList = list;
        },
        subClosed() {
            this.subData = []
            this.subselectionList = []
        },
        searchReset() {
            this.query = this.$options.data().query;
            this.onLoad(this.page);
        },
        onLoad(page, params = {}) {
            let obj = {}
            obj = {
                ...Object.assign(params, this.query),
                id: this.form.id
            }
            console.log(obj)
            this.loading = true;
            getListTradeV1(page.currentPage, page.pageSize, obj).then(res => {
                this.subData = res.data.data.records;
                this.page.total = res.data.data.total;
                this.$nextTick(() => {
                    this.$refs.subCrud.doLayout();
                });
            }).finally(() => {
                this.loading = false;
            })

        },
        // 搜索按钮点击
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
            done();
        },
        feeselectionChange(list) {
            this.feesselectionList = list;
        },
        addRow(type) {
            if (!this.form.id) return this.$message.error('请保存数据');
            if (type == 'D') {
                if (this.form.feeCenterListD.length == 0) {
                    this.form.feeCenterListD.push({
                        $cellEdit: true,
                        pid: this.form.id,
                        dc: type,
                        accStatus: 0,
                        corpCnName: this.form.corpCnName,
                        corpId: this.form.corpId,
                        businessType: this.form.businessType,
                        billNo: this.form.businessNo,
                        billDate: this.form.businessDate,
                    })
                } else {
                    this.form.feeCenterListD.push({
                        $cellEdit: true,
                        pid: this.form.id,
                        dc: type,
                        accStatus: 0,
                        businessType: this.form.businessType,
                        billNo: this.form.businessNo,
                        billDate: this.form.businessDate,
                        corpCnName: this.form.feeCenterListD[this.form.feeCenterListD.length - 1].corpCnName,
                        corpId: this.form.feeCenterListD[this.form.feeCenterListD.length - 1].corpId,
                        corpEnName: this.form.feeCenterListD[this.form.feeCenterListD.length - 1].corpEnName,
                        billCorpId: this.form.feeCenterListD[this.form.feeCenterListD.length - 1].billCorpId,
                        billCorpCnName: this.form.feeCenterListD[this.form.feeCenterListD.length - 1].billCorpCnName,
                    })
                }
            }
            if (type == 'C') {
                if (this.form.feeCenterListC.length == 0) {
                    this.form.feeCenterListC.push({
                        $cellEdit: true,
                        pid: this.form.id,
                        dc: type,
                        accStatus: 0,
                        corpCnName: this.form.corpCnName,
                        corpId: this.form.corpId,
                        businessType: this.form.businessType,
                        billNo: this.form.businessNo,
                        billDate: this.form.businessDate,
                    })
                } else {
                    this.form.feeCenterListC.push({
                        $cellEdit: true,
                        pid: this.form.id,
                        dc: type,
                        accStatus: 0,
                        businessType: this.form.businessType,
                        billNo: this.form.businessNo,
                        billDate: this.form.businessDate,
                        corpCnName: this.form.feeCenterListC[this.form.feeCenterListC.length - 1].corpCnName,
                        corpId: this.form.feeCenterListC[this.form.feeCenterListC.length - 1].corpId,
                        corpEnName: this.form.feeCenterListC[this.form.feeCenterListC.length - 1].corpEnName,
                        billCorpId: this.form.feeCenterListC[this.form.feeCenterListC.length - 1].billCorpId,
                        billCorpCnName: this.form.feeCenterListC[this.form.feeCenterListC.length - 1].billCorpCnName,
                    })
                }
            }
        },
        countChange(row) {
            row.amount = _.multiply(Number(row.quantity ? row.quantity : 0), Number(row.price ? row.price : 0))
            if (row.feeCode == 'SFK' || row.feeCode == 'WK') {
                row.amount = _.multiply(Number(row.amountLoc ? row.amountLoc : 0), Number(row.exrate ? row.exrate : 0))
            }
        },
        selectionDChange(list) {
            let ids = []
            list.forEach(e => {
                ids.push(e.id)
            })
            if (ids.length) {
                this.itemIds = ids.join(',')
            } else {
                this.itemIds = null
            }
            this.selectionDList = list
        },
        selectionCChange(list) {
            let ids = []
            list.forEach(e => {
                ids.push(e.id)
            })
            if (ids.length) {
                this.itemIds = ids.join(',')
            } else {
                this.itemIds = null
            }
            this.selectionCList = list
        },
        rowDicChange(name, row, el) {
            if (name == 'corpCnName') {
                if (row) {
                    el.corpId = row.id
                    el.corpEnName = row.enName
                    el.billCorpId = row.id
                    el.billCorpCnName = row.cnName
                } else {
                    el.corpId = null
                    el.corpEnName = null
                    el.billCorpId = null
                    el.billCorpCnName = null
                }
            }
            if (name == 'feeCnName') {
                if (row) {
                    el.feeId = row.id
                    el.feeCode = row.code
                    el.feeEnName = row.enName
                    el.curCode = row.curNo
                    el.elementsId = row.accElementId
                    el.elementsCode = row.elementsCode
                    el.elementsCnName = row.accElementName
                    el.elementsEnName = row.elementsEnName
                    bcurrencyGetExrate({ date: this.form.contractDate, dc: el.dc }).then(res => {
                        res.data.data.forEach(e => {
                            if (row.curNo == e.code) {
                                this.$set(el, 'exrate', e.exrate)
                            }
                        })
                    })
                } else {
                    el.feeId = null
                    el.feeCode = null
                    el.feeEnName = null
                    el.curCode = null
                    el.elementsId = null
                    el.elementsCode = null
                    el.elementsCnName = null
                    el.elementsEnName = null
                }
            }
            if (name == 'curCode') {
                if (row) {
                    bcurrencyGetExrate({ date: this.form.contractDate, dc: el.dc }).then(res => {
                        res.data.data.forEach(e => {
                            if (el.curCode == e.code) {
                                this.$set(el, 'exrate', e.exrate)
                            }
                        })
                    })
                } else {
                    el.exrate = null
                }
            }
        },
        allClick(name, type) {
            if (name == '一键保存') {
                if (type == 'D') {
                    for (let row of this.form.feeCenterListD) {
                        if (!row.corpCnName || !row.feeCnName || !row.price || !row.quantity || !row.curCode) {
                            this.$refs.crudD.rowCell(row, row.$index)
                            return this.$message.error((!row.corpCnName ? "往来单位，" : '') + (!row.feeCnName ? "费用名称，" : '') + (!row.price ? "单价，" : '') + (!row.quantity ? "数量，" : '') + (!row.curCode ? "币别，" : '') + "不能为空");
                        }
                    }
                    this.form.feeCenterListD.forEach(e => {
                        this.$set(e, '$cellEdit', false)
                    })
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    submitListTrade(this.form.feeCenterListD).then(res => {
                        this.form.feeCenterListD = res.data.data
                        this.$message.success("保存成功");
                    }).finally(() => {
                        loading.close();
                    })
                }
                if (type == 'C') {
                    for (let row of this.form.feeCenterListC) {
                        if (!row.corpCnName || !row.feeCnName || !row.price || !row.quantity || !row.curCode) {
                            this.$refs.crudC.rowCell(row, row.$index)
                            return this.$message.error((!row.corpCnName ? "往来单位，" : '') + (!row.feeCnName ? "费用名称，" : '') + (!row.price ? "单价，" : '') + (!row.quantity ? "数量，" : '') + (!row.curCode ? "币别，" : '') + "不能为空");
                        }
                    }
                    this.form.feeCenterListC.forEach(e => {
                        this.$set(e, '$cellEdit', false)
                    })
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    submitListTrade(this.form.feeCenterListC).then(res => {
                        this.form.feeCenterListC = res.data.data
                        this.$message.success("保存成功");
                    }).finally(() => {
                        loading.close();
                    })
                }
            }
            if (name == '一键编辑') {
                if (type == 'D') {
                    this.form.feeCenterListD.forEach(e => {
                        this.$set(e, '$cellEdit', true)
                    })
                }
                if (type == 'C') {
                    this.form.feeCenterListC.forEach(e => {
                        this.$set(e, '$cellEdit', true)
                    })
                }
            }
            if (name == '批量删除') {
                let multiList = []
                let arr = []
                for (let index in this.selectionDList) {
                    if (this.selectionDList[index].accStatus == 1) return this.$message.error("第" + (Number(this.selectionDList[index].$index) + 1) + "行不允许删除");
                }
                for (let index in this.selectionCList) {
                    if (this.selectionCList[index].accStatus == 1) return this.$message.error("第" + (Number(this.selectionCList[index].$index) + 1) + "行不允许删除");
                }
                if (type == 'D') {
                    this.$confirm("确定将选择数据删除?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        multiList = this.selectionDList
                        arr = this.form.feeCenterListD
                        // 获取有id 的数据
                        const itemsWithId = multiList.filter(item => item.hasOwnProperty('id'));
                        let arrIds = itemsWithId.map(item => item.id) // 获取id 数据
                        // 把选中的删除掉
                        multiList.forEach((item) => {
                            for (let index in arr) {
                                if (JSON.stringify(item) == JSON.stringify(arr[index])) {
                                    arr.splice(Number(index), 1)
                                }
                            }
                        })
                        if (itemsWithId.length != 0) {
                            const loading = this.$loading({
                                lock: true,
                                text: '加载中',
                                spinner: 'el-icon-loading',
                                background: 'rgba(255,255,255,0.7)'
                            });
                            feeRemove({ ids: arrIds.join(',') }).then(res => {
                                this.$message.success("删除成功");
                            }).finally(() => {
                                loading.close();
                            })
                        }
                    })
                }
                if (type == 'C') {
                    this.$confirm("确定将选择数据删除?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        multiList = this.selectionCList
                        arr = this.form.feeCenterListC
                        // 获取有id 的数据
                        const itemsWithId = multiList.filter(item => item.hasOwnProperty('id'));
                        let arrIds = itemsWithId.map(item => item.id) // 获取id 数据
                        // 把选中的删除掉
                        multiList.forEach((item) => {
                            for (let index in arr) {
                                if (JSON.stringify(item) == JSON.stringify(arr[index])) {
                                    arr.splice(Number(index), 1)
                                }
                            }
                        })
                        if (itemsWithId.length != 0) {
                            const loading = this.$loading({
                                lock: true,
                                text: '加载中',
                                spinner: 'el-icon-loading',
                                background: 'rgba(255,255,255,0.7)'
                            });
                            feeRemove({ ids: arrIds.join(',') }).then(res => {
                                this.$message.success("删除成功");
                            }).finally(() => {
                                loading.close();
                            })
                        }
                    })
                }
            }
            if (name == '生成账单') {
                if (type == 'D') {
                    for (let index in this.selectionDList) {
                        if (this.selectionDList[index].accStatus != 0) {
                            return this.$message.error("已生成账单");
                        }
                        if (this.selectionDList[index].whetherSynchronizationZzs == 1) {
                            return this.$message.error("增值税已同步，不能生成账单");
                        }
                        if (this.selectionDList[index].whetherSynchronizationTariff == 1) {
                            return this.$message.error("关税已同步，不能生成账单");
                        }
                    }
                    this.$confirm("确定将选择数据生成账单?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255,255,255,0.7)'
                        });
                        generateBill({ id: this.form.id, feeCenterListD: this.selectionDList }).then(res => {
                            this.$message.success("成功生成账单");
                            this.$emit('getDetails', this.form.id)
                        }).finally(() => {
                            loading.close();
                        })
                    })
                }
                if (type == 'C') {
                    for (let index in this.selectionCList) {
                        if (this.selectionCList[index].accStatus != 0) {
                            return this.$message.error("已生成账单");
                        }
                    }
                    this.$confirm("确定将选择数据生成账单?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255,255,255,0.7)'
                        });
                        generateBill({ id: this.form.id, feeCenterListC: this.selectionCList }).then(res => {
                            this.$message.success("成功生成账单");
                            this.$emit('getDetails', this.form.id)
                        }).finally(() => {
                            loading.close();
                        })
                    })
                }


            }
            if (name == '撤销账单') {
                if (type == 'D') {
                    for (let index in this.selectionDList) {
                        if (this.selectionDList[index].accStatus != 1) {
                            return this.$message.error("未生成账单");
                        }
                    }
                    this.$confirm("确定将选择数据撤销账单?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255,255,255,0.7)'
                        });
                        revokeBill({ id: this.form.id, feeCenterListD: this.selectionDList }).then(res => {
                            this.$message.success("成功撤销账单");
                            this.$emit('getDetails', this.form.id)
                        }).finally(() => {
                            loading.close();
                        })
                    })
                }
                if (type == 'C') {
                    for (let index in this.selectionCList) {
                        if (this.selectionCList[index].accStatus != 1) {
                            return this.$message.error("未生成账单");
                        }
                    }
                    this.$confirm("确定将选择数据撤销账单?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255,255,255,0.7)'
                        });
                        revokeBill({ id: this.form.id, feeCenterListC: this.selectionCList }).then(res => {
                            this.$message.success("成功撤销账单");
                            this.$emit('getDetails', this.form.id)
                        }).finally(() => {
                            loading.close();
                        })
                    })
                }
            }
            if (name == '增值税') {
                if (type == 'C') {
                    let obj = {}
                    obj = {
                        id: this.form.id,
                        type: 1
                    }
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    synchronization(obj).then(res => {
                        this.$message.success("操作成功");
                        this.$emit('getDetails', this.form.id)
                    }).finally(() => {
                        loading.close();
                    })
                }
            }
            if (name == '关税') {
                if (type == 'C') {
                    let obj = {}
                    obj = {
                        id: this.form.id,
                        type: 2
                    }
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    synchronization(obj).then(res => {
                        this.$message.success("操作成功");
                        this.$emit('getDetails', this.form.id)
                    }).finally(() => {
                        loading.close();
                    })
                }
            }
            if (name == '应收模板') {
                this.templateVisible = true
                losbfeestemplateGetListTemplate(1, 50, {
                    dc: type,
                    status: 0,
                    type: 'HYJK'
                }).then(res => {
                    this.templateData = res.data.data.records
                    // 查第一条的明细
                    losbfeestemplateDetail(this.templateData[0].id).then(res => {
                        this.templateRightData = res.data.data.feesTemplateItemsList
                    })
                })
            }
            if (name == '应付模板') {
                this.templateVisible = true
                losbfeestemplateGetListTemplate(1, 50, {
                    dc: type,
                    status: 0,
                    type: 'HYJK'
                }).then(res => {
                    this.templateData = res.data.data.records
                    // 查第一条的明细
                    losbfeestemplateDetail(this.templateData[0].id).then(res => {
                        this.templateRightData = res.data.data.feesTemplateItemsList
                    })
                })
            }
            if (name == '生成应付') {
                if (this.selectionDList.length == 0) return this.$message.error("请选择费用");
                let arr = this.deepClone(this.selectionDList)
                arr.forEach(e => {
                    e.dc = 'C'
                    delete e.id
                    delete e.createTime
                    delete e.createUser
                    delete e.createUserName
                    delete e.updateTime
                    delete e.updateUser
                    delete e.updateUserName
                })
                this.form.feeCenterListC = this.form.feeCenterListC.concat(arr)
            }
            if (name == '生成应收') {
                if (this.selectionCList.length == 0) return this.$message.error("请选择费用");
                let arr = this.deepClone(this.selectionCList)
                arr.forEach(e => {
                    e.dc = 'D'
                    delete e.id
                    delete e.createTime
                    delete e.createUser
                    delete e.createUserName
                    delete e.updateTime
                    delete e.updateUser
                    delete e.updateUserName
                })
                this.form.feeCenterListD = this.form.feeCenterListD.concat(arr)
            }
            if (name == '转押') {
                if (type == 'C') {
                    this.subDialog = true
                    this.onLoad(this.page, this.query);
                }
            }
            if (name == '撤销转押') {
                revokeTransferOfPledge({ id: this.form.id }).then(res => {
                    this.$message.success("撤销成功");
                    this.$emit('getDetails', this.form.id)
                })
            }
        },
        submitValidate() {
            if (this.form.feeCenterListD.length) {
                for (let row of this.form.feeCenterListD) {
                    if (!row.corpCnName || !row.feeCnName || !row.price || !row.quantity || !row.curCode) {
                        this.$refs.crudD.rowCell(row, row.$index)
                        this.$message.error((!row.corpCnName ? "往来单位，" : '') + (!row.feeCnName ? "费用名称，" : '') + (!row.price ? "单价，" : '') + (!row.quantity ? "数量，" : '') + (!row.curCode ? "币别，" : '') + "不能为空");
                        return false
                    }
                }
            }

            if (this.form.feeCenterListC.length) {
                for (let row of this.form.feeCenterListC) {
                    if (!row.corpCnName || !row.feeCnName || !row.price || !row.quantity || !row.curCode) {
                        this.$refs.crudC.rowCell(row, row.$index)
                        this.$message.error((!row.corpCnName ? "往来单位，" : '') + (!row.feeCnName ? "费用名称，" : '') + (!row.price ? "单价，" : '') + (!row.quantity ? "数量，" : '') + (!row.curCode ? "币别，" : '') + "不能为空");
                        return false
                    }
                }
                for (let index in this.form.feeCenterListC) {
                    if (this.form.feeCenterListC[index].feeCnName == '首款' || this.form.feeCenterListC[index].feeCnName == '尾款' || this.form.feeCenterListC[index].feeCnName == '手续费') {
                        if (!this.form.feeCenterListC[index].discountExrate) {
                            this.$message.error("第" + (Number(index) + 1) + "行" + this.form.feeCenterListC[index].feeCnName + "费用优惠汇率不能为空");
                            return false
                        }
                    }
                }
            }
            return true
        },
        //自定义列保存
        async saveColumn(ref, option, optionBack, code) {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
            }
        },
        //自定义列重置
        async resetColumn(ref, option, optionBack, code) {
            this[option] = this[optionBack];
            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
            }
        },
        tableRowClassName({ row }) {
            if (row.stlStatus == 1) {
                return 'class-row2';
            } else if (row.accStatus == 1) {
                return 'class-row1';
            }
            return '';
        }

    },
}
</script>
<style>
.class-row1 {
    color: #67C23A !important;
}

.class-row2 {
    color: #F56C6C !important;
}
</style>
<style scoped lang="scss">
.disabledBox {
    display: flex;
    align-items: center;
}

.fontSize {
    font-size: 16px;
    color: #81B337;
}

.meetSize {
    font-size: 16px;
    color: #54BCBD;
}

::v-deep#out-table .back-one {
    background: #ecf5ff !important;
    text-align: center;
    padding: 4px 0;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
    text-align: center;
    padding: 4px 0;
}

::v-deep .el-table--small td,
.el-table--small th {
    padding: 2px !important;
}
</style>