orderTable.vue

<template>
  <div>
    <el-table v-loading="orderLoading" :data="orderList"> 
      <el-table-column label="订单编号" align="center"  prop="orderNo">
        <template slot-scope="scope">
          <a @click="handleUpdate(scope.row)" style="color: blue">{{ scope.row.orderNo }}</a>
        </template>
      </el-table-column>
      <el-table-column label="商品数量" align="center" prop="goodsNum"/>
      <el-table-column label="金额" align="center" prop="amount"/>
      <el-table-column label="城市" align="center" >
        <template slot-scope="scope">
          {{getProvince(scope.row.shop.city)}}
        </template>
      </el-table-column>
      <el-table-column label="店铺" align="center" prop="shop.name"/>
      <el-table-column label="创建时间" align="center" prop="createdAt"/>
      <el-table-column label="订单状态" align="center" prop="state">
        <template slot-scope="scope">{{formatterState(scope.row.state)}}</template>
      </el-table-column>
    </el-table> 
    <pagination
      v-show="orderTotal > 0"
      :total="orderTotal"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />
    <!-- 详情对话框 -->
    <OrderDetial ref="orderDetial" ></OrderDetial> 
  </div>
</template>
<script>
import OrderDetial from '@/components/order/orderDetial.vue';
import piovince from '@/utils/piovince';
export default {
  components: { OrderDetial},
  name: "orderTable", 
  props: ['orderList','orderTotal','orderLoading'],
  data() {
    return {
      pageNum: 1,
      pageSize: 10,      
      piovince
    }
  },
  methods: {
    getProvince(province){
      let list=this.piovince;
      for(let i=0;i<list.length;i++){
        if(list[i].children.length>0){
          let childrenList=list[i].children;
          for(let j=0;j<childrenList.length;j++){
            if(childrenList[j].value == province){
              return childrenList[j].name;
            } 
          }
        }       
      }
    },
    getList(){
      this.$emit("getOrderList",this.pageNum,this.pageSize)
    },
    formatterState(state){
      if(state == 0){
        return "创建未校验";
      }else if(state == 1){
        return "未支付";
      }else if(state == 2){
        return "已支付";
      }else if(state == 3){
        return "支付制作中";
      }else if(state == 4){
        return "制作完成未取";
      }else if(state == 5){
        return "取餐中";
      }else if(state == 6){
        return "正常完成";
      }else if(state == 7){
       return "待取超时";
      }else if(state == 8){
       return "未支付取消";
      }else if(state == 9){
        return "支付后制作前取消 ";
      }else if(state == 10){
        return "制作中取消";        
      }else if(state == 11){
        return "制作完成取消";  
      }else if(state == 12){
        return "退款中";  
      }else if(state == 13){
        return "退款失败";  
      }else if(state == 14){
        return "部分退款";  
      }else if(state == 15){
        return "已退款";  
      }else if(state == 50){
        return "其他人工干预状态";  
      }
    },
     /** 详情按钮操作 */
    handleUpdate(row) {
      this.$refs.orderDetial.handleUpdate(row);
    }
  }
}
</script>