更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 admin/src/views/platform/components/PlatformSign.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,253 @@
<template>
  <GlobalWindow title="车辆签到" :visible.sync="isShowModal" :showConfirm="false" width="800px">
    <div class="queuing_modal">
      <div class="df_ac mb20">
        <span>搜索车辆：</span>
        <el-input class="flex1 mr20" v-model="carCodeFront" placeholder="请输入车牌号"></el-input>
        <el-button type="primary" @click="getList(1)">查找</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
      <div class="list">
        <div class="item" v-for="item in dataList" :key="item.id">
          <div class="head df_sb">
            <div v-if="item.carCodeFront" class="code">
              <span>{{ item.carCodeFront.slice(0, 1) }}</span>
              <span>{{ item.carCodeFront.slice(1, 2) }}</span>
              <span>·</span>
              <span>{{ item.carCodeFront.slice(2) }}</span>
            </div>
            <div class="status" :class="{ red: item.status == 0 }">{{ statusMap[item.status] }}</div>
          </div>
          <div class="info">
            <div v-if="item.billCode" class="ite">
              <span>运输单号：</span>
              <span>{{ item.billCode }}</span>
            </div>
            <div v-else class="ite">
              <span>合同单号：</span>
              <span>{{ item.contractNum }}</span>
            </div>
            <div class="ite">
              <span>驾驶员：</span>
              <span>{{ item.driverName }}</span>
            </div>
            <div class="ite">
              <span>手机号：</span>
              <span>{{ item.drivierPhone }}</span>
            </div>
            <div class="ite">
              <span>总运输量：</span>
              <span>{{ item.totalNum || item.ioQty }}万支</span>
            </div>
            <div v-if="item.type != 4" class="ite" style="width: 66%">
              <span>运输公司：</span>
              <span>{{ item.carrierName }}</span>
            </div>
          </div>
          <div class="footer df_sb">
            <div @click="handleDetail(item)" v-if="item.billCode" class="detail">运单详情</div>
            <div @click="subDetail(item)" v-else class="detail">预约详情</div>
            <el-button type="primary" @click="handleCall(item)">签到</el-button>
          </div>
        </div>
      </div>
      <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="pagination">
      </pagination>
    </div>
    <WaybillDetailRef v-if="isShowDetail" ref="WaybillDetailRef" />
    <DriverDetail v-if="isShowDriver" ref="DriverDetailRef" />
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import Pagination from '@/components/common/Pagination'
import WaybillDetailRef from "./WaybillDetail.vue"
import DriverDetail from "@/views/task/driverDetail.vue"
import { platformJobPage, platformJobSign } from '@/api'
import { statusMap } from '../config'
import { Message } from 'element-ui'
export default {
  components: {
    GlobalWindow,
    Pagination,
    WaybillDetailRef,
    DriverDetail
  },
  data() {
    return {
      statusMap,
      isShowModal: false,
      isShowDetail: false,
      isShowDriver: false,
      subLoading: false,
      pagination: {
        total: 0,
        pageSize: 10,
        page: 1
      },
      carCodeFront: '',
      // activePlat: {},
      dataList: []

    }
  },
  methods: {
    handleCall(item) {
      // const activePlatform = this.activePlat
      platformJobSign({ jobId: item.id, signType: '2' }).then(res => {
        if (res.code == 200) {
          Message.success('签到成功')
          this.$emit('success')
          this.getList()
        }
      })
    },
    getList(page) {
      const { activePlat, pagination, carCodeFront } = this
      if (page) {
        pagination.page = page
      }
      platformJobPage({
        model: { platformGroupId: activePlat.id, queryStatus: '0,1', carCodeFront },
        page: pagination.page,
        capacity: pagination.pageSize
      }).then(res => {
        this.dataList = res.records
        this.pagination.total = res.total
      })
    },
    subDetail(row) {
      this.isShowDriver = true
      this.$nextTick(() => {
        this.$refs.DriverDetailRef.id = row.bookId
        this.$refs.DriverDetailRef.type = row.objType
        this.$refs.DriverDetailRef.getDetail()
        this.$refs.DriverDetailRef.isShowModal = true
      })
    },
    handleDetail(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.WaybillDetailRef.isShowModal = true
        this.$refs.WaybillDetailRef.id = row.id
        this.$refs.WaybillDetailRef.getDetail()
      })
    },
    reset() {
      this.carCodeFront = ''
      this.pagination.page = 1
      this.pagination.pageSize = 10
      this.getList()
    },
    handleSizeChange(e) {
      this.pagination.pageSize = e
      this.getList(1)
    },
    handlePageChange(e) {
      this.pagination.page = e
      this.getList()
    },
    handleSub() {
      const { param } = this
      this.subLoading = true
      PlatformEdit({
        ...param
      }).then(res => {
        this.subLoading = false
        this.isShowEdit = false
        this.$tip.success('提交成功')
        this.getList()
      }, () => {
        this.subLoading = false
      })
    }
  }

}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variables.scss";

.queuing_modal {
  padding: 10px 30px;

  .list {
    .item {
      background: #f4fafb;
      border-radius: 2px;
      border: 1px solid #dfe2e8;
      margin-bottom: 10px;
      padding: 16px;

      .head {
        margin-bottom: 15px;

        .plate {
          width: 90px;
          text-align: center;
          font-size: 15px;
          color: #111111;
          padding: 4px 5px;
          font-weight: 700;
          border: 1px solid #279baa;
          background-color: #fff;
        }

        .status {
          color: $primaryColor;
        }

        .code {
          display: flex;
          font-weight: 600;
          height: 30px;
          line-height: 30px;
          font-size: 15px;
          color: #111111;
          background-color: #fff;
          border-radius: 4px;
          border: 1px solid $primaryColor;
          padding-right: 4px;

          span {
            &:nth-of-type(1) {
              background: $primaryColor;
              padding: 0 8px;
              color: #fff;
            }

            &:nth-of-type(2) {
              padding-left: 4px;
            }
          }
        }
      }

      .info {
        display: flex;
        flex-wrap: wrap;

        .ite {
          width: 33.3%;
          margin-bottom: 8px;

          span {
            &:nth-child(1) {
              color: #666666;
            }
          }
        }
      }

      .footer {
        .detail {
          color: $primaryColor;
          cursor: pointer;
        }
      }
    }
  }
}
</style>