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

<template>
  <div>
    <basic-container v-show="show">
      <div class="home-container">
        <div style="display: flex;justify-content: center;">
          <div class="content">
            <div class="content-item" @click="handleClick('')">
              <div class="card">
                <div class="card-title card-title1">
                <span>
                  全
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num">{{ totalData.all }}</span>
                  <span class="card-content-text">全部</span>
                </div>
              </div>
            </div>
            <div class="divider"/>
            <div class="content-item" @click="handleClick('0')">
              <div class="card">
                <div class="card-title card-title2">
                <span>
                  未
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num">{{ totalData.zero }}</span>
                  <span class="card-content-text">未调度</span>
                </div>
              </div>
            </div>
            <div class="divider"/>
            <div class="content-item" @click="handleClick('1')">
              <div class="card">
                <div class="card-title card-title3">
                <span>
                  派
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num">{{ totalData.one }}</span>
                  <span class="card-content-text">未派车</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </basic-container>
    <basic-container v-show="show">
      <avue-crud
          :key="key"
          :table-loading="loading"
          :data="dataList"
          :page.sync="page"
          ref="crud"
          :option="option"
          @on-load="onLoad"
          @row-del="rowDel"
          @search-reset="query={};activeName = ''"
          @resetColumn="resetColumn"
          @saveColumn="saveColumn"
          @search-criteria-switch="searchCriteriaSwitch"
          @search-change="searchChange">
        <!--        <template slot="menuLeft" slot-scope="{size}">-->
        <!--          <el-button type="primary" :size="size" @click="rowSave">新增</el-button>-->
        <!--        </template>-->
        <template slot="corpNameSearch" slot-scope="{ row,index}">
          <crop-select
              v-model="row.corpId"
          ></crop-select>
        </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="billNo" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row,index)">{{row.billNo}}</span>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button type="text"
                     icon="el-icon-edit"
                     size="small"
                     @click.stop="rowCell(row,index)">编辑
          </el-button>
          <!--          <el-button type="text"-->
          <!--                     icon="el-icon-delete"-->
          <!--                     size="small"-->
          <!--                     @click.stop="$refs.crud.rowDel(row,index)">删除</el-button>-->
        </template>
        <template slot="corpName" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row,index)">{{ row.corpName }}</span>
        </template>
        <template slot="orderNo" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row,index)">{{ row.orderNo }}</span>
        </template>
      </avue-crud>
    </basic-container>
    <detail-page v-if="!show" @backToList="backToList" :id="id" :home="home"></detail-page>
  </div>
</template>

<script>
import detailPage from './detailPage'
import {removeDelegationList, selectInvoiceList, totalList} from "@/api/landTransportation";

