<template> 
 | 
  <div class="main_app"> 
 | 
    <QueryForm ref="QueryForm" v-model="filters" :query-form-config="queryFormConfig" @changeForm='changeForm' @handleQuery="getList(1)" 
 | 
      @clear="clear"> 
 | 
      <template #fastdate> 
 | 
        <el-radio-group v-model="filters.fastdate" size="small" @input="changeRadio"> 
 | 
          <el-radio-button label="0">当天</el-radio-button> 
 | 
          <el-radio-button label="6">近7天</el-radio-button> 
 | 
          <el-radio-button label="29">近30天</el-radio-button> 
 | 
        </el-radio-group> 
 | 
      </template> 
 | 
    </QueryForm> 
 | 
    <div class="pt16"> 
 | 
      <el-button type="primary" @click="complete(ids)">完成作业</el-button> 
 | 
      <el-button :loading="exLoading" @click="handleEx" 
 | 
        v-permissions="['business:platformjob:exportExcel']">导出</el-button> 
 | 
      <el-button :loading="updateLoading" @click="updateTotalNum" 
 | 
        v-permissions="['business:platformjob:updateTotalNum']">重置总作业量</el-button> 
 | 
    </div> 
 | 
    <el-table :height="tableHeightNew" v-loading="loading" :data="list" @selection-change="handleSelectionChange" stripe> 
 | 
      <el-table-column type="selection" width="55"></el-table-column> 
 | 
      <el-table-column prop="billCode" label="运单号" min-width="100" show-overflow-tooltip /> 
 | 
      <el-table-column prop="totalNum" label="总作业量(万支)" min-width="130" show-overflow-tooltip /> 
 | 
      <el-table-column prop="carCodeFront" label="车牌前照号" min-width="100" show-overflow-tooltip /> 
 | 
      <!-- <el-table-column prop="carCodeBack" label="车牌后照号" min-width="100" show-overflow-tooltip /> --> 
 | 
      <el-table-column prop="origin" label="任务来源" min-width="100" show-overflow-tooltip > 
 | 
        <template v-slot="scope"> 
 | 
          <span v-if="scope.row.origin == 1">WMS获取</span> 
 | 
          <span v-else>自建任务</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="carrierName" label="运输公司" min-width="100" show-overflow-tooltip /> 
 | 
      <el-table-column prop="driverName" label="司机" min-width="100" show-overflow-tooltip /> 
 | 
      <el-table-column prop="drivierPhone" label="司机电话" min-width="100" show-overflow-tooltip /> 
 | 
