开发日志2024-04-10

开发日志2024/04/10

1、根据id修改表中的状态字段

开发思路:前台点击"发货"按钮以后,触发事件将此条数据的id作为参数传递给后端,后端写api来实现根据id来修改'发货字段'为'已发货'

代码实现:

  • 前端
js 复制代码
<el-button type="success" @click="fahuo(scope.row.id)"><i
                  class="el-icon-s-goods el-icon--right" />发货</el-button>
            </template> 
//创建发货的触发事件
    fahuo(fahuoInfo) {
      this.$confirm('确定要发货吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用后台接口,将发货字段修改为'已发货'
        this.$http({
          url: `orders/fahuo/${this.fahuoInfo}`,
          method: 'post',
        }).then(res => {
            console.log(res)
            console.log(res.data)
            console.log('发货成功');
          })
        console.log(fahuoInfo)
      }).catch(() => {
        console.log('取消发货');
      });
    },
  • 后端
java 复制代码
Controller.java
    @RequestMapping("/fahuo/{id}")
    public R fahuo(@PathVariable("id") Long id){
       //TODO 根据前端传过来的id来修改所对应的数据字段
        int num = ordersService.updateFaHuoById(id.toString());
        if (num != 0) {
            System.out.println("修改条数为:" + num);
        }
        return R.ok();
    }

---------------------
ServiceImpl.java
@Override
	public int updateFaHuoById(String id) {
		return baseMapper.updateFaHuoById(id);
	}    
--------------------------
 Dao.xml
<update id="updateFaHuoById">
		update orders set fahuostatus='已发货' where id=#{id}
	</update>

2、前端已发货订单页面修改操作---去除'发货'操作

**开发思路:**在前端Vue中的el-table中去除发货</el-button>按钮

代码实现

vue 复制代码
 <!-- <el-button type="success" @click="fahuo(scope.row.id)"><i
                  class="el-icon-s-goods el-icon--right" />发货</el-button> -->

3、分店已发货页面将'发货'操作修改为'收货'操作,并实现点击修改字段内容

**开发思路:**和上述删除'发货'按钮类似,将'发货'按钮修改为'收货'按钮,点击'收货'按钮以后,触发事件,同时将此条数据的id传给后台,后台写api,修改完成字段为'已完成'

代码实现:

  • 前端
js 复制代码
 <el-button type="primary" @click="shouhuo(scope.row.id)"><i
                  class="el-icon-s-shop el-icon--right" />收货</el-button>

--------
shouhuo(shouhuoInfo) {
      this.$confirm('确定要收货吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用后台接口,将
  //调用后台接口,将发货字段修改为'已发货'
  this.$http({
          url: `fendianordersfahuo/shouhuo/${shouhuoInfo}`,
          method: 'post',
        }).then(res => {
            console.log(res)
            console.log(res.data)
            console.log('收货成功');
          })
      }).catch(() => {
        console.log('取消收货');
      });
    },
  • 后端
java 复制代码
   /**
     * 后端收货按钮
     */
    @RequestMapping("/shouhuo/{id}")
    public R fahuo(@PathVariable("id") Long id){
        //TODO 根据前端传过来的id来修改所对应的数据字段
        int num = ordersService.updateShouHuoById(id.toString());
        if (num != 0) {
            System.out.println("修改条数为:" + num);
        }
        return R.ok();
    }
@Override
	public int updateShouHuoById(String id) {
		return baseMapper.updateShouHuoById(id);
	}
--------
<update id="updateShouHuoById">
		update orders set wanchengstatus='已完成' where id=#{id}
	</update>

4、修改侧边导航栏菜单中的显示


**开发思路:**将"普通用户年消费信息管理"中的涉及到饼状图的数据复制到"普通用户月消费信息管理"中,将"普通用户年消费信息管理"改为"普通用户消费管理",在menu.js文件中修改路径,其余同理实现

