1.订单管理模块
1.1创建order子分支添加路由规则
创建order子分支并推送到码云
创建order子分支: git checkout -b order
将order分支推送到码云： git push -u origin order
1.2初始化
//在components中新建order文件夹，新建Order.vue组件，组件中添加代码如下
<template>
<div>
<h3>订单列表</h3>
<!-- 面包屑导航 -->
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>订单管理</el-breadcrumb-item>
<el-breadcrumb-item>订单列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card>
<!-- 搜索栏 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
<el-button slot="append" icon="el-icon-search" ></el-button>
</el-input>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
//查询条件
queryInfo:{
query:'',
pagenum:1,
pagesize:10
}
}
},
created() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
1.3实现数据展示及分页
<!-- 卡片视图区域 -->
<el-card>
<!-- 搜索栏 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
</el-row>
<!-- 订单表格 -->
<el-table :data="orderList" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="订单编号" prop="order_number"></el-table-column>
<el-table-column label="订单价格" prop="order_price"></el-table-column>
<el-table-column label="是否付款" prop="pay_status">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
<el-tag type="danger" v-else>未付款</el-tag>
</template>
</el-table-column>
<el-table-column label="是否发货" prop="is_send"></el-table-column>
<el-table-column label="下单时间" prop="create_time">
<template slot-scope="scope">
{{scope.row.create_time | dateFormat}}
</template>
</el-table-column>
<el-table-column label="操作" width="125px">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
<el-button size="mini" type="success" icon="el-icon-location"></el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[3, 5, 10, 15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</el-card>
<script>
export default {
data() {
return {
//查询条件
queryInfo: {
query: '',
pagenum: 1,
pagesize: 10
},
//订单列表数据
orderList: [],
//数据总条数
total: 0
}
},
created() {
this.getOrderList()
},
methods: {
async getOrderList() {
const { data: res } = await this.$http.get('orders', {
params: this.queryInfo
})
if (res.meta.status !== 200) {
return this.$message.error('获取订单列表数据失败!')
}
this.total = res.data.total
this.orderList = res.data.goods
},
handleSizeChange(newSize){
this.queryInfo.pagesize = newSize
this.getOrderList()
},
handleCurrentChange(newPage){
this.queryInfo.pagenum = newPage
this.getOrderList()
}
}
}
</script>
1.4制作省市区县联动
省市级联的数据是下载好的放到和order.vue同一个文件夹下，然后导入citydata.js文件
<script>
import cityData from "./citydata.js"
</script>
//给修改地址按钮添加点击事件
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditAddress"></el-button>
//添加修改地址对话框,在卡片视图下方添加
<!-- 修改地址对话框 -->
<el-dialog title="修改收货地址" :visible.sync="addressVisible" width="50%" @close="addressDialogClosed">
<!-- 添加表单 -->
<el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
<el-form-item label="省市区县" prop="address1">
<el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
</el-form-item>
<el-form-item label="详细地址" prop="address2">
<el-input v-model="addressForm.address2"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addressVisible = false">取 消</el-button>
<el-button type="primary" @click="addressVisible = false">确 定</el-button>
</span>
</el-dialog>
//js部分的代码
<script>
import cityData from "./citydata.js"
export default {
data() {
return {
......
//控制修改地址对话框的显示和隐藏
addressVisible:false,
//修改收货地址的表单
addressForm:{
address1:[],
address2:''
},
addressFormRules:{
address1:[{ required: true, message: '请选择省市区县', trigger: 'blur' }],
address2:[{ required: true, message: '请输入详细地址', trigger: 'blur' }],
},
//将导入的cityData数据保存起来
cityData:cityData
}
},methods: {
......
showEditAddress() {
//当用户点击修改收货地址按钮时触发
this.addressVisible = true;
},
addressDialogClosed(){
this.$refs.addressFormRef.resetFields()
}
}
}
</script>
<style lang="less" scoped>
.el-cascader{
width: 100%;
}
</style>
1.5物流进度
因为我们使用的是element-ui中提供的Timeline组件，所以需要导入并注册组件
打开element.js,进行对应的注册
打开Order.vue文件，添加代码实现物流进度对话框
<!-- 物流信息进度对话框 -->
<el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
<!-- 时间线组件 -->
<el-timeline>
<el-timeline-item v-for="(activity, index) in progressInfo"
:key="index" :timestamp="activity.time">
{{activity.context}}
</el-timeline-item>
</el-timeline>
</el-dialog>
<script>
import cityData from './citydata.js'
export default {
data() {
return {
......
//控制物流进度对话框的显示和隐藏
progressVisible: false,
//保存物流信息
progressInfo: []
}
},methods: {
......
async showProgress() {
//发送请求获取物流数据
const { data: res } = await this.$http.get('/kuaidi/804909574412544580')
if (res.meta.status !== 200) {
return this.$message.error('获取物流进度失败!')
}
this.progressInfo = res.data
//显示对话框
this.progressVisible = true
}
}
}
</script>
1.6推送代码
将order分支代码推送至码云
将代码添加到暂存区： git add .
将代码提交到本地仓库： git commit -m "完成订单列表功能开发"
将代码推送到码云： git push
切换到master主分支： git checkout master
将goods_list分支代码合并到master: git merge order
将master推送到码云： git push
1.7完整的代码和效果图
<template>
<div>
<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>订单管理</el-breadcrumb-item>
<el-breadcrumb-item>订单列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片式图区 -->
<el-card>
<el-row>
<el-col :span="8">
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getOrderList">
<el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button >
</el-input>
</el-col>
</el-row>
<!-- 订单列表数据 -->
<el-table :data="orderList" border stripe>
<el-table-column type="index" label="#"></el-table-column>
<el-table-column label="订单编号" prop="order_number"></el-table-column>
<el-table-column label="订单价格" prop="order_price"></el-table-column>
<el-table-column label="是否付款" prop="pay_status">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.pay_status==='1'">已付款</el-tag>
<el-tag type="danger" v-else>未付款</el-tag>
</template>
</el-table-column>
<el-table-column label="是否发货" prop="is_send"></el-table-column>
<el-table-column label="下单的时间" prop="create_time">
<template slot-scope="scope">
{{scope.row.create_time|dateFormat}}
</template>
</el-table-column>
<el-table-column label="操作" >
<template>
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showBox"></el-button>
<el-button size="mini" type="success" icon="el-icon-location" @click="showProgressBox"></el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
<!-- 修改地址的对话框 -->
<el-dialog title="修改地址" :visible.sync="addressDialogVisible" width="50%" @close="addressDialogClosed">
<!-- 内容主体区域 -->
<el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
<el-form-item label="省市区/县" prop="address1">
<el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
</el-form-item>
<el-form-item label="详细地址" prop="address2">
<el-input v-model="addressForm.address2"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addressDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editAddress">确 定</el-button>
</span>
</el-dialog>
<!-- 展示物流进度的对话框 -->
<el-dialog title="物流进度" :visible.sync="progressVisible" width="50%" @close="progressDialogClosed">
<!-- 内容主体区域 -->
<!-- 时间线 -->
<el-timeline >
<el-timeline-item
v-for="(activity, index) in progressInfo"
:key="index"
:timestamp="activity.time">
{{activity.context}}
</el-timeline-item>
</el-timeline>
</el-dialog>
</div>
</template>
<script>
import cityData from './citydata.js'
export default{
data(){
return{
queryInfo:{
query:'',
pagenum:1,
pagesize:10
},
total:0,
orderList:[],
addressDialogVisible:false,
addressForm:{
address1:[],
address2:''
},
addressFormRules:{
address1:[
{
required:true,message:'请选择省市区县',trigger:'blur'
}
],
address2:[
{required:true,message:'请填写详细地址',trigger:'blur'}
]
},
cityData,
progressVisible:false,
//物流信息
progressInfo:[]
}
},
created(){
this.getOrderList()
},
methods:{
async getOrderList(){
console.log(this.queryInfo.query)
const {data:res}=await this.$http.get('orders',{params:this.queryInfo})
if(res.meta.status!==200){
return this.$message.error('获取订单列表失败')
}
//console.log(res.data)
this.total=res.data.total
this.orderList=res.data.goods
},
handleSizeChange(newSize){
this.queryInfo.pagesize=newSize
this.getOrderList()
},
handleCurrentChange(newPage){
this.queryInfo.pagenum=newPage
this.getOrderList()
},
//展示修改地址的对话框
showBox(){
this.addressDialogVisible=true
},
addressDialogClosed(){
this.$refs.addressFormRef.resetFields()
},
editAddress(){
//未完成
this.addressDialogVisible=false
},
async showProgressBox(){
const {data:res}=await this.$http.get('/kuaidi/1106975712662')
if(res.meta.status!==200){
return this.$message.error('获取物流信息失败')
}
this.progressInfo=res.data
this.progressVisible=true
console.log(this.progressInfo)
},
progressDialogClosed(){
this.progressInfo=[]
}
}
}
</script>
<style lang="less" scoped>
@import '../../plugins/timeline/timeline.css';
@import '../../plugins/timeline-item/timeline-item.css';
.el-cascader{
width: 100%;
}
</style>
2.数据统计模块
2.1新建Report.vue组件和初始化
//在components中新建report文件夹，新建Report.vue组件,记得添加路由规则
初始化
<template>
<div>
<h3>数据报表</h3>
<!-- 面包屑导航 -->
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>数据统计</el-breadcrumb-item>
<el-breadcrumb-item>数据报表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card></el-card>
</div>
</template>
<script>
export default {
data() {
return {
}
},created(){
},methods:{
}
}
</script>
<style lang="less" scoped>
</style>
2.2导入ECharts并使用
在这里就直接放出完整的代码了
<template>
<div>
<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>数据统计</el-breadcrumb-item>
<el-breadcrumb-item>数据报表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 800px;height:400px;"></div>
</el-card>
</div>
</template>
<script>
//导入echarts
import echarts from 'echarts'
import _ from 'lodash'
export default{
data(){
return{
//需要合并的数据
options: {
title: {
text: '用户来源'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#E9EEF3'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
boundaryGap: false
}
],
yAxis: [
{
type: 'value'
}
]
}
}
},
created(){
},
async mounted(){
//此时页面上的元素已经被渲染完毕了
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
const {data:res}=await this.$http.get('reports/type/1')
if(res.meta.status!==200){
return this.$message.error('获取折线图数据失败！')
}
// 准备数据和配置项
// 指定图表的配置项和数据
const result=_.merge(res.data,this.options)
// 展示数据
myChart.setOption(result)
},
methods:{
}
}
</script>
<style lang="less" scoped>
</style>
2.3推送代码
推送report分支到码云
将代码添加到暂存区： git add .
将代码提交到本地仓库： git commit -m “完成数据报表功能开发”
将代码推送到码云： git push
切换到master主分支： git checkout master
将report分支代码合并到master: git merge report
将master推送到码云： git push
2.4效果图
到这里项目基本上写完了，但是还是有很多不足，所以接下来我们需要进行优化，持续更新哦！！！！
转载：https://blog.csdn.net/qq_42147171/article/details/106130368
查看评论