<!--  <el-table-column prop="wmsContractNum" label="WMS合同号" min-width="100" show-overflow-tooltip > 
 | 
      <template v-slot="scope"> 
 | 
        <span v-if="scope.row.platformWmsJob">{{ scope.row.platformWmsJob.contractNum }}</span> 
 | 
      </template> 
 | 
      </el-table-column>--> 
 | 
      <el-table-column label="作业类型" min-width="100" show-overflow-tooltip> 
 | 
        <template v-slot="scope"> 
 | 
          <span v-if="scope.row.type == '0'">自有车卸货</span> 
 | 
          <span v-if="scope.row.type == '1'">自有车装货</span> 
 | 
          <span v-if="scope.row.type == '2'">外协车卸货</span> 
 | 
          <span v-if="scope.row.type == '3'">外协车装货</span> 
 | 
          <span v-if="scope.row.type == '4'">市公司外协车卸货</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="platformGroupName" label="作业月台组" min-width="150"  show-overflow-tooltip > 
 | 
        <template v-slot="scope"> 
 | 
          <div style="display: flex;align-items: center;align-content: center;width: 100%"> 
 | 
          <div  style="max-width: 100px;display: inline-block; 
 | 
            overflow: hidden; 
 | 
            text-overflow: ellipsis; 
 | 
            word-wrap: break-word;">{{scope.row.platformGroupName||'-'}}</div> 
 | 
          <el-button  type="text" style="font-size: 10px;color: red;margin-top: 5px;margin-left: 10px " @click="changeGroup(scope.row)" v-if="[0,1,2].includes(scope.row.status)">更换</el-button> 
 | 
          </div> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="ioCreatedate" label="创建时间" min-width="150" show-overflow-tooltip /> 
 | 
      <el-table-column label="作业状态" min-width="100" show-overflow-tooltip> 
 | 
        <template v-slot="scope"> 
 | 
          <span>{{ statusMap[scope.row.status] }}</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="editUserName" label="最后操作人员" min-width="150" show-overflow-tooltip /> 
 | 
      <el-table-column prop="name" label="操作" min-width="170" align="center" fixed="right" show-overflow-tooltip> 
 | 
        <template v-slot="scope"> 
 | 
          <el-button type="text" @click="complete([scope.row.id])" v-if="[0,1,2].includes(scope.row.status)">完成作业</el-button> 
 | 
          <el-button v-if="scope.row.status == '12'" type="text" class="red" 
 | 
            v-permissions="['business:platformjob:delete']" @click="handleDel(scope.row)">删除</el-button> 
 | 
          <el-button v-if="scope.row != 12" type="text" v-permissions="['business:platformjob:query']" 
 | 
            @click="handleDetail(scope.row)">运单详情</el-button> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
    </el-table> 
 | 
    <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> 
 | 
    <!--  --> 
 | 
    <!--  --> 
 | 
    <WaybillDetailRef v-if="isShowDetail" ref="WaybillDetailRef" /> 
 | 
    <el-dialog append-to-body title="更换月台组" style="text-align: center" class="dialogCl" :visible.sync="showChangeGroup" width="480px" top="10%"> 
 | 
      <div class="head"  v-if="showChangeGroup && curRow"> 
 | 
        <div class="plate" v-if="curRow.carCodeFront"> 
 | 
          <span>{{ curRow.carCodeFront.slice(0, 1) }}</span> 
 | 
          <span>{{ curRow.carCodeFront.slice(1, 2) }}</span> 
 | 
          <span>·</span> 
 | 
          <span>{{ curRow.carCodeFront.slice(2) }}</span> 
 | 
        </div> 
 | 
        <div class="list"> 
 | 
          <div class="item"> 
 | 
            <span>运输单号:</span> 
 | 
            <span>{{ curRow.billCode }}</span> 
 | 
          </div> 
 | 
          <div class="item"> 
 | 
            <span>总运输量:</span> 
 | 
            <span>{{ curRow.totalNum  }}万支</span> 
 | 
          </div> 
 | 
          <div class="item"> 
 | 
            <span>驾驶员:</span> 
 | 
            <span>{{ curRow.driverName }} {{ curRow.drivierPhone }}</span> 
 | 
          </div> 
 | 
          <div class="item"> 
 | 
            <span>当前月台组:</span> 
 | 
            <span>{{ curRow.platformGroupName }}</span> 
 | 
          </div> 
 | 
        </div> 
 | 
      </div> 
 | 
      <el-form :model="groupForm" ref="form"   > 
 | 
        <el-form-item label="选择月台组" prop="platformGroupId" required> 
 | 
          <el-select v-model="groupForm.platformGroupId" placeholder="请选择月台分组 "> 
 | 
            <el-option v-for="item in rowGroupList" :key="item.id" :label="item.name" :value="item.id"> 
 | 
            </el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
      </el-form> 
 | 
      <span slot="footer" class="dialog-footer"> 
 | 
        <el-button @click="showChangeGroup = false">取消</el-button> 
 | 
        <el-button type="primary" :loading="dealing" @click="changeGroupDo">确定</el-button> 
 | 
      </span> 
 | 
    </el-dialog> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import QueryForm from '@/components/common/QueryForm' 
 | 
import { 
 | 
  platformJobPage, 
 | 
  platformJobExport, 
 | 
  platformJobDel, 
 | 
  dealJobFinish, 
 | 
  updateTotalNum, 
 | 
  changPlatformGroup 
 | 
} from '@/api' 
 | 
import { statusMap } from '../config' 
 | 
import WaybillDetailRef from '../components/WaybillDetail.vue' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import UploadFaceImg from '@/components/common/UploadFaceImg' 
 | 
import { Message } from 'element-ui' 
 | 
import dayjs from 'dayjs' 
 | 
import BaseComputHeight from '@/components/base/BaseComputHeight' 
 | 
import { allList } from '@/api/platform/platformGroup' 
 | 
