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

<template>
    <div>
        <el-dialog title="客户订舱" :visible.sync="dialogVisible" append-to-body width="60%" :before-close="handleClose">
            <span>
                <trade-card title="基础信息">
                    <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm" :disabled="true">
                        <el-row>
                            <el-col span="12">
                                <el-row>
                                    <el-col span="12">
                                        <el-row>
                                            <el-form-item label="发货人" prop="hshipperDetails">
                                                <el-input type="textarea" style="width: 100%;"
                                                    v-model="form.detail.hshipperDetails" size="small"
                                                    autocomplete="off" :disabled="true" :rows="3" clearable></el-input>
                                            </el-form-item>
                                        </el-row>
                                        <el-row>
                                            <el-form-item label="收货人" prop="hconsigneeDetails">
                                                <el-input type="textarea" style="width: 100%;"
                                                    v-model="form.detail.hconsigneeDetails" size="small"
                                                    autocomplete="off" :disabled="true" :rows="3" clearable></el-input>
                                            </el-form-item>
                                        </el-row>
                                        <el-row>
                                            <el-form-item label="通知人" prop="hnotifyDetails">
                                                <el-input type="textarea" style="width: 100%;"
                                                    v-model="form.detail.hnotifyDetails" size="small" autocomplete="off"
                                                    :disabled="true" :rows="3" clearable></el-input>
                                            </el-form-item>
                                        </el-row>
                                    </el-col>
                                    <el-col span="12">
                                        <el-row>
                                            <el-form-item label="唛头" prop="marks">
                                                <el-input type="textarea" style="width: 100%;" v-model="form.marks"
                                                    size="small" autocomplete="off" :disabled="true" :rows="5"
                                                    clearable></el-input>
                                            </el-form-item>
                                        </el-row>
                                        <el-row>
                                            <el-form-item label="货物" prop="commodityDescr">
                                                <el-input type="textarea" style="width: 100%;"
                                                    v-model="form.commodityDescr" size="small" autocomplete="off"
                                                    :disabled="true" :rows="5" clearable></el-input>
                                            </el-form-item>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col span="12">
                                <el-row>
                                    <el-col span="12">
                                        <el-form-item label="装货港" prop="polCnName">
                                            <el-input style="width: 100%;" v-model="form.polCnName" size="small"
                                                :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col span="12">
                                        <el-form-item label="卸货港" prop="podCnName">
                                            <el-input style="width: 100%;" v-model="form.podCnName" size="small"
                                                :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="12">
                                        <el-form-item label="ETD" prop="etd">
                                            <el-date-picker v-model="form.etd" type="date" placeholder="请选择 ETD"
                                                :disabled="true" size="small" format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd" style="width: 100%;">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                                <el-row>
                                    <el-col span="12">
                                        <el-form-item label="付款方式" prop="mpaymode">
                                            <el-input style="width: 100%;" v-model="form.mpaymode" size="small"
                                                :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col span="12">
                                        <el-form-item label="运输条款" prop="serviceTerms">
                                            <el-input style="width: 100%;" v-model="form.serviceTerms" size="small"
                                                :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="12">
                                        <el-form-item label="件数" prop="quantity">
                                            <el-input style="width: 100%;" v-model="form.quantity" size="small"
                                                :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col span="12">
                                        <el-form-item label="包装" prop="packingUnit">
                                            <el-input style="width: 100%;" v-model="form.packingUnit" size="small"
                                                :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col span="12">
                                        <el-form-item label="毛重(KGS)" prop="grossWeight">
                                            <el-input style="width: 100%;" v-model="form.grossWeight" size="small"
                                                :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col span="12">
                                        <el-form-item label="尺码(CBM)" prop="measurement">
                                            <el-input style="width: 100%;" v-model="form.measurement" size="small"
                                                :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-form>
                </trade-card>
                <trade-card title="配箱信息">
                    <avue-crud :option="option" :table-loading="loading" :data="form.containersList" v-model="form"
                        id="out-table" :header-cell-class-name="headerClassName" ref="crud"
                        :row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }">
                    </avue-crud>
                </trade-card>
            </span>
            <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 { getDetail } from "@/api/iosBasicData/businessCenter/bookingCabin.js";
import { billLadingConfirm } from '@/api/iosBasicData/bills'
export default {
    props: {
        oldForm: {
            type: Object,
            default: () => { }
        },
    },
    data() {
        return {
            form: {},
            dialogVisible: false,
            option: {
                height: '200',
                calcHeight: 30,
                header: false,
                menu: false,
                column: [
                    {
                        label: "箱型",
                        prop: "cntrTypeCode",
                        width: "100",
                    },
                    {
                        label: "箱号",
                        prop: "cntrNo",
                        width: "140",
                        overHidden: true,
                    },
                    {
                        label: "封号",
                        prop: "sealNo",
                        width: "140",
                        overHidden: true,
                    },

                    {
                        label: "件数",
                        prop: "quantity",
                        width: "100",
                    },
                    {
                        label: "毛重(KGM)",
                        prop: "grossWeight",
                        width: "120",
                    },
                    {
                        label: "尺码/体积(CBM)",
                        prop: "measurement",
                        width: "140",
                    },
                    {
                        label: "箱皮重",
                        prop: "tare",
                        width: "140",
                        overHidden: true,
                    },
                    {
                        label: "VGM总重(KGM)",
                        prop: "vgmWeight",
                        width: "140",
                        overHidden: true,
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        type: 'textarea',
                        width: 180,
                        slot: true,
                        minRows: 3,
                        span: 24,
                    },
                    {
                        label: "POD堆场",
                        prop: "podStationCname",
                        width: "140",
                    },
                ]
            },
        }
    },
    async created() {
        // this.option = await this.getColumnData(this.getColumnName(309.6), this.optionBack);
    },
    methods: {
        openDialog(id) {
            this.dialogVisible = true
            const obj = {
                id: id,
                confirmStatus: 1
            }
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            getDetail(obj).then(res => {
                this.form = res.data.data
            }).finally(() => {
                loading.close()
            })
        },
        submit() {
            let text = []
            if (this.form.polCnName != this.oldForm.polCnName) {
                text.push('装货港')
            }
            if (this.form.podCnName != this.oldForm.podCnName) {
                text.push('卸货港')
            }
            if (this.form.quantity != this.oldForm.quantity) {
                text.push('件数')
            }
            if (this.form.grossWeight != this.oldForm.grossWeight) {
                text.push('毛重')
            }
            if (this.form.measurement != this.oldForm.measurement) {
                text.push('尺码')
            }
            if (text.length) {
                this.$confirm(`${text.join(",")}是否需要覆盖?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    billLadingConfirm(this.oldForm).then(res => {
                        this.$message.success("操作成功");
                        this.dialogVisible = false
                        this.$emit('upDate')
                    }).finally(() => {
                        loading.close()
                    })
                })
            } else {
                const loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255,255,255,0.7)'
                });
                billLadingConfirm(this.oldForm).then(res => {
                    this.$message.success("操作成功");
                    this.dialogVisible = false
                    this.$emit('upDate')
                }).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 lang="scss" 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;
}

::v-deep .el-form-item__error {
    display: none !important;
}

::v-deep .el-form-item {
    margin-bottom: 8px !important;
}

::v-deep .el-dialog__body {
    padding: 0px 20px !important;
}
</style>