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

<template>
    <div class="borderless" v-loading="pageLoading">
        <div class="customer-head">
            <div class="customer-back">
                <!--        <i class="back-icon el-icon-arrow-left"></i><i style="font-style:normal">返回管理列表</i>-->
                <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="" style="margin-right: 8px"
                            :loading="saveLoading" >预 览
                </el-button>
                <el-button  size="small" type="warning" style="margin-right: 8px"
                            :loading="saveLoading" >打 印
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px" v-if="detailData.seeDisabled"
                            :loading="saveLoading" @click="editHandle">编 辑
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px" v-else
                            :loading="saveLoading" @click="editCustomer">保 存
                </el-button>
            </div>
        </div>

        <div style="margin-top: 65px">
            <el-tabs type="border-card" v-model="bigtabs" @tab-click="bigHandleClick">
                <el-tab-pane label="委托信息" name="wt">
                    <div>
                        <div>
                            <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm">
                                <containerTitle title="基础资料"></containerTitle>
                                <basic-container :showBtn="true">
                                    <el-row :gutter="60">
                                        <el-col v-for="(item, index) in basicData.column" :key="index" :span="8">
                                            <!--数组-->
                                            <div v-if="item instanceof Array" style="display: flex;align-items: center;justify-content: space-between">
                                                <el-row>
                                                    <el-col :span="item[0].span?item[0].span:12">
                                                        <el-form-item :label="item[0].label" :prop="item[0].prop" :rules="item[0].rules"
                                                                      :label-width="item[0].labelWidth">
                                                    <span slot="label" v-if="item[0].label">
                                                        <span style="color: #1e9fff">{{item[0].label}}</span>
                                                    </span>
                                                            <!--<div v-if="item[0].type == 'button'" style="width: 100%;background: #1eff11" class="buttomBlNO">-->
                                                            <!--</div>-->
                                                            <el-button v-if="item[0].type == 'button'" :disabled="item[0].disabled"
                                                                       size="small" type="success" icon="el-icon-edit" circle
                                                                       @click="applyforfun(item[0].label)" >
                                                            </el-button>
                                                            <search-query v-else-if="item[0].type == 'select'"
                                                                          :datalist="item[0].dicData"
                                                                          :selectValue="form[item[0].prop]"
                                                                          :filterable="true"
                                                                          :clearable="true"
                                                                          :remote="true"
                                                                          :disabled="detailData.seeDisabled || item[0].disabled"
                                                                          :buttonIf="false"
                                                                          :forParameter="item[0].forParameter"
                                                                          @remoteMethod="remoteMethod($event,item[0].prop)"
                                                                          @corpChange="corpChange($event,item[0].prop)"
                                                                          @corpFocus="remoteMethod($event,item[0].prop)" >
                                                            </search-query>
                                                            <el-input v-else type="age" style="width: 100%;" v-model="form[item[0].prop]"
                                                                      size="small" autocomplete="off"
                                                                      :disabled="detailData.seeDisabled || item[0].disabled"
                                                                      clearable :placeholder="'请输入' + item[0].label" ></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="item[1].span?item[1].span:12">
                                                        <el-form-item :label="item[1].label" :prop="item[1].prop" :rules="item[1].rules"
                                                                      :label-width="item[1].labelWidth">
                                                    <span slot="label" v-if="item[1].label">
                                                        <span style="color: #1e9fff">{{item[1].label}}</span>
                                                    </span>
                                                            <el-date-picker v-if="item[1].type == 'date'"
                                                                            v-model="form[item[1].prop]" clearable style="width: 100%;"
                                                                            type="date" size="small" :disabled="detailData.seeDisabled || item[1].disabled"
                                                                            value-format="yyyy-MM-dd HH:mm"
                                                                            placeholder="选择日期">
                                                            </el-date-picker>
                                                            <search-query v-else-if="item[1].type == 'select'"
                                                                          :datalist="item[1].dicData"
                                                                          :selectValue="form[item[1].prop]"
                                                                          :filterable="true"
                                                                          :clearable="true"
                                                                          :remote="true"
                                                                          :disabled="detailData.seeDisabled || item[1].disabled"
                                                                          :buttonIf="false"
                                                                          :forParameter="item[1].forParameter"
                                                                          @remoteMethod="remoteMethod($event,item[1].prop)"
                                                                          @corpChange="corpChange($event,item[1].prop)"
                                                                          @corpFocus="remoteMethod($event,item[1].prop)" >
                                                            </search-query>

                                                            <tree-select v-else-if="item[1].type == 'tree'"
                                                                         v-model="form[item[1].prop]" filterable
                                                                         :data="item[1].dicData"
                                                                         :props="item[1].forParameter"
                                                                         nodeKey="title"
                                                                         size="small"
                                                                         :disabled="detailData.seeDisabled || item[1].disabled"
                                                                         :multiple="false"
                                                                         @input="corpChange($event,item[1].prop)">
                                                            </tree-select>

                                                            <el-input v-else type="age" style="width: 100%;" v-model="form[item[1].prop]"
                                                                      size="small" autocomplete="off"
                                                                      :disabled="detailData.seeDisabled || item[1].disabled"
                                                                      clearable :placeholder="'请输入' + item[1].label" ></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col v-if="item[2]" :span="item[2].span?item[2].span:12">
                                                        <el-form-item :label="item[2].label" :prop="item[2].prop" :rules="item[2].rules"
                                                                      :label-width="item[2].labelWidth">
                                                    <span slot="label" v-if="item[2].label">
                                                        <span style="color: #1e9fff">{{item[2].label}}</span>
                                                    </span>
                                                            <search-query v-if="item[2].type == 'select'"
                                                                          :datalist="item[2].dicData"
                                                                          :selectValue="form[item[2].prop]"
                                                                          :filterable="true"
                                                                          :clearable="true"
                                                                          :remote="true"
                                                                          :disabled="detailData.seeDisabled || item[2].disabled"
                                                                          :buttonIf="false"
                                                                          :forParameter="item[1].forParameter"
                                                                          @remoteMethod="remoteMethod($event,item[2].prop)"
                                                                          @corpChange="corpChange($event,item[2].prop)"
                                                                          @corpFocus="remoteMethod($event,item[2].prop)" >
                                                            </search-query>
                                                            <el-input v-else type="age" style="width: 100%;" v-model="form[item[2].prop]"
                                                                      size="small" autocomplete="off"
                                                                      :disabled="detailData.seeDisabled || item[1].disabled"
                                                                      clearable :placeholder="'请输入' + item[2].label" ></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                            <!--对象-->
                                            <div v-else>
                                                <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                                                    <span slot="label" v-if="item.label">
                                                        <span style="color: #1e9fff">{{item.label}}</span>
                                                    </span>
                                                    <search-query v-if="item.type == 'select'"
                                                                  :datalist="item.dicData"
                                                                  :selectValue="form[item.prop]"
                                                                  :filterable="true"
                                                                  :clearable="true"
                                                                  :remote="true"
                                                                  :disabled="detailData.seeDisabled || item.disabled"
                                                                  :buttonIf="item.buttonIf"
                                                                  :forParameter="item.forParameter"
                                                                  @remoteMethod="remoteMethod($event,item.prop)"
                                                                  @corpChange="corpChange($event,item.prop)"
                                                                  @corpFocus="remoteMethod($event,item.prop)">
                                                        <bcorps v-if="item.slot == 'bcorps'"></bcorps>
                                                        <bcorpstypedefine v-if="item.slot == 'bcorpstypedefine'"></bcorpstypedefine>
                                                    </search-query>
                                                    <el-input v-else type="age" style="width: 100%;" v-model="form[item.prop]"
                                                              size="small" autocomplete="off"
                                                              :disabled="detailData.seeDisabled || item.disabled"
                                                              clearable :placeholder="'请输入' + item.label" ></el-input>
                                                </el-form-item>
                                            </div>

                                        </el-col>

                                    </el-row>
                                </basic-container>
                            </el-form>
                        </div>
                        <div class="customer-main margintop">
                            <containerTitle title="详细"></containerTitle>
                            <basic-container :showBtn="true">
                                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                                    <el-tab-pane label="委托详情" name="first">
                                        <entrustment-lnformation :assemblyForm="form" :detailData="detailData" @billsDetailfun="billsDetailfun(form.id)"></entrustment-lnformation>
                                    </el-tab-pane>
                                    <el-tab-pane label="配箱处理" name="second">
                                        <DistributionBox :assemblyForm="form" :detailData="detailData" @billsDetailfun="billsDetailfun(form.id)"></DistributionBox>
                                    </el-tab-pane>
                                    <el-tab-pane label="MB/L信息" name="third">
                                        <mbinformation :assemblyForm="form" :detailData="detailData"></mbinformation>
                                    </el-tab-pane>
                                    <el-tab-pane label="单证中心" name="fourth">单证中心</el-tab-pane>
                                    <el-tab-pane label="EDI CODE" name="sixth">
                                        <edicode :assemblyForm="form" :detailData="detailData"></edicode>
                                    </el-tab-pane>
                                    <el-tab-pane label="文件中心" name="seventh">
                                        <filescenter :assemblyForm="form" :detailData="detailData"></filescenter>
                                    </el-tab-pane>
                                </el-tabs>
                            </basic-container>
                            <basic-container :showBtn="true" v-if="activeName == 'first' || activeName == 'third'">
                                <formbottom :assemblyForm="form" :detailData="detailData"></formbottom>
                            </basic-container>

                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="费用信息" name="fy">
                    <feecenter :assemblyForm="form" :detailData="detailData" :pid="form.id" @billsDetailfun="billsDetailfun(form.id)"></feecenter>
                </el-tab-pane>
                <el-tab-pane label="分单列表" name="fd">
                    <Split-list :detailData="detailData" :assemblyForm="form"
                                :data="billsListAllData"
                                @billsListAllfun="billsListAllfun(this.form.id)"></Split-list>
                </el-tab-pane>
            </el-tabs>
        </div>


    </div>
