开发日志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
          }
        ]
      })
    },
相关推荐
ytttr87335 分钟前
matlab通过Q学习算法解决房间路径规划问题
学习·算法·matlab
大只鹅36 分钟前
Springboot3整合ehcache3缓存--XML配置和编程式配置
spring boot·缓存
老家的回忆1 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus，亲测30多页，20s实现
前端·vue.js·pdf·html2canvas·jspdf
执笔诉情殇〆2 小时前
springboot集成达梦数据库，取消MySQL数据库，解决问题和冲突
数据库·spring boot·mysql·达梦
寻丶幽风2 小时前
论文阅读笔记——NoPoSplat
论文阅读·笔记·三维重建·3dgs·相机位姿·dustr
hdsoft_huge2 小时前
Spring Boot 高并发框架实现方案：数字城市的奇妙之旅
java·spring boot·后端
hackchen2 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949702 小时前
Vue响应式原理推导过程
vue.js·响应式设计
gjh12083 小时前
Easy-excel监听器中对批量上传的工单做错误收集
java·spring boot
pe7er4 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
热门推荐
01手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！02如何将markdown生成pdf03Coze扣子平台完整体验和实践（附国内和国际版对比）04Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面05鸽了六年的某大厂面试题：你会手写一个模板引擎吗？06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07C#调用WechatOCR.exe实现本地OCR文字识别08《C#图解教程 第5版》深度推荐09DeepSeek各版本说明与优缺点分析10华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南