tire-platform-ui/src/views/iosBasicData/SeafreightExportF/bills/assembly/edicode.vue

<template>
    <div>
        <el-form :model="assemblyForm" ref="form" label-width="90px" class="demo-ruleForm" :disabled="disabled">
            <el-row>
                <el-button icon="el-icon-plus" size="small" type="primary" style="margin: 5px;"
                    @click="openHmmEdi">现代EDI</el-button>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="ERNNO" prop="ediErnno">
                                <span slot="label">
                                    <span style="color: #1e9fff">ERNNO</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.detail.ediErnno"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder="请输入ERNNO"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="VAENO" prop="ediVaeno">
                                <span slot="label">
                                    <span style="color: #1e9fff">VAENO</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.detail.ediVaeno"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder="请输入VAENO"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="TACNO" prop="ediTacno">
                                <span slot="label">
                                    <span style="color: #1e9fff">TACNO</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.detail.ediTacno"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder="请输入TACNO"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="IEMAL" prop="ediIemail">
                                <span slot="label">
                                    <span style="color: #1e9fff">IEMAL</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.detail.ediIemail"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder="请输入IEMAL"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="自定义1" prop="userDefine1">
                                <span slot="label">
                                    <span style="color: #1e9fff">自定义1</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.hmmEdi.userDefine1"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="自定义2" prop="userDefine2">
                                <span slot="label">
                                    <span style="color: #1e9fff">自定义2</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.hmmEdi.userDefine2"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 此处不再重复显示
                    <el-form-item label="订舱备注" prop="bookingRemarks">
                        <span slot="label">
                            <span style="color: #1e9fff">订舱备注</span>
                        </span>
                        <el-input type="textarea" style="width: 100%;" v-model="assemblyForm.bookingRemarks"
                            size="small" autocomplete="off" :disabled="detailData.seeDisabled" rows="3" clearable
                            placeholder="请输入订舱备注"></el-input>
                    </el-form-item>
                    -->
                </el-col>
                <el-col :span="12">
                    <el-row>
                        <!--<el-col :span="12">-->
                        <!--    <el-form-item label="ACINO" prop="ediIegstin" >-->
                        <!--        <el-input type="age" style="width: 100%;" v-model="assemblyForm.ediIegstin"-->
                        <!--                  size="small" autocomplete="off"-->
                        <!--                  :disabled="detailData.seeDisabled"-->
                        <!--                  clearable placeholder="请输入ACINO" ></el-input>-->
                        <!--    </el-form-item>-->
                        <!--</el-col>-->
                        <el-col :span="12">
                            <el-form-item label="IEIEC" prop="ediIeiec">
                                <span slot="label">
                                    <span style="color: #1e9fff">IEIEC</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.detail.ediIeiec"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder="请输入IEIEC"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="IEGSTIN" prop="ediIegstin">
                                <span slot="label">
                                    <span style="color: #1e9fff">IEGSTIN</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.detail.ediIegstin"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder="请输入IEGSTIN"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="PIL HBL" prop="pilHbl">
                                <span slot="label">
                                    <span style="color: #1e9fff">PIL HBL</span>
                                </span>
                                <search-query :datalist="pilHblData" :selectValue="assemblyForm.pilHbl"
                                    :clearable="true" :disabled="detailData.seeDisabled" :buttonIf="false"
                                    :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey', }"
                                    placeholder="请选择PIL HBL" @corpChange="pilHblChange" @corpFocus="pilHblfun">
                                </search-query>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="自定义3" prop="userDefine3">
                                <span slot="label">
                                    <span style="color: #1e9fff">自定义3</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.hmmEdi.userDefine3"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="自定义4" prop="userDefine4">
                                <span slot="label">
                                    <span style="color: #1e9fff">自定义4</span>
                                </span>
                                <el-input type="age" style="width: 100%;" v-model="assemblyForm.hmmEdi.userDefine4"
                                    size="small" autocomplete="off" :disabled="detailData.seeDisabled" clearable
                                    placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 此处不再重复显示
                    <el-form-item label="SI备注" prop="siRemarks">
                        <span slot="label">
                            <span style="color: #1e9fff">SI备注</span>
                        </span>
                        <el-input type="textarea" style="width: 100%;" v-model="assemblyForm.siRemarks" size="small"
                            autocomplete="off" :disabled="detailData.seeDisabled" rows="3" clearable
                            placeholder="请输入SI备注"></el-input>
                    </el-form-item>
                    -->
                </el-col>
            </el-row>
        </el-form>
        <el-dialog title="HMM EDI信息" :visible.sync="dialogVisible" width="70%" :modal="false" :append-to-body="true">
            <avue-form :option="hmmOption" v-model="assemblyForm.hmmEdi" @submit="submitHmm" @reset-change="dialogVisible = false">
                <tempalte slot="applicant" slot-scope="{ row }">
                    <el-input v-model="assemblyForm.hmmEdi.applicant" placeholder="请输入 补充申报人" @input="upperCas('applicant',assemblyForm.hmmEdi.applicant)"></el-input>
                </tempalte>
                <tempalte slot="shipperCode" slot-scope="{ row }">
                    <el-input v-model="assemblyForm.hmmEdi.shipperCode" placeholder="请输入 发货人代码" @input="upperCas('shipperCode',assemblyForm.hmmEdi.shipperCode)"></el-input>
                </tempalte>
                <tempalte slot="actualShipperCode" slot-scope="{ row }">
                    <el-input v-model="assemblyForm.hmmEdi.actualShipperCode" placeholder="请输入 实际发货人代码" @input="upperCas('actualShipperCode',assemblyForm.hmmEdi.actualShipperCode)"></el-input>
                </tempalte>
                <tempalte slot="consigneeCode" slot-scope="{ row }">
                    <el-input v-model="assemblyForm.hmmEdi.consigneeCode" placeholder="请输入 收货人代码" @input="upperCas('consigneeCode',assemblyForm.hmmEdi.consigneeCode)"></el-input>
                </tempalte>
                <tempalte slot="notifierCode" slot-scope="{ row }">
                    <el-input v-model="assemblyForm.hmmEdi.notifierCode" placeholder="请输入 通知人代码" @input="upperCas('notifierCode',assemblyForm.hmmEdi.notifierCode)"></el-input>
                </tempalte>
                <tempalte slot="actualConsigneeCode" slot-scope="{ row }">
                    <el-input v-model="assemblyForm.hmmEdi.actualConsigneeCode" placeholder="请输入 实际收货人代码" @input="upperCas('actualConsigneeCode',assemblyForm.hmmEdi.actualConsigneeCode)"></el-input>
                </tempalte>
            </avue-form>
        </el-dialog>
    </div>
