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

<template>
    <div>
        <basic-container v-show="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" :row-style="rowStyle"
                @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('DD')">新建直单
                    </el-button>
                    <el-button type="success" size="small" @click="addbtnfun('MM')">新建主单
                    </el-button>
                    <el-button type="warning" size="small" @click="addbtnfun('MH')">新建分单
                    </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">
                            发送 SO 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_SO" :key="item.id"
                                @click.native="editypesSendingEdifun(item)">{{ item.cnName }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown style="line-height: 0">
                        <el-button size="small" type="success" style="margin-right: 8px"
                            :disabled="selectionList.length == 0">
                            发送 SI 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_SI" :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="4">
                                <span slot="label">出号</span>
                            </el-tab-pane>
                            <el-tab-pane label="开船" name="5">
                                <span slot="label">开船</span>
                            </el-tab-pane>
                            <el-tab-pane label="到港" name="6">
                                <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="7"></el-tab-pane>
                        </el-tabs>
                        <!-- <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 数据
            ediData_SO: [], // 获取的 SO edi 数据
            ediData_SI: [], // 获取的 SI 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: "carrierShortName",
                        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: "cyShortName",
                        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: {
        rowStyle({ row, column, rowIndex, columnIndex }) {
            if (row.status == 2) {
                return {
                    // color: '#fff',
                    backgroundColor: "#fbd26a"
                };
            }
            if (row.status == 3) {
                return {
                    // color: '#fff',
                    backgroundColor: "#ced094"
                };
            }
            if (row.status == 4) {
                return {
                    // color: '#fff',
                    backgroundColor: "#fbc4c4"
                };
            }
        },
        //导出
        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, 1000, { type: "HYCK" }).then(res => {
                console.log("EDI", res.data.data.records);
                this.ediData = res.data.data.records;
                this.ediData_SO = res.data.data.records.filter(
                    r => r.groupName == "SO"
                );
                this.ediData_SI = res.data.data.records.filter(
                    r => r.groupName == "SI"
                );
                console.log(this.ediData_SO, this.ediData_SI);
            });
        },
        // 展开和收起
        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(type) {
            this.detailData.seeDisabled = false;
            this.detailData.billType = type;
            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>