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="请输入主单号"
                                            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="请输入委托人"
                                            size="small" style="width:100%" v-model="query.corpCnName">
                                  </el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="fold?6:8" >
                              <el-form-item label="业务号">
                                  <el-input placeholder="请输入业务号"
                                            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="请输入分单号"
                                            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="船名">
                                  <el-input placeholder="请输入船名"
                                            size="small" style="width:100%" v-model="query.vesselCnName">
                                  </el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="6" v-show="fold" >
                              <el-form-item label="航次">
                                  <el-input placeholder="请输入航次"
                                            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="船公司">
                                  <el-input placeholder="请输入船公司"
                                            size="small" style="width:100%" v-model="query.carrierCnName">
                                  </el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="6" v-show="fold">
                              <el-form-item label="目的港">
                                  <el-input placeholder="请输入目的港"
                                            size="small" style="width:100%" v-model="query.podCnName">
                                  </el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="6" v-show="fold">
                              <el-form-item label="航线">
                                  <el-input placeholder="请输入航线"
                                            size="small" style="width:100%" v-model="query.lineCnName">
                                  </el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="6" v-show="fold">
                              <el-form-item label="场站">
                                  <el-input placeholder="请输入场站"
                                            size="small" style="width:100%" v-model="query.cyCode">
                                  </el-input>
                              </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="请输入来源详情"
                                            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="请输入创建部门"
                                            size="small" style="width:100%" v-model="query.createDeptName">
                                  </el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="6" v-show="fold">
                              <el-form-item label="订舱代理">
                                  <el-input placeholder="请输入订舱代理"
                                            size="small" style="width:100%" v-model="query.bookingAgentCnName">
                                  </el-input>
                              </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="请输入收货人"
                                            size="small" style="width:100%" v-model="query.hConsigneeCnName">
                                  </el-input>
                              </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="danger"
                             size="small"
                             icon="el-icon-delete"
                             plain
                             @click="handleDelete">删 除
                  </el-button>
                  <el-button type="success"
                             size="small"
                             icon="el-icon-plus"
                             plain
                             @click="increaseMawb">添加到主单
                  </el-button>
                  <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="2">
                              <span slot="label" style="color: #d2983c">暂停</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, scope.index)">编辑
                  </el-button>
              </template>
              <template slot-scope="scope" slot="coloaderEnName">
                  <avue-text-ellipsis :text="scope.row.coloaderEnName" :height="30" use-tooltip placement="top">
                      <small slot="more">...</small>
                  </avue-text-ellipsis>
              </template>
              <template slot-scope="scope" slot="hblno">
                  <avue-text-ellipsis :text="scope.row.hblno" :height="30" use-tooltip placement="top">
                      <small slot="more">...</small>
                  </avue-text-ellipsis>
              </template>
              <template slot-scope="scope" slot="mblno">
                  <avue-text-ellipsis :text="scope.row.mblno" :height="30" use-tooltip placement="top">
                      <small slot="more">...</small>
                  </avue-text-ellipsis>
              </template>
              <template slot="expand" slot-scope="{row}" >
                  <SplitList :typeMenu="true" :data="row.billsListAllData" :loading="SplitLoading" ></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="corpCnName" slot-scope="scope">
                  <span style="color: #1e9fff;cursor: pointer;"
                        @click.stop="rowCellfun(scope.row, scope.index)" >
                      {{scope.row.corpCnName}}
                  </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"
                     id="out-table"
                     :header-cell-class-name="headerClassName"
                     @on-load="mawbOnLoad">
              <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">取 消</el-button>
              <el-button type="primary" @click="AddToMainOrder">确 定</el-button>
          </span>
      </el-dialog>
  </div>

</template>

