开发日志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('取消发货');
});
},
- 后端
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>按钮
代码实现：
<!-- <el-button type="success" @click="fahuo(scope.row.id)"><i
class="el-icon-s-goods el-icon--right" />发货</el-button> -->
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('取消收货');
});
},
- 后端
/**
* 后端收货按钮
*/
@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文件中修改路径，其余同理实现
[{"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"}]
代码实现：
- 前端
<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
}
]
})
},
