singleApply.vue

<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">{{$t('合单申请')}}-{{orderData.orderNo||''}}</div>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('唛头')">
                {{orderData.marks||$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('已到箱数/总箱数')">
                <span>{{orderData.sumNum||0}}/{{orderData.costVO?orderData.costVO.totalNum:0}}</span>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('订单状态')">
              <!-- <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" /> -->
              {{orderData.abnormalState!=0?$t('异常'):$t('正常')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('送货日期')">
             {{orderData.deliveryDate||$t('无')}}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('运输方式')">
                <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('出货渠道')">
                  {{orderData.channelName||'/'}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('始发地')" >
                  {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('目的地')" :span="2">
               {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.destTitleZh:$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('发货人姓名')">
                {{orderData.consignorVO?orderData.consignorVO.name||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('发货公司')">
                {{orderData.consignorVO?orderData.consignorVO.company||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('发货电话')">
                  {{!orderData.consignorVO?$t('无'):!orderData.consignorVO.phone?$t('无'):(checkCode(orderData.consignorVO.countryCode)+orderData.consignorVO.phone)}}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('收货人姓名')">
                {{orderData.consigneeVO?orderData.consigneeVO.name||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货公司')">
                {{orderData.consigneeVO?orderData.consigneeVO.company||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货电话')">
                 {{!orderData.consigneeVO?$t('无'):!orderData.consigneeVO.phone?$t('无'):(checkCode(orderData.consigneeVO.countryCode)+orderData.consigneeVO.phone)}}
            </el-descriptions-item>
        </el-descriptions>

    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">{{$t('已合单订单')}}</div>
      <el-table v-loading="loading" border :data="mergedList" style="width: 200px;">
        <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
          <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('订单号')" align="center">
        <template slot-scope="scope">
           <span>{{scope.row.mergedOrder.orderNo}}</span>
          </template>
        </el-table-column>
<!--        <el-table-column :label="唛头" align="center">
          <template slot-scope="scope">
           <span>{{scope.row.mergedOrder.marks}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="始发地" align="center">
            <template slot-scope="scope">
              <span>{{importCityName(scope.row.mergedOrder.orderDepartureVO.departureId)}}</span>
            </template>
        </el-table-column>
        <el-table-column :label="入仓货物属性" align="center">
            <template slot-scope="scope">
              <span>{{ $t('合计：') }}</span>
              <span>{{scope.row.mergedOrder.sumNum+'箱 '+scope.row.mergedOrder.sumVolume+'m³ '+scope.row.mergedOrder.sumWeight+'kg'}}</span>
            </template>
        </el-table-column>
        <el-table-column :label="入仓时间" align="center" prop='createTime' />
        <el-table-column :label="状态" align="center">
           <template slot-scope="scope">
               <dict-tag :type="DICT_TYPE.AUDIT_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">{{$t('待合单订单')}}</div>
      <el-table  border :data="singleData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
               </el-table-column>
        <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
          <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('订单号')" align="center">
        <template slot-scope="scope">
           <span>{{scope.row.orderNo}}</span>
          </template>
        </el-table-column>
         <el-table-column :label="$t('唛头')" align="center">
           <template slot-scope="scope">
            <span>{{scope.row.marks}}</span>
           </template>
         </el-table-column>
        <el-table-column :label="$t('始发地')" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.orderDepartureDO.departure}}</span>
            </template>
        </el-table-column>
        <el-table-column :label="$t('入仓货物属性')" align="center">
            <template slot-scope="scope">
              <span>{{$t('合计')}}：</span>
              <span>{{scope.row.sumNum+$t('箱')+' '+scope.row.sumVolume+'m³ '+scope.row.sumWeight+'kg'}}</span>
            </template>
        </el-table-column>
        <el-table-column :label="$t('入仓时间')" align="center">
           <template slot-scope="scope">
            <span>{{parseTime(scope.row.rucangTime)}}</span>
           </template>
        </el-table-column>
        <el-table-column :label="$t('状态')" align="center">
           <template slot-scope="scope">
             <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status"></dict-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
        @pagination="getList" />
<!--      <el-row v-if="singleData.length>0">
           <el-checkbox v-model="checked">{{ $t('需要仓库打包') }}</el-checkbox>
      </el-row> -->
    </el-card>
    <work-flow v-if='singleData.length>0||orderData.inWarehouseState==209' xmlkey="merge_order" v-model="selectedUsers"></work-flow>
    <div slot="footer" class="card footer_btn" v-if="singleData.length>0||orderData.inWarehouseState==209">
        <el-button  v-if="orderData.inWarehouseState!=209" type="primary" @click="submitForm">{{$t('提交申请')}}</el-button>
        <el-button v-if="orderData.inWarehouseState!=209" plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
        <el-button v-if="orderData.inWarehouseState==209"  type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+bpmProcessId)">{{$t('审核中')}}</el-button>
        <el-button v-if="orderData.inWarehouseState==209" plain type="primary" @click="dialogVisible = true">{{$t('取消审核')}}</el-button>
        <el-button v-if="orderData.inWarehouseState==209" plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
    </div>
    <el-dialog
     :title="$t('提示')"
      :visible.sync="dialogVisible"
      width="30%">
       <span class="cancel_notice">{{$t('合单申请正在审核中，你确定取消合单申请吗？')}}</span>
       <div class="cancel_content">
         <span>{{$t('取消原因')}}：</span>
         <el-input v-model="reason" :placeholder="$t('请输入取消原因')"></el-input>
       </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('取消')}}</el-button>
        <el-button type="primary" @click="cancelMerge">{{$t('确定')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getMergeListByOrderNo,createMerge,cancelMerge} from "@/api/ecw/orderHandle"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from  '@/utils/dict'
import {getChannel} from '@/api/ecw/channel'
import {getModel} from '@/api/bpm/model'
import WorkFlow from '@/components/WorkFlow/'

export default {
  name: "SingleApply",
  components: {
    WorkFlow
  },
  data() {
    return {
      DICT_TYPE,
      checked:false,
      orderData:{},
      // 订单异常列表
      list: [],
      mergedList:[],
      singleData:[],
      tradeCityList:[],
      loading:false,
      queryParams:{
        mergedOrderNo:'NG2200006L',
        page:1,
        rosw:10
      },
      selectedUsers:[],
      total:0,
      orderNos:'',
      bpmProcessId:'',
      reason:'',
      dialogVisible:false
    };
  },
  created() {
    if (this.$route.query.orderNo) {
      this.queryParams.mergedOrderNo = this.$route.query.orderNo
    }
    this.getList()
    getTradeCityList().then(res => this.tradeCityList = res.data)
  },
  methods: {
    checkCode(data){
      if(data.indexOf('+')==-1){
      	return '+'+data
      }
      return data
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getMergeListByOrderNo(this.queryParams).then(response => {
        this.loading = false;
        console.log('(response.data',response.data)
        if(response.data.mergedList){
          this.mergedList = response.data.mergedList;
        }
        if(response.data.unMergeList){
          this.total = response.data.unMergeList.total;
          this.singleData = response.data.unMergeList.list;
        }
        if(response.data.orderInfo){
          this.orderData = response.data.orderInfo
        }
        if(response.data.bpmProcessId){
          this.bpmProcessId = response.data.bpmProcessId
        }
      });
    },
    handleSelectionChange(val) {
       var orderNo = []
       val.forEach((item)=>{
         orderNo.push(item.orderNo)
       })
       this.orderNos = orderNo
     },
    importCityName(id){
        var arr = this.tradeCityList.filter(item => item.id == id)
        return arr.length>0?arr[0].titleZh:this.$t('无')
    },
    getChannelName(id){
      getChannel(id).then(res=>{
        return  res.data.nameZh
      })
    },
    cancelMerge(){
      let that = this
      // if(!that.orderNos){
      //   that.$message.error("请选择取消合单的订单");
      //   return
      // }
      if(!that.reason){
        that.$message.error(this.$t("请输入取消原因"));
        return
      }
      var  params = {
        applyOrderNo :that.queryParams.mergedOrderNo,
        orderNo :that.queryParams.mergedOrderNo,
        reason:that.reason
      }
      cancelMerge(params).then(res=>{
          that.$message.success(this.$t("取消成功"));
           that.$store.dispatch('tagsView/delCurrentView')
      })
    },
    submitForm(){
      let that = this
      if(!that.orderNos||that.orderNos.length==0){
        that.$message.error(this.$t("请选择待合单的订单"));
        return
      }
      var params = []
      that.orderNos.forEach((item)=>{
        var data = {
          applyOrderNo:that.queryParams.mergedOrderNo,
          copyUserId:that.selectedUsers,
          orderNos:item,
          status:1
        }
        params.push(data)
      })
        createMerge(params).then(res=>{
          that.$message.success(this.$t("修改成功"));
          that.$store.dispatch('tagsView/delCurrentView')
        })
    }
  }
}
</script>
<style scoped>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .card{
    margin-top: 20px;
  }
  .footer_btn{
    padding-bottom: 60px;
  }
  .cancel_notice{
    font-size: 16px;
    font-weight: 600;
  }
  .cancel_content{
    display: flex;
    align-items: center;
    padding-top: 20px;
  }
  .cancel_content span{
    width: 100px;
  }
</style>