</template>

<script>
import EntrustmentLnformation from "@/views/iosBasicData/SeafreightExportF/bills/assembly/EntrustmentLnformation.vue";
import mbinformation from "@/views/iosBasicData/SeafreightExportF/bills/assembly/mbinformation.vue";
import formbottom from "@/views/iosBasicData/SeafreightExportF/bills/assembly/formbottom.vue";
import edicode from '@/views/iosBasicData/SeafreightExportF/bills/assembly/edicode.vue'
import filescenter from "@/views/iosBasicData/SeafreightExportF/bills/assembly/filescenter.vue";
import DistributionBox from "@/views/iosBasicData/SeafreightExportF/bills/assembly/DistributionBox.vue";
import feecenter from '@/views/iosBasicData/SeafreightExportF/bills/assembly/feecenter.vue'
import {getList as userGetList} from '@/api/system/user'
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import TreeSelect from "@/components/iosbasic-data/TreeSelect.vue";
import bcorps from "@/views/iosBasicData/bcorps/index.vue";
import bcorpstypedefine from "@/views/iosBasicData/bcorps/bcorpstypedefine.vue";
import SplitList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/SplitList.vue";
import {getLazylist} from "@/api/basicData/agreement";
import {getBcorpsList, getBcorpslistByType} from "@/api/iosBasicData/bcorps";
import {getBlocationsList} from "@/api/iosBasicData/blocations";
import {getBcorpsattnList} from "@/api/iosBasicData/bcorpsattn";
import {getWorkDicts} from "@/api/system/dictbiz";
import {getDeptLazyTree, getDeptTree, getLazyList} from "@/api/system/dept";
import {billsDetail, billsGetBillNo, billsListAll, billsSubmit,deptGetDetailPol} from '@/api/iosBasicData/bills'
import {dateFormat} from "@/util/date";
    export default {
        components:{
            SearchQuery,
            EntrustmentLnformation,
            formbottom,
            mbinformation,
            edicode,
            filescenter,
            DistributionBox,
            feecenter,
            bcorps,
            bcorpstypedefine,
            SplitList,
            TreeSelect
        },
        props:{
            detailData: {
                type: Object
            }
        },
        data() {
            return {
                // 分单列表数据
                billsListAllData:[],
                pageLoading:false,
                saveLoading:false,
                // 详情数据
                form:{
                    billDate:dateFormat(new Date(), "yyyy-MM-dd") + ' 00:00', // 单据日期 默认 当天
                    operatorName:JSON.parse(localStorage.getItem('saber-userInfo')).content.user_name, // OP 默认登录人
                    operatorId:JSON.parse(localStorage.getItem('saber-userInfo')).content.user_id, // OP 默认登录人
                    businessType:'SE', // 业务类型 默认 海运出口
                    billType:'DD', // 单据类型 默认 直单
                    accDeptName:'',// 核算部门 默认登录人的部门
                    issueType:'正本', // 签单方式 默认 正本
                    mpaymode:'PP', // 主单付费方式 默认PP
                    hpaymode:'PP', // 分单付费方式 默认 PP
                    loadType:'FCL', // 装箱方式默认整箱
                    srcType:'OWN', // 业务来源默认公司   来源 内容 默认登录人所属公司
                    numberOfObl:'THREE', // 正本份数 默认 THREE
                    numberOfCopy:'ONE', // 副本份数 默认 ONE
                    seaType:'E', // 进出口 默认出口 E=出口 I=进口"
                    cargoType:'dry', // 货物类型默认普货
                },
                basicData:{
                    column:[
                        {
                            label: "客户名称", // 调往来单位接口
                            prop: "corpCnName",
                            type:'select',
                            dicData:[],
                            disabled:false,
                            buttonIf:true,
                            slot:'bcorps',
                            forParameter:{
                                key:'id',
                                label:'cnName',
                                value:'cnName',
                            },
                            rules: [{
                                required: true,
                                message: "请输入客户名称",
                                trigger: "blur"
                            }]
                        },
                        [
                            {
                                label: "客户OP", // 客户联系人姓名 电话和邮箱带出来，可以修改 往来单位接口 需要传一个客户名称的值过去
                                prop: "corpAttnName",
                                type:'select',
                                dicData:[],
                                span:10,
                                disabled:true,
                                forParameter:{
                                    key:'id',
                                    label:'cname',
                                    value:'cname',
                                },
                            },
                            {
                                label: "", //客户联系人电话
                                prop: "corpAttnTel",
                                labelWidth:'10px',
                                disabled:true,
                                span:7,
                                rules: [{
                                    required: true,
                                    message: "",
                                    trigger: "blur"
                                }]
                            },
                            {
                                label: "", // 客户联系人邮箱
                                prop: "corpAttnEmail",
                                labelWidth:'10px',
                                disabled:true,
                                span:7,
                                rules: [{
                                    required: true,
                                    message: "请输入客户联系人邮箱",
                                    trigger: "blur"
                                }]
                            },
                        ],
                        [
                            {
                                label: "业务来源", // OWN=公司  AGENT=代理 SALES=业务员
                                prop: "srcType",
                                type:'select',
                                disabled:false,
                                dicData:[
                                    {
                                        label:'公司',
                                        value:'OWN'
                                    },
                                    {
                                        label:'代理',
                                        value:'AGENT'
                                    },
                                    {
                                        label:'业务员',
                                        value:'SALES'
                                    }
                                ],
                            },
                            {
                                label: "",
                                prop: "srcCnName", // 来源中文 公司不是下拉写死公司两字 业务员调用户管理列表 代理调往来单位四个代理数据
                                labelWidth:'10px',
                                type:'select',
                                disabled:true,
                                dicData:[],
                                forParameter:{
                                    key:'id',
                                    label:'cnName',
                                    value:'cnName',
                                },
                            },
                        ],
                        [
                            {
                                label: "MB/L NO",
                                prop: "mblno",
                                span:19,
                                disabled:false,

                            },
                            {
                                label: "",  // MB/L 付款方式 PP=预付, CC=到付, FPA, Other
                                prop: "mpaymode",
                                type:'select',
                                labelWidth:'10px',
                                disabled:false,
                                span:5,
                                dicData:[
                                    {
                                        label:'预付',
                                        value:'PP'
                                    },
                                    {
                                        label:'到付',
                                        value:'CC'
                                    }
                                ],
                            },
                        ],
                        [
                            {
                                label: "申请B/L NO",  //弹窗点击确认还是取消申请 调后台接口获取到一个编号
                                prop: "申请B/L NO",
                                type:'button',
                                span:7,
                                disabled:false,
                            },
                            {
                                label: "",
                                prop: "hblno",
                                labelWidth:'10px',
                                span:12,
                                disabled:true,
                            },
                            {
                                label: "", // HB/L 付款方式 PP=预付, CC=到付, FPA, Other', 申请之后默认 PP
                                prop: "hpaymode",
                                labelWidth:'10px',
                                disabled:false,
                                type:'select',
                                span:5,
                                dicData:[
                                    {
                                        label:'预付',
                                        value:'PP'
                                    },
                                    {
                                        label:'到付',
                                        value:'CC'
                                    }
                                ],
                            },
                        ],
                        {
                            label: "booking NO", // 订舱号
                            prop: "bookingNo",
                            disabled:false,
                        },
                        {
                            label: "外提单号", // Co-Loader 中文名称  往来单位 类别
                            prop: "refno",
                            disabled:false,
                        },
                        [
                            {
                                label: "业务编号",
                                prop: "billNo",
                                disabled:true,
                            },
                            {
                                label: "单据日期",
                                prop: "billDate",
                                type:'date',
                                disabled:false,
                                rules: [{
                                    required: true,
                                    message: "请输入单据日期",
                                    trigger: "blur"
                                }]
                            },
                        ],
                        [
                            {
                                label: "OP",  // 操作id 用户管理下拉 模糊搜索
                                prop: "operatorName",
                                type:'select',
                                dicData:[],
                                disabled:false,
                                forParameter:{
                                    key:'id',
                                    label:'name',
                                    value:'name',
                                },
                                rules: [{
                                    required: true,
                                    message: "请选择OP",
                                    trigger: "blur"
                                }]
                            },
                            {
                                label: "核算部门", // 核算部门Id accDept 核算部门 accDeptName 调机构管理接口
                                prop: "accDeptName",
                                type:'tree',
                                dicData:[],
                                disabled:false,
                                forParameter:{
                                    label: "title",
                                    children:'children'
                                },
                                rules: [{
                                    required: true,
                                    message: "请选择核算部门",
                                    trigger: "blur"
                                }]
                            },
                            // {
                            //     label: "业务类型", // SE=海运出口 SI=海运进口"
                            //     prop: "businessType",
                            //     type:'select',
                            //     disabled:false,
                            //     dicData:[
                            //         {
                            //             label:'海运出口',
                            //             value:'SE'
                            //         },
                            //         {
                            //             label:'海运进口',
                            //             value:'SI'
                            //         },
                            //     ],
                            //     rules: [{
                            //         required: true,
                            //         message: "请输入业务类型",
                            //         trigger: "blur"
                            //     }]
                            // },
                        ],
                        // [
                        //     {
                        //         label: "单据类型", // DD=直单(默认) MM=主单 MH=分单 HH=从分单
                        //         prop: "billType",
                        //         type:'select',
                        //         disabled:false,
                        //         dicData:[
                        //             {
                        //                 label:'直单',
                        //                 value:'DD'
                        //             },
                        //             {
                        //                 label:'主单',
                        //                 value:'MM'
                        //             },
                        //             {
                        //                 label:'分单',
                        //                 value:'MH'
                        //             }
                        //         ],
                        //         rules: [{
                        //             required: true,
                        //             message: "请输入单据类型",
                        //             trigger: "blur"
                        //         }]
                        //     },
                        //     {
                        //         label: "核算部门", // 核算部门Id accDept 核算部门 accDeptName 调机构管理接口
                        //         prop: "accDeptName",
                        //         type:'tree',
                        //         dicData:[],
                        //         disabled:false,
                        //         forParameter:{
                        //             label: "title",
                        //             children:'children'
                        //         },
                        //         rules: [{
                        //             required: true,
                        //             message: "请选择核算部门",
                        //             trigger: "blur"
                        //         }]
                        //     },
                        // ],
                        // [
                        //     {
                        //         label: "签单方式",
                        //         prop: "issueType",
                        //         type:'select',
                        //         dicData:[],
                        //         disabled:false,
                        //         forParameter:{
                        //             key:'dictKey',
                        //             label:'dictValue',
                        //             value:'dictValue',
                        //         },
                        //         rules: [{
                        //             required: true,
                        //             message: "请输入签单方式",
                        //             trigger: "blur"
                        //         }]
                        //     },
                        //     {
                        //         label: "装箱方式", // FCL=整箱， LCL=拼箱",
                        //         prop: "loadType",
                        //         type:'select',
                        //         disabled:false,
                        //         dicData:[
                        //             {
                        //                 label:'整箱',
                        //                 value:'FCL'
                        //             },
                        //             {
                        //                 label:'拼箱',
                        //                 value:'LCL'
                        //             }
                        //         ],
                        //         rules: [{
                        //             required: true,
                        //             message: "请输入装箱方式",
                        //             trigger: "blur"
                        //         }]
                        //     },
                        // ],
                        // {
                        //     label: "付费地点", // MB/L 付款地点 地点管理表
                        //     prop: "mPayplace",
                        //     type:'select',
                        //     dicData:[],
                        //     disabled:false,
                        //     buttonIf:false,
                        //     forParameter:{
                        //         key:'id',
                        //         label:'cnName',
                        //         value:'cnName',
                        //     },
                        // },
                        // {
                        //     label: "COLOADER", // Co-Loader 中文名称  往来单位 类别
                        //     prop: "coloaderCnName",
                        //     type:'select',
                        //     dicData:[],
                        //     slot:'bcorpstypedefine',
                        //     buttonIf:true,
                        //     disabled:false,
                        //     forParameter:{
                        //         key:'id',
                        //         label:'cnName',
                        //         value:'cnName',
                        //     },
                        // },

                    ]
                },
                activeName:'first',
                bigtabs:'wt',
                saberUserInfo:{}, // 当前登录人信息
            }
        },
        watch:{
            'form.billType':{
                // 执行方法
                handler(oldValue,newValue) {
                    // 只要分单不能编辑
                    if (oldValue == 'MH') {
                        this.columnforfun('hblno').disabled = true
                    }else {
                        this.columnforfun('hblno').disabled = false
                    }
                },
                deep: true, // 深度监听
                immediate: true  // 第一次改变就执行
            }
        },
        created() {
            this.saberUserInfo = JSON.parse(localStorage.getItem('saber-userInfo')).content
            // 判断是否员id, 有id 就不显示
            if (!this.form.id) {
                this.deptGetDetailPolfun() // 收货地 装货港 当前登录人的默认
                this.userGetListfun(undefined,true) // 获取用户管理数据
            }
            this.ownDeptLazyTreefun() // 获取公司数据
            this.getLazylistfun() // 获取审核数据
        },
        methods:{
            // 收货地 装货港 当前登录人的默认
            deptGetDetailPolfun(){
                deptGetDetailPol(this.saberUserInfo.dept_id).then(res=>{
                    // 收货地
                    this.form.placeReceiptName = res.data.data.polEnName
                    this.form.placeReceiptId = res.data.data.polId
                    this.form.placeReceiptNamePrint = res.data.data.polEnName
                    // 装货港
                    this.form.polCnName = res.data.data.polCnName
                    this.form.polEnName = res.data.data.polEnName
                    this.form.polId = res.data.data.polId
                    this.form.polNamePrint = res.data.data.polEnName
                    // 签单地点 默认 装货港
                    this.$set(this.form,'issueAt',this.form.polCnName)
                    // 主单单付费地点 默认  如果主单付费方式 为PP 取装货港 如果主单付费地点为CC 取卸货港
                    if (this.form.mpaymode == 'PP') {
                        this.$set(this.form,'mPayplace',this.form.polCnName)
                    }
                    // 分单单付费地点 默认  如果分单付费方式 为PP 取装货港 如果分单付费地点为CC 取卸货港
                    if (this.form.hpaymode == 'PP') {
                        this.$set(this.form,'hPayplace',this.form.polCnName)
                    }
                })
            },
            // 获取用户管理数据
            userGetListfun(account = undefined,type = false,){
                userGetList(1,10,{account}).then(res=>{
                    this.columnforfun('operatorName').dicData = res.data.data.records
                    if (type) {
                        // 核算部门 默认登录人的部门
                        for (let item of this.columnforfun('operatorName').dicData) {
                            if (item.name == this.form.operatorName) {
                                this.$set(this.form,'accDeptName',item.deptName)
                                this.$set(this.form,'accDeptId',item.deptId)
                            }
                        }
                    }

                })
            },
            // 获取核算部分数据 // 机构管理接口
            getLazylistfun(){
                getDeptTree().then(res=>{
                    this.columnforfun('accDeptName').dicData = res.data.data
                })
            },
            // 获取客户名称数据 往来单位数据
            getBcorpsListfun(cnName){
                getBcorpsList(1,10,{cnName}).then(res=>{
                    this.columnforfun('corpCnName').dicData = res.data.data.records
                })
            },
            // 获取客户联系人 客户OP
            getBcorpsattnListfun(cnName){
                getBcorpsattnList(1,10,{pid:this.form.corpId,cnName}).then(res=>{
                    this.columnforfun('corpAttnName').dicData = res.data.data.records
                })
            },
            // 获取地点信息
            getBlocationsListfun(cnName){
                getBlocationsList(1,10,{cnName}).then(res=>{
                    this.columnforfun('mPayplace').dicData = res.data.data.records
                })
            },
            // 获取业务来源代理数据
            agentBcorpsListfun(cnName){
                let corpType = '1712285382575398914,1712285645314990082,1712285842321448962,1712286433378574338'
                getBcorpslistByType(1,10,{cnName,corpType}).then(res=>{
                    this.columnforfun('srcCnName').dicData = res.data.data.records
                })
            },
            // 获取业务来源业务员数据
            salesUserGetListfun(account){
                userGetList(1,10,{account}).then(res=>{
                    this.columnforfun('srcCnName').dicData = res.data.data.records
                })
            },
            // 获取公司名称 用户管理左侧
            ownDeptLazyTreefun(){
                getDeptLazyTree(0).then(res=>{
                    this.columnforfun('srcCnName').dicData = res.data.data
                    // 来源 内容 默认登录人所属公司
                    for(let item of this.columnforfun('srcCnName').dicData) {
                        if (item.id == JSON.parse(localStorage.getItem('saber-userInfo')).content.dept_id) {
                            this.$set(this.form,'srcId',item.id)
                            this.$set(this.form,'srcCnName',item.title)
                            this.$set(this.form,'srcEnName',item.title)
                        }
                    }

                })
            },
            // 申请B/L NO
            billsGetBillNofun(){
                billsGetBillNo({
                    businessType:this.form.businessType,
                    seaType:this.form.seaType,
                    billType:this.form.businessType,
                    corpCode:this.form.corpCode,
                }).then(res=>{
                    this.columnforfun('hpaymode').disabled = false
                    this.form.hblno = res.data.data
                })
            },
            /* 远程模糊查询操作用户 */
            remoteMethod(value,name) {
                if (name == 'operatorName') {
                    this.userGetListfun(value)
                }else if (name == 'accDeptName') {
                    this.getLazylistfun(value)
                }else if (name == 'corpCnName') {
                    this.getBcorpsListfun(value)
                }else if (name == 'mPayplace') {
                    this.getBlocationsListfun(value)
                }else if (name == 'corpAttnName') {
                    this.getBcorpsattnListfun(value)
                }else if (name == 'srcCnName') {
                    if (this.form.srcType == 'SALES') {
                        // 业务员
                        this.salesUserGetListfun(value)
                    }else if (this.form.srcType == 'AGENT') {
                        // 代理
                        this.agentBcorpsListfun(value)
                    }
                }else {

                }

            },
            // 下拉的监听事件
            corpChange(value,name){
                if (name == 'operatorName') {
                    // OP 下拉赋值 用户管理列表
                    for(let item of this.columnforfun('operatorName').dicData) {
                        if (item.name == value) {
                            this.form.operatorName = item.name
                            this.form.operatorId = item.id
                        }
                    }
                }
                else if (name == 'accDeptName') {
                    // OP 下拉赋值 用户管理列表
                    for(let item of this.columnforfun('accDeptName').dicData) {
                        if (item.title == value) {
                            this.form.accDeptName = item.title
                            this.form.accDeptId = item.id
                        }
                    }
                }
                else if (name == 'corpCnName') {
                    if (value) {
                        this.columnforfun('corpAttnName').disabled = false
                        this.columnforfun('corpAttnTel').disabled = false
                        this.columnforfun('corpAttnEmail').disabled = false
                    }else {
                        this.columnforfun('corpAttnName').disabled = true
                        this.columnforfun('corpAttnTel').disabled = true
                        this.columnforfun('corpAttnEmail').disabled = true
                        // 如果点击清空按钮把值赋值为空
                        this.form.corpCnName = ''
                        this.form.corpEnName = ''
                        this.form.corpId = ''
                        this.form.corpCode = ''
                    }
                    // 往来单位
                    for(let item of this.columnforfun('corpCnName').dicData) {
                        if (item.cnName == value) {
                            console.log(item,677)
                            this.form.corpCnName = item.cnName
                            this.form.corpEnName = item.enName
                            this.form.corpId = item.id
                            this.form.corpCode = item.code
                            this.getBcorpsattnListfun()
                        }
                    }
                }
                else if (name == 'corpAttnName') {
                    for(let item of this.columnforfun('corpAttnName').dicData) {
                        if (item.cname == value) {
                            this.form.corpAttnName = item.cname
                            this.form.corpAttnId = item.id
                            this.$set(this.form,'corpAttnTel',item.tel)
                            this.$set(this.form,'corpAttnEmail',item.email)
                        }
                    }
                }
                else if (name == 'srcType') {
                    if (!value) {
                        this.$set(this.form,'srcType','')
                        this.$set(this.form,'srcId','')
                        this.$set(this.form,'srcCnName','')
                        this.$set(this.form,'srcEnName','')
                        this.columnforfun('srcCnName').disabled = true
                        return
                    }
                    this.form[name] = value
                    if (value == 'OWN') {
                        // 公司
                        this.columnforfun('srcCnName').type = ''
                        for(let item of this.columnforfun('srcCnName').dicData) {
                            if (item.id == JSON.parse(localStorage.getItem('saber-userInfo')).content.dept_id) {
                                console.log(item,847)
                                this.$set(this.form,'srcId',item.id)
                                this.$set(this.form,'srcCnName',item.title)
                                this.$set(this.form,'srcEnName',item.title)
                            }
                        }
                        this.columnforfun('srcCnName').disabled = true
                    }else if (value == 'AGENT') {
                        // 代理
                        this.columnforfun('srcCnName').type = 'select'
                        this.columnforfun('srcCnName').forParameter = { key:'id', label:'cnName', value:'cnName'}
                        this.columnforfun('srcCnName').disabled = false
                        this.agentBcorpsListfun()
                    }else if (value == 'SALES') {
                        // 业务员
                        this.columnforfun('srcCnName').type = 'select'
                        this.columnforfun('srcCnName').forParameter = { key:'id', label:'name', value:'name'}
                        this.columnforfun('srcCnName').disabled = false
                        this.salesUserGetListfun()
                    }else {}
                }
                else if (name == 'srcCnName'){
                    for(let item of this.columnforfun('srcCnName').dicData) {
                        if (item[this.columnforfun('srcCnName').forParameter.value] == value) {
                            if (this.form.srcType == 'SALES') {
                                // 业务员
                                this.$set(this.form,'srcId',item.id)
                                this.$set(this.form,'srcCnName',item.name)
                                this.$set(this.form,'srcEnName',item.name)
                            }else if (this.form.srcType == 'AGENT') {
                                // 代理
                                this.$set(this.form,'srcId',item.id)
                                this.$set(this.form,'srcCnName',item.cnName)
                                this.$set(this.form,'srcEnName',item.enName)
                            }else {}
                        }
                    }
                }
                else if (name == 'coloaderCnName') {
                    for(let item of this.columnforfun('coloaderCnName').dicData) {
                        if (item.cnName == value) {
                            this.$set(this.form,'coloaderId',item.id)
                            this.$set(this.form,'coloaderCnName',item.cnName)
                            this.$set(this.form,'coloaderEnName',item.enName)
                        }
                    }
                }
                else {
                    this.form[name] = value
                }
            },
            // 申请B/L NO
            applyforfun(text){
                // 如果不是分单
                if (this.form.billType != 'MH') {
                    this.$message({
                        message: '只要分单需要申请',
                        type: 'warning'
                    });
                    return
                }
                if (!this.form.businessType) {
                    this.$message({
                        message: '请先选择业务类型',
                        type: 'warning'
                    });
                    return
                }
                if (!this.form.corpCnName) {
                    this.$message({
                        message: '请先选择客户名称',
                        type: 'warning'
                    });
                    return
                }
                this.$confirm(`确定${text}?`, {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(res=>{
                    this.billsGetBillNofun()
                })
            },
            // 配置项
            columnforfun(value){
                for(let item of this.basicData.column) {
                    if (item instanceof Array) {
                        for(let ite of item) {
                            if (value == ite.prop) {
                                return ite
                            }
                        }
                    }else {
                        if (value == item.prop) {
                            return item
                        }
                    }
                }
            },
            //返回列表
            backToList() {
                this.$emit('goBack')
            },
            // 编辑按钮
            editHandle(){
                this.detailData.seeDisabled = false
            },
            // 大保存按钮
            editCustomer(){
                this.$refs.form.validate((valid)=>{
                    if (valid) {
                        this.billsSubmitfun()
                    }
                })
            },
            // 主表保存接口大保存
            billsSubmitfun(){
                this.form.billNoFormat = 'HYCK'
                this.form.businessTypeId = '1714186930489712641'
                // 把拼接的数据拆开 开始 🐒🐒🐒🐒🐒🐒🐒🐒🐒🐒🐒🐒🐒🐒
                // 发货人
                this.form.hShipperCnName = this.form.hShipperCnName.split(' - ')[0]
                // 收货人
                this.form.hConsigneeCnName = this.form.hConsigneeCnName.split(' - ')[0]
                // 通知人
                this.form.hNotifyCnName = this.form.hNotifyCnName.split(' - ')[0]
                // 船公司
                this.form.carrierCnName = this.form.carrierCnName.split(' - ')[0]

                // 把拼接的数据拆开 结束 💩💩💩💩💩💩💩💩💩💩💩💩💩💩
                console.log(this.form,985)
                // return

                billsSubmit(this.form).then(res=>{
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.detailData.seeDisabled = true
                    this.billsDetailfun(res.data.data.id)
                })
            },
            // 详情接口
            async billsDetailfun(id){
                const res = await billsDetail(id)
                this.form = res.data.data;
                this.pageLoading = false
                console.log(this.form,1000)
                this.searchMontage() // 下拉 中文名称和编号拼接

                // 配箱最上面可以编辑
                for(let item of this.form.containersList) {
                    item.edit = false
                }
                // 配箱最下面的
                for(let item of this.form.waitingBoxList) {
                    this.$set(item,'editQuantity',item.quantity)
                    this.$set(item,'editGrossWeight',item.grossWeight)
                    this.$set(item,'editMeasurement',item.measurement)
                    this.$set(item,'edit',false)
                }
                // 应收
                for(let item of this.form.feeCenterListD) {
                    if (item.curCode == 'CNY') {
                        this.$set(item,'rmbAmount',item.amount)
                        this.$set(item,'usdAmount','')
                    }else {
                        this.$set(item,'usdAmount',item.amount)
                        this.$set(item,'rmbAmount','')
                    }
                    item.edit = false
                }
                // 应付
                for(let item of this.form.feeCenterListC) {
                    if (item.curCode == 'CNY') {
                        this.$set(item,'rmbAmount',item.amount)
                        this.$set(item,'usdAmount','')
                    }else {
                        this.$set(item,'usdAmount',item.amount)
                        this.$set(item,'rmbAmount','')
                    }
                    item.edit = false
                }

            },
            // 下拉 中文名称和编号拼接
            searchMontage(){
                // 发货人
                if (this.form.hShipperCnName) {
                    this.form.hShipperCnName = this.form.hShipperCnName + ' - ' + this.form.hShipperCode
                }
                // 收货人
                if (this.form.hConsigneeCnName) {
                    this.form.hConsigneeCnName = this.form.hConsigneeCnName + ' - ' + this.form.hConsigneeCode
                }
                // 通知人
                if (this.form.hNotifyCnName) {
                    this.form.hNotifyCnName = this.form.hNotifyCnName + ' - ' + this.form.hNotifyCode
                }
                // 船公司
                if (this.form.carrierCnName) {
                    this.form.carrierCnName = this.form.carrierCnName + ' - ' + this.form.carrierCode
                }
            },
            // tbas切换
            handleClick(tba,event) {

            },
            // 大tbas切换
            bigHandleClick(){
                if (this.bigtabs == 'fd') {
                    if (this.form.id) {
                        this.billsListAllfun(this.form.id)
                    }
                }
            },
            // 获取不分页的分单列表
            billsListAllfun(masterId){
                billsListAll({masterId}).then(res=>{
                    this.billsListAllData = res.data.data

                })
            },

        },
    }

</script>

<style scoped>
.borderless {
    height: 100%;
    box-sizing: border-box
}
.customer-main {
    margin-bottom: 15px;
}
.demo-ruleForm {
    font-size: 14px;
}
.margintop {
    margin-top: 10px;
}
::v-deep.el-form-item {
    margin-bottom: 0;
}
.isShow {
    display: none;
}
</style>