yf-admin-ui/src/views/iosBasicData/SeafreightExportF/bills/assembly/freightRate.vue

<template>
    <div>
        <el-dialog title="提取运价" :visible.sync="dialogVisible" append-to-body width="60%" :before-close="handleClose">
            <avue-crud v-if="dialogVisible" :option="option" :table-loading="loading" :data="data" ref="crud"
                @current-row-change="handleCurrentRowChange" id="out-table" :header-cell-class-name="headerClassName"
                @on-load="onLoad">
            </avue-crud>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="submit" size="mini">导 入</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { MktSlotQuotation, quotationImportBatch } from "@/api/iosBasicData/bills";
export default {
    props: {
    },
    data() {
        return {
            quotationId: null,
            ids: null,
            data: [],
            dialogVisible: false,
            loading: false,
            option: {
                height: 500,
                calcHeight: 30,
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                menu: false,
                header: false,
                highlightCurrentRow: true,
                column: [
                    {
                        label: "船公司",
                        prop: "actualShippingCompanyCname",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "开船日期",
                        prop: "etd",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "起运港",
                        prop: "polEnName",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "目的港",
                        prop: "podEnName",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "20GP",
                        prop: "gp20",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "40GP",
                        prop: "gp40",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "40HC",
                        prop: "hc40",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "20GP(COST)",
                        prop: "gp20Cost",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "40GP(COST)",
                        prop: "gp40Cost",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "40HC(COST)",
                        prop: "hc40Cost",
                        width: "100",
                        overHidden: true,
                    }
                ]
            },
        }
    },
    async created() {
        // this.option = await this.getColumnData(this.getColumnName(309.6), this.optionBack);
    },
    methods: {
        openDialog(val, ids) {
            this.dialogVisible = true
            this.quotationId = null
            this.ids = ids
            let obj = {
                ...val
            }
            this.loading = true
            MktSlotQuotation(obj).then(res => {
                this.data = res.data.data
            }).finally(() => {
                this.loading = false
            })
        },
        handleCurrentRowChange(val) {
            this.quotationId = val.id
        },
        submit() {
            if (!this.quotationId) {
                return this.$message.error("请选择数据");
            }
            const obj = {
                billsIds: this.ids,
                quotationId: this.quotationId
            }
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            quotationImportBatch(obj).then(res => {
                this.$message.success("操作成功");
                this.dialogVisible = false;
                this.$emit('refreshPage')
            }).finally(() => {
                loading.close();
            })
        },
        //自定义列保存
        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;
            }
        },

        // 更改表格颜色
        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;
    padding: 4px 0;
}

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