tire-platform-ui/src/views/tradeAgency/tradeAgency/index.vue

<template>
    <div>
        <basic-container v-if="isShow">
            <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :search.sync="query"
                v-model="form" id="out-table" :header-cell-class-name="headerClassName" ref="crud" @row-del="rowDel"
                @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
                @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
                @resetColumn="resetColumn('crud', 'option', 'optionBack', 375)"
                @saveColumn="saveColumn('crud', 'option', 'optionBack', 375)" @on-load="onLoad">
                <template slot="checkboxSearch">
                    <el-checkbox-group v-model="query.checkbox" @change="handleCheckedChange">
                        <el-checkbox v-for="item in statusList" :label="item.value" :key="item.value">{{ item.label
                        }}</el-checkbox>
                    </el-checkbox-group>
                    <!-- <avue-form v-model="query.checkbox" :option="checkboxOption"></avue-form> -->
                </template>
                <template slot="menuLeft">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="addButton">新 增
                    </el-button>
                    <el-button type="success" size="small" :disabled="selectionList.length != 1" @click="copyButton">复制订单
                    </el-button>
                    <el-button type="warning" size="small" @click="outExport">导 出
                    </el-button>
                    <el-button type="info" size="small" :disabled="selectionList.length == 0"
                        @click="allClick('生成申请收款')">生成货款收款
                    </el-button>
                    <el-button type="warning" size="small" :disabled="selectionList.length == 0"
                        @click="allClick('生成申请付款')">生成货款付款
                    </el-button>
                </template>
                <template slot="menu" slot-scope="{ row, index }">
                    <el-button size="small" icon="el-icon-edit" type="text" @click="rowEdit(row)">编辑</el-button>
                    <el-button size="small" icon="el-icon-delete" type="text" @click="rowDel(row, index)"
                        :disabled="row.orderStatus != '录入'">删 除</el-button>
                </template>
                <template slot="contractNo" slot-scope="{ row }">
                    <span style="color: #1e9fff" @click="rowEdit(row)">{{ row.contractNo }}</span>
                </template>
            </avue-crud>
        </basic-container>
        <detailsPage v-if="!isShow" :detailData="detailData" @goBack="goBack"></detailsPage>
        <el-dialog append-to-body title="申请费用" class="el-dialogDeep" :visible.sync="applyDialog" width="70%"
            :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" @closed="applyClosed"
            v-dialog-drag>
            <avue-crud ref="applyCrud" :data="applyData" :option="applyOptionList" @selection-change="applySelectionChange"
                @select="applySelectHandle">
                <tempalte slot="thisSettlementAmount" slot-scope="{ row }">
                    <el-input-number v-if="row.$cellEdit" v-model="row.thisSettlementAmount" @change="applyChange(row)"
                        :controls="false" placeholder="请输入 本次金额" size="small" style="width: 100%;"></el-input-number>
                </tempalte>
            </avue-crud>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="applyDialog = false">取 消</el-button>
                <el-button size="mini" :disabled="applySelectList.length == 0" type="primary" @click="applySubmit">提
                    交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { getList, remove, copyAgent, applyForPaymentList, generate } from "@/api/tradeAgency/tradeAgency";
import detailsPage from "./detailsPage";
import { getToken } from "@/util/auth";