js 复制代码
[{"backMenu":[{"child":[{"buttons":["新增","查看","修改","删除"],"menu":"普通用户信息管理","menuJump":"列表","tableName":"putongyonghu"},{"buttons":["审核","查看","修改","删除"],"menu":"普通用户预约管理","menuJump":"列表","tableName":"yonghuyuyuexinxi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"普通用户月消费信息管理","menuJump":"列表","tableName":"yonghuyuexiaofeixinxi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"普通用户年消费信息","menuJump":"列表","tableName":"yonghunianxiaofeixinxi"}],"menu":"普通用户管理"},{"child":[{"buttons":["新增","查看","修改","删除"],"menu":"会员用户信息管理","menuJump":"列表","tableName":"huiyuan"},{"buttons":["查看","修改","删除","审核"],"menu":"会员用户预约管理","menuJump":"列表","tableName":"huiyuanyuyuexinxi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"会员用户月消费信息管理","menuJump":"列表","tableName":"huiyuanyuexiaofeixinxi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"会员用户年消费信息管理","menuJump":"列表","tableName":"huiyuannianxiaofeixinxi"}],"menu":"会员用户管理"},{"child":[{"buttons":["新增","查看","修改","删除"],"menu":"技师信息管理","menuJump":"列表","tableName":"jishi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"技师月业绩统计管理","menuJump":"列表","tableName":"jishiyueyejitongji"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"技师年业绩统计管理","menuJump":"列表","tableName":"jishinianyejitongji"}],"menu":"技师管理"},{"child":[{"buttons":["新增","查看","修改","删除"],"menu":"分店信息管理","menuJump":"列表","tableName":"qiantai"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"分店月业绩统计管理","menuJump":"列表","tableName":"qiantaiyueyejitongji"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"分店年业绩统计管理","menuJump":"列表","tableName":"qiantainianyejitongji"}],"menu":"分店管理"},{"child":[{"buttons":["新增","查看","修改","删除","报表"],"menu":"理疗用品管理","menuJump":"列表","tableName":"meirongyongpin"},{"buttons":["查看","修改","删除","月销量统计","年销量统计"],"menu":"理疗项目管理","menuJump":"列表","tableName":"meirongxiangmu"},{"buttons":["查看","修改","删除","报表"],"menu":"理疗项目月统计管理","menuJump":"列表","tableName":"meirongxiangmuyuetongji"},{"buttons":["查看","修改","删除","报表"],"menu":"理疗项目年统计管理","menuJump":"列表","tableName":"meirongxiangmuniantongji"}],"menu":"理疗用品管理"},{"child":[{"buttons":["新增","查看","修改","删除","报表"],"menu":"库存信息","menuJump":"列表","tableName":"kucunxinxi"}],"menu":"库存信息管理"},{"child":[{"buttons":["新增","查看","修改","删除"],"menu":"轮播图管理","tableName":"config"}],"menu":"系统管理"},{"child":[{"buttons":["查看","发货"],"menu":"已申请订单","tableName":"orders/已申请"},{"buttons":["查看","确认收货"],"menu":"已发货订单","tableName":"ordersFaHuo"},{"buttons":["查看"],"menu":"已完成订单","tableName":"ordersWanCheng"}],"menu":"分店用品出库订单管理"}],"frontMenu":[{"child":[{"buttons":["查看"],"menu":"理疗用品列表","menuJump":"列表","tableName":"meirongyongpin"}],"menu":"理疗用品模块"},{"child":[{"buttons":["查看","预约","会员用户预约","普通用户预约"],"menu":"理疗项目管理列表","menuJump":"列表","tableName":"meirongxiangmu"}],"menu":"理疗项目管理模块"}],"hasBackLogin":"是","hasBackRegister":"否","hasFrontLogin":"否","hasFrontRegister":"否","roleName":"管理员","tableName":"users"},{"backMenu":[{"child":[{"buttons":["查看"],"menu":"理疗用品管理","menuJump":"列表","tableName":"meirongyongpin"}],"menu":"理疗管理"},{"child":[{"buttons":["查看"],"menu":"理疗项目管理","menuJump":"列表","tableName":"meirongxiangmu"}],"menu":"理疗项目管理"},{"child":[{"buttons":["查看","新增","修改","删除"],"menu":"普通用户预约信息","menuJump":"列表","tableName":"yonghuyuyuexinxi"}],"menu":"普通用户预约管理"}],"frontMenu":[{"child":[{"buttons":["查看"],"menu":"理疗用品列表","menuJump":"列表","tableName":"meirongyongpin"}],"menu":"理疗用品模块"},{"child":[{"buttons":["查看","预约","会员用户预约","普通用户预约"],"menu":"理疗项目列表","menuJump":"列表","tableName":"meirongxiangmu"}],"menu":"理疗项目管理模块"}],"hasBackLogin":"否","hasBackRegister":"否","hasFrontLogin":"是","hasFrontRegister":"是","roleName":"普通用户","tableName":"putongyonghu"},{"backMenu":[{"child":[{"buttons":["查看"],"menu":"理疗用品管理","menuJump":"列表","tableName":"meirongyongpin"}],"menu":"理疗用品管理"},{"child":[{"buttons":["查看","预约"],"menu":"理疗项目管理","menuJump":"列表","tableName":"meirongxiangmu"}],"menu":"理疗项目管理"},{"child":[{"buttons":["查看"],"menu":"已申请订单","tableName":"orders/已申请"},{"buttons":["查看"],"menu":"已完成订单","tableName":"orders/已完成"}],"menu":"分店用品出库订单管理"}],"frontMenu":[{"child":[{"buttons":["查看"],"menu":"理疗用品列表","menuJump":"列表","tableName":"meirongyongpin"}],"menu":"理疗用品模块"},{"child":[{"buttons":["查看","预约","会员用户预约","普通用户预约"],"menu":"理疗项目管理列表","menuJump":"列表","tableName":"meirongxiangmu"}],"menu":"理疗项目管理模块"}],"hasBackLogin":"否","hasBackRegister":"否","hasFrontLogin":"是","hasFrontRegister":"是","roleName":"会员用户","tableName":"huiyuan"},{"backMenu":[{"child":[{"buttons":["审核","查看","修改","删除"],"menu":"普通用户预约管理","menuJump":"列表","tableName":"jishiyonghuyuyuexinxi"},{"buttons":["查看","修改","删除","审核"],"menu":"会员用户预约管理","menuJump":"列表","tableName":"jishihuiyuanyuyuexinxi"}],"menu":"我的预约"},{"child":[{"buttons":["新增","查看","修改","删除","报表"],"menu":"技师月业绩统计管理","menuJump":"列表","tableName":"yueyejitongji"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"技师年业绩统计管理","menuJump":"列表","tableName":"nianyejitongji"}],"menu":"我的业绩"}],"frontMenu":[{"child":[{"buttons":["查看"],"menu":"理疗用品列表","menuJump":"列表","tableName":"meirongyongpin"}],"menu":"理疗用品模块"},{"child":[{"buttons":["查看","预约","会员用户预约","普通用户预约"],"menu":"理疗项目管理列表","menuJump":"列表","tableName":"meirongxiangmu"}],"menu":"理疗项目管理模块"}],"hasBackLogin":"是","hasBackRegister":"否","hasFrontLogin":"否","hasFrontRegister":"否","roleName":"技师","tableName":"jishi"},{"backMenu":[{"child":[{"buttons":["新增","查看","修改","删除"],"menu":"普通用户信息管理","menuJump":"列表","tableName":"putongyonghu"},{"buttons":["审核","查看","修改","删除"],"menu":"普通用户预约管理","menuJump":"列表","tableName":"yonghuyuyuexinxi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"普通用户月消费信息管理","menuJump":"列表","tableName":"yonghuyuexiaofeixinxi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"普通用户年消费信息","menuJump":"列表","tableName":"yonghunianxiaofeixinxi"}],"menu":"普通用户管理"},{"child":[{"buttons":["新增","查看","修改","删除"],"menu":"会员用户信息管理","menuJump":"列表","tableName":"huiyuan"},{"buttons":["查看","修改","删除","审核"],"menu":"会员用户预约管理","menuJump":"列表","tableName":"huiyuanyuyuexinxi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"会员用户月消费信息管理","menuJump":"列表","tableName":"huiyuanyuexiaofeixinxi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"会员用户年消费信息管理","menuJump":"列表","tableName":"huiyuannianxiaofeixinxi"}],"menu":"会员用户管理"},{"child":[{"buttons":["新增","查看","修改","删除"],"menu":"技师信息管理","menuJump":"列表","tableName":"jishi"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"技师月业绩统计管理","menuJump":"列表","tableName":"jishiyueyejitongji"},{"buttons":["新增","查看","修改","删除","报表"],"menu":"技师年业绩统计管理","menuJump":"列表","tableName":"jishinianyejitongji"}],"menu":"技师管理"},{"child":[{"buttons":["新增","查看","修改","删除","报表"],"menu":"理疗用品管理","menuJump":"列表","tableName":"meirongyongpin"},{"buttons":["查看","修改","删除","月销量统计","年销量统计"],"menu":"理疗项目管理","menuJump":"列表","tableName":"meirongxiangmu"},{"buttons":["查看","修改","删除","报表"],"menu":"理疗项目月统计管理","menuJump":"列表","tableName":"meirongxiangmuyuetongji"},{"buttons":["查看","修改","删除","报表"],"menu":"理疗项目年统计管理","menuJump":"列表","tableName":"meirongxiangmuniantongji"}],"menu":"理疗用品管理"},{"child":[{"buttons":["新增","查看","修改","删除","报表"],"menu":"库存信息","menuJump":"列表","tableName":"fendiankucunxinxi"}],"menu":"库存信息管理"},{"child":[{"buttons":["查看","发货"],"menu":"已申请订单","tableName":"fendianordersshenqing"},{"buttons":["查看","确认收货"],"menu":"已发货订单","tableName":"fendianordersfahuo"},{"buttons":["查看"],"menu":"已完成订单","tableName":"fendianorderswancheng"}],"menu":"用品出库订单管理"}],"frontMenu":[{"child":[{"buttons":["查看"],"menu":"理疗用品列表","menuJump":"列表","tableName":"meirongyongpin"}],"menu":"理疗用品模块"},{"child":[{"buttons":["查看","预约","会员用户预约","普通用户预约"],"menu":"理疗项目管理列表","menuJump":"列表","tableName":"meirongxiangmu"}],"menu":"理疗项目管理模块"}],"hasBackLogin":"是","hasBackRegister":"否","hasFrontLogin":"否","hasFrontRegister":"否","roleName":"分店","tableName":"qiantai"}]

代码实现:

  • 前端
js 复制代码
  <div class="home">
    <el-row>
      <el-col :span="12"><div id="myChart" :style="{ width: '500px', height: '600px' }"></div></el-col>
      <el-col :span="12"> <div id="myChartNian" style="height: 500px; width: 600px;"></div></el-col>
    </el-row>
  </div>
--------------
 dataXiaoliang: [],
      dataNianXiaoliang: [],
 -----------------------
   mounted() {
    this.Draw();
    this.$http({
      url: 'yonghuyuexiaofeixinxi/xiaofei',
      method: 'get'
    }).then(res => {
      console.log(res.data)
      // 读取接口请求成功回传回来的数据
      var Yonghuyuexiaofeixinxis = res.data.Yonghuyuexiaofeixinxis
      // 定义数组,存放一会覆盖echarts图形的数据
      var data = []
      // 循环遍历数组,取出数据,转成和data一样的格式
      for (var i = 0; i < Yonghuyuexiaofeixinxis.length; i++) {
        var d = { name: '', value: 0 }
        d.name = Yonghuyuexiaofeixinxis[i].xingming
        d.value = Yonghuyuexiaofeixinxis[i].yuexiaofeie
        // 往data数组中添加数据
        data.push(d)
      }
      // 排序,b - a降序------a - b升序
      data.sort((a, b) => b.value - a.value)
      // 覆盖data(){}中全局变量的数据
      this.dataXiaoliang = data
      // 画出图形
      this.Draw()
    }).catch(err => {
      console.log(err)
      console.log("后台接口请求失败!")
    })
    this.DrawNian();
    //绘制年销量的图
    this.$http({
      url: 'yonghunianxiaofeixinxi/xiaofei',
      method: 'get'
    }).then(res => {
      console.log(res.data)
      // 读取接口请求成功回传回来的数据
      var Yonghunianxiaofeixins = res.data.Yonghunianxiaofeixins
      // 定义数组,存放一会覆盖echarts图形的数据
      var data = []
      console.log(Yonghunianxiaofeixins.length)
      // 循环遍历数组,取出数据,转成和data一样的格式
      for (var i = 0; i < Yonghunianxiaofeixins.length; i++) {
        var d = { name: '', value: 0 }
        d.name = Yonghunianxiaofeixins[i].xingming
        d.value = Yonghunianxiaofeixins[i].nianxiaofeie
        // 往data数组中添加数据
        data.push(d)
      }
      // 排序,b - a降序------a - b升序
      data.sort((a, b) => b.value - a.value)
      // 覆盖data(){}中全局变量的数据
      this.dataNianXiaoliang = data
      // 画出图形
      this.DrawNian()
    }).catch(err => {
      console.log(err)
      console.log("后台接口请求失败!")
    })
  },
 ----------------------
     //绘制饼状图
    Draw() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      // 绘制图表
      myChart.setOption({
        title: {
            text: '普通用户月销量统计(饼状图)',
            x: 'center'
          },
        // options配置项
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.dataXiaoliang
          }
        ]
      })
    },
    DrawNian() {
      // 基于准备好的dom,初始化echarts实例
      let myChartNian = this.$echarts.init(document.getElementById('myChartNian'))

      // 绘制图表
      myChartNian.setOption({
        title: {
            text: '普通用户年销量统计(饼状图)',
            x: 'center'
          },
        // options配置项
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '7%', //调整图例的位置
          left: 'center'
        },
        series: [
       
          {
            center: ['50%', '60%'], // 调整饼图位置
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.dataNianXiaoliang
          }
        ]
      })
    },
       }
            },
            labelLine: {
              show: false
            },
            data: this.dataNianXiaoliang
          }
        ]
      })
    },
相关推荐
燃先生._.3 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
黄油饼卷咖喱鸡就味增汤拌孜然羊肉炒饭3 小时前
SpringBoot如何实现缓存预热?
java·spring boot·spring·缓存·程序员
南宫生4 小时前
力扣-图论-17【算法学习day.67】
java·学习·算法·leetcode·图论
sanguine__4 小时前
Web APIs学习 (操作DOM BOM)
学习
冷眼看人间恩怨4 小时前
【Qt笔记】QDockWidget控件详解
c++·笔记·qt·qdockwidget
AskHarries6 小时前
Spring Cloud OpenFeign快速入门demo
spring boot·后端
数据的世界016 小时前
.NET开发人员学习书籍推荐
学习·.net
2401_857600956 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600956 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL6 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js