export default { 
 | 
  extends: BaseComputHeight, 
 | 
  components: { 
 | 
    Pagination, 
 | 
    QueryForm, 
 | 
    WaybillDetailRef, 
 | 
    GlobalWindow, 
 | 
    UploadFaceImg 
 | 
  }, 
 | 
  data () { 
 | 
    return { 
 | 
      groupList: [], 
 | 
      rowGroupList: [], 
 | 
      dealing:false, 
 | 
      statusMap, 
 | 
      curRow:null, 
 | 
      isShowDetail: false, 
 | 
      showChangeGroup: false, 
 | 
      exLoading: false, 
 | 
      updateLoading: false, 
 | 
      loading: false, 
 | 
      pagination: { 
 | 
        pageSize: 10, 
 | 
        page: 1, 
 | 
        total: 0 
 | 
      }, 
 | 
      filters: { 
 | 
        selDate: [], 
 | 
        fastdate: 0, 
 | 
        createDateStart: '', 
 | 
        createDateEnd: '' 
 | 
      }, 
 | 
      list: [], 
 | 
      groupForm:{ 
 | 
        id:null, 
 | 
        platformGroupId:null, 
 | 
        platformGroupName:null 
 | 
      }, 
 | 
      queryFormConfig: { 
 | 
        formItems: [ 
 | 
          { 
 | 
            filed: 'billCode', 
 | 
            type: 'input', 
 | 
            label: '运单号' 
 | 
          }, 
 | 
          { 
 | 
            filed: 'driverName', 
 | 
            type: 'input', 
 | 
            label: '驾驶员' 
 | 
          }, 
 | 
          { 
 | 
            filed: 'wmsContractNum', 
 | 
            type: 'input', 
 | 
            label: '合同号' 
 | 
          }, 
 | 
          { 
 | 
            filed: 'carCodeFront', 
 | 
            type: 'input', 
 | 
            label: '车牌号' 
 | 
          }, 
 | 
          { 
 | 
            filed: 'status', 
 | 
            type: 'select', 
 | 
            label: '作业状态', 
 | 
            options: [ 
 | 
              { value: 0, label: '待确认' }, 
 | 
              { value: 1, label: '待签到' }, 
 | 
              { value: 2, label: '等待叫号' }, 
 | 
              { value: 3, label: '入园等待' }, 
 | 
              { value: 4, label: '月台等待' }, 
 | 
              { value: 5, label: '作业中' }, 
 | 
              { value: 6, label: '作业完成' }, 
 | 
              { value: 7, label: '转移中' }, 
 | 
              { value: 8, label: '异常挂起' }, 
 | 
              { value: 9, label: '已授权离园' }, 
 | 
              // { value: 10, label: '已离园' }, 
 | 
              { value: 11, label: '已过号' }, 
 | 
              { value: 12, label: '已取消' } 
 | 
            ] 
 | 
          }, 
 | 
          { 
 | 
            filed: 'type', 
 | 
            type: 'select', 
 | 
            label: '作业类型', 
 | 
            options: [ 
 | 
              { value: 0, label: '自有车卸货' }, 
 | 
              { value: 1, label: '自有车装货' }, 
 | 
              { value: 2, label: '外协车卸货' }, 
 | 
              { value: 3, label: '外协车装货' }, 
 | 
              { value: 4, label: '市公司外协车卸货' } 
 | 
            ] 
 | 
          }, 
 | 
          { 
 | 
            filed1: 'createDateStart', 
 | 
            filed2: 'createDateEnd', 
 | 
            type: 'datetime', 
 | 
            label: '操作时间' 
 | 
          }, 
 | 
          { 
 | 
            type: 'slot', 
 | 
            filed: 'fastdate', 
 | 
            label: '' 
 | 
          } 
 | 
        ], 
 | 
        online: true 
 | 
      }, 
 | 
      ids: [] 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.changeRadio('0') 
 | 
    this.$nextTick(() => { 
 | 
      this.$refs.QueryForm.zkBtn() 
 | 
    }) 
 | 
    this.loadGroupList() 
 | 
  }, 
 | 
  methods: { 
 | 
    loadGroupList () { 
 | 
      allList({}) 
 | 
        .then(res => { 
 | 
          this.groupList = res || [] 
 | 
        }) 
 | 
    }, 
 | 
    handleSelectionChange (ids) { 
 | 
      this.ids = ids.map(item => item.id) 
 | 
    }, 
 | 
    complete (ids) { 
 | 
      var that = this 
 | 
      if (ids.length === 0) { 
 | 
        return this.$message.warning('至少选择一项内容') 
 | 
      } 
 | 
      this.$confirm('是否确认完成作业?, 是否确认?', '提示', { 
 | 
        confirmButtonText: '确认', 
 | 
        cancelButtonText: '取消', 
 | 
        type: 'warning' 
 | 
      }).then(() => { 
 | 
        dealJobFinish(ids) 
 | 
          .then(res => { 
 | 
            that.getList() 
 | 
          }) 
 | 
      }).catch(() => { 
 | 
  
 | 
      }) 
 | 
    }, 
 | 
    changeGroupDo () { 
 | 
      var that = this 
 | 
      if (!this.groupForm.id || !this.groupForm.platformGroupId) { 
 | 
        return this.$message.warning('请选择月台组') 
 | 
      } 
 | 
      changPlatformGroup(this.groupForm) 
 | 
        .then(res => { 
 | 
          that.showChangeGroup=false 
 | 
          that.getList() 
 | 
        }) 
 | 
    }, 
 | 
    changeGroup (row) { 
 | 
      this.groupForm.id = null 
 | 
      this.groupForm.platformGroupName = null 
 | 
      this.groupForm.platformGroupId = null 
 | 
      this.rowGroupList = [] 
 | 
      this.curRow=null 
 | 
      var type = 0 
 | 
      if (row.type === 0 || row.type === 2) { 
 | 
        // 安泰物流卸货 
 | 
        type = 0 
 | 
      } else if (row.type === 1 || row.type === 3) { 
 | 
        // 安泰物流装货 
 | 
        type = 1 
 | 
      } else if (row.type === 4) { 
 | 
        // 市公司外协车卸货 
 | 
        type = 2 
 | 
      } else { 
 | 
        return this.$message.warning('作业任务类型有误,不支持月台组切换!') 
 | 
      } 
 | 
      this.curRow =row 
 | 
      this.groupForm.id = row.id 
 | 
      this.groupForm.platformGroupName = row.platformGroupName 
 | 
      this.groupForm.platformGroupId = row.platformGroupId 
 | 
      this.groupList.forEach(item => { 
 | 
        if (item.type === type) { 
 | 
          this.rowGroupList.push(item) 
 | 
        } 
 | 
      }) 
 | 
      this.showChangeGroup = true 
 | 
    }, 
 | 
    changeRadio (day) { 
 | 
      const arr = [dayjs().subtract(day, 'day').format('YYYY-MM-DD') + ' 00:00:00', dayjs().format('YYYY-MM-DD') + ' 23:59:59'] 
 | 
      this.filters.createDateStart = arr[0] 
 | 
      this.filters.createDateEnd = arr[1] 
 | 
      this.getList(1) 
 | 
    }, 
 | 
    changeForm (str) { 
 | 
      if (this.filters.createDateStart > this.filters.createDateEnd) { 
 | 
        this.filters.createDateStart = this.filters.createDateEnd 
 | 
        return this.$message.error('开始时间不能大于结束时间') 
 | 
      } 
 | 
      this.getList() 
 | 
    }, 
 | 
    getList (page) { 
 | 
      const { pagination, filters } = this 
 | 
      this.loading = true 
 | 
      platformJobPage({ 
 | 
        model: { 
 | 
          ...filters, 
 | 
          jobType: '0' 
 | 
        }, 
 | 
        capacity: pagination.pageSize, 
 | 
        page: page || pagination.page 
 | 
      }).then(res => { 
 | 
        this.loading = false 
 | 
        this.list = res.records || [] 
 | 
        this.list.forEach(item => { 
 | 
          item.inTypeTemp = item.inType == 0 ? '整托盘' : '件烟' 
 | 
          item.taskOrigin = 'WMS获取' 
 | 
        }) 
 | 
        this.pagination.total = res.total || 0 
 | 
      }, () => { 
 | 
        this.loading = false 
 | 
      }) 
 | 
    }, 
 | 
    handleDel (row) { 
 | 
      this.$dialog.deleteConfirm('确认删除吗?').then(() => { 
 | 
        platformJobDel(row.id).then(res => { 
 | 
          Message.success('删除成功') 
 | 
          this.getList() 
 | 
        }) 
 | 
      }) 
 | 
    }, 
 | 
    handleEx () { 
 | 
      this.$dialog.exportConfirm('确认导出吗?') 
 | 
        .then(() => { 
 | 
          this.exLoading = true 
 | 
          const { filters } = this 
 | 
          platformJobExport({ 
 | 
            page: this.pagination.page, 
 | 
            capacity: 1000000, 
 | 
            jobType: '0', 
 | 
            model: { 
 | 
              ...filters, 
 | 
              jobType: '0' 
 | 
            } 
 | 
          }) 
 | 
            .then(response => { 
 | 
              this.download(response) 
 | 
            }) 
 | 
            .catch(e => { 
 | 
              this.$tip.apiFailed(e) 
 | 
            }) 
 | 
            .finally(() => { 
 | 
              this.exLoading = false 
 | 
            }) 
 | 
        }) 
 | 
    }, 
 | 
    updateTotalNum () { 
 | 
      this.$dialog.actionConfirm('确认进行该操作吗?', '操作提示') 
 | 
        .then(() => { 
 | 
          this.updateLoading = true 
 | 
          updateTotalNum('') 
 | 
            .catch(e => { 
 | 
              this.$tip.apiFailed(e) 
 | 
            }) 
 | 
            .finally(() => { 
 | 
              this.updateLoading = false 
 | 
            }) 
 | 
        }) 
 | 
    }, 
 | 
    clear () { 
 | 
      this.pagination.page = 1 
 | 
      this.filters = {} 
 | 
      this.getList(0) 
 | 
      // this.changeRadio('0') 
 | 
    }, 
 | 
    handleDetail (row) { 
 | 
      this.isShowDetail = true 
 | 
      this.$nextTick(() => { 
 | 
        this.$refs.WaybillDetailRef.isShowModal = true 
 | 
        this.$refs.WaybillDetailRef.id = row.id 
 | 
        this.$refs.WaybillDetailRef.getDetail() 
 | 
      }) 
 | 
    }, 
 | 
    handleSizeChange (capacity) { 
 | 
      this.pagination.pageSize = capacity 
 | 
      this.getList() 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
<style lang="scss" scoped> 
 | 
.param_title { 
 | 
  font-size: 18px; 
 | 
  font-weight: 600; 
 | 
  color: #000000; 
 | 
  margin-bottom: 15px; 
 | 
} 
 | 
.head { 
 | 
  font-size: 12px; 
 | 
  color: #282828; 
 | 
  background: rgba(39, 155, 170, 0.05); 
 | 
  border-radius: 4px; 
 | 
  border: 1px solid #dfe2e8; 
 | 
  padding: 16px; 
 | 
  margin-bottom: 30px; 
 | 
  .plate { 
 | 
    display: flex; 
 | 
    font-weight: 600; 
 | 
    height: 30px; 
 | 
    line-height: 30px; 
 | 
    font-size: 15px; 
 | 
    color: #111111; 
 | 
    background-color: #fff; 
 | 
    border-radius: 4px; 
 | 
    border: 1px solid #2080f7; 
 | 
    padding-right: 4px; 
 | 
    width:120px; 
 | 
    span { 
 | 
      &:nth-of-type(1) { 
 | 
        background: #2080f7; 
 | 
        padding: 0 8px; 
 | 
        color: #fff; 
 | 
      } 
 | 
  
 | 
      &:nth-of-type(2) { 
 | 
        padding-left: 4px; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
  
 | 
  .list { 
 | 
    display: flex; 
 | 
    flex-wrap: wrap; 
 | 
    margin-top: 16px; 
 | 
  
 | 
    .item { 
 | 
      text-align: justify; 
 | 
      width: 50%; 
 | 
      margin-bottom: 8px; 
 | 
      span { 
 | 
        &:nth-child(1) { 
 | 
          color: #666666; 
 | 
        } 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
} 
 | 
  
 | 
  
 | 
</style> 
 |