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

陟上晴明
  • 1.3k

最近有一些关于项目的一些预设状态的管理,
比如说订单状态,可能有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>

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

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

回复
阅读 1.6k
6 个回答

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

不过有几点:

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

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

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

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循环渲染

简单点,
`const status = {

0: '已创建',
1: '申请中',
2: '通过审核',
...

}`
然后在渲染的时候

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

这个谁来写他也是枚举

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