开发日志2024-04-10

卷Java2024-04-11 15: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
          }
        ]
      })
    },
相关推荐
嵌入式小企鹅1 小时前
CPU供需趋紧、DeepSeek V4全链适配、小米开源万亿模型
人工智能·学习·开源·嵌入式·小米·算力·昇腾
三品吉他手会点灯6 小时前
C语言学习笔记 - 20.C编程预备计算机专业知识 - 变量为什么必须的初始化【重点】
c语言·笔记·学习
kobesdu6 小时前
【ROS2实战笔记-12】rosshow：终端里的盲文可视化与无头机器人的现场调试
笔记·机器人·ros·移动机器人
Java开发的小李6 小时前
SpringBoot + Redis 实现分布式 Session 共享（解决多实例登录状态丢失问题）
spring boot·redis·分布式
sakiko_7 小时前
UIKit学习笔记1-创建项目(使用UIKit)、使用组件
笔记·学习
生信碱移7 小时前
PACells：这个方法可以鉴定疾病/预后相关的重要细胞亚群，作者提供的代码流程可以学习起来了，甚至兼容转录组与 ATAC 两种数据类型！
人工智能·学习·算法·机器学习·数据挖掘·数据分析·r语言
智者知已应修善业7 小时前
【51单片机中的打飞机设计】2023-8-25
c++·经验分享·笔记·算法·51单片机
星幻元宇VR9 小时前
VR航空航天科普设备【VR时空直升机】
科技·学习·安全·生活·vr
_李小白9 小时前
【android opencv学习笔记】Day 2: Mat类（图片数据结构体）
android·opencv·学习
智者知已应修善业10 小时前
【51单片机按键调节占空比3位数码管显示】2023-8-24
c++·经验分享·笔记·算法·51单片机
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03近期有什么ai的新消息，新动态？ 2026.4月042026年4月AI大事件深度解读：大模型竞争进入“深水区“052026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot06【AI】2026 年具身智能模型和世界模型总结07在Windows 11上安装Docker的踩坑记录08实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲09裂开！ChatGPT 居然开始要手机号验证，附详细解决方法10VSCode + Copilot下：配置并使用 DeepSeek