通过订单状态来展示不同的样式文字

// tob首页(订单列表)
export const orderList = [
  {
    state: '2',
    text: '申办中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '3',
    text: '待审查',
    color: '#333',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '4',
    text: '待审批',
    color: '#333',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '5',
    text: '制证中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '6',
    text: '发证中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '7',
    text: '已完成',
    color: '#3B65E2',
    backgroundColor: '#E8EEFF',
  },
  {
    state: '8',
    text: '已取消',
    color: '#EC461E',
    backgroundColor: '#FFEFEB',
  },
];

export const orderMap = orderList.reduce((accumulator, currentObj) => {
  accumulator[currentObj.state.toString()] = currentObj;
  return accumulator;
}, {});

export const getOrderItemDescription = (state) => {
  return {
    text: orderMap[state].text,
    color: orderMap[state].color,
    backgroundColor: orderMap[state].backgroundColor,
  };
};


调用
 const { color, backgroundColor, text } = getOrderItemDescription(
        gzOrderDetail.state
      );

0 前言

电商平台所有模块中，订单系统作为比较核心的模块，它决定了整个流程能不能顺畅的执行，起着承上启下的作用（下单、支付、履约、售后、清结算、营销活动）。

订单系统的设计主要需要考虑订单字段、业务流程、状态机三大个方面，这些内容决定了订单系统稳定性与扩展性。



2 订单流程

订单流程指整个订单从产生到完成的整个流转过程，它包括正向流程和逆向的流程。



3 订单状态机

状态机表示了一笔订单的生命周期，按照一定的方向通过触发不同的事件产生数据流转的过程。

 

状态机v2.0

随着业务快速发展，我们的状态机也在逐步完善，在完善的过程中我们遇到两个问题

如何提供更多的订单状态来描述现实世界？
	
在提供更多的订单状态后，同时节省状态机维护成本？
为了解决这两个问题，我们采用大状态+小状态的设计。主、子订单上只维护大状态流转，抽象出物流、售后两个领域分别去维护各自的小状态。这样保证了主子订单上的状态不会特别多，同时又可以通过不同的领域中的小状态去满足业务需求。

主、子订单变更规则

正向状态是当全部子订单向前流转时，主订单才会向前走；
	
逆向状态是当子订单全部变成15(售后中) 主订单才变售后中.   子订单全部变成16(售后完成)主订单才变售后完成  子订单全部变成11(取消)主订单才变取消；
 



状态机在APP端的体现

团长C端提货界面



用户C端提货界面



 

思考与改进

1 目前物流领域的状态机只针对团长端开放，并没有针对C端用户开放。WMS和TMS作业都是按照团长+SKU纬度，团长收到货后承担这二次分拣的职责，由团长决定用户的货是否真的送达，所以WMS和TMS回传给订单的消息对用户是不准确的。

问题举例

小明在A团长下单5个苹果

小红在A团长下单5个苹果

23点仓库开始作业，发现一共只有5个苹果。

WMS TMS 下发出库、配送指令 A团长+5个苹果
	
OMS收到指令按照团长纬度更新订单状态，此时小明、小红的订单状态都被更新为司机送达
	
团长收到5个苹果后，选择把苹果全部给和他关系较好的小明。
此时小红没收到货、同时看到自己订单状态为司机送达就会很懵逼，这也是目前为什么履约状态只针对团长开放的原因。谁到货谁没到货团长线下决定的。

 

 

 

 

 

 

一：在help中根据状态定义对应css

module Admin::Order::DetailsHelper
  # 显示彩色问题状态
  PS_BG_COLOR = {"finish"=>"green","un_catch"=>"yellow","under_take"=>"red"}
  def color_problem_status(detail)
    %Q{<span class="ui circular label #{PS_BG_COLOR[detail.problem_status]} basic"> #{detail.i18n_attr_problem_status} </span>} 
  end
end


二：通过block来定义更灵活的显示。

<%= show_created_by_name(@company.created_by) do |name|%>  
        <div class="column column_new">创建人: <%= name%> </div>  
<% end %>  

def show_created_by_name(created_by, &block)  
    name = CreatedBy.display_name(created_by)  
    if block_given?  
      capture(name,&block) if name.present?  
    else  
      name  
    end  
end 


三：通过和i8n来定义状态css

module Website
  module Ext
    module ActiveRecord
      module I18n
        extend ActiveSupport::Concern
        I18N_ATTR_PREFIX = /^i18n_attr_/
        NAME_OF_PREFIX = /^name_of_/
        def method_missing(method,opt={}, *args, &block)
          c = method.to_s
          col = c.sub(I18N_ATTR_PREFIX,'')
          if c =~ I18N_ATTR_PREFIX 
            col = c.sub(I18N_ATTR_PREFIX,'')
            display_model_status(self.class, col, self.send(col.to_sym),opt) if self.class.column_names.include?(col)
          elsif c =~ NAME_OF_PREFIX 
            col = c.sub(NAME_OF_PREFIX,'')
            eval("#{self.class.name}::#{col.upcase}.invert[self.#{col}]") if eval("#{self.class.name}.constants.include?(:#{col.upcase})")
          else
            super
          end
        end

        def display_model_status(model,attribute,value,opt={})
          return if value.nil?
          if ['active'].include?(attribute.to_s.strip)
            s = ::I18n.t("activerecord.status.#{attribute}.#{value}", default: value) 
          else
            s = ::I18n.t("activerecord.status.#{model.name.underscore}.#{attribute}.#{value}", default: value)
          end

          if opt[:css]
            s = %Q{<span class="ui circular label #{model.name.underscore} #{attribute} #{value} basic"> #{s} </span>}  
          end
          s
        end
      end
    end
  end
end

调用：
<%=raw detail.i18n_attr_problem_status(css:true) %>
<%=raw detail.i18n_attr_problem_status %>

enum problem_status: {
    "normal" => 0 ,
    "finish" =>1,
    "un_catch" => 10,
    "under_take" =>11
  }


i8n：

problem_status:
          'normal': ''  
          'finish': '问题订单已处理'
          'un_catch': '问题订单未处理'
          'under_take': '问题订单处理中'  


css：

/*问题订单状态颜色*/
.order_detail.problem_status.finish{
    color:#21BA45 !important;
    background-color: #fff !important; 
    border: 1px solid #21BA45 !important; 
}

.order_detail.problem_status.un_catch{
    color:#FBBD08 !important;
    background-color: #fff !important; 
    border: 1px solid #FBBD08 !important; 
}

.order_detail.problem_status.under_take{
    color:#DB2828 !important;
    background-color: #fff !important; 
    border: 1px solid #DB2828 !important; 
}

                                        
                                            
SAP生产订单的不同状态
[@more@]
REL Released
CRTD Created
PRC Pre-costed
MANC Mat.availability not checked
NTUP Dates are not updated
生产订单创建后，订单的状态为CRTD（Created），此时订单不能进行发料、工单确认和收货等操作。
                                                            

                    

                                                    来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/9826/viewspace-1023846/，如需转载，请注明出处，否则将追究法律责任。
                                            

                
转载于:http://blog.itpub.net/9826/viewspace-1023846/