tire-platform-ui/src/views/iosBasicData/costStatistics/index.vue

<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :search.sync="query"
            v-model="form" ref="crud" id="out-table" :header-cell-class-name="headerClassName" @row-del="rowDel"
            @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
            @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 411)"
            @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 411)" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button type="success" size="small" plain @click="Export">导出</el-button>
            </template>
            <template slot="header">
                <avue-crud :data="commodityData" :table-loading="itemLoading" :option="itemOption"></avue-crud>
            </template>
            <template slot="billNo" slot-scope="{row}">
                <span
                    style="color: #1e9fff;cursor: pointer;width: 100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
                    @click.stop="rowCell(row)">
                    {{ row.billNo }}
                </span>
            </template>
            <template slot="mblno" slot-scope="{row}">
                <span
                    style="color: #1e9fff;cursor: pointer;width: 100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
                    @click.stop="rowCell(row)">
                    {{ row.mblno }}
                </span>
            </template>
            <template slot="srcNo" slot-scope="{row}">
                <span
                    style="color: #1e9fff;cursor: pointer;width: 100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
                    @click.stop="rowCell(row)">
                    {{ row.srcNo }}
                </span>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getList, boxNumberProfitStatisticsSum } from "@/api/iosBasicData/costStatistics";
import { getToken } from "@/util/auth";
export default {
    data() {
        return {
            form: {},
            query: {},
            loading: false,
            itemLoading: false,
            page: {
                pageSize: 20,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            option: {},
            optionBack: {
                height: '600px',
                calcHeight: 30,
                searchShow: true,
                searchMenuSpan: 18,
                border: true,
                index: true,
                addBtn: false,
                menu: false,
                searchIcon: true,
                searchIndex: 3,
                dialogClickModal: false,
                emptyBtnText: '清空所有条件',
                column: [
                    {
                        label: "是否结算",
                        prop: "whetherSettlement",
                        width: '100',
                        search: true,
                        type: 'select',
                        dicData: [{
                            label: '已结算',
                            value: 1
                        }, {
                            label: '未结算',
                            value: 0
                        }],
                        overHidden: true,
                    },
                    {
                        label: "费用类型",
                        prop: "dc",
                        width: '100',
                        type: 'select',
                        search: true,
                        dicData: [{
                            label: '应收',
                            value: "D"
                        }, {
                            label: '应付',
                            value: "C"
                        }],
                        overHidden: true,
                    },
                    {
                        label: "费用名称",
                        prop: "feeName",
                        search: true,
                        type: 'select',
                        filterable: true,
                        dicUrl: '/api/blade-los/bfees/listAll',
                        overHidden: true,
                        props: {
                            label: "cnName",
                            value: "id"
                        },
                    },
                    {
                        label: "往来单位",
                        prop: "corpName",
                        type: 'select',
                        search: true,
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'id',
                            res: 'data.records'
                        },
                        overHidden: true,
                    },
                    {
                        label: "业务类型",
                        prop: "type",
                        type: 'select',
                        search: true,
                        multiple: true,
                        tags: true,
                        dataType: 'string',
                        dicData: [
                            {
                                label: '贸易代理',
                                value: "MYDL"
                            },
                            {
                                label: '海运出口',
                                value: "SE"
                            },
                            {
                                label: '海运进口',
                                value: "SI"
                            },
                            {
                                label: '海运出口amend',
                                value: "ASE"
                            },
                            {
                                label: '海运进口amend',
                                value: "ASI"
                            }
                        ],
                        overHidden: true,
                    },
                    {
                        label: "业务编号",
                        prop: "billNo",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "提单号",
                        prop: "mblno",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "来源编号",
                        prop: "srcNo",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "统计期间",
                        prop: "billDate",
                        search: true,
                        overHidden: true,
                        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: "金额(CNY)",
                        prop: "amount",
                        overHidden: true,
                    },
                    {
                        label: "金额(USD)",
                        prop: "amountUsd",
                        overHidden: true,
                    },
                    {
                        label: "结算金额(CNY)",
                        prop: "settlementAmount",
                        overHidden: true,
                    },
                    {
                        label: "结算金额(USD)",
                        prop: "settlementAmountUsd",
                        overHidden: true,
                    },
                    {
                        label: "余额(CNY)",
                        prop: "balanceAmount",
                        overHidden: true,
                    },
                    {
                        label: "余额(USD)",
                        prop: "balanceAmountUsd",
                        overHidden: true,
                    }
                ]
            },
            data: [],
            commodityData: [],
            itemOption: {
                border: true,
                align: 'center',
                header: false,
                menu: false,
                height: '90',
                column: [
                    {
                        label: "金额(CNY)",
                        prop: "amount",
                        overHidden: true,
                    },
                    {
                        label: "金额(USD)",
                        prop: "amountUsd",
                        overHidden: true,
                    },
                    {
                        label: "结算金额(CNY)",
                        prop: "settlementAmount",
                        overHidden: true,
                    },
                    {
                        label: "结算金额(USD)",
                        prop: "settlementAmountUsd",
                        overHidden: true,
                    },
                    {
                        label: "余额(CNY)",
                        prop: "balanceAmount",
                        overHidden: true,
                    },
                    {
                        label: "余额(USD)",
                        prop: "balanceAmountUsd",
                        overHidden: true,
                    }
                ]
            },
        };
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(411), this.optionBack)
    },
    methods: {
        rowCell(row) {
            if (row.type == 'MYDL') {
                this.$router.push({
                    path: `/tradeAgency/tradeAgency/index`,
                    query: {
                        params: row.srcId
                    }
                })
            }
            if (row.type == 'SE') {
                if (this.$store.getters.seaFEStatus) {
                    this.$alert("海运出口页面已存在,请关闭海运出口再进行操作", "温馨提示", {
                        confirmButtonText: "确定",
                        type: 'warning',
                        callback: action => {
                        }
                    });
                } else {
                    this.$router.push({
                        path: `/iosBasicData/SeafreightExportF/bills/index`,
                        query: {
                            id: row.srcId
                        }
                    })
                }
            }
            if (row.type == 'ASE') {
                if (this.$store.getters.SFEStatus) {
                    this.$alert("SEAMEND页面已存在,请关闭SEAMEND再进行操作", "温馨提示", {
                        confirmButtonText: "确定",
                        type: 'warning',
                        callback: action => {
                        }
                    });
                } else {
                    this.$router.push({
                        path: `/iosBasicData/seamends/index`,
                        query: {
                            id: row.srcId
                        }
                    })
                }
            }
            if (row.type == 'SI') {
                if (this.$store.getters.OceanFIStatus) {
                    this.$alert("海运进口页面已存在,请关闭海运进口再进行操作", "温馨提示", {
                        confirmButtonText: "确定",
                        type: 'warning',
                        callback: action => {
                        }
                    });
                } else {
                    this.$router.push({
                        path: `/iosBasicData/OceanFreightImport/bills/index`,
                        query: {
                            id: row.srcId
                        }
                    })
                }
            }
            if (row.type == 'ASI') {
                if (this.$store.getters.OFIStatus) {
                    this.$alert("SIAMEND页面已存在,请关闭SIAMEND再进行操作", "温馨提示", {
                        confirmButtonText: "确定",
                        type: 'warning',
                        callback: action => {
                        }
                    });
                } else {
                    this.$router.push({
                        path: `/iosBasicData/siamends/index`,
                        query: {
                            id: row.srcId
                        }
                    })
                }
            }
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        // 搜索点击回调
        searchChange(params, done) {
            this.page.currentPage = 1;
            if (params.etdList) {
                params = {
                    ...params,
                    startDate: params.etdList[0],
                    endDate: params.etdList[1],
                }
            }
            this.query = params
            this.onLoad(this.page, params);
            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 = {}) {
            if (params.etdList) {
                params = {
                    ...params,
                    startDate: params.etdList[0],
                    endDate: params.etdList[1],
                }
            }
            this.loading = true;
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                this.page.total = res.data.data.total;
                this.data = res.data.data.records
                this.getStatisticsSum(Object.assign(params, this.query))
                this.$nextTick(() => {
                    this.$refs.crud.refreshTable()
                    this.$refs.crud.dicInit()
                })
            }).finally(() => {
                this.loading = false;
            })
        },
        getStatisticsSum(params) {
            this.itemLoading = true
            boxNumberProfitStatisticsSum(params).then(res => {
                this.commodityData = [res.data.data]
            }).finally(() => {
                this.itemLoading = false;
            })
        },
        Export() {
            const routeData = this.$router.resolve({
                path: '/api/blade-los/financeStatistics/feeSettlementExport',//跳转目标窗口的地址
                query: {
                    'Blade-Auth': getToken(),
                    ...this.query
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length));
        },
        //自定义列保存
        async saveColumnTwo(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 resetColumnTwo(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;
            }
        },

        // 更改表格颜色
        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;
}

::v-deep .el-col-md-8 {
    width: 24.33333%;
}

::v-deep.el-form-item {
    margin-bottom: 0;
}
</style>