开发日志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
          }
        ]
      })
    },
相关推荐
努力变厉害的小超超35 分钟前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙
秃头佛爷37 分钟前
Python学习大纲总结及注意事项
开发语言·python·学习
阿伟*rui37 分钟前
配置管理，雪崩问题分析，sentinel的使用
java·spring boot·sentinel
paopaokaka_luck3 小时前
【360】基于springboot的志愿服务管理系统
java·spring boot·后端·spring·毕业设计
dayouziei3 小时前
java的类加载机制的学习
java·学习
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
Yaml45 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
小小小妮子~5 小时前
Spring Boot详解：从入门到精通
java·spring boot·后端
hong1616885 小时前
Spring Boot中实现多数据源连接和切换的方案
java·spring boot·后端
aloha_7895 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play