<script>
import {
    billsList,
    billsDetail,
    billsSubmit,
    billsRemove,
    billsIncreaseReinsurancePolicy, billsListAll
} 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";

  export default {
    components:{SearchQuery, feesTemplateItems, billsDetails,SplitList},
    data() {
      return {
          // 展开和收回
          fold:false,
          maxShow:3,
          // 单据类型
          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'
                }],
            },
            {
              label: "单据编号",
              prop: "billNo",
                width:"160"
            },
            {
              label: "主单据号",
              prop: "masterBillNo",
                width:"160"
            },
            {
              label: "客户名",
              prop: "corpCnName",
                width:"160"
            },
            {
              label: "客户英文",
              prop: "corpEnName",
                width:"160"
            },
              {
                  label: "船名",
                  prop: "vesselCnName",
              },
              {
                  label: "航次",
                  prop: "voyageNo",
              },
            {
              label: "MB/L NO",
              prop: "mblno",
            },
            {
              label: "HB/L NO",
              prop: "hblno",
            },
            {
              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",
            },
            {
              label: "装货港",
              prop: "polCnName",
                width:"120"
            },
            {
              label: "卸货港",
              prop: "podCnName",
                width:"120"
            },
            {
              label: "装箱方式",
              prop: "loadType",
                type: 'select',
                dicData: [{
                    label: '整箱',
                    value: 'FCL'
                }, {
                    label: '拼箱',
                    value: 'LCL'
                }],
            },
            {
              label: "货物类别",
              prop: "cargoType",
                type: 'select',
                dicData: [{
                    label: '普货',
                    value: 'dry'
                }, {
                    label: '危险品',
                    value: 'danger'
                },{
                    label: '冻柜',
                    value: 'reefer'
                }],
            },
            {
              label: "唛头",
              prop: "marks",
                // ----------
            },
            {
              label: "件数",
              prop: "quantity",
            },
            {
              label: "毛重 (KGM)",
              prop: "grossWeight",
                width:"120"
            },
            {
              label: "净重 (KGM)",
              prop: "netWeight",
                width:"120"
            },
            {
              label: "体积 (CBM)",
              prop: "measurement",
                width:"120"
            },
            {
              label: "V20",
              prop: "quantityV20",
                width:"100"
            },
            {
              label: "V40",
              prop: "quantityV40",
                width:"100"
            },
              {
                  label: "40HC",
                  prop: "quantityV40hc",
                  width:"100"
              },
            {
              label: "V45",
              prop: "quantityV45",
                width:"100"
            },
            {
              label: "V48",
              prop: "quantityV48",
                width:"100"
            },
            {
              label: "需陆运",
              prop: "isNeedLand",
                type: 'select',
                dicData: [{
                    label: '否',
                    value: 0
                }, {
                    label: '是',
                    value: 1
                }],
            },
            {
              label: "需报关",
              prop: "isNeedDeclare",
                type: 'select',
                dicData: [{
                    label: '否',
                    value: 0
                }, {
                    label: '是',
                    value: 1
                }],
            },
            {
              label: "需三检",
              prop: "isNeedIq",
                type: 'select',
                dicData: [{
                    label: '否',
                    value: 0
                }, {
                    label: '是',
                    value: 1
                }],
            },
            {
              label: "应收(CNY)",
              prop: "amountDr",
                width: "160"
            },
            {
              label: "应付(CNY)",
              prop: "amountCr",
                width: "160"
            },
            {
              label: "利润(CNY)",
              prop: "amountProfit",
                width: "160"
            },
            {
                // label: "综合 USD 应付(USD) - 非 USD 外币转换为 USD",
              label: "综合应付(USD)",
              prop: "amountCrUsd",
                width: "120"
            },
            {
              label: "综合利润(USD)",
              prop: "amountProfitUsd",
                width: "120"
            },
            {
              label: "合计应收(CNY )",
              prop: "amountDrLoc",
                width:"160"
            },
            {
              label: "合计应付(CNY)",
              prop: "amountCrLoc",
                width:"160"
            },
            {
              label: "合计利润(CNY)",
              prop: "amountProfitLoc",
                width:"160"
            },
            {
              label: "应收对账状态",
              prop: "checkDrStatusDescr",
                width:"160"
            },
            {
              label: "应付对账状态",
              prop: "checkCrStatusDescr",
                width:"160"
            },
            {
              label: "应收结算状态",
              prop: "stlDrStatusDescr",
                width:"160"
            },
            {
              label: "应付结算状态",
              prop: "stlCrStatusDescr",
                width:"160"
            },
            {
              label: "销项发票状态",
              prop: "invoiceDrStatusDescr",
                width:"160"
            },
            {
              label: "进项发票状态",
              prop: "invoiceCrStatusDescr",
                width:"160"
            },
            {
              label: "业务状态",
              prop: "billStatus",
                type:"select",
                dicData: [],
                props: {
                    label: "dictValue",
                    value: "dictKey"
                },
                width: "160"
            },
            {
              label: "财务状态",
              prop: "accountStatus",
                type:"select",
                dicData: [],
                props: {
                    label: "dictValue",
                    value: "dictKey"
                },
                width: "180",
            },
            {
              label: "状态",
              prop: "status",
                type: 'select',
                dicData: [{
                    label: '正常',
                    value: 0
                }, {
                    label: '停用',
                    value: 1
                }],
            },
            {
              label: "备注",
              prop: "remarks",
            },
          ]
        },
          // 弹窗的配置
        mawbOption:{
              height:'450',
              calcHeight: 30,
              tip: false,
              searchShow: true,
              searchMenuSpan: 24,
              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",
                  },
                  {
                      label: "航次",
                      prop: "voyageNo",
                  },
                  {
                      label: "MB/L NO",
                      prop: "mblno",
                  },
                  {
                      label: "HB/L NO",
                      prop: "hblno",
                  },
                  {
                      label: "开船日期",
                      prop: "etd",
                  },
                  {
                      label: "到港日期",
                      prop: "eta",
                  },
                  {
                      label: "装货港",
                      prop: "polCnName",
                  },
                  {
                      label: "卸货港",
                      prop: "podCnName",
                      width:"120"
                  },
                  {
                      label: "单据编号",
                      prop: "billNo",
                      width:"160"
                  },
                  {
                      label: "客户名",
                      prop: "corpCnName",
                  },
                  {
                      label: "客户英文",
                      prop: "corpEnName",
                  },
                  {
                      label: "件数",
                      prop: "quantity",
                  },
                  {
                      label: "包装单位",
                      prop: "packingUnit",
                  },
                  {
                      label: "毛重",
                      prop: "grossWeight",
                  },
                  {
                      label: "净重",
                      prop: "netWeight",
                  },
                  {
                      label: "体积",
                      prop: "measurement",
                  },
                  {
                      label: "单据日期",
                      prop: "billDate",
                      width:"150"
                  },
              ]
          },
        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() {
          this.option = await this.getColumnData(this.getColumnName(309), this.optionBack);
          this.billStatusWorkDictsfun()
          this.accountStatusWorkDictsfun()
          this.getWorkDictsfun() // 获取签单方式字典数据
      },
      methods: {
        // 展开和收起
          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);
          },
        // 获取业务状态字典数据
        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
           })
        },
        // 添加到主单
        increaseMawb(){
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            const obj = this.selectionList[0]
            for (let item of this.selectionList) {
                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
            console.log(obj)
            this.$nextTick(()=>{
                this.dialogVisible = true
            })
        },
        // 下拉显示数据
        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(){
            console.log(this.dialogRadio,2140)
            if (!this.dialogRadio) {
                this.$message.warning("请选择一条数据");
                return
            }
            this.billsIncreaseReinsurancePolicyfun(this.ids,this.dialogRadio)
        },
        // 添加到主单接口
        billsIncreaseReinsurancePolicyfun(ids,id){
            billsIncreaseReinsurancePolicy(ids,id).then(res=>{
                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
        },
        // 编辑详情打开
        rowCellfun(row,index) {
            this.detailData = {
                seeDisabled: true,
                id: row.id
            };
            this.isShow = false
            this.$nextTick(()=>{
                this.$refs.billsDetails.pageLoading = true
                this.$refs.billsDetails.billsDetailfun(row.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;
        }
        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 + ''
              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;
            })
        },

        //自定义列保存
        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>