tire-platform-ui/src/views/landTransportation/bulkReportAnalysis/index.vue

<template>
  <div>
    <basic-container v-if="key>0">
      <avue-crud
          :data="goodsList"
          :option="goodsOptionCrud"
          :table-loading="loading"
          :page.sync="page"
          ref="crud"
          @on-load="onLoad"
          @resetColumn="resetColumn"
          @saveColumn="saveColumn"
          @search-change="searchChange"
          @search-reset="query = {}"
          :search.sync="query"
          @search-criteria-switch="searchCriteriaSwitch"
          @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"
          @row-update="rowSave">
        <template slot="plateNo" slot-scope="{row}">
                <span class="el-button--text" style="cursor: pointer"
                      @click="openTrack(row)">{{ row.plateNo }}</span>
        </template>
        <template slot="menuLeft">
          <el-button type="info" size="small" @click="outExport" icon="el-icon-download">导出</el-button>
        </template>
        <template slot="corpShortNameSearch" slot-scope="{ row,index}">
          <crop-select
              v-model="row.corpId"
              :corpType="'KH'"
              :label="'shortName'"
          ></crop-select>
        </template>
        <template slot-scope="{row}" slot="fleetId">
          <span>{{ row.fleetName }}</span>
        </template>
        <template slot="billNo" slot-scope="{row,index}">
          <span v-if="roleName.indexOf('车队') !== -1" style="cursor: pointer">{{ row.billNo }}</span>
          <span class="el-button--text" v-else style="cursor: pointer" @click.stop="celJump(row,index)">{{row.billNo}}</span>
        </template>
        <template slot="corpShortName" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer"
                @click.stop="celJump(row,index)">{{ row.corpShortName }}</span>
        </template>
        <template slot="dispatchNumber" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer"
                @click.stop="celJump(row,index)">{{ row.dispatchNumber }}</span>
        </template>
        <template slot-scope="{row}" slot="fleetIdSearch">
          <crop-select
              v-model="row.fleetId"
              corpType="CD"
          ></crop-select>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <span v-if="row.extraAmountD>0">
            <el-button
                size="small"
                type="text"
            >{{ row.confirmStatus !== 0 ? '已确认' : '' }}
            </el-button>
            <el-button
                size="small"
                type="text"
                @click="incidentalConfirm(row)"
            >{{ row.confirmStatus == 0 ? '杂费确认' : '杂费取消' }}
            </el-button>
          </span>
        </template>
        <template slot="addressDetail" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.addressDetail)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.addressDetail }}</div>
          </el-tooltip>
        </template>
        <template slot="unloadingPlace" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.unloadingPlace)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.unloadingPlace }}</div>
          </el-tooltip>
        </template>
        <template slot="extraAmountItemC" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.extraAmountItemC)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.extraAmountItemC }}</div>
          </el-tooltip>
        </template>
        <template slot="extraAmountItemD" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.extraAmountItemD)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.extraAmountItemD }}</div>
          </el-tooltip>
        </template>
      </avue-crud>
      <el-dialog
          title="杂费明细"
          :visible.sync="incidentalType"
          append-to-body
          width="50%">
        <avue-crud
            :data="collectionList"
            :option="collectionOption"
            ref="collection"
            @resetColumn="resetColumnCollection"
            @saveColumn="saveColumnCollection"
            @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"
            @row-update="rowSave">
          <template slot-scope="{row,index}" slot="menu">
            <!--          <el-button-->
            <!--              type="text"-->
            <!--              size="small"-->
            <!--              :disabled="goodsForm.status === 1"-->
            <!--              :icon="row.$cellEdit?'el-icon-circle-plus-outline':'el-icon-edit'"-->
            <!--              @click="rowCell(row,index)"-->
            <!--          >{{ row.$cellEdit ? '保存' : '编辑' }}-->
            <!--          </el-button>-->
            <!--          <el-button type="text"-->
            <!--                     icon="el-icon-delete"-->
            <!--                     size="small"-->
            <!--                     :disabled="goodsForm.status === 1"-->
            <!--                     @click="$refs.collection.rowDel(row,index)"-->
            <!--          >删除-->
            <!--          </el-button>-->
            <el-button
                size="small"
                type="text"
                icon="el-icon-s-order"
                @click="annexOpen(row, index)"
            >附 件
            </el-button>
          </template>
          <template slot="menuLeft">
            <!--          <el-button-->
            <!--              type="primary"-->
            <!--              icon="el-icon-plus"-->
            <!--              :disabled="goodsForm.status !== 0"-->
            <!--              @click="addRowCollection"-->
            <!--              size="small">录入明细</el-button>-->
          </template>
        </avue-crud>
        <span slot="footer" class="dialog-footer">
          <el-button @click="incidentalType = false" size="small">取 消</el-button>
          <el-button type="primary" size="small" v-if="collectionList.length>0"
                     @click="incidentalClick">{{ confirmStatus == 0 ? '杂费确认' : '杂费取消' }}</el-button>
        </span>
      </el-dialog>
      <el-dialog
          title="附件"
          :visible.sync="enclosure"
          append-to-body
          width="70%">
        <c-upload
            typeUpload="GZ"
            :basic="true"
            disabled
            deleteUrl="/api/blade-client/common-file/remove"
            :data="orderList"
            :enumerationValue="76"
        ></c-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="enclosure = false" size="small">取 消</el-button>
        </span>
      </el-dialog>
      <track-playback :dialogVisible="dialogVisibleTwo" v-loading="loadingDialog" :parkingPoint="parkingPoint"
                      :lineArr="lineArr"
                      ref="playback"></track-playback>
    </basic-container>
  </div>
