项目中前端部分关于订单状态管理的一些疑问

Question

最近有一些关于项目的一些预设状态的管理，
比如说订单状态，可能有N个状态（例如创建、提交订单、审核通过、审核驳回、订单取消...）
那后端返回给我数据的时候只会返回给我当前订单的状态值，比如说：

recordsList:[
    {
        'id':1,
        'title':'xxxx',
        'status':1,
        'createTime':'2020-01-01 00:00:00'
    },
    {
        'id':2,
        'title':'xxxx',
        'status':0,
        'createTime':'2020-01-01 00:00:00'
    },
]

在表格中渲染之前就需要把 状态值 转换成 对应的中文状态* ，一般我会用数组的形式去 .find ：

// 状态预设
const status = [
    {
        label:'已创建',
        key:0
    },
    {
        label:'申请中',
        key:1
    },
    {
        label:'通过审核',
        key:2
    },
    // .....
]
// 转换
const getOrderStatus = function(key){
  const f = status.find(item => item.key === key)
  return f || status[0]
}

但是如果这样的话，在一些需要 按照不同状态 显示 不同操作 的时候，这时候的判断就会直接使用状态值去判断，类似这样

<!-- 用vue template来举例 -->
<template>
    <table>
        <!-- 其它结构 -->
        <td>
            <!-- 直接使用状态值判断 -->
            <a @click='xxx' v-if='record.status === 0'>操作A</a>
            <!-- 使用数组下标判断 -->
            <a @click='xxx' v-eles-if='record.status === status[1].key'>操作B</a>
            <a @click='xxx' v-else'>其他操作</a>
        </td>
        <!-- 其它结构 -->
    </table>
</template>

因为是敏捷开发，所以后续会不断增加需求，这时候订单的状态值可能会改变，例如说订单已审核的值会从 2 变成 12, 这个时候就需要把所有之前用状态值去判断的地方都修改一遍，所以我后来修改成了这样：

// 状态预设
const status = {
    created:{
        label:'已创建',
        key:0
    },
    pending:{
        label:'申请中',
        key:1
    },
    approved:{
        label:'通过审核',
        key:12
    },
    // .....
}
const statusList = Object.values(status)
// 转换
const getOrderStatus = function(key){
  const f = statusList.find(item => item.key === key)
  return f || status.created
}

视图组件判断中这样来处理

<template>
    <table>
        <!-- 其它结构 -->
        <td>
            <a @click='xxx' v-if='record.status === status.created.key'>操作A</a>
            <a @click='xxx' v-eles-if='record.status === status.pass.key'>操作B</a>
            <a @click='xxx' v-else'>操作C</a>
        </td>
        <!-- 其它结构 -->
    </table>
</template>

但是我觉得这样的解决方式有问题，应该有很好的解决办法，但是不知道应该怎么去描述这样的需求，状态字典？还是什么？

只能通过这样的方式来提问了。

Answer 1

一般来说就是数据字典+常量吧。

不过有几点：

1. 常量应该用大写
2. 最好有个工具来维护常量，这样前后端可以比较方便的分享
3. 定义常量时最好留有余地，比如订单状态，最开始的时候就不要定 12345，而是 10、20、30、40，甚至 100、200、300，这样如果中间要增加状态，就可以不修改之前的数据，直接加

Answer 2

你这样已经差不多了。基本上就是用枚举呗。

Answer 3

我觉得还可以使用数组索引渲染判断

const status = [
    {
        label:'已创建',
        key:0
    },
    {
        label:'申请中',
        key:1
    },
    {
        label:'通过审核',
        key:2
    },
    // .....
]
<a @click='xxx' v-if='record.status === status[0].key'>操作A</a>
<a @click='xxx' v-eles-if='record.status === status[1].key'>操作B</a>
<a @click='xxx' v-else'>操作C</a>
渲染部分还可以使用for循环渲染

Answer 4

简单点，

const status = {
    0: '已创建',
    1: '申请中',
    2: '通过审核',
    ...
}

然后在渲染的时候

<a @click='xxx' >{{status[record.status]}}</a>

Answer 5

这个谁来写他也是枚举。

只不过一般人不会 v-if、v-else，更多的是 status[row.status] 或者 row.status | statusFilter 或者 statusFilter(row.status)。

甚至说你可以把他接入 i18n，status：0、1、2、3 因为他是一种基础语言，然后中文是 status: 无、等待、成功、失败，英文是：status: none、pending、success、error，甚至说你可以搞个奇葩语言：status：🈚️、⌛️、✅、❌

Answer 6

我又一点不理解,就算需求迭代,订单已审核的值也不会从 2 变成 12吧,因为这样不光前端要改,后端改的应该也不少吧,感觉应该是增加新的状态而不是修改之前的状态