</template>

<script>
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { getWorkDicts } from "@/api/system/dictbiz";

export default {
    components: { SearchQuery },
    props: {
        assemblyForm: {
            type: Object
        },
        detailData: {
            type: Boolean,
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        var validateVariable = (rule, value, callback)=>  {
            if (!value) {
                callback();
            }
            const regex = /^[A-Z]{2}[A-Z0-9]{1,15}$/;
            if (!regex.test(value)) {
                callback(new Error('长度应为 3~17 个字符，不能出现特殊符号'));
            }
            callback();
        };
        return {
            pilHblData: [],
            reload: Math.random(),
            dialogVisible: false,
            hmmOption: {
                submitText: '确定',
                emptyText: '取消',
                labelWidth: 130,
                column: [
                    {
                        label: "欧线ENS申报标识",
                        span: 8,
                        prop: "emsDeclarationIdentification",
                        type: 'select',
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=ENS_Identification",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        rules: [{
                            required: true,
                            message: "请输入欧线ENS申报标识",
                            trigger: "blur",
                        }],
                    },
                    {
                        label: "舱单类型",
                        span: 8,
                        prop: "manifestType",
                        type: 'select',
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=manifest_Type",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                    },
                    {
                        label: "",
                        span: 8,
                        prop: "europeanLineSign",
                        type: 'checkbox',
                        dataType: 'string',
                        dicData: [{
                            label: '欧线标识',
                            value: 1
                        }]
                    },
                    {
                        label: "补充申报人",
                        span: 12,
                        prop: "applicant",
                        row: true,
                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                    },
                    {
                        label: "发货人代码",
                        span: 12,
                        prop: "shipperCode",
                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                    },
                    {
                        label: "实际发货人代码",
                        span: 12,
                        prop: "actualShipperCode",
                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                    },
                    {
                        label: "发货人邮政信箱",
                        span: 12,
                        prop: "shipperEmail",
                    },
                    {
                        label: "实际发货人名称",
                        span: 12,
                        prop: "actualShipperName",
                    },
                    {
                        label: "发货人街道号码",
                        span: 12,
                        prop: "shipperStreetNo",
                    },
                    {
                        label: "实际发货人地址",
                        span: 12,
                        prop: "actualShipperAddress",
                    },
                    {
                        label: "发货人街道名称",
                        span: 12,
                        prop: "shipperStreetName",
                    },
                    {
                        label: "实际发货人邮政信箱",
                        span: 12,
                        prop: "actualShipperEmail",
                    },
                    {
                        label: "发货人邮政编码",
                        span: 12,
                        prop: "shipperPostalCode",
                    },
                    {
                        label: "实际发货人街道号码",
                        span: 12,
                        prop: "actualShipperStreetNo",
                    },
                    {
                        label: "收货人代码",
                        span: 12,
                        prop: "consigneeCode",
                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                    },
                    {
                        label: "实际发货人街道名称",
                        span: 12,
                        prop: "actualShipperStreetName",
                    },
                    {
                        label: "收货人邮政信箱",
                        span: 12,
                        prop: "consigneeEmail",
                    },
                    {
                        label: "实际发货人邮政编码",
                        span: 12,
                        prop: "actualShipperPostalCode",
                    },
                    {
                        label: "收货人街道号码",
                        span: 12,
                        prop: "consigneeStreetNo",
                    },
                    {
                        label: "实际收货人代码",
                        span: 12,
                        prop: "actualConsigneeCode",
                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                    },
                    {
                        label: "收货人街道名称",
                        span: 12,
                        prop: "consigneeStreetName",
                    },
                    {
                        label: "实际收货人名称",
                        span: 12,
                        prop: "actualConsigneeName",
                    },
                    {
                        label: "收货人邮政编码",
                        span: 12,
                        prop: "consigneePostalCode",
                    },
                    {
                        label: "实际收货人地址",
                        span: 12,
                        prop: "actualConsigneeAddress",
                    },
                    {
                        label: "通知人代码",
                        span: 12,
                        prop: "notifierCode",
                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                    },
                    {
                        label: "实际收货人邮政信箱",
                        span: 12,
                        prop: "actualConsigneeEmail",
                    },
                    {
                        label: "通知人邮政信箱",
                        span: 12,
                        prop: "notifierEmail",
                    },
                    {
                        label: "实际收货人街道号码",
                        span: 12,
                        prop: "actualConsigneeStreetNo",
                    },
                    {
                        label: "通知人街道号码",
                        span: 12,
                        prop: "notifierStreetNo",
                    },
                    {
                        label: "实际收货人街道名称",
                        span: 12,
                        prop: "actualConsigneeStreetName",
                    },
                    {
                        label: "通知人街道名称",
                        span: 12,
                        prop: "notifierStreetName",
                    },
                    {
                        label: "实际收货人邮政编码",
                        span: 12,
                        prop: "actualConsigneePostalCode",
                    },
                    {
                        label: "通知人电话",
                        span: 12,
                        prop: "notifierTel",
                    },
                    {
                        label: "化工品标识",
                        span: 12,
                        prop: "chemicalIdentification",
                        type: 'select',
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=chemical_Identification",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                    },
                    {
                        label: "通知人邮政编码",
                        span: 12,
                        prop: "notifierPostalCode",
                    }
                ]
            }
        }
    },
    created() {
        this.pilHblfun();
    },
    methods: {
        pilHblChange(value) {
            this.$set(this.assemblyForm, 'pilHbl', value)
        },
        pilHblfun() {
            if (this.pilHblData.length == 0) {
                getWorkDicts('pilhbl_los').then(res => {
                    this.pilHblData = res.data.data
                })
            }
        },
        validateVariable(input) {
            if (typeof input !== 'string') {
                return false;
            }
            const regex = /^[A-Z0-9]{3,17}$/;
            return regex.test(input);
        },
        upperCas(name,str) {
            this.assemblyForm.hmmEdi[name]=str.toUpperCase()
        },
        submitHmm(res,done){
            done()
            console.log(res, 'hmmEdi')
            this.dialogVisible = false
        },
        openHmmEdi() {
            if (!this.assemblyForm.id) {
                return this.$message.error('请先保存数据');
            }
            this.dialogVisible = true
        },
        inHmmEdi() {
            if (!this.assemblyForm.id) {
                return this.$message.error('请先保存数据');
            }
            this.$DialogForm.show({
                title: 'HMM EDI信息',
                width: '70%',
                ref: 'ediRef',
                data: this.assemblyForm.hmmEdi,
                menuPosition: 'right',
                option: {
                    submitText: '确定',
                    emptyText: '取消',
                    labelWidth: 130,
                    column: [
                        {
                            label: "欧线ENS申报标识",
                            span: 8,
                            prop: "emsDeclarationIdentification",
                            type: 'select',
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=ENS_Identification",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                            rules: [{
                                required: true,
                                message: "请输入欧线ENS申报标识",
                                trigger: "blur",
                            }],
                        },
                        {
                            label: "舱单类型",
                            span: 8,
                            prop: "manifestType",
                            type: 'select',
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=manifest_Type",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        },
                        {
                            label: "",
                            span: 8,
                            prop: "europeanLineSign",
                            type: 'checkbox',
                            dataType: 'string',
                            dicData: [{
                                label: '欧线标识',
                                value: 1
                            }]
                        },
                        {
                            label: "补充申报人",
                            span: 12,
                            prop: "applicant",
                            row: true,
                            change: ({ value, column, item, dic }) => {
                                let that = this
                                that.$set(that.assemblyForm.hmmEdi, 'applicant', value.toUpperCase())
                            }
                        },
                        {
                            label: "发货人代码",
                            span: 12,
                            prop: "shipperCode",
                        },
                        {
                            label: "实际发货人代码",
                            span: 12,
                            prop: "actualShipperCode",
                        },
                        {
                            label: "发货人邮政信箱",
                            span: 12,
                            prop: "shipperEmail",
                        },
                        {
                            label: "实际发货人名称",
                            span: 12,
                            prop: "actualShipperName",
                        },
                        {
                            label: "发货人街道号码",
                            span: 12,
                            prop: "shipperStreetNo",
                        },
                        {
                            label: "实际发货人地址",
                            span: 12,
                            prop: "actualShipperAddress",
                        },
                        {
                            label: "发货人街道名称",
                            span: 12,
                            prop: "shipperStreetName",
                        },
                        {
                            label: "实际发货人邮政信箱",
                            span: 12,
                            prop: "actualShipperEmail",
                        },
                        {
                            label: "发货人邮政编码",
                            span: 12,
                            prop: "shipperPostalCode",
                        },
                        {
                            label: "实际发货人街道号码",
                            span: 12,
                            prop: "actualShipperStreetNo",
                        },
                        {
                            label: "收货人代码",
                            span: 12,
                            prop: "consigneeCode",
                        },
                        {
                            label: "实际发货人街道名称",
                            span: 12,
                            prop: "actualShipperStreetName",
                        },
                        {
                            label: "收货人邮政信箱",
                            span: 12,
                            prop: "consigneeEmail",
                        },
                        {
                            label: "实际发货人邮政编码",
                            span: 12,
                            prop: "actualShipperPostalCode",
                        },
                        {
                            label: "收货人街道号码",
                            span: 12,
                            prop: "consigneeStreetNo",
                        },
                        {
                            label: "实际收货人代码",
                            span: 12,
                            prop: "actualConsigneeCode",
                        },
                        {
                            label: "收货人街道名称",
                            span: 12,
                            prop: "consigneeStreetName",
                        },
                        {
                            label: "实际收货人名称",
                            span: 12,
                            prop: "actualConsigneeName",
                        },
                        {
                            label: "收货人邮政编码",
                            span: 12,
                            prop: "consigneePostalCode",
                        },
                        {
                            label: "实际收货人地址",
                            span: 12,
                            prop: "actualConsigneeAddress",
                        },
                        {
                            label: "通知人代码",
                            span: 12,
                            prop: "notifierCode",
                        },
                        {
                            label: "实际收货人邮政信箱",
                            span: 12,
                            prop: "actualConsigneeEmail",
                        },
                        {
                            label: "通知人邮政信箱",
                            span: 12,
                            prop: "notifierEmail",
                        },
                        {
                            label: "实际收货人街道号码",
                            span: 12,
                            prop: "actualConsigneeStreetNo",
                        },
                        {
                            label: "通知人街道号码",
                            span: 12,
                            prop: "notifierStreetNo",
                        },
                        {
                            label: "实际收货人街道名称",
                            span: 12,
                            prop: "actualConsigneeStreetName",
                        },
                        {
                            label: "通知人街道名称",
                            span: 12,
                            prop: "notifierStreetName",
                        },
                        {
                            label: "实际收货人邮政编码",
                            span: 12,
                            prop: "actualConsigneePostalCode",
                        },
                        {
                            label: "通知人电话",
                            span: 12,
                            prop: "notifierTel",
                        },
                        {
                            label: "化工品标识",
                            span: 12,
                            prop: "chemicalIdentification",
                            type: 'select',
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=chemical_Identification",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        },
                        {
                            label: "通知人邮政编码",
                            span: 12,
                            prop: "notifierPostalCode",
                        }
                    ]
                },
                beforeClose: (done) => {
                    done()
                },
                callback: (res) => {
                    res.done()
                    console.log(res.data, 'hmmEdi')
                    this.assemblyForm.hmmEdi = res.data
                    res.close()
                }
            })
        }
    }
}

</script>

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