vue|仓管系统设计

登录功能: 要点:
登录界面已优化
vue|仓管系统设计
文章图片

输入账号密码后
this.$http.post('login', this.loginForm)
发送表单给后台,后台根据这个方法去数据库查询

getUserByMassage(user.getUsername(), user.getPassword());

vue|仓管系统设计
文章图片

数据库查询时还要加上state=1,即状态为激活才可以登录成功
登录成功后直接跳转home页面,将用户信息储存sessionStorage,后期路由导航要用到
vue|仓管系统设计
文章图片

vue|仓管系统设计
文章图片

如此朴素的home页面,后期可以稍作修改。
退出功能: 一个简单朴素的按钮
vue|仓管系统设计
文章图片

vue|仓管系统设计
文章图片

把sessionStorage清除然后跳转login页面
路由: 目前采用先import后使用,后期可以切换路由懒加载~
home作为主要路由嵌套各个页面的路径及页面。vue|仓管系统设计
文章图片

路由导航 vue|仓管系统设计
文章图片

不能没登录就访问改系统其他功能模块,所以前期登录加个sessionStorage来存储用户信息,全局的导航守卫保证用户已登录,不过这种方法可以升级为jwt。
home页面 主要分为3个部分
vue|仓管系统设计
文章图片

头部信息区。左侧导航区,右侧主体内容区,有待优化!
vue|仓管系统设计
文章图片

左侧的导航内容从数据库读取,采用一对多映射。嵌套数据分一级菜单和二级菜单
vue|仓管系统设计
文章图片

后台xml文件
SELECT mm.*,sm.id as sid ,sm.title as stitle,sm.path as spath FROM mainmenu mm ,submenu sm WHERE mm.id = sm.mid;

查询语句,有个缺点,就是二级菜单没有的时候不会显示一级菜单,而我后面有个分类嵌套商品也是模仿这个做的导致了很多问题,后面细说。
图标存储在前端动态获取
vue|仓管系统设计
文章图片

关于F5或刷新页面后,重定向的问题,将当前页面存入sessionStorage,在加载页面时候在取出完美解决这个问题
vue|仓管系统设计
文章图片

用户管理功能: 这个模块到时候要做权限控制,只允许超级管理员控制!!看要不要做角色列表,新增页面做角色分配,根据角色分配权限,考虑做吧。!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
vue|仓管系统设计
文章图片

vue|仓管系统设计
文章图片

包括
  • 新增用户功能(用户名不可修改)
  • 搜索用户功能(采用分页xml见上图2)
  • 修改用户功能(做得比较简单,还有要不要涉及权限的问题)
  • 删除用户功能
  • 编辑用户功能
  • 分配角色功能
  • 修改用户状态功能(state为0不可登录)
其他的没有遇到什么特别的困难
商品功能: 简述:大体分为两部分功能1商品列表2商品分类
vue|仓管系统设计
文章图片

1商品列表
用来展示商品信息,包括(新增,修改,删除,搜索)
其中修改和新增中的分类从数据库分类里获取,保证每个商品都对应一个分类
新增的商品中商品的名称从供应商能供应的货物(做数据剔除:已经存在的商品要剔除)中选择,新增商品其实就是一个进货的过程,由管理员输入数据。
新增商品中优化用户体验,可直接在此页面新增分类!
删除之前先判断订单中是否包含该商品,订单含有该商品不予删除
2分类
vue|仓管系统设计
文章图片

用来展示分类列表(包括新增,编辑,查询)和属于他的商品
新增注意新增id不可重复,作为分类id
vue|仓管系统设计
文章图片

编辑时,编辑一个分类时,如果这个分类下面有商品,那么这些商品的所属分类也要跟着改变。根据要修改的分类id获取原先的名称(作为查询条件),先去更改product表中商品的分类信息,再去修改分类表中的信息。
vue|仓管系统设计
文章图片

删除时,若一个分类下有商品,那么不予删除,先要求删除子分类
vue|仓管系统设计
文章图片

