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

<template>
    <div>
        <basic-container v-if="isShow">
            <avue-crud :option="optionBack" :table-loading="loading" :data="data" :page.sync="page" id="out-table"
                :header-cell-class-name="headerClassName" :permission="permissionList" :before-open="beforeOpen"
                v-model="form" ref="crud" :search.sync="query" @row-update="rowUpdate" @row-save="rowSave"
                @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
                @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
                @refresh-change="refreshChange" @on-load="onLoad" @expand-change="expandChange"
                @resetColumn="resetColumnTwo('crud', 309)" @saveColumn="saveColumnTwo('crud', optionBack, 309)">
                <template slot-scope="{disabled,size}" slot="billSortSearch">
                    <el-radio-group v-model="query.billSort">
                        <el-radio label="1">ETD</el-radio>
                        <el-radio label="2">提单号</el-radio>
                    </el-radio-group>
                </template>
                <!--#region-->
                <!--<template slot="search" slot-scope="{row,size}">-->
                <!--    <el-form ref="form" :model="row" label-width="80px" :style="fold?'width: 100%':'width: 70%'">-->
                <!--        <el-row>-->
                <!--            <el-col :span="fold?6:8" >-->
                <!--                <el-form-item label="主单号">-->
                <!--                    <el-input placeholder="请输入主单号" clearable-->
                <!--                              size="small" style="width:100%" v-model="query.mblno">-->
                <!--                    </el-input>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="fold?6:8">-->
                <!--                <el-form-item label="委托人">-->
                <!--                    &lt;!&ndash;<el-input placeholder="请输入委托人" clearable&ndash;&gt;-->
                <!--                    &lt;!&ndash;          size="small" style="width:100%" v-model="query.corpCnName">&ndash;&gt;-->
                <!--                    &lt;!&ndash;</el-input>&ndash;&gt;-->
                <!--                    <search-query :datalist="corpData"-->
                <!--                                  :selectValue="query.corpCnName"-->
                <!--                                  :filterable="true"-->
                <!--                                  :clearable="true"-->
                <!--                                  :remote="true"-->
                <!--                                  :buttonIf="false"-->
                <!--                                  :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
                <!--                                  placeholder="请输入委托人"-->
                <!--                                  @remoteMethod="corpBcorpslistByType"-->
                <!--                                  @corpChange="corpChange($event,'corpCnName')"-->
                <!--                                  @corpFocus="corpBcorpslistByType" >-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="fold?6:8" >-->
                <!--                <el-form-item label="业务号">-->
                <!--                    <el-input placeholder="请输入业务号" clearable-->
                <!--                              size="small" style="width:100%" v-model="query.billNo">-->
                <!--                    </el-input>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="单据类型">-->
                <!--                    <search-query-->
                <!--                        :datalist="billTypeData"-->
                <!--                        :selectValue="query.billType"-->
                <!--                        :filterable="true"-->
                <!--                        :clearable="true"-->
                <!--                        :remote="true"-->
                <!--                        :buttonIf="false"-->
                <!--                        @corpChange="corpChange($event,'billType')">-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="分单号">-->
                <!--                    <el-input placeholder="请输入分单号" clearable-->
                <!--                              size="small" style="width:100%" v-model="query.hblno">-->
                <!--                    </el-input>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="船名">-->
                <!--                    <search-query :datalist="vesselData"-->
                <!--                                  :selectValue="query.vesselEnName"-->
                <!--                                  :filterable="true"-->
                <!--                                  :clearable="true"-->
                <!--                                  :remote="true"-->
                <!--                                  :buttonIf="false"-->
                <!--                                  :forParameter="{key:'id',label:'enName',value:'enName'}"-->
                <!--                                  placeholder="请输入船名"-->
                <!--                                  @remoteMethod="vesselBvesselsListfun"-->
                <!--                                  @corpChange="corpChange($event,'vesselEnName')"-->
                <!--                                  @corpFocus="vesselBvesselsListfun" >-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold" >-->
                <!--                <el-form-item label="航次">-->
                <!--                    <el-input placeholder="请输入航次" clearable-->
                <!--                              size="small" style="width:100%" v-model="query.voyageNo">-->
                <!--                    </el-input>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="船公司">-->
                <!--                    <search-query :datalist="carrierData"-->
                <!--                                  :selectValue="query.carrierCnName"-->
                <!--                                  :filterable="true"-->
                <!--                                  :clearable="true"-->
                <!--                                  :remote="true"-->
                <!--                                  :buttonIf="false"-->
                <!--                                  :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
                <!--                                  placeholder="请输入船公司"-->
                <!--                                  @remoteMethod="carrierBcorpslistByTypefun"-->
                <!--                                  @corpChange="corpChange($event,'carrierCnName')"-->
                <!--                                  @corpFocus="carrierBcorpslistByTypefun" >-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="目的港">-->
                <!--                    &lt;!&ndash;<el-input placeholder="请输入目的港" clearable&ndash;&gt;-->
                <!--                    &lt;!&ndash;          size="small" style="width:100%" v-model="query.podCnName">&ndash;&gt;-->
                <!--                    &lt;!&ndash;</el-input>&ndash;&gt;-->
                <!--                    <search-query :datalist="podData"-->
                <!--                                  :selectValue="query.podEnName"-->
                <!--                                  :filterable="true"-->
                <!--                                  :clearable="true"-->
                <!--                                  :remote="true"-->
                <!--                                  :buttonIf="false"-->
                <!--                                  :forParameter="{key:'id',label:'enName',value:'enName'}"-->
                <!--                                  placeholder="请输入目的港"-->
                <!--                                  @remoteMethod="podBportsListfun"-->
                <!--                                  @corpChange="corpChange($event,'podEnName')"-->
                <!--                                  @corpFocus="podBportsListfun" >-->
                <!--                    </search-query>-->

                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="航线">-->
                <!--                    &lt;!&ndash;<el-input placeholder="请输入航线" clearable&ndash;&gt;-->
                <!--                    &lt;!&ndash;          size="small" style="width:100%" v-model="query.lineCnName">&ndash;&gt;-->
                <!--                    &lt;!&ndash;</el-input>&ndash;&gt;-->
                <!--                    <search-query :datalist="lineData"-->
                <!--                                  :selectValue="query.lineCnName"-->
                <!--                                  :filterable="true"-->
                <!--                                  :clearable="true"-->
                <!--                                  :remote="true"-->
                <!--                                  :buttonIf="false"-->
                <!--                                  :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
                <!--                                  placeholder="请输入航线"-->
                <!--                                  @remoteMethod="lineBlinesListfun"-->
                <!--                                  @corpChange="corpChange($event,'lineCnName')"-->
                <!--                                  @corpFocus="lineBlinesListfun" >-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="场站">-->
                <!--                    &lt;!&ndash;<el-input placeholder="请输入场站" clearable&ndash;&gt;-->
                <!--                    &lt;!&ndash;          size="small" style="width:100%" v-model="query.cyCode">&ndash;&gt;-->
                <!--                    &lt;!&ndash;</el-input>&ndash;&gt;-->
                <!--                    <search-query :datalist="cyData"-->
                <!--                                  :selectValue="query.cyCnName"-->
                <!--                                  :filterable="true"-->
                <!--                                  :clearable="true"-->
                <!--                                  :remote="true"-->
                <!--                                  :buttonIf="false"-->
                <!--                                  :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
                <!--                                  placeholder="请输入场站"-->
                <!--                                  @remoteMethod="cyBcorpslistByType"-->
                <!--                                  @corpChange="corpChange($event,'cyCnName')"-->
                <!--                                  @corpFocus="cyBcorpslistByType" >-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="业务来源">-->
                <!--                    <search-query-->
                <!--                        :datalist="srcTypeData"-->
                <!--                        :selectValue="query.srcType"-->
                <!--                        :filterable="true"-->
                <!--                        :clearable="true"-->
                <!--                        :remote="true"-->
                <!--                        :buttonIf="false"-->
                <!--                        @corpChange="corpChange($event,'srcType')">-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="来源详情">-->
                <!--                    <el-input placeholder="请输入来源详情" clearable-->
                <!--                              size="small" style="width:100%" v-model="query.srcCnName">-->
                <!--                    </el-input>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="9" v-show="fold">-->
                <!--                <el-form-item label="ETD">-->
                <!--                    <el-checkbox v-model="etdDisabled">-->
                <!--                        <el-date-picker-->
                <!--                            v-model="etdList"-->
                <!--                            style="width: 100%"-->
                <!--                            :disabled="!etdDisabled"-->
                <!--                            size="small"-->
                <!--                            type="datetimerange"-->
                <!--                            range-separator="至"-->
                <!--                            start-placeholder="开始日期"-->
                <!--                            end-placeholder="结束日期"-->
                <!--                            format="yyyy-MM-dd HH:mm"-->
                <!--                            value-format="yyyy-MM-dd HH:mm"-->
                <!--                            clearable>-->
                <!--                        </el-date-picker>-->
                <!--                    </el-checkbox>-->

                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="9" v-show="fold">-->
                <!--                <el-form-item label="ETA">-->
                <!--                    <el-checkbox v-model="etaDisabled">-->
                <!--                        <el-date-picker-->
                <!--                            v-model="etaList"-->
                <!--                            style="width: 100%"-->
                <!--                            :disabled="!etaDisabled"-->
                <!--                            size="small"-->
                <!--                            type="datetimerange"-->
                <!--                            range-separator="至"-->
                <!--                            start-placeholder="开始日期"-->
                <!--                            end-placeholder="结束日期"-->
                <!--                            format="yyyy-MM-dd HH:mm"-->
                <!--                            value-format="yyyy-MM-dd HH:mm"-->
                <!--                            clearable>-->
                <!--                        </el-date-picker>-->
                <!--                    </el-checkbox>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="创建部门">-->
                <!--                    &lt;!&ndash;<el-input placeholder="请输入创建部门" clearable&ndash;&gt;-->
                <!--                    &lt;!&ndash;          size="small" style="width:100%" v-model="query.createDeptName">&ndash;&gt;-->
                <!--                    &lt;!&ndash;</el-input>&ndash;&gt;-->
                <!--                    <tree-select v-model="query.createDeptName" filterable-->
                <!--                                 :data="createDeptData"-->
                <!--                                 :props="{label: 'title', children:'children' }"-->
                <!--                                 nodeKey="title"-->
                <!--                                 size="small"-->
                <!--                                 :multiple="false"-->
                <!--                                 placeholder="请选择创建部门"-->
                <!--                                 @focus="createDeptLzylistfun"-->
                <!--                                 @input="corpChange($event,'createDeptName')">-->
                <!--                    </tree-select>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="订舱代理">-->
                <!--                    &lt;!&ndash;<el-input placeholder="请输入订舱代理" clearable&ndash;&gt;-->
                <!--                    &lt;!&ndash;          size="small" style="width:100%" v-model="query.bookingAgentCnName">&ndash;&gt;-->
                <!--                    &lt;!&ndash;</el-input>&ndash;&gt;-->
                <!--                    <search-query :datalist="bookingAgentData"-->
                <!--                                  :selectValue="query.bookingAgentCnName"-->
                <!--                                  :filterable="true"-->
                <!--                                  :clearable="true"-->
                <!--                                  :remote="true"-->
                <!--                                  :buttonIf="false"-->
                <!--                                  :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
                <!--                                  placeholder="请输入订舱代理"-->
                <!--                                  @remoteMethod="bookingAgentBcorpsListfun"-->
                <!--                                  @corpChange="corpChange($event,'bookingAgentCnName')"-->
                <!--                                  @corpFocus="bookingAgentBcorpsListfun">-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="签单方式">-->
                <!--                    <search-query-->
                <!--                        :datalist="issueTypeData"-->
                <!--                        :selectValue="query.issueType"-->
                <!--                        :filterable="true"-->
                <!--                        :clearable="true"-->
                <!--                        :remote="true"-->
                <!--                        :buttonIf="false"-->
                <!--                        :forParameter="{ key:'dictKey', label:'dictValue', value:'dictValue'}"-->
                <!--                        @corpChange="corpChange($event,'issueType')" >-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--            <el-col :span="6" v-show="fold">-->
                <!--                <el-form-item label="收货人">-->
                <!--                    &lt;!&ndash;<el-input placeholder="请输入收货人" clearable&ndash;&gt;-->
                <!--                    &lt;!&ndash;          size="small" style="width:100%" v-model="query.hConsigneeCnName">&ndash;&gt;-->
                <!--                    &lt;!&ndash;</el-input>&ndash;&gt;-->
                <!--                    <search-query :datalist="hConsigneeData"-->
                <!--                                  :selectValue="query.hConsigneeCnName"-->
                <!--                                  :filterable="true"-->
                <!--                                  :clearable="true"-->
                <!--                                  :remote="true"-->
                <!--                                  :buttonIf="false"-->
                <!--                                  :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
                <!--                                  placeholder="请选择收货人"-->
                <!--                                  @remoteMethod="hConsigneeBcorpslistByType"-->
                <!--                                  @corpChange="corpChange($event,'hConsigneeCnName')"-->
                <!--                                  @corpFocus="hConsigneeBcorpslistByType" >-->
                <!--                    </search-query>-->
                <!--                </el-form-item>-->
                <!--            </el-col>-->
                <!--        </el-row>-->
                <!--    </el-form>-->
                <!--</template>-->
                <!--<template slot="searchMenu"  slot-scope="{row,size}">-->
                <!--    <el-button type="text" @click="shiftCollapsiable">-->
                <!--        <span>-->
                <!--            {{ fold ? '收起' : '展开' }}-->
                <!--            <i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>-->
                <!--        </span>-->
                <!--    </el-button>-->
                <!--</template>-->
                <!--#endregion-->

                <template slot="menuLeft">
                    <el-button type="primary" size="small" @click="addbtnfun()">新建业务
                    </el-button>
                    <el-button type="primary" size="small" plain @click="CopyDocumentsfun">复制单据
                    </el-button>
                    <el-button type="success" size="small" plain @click="increaseMawb">分单->主单
                    </el-button>
                    <el-button type="warning" size="small" plain v-if="query.billStatus == 0" @click="Disembarkingfun">退
                        舱
                    </el-button>
                    <el-button type="primary" size="small" plain v-if="query.billStatus == 1"
                        @click="revokeWithdrawalfun">撤销退舱
                    </el-button>
                    <el-button type="danger" size="small" plain v-if="query.billStatus != 3" @click="handleDelete">删 除
                    </el-button>
                    <el-button type="warning" size="small" @click="outExport">导 出
                    </el-button>
                    <el-dropdown style="line-height: 0">
                        <el-button size="small" type="success" style="margin-right: 8px"
                            :disabled="selectionList.length == 0">
                            发送 EDI<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in ediData" :key="item.id"
                                @click.native="editypesSendingEdifun(item)">{{ item.cnName }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div style="margin-top: 10px">
                        <el-tabs type="card" v-model="query.billStatus" @tab-click="handleClick">
                            <el-tab-pane label="接单" name="0">
                                <span slot="label">接单</span>
                            </el-tab-pane>
                            <el-tab-pane label="退舱" name="1">
                                <span slot="label" style="color: #d86363">退舱</span>
                            </el-tab-pane>
                            <el-tab-pane label="完成" name="3"></el-tab-pane>
                            <el-tab-pane label="全部" name="4"></el-tab-pane>
                        </el-tabs>
                    </div>
                </template>
                <template slot-scope="scope" slot="menu">
                    <!--:disabled="saberUserInfo.role_name.indexOf('允许修改他人业务') == -1?saberUserInfo.user_id != scope.row.createUser:false"-->
                    <el-button :type="scope.type" :size="scope.size" icon="el-icon-edit"
                        @click.stop="rowCellfun(scope.row.id, scope.row)">编辑
                    </el-button>
                </template>

                <template slot="expand" slot-scope="{row}">
                    <SplitList :typeMenu="true" :data="row.billsListAllData" :loading="SplitLoading"
                        @corpfun="rowCellfun">
                    </SplitList>
                </template>
                <temolate slot="billStatus" slot-scope="{row}">
                    <div>
                        <span v-if="row.billStatus == item.dictKey" v-for="(item, index) in billStatusData" :key="index"
                            :style="{ 'background-color': item.colour }"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;">
                            {{ item.dictValue }}
                        </span>
                    </div>
                </temolate>
                <template slot="accountStatus" slot-scope="{ row }">
                    <div>
                        <span v-if="row.accountStatus == item.dictKey" v-for="(item, index) in accountStatusData"
                            :key="index" :style="{ 'background-color': item.colour }"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;">
                            {{ item.dictValue }}
                        </span>
                    </div>
                </template>
                <template slot="status" slot-scope="{ row }">
                    <div>
                        <span v-if="row.status == item.dictKey" v-for="(item, index) in auditStatusList" :key="index"
                            :style="{ 'background-color': item.colour }"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;">
                            {{ item.dictValue }}
                        </span>
                    </div>
                </template>
                <template slot="corpCnName" slot-scope="scope">
                    <span
                        style="color: #1e9fff;cursor: pointer;width: 100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
                        @click.stop="rowCellfun(scope.row.id, scope.row)">
                        {{ scope.row.shortName }}
                    </span>
                </template>
                <template slot="billNo" slot-scope="scope">
                    <span
                        style="color: #1e9fff;cursor: pointer;width: 100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
                        @click.stop="rowCellfun(scope.row.id, scope.row)">
                        {{ scope.row.billNo }}
                    </span>
                </template>
                <template slot="eta" slot-scope="scope">
                    <span>{{ scope.row.eta ? scope.row.eta.slice(0, 10) : '' }}</span>
                </template>
                <template slot="updateTime" slot-scope="scope">
                    <span>{{ scope.row.updateTime ? scope.row.updateTime.slice(0, 10) : '' }}</span>
                </template>
                <template slot="checkDrStatusDescr" slot-scope="{ row }">
                    <div>
                        <span v-if="row.checkDrStatusDescr == '未对账'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #67C23A;">
                            未对账
                        </span>
                        <span v-if="row.checkDrStatusDescr == '已对账'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #409EFF;">
                            已对账
                        </span>
                        <span v-if="row.checkDrStatusDescr == '部分对账'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #F56C6C;">
                            部分对账
                        </span>
                    </div>
                </template>
                <template slot="stlDrStatusDescr" slot-scope="{ row }">
                    <div>
                        <span v-if="row.stlDrStatusDescr == '未结'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #67C23A;">
                            未结
                        </span>
                        <span v-if="row.stlDrStatusDescr == '已结'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #409EFF;">
                            已结
                        </span>
                        <span v-if="row.stlDrStatusDescr == '部分结'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #F56C6C;">
                            部分结
                        </span>
                    </div>
                </template>
                <template slot="stlCrStatusDescr" slot-scope="{ row }">
                    <div>
                        <span v-if="row.stlCrStatusDescr == '未结'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #67C23A;">
                            未结
                        </span>
                        <span v-if="row.stlCrStatusDescr == '结清'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #409EFF;">
                            结清
                        </span>
                        <span v-if="row.stlCrStatusDescr == '部分'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #F56C6C;">
                            部分
                        </span>
                    </div>
                </template>
                <template slot="stlCrStatusDescr" slot-scope="{ row }">
                    <div>
                        <span v-if="row.stlCrStatusDescr == '未结'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #67C23A;">
                            未结
                        </span>
                        <span v-if="row.stlCrStatusDescr == '结清'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #409EFF;">
                            结清
                        </span>
                        <span v-if="row.stlCrStatusDescr == '部分'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #F56C6C;">
                            部分
                        </span>
                    </div>
                </template>
                <template slot="invoiceDrStatusDescr" slot-scope="{ row }">
                    <div>
                        <span v-if="row.invoiceDrStatusDescr == '未开'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #67C23A;">
                            未开
                        </span>
                        <span v-if="row.invoiceDrStatusDescr == '部分'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #409EFF;">
                            部分
                        </span>
                        <span v-if="row.invoiceDrStatusDescr == '全开'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #F56C6C;">
                            全开
                        </span>
                    </div>
                </template>
                <template slot="checkCrStatusDescr" slot-scope="{ row }">
                    <div>
                        <span v-if="row.checkCrStatusDescr == '未申请'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #67C23A;">
                            未申请
                        </span>
                        <span v-if="row.checkCrStatusDescr == '部分申请'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #409EFF;">
                            部分申请
                        </span>
                        <span v-if="row.checkCrStatusDescr == '已申请'"
                            style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;background-color: #F56C6C;">
                            已申请
                        </span>
                    </div>
                </template>
            </avue-crud>
        </basic-container>

        <bills-details ref="billsDetails" v-if="!isShow" :detailData="detailData" @goBack="goBack"
            @toAddEdit="toAddEdit" :key="datekey"></bills-details>

        <el-dialog title="主单列表" :visible.sync="dialogVisible" append-to-body width="60%" :before-close="handleClose">
            <avue-crud :option="mawbOptionBack" :table-loading="mawbloading" :data="mawbData" :page.sync="mawbPage"
                :search="mawbQuery" ref="mawbOptionCrud" id="out-table" :header-cell-class-name="headerClassName"
                @search-change="mawbSearch" @size-change="mawbSizeChange" @current-change="mawbCurrentChange"
                @resetColumn="resetColumnTwo('mawbOptionCrud', 309.7)"
                @saveColumn="saveColumnTwo('mawbOptionCrud', mawbOptionBack, 309.7)">
                <template slot="radio" slot-scope="{row}">
                    <el-radio v-model="dialogRadio" :label="row.id" @input="radioInput(row)"></el-radio>
                </template>
            </avue-crud>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false; dialogRadio = null">取 消</el-button>
                <el-button type="primary" @click="AddToMainOrder">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    billsList,
    billsDetail,
    billsSubmit,
    billsRemove,
    billsIncreaseReinsurancePolicy, billsListAll, billsDisembarking, editypesSendingEdi, billsRevokeDisembarking
} from "@/api/iosBasicData/bills";
import { mapGetters } from "vuex";
import billsDetails from "@/views/iosBasicData/SeafreightExportF/bills/billsDetails.vue";
import feesTemplateItems from "@/views/iosBasicData/losbfeestemplate/feesTemplateItems.vue";
import SplitList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/SplitList.vue";
import { getWorkDicts } from "@/api/system/dictbiz";
import { dateFormat, defaultDate } from "@/util/date";
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { editypesList } from "@/api/iosBasicData/editypes";
import { getBvesselsList } from "@/api/iosBasicData/bvessels";
import { getBcorpslistByType, getBcorpsDetail } from "@/api/iosBasicData/bcorps";
import { bportsList } from "@/api/iosBasicData/bports";
import { blinesList } from "@/api/iosBasicData/blines";
import TreeSelect from "@/components/iosbasic-data/TreeSelect.vue";
import { getDeptTree } from "@/api/system/dept";
import { getToken } from "@/util/auth";