export default {
  name: "index",
  components: {
    detailPage
  },
  data() {
    return {
      id: '',
      show: true,
      loading: false,
      query:{},
      key:0,
      dataList: [],
      totalData: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300]
      },
      option: {},
      activeName: '0',
      optionList: {
        stripe: true,
        align: 'center',
        menuWidth: 100,
        menu: false,
        index: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        height: "auto",
        searchSpan: 8,
        searchIcon: true,
        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: 150,
            search: true,
          }, {
            label: '业务员',
            index: 2,
            width: 150,
            prop: 'salesman',
            search: true,
            overHidden: true,
            type: "select",
            dicUrl: "/api/blade-user/userList",
            props: {
              label: "realName",
              value: "id"
            }
          }, {
            label: '货运地点',
            prop: 'addressDetail',
            index: 3,
            width: 140,
            search: true,
          }, {
            label: '提单号',
            prop: 'billNo',
            index: 4,
            overHidden: true,
            width: 140,
            search: true,
          }, {
            label: '场站',
            prop: 'station',
            overHidden: true,
            index: 5,
            width: 140,
            search: true,
          },{
            label: '计划箱量',
            prop: 'ctnDetail',
            overHidden: true,
            index: 6,
            width: 140
          },{
            label: '已派箱量',
            prop: 'dispatchCtnDetail',
            overHidden: true,
            index: 7,
            width: 140
          },{
            label: '受理箱量',
            prop: 'sendCtnDetail',
            overHidden: true,
            index: 8,
            width: 140
          },{
            label: '运费',
            index: 9,
            width: 140,
            prop: 'freight'
          },{
            label: '订单号',
            prop: 'orderNo',
            index: 10,
            overHidden: true,
            width: 160,
            search: true,
          }, {
            label: '状态',
            prop: 'itemStatusDetail',
            index: 11,
            overHidden: true,
            width: 140
          }, {
            label: '公司名称',
            prop: 'corpShortName',
            overHidden: true,
            index: 12,
            width: 140,
            search: true,
          }
          // , {
          //   label: '所属公司',
          //   prop: 'belongCompany',
          //   overHidden: true,
          //   index: 4,
          //   width: 140,
          //   search: true,
          // }
          // , {
          //   label: '货物名称',
          //   prop: 'goods',
          //   overHidden: true,
          //   index: 13,
          //   width: 140,
          //   search: true,
          // }
          ,{
            label: '船名航次',
            prop: 'factory',
            overHidden: true,
            index: 14,
            width: 140,
            search: true,
          }, {
            label: '制单日期',
            overHidden: true,
            prop: 'createTime',
            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: 15,
            width: 140,
            search: true,
          }]
      },
      home:false,
      dispatchTimer:null
    }
  },
  activated() {
    if (this.$route.query.orderId){
      this.rowCell({id:this.$route.query.orderId},0)
      this.$router.$avueRouter.closeTag(window.location.hash.slice(1))
      this.home = true
    }
    // if (this.$route.query.params){
    //   this.rowCell({id:this.$route.query.params},0)
    // }
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(86), this.optionList);
    this.key++
    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
  },
  mounted() {
    let this_ = this;
    this_.dispatchTimer = setInterval(function(){
      totalList(2).then(res=>{
        this_.totalData = res.data.data
      })
    },5000)
  },
  beforeDestroy() {
    clearInterval(this.dispatchTimer); //关闭
  },
  methods: {
    //自定义列保存
    async saveColumn() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(86), this.option);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn() {
      this.option = this.optionList;
      const inSave = await this.delColumnData(this.getColumnName(86), this.optionList);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    // 获得高度
    searchCriteriaSwitch(type) {
      if (type) {
        this.option.height = this.option.height - 138
      } else {
        this.option.height = this.option.height + 138
      }
      this.$refs.crud.getTableHeight()
    },
    onLoad(page, params={}) {
      totalList(2).then(res => {
        this.totalData = res.data.data
      })
      let queryParams = {
        size: page.pageSize,
        current: page.currentPage,
        itemStatus: this.activeName,
        status: this.activeName,
        kind: '2',
        ...params,
        ...Object.assign(params, this.query)
      }
      this.loading = true;
      selectInvoiceList(queryParams).then(res => {
        this.dataList = res.data.data.records
        this.page.total = res.data.data.total
        this.option.height = window.innerHeight - 350;
      }).finally(() => {
        this.loading = false;
      })
    },
    //搜索
    searchChange(params, done) {
      let data = params
      if (params.arrivalTime) {
        data.beginArrivalTime = params.arrivalTime[0]
        data.endArrivalTime = params.arrivalTime[1]
      }
      if (params.createTime) {
        data.beginCrateTime = params.createTime[0]
        data.endCrateTime = params.createTime[1]
      }
      delete data.arrivalTime
      delete data.createTime
      this.query = data;
      this.onLoad(this.page, data)
      done();
    },
    //列表删除
    rowDel(row) {
      this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeDelegationList({ids: row.id}).then(res => {
          this.$message.success('删除成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //行编辑
    rowCell(row, index) {
      this.id = row.id
      this.show = false
    },
    rowSave() {
      this.show = false
    },
    backToList(type) {
      if (type){
        this.$router.push({
          path: '/landTransportation/dispatchingCars/index'
        });
      }
      this.show = true
      this.onLoad(this.page)
    },
    //切换订单状态
    handleClick(tab) {
      this.activeName = tab
      this.onLoad(this.page)
    },
    ToBreak (val) {
      if (val)return val.replace(/\n/g, '<br/>')
    }
  }
}
</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 !important;
  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>
<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: 15vh;
  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>