代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/element-lib/index.js"></script>
<link rel="stylesheet" href="js/element-lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
<style>
/* 表单控件 */
#search-box {
font-size: 15px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="app">
<el-container class="home-container">
<el-container class="box">
<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="toggle-button" @click="toggleCollapse">
<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
</div>
<!-- 导航栏 -->
<el-menu :default-active="menuActive" class="el-menu-vertical-demo" :collapse="isCollapse"
unique-opened>
<!-- 一级菜单 -->
<a :href="menu.permissionUrl" v-if="menu.children == null" v-for="menu in menuList"
:key="menu.id">
<el-menu-item :index="menu.id+''">
<i :class="menu.menuIcon"></i>
<span>{{menu.permissionName}}</span>
</el-menu-item>
</a>
<el-submenu v-if="menu.children != null" :index="menu.id+''" v-for="menu in menuList"
:key="menu.id">
<template slot="title">
<i :class="menu.menuIcon"></i>
<span slot="title">{{menu.permissionName}}</span>
</template>
<!-- 二级菜单 -->
<a :href="secondaryMenu.permissionUrl" v-for="secondaryMenu in menu.children"
:key="secondaryMenu.id">
<el-menu-item :index="secondaryMenu.id+''">
<i :class="secondaryMenu.menuIcon"></i>
<span>{{secondaryMenu.permissionName}}</span>
</el-menu-item>
</a>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div>
<img src="img/logo.png" class="log">
<span>紫罗兰后台管理系统</span>
</div>
<el-button type="danger" @click="logOff()">退出</el-button>
</el-header>
<el-main>
<div style="padding: 10px;width: 97%;height:90px;border: 1px solid rgb(223, 223, 239);">
<i class="el-icon-search" style="float: left;">筛选搜索</i>
<form style="float: right;">
<el-button type="primary" @click="getOrderInfoPagingList"
icon="el-icon-search">搜索</el-button>
<el-button @click="Reset()">重置</el-button>
</form>
<form id="search-box">
订单状态：
<el-select v-model="orderInfoState" placeholder="选择订单状态" style="width: 140px;">
<el-option label="所有"></el-option>
<el-option label="1" value=1></el-option>
<el-option label="2" value=2></el-option>
<el-option label="3" value=3></el-option>
</el-select>
订单号：
<el-input style="width: 140px;" v-model="orderInfoNumber" placeholder="请输入订单编号"
clearable></el-input>
用户名称:
<el-input style="width: 140px;" v-model="userInfoName" placeholder="请输入用户名称"
clearable></el-input>
加盟店名称:
<el-input style="width: 150px;" v-model="franchiseStoresName" placeholder="请输入加盟店名称"
clearable></el-input>
创建时间：
<el-date-picker type="date" v-model="orderInfoAddTime" value-format="yyyy-MM-dd"
placeholder="选择日期"></el-date-picker>
</form>
</div>
<el-table :data="orderInfoData" stripe style="width: 100%">
<el-table-column prop="id" label="编号" width="150" align="center">
</el-table-column>
<el-table-column prop="orderInfoNumber" label="订单号" width="150" align="center">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>订单备注: {{ scope.row.orderInfoNote }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.orderInfoNumber }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="userInfoName" label="用户名" width="150" align="center">
</el-table-column>
<el-table-column prop="franchiseStoresName" label="加盟店" width="150" align="center">
</el-table-column>
<el-table-column prop="orderInfoState" label="订单状态" width="150" align="center">
</el-table-column>
<el-table-column prop="paymentMethod" label="支付方式" width="150" align="center">
</el-table-column>
<el-table-column prop="orderInfoAddTime" label="创建时间" width="150" align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" width="150" align="center">
<template slot-scope="scope">
<el-row style="text-align: center;">
<el-col>
<el-link type="primary">编辑</el-link>
<el-link type="primary">删除</el-link>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer>
<div style="float: left;">
<el-button type="primary">批量删除</el-button>
</div>
<div class="block" style="float: right;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="pageNo" :page-sizes="pageSizes" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
</el-pagination>
</div>
</el-footer>
</el-container>
</el-container>
</el-container>
</div>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
isCollapse: false,
menuList: [],
menuActive: 0,
orderInfoData: [],
pageNo: 1,
pageSize: 5,
pageSizes: [5, 10, 15],
totalCount: 1,
orderInfoState: undefined,
orderInfoNumber: "",
userInfoName: "",
franchiseStoresName: "",
orderInfoAddTime: ""
}
}, created() {
this.getMenuList();
this.getMenuIdByUrl();
this.getOrderInfoPagingList(this.pageNo, this.pageSize);
}, methods: {
logOff() {
localStorage.removeItem('nfLoginJwt');
location.href = "login.html"
},
toggleCollapse() {
vm.isCollapse = !vm.isCollapse
},
getMenuList() {
axios({
url: "/menu/get/menu/by/jwt",
method: "GET",
}).then(function (resp) {
if (resp.data.code == 200) {
vm.menuList = resp.data.data
}
})
}, getMenuIdByUrl() {
var strUrl = location.href;
var arrUrl = strUrl.split("/");
var strPage = arrUrl[arrUrl.length - 1];
axios({
url: "/menu/get/menu/id/by/url",
method: "GET",
params: { url: strPage }
}).then(function (resp) {
if (resp.data.code == 200) {
vm.menuActive = resp.data.data
}
})
},
getOrderInfoPagingList() {
axios({
method: "GET",
url: "/order/info/paging/query",
params: {
pageNo: this.pageNo,
pageSize: this.pageSize,
orderInfoState: this.orderInfoState == "" ? this.orderInfoState = undefined : this.orderInfoState,
orderInfoNumber: this.orderInfoNumber,
userInfoName: this.userInfoName,
franchiseStoresName: this.franchiseStoresName,
orderInfoAddTime: this.orderInfoAddTime
}
}).then(resp => {
console.log(resp);
this.orderInfoData = resp.data.data.list
this.totalCount = resp.data.data.count
})
},
handleSizeChange(size) {
this.pageSize = size
this.getOrderInfoPagingList()
this.pageNo = 1
},
handleCurrentChange(no) {
this.pageNo = no
this.getOrderInfoPagingList()
},
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
