开发日志2024-04-10

作者：Gausst松鼠会 | 2024-04-17 23:10:44

踩

开发日志2024-04-10

开发日志2024/04/10

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

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

代码实现：

前端

<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('取消发货');
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

后端

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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

代码实现：

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

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

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

代码实现：

前端

 <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('取消收货');
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

后端

   /**
     * 后端收货按钮
     */
    @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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

**开发思路：**将"普通用户年消费信息管理"中的涉及到饼状图的数据复制到"普通用户月消费信息管理"中，将"普通用户年消费信息管理"改为"普通用户消费管理",在menu.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"}]
1

代码实现：

前端

  <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/442761