代码拉取完成，页面将自动刷新
<!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>
.el-form-item {
width: 200px;
}
</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>
<!-- logo -->
<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" icon="el-icon-search"
@click="getProductPagingList">搜索</el-button>
<el-button @click="Reset()">重置</el-button>
</form>
<form id="search-box">
商品状态：
<el-select v-model="grounding" placeholder="选择商品状态">
<el-option label="所有"></el-option>
<el-option label="已上架" value=true></el-option>
<el-option label="已下架" value=false></el-option>
</el-select>
商品编号：
<el-input style="width: 150px;" v-model="id" placeholder="请输入商品编号" clearable></el-input>
商品名称:
<el-input style="width: 150px;" v-model="productName" placeholder="请输入商品名称"
clearable></el-input>
商品类型：
<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync"
placeholder="请输入内容" @select="handleSelect">
</el-autocomplete>
</form>
</div>
<!-- 数据列表 -->
<el-table :data="productData" stripe style="width: 100%">
<!-- 复选框 -->
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="id" label="产品编号" width="77" align="center">
</el-table-column>
<el-table-column prop="productName" label="产品名称" width="130" align="center">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>教程: {{ scope.row.productTutorial }}</p>
<p>描述: {{ scope.row.productDescription }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.productName }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="productPrice" label="产品价格" width="100" align="center">
</el-table-column>
<el-table-column prop="productImg" label="产品图片" width="120" align="center">
<template slot-scope="scope">
<el-image style="width: 100px; height: 100px"
:src="downloadImg(scope.row.productImg)" :fit="fit"></el-image>
</template>
</el-table-column>
<el-table-column prop="productTypeName" label="产品类型" width="100" align="center">
</el-table-column>
<el-table-column prop="productAddTime" label="上架时间" width="120" align="center">
</el-table-column>
<el-table-column prop="productHits" label="点击量" width="120" align="center">
</el-table-column>
<el-table-column prop="grounding" label="是否上架" width="120" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.grounding" active-color="#13ce66"
inactive-color="#ff4949" :active-value="true" :inactive-value="false"
@change="updateGroundingById(scope.row.id,scope.row.grounding)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-row style="text-align: center;">
<el-col>
<el-link type="primary" @click="openUpdateDiaLog(scope.row)">编辑</el-link>
<el-popconfirm title="确定删除吗？" @confirm="deleteById(scope.row.id)">
<el-link slot="reference" type="primary">删除</el-link>
</el-popconfirm>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer>
<!-- 批量操作 -->
<div style="float: left;">
<el-button type="primary">批量删除</el-button>
<el-button type="primary" @click="dialogVisible = true">添加数据</el-button>
</div>
<!-- 添加数据对话框 -->
<el-dialog title="添加" :visible.sync="dialogVisible" width="55%"
:before-close="closeInsertDiaLog">
<el-form :inline="true" :model="insertdemo" class="demo-form-inline">
<el-form-item label="产品名称：">
<el-input v-model="insertdemo.productName" placeholder="产品名"></el-input>
</el-form-item>
<el-form-item label="产品价格：">
<el-input v-model="insertdemo.productPrice" placeholder="产品价格"></el-input>
</el-form-item>
<el-form-item label="商品状态：">
<el-select v-model="insertdemo.grounding" placeholder="活动区域">
<el-option label="上架" value="true"></el-option>
<el-option label="下架" value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item label="商品类型：">
<el-autocomplete v-model="insertdemo.productTypeName"
:fetch-suggestions="querySearchAsync" placeholder="请输入内容"
@select="handleSelect">
</el-autocomplete>
</el-form-item>
<el-form-item label="制作教程：">
<el-input v-model="insertdemo.productTutorial" type="textarea"
placeholder="产品制作教程"></el-input>
</el-form-item>
<el-form-item label="产品描述：">
<el-input v-model="insertdemo.productDescription" type="textarea"
placeholder="产品描述"></el-input>
</el-form-item>
<el-form-item>
<el-upload class="upload-demo" ref="insertUpload"
action="http://localhost:8080/admin/admin/product/insert" :file-list="fileList"
:auto-upload="false" limit="1" :data="insertdemo" :on-success="insertSuccess"
:on-error="insertError" :on-change="fileChange" :on-remove="fileRemove">
产品图片：<el-button size="small" type="primary">选取图片</el-button>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeInsertDiaLog">取 消</el-button>
<el-button type="primary" @click="insertProduct">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑数据对话框 -->
<el-dialog title="编辑" :visible.sync="dialogVisible2" width="60%"
:before-close="closeUpdateDiaLog">
<el-form :inline="true" :model="updateDemo" class="demo-form-inline">
<el-form-item label="产品名称">
<el-input v-model="updateDemo.productName" placeholder="产品名"></el-input>
</el-form-item>
<el-form-item label="产品价格">
<el-input v-model="updateDemo.productPrice" placeholder="产品价格"></el-input>
</el-form-item>
<el-form-item label="商品状态">
<el-select v-model="updateDemo.grounding" placeholder="活动区域">
<el-option label="上架" value="true"></el-option>
<el-option label="下架" value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item label="商品类型：">
<el-autocomplete v-model="updateDemo.productTypeName"
:fetch-suggestions="querySearchAsync" placeholder="请输入内容"
@select="handleSelect">
</el-autocomplete>
</el-form-item>
<el-form-item label="点击量">
<el-input v-model="updateDemo.productHits" placeholder="点击量"></el-input>
</el-form-item>
<el-form-item label="产品制作教程">
<el-input v-model="updateDemo.productTutorial" type="textarea"
placeholder="产品制作教程"></el-input>
</el-form-item>
<el-form-item label="产品描述">
<el-input v-model="updateDemo.productDescription" type="textarea"
placeholder="产品描述"></el-input>
</el-form-item>
<el-form-item label="产品图片">
<el-upload class="upload-demo" ref="updateUpload"
action="http://localhost:8080/product/update" :file-list="fileList"
:auto-upload="false" limit="1" :data="updateDemo" :on-success="updateSuccess"
:on-change="fileChange" :on-remove="fileRemove">
产品图片：<el-button size="small" type="primary">选取图片</el-button>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeUpdateDiaLog">取 消</el-button>
<el-button type="primary" @click="updateProduct">确 定</el-button>
</span>
</el-dialog>
<!-- 分页 -->
<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>
</div>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
isCollapse: false,
menuList: [],
productData: [],
pageNo: 1,
totalCount: 1,
pageSizes: [8, 16, 24],
pageSize: 8,
menuActive: 0,
restaurants: [],
timeout: null,
productTypeName: '',
grounding: undefined,
id: this.id == "" ? this.id = undefined : this.id,
productName: "",
//添加数据对话框是否展示的标记
dialogVisible: false,
//编辑数据对话框是否展示的标记
dialogVisible2: false,
state: "",
fileList: [],
//添加表单
insertdemo: {
productName: '',
productPrice: '',
grounding: '',
productTutorial: '',
productDescription: '',
productTypeId: '',
productTypeName: '',
},
//编辑表单
updateDemo: {
productName: '',
productPrice: '',
productImg: '',
grounding: '',
productTutorial: '',
productDescription: '',
productTypeId: '',
productTypeName: '',
productCreateTime: '',
productHits: ''
}
}
}, created() {
this.getMenuList();
this.getMenuIdByUrl();
this.getProductPagingList()
this.getProductTypeList()
}, 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
}
})
},
getProductPagingList() {
axios({
method: "GET",
url: "/product/paging/query",
params: {
pageNo: this.pageNo,
pageSize: this.pageSize,
grounding: this.grounding,
id: this.id,
productName: this.productName,
productTypeName: this.state
}
}).then(resp => {
console.log(resp);
this.productData = resp.data.data.list
this.totalCount = resp.data.data.count
})
},
handleSizeChange(size) {
this.pageSize = size
this.getProductPagingList()
this.pageNo = 1
},
handleCurrentChange(no) {
this.pageNo = no
this.getProductPagingList()
},
querySearchAsync(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 1000 * Math.random());
},
createStateFilter(queryString) {
return (productType) => {
return (productType.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
vm.insertdemo.productTypeId = item.id
vm.updateDemo.productTypeId = item.id
},
getProductTypeList() {
axios.get("/product/type/query").then(resp => {
this.restaurants = resp.data.data
})
},//状态
updateGroundingById(id, grounding) {
axios({
method: "POST",
url: "/product/update/grounding/by/id",
params: {
id: id,
grounding: grounding
}
})
}, insertProduct() {
if (this.fileList.length == 0) {
this.$message.warning('请先上传图片');
return
}
this.$refs.insertUpload.submit();
}, downloadImg(img) {
var url = "http://localhost:8080/admin/file/download?filename="
return url + img
}, insertSuccess() {
vm.insertdemo = {};
vm.getProductPagingList();
vm.dialogVisible = false;
this.$message({
message: '数据添加成功',
type: 'success'
});
}, updateSuccess() {
vm.updateDemo = {};
vm.getProductPagingList();
vm.dialogVisible2 = false;
this.$message({
message: '数据修改成功',
type: 'success'
});
}, insertError() {
this.$message.error('数据添加失败');
}, fileChange(file, fileList) {
this.fileList = fileList
}, fileRemove(file, fileList) {
this.fileList = fileList
}, closeInsertDiaLog() {
this.insertdemo = {};
this.fileList = []
this.dialogVisible = false
}, closeUpdateDiaLog() {
this.updateDemo = {};
this.fileList = []
this.dialogVisible2 = false
}, deleteById(id) {
axios({
url: "/product/delete",
methods: "GET",
params: {
id: id
}
}).then(resp => {
if (resp.data.code == 200) {
this.$message({
message: '删除成功',
type: 'success'
});
this.getProductPagingList(this.pageNo, this.pageSize)
}
})
}, openUpdateDiaLog(product) {
vm.updateDemo = JSON.parse(JSON.stringify(product));
vm.dialogVisible2 = true
}, updateProduct() {
this.$refs.updateUpload.submit();
}
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
