yf-admin-ui/src/views/boxManagement/boxPoolDynamics/index.vue

<template>
    <div>
        <basic-container v-if="isShow">
            <el-button type="success" plain size="small" @click="allClick('POL空箱出场(EXCEL)')">POL空箱出场(EXCEL)</el-button>
            <!-- <el-button type="primary" plain size="small"
                                @click="allClick('POL返场(EXCEL)')">POL返场(EXCEL)</el-button> -->
            <el-button type="info" plain size="small" @click="allClick('POD空箱进场(EXCEL)')">POD空箱进场(EXCEL)</el-button>
            <!-- <el-button type="warning" plain size="small"
                                @click="allClick('空箱进场(excel)')">空箱进场(excel)</el-button> -->
            <el-button type="danger" plain size="small" @click="allClick('POL无货返空(EXCEL)')">POL无货返空(EXCEL)</el-button>
            <el-tabs v-model="activeName" type="card" style="margin-top: 8px;">
                <el-tab-pane label="按港口" name="1">
                    <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" @search-change="searchChange" @search-reset="searchReset"
                        @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
                        @on-load="onLoad">
                    </avue-crud>
                </el-tab-pane>
                <el-tab-pane label="按放箱号" name="2">
                    <avue-crud :option="option2" :table-loading="loading2" :data="data2" :page.sync="page2"
                        :search.sync="query2" v-model="form2" id="out-table" :header-cell-class-name="headerClassName"
                        ref="crud2" @search-change="searchChange2" @search-reset="searchReset2"
                        @current-change="currentChange2" @size-change="sizeChange2" @refresh-change="refreshChange2"
                        @on-load="onLoad2" @resetColumn="resetColumn('crud2', 'option2', 'optionBack2', 466)"
                        @saveColumn="saveColumn('crud2', 'option2', 'optionBack2', 466)">
                        <template slot="menuLeft">
                            <!-- <el-button type="primary" plain size="small"
                                @click="allClick('空箱出场(EDI)')">空箱出场(EDI)</el-button> -->
                            <!-- <el-button type="success" plain size="small"
                                @click="allClick('POL空箱出场(EXCEL)')">POL空箱出场(EXCEL)</el-button> -->
                            <!-- <el-button type="primary" plain size="small"
                                @click="allClick('POL返场(EXCEL)')">POL返场(EXCEL)</el-button> -->
                            <!-- <el-button type="info" plain size="small"
                                @click="allClick('POD空箱进场(EXCEL)')">POD空箱进场(EXCEL)</el-button> -->
                            <!-- <el-button type="warning" plain size="small"
                                @click="allClick('空箱进场(excel)')">空箱进场(excel)</el-button> -->
                            <!-- <el-button type="danger" plain size="small"
                                @click="allClick('POL无货返空(EXCEL)')">POL无货返空(EXCEL)</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>
                        </template>
                        <template slot="containerNumber" slot-scope="{ row }">
                            <span style="color: #1e9fff;cursor: pointer;" @click="rowEdit(row)">{{
                                row.containerNumber }}</span>
                        </template>
                    </avue-crud>
                </el-tab-pane>
                <el-tab-pane label="导入文件记录" name="3">
                    <avue-crud :option="option3" :table-loading="loading3" :data="data3" :page.sync="page3"
                        :search.sync="query3" v-model="form3" id="out-table" :header-cell-class-name="headerClassName"
                        ref="crud3" @search-change="searchChange3" @search-reset="searchReset3"
                        @current-change="currentChange3" @size-change="sizeChange3" @refresh-change="refreshChange3"
                        @on-load="onLoad3">
                        <template slot="menu" slot-scope="{ row, index }">
                            <el-button size="small" type="text" @click="rowDownload(row)">下载</el-button>
                        </template>
                    </avue-crud>
                </el-tab-pane>
            </el-tabs>
            <el-dialog title="导入数据" append-to-body :visible.sync="excelBox" width="555px" :close-on-click-modal="false"
                v-dialog-drag>
                <avue-form :option="excelOption" v-model="excelForm" :table-loading="excelLoading"
                    :upload-before="uploadBefore" :upload-after="onSuccess">
                    <template slot="excelTemplate">
                        <el-button type="primary" @click="handleGet">
                            点击下载<i class="el-icon-download el-icon--right"></i>
                        </el-button>
                    </template>
                </avue-form>
                <p style="text-align: center;color: #DC0505">
                    温馨提示 第一次导入时请先下载模板
                </p>
            </el-dialog>
        </basic-container>
        <detailsPage v-if="!isShow" :detailData="detailData" @goBack="goBack"></detailsPage>
    </div>
