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

<template>
  <div>
      <basic-container v-if="isShow">
          <avue-crud :option="option"
                     :table-loading="loading"
                     :data="data"
                     :page.sync="page"
                     id="out-table"
                     :header-cell-class-name="headerClassName"
                     :permission="permissionList"
                     :before-open="beforeOpen"
                     v-model="form"
                     ref="crud"
                     :search.sync="query"
                     @row-update="rowUpdate"
                     @row-save="rowSave"
                     @row-del="rowDel"
                     @search-change="searchChange"
                     @search-reset="searchReset"
                     @selection-change="selectionChange"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     @refresh-change="refreshChange"
                     @on-load="onLoad"
                     @expand-change="expandChange"
                     @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 309)"
                     @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 309)" >
              <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="委托人">
                                  <!--<el-input placeholder="请输入委托人" clearable-->
                                  <!--          size="small" style="width:100%" v-model="query.corpCnName">-->
                                  <!--</el-input>-->
                                  <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="目的港">
                                  <!--<el-input placeholder="请输入目的港" clearable-->
                                  <!--          size="small" style="width:100%" v-model="query.podCnName">-->
                                  <!--</el-input>-->
                                  <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="航线">
                                  <!--<el-input placeholder="请输入航线" clearable-->
                                  <!--          size="small" style="width:100%" v-model="query.lineCnName">-->
                                  <!--</el-input>-->
                                  <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="场站">
                                  <!--<el-input placeholder="请输入场站" clearable-->
                                  <!--          size="small" style="width:100%" v-model="query.cyCode">-->
                                  <!--</el-input>-->
                                  <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="创建部门">
                                  <!--<el-input placeholder="请输入创建部门" clearable-->
                                  <!--          size="small" style="width:100%" v-model="query.createDeptName">-->
                                  <!--</el-input>-->
                                  <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="订舱代理">
                                  <!--<el-input placeholder="请输入订舱代理" clearable-->
                                  <!--          size="small" style="width:100%" v-model="query.bookingAgentCnName">-->
                                  <!--</el-input>-->
                                  <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="收货人">
                                  <!--<el-input placeholder="请输入收货人" clearable-->
                                  <!--          size="small" style="width:100%" v-model="query.hConsigneeCnName">-->
                                  <!--</el-input>-->
                                  <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>

              <template slot="menuLeft">
                  <el-button type="primary" size="small" icon="el-icon-plus" @click="addbtnfun()">新建业务
                  </el-button>
                  <el-button type="primary"
                             size="small"
                             icon="el-icon-delete"
                             plain @click="CopyDocumentsfun">复制单据
                  </el-button>
                  <el-button type="success"
                             size="small"
                             icon="el-icon-plus"
                             plain
                             @click="increaseMawb">分单->主单
                  </el-button>
                  <el-button type="warning"
                             size="small"
                             icon="el-icon-delete"
                             plain
                             v-if="query.billStatus == 0"
                             @click="Disembarkingfun">退 舱
                  </el-button>
                  <el-button type="primary"
                             size="small"
                             icon="el-icon-delete"
                             plain
                             v-if="query.billStatus == 1"
                             @click="revokeWithdrawalfun" >撤销退舱
                  </el-button>
                  <el-button type="danger"
                             size="small"
                             icon="el-icon-delete"
                             plain
                             v-if="query.billStatus != 3"
                             @click="handleDelete">删 除
                  </el-button>
                  <el-dropdown style="line-height: 0">
                      <el-button size="small" type="success" style="margin-right: 8px" :disabled="selectionList.length == 0" >
                          发送 EDI<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-for="item in ediData" :key="item.id"
                                            @click.native="editypesSendingEdifun(item)" >{{item.cnName}}
                          </el-dropdown-item>
                      </el-dropdown-menu>
                  </el-dropdown>
                  <div style="margin-top: 10px">
                      <el-tabs type="card" v-model="query.billStatus" @tab-click="handleClick">
                          <el-tab-pane label="接单" name="0">
                              <span slot="label">接单</span>
                          </el-tab-pane>
                          <el-tab-pane label="退舱" name="1">
                              <span slot="label" style="color: #d86363">退舱</span>
                          </el-tab-pane>
                          <el-tab-pane label="完成" name="3"></el-tab-pane>
                      </el-tabs>
                  </div>
              </template>
              <template slot-scope="scope" slot="menu">
                  <el-button :type="scope.type" :size="scope.size" icon="el-icon-edit"
                             @click.stop="rowCellfun(scope.row.id, scope.index)">编辑
                  </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}">
                  <span v-if="row.billStatus == item.dictKey"
                        v-for="(item,index) in billStatusData" :key="index"
                        :style="{'color':item.colour}" >
                      {{item.dictValue}}
                  </span>
              </temolate>
              <template slot="accountStatus" slot-scope="{ row }">
                  <span v-if="row.accountStatus == item.dictKey"
                        v-for="(item,index) in accountStatusData" :key="index"
                        :style="{'color':item.colour}" >
                      {{item.dictValue}}
                  </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.index)" >
                      {{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>
          </avue-crud>
      </basic-container>

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

      <el-dialog
          title="主单列表"
          :visible.sync="dialogVisible"
          append-to-body
          width="60%"
          :before-close="handleClose">
          <avue-crud :option="mawbOption"
                     :table-loading="mawbloading"
                     :data="mawbData"
                     :page.sync="mawbPage"
                     :search="mawbQuery"
                     ref="mawbOptionCrud"
                     id="out-table"
                     :header-cell-class-name="headerClassName"
                     @search-change="mawbSearch"
                     @resetColumn="resetColumnTwo('mawbOptionCrud', 'mawbOption', 'mawbOptionBack', 309.7)"
                     @saveColumn="saveColumnTwo('mawbOptionCrud', 'mawbOption', '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";

  export default {
    components:{TreeSelect, SearchQuery, feesTemplateItems, billsDetails,SplitList},
    data() {
      return {
          ediData:[], // 获取的 edi 数据
          // 展开和收回
          fold:false,
          maxShow:3,
          corpData:[], //委托人
          hConsigneeData:[], // 收货人
          // 船名
          vesselData:[],
          // 船公司
          carrierData:[],
          // 目的港(卸货港)
          podData:[],
          // 航线
          lineData:[],
          // 场站
          cyData:[],
          // 订舱代理
          bookingAgentData:[],
          createDeptData:[], // 部门数据
          // 单据类型
          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, // 弹窗开启
          // 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',
        },
          // 弹窗的搜索项
          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:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          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',
          column: [
              {
              label: "单据类型",
              prop: "billType",
                type: 'select',
                dicData: [{
                    label: '直单',
                    value: 'DD'
                }, {
                    label: '主单',
                    value: 'MM'
                },{
                    label: '分单',
                    value: 'MH'
                }],
                overHidden:true,
            },
            {
              label: "单据编号",
              prop: "billNo",
                width:"160",
                overHidden:true,
            },
            {
              label: "客户名",
              prop: "corpCnName",
                width:"160",
                overHidden:true,
            },
            {
              label: "客户英文",
              prop: "corpEnName",
                width:"160",
                overHidden:true,
            },
              {
                  label: "船名",
                  prop: "vesselCnName",
                  overHidden:true,
              },
              {
                  label: "航次",
                  prop: "voyageNo",
                  width: "80",
                  overHidden: true,
              },
            {
              label: "MB/L NO",
              prop: "mblno",
              width: "80",
              overHidden: true,
                // search:true,
                // span:6,
            },
            {
              label: "HB/L NO",
              prop: "hblno",
              width: "80",
              overHidden: true,
            },
            {
              label: "开船日期",
              prop: "etd",
              type: "date",
              unlinkPanels: true,
              searchRange: true,
              overHidden: true,
              forma: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              searchDefaultTime: ["00:00:00", "23:59:59"],
            },
            {
              label: "到港日期",
              prop: "eta",
              width: "80",
              overHidden: true,
            },
            {
              label: "装货港",
              prop: "polCnName",
                width:"120",
                overHidden:true,
            },
            {
              label: "卸货港",
              prop: "podCnName",
                width:"120",
                overHidden:true,
            },
            {
              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: "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: "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: "checkDrStatusDescr",
                width:"160",
                overHidden:true,
            },
            {
              label: "应付对账状态",
              prop: "checkCrStatusDescr",
                width:"160",
                overHidden:true,
            },
            {
              label: "应收结算状态",
              prop: "stlDrStatusDescr",
                width:"160",
                overHidden:true,
            },
            {
              label: "应付结算状态",
              prop: "stlCrStatusDescr",
                width:"160",
                overHidden:true,
            },
            {
              label: "销项发票状态",
              prop: "invoiceDrStatusDescr",
                width:"160",
                overHidden:true,
            },
            {
              label: "进项发票状态",
              prop: "invoiceCrStatusDescr",
                width:"160",
                overHidden:true,
            },
              {
                  label: "创建人",
                  prop: "createUserName",
                  rules: [{
                      required: true,
                      message: "请输入创建人",
                      trigger: "blur"
                  }],
                  overHidden:true,
              },
              {
                  label: "创建时间",
                  prop: "createTime",
                  width:"160",
                  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",
                dicData: [],
                props: {
                    label: "dictValue",
                    value: "dictKey"
                },
                width: "100",
                overHidden:true,
            },
            {
              label: "财务状态",
              prop: "accountStatus",
                type:"select",
                dicData: [],
                props: {
                    label: "dictValue",
                    value: "dictKey"
                },
                width: "180",
                overHidden:true,
            },
            {
              label: "审核状态",
              prop: "status",
                type: 'select',
                dicData: [],
                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:[],
      };
    },
    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(",");
      }
    },
      async created() {
          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); // 主单列表
          this.billStatusWorkDictsfun()
          this.accountStatusWorkDictsfun()
          this.getWorkDictsfun() // 获取签单方式字典数据
          this.statusWorkDictsfun() // 业务审核类型
          this.editypesListfun() // edi 数据获取
      },
      methods: {
          // 发送EDI
          editypesSendingEdifun(row){
              row.billId = this.ids
              editypesSendingEdi(row).then(res=>{
                  this.$message.success('发送EDI成功')
                  this.onLoad(this.page)
              })
          },
          // 获取EDI列表数据
          editypesListfun(){
              editypesList(1,30,{type:'HYCK'}).then(res=>{
                  this.ediData = res.data.data.records
              })
          },
        // 展开和收起
          shiftCollapsiable(){
              this.fold = !this.fold
              if(this.fold) {
                  this.option.searchMenuSpan = 24
              }else {
                  this.option.searchMenuSpan = 6
              }
          },
        // 下拉的回调
          corpChange(value,name) {
              this.query[name] = value
          },
          // 获取签单方式字典数据
          getWorkDictsfun(){
              getWorkDicts('issue_type_F').then(res=>{
                  this.issueTypeData = res.data.data
              })
          },

        // tabs切换筛选
          handleClick(tab, event){
              this.onLoad(this.page, this.query);
          },
          // 获取委托人数据
          corpBcorpslistByType(cnName){
              getBcorpslistByType(1,10,{cnName}).then(res=>{
                  this.corpData = res.data.data.records
              })
          },
          // 获取收货人数据
          hConsigneeBcorpslistByType(cnName){
              getBcorpslistByType(1,10,{cnName}).then(res=>{
                  this.hConsigneeData = res.data.data.records
              })
          },
          // 获取船名
          vesselBvesselsListfun(enName){
              getBvesselsList(1,10,{enName}).then(res=>{
                  this.vesselData = res.data.data.records
              })
          },
          // 获取船公司数据
          carrierBcorpslistByTypefun(cnName){
              let corpType = '1712286570540703745'
              getBcorpslistByType(1,10,{cnName,corpType}).then(res=>{
                  this.carrierData = res.data.data.records
              })
          },
          // 卸货港数据
          podBportsListfun(enName){
              bportsList(1,10,{enName}).then(res=>{
                  this.podData = res.data.data.records
              })
          },
          // 航线数据
          lineBlinesListfun(cnName){
              blinesList(1,10,{cnName}).then(res=>{
                  this.lineData = res.data.data.records
              })
          },
          // 获取场站数据
          cyBcorpslistByType(cnName){
              let corpType = '1712286771737272322'
              getBcorpslistByType(1,10,{cnName,corpType}).then(res=>{
                  this.cyData = res.data.data.records
              })
          },
          // 订舱代理
          bookingAgentBcorpsListfun(cnName){
              let corpType = '1712285382575398914,1712285645314990082,1712285842321448962,1712286433378574338'
              getBcorpslistByType(1,10,{cnName,corpType}).then(res=>{
                  this.bookingAgentData = res.data.data.records
              })
          },
          // 获取核算部分数据 // 机构管理接口
          createDeptLzylistfun(){
              getDeptTree().then(res=>{
                  this.createDeptData = res.data.data
              })
          },
        // 获取业务状态字典数据
        billStatusWorkDictsfun(){
           getWorkDicts('bill_status').then(res=>{
               this.findObject(this.option.column, "billStatus").dicData = res.data.data;
               this.billStatusData = res.data.data
           })
        },
        // 获取财务状态字典数据
        accountStatusWorkDictsfun(){
           getWorkDicts('account_status').then(res=>{
              this.findObject(this.option.column, "accountStatus").dicData = res.data.data;
              this.accountStatusData = res.data.data
           })
        },
          // 获取业务审核状态
          statusWorkDictsfun(){
              getWorkDicts('audit_status_los').then(res=>{
                  this.findObject(this.option.column, "status").dicData = res.data.data;
              })
          },
        // 添加到主单
        increaseMawb(){
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                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)
            })
        },
        // 退舱
        Disembarkingfun(){
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                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) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogRadio = null
                    done();
                })
                .catch(_ => {});
        },
        // 详情的返回列表
        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);
        },
        // 新增弹窗开启
        addbtnfun(){
            this.detailData.seeDisabled = false
            this.isShow = false
        },
        // 复制单据
        CopyDocumentsfun(){
            if (this.selectionList.length !== 1) {
                this.$message.warning("请选择一条数据");
                return;
            }
            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)
            })
        },
        // 编辑详情打开
        rowCellfun(id,index) {
            this.detailData = {
                seeDisabled: false,
                id: id
            };
            this.isShow = false
            this.$nextTick(()=>{
                this.$refs.billsDetails.pageLoading = true
                this.$refs.billsDetails.billsDetailfun(id)
            })
        },

      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;
        }
        // 已经提交请核的提示不让删除
        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.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)).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.loading = false;
          this.selectionClear();
        });
      },
        // 弹窗表格获取数据
        mawbOnLoad(page, params = {}){
            this.mawbloading = true;
            billsList(page.currentPage, page.pageSize, Object.assign(params, this.mawbQuery)).then(res=>{
                const data = res.data.data;
                this.mawbPage.total = data.total;
                this.mawbData = data.records;
                this.mawbloading = false;
            })
        },
        // 弹窗的搜索
        mawbSearch(params, done){
            this.mawbQuery = params;
            this.mawbPage.currentPage = 1;
            this.mawbOnLoad(this.mawbPage,params)
            done()
        },

        //自定义列保存
        async saveColumnTwo(ref, option, optionBack, code) {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
            }
        },
        //自定义列重置
        async resetColumnTwo(ref, option, optionBack, code) {
            this[option] = this[optionBack];
            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
            if (inSave) {
                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>