前面提到那个语句不能搜索出不包含商品的分类,那么要提供多一个接口,获取所有分类名字,给前端做对比,把没有的分类加进去展示(后端没有处理好,应该可以更简单一点)
供应商页面 和product页面几乎完全一样。地址选择换了级联选择器。
并且稍加处理提升用户体验。
供应商页面:供应商id,名称,地址,电话,可供应的商品(一种)。每一个销售单应该由一个供应商提供
供应商的商品可以随便填吧,相当于找供应商,那是可以随便的,但是商品管理中,你要添加商品,那必须先有供应商,不然哪里来的商品呢?商品页面的添加商品,相当于就是在进货的过程,从供应商获取的商品列表应该先做剔除,只允许添加还未添加的商品,存在两个一模一样的商品不合适。
【vue|仓管系统设计】首先要进货才能销售,待销售单的数量如果大于商品数量,那不可以销售成功,销售单由待销售单转化而成。
删除供应商时,如果商品库还存在该供应商提供的商品,那么会导致商品点击查找供应商失败,还会导致完成订单时,无法插入供应商信息。
客户管理页面 customer_id
customer_name
customer_phone
customer_gender(下拉列表,男或女)
customer_email
customer_vip(客户vip等级)会员:白银vip,黄金vip,钻石vip,黑金vip。根据会员积分决定,刚注册时,默认为普通vip。
积分制度(消费一元可以获得1积分,每一笔订单额外+100)
会员等级 所需积分 会员特权
普通vip 0 9.8折
白银vip 888 9.5折
黄金vip 2888 9折
钻石vip 5888 8.8折
黑金vip 8888 8折
customer_order 该客户的订单列表,直接吧销售订单归在他的子集?scope row按钮显示详情。暂时还没做。。到时候看怎么关联
和product页面几乎完全一样。
销售单管理,待销售订单管理 本系统由用户驱动~用户先下单(产生待销售单),这时候如果商品库中的商品满足客户需求(商品存在库存数量大于用户需求数量),这时候可以直接发货,等待订单完成即可。不满足,去进货(添加商品),商品不存在?就去找供应商!
销售单管理:
应该和商品列表差不多,可以查询各个销售单的记录字段包括:销售订单id,操办人(在销售订单点击销售完成后记录session里取),销售时间(管理员填入),和待销售订单应该有关联,待销售订单点击销售完成后,待销售订单变为销售订单,点击完成时要记录销售人是谁。
待销售订单管理:
注意:销售单里的商品数量不能超过product表里的number,订单中的商品应该只有一种,因为是仓库又不是购物!所以一个
字段:
字段 类型 说明
order_id string 订单编号,自动生成(主键),由时间+订单编号组成唯一订单编号
order_provider string (销售单)供应商名称,选择商品后自动带出(外键)不可编辑,根据商品自动去数据库搜索供应商并插入
order_admin1 string 经办人(管理员)名字,新增订单时从sessionStorage里取user名字(外键)(定死)
order_admin2 string 经办人(管理员)名字,完成订单时从sessionStorage里取user名字(外键)(销售单)(定死)
order_product string 订单商品,随便输入
order_number int 这里的产品不一定存在数据库中,所以可能导致无法自动计算出价格,那就由管理员手动输入订单金额(预估),后面,销售单里的产品肯定存在数据库,可以计算下成本价格,对比这里输入的金额来评估这份订单的盈利情况
order_price double 下单时由管理员输入,可供计算盈亏
order_time1 date 取下单时系统时间(定死)
order_time2 date 取完成订单系统时间(定死)(销售单)
order_remark string 订单备注。管理员输入
order_is_pay 1/0 标签形式展示,操作栏提供按钮给管理员操作,
order_is_sale 1/0 不展示给用户,用来区分是销售单还是待销售单
order_customer string 下单的客户,要多做一个客户表单,从customer表获取
表格操作栏: 1.已付款显示完成订单按钮,未付款显示确认付款按钮,按了之后对应字段的值更新为1(order_is_pay,order_is_sale)
2.确认收货。改变order_is_sale为1,然后就变成销售单了
总结 上面两个功能共用一张表order,根据order_is_sale字段判断他是销售单还是待销售单。两个表格要的数据好像差不多相同,只是各自展示不同字段
销售报表统计 销售报表统计:这个放到最后做。准备用echarts做。到时候看看数据怎么导合适
vue|仓管系统设计
文章图片

新增锁屏功能 新加一个vuex的使用。存储锁屏状态和锁屏密码,锁屏后不可以访问其他页面(登录除外),要么输入密码返回锁屏前的界面,要么退出返回登录界面,全局路由拦截,只有密码正确,再去更改vuex的lock字段为false。
点击锁屏触发
用户有输入密码则更新vuex里锁屏状态,然后进行锁屏。
vue|仓管系统设计
文章图片

vue|仓管系统设计
文章图片

vuex文件
vue|仓管系统设计
文章图片

锁屏页
用户退出要更新vuex和session的内容,解锁代码如下
vue|仓管系统设计
文章图片

最后加上路由导航
vue|仓管系统设计
文章图片

关联图 vue|仓管系统设计
文章图片

之前做的关联图,到时候可以根据具体情况修改
流程图 vue|仓管系统设计
文章图片

    推荐阅读