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

<template>
  <div>
    <basic-container>
      <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('1')">
              <div class="card">
                <div class="card-title card-title2">
                <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 class="divider"/>
            <div class="content-item" @click="handleClick('2')">
              <div class="card">
                <div class="card-title card-title4">
                <span>
                  受
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num">{{ totalData.two }}</span>
                  <span class="card-content-text">未受理</span>
                </div>
              </div>
            </div>
            <div class="divider"/>
            <div class="content-item" @click="handleClick('3')">
              <div class="card">
                <div class="card-title card-title5">
                <span>
                  未
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num">{{ totalData.three }}</span>
                  <span class="card-content-text">未完工</span>
                </div>
              </div>
            </div>
            <div class="divider"/>
            <div class="content-item" @click="handleClick('4')">
              <div class="card">
                <div class="card-title card-title6">
                    <span>
                      已
                    </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num">{{ totalData.four }}</span>
                  <span class="card-content-text">已完工</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </basic-container>
    <basic-container>
      <avue-crud
          :data="goodsList"
          :option="entrustOptionTwoT"
          :table-loading="loading"
          :page.sync="page"
          ref="crudContact"
          @on-load="onLoad"
          @search-change="searchChange"
          @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"
              v-if="row.status===1"
              @click="rowSaveT(row,index)"
          >{{ row.$cellEdit ? '保 存' : '修 改' }}
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="designate(row, index)"
              v-if="row.status===1"
          >派 车
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="cancelDesignate(row, index)"
              v-if="row.status===2"
          >取消派车
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {
  sendACarCollection,
  sendACarDispatchCollection,
  driverQueryCollection,
  fleetList,
  motorcadeDriver,
  fleetDriverSave
} from "@/api/landTransportation";

export default {
  name: "index",
  data() {
    return {
      form: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300]
      },
      roleName: localStorage.getItem("roleName").split(',')[0],
      goodsList: [],
      entrustOptionTwoT: {
        stripe: true,
        align: 'center',
        menuAlign: 'center',
        index: true,
        addBtn: false,
        delBtn: false,
        cellBtn: false,
        cancelBtn: false,
        editBtn: false,
        addRowBtn: false,
        searchMenuPosition: "right",
        searchMenuSpan: 6,
        height: "auto",
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [
          {
            name: 'landWeight',
            type: 'sum',
            decimals: 6
          }, {
            name: 'landAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'ctnQuantity',
            type: 'count'
          }],
        column: [{
          label: '状态',
          overHidden: true,
          width: 200,
          type: 'select',
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=land_order_status",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          dataType: "string",
          prop: 'status'
        }, {
          label: '车队',
          width: 200,
          search: true,
          type: 'select',
          cascader: ['plateNo'],
          overHidden: true,
          dicUrl: "/api/blade-client/corpsdesc/fleet-list",
          props: {
            label: "cname",
            value: "id"
          },
          prop: 'fleetId'
        }, {
          label: '尺寸箱型',
          width: 100,
          search: true,
          overHidden: true,
          prop: 'ctnType'
        }, {
          label: '箱量',
          width: 50,
          overHidden: true,
          prop: 'ctnQuantity'
        }, {
          label: '重量',
          width: 160,
          prop: 'landWeight',
          controls: false,
          overHidden: true,
          precision: 6,
          type: 'number'
        }, {
          label: '车号',
          width: 150,
          cell: true,
          prop: 'vehicleId',
          overHidden: true,
          filterable:true,
          cascader: ['driverId'],
          type: 'select',
          dicUrl: "/api/blade-client/land-vehicle/vehicle-list?fleetId={{key}}",
          props: {
            label: "plateNo",
            value: "id"
          },
          change: (data) => {
            console.log(data)
            fleetList().then(res => {
              for (let item in res.data.data) {
                if (data.value === res.data.data[item].id) {
                  this.goodsList[data.index].driverId = res.data.data[item].driverId
                  this.goodsList[data.index].driverName = res.data.data[item].driverName
                  this.goodsList[data.index].tel = res.data.data[item].tel
                }
              }
            })
          },
        }, {
          label: '司机',
          width: 115,
          search: true,
          // prop: 'driverId'
          overHidden: true,
          cell: true,
          filterable:true,
          prop: 'driverId',
          type: 'select',
          dicUrl: "/api/blade-client/land-driver/driver-list?vehicleId={{key}}",
          props: {
            label: "name",
            value: "id"
          },
        }, {
          label: '电话',
          overHidden: true,
          width: 160,
          cell: true,
          prop: 'tel'
        }, {
          label: '陆运费(D)',
          overHidden: true,
          prop: 'landAmountD'
        }, {
          label: '陆运费(C)',
          overHidden: true,
          cell: true,
          prop: 'landAmountC'
        }, {
          label: '委托备注',
          overHidden: true,
          prop: 'remarks'
        }, {
          label: '车队备注',
          cell: true,
          overHidden: true,
          prop: 'fleetRemarks'
        }, {
          label: '司机备注',
          overHidden: true,
          prop: 'driverRemarks'
        }
        ]
      },
      totalData: {},
      activeName: ''
    }
  },
  methods: {
    //箱信息保存
    rowSave(row, index, done, loading) {
      done()
    },
    //箱信息选择车队
    getfleetIdT(data, row) {
      this.$set(row, 'fleetName', data.cname)
    },
    //搜索
    searchChange(params, done) {
      this.onLoad(this.page, params)
      done();
    },
    //查询
    onLoad(page, params) {
      motorcadeDriver(3).then(res => {
        this.totalData = res.data.data
      })
      let queryParams = {
        size: page.pageSize,
        current: page.currentPage,
        status: this.activeName,
        tag: '3',
        ...params
      }
      this.loading = true;
      driverQueryCollection(queryParams).then(res => {
        this.goodsList = res.data.data.records
        this.page.total = res.data.data.total
      }).finally(() => {
        this.loading = false;
      })
    },
    //箱信息保存
    rowSaveT(row, index, done, loading) {
      if (row.$cellEdit) {
        fleetDriverSave(row).then(res=>{
          this.$message.success("保存成功");
        })
      }
      this.$refs.crudContact.rowCell(row, index)
    },
    //切换订单状态
    handleClick(tab) {
      this.activeName = tab
      this.onLoad(this.page)
    },
    //箱信息派车
    designate(row) {
      if (row.vehicleId) {
        this.$confirm('是否确定派车', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sendACarCollection(row).then(res => {
            this.$message.success('操作成功');
            this.onLoad(this.page)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      } else {
        this.$message.warning('未选择车号，请选择');
      }
    },
    //取消派车
    cancelDesignate(row) {
      this.$confirm('是否确定取消派车', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sendACarDispatchCollection({id: row.id}).then(res => {
          this.$message.success('操作成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  }
}
</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>