tire-platform-ui/src/views/landTransportation/reportAnalysis/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-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="corpShortNameSearch" slot-scope="{ row,index}">
          <crop-select
              v-model="row.corpId"
              :corpType="'KH'"
              :label="'shortName'"
          ></crop-select>
        </template>
        <template slot="corpName" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer"
                @click.stop="celJump(row,index)">{{ row.corpName }}</span>
        </template>
        <template slot="orderNo" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer"
                @click.stop="celJump(row,index)">{{ row.orderNo }}</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="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";

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,
            width: 160,
            prop: 'feeName'
          }, {
            label: '金额',
            cell: true,
            prop: 'amount'
          }, {
            label: '车号',
            width: 90,
            search: true,
            prop: 'plateNo'
          }, {
            label: '备注',
            width: 100,
            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: {},
      optionList: {
        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: 8,
        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: 2,
          width: 126,
          search: true,
        }, {
          label: '车号',
          width: 90,
          prop: 'plateNo',
          overHidden: true,
          index: 10,
          search: true
        }, {
          label: '货运地点',
          index: 4,
          width: 132,
          search: true,
          prop: 'addressDetail'
        }
          // ,{
          //   label: '订单号',
          //   prop: 'orderNo',
          //   overHidden: true,
          //   index: 1,
          //   width: 140,
          //   search: true,
          // }
          , {
            label: '票据号',
            prop: 'receiptNo',
            overHidden: true,
            index: 5,
            width: 100,
            search: true,
          }, {
            label: '提单号',
            width: 128,
            index: 6,
            search: true,
            overHidden: true,
            prop: 'billNo'
          }, {
            label: '场站',
            prop: 'station',
            overHidden: true,
            index: 7,
            width: 70,
            search: true,
          }, {
            label: '箱型箱量',
            width: 80,
            index: 8,
            overHidden: true,
            prop: 'ctnDetail'
          }, {
            label: '备注',
            overHidden: true,
            index: 13,
            width: 100,
            prop: 'remarks'
          }]
      },
      totalData: {}
    }
  },
  async created() {
    this.goodsOptionCrud = await this.getColumnData(this.getColumnName(88.1), this.optionList);
    this.collectionOption = await this.getColumnData(this.getColumnName(88.2), this.collectionOptionBackup);
    this.key++
    if (this.roleName.indexOf('admin') !== -1 || this.roleName.indexOf('总调度') !== -1) {
      let type = false
      for (let item in this.goodsOptionCrud.column) {
        if (this.goodsOptionCrud.column[item].prop == 'profit') {
          type = true
        }
      }
      if (!type) {
        this.goodsOptionCrud.column.push({
          label: '利润',
          width: 80,
          precision: 2,
          index: 16,
          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);
        }
      }
    }
    if (this.roleName.indexOf('总调度') !== -1 || this.roleName.indexOf('分管调度') !== -1 || this.roleName.indexOf('车队') !== -1) {
      this.goodsOptionCrud.menu = false;
      // this.goodsOptionCrud.column.forEach((item,index)=>{
      //   if (item.prop === 'corpShortName'){
      //     this.goodsOptionCrud.column.splice(index, 1)
      //   }
      // })
      if (this.roleName.indexOf('车队') !== -1) {
        for (let item of this.goodsOptionCrud.column) {
          if (item.prop === 'dispatchDeptName') return this.calculateHu()
        }
        this.goodsOptionCrud.column.push(
            {
              label: '物流运输',
              prop: 'dispatchDept',
              search: true,
              dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
              type: "select",
              props: {
                label: "deptName",
                value: "id"
              },
              overHidden: true,
              index: 3,
              width: 80
            }, {
              label: '运输调度',
              prop: 'dispatcherName',
              overHidden: true,
              index: 3,
              width: 70,
            }, {
              label: '车队',
              width: 90,
              search: true,
              index: 9,
              overHidden: true,
              prop: 'fleetShortName'
            }, {
              label: '应付运费',
              overHidden: true,
              index: 14,
              width: 100,
              prop: 'landAmountC'
            }, {
              label: '应付杂费',
              overHidden: true,
              index: 15,
              width: 100,
              prop: 'extraAmountC'
            }, {
              label: '应付杂费明细',
              width: 100,
              index: 18,
              prop: 'extraAmountItemC'
            })
        return this.calculateHu()
      } else {
        for (let item of this.goodsOptionCrud.column) {
          if (item.prop === 'dispatcherName') return this.calculateHu()
        }
        this.goodsOptionCrud.column.push(
            {
              label: '客户名称',
              prop: 'corpShortName',
              overHidden: true,
              index: 1,
              width: 100,
              search: true,
            }, {
              label: '运输调度',
              prop: 'dispatcherName',
              overHidden: true,
              index: 3,
              width: 70,
            }, {
              label: '业务员',
              prop: 'salesmanName',
              search: true,
              index: 2,
              width: 70,
            }, {
              label: '应收运费',
              overHidden: true,
              index: 11,
              width: 100,
              prop: 'landAmountD'
            }, {
              label: '应收杂费',
              overHidden: true,
              index: 12,
              width: 100,
              prop: 'extraAmountD'
            }, {
              label: '应收杂费明细',
              width: 100,
              index: 17,
              prop: 'extraAmountItemD'
            }, {
              label: '车队',
              width: 90,
              search: true,
              index: 9,
              overHidden: true,
              prop: 'fleetShortName'
            }, {
              label: '应付运费',
              overHidden: true,
              index: 14,
              width: 100,
              prop: 'landAmountC'
            }, {
              label: '应付杂费',
              overHidden: true,
              index: 15,
              width: 100,
              prop: 'extraAmountC'
            }, {
              label: '应付杂费明细',
              width: 100,
              index: 18,
              prop: 'extraAmountItemC'
            })
        return this.calculateHu()
      }
    }
    if (this.roleName.indexOf('客户') !== -1) {
      this.goodsOptionCrud.menu = true
      for (let item of this.goodsOptionCrud.column) {
        if (item.prop === 'landAmountD') return this.calculateHu()
      }
      this.goodsOptionCrud.column.push(
          {
            label: '客户名称',
            prop: 'corpShortName',
            overHidden: true,
            index: 1,
            width: 100,
            search: true,
          }, {
            label: '杂费确认',
            prop: 'confirmStatus',
            overHidden: true,
            index: 1,
            width: 140,
            type: "select",
            hide: true,
            dicData: [{
              label: '未确认',
              value: 0
            }, {
              label: '已确认',
              value: 1
            }],
            props: {
              label: "label",
              value: "value"
            },
            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: 3,
            width: 80
          }, {
            label: '应收运费',
            overHidden: true,
            index: 11,
            width: 100,
            prop: 'landAmountD'
          }, {
            label: '业务员',
            prop: 'salesmanName',
            search: true,
            index: 2,
            width: 70,
          }, {
            label: '应收杂费',
            overHidden: true,
            index: 12,
            width: 100,
            prop: 'extraAmountD'
          }, {
            label: '应收杂费明细',
            width: 100,
            index: 17,
            prop: 'extraAmountItemD'
          }, {
            label: '车队',
            width: 90,
            search: true,
            index: 9,
            overHidden: true,
            prop: 'fleetShortName'
          })
      return this.calculateHu()
    }
    if (this.roleName.indexOf('平台') !== -1 || this.roleName.indexOf('admin') !== -1 || this.roleName.indexOf('管理员') !== -1) {
      this.goodsOptionCrud.menu = false
      for (let item of this.goodsOptionCrud.column) {
        if (item.prop === 'landAmountC') return this.calculateHu()
      }
      this.goodsOptionCrud.column.push(
          {
            label: '客户名称',
            prop: 'corpShortName',
            overHidden: true,
            index: 1,
            width: 100,
            search: true,
          }, {
            label: '运输调度',
            prop: 'dispatcherName',
            overHidden: true,
            index: 3,
            width: 70,
          }, {
            label: '应付运费',
            overHidden: true,
            index: 14,
            width: 100,
            prop: 'landAmountC'
          }, {
            label: '物流运输',
            prop: 'dispatchDept',
            search: true,
            dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
            type: "select",
            props: {
              label: "deptName",
              value: "id"
            },
            overHidden: true,
            index: 3,
            width: 80
          }, {
            label: '业务员',
            prop: 'salesmanName',
            search: true,
            index: 2,
            width: 70,
          }, {
            label: '应付杂费',
            overHidden: true,
            index: 15,
            width: 100,
            prop: 'extraAmountC'
          }, {
            label: '应付杂费明细',
            width: 100,
            index: 18,
            prop: 'extraAmountItemC'
          }, {
            label: '应收运费',
            overHidden: true,
            index: 11,
            width: 100,
            prop: 'landAmountD'
          }, {
            label: '应收杂费',
            overHidden: true,
            index: 12,
            width: 100,
            prop: 'extraAmountD'
          }, {
            label: '应收杂费明细',
            width: 100,
            index: 17,
            prop: 'extraAmountItemD'
          }, {
            label: '车队',
            width: 90,
            search: true,
            index: 9,
            overHidden: true,
            prop: 'fleetShortName'
          })
      return this.calculateHu()
    }
    // this.calculateHu()
  },
  methods: {
    calculateHu() {
      let i = 0;
      this.goodsOptionCrud.column.forEach(item => {
        if (item.search) i++
      })
      if (i % 3 !== 0) {
        const num = 3 - Number(i % 3)
        this.goodsOptionCrud.searchMenuSpan = num * 8;
        this.goodsOptionCrud.searchMenuPosition = "right";
      }else {
        this.goodsOptionCrud.searchMenuSpan = 3 * 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: {
            'Blade-Auth':getToken(),
            ...queryParams    //括号内是要传递给新窗口的参数
          }
        })
        window.open(routeData.href.slice(1, routeData.href.length));
      }).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.1), 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.1), this.optionList);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
      if (this.roleName.indexOf('admin') !== -1 || this.roleName.indexOf('总调度') !== -1) {
        let type = false
        for (let item in this.goodsOptionCrud.column) {
          if (this.goodsOptionCrud.column[item].prop == 'profit') {
            type = true
          }
        }
        if (!type) {
          this.goodsOptionCrud.column.push({
            label: '利润',
            width: 80,
            precision: 2,
            index: 16,
            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);
          }
        }
      }
      if (this.roleName.indexOf('总调度') !== -1 || this.roleName.indexOf('分管调度') !== -1 || this.roleName.indexOf('车队') !== -1) {
        this.goodsOptionCrud.menu = false;
        // this.goodsOptionCrud.column.forEach((item,index)=>{
        //   if (item.prop === 'corpShortName'){
        //     this.goodsOptionCrud.column.splice(index, 1)
        //   }
        // })
        if (this.roleName.indexOf('车队') !== -1) {
          for (let item of this.goodsOptionCrud.column) {
            if (item.prop === 'dispatchDeptName') return this.calculateHu()
          }
          this.goodsOptionCrud.column.push(
              {
                label: '物流运输',
                prop: 'dispatchDept',
                search: true,
                dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
                type: "select",
                props: {
                  label: "deptName",
                  value: "id"
                },
                overHidden: true,
                index: 3,
                width: 80
              }, {
                label: '运输调度',
                prop: 'dispatcherName',
                overHidden: true,
                index: 3,
                width: 70,
              }, {
                label: '车队',
                width: 90,
                search: true,
                index: 9,
                overHidden: true,
                prop: 'fleetShortName'
              }, {
                label: '应付运费',
                overHidden: true,
                index: 14,
                width: 100,
                prop: 'landAmountC'
              }, {
                label: '应付杂费',
                overHidden: true,
                index: 15,
                width: 100,
                prop: 'extraAmountC'
              }, {
                label: '应付杂费明细',
                width: 100,
                index: 18,
                prop: 'extraAmountItemC'
              })
          return this.calculateHu()
        } else {
          for (let item of this.goodsOptionCrud.column) {
            if (item.prop === 'dispatcherName') return this.calculateHu()
          }
          this.goodsOptionCrud.column.push(
              {
                label: '客户名称',
                prop: 'corpShortName',
                overHidden: true,
                index: 1,
                width: 100,
                search: true,
              }, {
                label: '运输调度',
                prop: 'dispatcherName',
                overHidden: true,
                index: 3,
                width: 70,
              }, {
                label: '业务员',
                prop: 'salesmanName',
                search: true,
                index: 2,
                width: 70,
              }, {
                label: '应收运费',
                overHidden: true,
                index: 11,
                width: 100,
                prop: 'landAmountD'
              }, {
                label: '应收杂费',
                overHidden: true,
                index: 12,
                width: 100,
                prop: 'extraAmountD'
              }, {
                label: '应收杂费明细',
                width: 100,
                index: 17,
                prop: 'extraAmountItemD'
              }, {
                label: '车队',
                width: 90,
                search: true,
                index: 9,
                overHidden: true,
                prop: 'fleetShortName'
              }, {
                label: '应付运费',
                overHidden: true,
                index: 14,
                width: 100,
                prop: 'landAmountC'
              }, {
                label: '应付杂费',
                overHidden: true,
                index: 15,
                width: 100,
                prop: 'extraAmountC'
              }, {
                label: '应付杂费明细',
                width: 100,
                index: 18,
                prop: 'extraAmountItemC'
              })
          return this.calculateHu()
        }
      }
      if (this.roleName.indexOf('客户') !== -1) {
        this.goodsOptionCrud.menu = true
        for (let item of this.goodsOptionCrud.column) {
          if (item.prop === 'landAmountD') return this.calculateHu()
        }
        this.goodsOptionCrud.column.push(
            {
              label: '客户名称',
              prop: 'corpShortName',
              overHidden: true,
              index: 1,
              width: 100,
              search: true,
            }, {
              label: '杂费确认',
              prop: 'confirmStatus',
              overHidden: true,
              index: 1,
              width: 140,
              type: "select",
              hide: true,
              dicData: [{
                label: '未确认',
                value: 0
              }, {
                label: '已确认',
                value: 1
              }],
              props: {
                label: "label",
                value: "value"
              },
              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: 3,
              width: 80
            }, {
              label: '应收运费',
              overHidden: true,
              index: 11,
              width: 100,
              prop: 'landAmountD'
            }, {
              label: '业务员',
              prop: 'salesmanName',
              search: true,
              index: 2,
              width: 70,
            }, {
              label: '应收杂费',
              overHidden: true,
              index: 12,
              width: 100,
              prop: 'extraAmountD'
            }, {
              label: '应收杂费明细',
              width: 100,
              index: 17,
              prop: 'extraAmountItemD'
            }, {
              label: '车队',
              width: 90,
              search: true,
              index: 9,
              overHidden: true,
              prop: 'fleetShortName'
            })
        return this.calculateHu()
      }
      if (this.roleName.indexOf('平台') !== -1 || this.roleName.indexOf('admin') !== -1 || this.roleName.indexOf('管理员') !== -1) {
        this.goodsOptionCrud.menu = false
        for (let item of this.goodsOptionCrud.column) {
          if (item.prop === 'landAmountC') return this.calculateHu()
        }
        this.goodsOptionCrud.column.push(
            {
              label: '客户名称',
              prop: 'corpShortName',
              overHidden: true,
              index: 1,
              width: 100,
              search: true,
            }, {
              label: '运输调度',
              prop: 'dispatcherName',
              overHidden: true,
              index: 3,
              width: 70,
            }, {
              label: '应付运费',
              overHidden: true,
              index: 14,
              width: 100,
              prop: 'landAmountC'
            }, {
              label: '物流运输',
              prop: 'dispatchDept',
              search: true,
              dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
              type: "select",
              props: {
                label: "deptName",
                value: "id"
              },
              overHidden: true,
              index: 3,
              width: 80
            }, {
              label: '业务员',
              prop: 'salesmanName',
              search: true,
              index: 2,
              width: 70,
            }, {
              label: '应付杂费',
              overHidden: true,
              index: 15,
              width: 100,
              prop: 'extraAmountC'
            }, {
              label: '应付杂费明细',
              width: 100,
              index: 18,
              prop: 'extraAmountItemC'
            }, {
              label: '应收运费',
              overHidden: true,
              index: 11,
              width: 100,
              prop: 'landAmountD'
            }, {
              label: '应收杂费',
              overHidden: true,
              index: 12,
              width: 100,
              prop: 'extraAmountD'
            }, {
              label: '应收杂费明细',
              width: 100,
              index: 17,
              prop: 'extraAmountItemD'
            }, {
              label: '车队',
              width: 90,
              search: true,
              index: 9,
              overHidden: true,
              prop: 'fleetShortName'
            })
        return this.calculateHu()
      }

    },
    //行跳转
    celJump(row, index) {
      if (this.roleName.indexOf('平台') !== -1 || this.roleName.indexOf('admin') !== -1) {
        this.$router.push({
          path: '/landTransportation/dispatchingCars/index',
          query: {orderId: row.orderId},
        });
      } else {
        this.$router.push({
          path: '/landTransportation/placeAnOrder/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)
    },
    //查询
    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
      }
      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>