</template>

<script>
import {
  acceptanceCollection,
  acceptanceDispatchCollection,
  confirmCompletion,
  fleetList,
  motorcadeDriver,
  fleetDriverSave,
  getAttachment,
  saveAttached,
  incidental,
  getFee,
  incidentalConfirm,
  cancelConfirm, standingBookCollection
} from "@/api/landTransportation";
import {getToken} from "@/util/auth";
import {gaude} from "@/api/gaude";
import {getSalesman} from "@/api/landTransportation/bulkCargo";

export default {
  name: "index",
  data() {
    return {
      key: 0,
      form: {},
      enclosure: false,
      dialogVisibleTwo: false,
      loadingDialog: false,
      lineArr: [],
      parkingPoint: [],
      orderList: [],
      collectionOptionBackup: {
        align: 'center',
        menuAlign: 'center',
        refreshBtn: false,
        index: true,
        // menu:false,
        cancelBtn: false,
        editBtn: false,
        delBtn: false,
        cellBtn: false,
        addBtn: false,
        addRowBtn: false,
        showSummary: true,
        addBtnText: '录入明细',
        summaryText: "合计",
        sumColumnList: [{
          name: 'price',
          type: 'sum',
          decimals: 2
        }, {
          name: 'amount',
          type: 'sum',
          decimals: 2
        }, {
          name: 'quantity',
          type: 'sum',
          decimals: 0
        }],
        column: [
          {
            label: '费用名称',
            slot: true,
            prop: 'feeName'
          }, {
            label: '金额',
            cell: true,
            prop: 'amount'
          }, {
            label: '车号',
            prop: 'plateNo'
          }, {
            label: '备注',
            prop: 'remarks'
          }
        ]
      },
      collectionOption: {},
      collectionList: [],
      dialogVisible: false,
      loading: false,
      incidentalType: false,
      confirmStatus: 0,
      activeName: '',
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300]
      },
      roleName: localStorage.getItem("roleName").split(','),
      goodsList: [],
      goodsOptionCrud: {},
      totalData: {},
      optionList: {},
      //客户
      optionListOne: {
        stripe: true,
        index: true,
        addBtn: false,
        delBtn: false,
        cellBtn: false,
        cancelBtn: false,
        editBtn: false,
        addRowBtn: false,
        refreshBtn: false,
        searchIcon: true,
        searchIndex: 2,
        searchSpan: 8,
        menuWidth: 140,
        menu: true,
        searchMenuPosition: "right",
        searchMenuSpan: 6,
        align: 'center',
        height: "auto",
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [
          {
            name: 'landWeight',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'ctnQuantity',
            type: 'count'
          }, {
            name: 'oneFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'oneFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'profit',
            type: 'sum',
            decimals: 2
          }, {
            name: 'extraAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'extraAmountD',
            type: 'sum',
            decimals: 2
          }],
        column: [{
          label: '客户名称',
          prop: 'corpShortName',
          overHidden: true,
          index: 1,
          width: 100,
          search: true,
        }, {
          label: '货运日期',
          prop: 'arrivalTime',
          overHidden: true,
          type: "date",
          searchRange: true,
          defaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd HH:mm",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          index: 2,
          width: 126,
          search: true,
        }, {
          label: '业务员',
          prop: 'salesmanName',
          index: 3,
          width: 70,
          searchProp: 'salesman',
          search: true,
          overHidden: true,
          filterable: true,
          type: "select",
          dicUrl: "/api/blade-user/userList?roleAlias=业务员",
          props: {
            label: "realName",
            value: "id"
          }
        }, {
          label: '物流运输',
          prop: 'dispatchDept',
          search: true,
          dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
          type: "select",
          props: {
            label: "deptName",
            value: "id"
          },
          overHidden: true,
          index: 4,
          width: 80
        }, {
          label: '运输调度',
          prop: 'dispatcherName',
          overHidden: true,
          index: 5,
          width: 70,
        }, {
          label: '派车单号',
          width: 80,
          index: 5,
          overHidden: true,
          search: true,
          prop: 'dispatchNumber'
        }, {
          label: '合同号',
          width: 90,
          index: 6,
          overHidden: true,
          search: true,
          prop: 'contractNo'
        }, {
          label: '装货地点',
          prop: 'addressDetail',
          index: 7,
          width: 132,
        }, {
          label: '卸货地点',
          prop: 'unloadingPlace',
          index: 8,
          width: 132,
        }, {
          label: '车型',
          width: 90,
          index: 9,
          prop: 'fleetVolum'
        }, {
          label: '车队',
          prop: 'fleetShortName',
          index: 10,
          width: 90,
          searchProp: 'fleetId',
          type: 'select',
          cascader: ['plateNo'],
          props: {
            label: "cname",
            value: "id"
          },
          filterable: true,
          search: true,
          overHidden: true,
        }, {
          label: '车号',
          prop: 'plateNo',
          index: 11,
          width: 90,
          overHidden: true,
        }, {
          label: '应收运费',
          overHidden: true,
          index: 12,
          width: 100,
          prop: 'landAmountD'
        }, {
          label: '应收杂费',
          prop: 'extraAmountD',
          index: 13,
          width: 100,
          overHidden: true,
        }, {
          label: '备注',
          prop: 'remarks',
          index: 14,
          width: 100,
          overHidden: true,
        }, {
          label: '应付杂费明细',
          width: 100,
          index: 15,
          overHidden: true,
          prop: 'extraAmountItemC'
        }]
      },
      //平台
      optionListTwo: {
        stripe: true,
        index: true,
        addBtn: false,
        delBtn: false,
        cellBtn: false,
        cancelBtn: false,
        editBtn: false,
        addRowBtn: false,
        refreshBtn: false,
        searchIcon: true,
        searchIndex: 2,
        searchSpan: 8,
        menuWidth: 140,
        menu: true,
        searchMenuPosition: "right",
        searchMenuSpan: 6,
        align: 'center',
        height: "auto",
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [
          {
            name: 'landWeight',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'ctnQuantity',
            type: 'count'
          }, {
            name: 'oneFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'oneFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'profit',
            type: 'sum',
            decimals: 2
          }, {
            name: 'extraAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'extraAmountD',
            type: 'sum',
            decimals: 2
          }],
        column: [{
          label: '客户名称',
          prop: 'corpShortName',
          overHidden: true,
          index: 1,
          width: 100,
          search: true,
        }, {
          label: '货运日期',
          prop: 'arrivalTime',
          overHidden: true,
          type: "date",
          searchRange: true,
          defaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd HH:mm",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          index: 2,
          width: 126,
          search: true,
        }, {
          label: '业务员',
          prop: 'salesmanName',
          index: 3,
          width: 70,
          searchProp: 'salesman',
          search: true,
          overHidden: true,
          filterable: true,
          type: "select",
          dicUrl: "/api/blade-user/userList?roleAlias=业务员",
          props: {
            label: "realName",
            value: "id"
          }
        }, {
          label: '运输调度',
          prop: 'dispatcherName',
          overHidden: true,
          index: 4,
          width: 70,
        }, {
          label: '派车单号',
          width: 80,
          index: 5,
          overHidden: true,
          search: true,
          prop: 'dispatchNumber'
        }, {
          label: '合同号',
          width: 90,
          index: 6,
          overHidden: true,
          search: true,
          prop: 'contractNo'
        }, {
          label: '装货地点',
          prop: 'addressDetail',
          index: 7,
          width: 132,
        }, {
          label: '卸货地点',
          prop: 'unloadingPlace',
          index: 8,
          width: 132,
        }, {
          label: '车型',
          width: 90,
          index: 9,
          prop: 'fleetVolum'
        }, {
          label: '车队',
          prop: 'fleetShortName',
          index: 10,
          width: 90,
          searchProp: 'fleetId',
          type: 'select',
          cascader: ['plateNo'],
          props: {
            label: "cname",
            value: "id"
          },
          filterable: true,
          search: true,
          overHidden: true,
        }, {
          label: '车号',
          prop: 'plateNo',
          index: 11,
          width: 90,
          overHidden: true,
        }, {
          label: '应收运费',
          overHidden: true,
          index: 12,
          width: 100,
          prop: 'landAmountD'
        }, {
          label: '应收杂费',
          prop: 'extraAmountD',
          index: 13,
          width: 100,
          overHidden: true,
        }, {
          label: '备注',
          prop: 'remarks',
          index: 14,
          width: 100,
          overHidden: true,
        }, {
          label: '应付运费',
          prop: 'landAmountC',
          index: 15,
          width: 100,
          overHidden: true,
        }, {
          label: '应付杂费',
          prop: 'extraAmountC',
          index: 16,
          width: 100,
          overHidden: true
        }, {
          label: '应收杂费明细',
          width: 100,
          index: 18,
          prop: 'extraAmountItemD'
        }, {
          label: '应付杂费明细',
          width: 100,
          index: 19,
          overHidden: true,
          prop: 'extraAmountItemC'
        }]
      },
      //车队
      optionListThree: {
        stripe: true,
        index: true,
        addBtn: false,
        delBtn: false,
        cellBtn: false,
        cancelBtn: false,
        editBtn: false,
        addRowBtn: false,
        refreshBtn: false,
        searchIcon: true,
        searchIndex: 2,
        searchSpan: 8,
        menuWidth: 140,
        menu: true,
        searchMenuPosition: "right",
        searchMenuSpan: 6,
        align: 'center',
        height: "auto",
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [
          {
            name: 'landWeight',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'ctnQuantity',
            type: 'count'
          }, {
            name: 'oneFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'oneFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'profit',
            type: 'sum',
            decimals: 2
          }, {
            name: 'extraAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'extraAmountD',
            type: 'sum',
            decimals: 2
          }],
        column: [{
          label: '货运日期',
          prop: 'arrivalTime',
          overHidden: true,
          type: "date",
          searchRange: true,
          defaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd HH:mm",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          index: 1,
          width: 126,
          search: true,
        }, {
          label: '物流运输',
          prop: 'dispatchDept',
          search: true,
          dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
          type: "select",
          props: {
            label: "deptName",
            value: "id"
          },
          overHidden: true,
          index: 2,
          width: 80
        }, {
          label: '运输调度',
          prop: 'dispatcherName',
          overHidden: true,
          index: 3,
          width: 70,
        }, {
          label: '派车单号',
          width: 80,
          index: 4,
          overHidden: true,
          search: true,
          prop: 'dispatchNumber'
        }, {
          label: '合同号',
          width: 90,
          index: 5,
          overHidden: true,
          search: true,
          prop: 'contractNo'
        }, {
          label: '装货地点',
          prop: 'addressDetail',
          index: 6,
          width: 132,
        }, {
          label: '卸货地点',
          prop: 'unloadingPlace',
          index: 7,
          width: 132,
        }, {
          label: '车型',
          width: 90,
          index: 8,
          prop: 'fleetVolum'
        }, {
          label: '车队',
          prop: 'fleetShortName',
          index: 9,
          width: 90,
          searchProp: 'fleetId',
          type: 'select',
          cascader: ['plateNo'],
          props: {
            label: "cname",
            value: "id"
          },
          filterable: true,
          search: true,
          overHidden: true,
        }, {
          label: '车号',
          prop: 'plateNo',
          index: 10,
          width: 90,
          overHidden: true,
        }, {
          label: '应付运费',
          prop: 'landAmountC',
          index: 11,
          width: 100,
          overHidden: true,
        }, {
          label: '应付杂费',
          prop: 'extraAmountC',
          index: 12,
          width: 100,
          overHidden: true
        }, {
          label: '备注',
          prop: 'remarks',
          index: 13,
          width: 100,
          overHidden: true,
        }, {
          label: '应付杂费明细',
          width: 100,
          index: 14,
          overHidden: true,
          prop: 'extraAmountItemC'
        }]
      }
    }
  },
  async created() {
    if (this.roleName.indexOf('客户') !== -1) {
      this.optionList = this.optionListOne
    } else if (this.roleName.indexOf('平台') !== -1||this.roleName.indexOf('admin') !== -1) {
      this.optionList = this.optionListTwo
    } else if (this.roleName.indexOf('车队') !== -1) {
      this.optionList = this.optionListThree
    } else {
      this.optionList = this.optionListOne
    }
    if (this.roleName.indexOf('admin') !== -1 || this.roleName.indexOf('总调度') !== -1){
      let type = false
      for (let item in this.optionList.column){
        if (this.optionList.column[item].prop == 'profit'){
          type = true
        }
      }
      if (!type){
        this.optionList.column.push({
          label: '利润',
          width: 80,
          precision: 2,
          index: 17,
          type: 'number',
          prop: 'profit'
        })
      }
    }else {
      for (let item in this.optionList.column){
        if (this.optionList.column[item].prop == 'profit'){
          this.optionList.column.splice(item, 1);
        }
      }
    }
    this.goodsOptionCrud = await this.getColumnData(this.getColumnName(88.3), this.optionList);
    if (this.roleName.indexOf('admin') !== -1 || this.roleName.indexOf('总调度') !== -1){
      this.goodsOptionCrud.column.push({
        label: '利润',
        width: 80,
        precision: 2,
        index: 17,
        type: 'number',
        prop: 'profit'
      })
    }else {
      for (let item in this.goodsOptionCrud.column){
        if (this.goodsOptionCrud.column[item].prop == 'profit'){
          this.goodsOptionCrud.column.splice(item, 1);
        }
      }
    }
    this.collectionOption = await this.getColumnData(this.getColumnName(88.2), this.collectionOptionBackup);
    getSalesman().then(res=>{
      this.findObject(this.goodsOptionCrud.column, "salesmanName").dicData = res.data.data
    })

    fleetList().then(res=>{
      this.findObject(this.option.column, "fleetShortName").dicData = res.data.data
    })
    this.key++
    this.calculateHu()
  },
  methods: {
    calculateHu() {
      let i = 0;
      this.goodsOptionCrud.column.forEach(item => {
        if (item.search === true) i++
      })
      if (i % 3 !== 0) {
        const num = 3 - Number(i % 3)
        this.goodsOptionCrud.searchMenuSpan = num * 8;
        this.goodsOptionCrud.searchMenuPosition = "right";
      }
    },
    openTrack(row) {
      gaude({itemId: row.id, plateNo: row.plateNo, tenantId: '234557', color: '2'}).then(res => {
        this.lineArr = res.data.data.trackArray
        this.parkingPoint = res.data.data.parkArray
        this.dialogVisibleTwo = true
        this.loadingDialog = true
        let this_ = this
        setTimeout(function () {
          this_.$refs.playback.initMap();
          this_.loadingDialog = false
        }, 1500)
      })
    },
    //导出
    outExport() {
      this.$confirm('是否导出数据明细？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let queryParams = this.query
        if (queryParams.arrivalTime) {
          queryParams.beginArrivalTime = queryParams.arrivalTime[0]
          queryParams.endArrivalTime = queryParams.arrivalTime[1]
          delete queryParams.arrivalTime
        }
        const routeData = this.$router.resolve({
          path: '/api/blade-land/order/acct-export',      //跳转目标窗口的地址
          query: {
            ...queryParams    //括号内是要传递给新窗口的参数
          }
        })
        window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' //
        });
      })
    },
    //自定义列保存
    async saveColumnCollection() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(88.2), this.collectionOption);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.collection.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnCollection() {
      this.collectionOption = this.collectionOptionBackup;
      const inSave = await this.delColumnData(this.getColumnName(88.2), this.collectionOptionBackup);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.collection.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列保存
    async saveColumn() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(88.3), this.goodsOptionCrud);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn() {
      this.goodsOptionCrud = this.optionList;
      const inSave = await this.delColumnData(this.getColumnName(88.3), this.optionList);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //行跳转
    celJump(row, index) {
      this.$router.push({
        path: '/landTransportation/bulkCargo/index',
        query: {id: '台账' + row.orderId},
      });
    },
    // 获得高度
    searchCriteriaSwitch(type) {
      if (type) {
        this.goodsOptionCrud.height = this.goodsOptionCrud.height - 90
      } else {
        this.goodsOptionCrud.height = this.goodsOptionCrud.height + 90
      }
      this.$refs.crud.getTableHeight()
    },
    //箱信息保存
    rowSave(row, index, done, loading) {
      done()
    },
    //箱信息选择车队
    getfleetIdT(data, row) {
      this.$set(row, 'fleetName', data.cname)
    },
    //搜索
    searchChange(params, done) {
      this.query = params;
      this.onLoad(this.page, params)
      done();
    },
    //切换订单状态
    handleClick(tab) {
      this.activeName = tab
      this.onLoad(this.page)
    },
    //删除对象空值
    removeProperty(obj) {
      Object.keys(obj).forEach(item => {
        if (obj[item] === '' || obj[item] === undefined || obj[item] === null || obj[item] === 'null') delete obj[item]
      })
      return obj
    },
    //查询
    onLoad(page, params) {
      motorcadeDriver(4).then(res => {
        this.totalData = res.data.data
      })
      let queryParams = {
        size: page.pageSize,
        current: page.currentPage,
        tag: '0',
        shippingMode: '散货',
        ...params ? params : this.query
      }
      if (queryParams.arrivalTime) {
        queryParams.beginArrivalTime = queryParams.arrivalTime[0]
        queryParams.endArrivalTime = queryParams.arrivalTime[1]
        delete queryParams.arrivalTime
      }
      queryParams = this.removeProperty(queryParams)
      this.loading = true;
      if (this.loading) this.dialogVisibleTwo = false
      standingBookCollection(queryParams).then(res => {
        this.goodsList = res.data.data.records
        this.page.total = res.data.data.total
        this.goodsOptionCrud.height = window.innerHeight - 245;
      }).finally(() => {
        this.loading = false;
      })
    },
    //箱信息保存
    rowSaveT(row, index, done, loading) {
      if (row.$cellEdit) {
        fleetDriverSave(row).then(res => {
          this.$message.success("保存成功");
        })
      }
      this.$refs.crud.rowCell(row, index)
    },
    //箱信息派车
    designate(row) {
      this.$confirm('是否确定受理', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        acceptanceCollection(row).then(res => {
          this.$message.success('操作成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //取消派车
    cancelDesignate(row) {
      this.$confirm('是否确定取消受理', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        acceptanceDispatchCollection({id: row.id}).then(res => {
          this.$message.success('操作成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    confirmCompletion(row) {
      this.$confirm('是否确定完工', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmCompletion({id: row.id}).then(res => {
          this.$message.success('操作成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //打开附件
    annexOpen(row, index) {
      this.enclosure = true
      this.formAnnex = row
      getFee({id: row.id}).then(res => {
        this.orderList = res.data.data
      })
    },
    //保存
    saveAnnex() {
      saveAttached({
        id: this.form.id,
        fileList: this.orderList
      }).then(res => {
        this.annexOpen(this.form)
      })
    },
    ToBreak(val) {
      if (val) return val.replace(/\n/g, '<br/>')
    },
    incidentalConfirm(row) {
      incidental({
        itemId: row.itemId,
        plateNo: row.plateNo,
        type: '1'
      }).then(res => {
        this.collectionList = res.data.data
        this.incidentalType = true
        this.confirmStatus = row.confirmStatus
      })
    },
    incidentalClick() {
      if (this.confirmStatus == 0) {
        incidentalConfirm({itemId: this.collectionList[0].itemId}).then(res => {
          this.$message.success("确认成功");
          this.onLoad(this.page)
        })
      } else {
        cancelConfirm({itemId: this.collectionList[0].itemId}).then(res => {
          this.$message.success("取消成功");
          this.onLoad(this.page)
        })
      }
      this.incidentalType = false
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 5px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }

  &__card {
    width: 100%;
    height: 100%;
  }

  .title {
    display: flex;
    justify-content: space-between;

    .right {
      display: flex;
      align-items: center;

      &_but {
        margin-right: 10px;
        border: 1px solid #409eff;
        width: 80px;
        border-radius: 3px;
        display: flex;

        &_left {
          width: 40px;
          text-align: center;
          color: #409eff;
          cursor: pointer;
        }

        &_right {
          width: 40px;
          text-align: center;
          color: #409eff;
          cursor: pointer;
        }

        &_active {
          color: #fff;
          background-color: #409eff;
        }
      }
    }
  }
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6vh;
  width: 80vw;

  .divider {
    display: block;
    height: 0px;
    width: 100%;
    border-top: 1px dashed #dcdfe6;
  }

  &-item {
    margin-left: 1vw;

    .card {
      width: 130px;
      display: flex;
      align-items: center;

      &-title {
        width: 40px;
        height: 40px;
        text-align: center;
        border-radius: 50%;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          line-height: 20px;
        }
      }

      &-title1 {
        color: #037fe1;
        background-color: rgba(3, 127, 225, 0.15);
      }

      &-title2 {
        color: #ffa21e;
        background-color: rgba(255, 162, 30, 0.15);
      }

      &-title3 {
        color: #fb5b60;
        background-color: rgba(251, 91, 96, 0.15);
      }

      &-title4 {
        color: #42bc6f;
        background-color: rgba(66, 188, 111, 0.15);
      }

      &-title5 {
        color: #14cde1;
        background-color: rgba(52, 149, 161, 0.15);
      }

      &-title6 {
        color: rgba(4, 66, 31, 0.63);
        background-color: rgba(66, 188, 111, 0.15);
      }

      &-content {
        padding-left: 1vw;
        display: flex;
        flex-direction: column;

        &-num {
          font-size: 20px;
          font-weight: 600;
        }

        &-text {
          color: #909399;
        }
      }
    }
  }
}
</style>