export default {
    components: { TreeSelect, SearchQuery, feesTemplateItems, billsDetails, SplitList },
    data() {
        return {
            datekey: Date.now(),
            ediData: [], // 获取的 edi 数据
            // 展开和收回
            fold: false,
            maxShow: 3,
            corpData: [], //委托人
            hConsigneeData: [], // 收货人
            // 船名
            vesselData: [],
            // 船公司
            carrierData: [],
            // 目的港(卸货港)
            podData: [],
            // 航线
            lineData: [],
            // 场站
            cyData: [],
            // 订舱代理
            bookingAgentData: [],
            createDeptData: [], // 部门数据
            auditStatusList: [],
            // 单据类型
            billTypeData: [
                {
                    label: '直单',
                    value: 'DD'
                }, {
                    label: '主单',
                    value: 'MM'
                }, {
                    label: '分单',
                    value: 'MH'
                }
            ],
            // 业务来源
            srcTypeData: [
                {
                    label: '公司',
                    value: 'OWN'
                },
                {
                    label: '代理',
                    value: 'AGENT'
                },
                {
                    label: '业务员',
                    value: 'SALES'
                }
            ],
            // 签单方式
            issueTypeData: [],
            isShow: true,
            detailData: {},
            dialogVisible: false, // 弹窗开启V
            // ETD是否可以检索
            etdDisabled: false,
            // ETA是否可以检索
            etaDisabled: false,
            form: {},
            // 开船日期和到港日期
            etdList: [defaultDate(1)[0] + ' 00:00', defaultDate(1)[1] + ' 23:59'],
            etaList: [defaultDate(1)[0] + ' 00:00', defaultDate(1)[1] + ' 23:59'],
            // 表格的检索条件
            query: {
                billStatus: '0',
                billSort: '1',
            },
            // 弹窗的搜索项
            mawbQuery: {
                billType: 'MM',

            },
            loading: true,
            // 弹窗加载
            mawbloading: false,
            // 下拉的加载
            SplitLoading: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            // 弹窗分页
            mawbPage: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            // 弹窗的选择数据
            dialogRadio: null,
            option: {},
            optionBack: {
                // selectable:(row,index)=>{
                //     // 禁用主单
                //     return row.billType != 'MM'
                // },
                expand: true,
                expandRowKeys: [],
                rowKey: 'id',
                height: 500,
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 12,
                searchLabelWidth: '100',
                border: true,
                index: true,
                selection: true, // 是否有选择框
                dialogClickModal: false,
                highlightCurrentRow: true, // 单选
                searchIcon: true,
                searchIndex: 3,
                stripe: true,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                menuWidth: 'auto',
                align: 'center',
                column: [
                    // {
                    //     label: "所属团队",
                    //     prop: "teamName",
                    //     overHidden:true,
                    // },
                    {
                        label: "客户简称",
                        prop: "corpCnName",
                        width: "160",
                        overHidden: true,
                        search: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/listByType?shortName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                        span: 6,
                        searchOrder: 1,
                    },
                    {
                        label: "客户英文",
                        prop: "corpEnName",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "MB/L NO",
                        prop: "mblno",
                        width: "80",
                        overHidden: true,
                        search: true,
                        span: 6,
                        searchOrder: 2,
                    },
                    {
                        label: "M/PayMode",
                        prop: "mpaymode",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "HB/L NO",
                        prop: "hblno",
                        width: "80",
                        overHidden: true,
                        search: true,
                        span: 6,
                        searchOrder: 3,
                    },
                    {
                        label: "H/PayMode",
                        prop: "hpaymode",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "单据类型",
                        prop: "billType",
                        type: 'select',
                        search: true,
                        span: 6,
                        searchOrder: 3.1,
                        dicData: [{
                            label: '直单',
                            value: 'DD'
                        }, {
                            label: '主单',
                            value: 'MM'
                        }, {
                            label: '分单',
                            value: 'MH'
                        }],
                        overHidden: true,
                    },
                    {
                        label: "单据编号",
                        prop: "billNo",
                        width: "160",
                        overHidden: true,
                        search: true,
                        span: 6,
                        searchOrder: 4,
                    },
                    {
                        label: "船名",
                        prop: "vesselCnName",
                        overHidden: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bvessels/list?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                        search: true,
                        span: 6,
                        searchOrder: 5,
                        hide: true,
                        showColumn: false,
                    },
                    {
                        label: "船名",
                        prop: "vesselEnName",
                        overHidden: true,
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        width: "80",
                        overHidden: true,
                        search: true,
                        span: 6,
                        searchOrder: 6,
                    },
                    {
                        label: "booking NO",
                        prop: "bookingNo",
                        width: "120",
                        overHidden: true,
                        search: true,
                        span: 6,
                        searchOrder: 7,
                    },
                    {
                        label: "开船日期",
                        prop: "etd",
                        searchProp: "etdList",
                        type: "date",
                        unlinkPanels: true,
                        searchRange: true,
                        overHidden: true,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        searchDefaultTime: ["00:00:00", "23:59:59"],
                        search: true,
                        span: 6,
                        searchOrder: 8,
                    },
                    {
                        label: "到港日期",
                        prop: "eta",
                        width: "80",
                        overHidden: true,
                        searchProp: "etaList",
                        type: "date",
                        unlinkPanels: true,
                        searchRange: true,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        searchDefaultTime: ["00:00:00", "23:59:59"],
                        search: true,
                        span: 6,
                        searchOrder: 9,
                    },
                    {
                        label: "船公司",
                        prop: "carrierCnName",
                        overHidden: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                        search: true,
                        span: 6,
                        searchOrder: 10,
                        hide: true,
                        showColumn: false,
                    },
                    {
                        label: "船公司",
                        prop: "carrierEnName",
                        overHidden: true,
                    },
                    {
                        label: "装货港",
                        prop: "polEnName",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "卸货港",
                        prop: "podEnName",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "目的港",
                        prop: "destinationName",
                        width: "120",
                        overHidden: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bports/list?enName={{key}}",
                        props: {
                            label: 'enName',
                            value: 'enName',
                            res: 'data.records'
                        },
                        search: true,
                        span: 6,
                        searchOrder: 11,
                    },
                    // {
                    //     label: "交货地",
                    //     prop: "placeDeliveryName",
                    //     width: "120",
                    //     overHidden: true,
                    // },
                    {
                        label: "航线",
                        prop: "lineCnName",
                        width: "120",
                        overHidden: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/blines/list?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                        search: true,
                        span: 6,
                        searchOrder: 12,
                    },
                    {
                        label: "场站",
                        prop: "cyCnName",
                        width: "120",
                        overHidden: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                        search: true,
                        span: 6,
                        searchOrder: 13,
                        hide: true,
                        showColumn: false,
                    },
                    {
                        label: "场站",
                        prop: "cyEnName",
                        overHidden: true,
                    },
                    {
                        label: "箱型/箱量",
                        prop: "quantityCntrDescr",
                        width: "120",
                        overHidden: true,
                    },
                    // {
                    //   label: "箱量",
                    //   prop: "CntrDescr",
                    //     width:"120",
                    //     overHidden:true,
                    // },
                    {
                        label: "业务来源",
                        prop: "srcType",
                        type: 'select',
                        dicData: [
                            {
                                label: '公司',
                                value: 'OWN'
                            },
                            {
                                label: '代理',
                                value: 'AGENT'
                            },
                            {
                                label: '业务员',
                                value: 'SALES'
                            }
                        ],
                        overHidden: true,
                        search: true,
                        span: 6,
                        searchOrder: 14,
                    },
                    {
                        label: "来源详情",
                        prop: "srcCnName",
                        width: "80",
                        overHidden: true,
                        search: true,
                        span: 6,
                        searchOrder: 15,
                    },
                    {
                        label: "装箱方式",
                        prop: "loadType",
                        type: 'select',
                        dicData: [{
                            label: '整箱',
                            value: 'FCL'
                        }, {
                            label: '拼箱',
                            value: 'LCL'
                        }],
                        overHidden: true,
                    },
                    {
                        label: "货物类别",
                        prop: "cargoType",
                        type: 'select',
                        dicData: [{
                            label: '普货',
                            value: 'dry'
                        }, {
                            label: '危险品',
                            value: 'danger'
                        }, {
                            label: '冻柜',
                            value: 'reefer'
                        }],
                        overHidden: true,
                    },
                    {
                        label: "创建部门",
                        prop: "createDeptName",
                        width: "120",
                        overHidden: true,
                        type: 'tree',
                        dicUrl: "/api/blade-system/dept/tree",
                        props: {
                            label: 'title',
                            value: 'title',
                            children: 'children'
                        },
                        search: true,
                        span: 6,
                        searchOrder: 16,
                    },
                    {
                        label: "订舱代理",
                        prop: "bookingAgentCnName",
                        width: "120",
                        overHidden: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                        search: true,
                        span: 6,
                        searchOrder: 17,
                    },
                    {
                        label: "收货人",
                        prop: "hconsigneeCnName",
                        width: "120",
                        overHidden: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                        search: true,
                        span: 6,
                        searchOrder: 18,
                    },
                    {
                        label: "签单方式",
                        prop: "issueType",
                        width: "120",
                        overHidden: true,
                        type: 'select',
                        // audit_status_los
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=issue_type_F",
                        props: {
                            label: 'dictValue',
                            value: 'dictKey',
                        },
                        search: true,
                        span: 6,
                        searchOrder: 19,
                    },
                    {
                        label: "唛头",
                        prop: "marks",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "件数",
                        prop: "quantity",
                        overHidden: true,
                    },
                    {
                        label: "毛重 (KGM)",
                        prop: "grossWeight",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "净重 (KGM)",
                        prop: "netWeight",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "体积 (CBM)",
                        prop: "measurement",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "TEU箱数",
                        prop: "teu",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "V20",
                        prop: "quantityV20",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "V40",
                        prop: "quantityV40",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "40HC",
                        prop: "quantityV40hc",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "V45",
                        prop: "quantityV45",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "V48",
                        prop: "quantityV48",
                        width: "100",
                        overHidden: true,
                    },
                    // {
                    //   label: "需陆运",
                    //   prop: "isNeedLand",
                    //     type: 'select',
                    //     dicData: [{
                    //         label: '否',
                    //         value: 0
                    //     }, {
                    //         label: '是',
                    //         value: 1
                    //     }],
                    //     overHidden:true,
                    // },
                    // {
                    //   label: "需报关",
                    //   prop: "isNeedDeclare",
                    //     type: 'select',
                    //     dicData: [{
                    //         label: '否',
                    //         value: 0
                    //     }, {
                    //         label: '是',
                    //         value: 1
                    //     }],
                    //     overHidden:true,
                    // },
                    // {
                    //   label: "需三检",
                    //   prop: "isNeedIq",
                    //     type: 'select',
                    //     dicData: [{
                    //         label: '否',
                    //         value: 0
                    //     }, {
                    //         label: '是',
                    //         value: 1
                    //     }],
                    //     overHidden:true,
                    // },
                    // {
                    //   label: "应收(CNY)",
                    //   prop: "amountDr",
                    //     width: "160",
                    //     overHidden:true,
                    // },
                    // {
                    //   label: "应付(CNY)",
                    //   prop: "amountCr",
                    //     width: "160",
                    //     overHidden:true,
                    // },
                    // {
                    //   label: "利润(CNY)",
                    //   prop: "amountProfit",
                    //     width: "160",
                    //     overHidden:true,
                    // },
                    // {
                    //     // label: "综合 USD 应付(USD) - 非 USD 外币转换为 USD",
                    //   label: "综合应付(USD)",
                    //   prop: "amountCrUsd",
                    //     width: "120",
                    //     overHidden:true,
                    // },
                    // {
                    //   label: "综合利润(USD)",
                    //   prop: "amountProfitUsd",
                    //     width: "120",
                    //     overHidden:true,
                    // },
                    {
                        label: "合计应收(CNY )",
                        prop: "amountDrLoc",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "合计应付(CNY)",
                        prop: "amountCrLoc",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "合计利润(CNY)",
                        prop: "amountProfitLoc",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "付费申请状态",
                        prop: "checkCrStatusDescr",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "应收对账状态",
                        prop: "checkDrStatusDescr",
                        width: "160",
                        overHidden: true,
                    },
                    // {
                    //   label: "应付对账状态",
                    //   prop: "checkCrStatusDescr",
                    //     width:"160",
                    //     overHidden:true,
                    // },
                    {
                        label: "应收结算状态",
                        prop: "stlDrStatusDescr",
                        type: 'select',
                        search: true,
                        dicData: [{
                            label: '未结',
                            value: '未结'
                        }, {
                            label: '部分',
                            value: '部分'
                        }, {
                            label: '结清',
                            value: '结清'
                        }],
                        width: "100",
                        searchLabelWidth: '100',
                        overHidden: true,
                    },
                    {
                        label: "应付结算状态",
                        prop: "stlCrStatusDescr",
                        type: 'select',
                        search: true,
                        dicData: [{
                            label: '未结',
                            value: '未结'
                        }, {
                            label: '部分',
                            value: '部分'
                        }, {
                            label: '结清',
                            value: '结清'
                        }],
                        width: "100",
                        searchLabelWidth: '100',
                        overHidden: true,
                    },
                    {
                        label: "销项发票状态",
                        prop: "invoiceDrStatusDescr",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "客户来源",
                        prop: "corpSource",
                        width: 140,
                        overHidden: true,
                        search: true,
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=corp_Source",
                        props: {
                            label: 'dictValue',
                            value: 'dictKey',
                        },
                    },
                    {
                        label: "客户OP",
                        prop: "operatorName",
                        width: 140,
                        overHidden: true,
                        search: true,
                        type: "select",
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorpsattn/list?cname={{key}}",
                        props: {
                            label: 'cname',
                            value: 'cname',
                            res: 'data.records'
                        },
                    },
                    // {
                    //   label: "进项发票状态",
                    //   prop: "invoiceCrStatusDescr",
                    //     width:"160",
                    //     overHidden:true,
                    // },
                    {
                        label: "创建人",
                        prop: "createUserName",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入创建人",
                            trigger: "blur"
                        }],
                        overHidden: true,
                    },
                    {
                        label: "创建时间",
                        prop: "createTime",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "排序方式",
                        prop: "billSort",
                        hide: true,
                        showColumn: false,
                        search: true,
                        searchValue: '1',
                        overHidden: true,
                    },
                    //   {
                    //       label: "更新人",
                    //       prop: "updateUserName",
                    //       overHidden:true,
                    //   },
                    //   {
                    //       label: "更新时间",
                    //       prop: "updateTime",
                    //       width:"160",
                    //       overHidden:true,
                    //   },
                    {
                        label: "edi发送状态",
                        prop: "ediStatus",
                        type: "select",
                        dicData: [
                            {
                                label: '未发送',
                                value: '0'
                            }, {
                                label: '已发送',
                                value: '1'
                            }
                        ],
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "业务状态",
                        prop: "billStatus",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=bill_status",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "财务状态",
                        prop: "accountStatus",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=account_status",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "审核状态",
                        prop: "status",
                        type: 'select',
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=audit_status_los",
                        width: '120',
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        overHidden: true,
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        overHidden: true,
                    },
                ]
            },
            // 弹窗的配置
            mawbOption: {},
            mawbOptionBack: {
                height: '450',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                selection: false, // 多选
                dialogClickModal: false,
                stripe: true,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                menu: false,
                menuWidth: 'auto',
                column: [
                    {
                        label: '',
                        prop: 'radio',
                        width: 35,
                        hide: false
                    },
                    {
                        label: "船名",
                        prop: "vesselCnName",
                        overHidden: true,
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        overHidden: true,
                    },
                    {
                        label: "MB/L NO",
                        prop: "mblno",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "HB/L NO",
                        prop: "hblno",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "开船日期",
                        prop: "etd",
                        overHidden: true,
                    },
                    {
                        label: "到港日期",
                        prop: "eta",
                        overHidden: true,
                    },
                    {
                        label: "装货港",
                        prop: "polCnName",
                        overHidden: true,
                    },
                    {
                        label: "卸货港",
                        prop: "podCnName",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "单据编号",
                        prop: "billNo",
                        width: "160",
                        overHidden: true,
                    },
                    {
                        label: "客户名",
                        prop: "corpCnName",
                        overHidden: true,
                    },
                    {
                        label: "客户英文",
                        prop: "corpEnName",
                        overHidden: true,
                    },
                    {
                        label: "件数",
                        prop: "quantity",
                        overHidden: true,
                    },
                    {
                        label: "包装单位",
                        prop: "packingUnit",
                        overHidden: true,
                    },
                    {
                        label: "毛重",
                        prop: "grossWeight",
                        overHidden: true,
                    },
                    {
                        label: "净重",
                        prop: "netWeight",
                        overHidden: true,
                    },
                    {
                        label: "体积",
                        prop: "measurement",
                        overHidden: true,
                    },
                    {
                        label: "单据日期",
                        prop: "billDate",
                        width: "150",
                        overHidden: true,
                    },
                ]
            },
            data: [],
            // 弹窗数据
            mawbData: [],
            // 业务状态数据
            billStatusData: [],
            // 财务状态
            accountStatusData: [],
            saberUserInfo: {}, // 当前登录人个人信息
        };
    },
    computed: {
        ...mapGetters(["permission"]),
        permissionList() {
            return {
                addBtn: this.vaildData(this.permission.bills_add, false),
                viewBtn: this.vaildData(this.permission.bills_view, false),
                delBtn: this.vaildData(this.permission.bills_delete, false),
                editBtn: this.vaildData(this.permission.bills_edit, false)
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        }
    },
    created() {
        // 获取当前登录人个人信息
        this.saberUserInfo = JSON.parse(localStorage.getItem('saber-userInfo')).content
        // 首页快捷跳转进来的
        if (this.$route.query.home) {
            this.addbtnfun()
        }
        // if (this.$route.query.id) {
        //     this.rowCellfun(this.$route.query.id)
        // }
        // this.option = await this.getColumnData(this.getColumnName(309), this.optionBack);
        // this.mawbOption = await this.getColumnData(this.getColumnName(309.7), this.mawbOptionBack); // 主单列表
        if (localStorage.getItem(this.getColumnName(309))) {
            this.optionBack = JSON.parse(localStorage.getItem(this.getColumnName(309)))
        }
        this.billStatusWorkDictsfun() // 获取业务状态字典数据
        this.accountStatusWorkDictsfun() // 获取财务状态字典数据
        this.statusWorkDictsfun() // 业务审核类型
        this.editypesListfun() // edi 数据获取
    },
    mounted() {

    },
    activated() {
        if (this.$route.query.id) {
            if (!this.$store.getters.seaFEStatus) {
                setTimeout(() => {
                    this.rowCellfun(this.$route.query.id)
                }, 200);
            }
        }
    },
    methods: {
        //导出
        outExport() {
            this.$confirm('是否导出当前所有数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let queryParams = {}
                queryParams = {
                    businessType: 'SE',
                    seaType: 'E',
                    ...this.query,
                }
                delete queryParams.billStatus
                const routeData = this.$router.resolve({
                    path: '/api/blade-los/bills/exportBills',      //跳转目标窗口的地址
                    query: {
                        'Blade-Auth': getToken(),
                        ...queryParams,    //括号内是要传递给新窗口的参数
                    }
                })
                window.open(routeData.href.slice(1, routeData.href.length));
            })
        },
        // 发送EDI
        editypesSendingEdifun(row) {
            row.billId = this.ids
            editypesSendingEdi(row).then(res => {
                this.$message.success('发送EDI成功')
                this.onLoad(this.page)
            })
        },
        // 获取EDI列表数据
        editypesListfun() {
            editypesList(1, 30, { type: 'HYCK' }).then(res => {
                this.ediData = res.data.data.records
            })
        },
        // 展开和收起
        shiftCollapsiable() {
            this.fold = !this.fold
            if (this.fold) {
                this.option.searchMenuSpan = 24
            } else {
                this.option.searchMenuSpan = 6
            }
        },
        // 下拉的回调
        corpChange(value, name) {
            this.query[name] = value
        },
        // 获取签单方式字典数据
        getWorkDictsfun() {
            getWorkDicts('issue_type_F').then(res => {
                this.issueTypeData = res.data.data
                this.findObject(this.option.column, "issueType").dicData = res.data.data
            })
        },

        // tabs切换筛选
        handleClick(tab, event) {
            if (this.query.billStatus == 4) {
                this.query.billStatus = null
            }
            this.onLoad(this.page, this.query);
        },
        // 获取委托人数据
        // corpBcorpslistByType(cnName) {
        //     getBcorpslistByType(1, 10, { cnName, status: 0 }).then(res => {
        //         this.corpData = res.data.data.records
        //         this.findObject(this.option.column, "corpCnName").dicData = res.data.data.records
        //     })
        // },
        // 获取收货人数据
        hConsigneeBcorpslistByType(cnName) {
            getBcorpslistByType(1, 10, { cnName, status: 0 }).then(res => {
                this.hConsigneeData = res.data.data.records
                this.findObject(this.option.column, "hConsigneeCnName").dicData = res.data.data.records
            })
        },
        // 获取船名
        vesselBvesselsListfun(enName) {
            getBvesselsList(1, 10, { enName, status: 0 }).then(res => {
                this.vesselData = res.data.data.records
                this.findObject(this.option.column, "vesselEnName").dicData = res.data.data.records
            })
        },
        // 获取船公司数据
        carrierBcorpslistByTypefun(enName) {
            let corpTypeName = '船公司'
            getBcorpslistByType(1, 10, { enName, status: 0, corpTypeName }).then(res => {
                this.carrierData = res.data.data.records
                this.findObject(this.option.column, "carrierEnName").dicData = res.data.data.records
            })
        },
        // 卸货港数据
        podBportsListfun(enName) {
            bportsList(1, 10, { enName, status: 0 }).then(res => {
                this.podData = res.data.data.records
                this.findObject(this.option.column, "podEnName").dicData = res.data.data.records
            })
        },
        // 航线数据
        lineBlinesListfun(cnName) {
            blinesList(1, 10, { cnName, status: 0 }).then(res => {
                this.lineData = res.data.data.records
                this.findObject(this.option.column, "lineCnName").dicData = res.data.data.records
            })
        },
        // 获取场站数据
        cyBcorpslistByType(cnName) {
            let corpTypeName = '场站'
            getBcorpslistByType(1, 10, { cnName, status: 0, corpTypeName }).then(res => {
                this.cyData = res.data.data.records
                this.findObject(this.option.column, "cyCnName").dicData = res.data.data.records
            })
        },
        // 订舱代理
        bookingAgentBcorpsListfun(cnName) {
            let corpTypeName = '国内直接客户,国内同行及代理,国外直接客户,国外同行及代理'
            getBcorpslistByType(1, 10, { cnName, status: 0, corpTypeName }).then(res => {
                this.bookingAgentData = res.data.data.records
                this.findObject(this.option.column, "bookingAgentCnName").dicData = res.data.data.records
            })
        },
        // 获取核算部分数据 // 机构管理接口
        createDeptLzylistfun() {
            getDeptTree().then(res => {
                this.createDeptData = res.data.data
                this.findObject(this.option.column, "createDeptName").dicData = res.data.data;
            })
        },
        // 获取业务状态字典数据
        billStatusWorkDictsfun() {
            getWorkDicts('bill_status').then(res => {
                this.billStatusData = res.data.data
            })
        },
        // 获取财务状态字典数据
        accountStatusWorkDictsfun() {
            getWorkDicts('account_status').then(res => {
                this.accountStatusData = res.data.data
            })
        },
        // 获取业务审核状态
        statusWorkDictsfun() {
            getWorkDicts('audit_status_los').then(res => {
                this.auditStatusList = res.data.data;
            })
        },
        // 添加到主单
        increaseMawb() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            // 判断是否可以编辑别人业务 true 就没有权限
            if (this.ModifyOthersfun()) return;
            const obj = this.selectionList[0]
            for (let item of this.selectionList) {
                if (item.billType != 'MH') {
                    this.$message.warning("请选择分单");
                    return;
                }
                if (obj.placeReceiptId != item.placeReceiptId) {
                    // 收货地
                    this.$message.warning("请选择收货地相同的");
                    return
                }
                if (obj.polId != item.polId) {
                    // 装货港一样
                    this.$message.warning("请选择装货港相同的");
                    return
                }
            }
            this.mawbQuery.placeReceiptName = obj.placeReceiptName
            this.mawbQuery.polCnName = obj.polCnName
            this.$nextTick(() => {
                this.dialogVisible = true
                this.mawbOnLoad(this.mawbPage)
            })
        },
        // 判断是否可以编辑别人业务
        ModifyOthersfun() {
            let sumArr = []
            const h = this.$createElement
            // 判断是否有权限
            if (this.saberUserInfo.role_name.indexOf('admin') != -1 ? this.saberUserInfo.role_name.indexOf('允许修改他人业务') != -1 : false) return false
            // 当前登录人和选择的创建人对比是不是一个人
            for (let item of this.selectionList) {
                if (this.saberUserInfo.user_id != item.createUser) {
                    sumArr.push(h('p', `你没有"允许修改他人业务"权限,请重新选择数据`))
                }
            }
            if (sumArr.length != 0) {
                this.$confirm('提示', {
                    message: h('div', sumArr),
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).catch(err => { })
                return true
            }
        },
        // 退舱
        Disembarkingfun() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            // 判断是否可以编辑别人业务 true 就没有权限
            if (this.ModifyOthersfun()) return;
            this.billsDisembarkingfun(this.ids)
        },
        // 退舱接口
        billsDisembarkingfun(ids) {
            billsDisembarking(ids).then(res => {
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.onLoad(this.page)
            })
        },
        // 撤销退仓
        revokeWithdrawalfun() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            this.billsRevokeDisembarkingfun(this.ids)
        },
        // 撤销退舱接口
        billsRevokeDisembarkingfun(ids) {
            billsRevokeDisembarking(ids).then(res => {
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.onLoad(this.page)
            })
        },
        // 下拉显示数据
        async expandChange(row) {
            if (row.billType == 'MM') {
                this.SplitLoading = true
                const res = await billsListAll({ masterId: row.id })
                this.$set(row, 'billsListAllData', res.data.data)
                this.SplitLoading = false
            } else {
                this.$refs.crud.toggleRowExpansion(row, false)
            }
        },
        // 弹窗单选
        radioInput(row) {
            console.log(row, 2134)
            console.log(this.dialogRadio, 2083)
        },
        // 弹窗确认
        AddToMainOrder() {
            if (!this.dialogRadio) {
                this.$message.warning("请选择一条数据");
                return
            }
            this.billsIncreaseReinsurancePolicyfun(this.ids, this.dialogRadio)
        },
        // 添加到主单接口
        billsIncreaseReinsurancePolicyfun(ids, id) {
            billsIncreaseReinsurancePolicy(ids, id).then(res => {
                this.dialogRadio = null
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.dialogVisible = false
                this.onLoad(this.page)
            })
        },
        // 弹窗关闭
        handleClose(done) {
            done();
        },
        toAddEdit() {
            this.datekey = Date.now()
        },
        // 详情的返回列表
        goBack() {
            // 初始化数据
            // this.detailData = this.$options.data().detailData;
            if (JSON.stringify(this.$route.query) != "{}") {
                this.$router.$avueRouter.closeTag();
                this.$router.push({
                    path: "/iosBasicData/SeafreightExportF/bills/index"
                });
            }
            this.isShow = true;
            this.onLoad(this.page, this.search);
            this.$store.commit("OUT_SEAFE_DETAIL");
        },
        // 新增弹窗开启
        addbtnfun() {
            this.detailData.seeDisabled = false
            this.isShow = false
            this.$store.commit("IN_SEAFE_DETAIL");
        },
        // 复制单据
        CopyDocumentsfun() {
            if (this.selectionList.length !== 1) {
                this.$message.warning("请选择一条数据");
                return;
            }
            this.$DialogForm.show({
                title: '复制单据',
                width: '300px',
                menuPosition: 'right',
                data: { checkbox: '复制费用,复制箱型箱量' },
                option: {
                    submitText: '确认',
                    emptyText: '取消',
                    span: 24,
                    column: [{
                        label: "复制类型",
                        prop: "checkbox",
                        type: 'checkbox',
                        dicData: [{
                            label: '复制费用',
                            value: '复制费用',
                        }, {
                            label: '复制箱型箱量',
                            value: '复制箱型箱量'
                        }],
                        dataType: 'string',
                        span: 24,
                    }]
                },
                beforeClose: (done) => {
                    done()
                },
                callback: (res) => {
                    res.done()
                    this.detailData.seeDisabled = false
                    this.detailData.id = this.selectionList[0].id
                    this.isShow = false
                    this.$nextTick(() => {
                        this.$refs.billsDetails.pageLoading = true
                        this.$refs.billsDetails.billsCopyBillsfun(this.selectionList[0].id, res.data.checkbox)
                    })
                    this.$store.commit("IN_SEAFE_DETAIL");
                    res.close()
                }
            })

        },
        // 编辑详情打开
        rowCellfun(id, row) {
            this.detailData = {
                id: id
            };
            if (row) {
                if (this.saberUserInfo.role_name.indexOf('admin') == -1 ? this.saberUserInfo.role_name.indexOf('允许修改他人业务') == -1 ? this.saberUserInfo.user_id == row.createUser : true : true) {
                    this.detailData.seeDisabled = false
                } else {
                    this.detailData.seeDisabled = true
                }
            } else {
                this.detailData.seeDisabled = false
            }
            this.isShow = false
            this.$nextTick(() => {
                this.$refs.billsDetails.pageLoading = true
                this.$refs.billsDetails.billsDetailfun(id)
            })
            this.$store.commit("IN_SEAFE_DETAIL");
        },

        rowSave(row, done, loading) {
            billsSubmit(row).then(() => {
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            }, error => {
                loading();
                window.console.log(error);
            });
        },
        rowUpdate(row, index, done, loading) {
            billsSubmit(row).then(() => {
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            }, error => {
                loading();
                console.log(error);
            });
        },
        rowDel(row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return billsRemove(row.id);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                });
        },
        // 批量删除
        handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            // 判断是否可以编辑别人业务 true 就没有权限
            if (this.ModifyOthersfun()) return;
            // 已经提交请核的提示不让删除
            let sumArr = []
            const h = this.$createElement
            for (let item of this.selectionList) {
                if (item.status == 1) {
                    sumArr.push(h('p', `序号${item.$index + 1}的数据已经提交请核请勿删除`))
                }
            }
            if (sumArr.length != 0) {
                this.$confirm('提示', {
                    message: h('div', sumArr),
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                return;
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return billsRemove(this.ids);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.$refs.crud.toggleSelection();
                });
        },
        beforeOpen(done, type) {
            if (["edit", "view"].includes(type)) {
                billsDetail(this.form.id).then(res => {
                    this.form = res.data.data;
                });
            }
            done();
        },
        searchReset() {
            this.query = {};
            this.query.billSort = this.query.billSort ? this.query.billSort : '1'
            this.onLoad(this.page);
        },
        // 搜索
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            // // 判断检索条件是否可以使用
            // if(this.etdDisabled) {
            //     this.query.etdList = this.etdList
            // }else {
            //     delete params.etdList
            // }
            // if(this.etaDisabled) {
            //     this.query.etaList = this.etaList
            // }else {
            //     delete params.etaList
            // }
            this.onLoad(this.page, params);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        // 列表获取数据
        onLoad(page, params = {}) {
            this.loading = true;
            billsList(page.currentPage, page.pageSize, {
                ...Object.assign(params, this.query),
                businessType: 'SE',
                seaType: 'E',
                status: this.query.billStatus == 3 ? 3 : undefined,
            }).then(res => {
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records.map(item => {
                    item.billsListAllData = []
                    item.billStatus = item.billStatus + ''
                    item.accountStatus = item.accountStatus + ''
                    item.status = item.status + ''
                    return item
                })
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                    this.$refs.crud.dicInit();
                });
                this.loading = false;
                this.selectionClear();
            });
        },
        // 弹窗表格获取数据
        mawbOnLoad(page, params = {}) {
            this.mawbloading = true;
            billsList(page.currentPage, page.pageSize,
                { ...Object.assign(params, this.mawbQuery), businessType: 'SE' }).then(res => {
                    const data = res.data.data;
                    this.mawbPage.total = data.total;
                    this.mawbData = data.records;
                    this.mawbloading = false;
                })
        },
        // 弹窗列表的分页
        mawbSizeChange(val) {
            this.mawbPage.pageSize = val
            this.mawbOnLoad(this.mawbPage, this.mawbQuery)
        },
        // 弹窗列表的分页
        mawbCurrentChange(val) {
            this.mawbPage.currentPage = val
            this.mawbOnLoad(this.mawbPage, this.mawbQuery)
        },
        // 弹窗的搜索
        mawbSearch(params, done) {
            this.mawbQuery = params;
            this.mawbPage.currentPage = 1;
            this.mawbOnLoad(this.mawbPage, params)
            done()
        },

        //自定义列保存
        saveColumnTwo(ref, option, code) {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            console.log(ref, option, code)
            localStorage.setItem(this.getColumnName(code), JSON.stringify(option))
            this.$message.success("保存成功");
            //关闭窗口
            this.$refs[ref].$refs.dialogColumn.columnBox = false;
        },
        //自定义列重置
        resetColumnTwo(ref, code) {
            this.optionBack = this.$options.data().optionBack
            localStorage.removeItem(this.getColumnName(code));
            this.$message.success("重置成功");
            this.$refs[ref].$refs.dialogColumn.columnBox = false;
        },

        // 更改表格颜色
        headerClassName(tab) {
            //颜色间隔
            let back = ""
            if (tab.columnIndex >= 0 && tab.column.level === 1) {
                if (tab.columnIndex % 2 === 0) {
                    back = "back-one"
                } else if (tab.columnIndex % 2 === 1) {
                    back = "back-two"
                }
            }
            return back;
        },

    }
};
</script>

<style scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
    text-align: center;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
    text-align: center;
}

/deep/ .el-col-md-8 {
    width: 24.33333%;
}

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