export default {
    data() {
        return {
            applyDialog: false,
            applyData: [],
            applySelectList: [],
            detailData: {},
            applyOptionList: {
                header: false,
                tip: false,
                border: true,
                index: true,
                menu: false,
                selection: true,
                align: 'center',
                height: '450',
                column: [
                    {
                        label: "往来单位",
                        prop: "corpCnName",
                        overHidden: true,
                    },
                    {
                        label: "合同号",
                        prop: "billNo",
                        overHidden: true,
                    },
                    {
                        label: "提单号",
                        prop: "mblno",
                        overHidden: true,
                    },
                    {
                        label: "费用名称",
                        prop: "feeCnName",
                        overHidden: true,
                    },
                    {
                        label: "收费标准",
                        prop: "unitNo",
                        overHidden: true,
                    },
                    {
                        label: "单价",
                        prop: "price",
                        overHidden: true,
                    },
                    {
                        label: "数量",
                        prop: "quantity",
                        overHidden: true,
                    },
                    {
                        label: "金额",
                        prop: "amount",
                        overHidden: true,
                    },
                ]
            },
            isShow: true,
            form: {},
            query: {
                checkbox: [],
                businessType: 'MYDL',
            },
            loading: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            statusList: [
                {
                    label: '已开船',
                    value: 'whetherSail'
                },
                {
                    label: '已到港',
                    value: 'whetherReachHarbor'
                },
                {
                    label: '已通关',
                    value: 'whetherClearance'
                },
                {
                    label: '已派车',
                    value: 'whetherDispatchCar'
                },
                {
                    label: '已完成',
                    value: 'whetherComplete'
                },
                {
                    label: '已取消',
                    value: 'whetherCancel'
                }
            ],
            option: {},
            optionBack: {
                height: 'auto',
                calcHeight: 30,
                menuWidth: 140,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                selection: true,
                searchIcon: true,
                searchIndex: 3,
                column: [
                    {
                        label: "客户名称",
                        prop: "corpId",
                        overHidden: true,
                        search: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'id',
                            res: 'data.records'
                        },
                        hide: true,
                        showColumn: false,
                        searchOrder: 1,
                    },
                    {
                        label: "客户名称",
                        prop: "corpName",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "合同号",
                        prop: "contractNo",
                        width: "100",
                        overHidden: true,
                        search: true,
                        searchOrder: 2,
                    },
                    {
                        label: "提单号",
                        prop: "billNo",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 3,
                    },
                    {
                        label: "放单方式",
                        prop: "orderReleaseMethod",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "订单号",
                        prop: "orderNo",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 9,
                    },
                    {
                        label: "箱号",
                        prop: "boxNo",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 4,
                    },
                    {
                        label: "订单状态",
                        prop: "orderStatus",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "审核状态",
                        prop: "businessStatus",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "审单状态",
                        prop: "reviewStatus",
                        width: "120",
                        overHidden: true,
                        search: true,
                        searchOrder: 5,
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=audit_status",
                        props: {
                            label: "dictValue",
                            value: "dictValue"
                        },
                        hide: true,
                        showColumn: false,
                    },
                    {
                        label: "合同日期",
                        prop: "contractDate",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 00:00:00",
                        width: "120",
                        overHidden: true
                    },
                    {
                        label: "国家",
                        prop: "country",
                        width: "80",
                        overHidden: true
                    },
                    {
                        label: "通关进度",
                        prop: "clearanceSpeedOfProgress",
                        width: "120",
                        overHidden: true,
                        search: true,
                        searchOrder: 11,
                    },
                    {
                        label: "收货款",
                        prop: "whetherReceivedDownPayments",
                        width: "120",
                        overHidden: true,
                        search: true,
                        searchOrder: 12,
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=received_down",
                        props: {
                            label: "dictValue",
                            value: "dictValue"
                        },
                        hide: true,
                        showColumn: false,
                    },
                    {
                        label: "付汇",
                        prop: "whetherReceivedBalancePayment",
                        width: "120",
                        overHidden: true,
                        search: true,
                        searchOrder: 13,
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=received_balance",
                        props: {
                            label: "dictValue",
                            value: "dictValue"
                        },
                        hide: true,
                        showColumn: false,
                    },
                    {
                        label: "付汇记录",
                        prop: "paymentRecord",
                        width: "120",
                        overHidden: true
                    },
                    {
                        label: "运输方式",
                        prop: "typeOfShipping",
                        width: "120",
                        overHidden: true
                    },
                    {
                        label: "起运港",
                        prop: "polCnName",
                        width: "80",
                        overHidden: true
                    },
                    {
                        label: "目的港",
                        prop: "podCnName",
                        width: "80",
                        overHidden: true
                    },
                    {
                        label: "开船日期",
                        prop: "etd",
                        width: "120",
                        overHidden: true,
                        search: true,
                        searchOrder: 6,
                        searchProp: "etdList",
                        type: "date",
                        unlinkPanels: true,
                        searchRange: true,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        searchDefaultTime: ["00:00:00", "23:59:59"],
                    },
                    {
                        label: "预计到港",
                        prop: "estimateReachHarbor",
                        width: "120",
                        overHidden: true,
                        search: true,
                        searchOrder: 7,
                        searchProp: "estimateReachHarborList",
                        type: "date",
                        unlinkPanels: true,
                        searchRange: true,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        searchDefaultTime: ["00:00:00", "23:59:59"],
                    },
                    {
                        label: "实际到港",
                        prop: "actualReachHarbor",
                        width: "120",
                        overHidden: true,
                        search: true,
                        searchOrder: 8,
                        searchProp: "actualReachHarborList",
                        type: "date",
                        unlinkPanels: true,
                        searchRange: true,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        searchDefaultTime: ["00:00:00", "23:59:59"],
                    },
                    {
                        label: "PI发票号",
                        prop: "InvoiceNo",
                        width: "120",
                        overHidden: true,
                        search: true,
                        searchOrder: 10,
                        hide: true,
                        showColumn: false,
                    },
                    {
                        label: "币别",
                        prop: "currency",
                        width: "80",
                        overHidden: true
                    },
                    {
                        label: "总金额(USD)",
                        prop: "amount",
                        width: "100",
                        overHidden: true
                    },
                    {
                        label: "预付比例",
                        prop: "advanceRatio",
                        width: "120",
                        overHidden: true
                    },
                    {
                        label: "预付金额",
                        prop: "prepaidAmount",
                        width: "120",
                        overHidden: true
                    },
                    {
                        label: "铅封号",
                        prop: "leadSealNo",
                        width: "80",
                        overHidden: true
                    },
                    {
                        label: "金额",
                        prop: "amount",
                        width: "100",
                        overHidden: true
                    },
                    {
                        label: "首付实收",
                        prop: "downPaymentsNetReceipts",
                        width: "120",
                        overHidden: true
                    },
                    {
                        label: "尾款实收",
                        prop: "mblno",
                        width: "120",
                        overHidden: true
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        width: "80",
                        overHidden: true
                    },
                    {
                        label: "多选",
                        prop: "checkbox",
                        overHidden: true,
                        search: true,
                        searchSpan: 12,
                        searchOrder: 14,
                        hide: true,
                        showColumn: false,
                    }
                ]
            },
            data: [],
        };
    },
    components: {
        detailsPage,
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(375), this.optionBack);
    },
    methods: {
        handleCheckedChange() {
            delete this.query.whetherSail
            delete this.query.whetherReachHarbor
            delete this.query.whetherClearance
            delete this.query.whetherDispatchCar
            delete this.query.whetherComplete
            delete this.query.whetherCancel
            if (this.query.checkbox) {
                this.query.checkbox.forEach(e => {
                    this.query[e] = 1
                })
            }
        },
        applySelectionChange(list) {
            this.applySelectList = list;
        },
        applySelectHandle(selection, row) {
            if (row.feeType) {
                // 取消其中一个选中的时候 默认取消同单号的选中
                if (!selection.includes(row)) {
                    this.pickUp(false, row.feeType);
                } else {
                    this.pickUp(true, row.feeType);
                }
            }

        },
        // 需要默认勾选/取消的数据
        pickUp(bool, feeType) {
            let arr = [];
            this.applyData.forEach(e => {
                if (feeType == e.feeType) {
                    arr.push(e)
                }
            })
            this.toggleSelection(arr, bool);
        },
        // 默认选择/取消中的行
        toggleSelection(rows, bool) {
            if (rows) {
                this.$nextTick(() => {
                    rows.forEach(row => {
                        this.$refs.applyCrud.toggleRowSelection(row, bool);
                    });
                });
            } else {
                this.$refs.applyCrud.clearSelection();
            }
        },
        applyClosed() {
            this.applyData = []
        },
        applySubmit() {
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            generate(this.applySelectList).then(res => {
                this.$message.success("生成成功");
                this.applyDialog = false;
                this.onLoad(this.page);
            }).finally(() => {
                loading.close();
            })
        },
        addButton() {
            this.isShow = false
        },
        copyButton() {
            this.isShow = false
            this.detailData = {
                copyId: this.selectionList[0].id
            };
        },
        allClick(name) {
            if (name == '生成申请付款') {
                let ids = []
                this.selectionList.forEach(item => {
                    ids.push(item.id)
                })
                this.$confirm('是否生成申请付款?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    applyForPaymentList({ ids: ids.join(','), dc: 'C' }).then(res => {
                        this.applyDialog = true
                        this.applyData = res.data.data
                    })
                })

            }
            if (name == '生成申请收款') {
                let ids = []
                this.selectionList.forEach(item => {
                    ids.push(item.id)
                })
                this.$confirm('是否生成申请收款?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    applyForPaymentList({ ids: ids.join(','), dc: 'D' }).then(res => {
                        this.applyDialog = true
                        this.applyData = res.data.data
                    })
                })

            }
        },
        rowEdit(row) {
            this.detailData = {
                id: row.id
            };
            this.isShow = false
        },
        // 删除
        rowDel(row, index) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                remove({ ids: row.id }).then(res => {
                    this.onLoad(this.page, this.query);
                    this.$message.success("成功删除");
                })
            })

        },
        // 编辑
        inEdit(row) {
        },
        searchReset() {
            this.query = this.$options.data().query;
            this.onLoad(this.page);
        },
        // 搜索按钮点击
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            let obj = {}
            obj = {
                ...Object.assign(params, this.query),
            }
            this.loading = true;
            getList(page.currentPage, page.pageSize, obj).then(res => {
                this.data = res.data.data.records;
                console.log(res.data.data.records)
                this.page.total = res.data.data.total;
                console.log(this.page.total)
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                    this.$refs.crud.dicInit();
                });
            }).finally(() => {
                this.loading = false;
            })

        },
        // 详情的返回列表
        goBack() {
            // 初始化数据
            // if (JSON.stringify(this.$route.query) != "{}") {
            //     this.$router.$avueRouter.closeTag();
            //     this.$router.push({
            //         path: "/iosBasicData/accounts/index"
            //     });
            // }
            this.detailData = {}
            this.isShow = true;
            this.onLoad(this.page, this.query);
        },
        outExport() {
            let config = { params: { ...this.query } }
            if (config.params) {
                for (const propName of Object.keys(config.params)) {
                    const value = config.params[propName];
                    if (value !== null && typeof (value) !== "undefined") {
                        if (value instanceof Array) {
                            for (const key of Object.keys(value)) {
                                let params = propName + '[' + key + ']';
                                config.params[params] = value[key]
                            }
                            delete config.params[propName]
                        }
                    }
                }
            }
            const routeData = this.$router.resolve({
                path: '/api/blade-los/agentview/export',      //跳转目标窗口的地址
                query: {
                    ...config.params,    //括号内是要传递给新窗口的参数
                    identification: this.url
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        //自定义列保存
        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;
                this.queryReset()
            }
        },
        //自定义列重置
        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;
                this.queryReset()
            }
        },
        // 更改表格颜色
        headerClassName(tab) {
            //颜色间隔
            let back = ""
            if (tab.columnIndex >= 0 && tab.column.level === 1) {
                if (tab.columnIndex % 2 === 0) {
                    back = "back-one"
                } else if (tab.columnIndex % 2 === 1) {
                    back = "back-two"
                }
            }
            return back;
        },

    }
}

</script>
  
<style scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
    text-align: center;
}

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

.pointerClick {
    cursor: pointer;
    color: #1e9fff;
}

::v-deep .el-col-md-8 {
    width: 24.33333%;
}
</style>