</template>

<script>
import { getList, getList2, getList3 } from "@/api/boxManagement/boxPoolDynamics/index.js";
import { getWorkDicts } from "@/api/system/dictbiz";
import detailsPage from "./detailsPage";
import { getToken } from "@/util/auth";
import _ from "lodash";
export default {
    data() {
        return {
            excelBox: false,
            excelForm: {},
            excelLoading: false,
            excelOption: {
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: "模板下载",
                        prop: "excelTemplate",
                        formslot: true,
                        span: 24
                    },
                    {
                        label: "模板上传",
                        prop: "excelFile",
                        type: "upload",
                        drag: true,
                        loadText: "模板上传中，请稍等",
                        span: 24,
                        propsHttp: {
                            res: "data"
                        },
                        tip: "请上传 .xls,.xlsx 标准格式文件",
                        action: "/api/blade-los/boxPool/emptyContainerAppearance"
                    }
                ]
            },
            activeName: '1',
            isShow: true,
            form: {},
            query: {},
            loading: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            form2: {},
            query2: {},
            loading2: false,
            page2: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            form3: {},
            query3: {},
            loading3: false,
            page3: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            option: {
                height: 'auto',
                calcHeight: 30,
                menuWidth: 70,
                tip: false,
                searchShow: true,
                searchMenuSpan: 18,
                header: false,
                menu: false,
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                searchIcon: true,
                align: 'center',
                searchIndex: 3,
                summaryText: "合计",
                showSummary: true,
                sumColumnList: [
                    {
                        name: 'total',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'remainingTotal',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'gp20Good',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'gp40Good',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'hg40Good',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'otherGood',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'gp20Bad',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'gp40Bad',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'hg40Bad',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'otherBad',
                        type: 'sum',
                        decimals: 0
                    }
                ],
                column: [
                    {
                        label: '港口',
                        prop: 'polName',
                        overHidden: true,
                        hide: true,
                        showColumn: false,
                        search: true,
                        searchOrder: 1,
                        type: "select",
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bports/list?status=0&size=5&current=1&cnName={{key}}",
                        props: {
                            label: "cnName",
                            value: "cnName",
                            desc: 'code',
                            res: "data.records"
                        }
                    },
                    {
                        label: '港口',
                        prop: 'portName',
                        overHidden: true,
                    },
                    {
                        label: '场站',
                        prop: 'stationName',
                        overHidden: true,
                    },
                    {
                        label: '放箱号类型',
                        prop: 'busType',
                        overHidden: true,
                    },
                    {
                        label: '场地盘存',
                        prop: 'total',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '操作占用',
                        prop: 'occupyNum',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '可用箱量',
                        prop: 'remainingTotal',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '好',
                        prop: 'good',
                        overHidden: true,
                        children: [
                            {
                                label: '20GP',
                                prop: 'gp20Good',
                                width: 60,
                                overHidden: true,
                            },
                            {
                                label: '40GP',
                                prop: 'gp40Good',
                                width: 60,
                                overHidden: true,
                            },
                            {
                                label: '40HG',
                                prop: 'hg40Good',
                                width: 60,
                                overHidden: true,
                            },
                            {
                                label: 'OTHER',
                                prop: 'otherGood',
                                width: 70,
                                overHidden: true,
                            }
                        ]
                    },
                    {
                        label: '坏',
                        prop: 'bad',
                        overHidden: true,
                        children: [
                            {
                                label: '20GP',
                                prop: 'gp20Bad',
                                width: 60,
                                overHidden: true,
                            },
                            {
                                label: '40GP',
                                prop: 'gp40Bad',
                                width: 60,
                                overHidden: true,
                            },
                            {
                                label: '40HG',
                                prop: 'hg40Bad',
                                width: 60,
                                overHidden: true,
                            },
                            {
                                label: 'OTHER',
                                prop: 'otherBad',
                                width: 70,
                                overHidden: true,
                            }
                        ]
                    },
                ]
            },
            option2: {},
            optionBack2: {
                height: 'auto',
                calcHeight: 30,
                menuWidth: 70,
                tip: false,
                searchShow: true,
                searchMenuSpan: 12,
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                searchIcon: true,
                align: 'center',
                searchIndex: 3,
                summaryText: "合计",
                showSummary: true,
                sumColumnList: [
                    {
                        name: 'total',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'remainingTotal',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'good',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'bad',
                        type: 'sum',
                        decimals: 0
                    }
                ],
                column: [
                    {
                        label: '放箱号',
                        prop: 'containerNumber',
                        width: 150,
                        overHidden: true,
                        search: true,
                        searchOrder: 1,
                    },
                    {
                        label: '放箱号类型',
                        prop: 'busType',
                        width: 150,
                        overHidden: true,
                        search: true,
                        searchOrder: 2,
                        type: 'select',
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=boxCategory",
                        props: {
                            label: "dictValue",
                            value: "dictValue"
                        },
                    },
                    {
                        label: '箱东',
                        prop: 'boxEastName',
                        width: 150,
                        overHidden: true,
                        hide: true,
                        showColumn: false,
                        search: true,
                        searchOrder: 3,
                        type: "select",
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/selectList?status=0&corpTypeName=箱东&size=5&current=1&shortName={{key}}",
                        props: {
                            label: "shortName",
                            value: "shortName",
                            desc: 'code',
                            res: "data.records"
                        }
                    },
                    {
                        label: '起运港',
                        prop: 'polName',
                        width: 150,
                        overHidden: true,
                        search: true,
                        searchOrder: 5,
                        type: "select",
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bports/list?status=0&size=5&current=1&cnName={{key}}",
                        props: {
                            label: "cnName",
                            value: "cnName",
                            desc: 'code',
                            res: "data.records"
                        }
                    },
                    {
                        label: '起运港场站/堆场',
                        prop: 'polStationName',
                        width: 150,
                        overHidden: true,
                    },
                    {
                        label: '目的港',
                        prop: 'podName',
                        width: 150,
                        overHidden: true,
                        search: true,
                        searchOrder: 6,
                        type: "select",
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bports/list?status=0&size=5&current=1&cnName={{key}}",
                        props: {
                            label: "cnName",
                            value: "cnName",
                            desc: 'code',
                            res: "data.records"
                        }
                    },
                    {
                        label: '目的运港场站/堆场',
                        prop: 'podStationName',
                        width: 150,
                        overHidden: true,
                    },
                    {
                        label: '箱型',
                        prop: 'boxType',
                        width: 150,
                        overHidden: true,
                        search: true,
                        searchOrder: 7,
                        type: "select",
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcntrtypes/list?status=0&size=20&current=1&cnName={{key}}",
                        props: {
                            label: "cnName",
                            value: "cnName",
                            res: "data.records"
                        }
                    },
                    {
                        label: '场地盘存',
                        prop: 'total',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '操作占用',
                        prop: 'occupyNum',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '可用箱量',
                        prop: 'remainingTotal',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '好',
                        prop: 'good',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '坏',
                        prop: 'bad',
                        width: 100,
                        overHidden: true,
                    },
                ]
            },
            option3: {
                height: 'auto',
                calcHeight: 30,
                menuWidth: 70,
                tip: false,
                searchShow: true,
                searchMenuSpan: 12,
                header: false,
                menu: true,
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                searchIcon: true,
                align: 'center',
                searchIndex: 3,
                column: [
                    {
                        label: '文件名',
                        prop: 'fileName',
                        overHidden: true,
                        search: true,
                    },
                    {
                        label: '文件地址',
                        prop: 'url',
                        overHidden: true,
                    },
                    {
                        label: '文件类型',
                        prop: 'type',
                        overHidden: true,
                        search: true,
                        type: 'select',
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_file_type",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                    },
                    {
                        label: '创建时间',
                        prop: 'createTime',
                        overHidden: true,
                    },
                ]
            },
            data: [],
        };
    },
    components: {
        detailsPage
    },
    async created() {
        this.option2 = await this.getColumnData(this.getColumnName(466), this.optionBack2);
    },
    methods: {
        uploadBefore(file, done, loading) {
            done();
            loading = true;
        },
        // 上传成功
        onSuccess(res, done, loading, column) {
            loading = false;
            done();
            this.excelBox = false;
            // this.$message.success("导入成功！");
            this.getDetail(this.detailData.id)

        },
        // 下载模板
        handleGet() {
            window.open(
                `/api/blade-los/boxPool/emptyContainerAppearance/template?${this.website.tokenHeader
                }=${getToken()}`
            );
        },
        rowDownload(row) {
            window.open(row.url);
        },
        allClick(name) {
            if (name == 'POL空箱出场(EXCEL)') {
                this.excelOption.column.forEach(item => {
                    if (item.prop == 'excelFile') {
                        item.action = "/api/blade-los/boxPool/emptyContainerAppearance"
                    }
                })
                this.excelBox = true
            }
            if (name == 'POD空箱进场(EXCEL)') {
                this.excelOption.column.forEach(item => {
                    if (item.prop == 'excelFile') {
                        item.action = "/api/blade-los/boxPool/giveAnEncore"
                    }
                })
                this.excelBox = true
            }
            if (name == 'POL无货返空(EXCEL)') {
                this.excelOption.column.forEach(item => {
                    if (item.prop == 'excelFile') {
                        item.action = "/api/blade-los/boxPool/returnEmpty"
                    }
                })
                this.excelBox = true
            }
        },
        addButton() {
            this.isShow = false
        },
        copyButton() {
            this.isShow = false
            this.detailData = {
                copyId: this.selectionList[0].id
            };
        },
        rowEdit(row) {
            this.detailData = {
                id: row.id
            };
            this.isShow = false
        },
        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;
                this.page.total = res.data.data.total;
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                    this.$refs.crud.dicInit();
                });
            }).finally(() => {
                this.loading = false;
            })
        },
        searchReset2() {
            this.query2 = this.$options.data().query2;
            this.onLoad2(this.page2);
        },
        // 搜索按钮点击
        searchChange2(params, done) {
            this.page2.currentPage = 1;
            this.onLoad2(this.page2, this.query2);
            done();
        },
        currentChange2(currentPage) {
            this.page2.currentPage = currentPage;
        },
        sizeChange2(pageSize) {
            this.page2.pageSize = pageSize;
        },
        refreshChange2() {
            this.onLoad2(this.page2, this.query2);
        },
        onLoad2(page, params = {}) {
            let obj = {}
            obj = {
                ...Object.assign(params, this.query2),
            }
            this.loading2 = true;
            getList2(page.currentPage, page.pageSize, obj).then(res => {
                this.data2 = res.data.data.records;
                this.page2.total = res.data.data.total;
                this.$nextTick(() => {
                    this.$refs.crud2.doLayout();
                    this.$refs.crud2.dicInit();
                });
            }).finally(() => {
                this.loading2 = false;
            })
        },
        searchReset3() {
            this.query3 = this.$options.data().query3;
            this.onLoad3(this.page3);
        },
        // 搜索按钮点击
        searchChange3(params, done) {
            this.page3.currentPage = 1;
            this.onLoad3(this.page3, this.query3);
            done();
        },
        currentChange3(currentPage) {
            this.page3.currentPage = currentPage;
        },
        sizeChange3(pageSize) {
            this.page3.pageSize = pageSize;
        },
        refreshChange3() {
            this.onLoad3(this.page3, this.query3);
        },
        onLoad3(page, params = {}) {
            let obj = {}
            obj = {
                ...Object.assign(params, this.query3),
            }
            this.loading3 = true;
            getList3(page.currentPage, page.pageSize, obj).then(res => {
                this.data3 = res.data.data.records;
                this.page3.total = res.data.data.total;
                this.$nextTick(() => {
                    this.$refs.crud3.doLayout();
                });
            }).finally(() => {
                this.loading3 = false;
            })
        },
        // 详情的返回列表
        goBack() {
            // 初始化数据
            if (JSON.stringify(this.$route.query) != "{}") {
                this.$router.$avueRouter.closeTag();
                this.$router.push({
                    path: "/boxManagement/buyContainer/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/routecost/exportRouteCost',      //跳转目标窗口的地址
                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.searchReset()
            }
        },
        //自定义列重置
        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.searchReset()
            }
        },
        // 更改表格颜色
        headerClassName(tab) {
            //颜色间隔
            let back = "back-two"
            // 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 lang="scss" 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>