pending.vue

<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">查看</div>
        <el-descriptions :column="4">
            <el-descriptions-item label="唛头">
                {{orderData.marks?orderData.marks:'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="已到箱数/总箱数">
                {{orderData.sumNum||0}}/{{orderData.costVO?orderData.costVO.num:0}}
            </el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
            </el-descriptions-item>
            <el-descriptions-item label="送货日期">
              <span v-if="orderData">{{orderData.status>=5?(orderData.orderItemVOList.length>0?orderData.orderItemVOList[0].warehouseInInfoVO.inTime:'无'):(orderData.consigneeVO?orderData.consigneeVO.deliveryDate:'无')}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="运输方式">
                <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
              </el-descriptions-item>
            <el-descriptions-item label="始发地">
                  {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:'无'}}
              </el-descriptions-item>
              <el-descriptions-item label="目的地">
                {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.destTitleZh:'无'}}
              </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
            <el-descriptions-item label="发货人">
                {{orderData.consignorVO?orderData.consignorVO.name||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="发货公司">
                {{orderData.consignorVO?orderData.consignorVO.company||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="发货电话">
                {{orderData.consignorVO?orderData.consignorVO.phone||'无':'无'}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="4">
            <el-descriptions-item label="收货人">
                {{orderData.consigneeVO?orderData.consigneeVO.name||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="收货公司">
                {{orderData.consigneeVO?orderData.consigneeVO.company||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="收货电话">
                {{orderData.consigneeVO?orderData.consigneeVO.phone||'无':'无'}}
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">问题详情</div>
      <el-table v-loading="loading" border :data="list">
        <el-table-column label="序号" align="center" prop="id" type="index">
          <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="异常类型" align="center" >
        <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.ORDER_ERROR_TYPE" :value="scope.row.orderExceptionType" />
          </template>
        </el-table-column>
        <el-table-column label="异常描述" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.orderExceptionRemark}}</span>
            </template>
        </el-table-column>
        <el-table-column label="金额" align="center" scope="orderExceptionAmount" />
       <el-table-column label="异常状态" align="center">
          <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ORDER_EXCEPTION_STATUS" :value="scope.row.orderExceptionStatus" />
            </template>
          </el-table-column>
        <el-table-column label="附件" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.orderExceptionRemark}}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理人" align="center" prop="orderExceptionAmount" />
        <el-table-column label="处理时间" align="center" prop='orderExceptionTime' />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.id,scope.row.orderExceptionType)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {getExceptionListByOrderId} from "@/api/ecw/orderException"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from  '@/utils/dict'
import {getOrder} from '@/api/ecw/order'

export default {
  name: "Pending",
  components: {

  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      orderData:{},
      // 订单异常列表
      list: [],
      tradeCityList:[],
      orderId:0
    };
  },
  created() {
    if(this.$route.query.id){
      this.orderId = this.$route.query.id
      this.getList()
      this.getOrders()
    }
    getTradeCityList().then(res => this.tradeCityList = res.data)
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getExceptionListByOrderId(this.orderId).then(response => {
        this.list = response.data;
        this.loading = false;
      });
    },
    getOrders(){
      getOrder(this.orderId).then(response => {
        this.orderData = response.data
      });
    },
    importCityName(id){
        var arr = this.tradeCityList.filter(item => item.id == id)
        return arr.length>0?arr[0].titleZh:'无'
    },
    handEdit(id, type){
      // if(type == 3){
        this.$router.push({
          path:"/order/prepayDeal?id="+id,
        })
      // }

    }
  }
}
</script>
<style>
  .card-title{
      font-size: 18px;
      font-weight: bold;
      margin-top: 10px;
  }
  .card{
    margin-top: 20px;
  }
</style>