二手电子设备发货仓小程序开发,不同型号报价管理排序优化

文章目录

    二手电子设备发货仓小程序管理后台的报价管理,有个排序功能,但是变更排序时遇到了体验问题。没想到中秋节还没起床,就遇到了新需求。不过看起来确实很合理,有优化的必要。

    问题反馈

    编辑这个报价管理的时候,新增型号可以中间穿插吗?现在只能在最后一行新增。

    目前这里可以通过排序值来设置排序顺序。例如,如果想把新增的调到中间,可以把一些型号的这个排序值调大,把这个新增的排序值调到中间即可。

    那个想在中间穿插,可以直接穿插吗?这样改排序值有点太麻烦了。

    于是我想,是否可以增加一个在插入的按钮,点击后,选择在上方插入,还是下方插入。插入后,自动更新排序值。

    型号分组问题

    表格加载/保存时会按「型号」聚拢分组(同型号的行相邻、组内按排序值升序)。所以在某个型号的几行中间插入并填入一个全新型号名时,保存后该型号会整体落到这个型号组的后面(型号组不能被拆开)——插在两个型号组之间、或在同一型号内插新容量都不会出现该现象。既然新增的型号会整体落到这个型号组的后面,那我们就把这个型号组的排序值调大,把这个新增的型号组的排序值调到中间即可。

    实现结果

    已在后台「报价管理 → 编辑 → 型号规格」表格落地「按钮插入」:
    - 每行操作列新增「插入」下拉,可选择「在上方插入」「在下方插入」;只读态与编辑态均可使用,插入后新行自动进入编辑态。
    - 插入后按表格当前显示顺序整表重排排序值(步长 100,即 100/200/300…),不再需要手工调排序值。这个非常方便,步长 100 可以方便在同组型号下继续插入同型号产品
    - 底部「新增型号规格」按钮行为不变(追加到末尾,排序值取当前最大值 +100)。
    - 仅前端改动 frontend/src/pages/Quote/components/SkuForm.tsx,后端与报价列表页未改动。

    二手电子设备发货仓管理后台报价管理排序优化

    拖拽

    如果要支持拖拽,就更好了,但是用的是现成组件,不确定改动成本。
    先把按钮插入实现,再考虑拖拽。

    当前 pro-table 版本无内建拖拽,需额外引入拖拽库。我担心这个报价单过长,即便加入拖拽,操作体验也不一定好。