Smart_platform_ui/src/views/iosBasicData/amends/amendsDetails.vue

<template>
    <div class="borderless" v-loading="pageLoading">
        <div class="customer-head">
            <div class="customer-back">
                <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                           @click="backToList">返回列表
                </el-button>
            </div>
            <div class="add-customer-btn">
                <el-button  size="small" type="primary" style="margin-right: 8px"
                            :loading="saveLoading" >保 存
                </el-button>
            </div>
        </div>
        <div style="margin: 55px 5px 0px 5px;'">
            <el-card class="box-card">
                <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="原M B/L NO:" prop="mblno">
                                <el-input style="width: 100%;" v-model="form.mblno"
                                          size="small" autocomplete="off"
                                          clearable placeholder="请输入原M B/L NO" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="原H B/L NO:" prop="hblno">
                                <el-input style="width: 100%;" v-model="form.hblno"
                                          size="small" autocomplete="off"
                                          clearable placeholder="请输入原H B/L NO" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="原外提单号:" prop="refno">
                                <el-input style="width: 100%;" v-model="form.refno"
                                          size="small" autocomplete="off"
                                          clearable placeholder="请输入原外提单号" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="BOOKINGNO:" prop="bookingNo">
                                <el-input style="width: 100%;" v-model="form.bookingNo"
                                          size="small" autocomplete="off"
                                          clearable placeholder="请输入BOOKINGNO" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="AMEND原因:" prop="billNo">
                                <el-input style="width: 100%;" v-model="form.billNo"
                                          size="small" autocomplete="off"
                                          clearable placeholder="请输入AMEND" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-col :span="15">
                                <el-form-item label="客户名称:" prop="corpCnName">
                                    <el-input style="width: 100%;" v-model="form.corpCnName"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="客户名称" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="" prop="corpEnName" label-width="5px">
                                    <el-input style="width: 100%;" v-model="form.corpEnName"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="客户名称" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="业务类型:" prop="businessType">
                                <search-query :datalist="businessTypeData"
                                              :selectValue="form.businessType"
                                              :filterable="true"
                                              :disabled="true"
                                              :clearable="true"
                                              :remote="true"
                                              :buttonIf="false"
                                              placeholder="业务类型">
                                </search-query>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="原业务编号:" prop="billNo">
                                <el-input style="width: 100%;" v-model="form.origBillNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="原业务编号" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="制单日期:" prop="voucherDate">
                                <el-date-picker v-model="form.voucherDate" clearable
                                                style="width: 100%;"
                                                type="date" size="small"
                                                value-format="yyyy-MM-dd HH:mm"
                                                placeholder="选择制单日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="5">
                            <el-form-item label="船名:" prop="vesselCnName">
                                <el-input style="width: 100%;" v-model="form.vesselCnName"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="船名" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="航次:" prop="voyageNo">
                                <el-input style="width: 100%;" v-model="form.voyageNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="航次" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="ETD:" prop="etd">
                                <el-input style="width: 100%;" v-model="form.etd"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="ETD" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="ETA:" prop="eta">
                                <el-input style="width: 100%;" v-model="form.eta"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="ETA" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="业务编号:" prop="billNo">
                                <el-input style="width: 100%;" v-model="form.billNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="业务编号" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="件数:" prop="quantity">
                                <el-input style="width: 100%;" v-model="form.quantity"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="件数" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="毛重:" prop="grossWeight">
                                <el-input style="width: 100%;" v-model="form.grossWeight"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="毛重" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="尺码:" prop="measurement">
                                <el-input style="width: 100%;" v-model="form.measurement"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="尺码" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="箱型箱量:" prop="quantityCntrDescr">
                                <el-input style="width: 100%;" v-model="form.quantityCntrDescr"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="箱型箱量" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="原业务备注:" prop="origRemarks">
                                <el-input style="width: 100%;" v-model="form.origRemarks"
                                          type="textarea"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="原业务备注" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="备注:" prop="billNo">
                                <el-input style="width: 100%;" v-model="form.billNo" type="textarea"
                                          size="small" autocomplete="off"
                                          clearable placeholder="请输入备注" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="" prop="billNo" label-width="50px">
                                <el-button  size="small" type="primary" style="margin-right: 8px"
                                            :loading="saveLoading" @click="retrievalfun" >提取原业务信息
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card style="margin-top: 10px">
                <div style="margin-bottom: 10px">
                    <el-button  size="small" type="success" style="margin-right: 8px"
                                :loading="saveLoading" @click="addTablefun" >新增费用
                    </el-button>
                    <el-button type="danger" plain size="small">批量删除</el-button>
                    <!--<el-button type="success" plain size="small">应收账单-->
                    <!--</el-button>-->
                    <!--<el-button type="danger" plain size="small">撤销账单-->
                    <!--</el-button>-->
                    <el-button type="primary" plain size="small">打印账单</el-button>
                    <!--<el-button type="success" plain size="small">应收模板</el-button>-->
                    <!--<el-button type="info" plain size="small">保存账单</el-button>-->
                </div>
                <amends-costdetails :tableData="tableData"></amends-costdetails>
            </el-card>

            <el-card style="margin-top: 10px">
                <div style="font-size: 12px;margin-bottom: 5px">已生成账单费用：</div>
                <billgenerated></billgenerated>
                <billgenerated></billgenerated>
            </el-card>

        </div>
    </div>
</template>

<script>
    import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
    import amendsCostdetails from "@/views/iosBasicData/amends/assembly/amendsCostdetails.vue";
    import billgenerated from "@/views/iosBasicData/amends/assembly/billgenerated.vue";
    import {billsGetDetail} from "@/api/iosBasicData/bills";

    export default {
        components: {SearchQuery,amendsCostdetails,billgenerated},
        data(){
            return {
                tableData:[],
                pageLoading:false,
                saveLoading:false,
                form:{},
                businessTypeData:[
                    {
                        label:'海运出口AMEND',
                        value:'SEA'
                    },
                    {
                        label:'海运进口AMEND',
                        value:'SIA'
                    }
                ],
            }
        },
        methods:{
            addTablefun(){
                this.tableData.push({
                    edit:true
                })
            },
            // 检索
            retrievalfun(){
                if (!this.form.mblno && !this.form.hblno && !this.form.refno && !this.form.bookingNo) {
                    return this.$message.warning('请填写至少一项检索条件')
                }
                billsGetDetail({
                    mblno:this.form.mblno?this.form.mblno:null,
                    hblno:this.form.hblno?this.form.hblno:null,
                    refno:this.form.refno?this.form.refno:null,
                    bookingNo:this.form.bookingNo?this.form.bookingNo:null
                }).then(res=>{
                    console.log(res,292)

                })
            },
            //返回列表
            backToList() {
                this.$emit('goBack')
            },
        }
    }
</script>

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