三十三、出入库管理
Header.vue导一下,RecordController加一个
java
//将入库数据和原有数据相加吧
//新增
@PostMapping("/save")
public Result save(@RequestBody Record record) {
return recordService.save(record) ? Result.success() : Result.fail();
}GoodsManage.vue
java
<template>
<div>
<div style="margin-left:5px">
<el-input v-model="name" placeholder="请输入物品名:" suffix-icon="el-icon-search" style="width:200px;"
@keyup.enter.native="loadPost"></el-input>
<el-select v-model="storage" placehoLder="请选择仓库" style="margin-left: 5px;">
<el-option
v-for="item in storageData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="goodstype" placeholder="请选择分类" style="margin-left: 5px;">
<el-option
v-for="item in goodstypeData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-button type="primary" style="margin-left:5px" @click="loadPost">查询</el-button>
<el-button type="success" @click="resetParam">重置</el-button>
<el-button type="primary" style="margin-left:5px" @click="add">新增</el-button>
<el-button type="success" style="margin-left:5px;" @click="inGoods">重置</el-button>
</div>
<el-table :data="tableData"
:header-cell-style="{background:'#f2f5fc',color:'#555'}"
border
highlight-current-row
@current-change="selectCurrentChange"
>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="name" label="物品名" width="80">
</el-table-column>
<el-table-column prop="storage" label="仓库" :formatter="formatStorage">
</el-table-column>
<el-table-column prop="goodstype" label="分类" :formatter="formatGoodsType">
</el-table-column>
<el-table-column prop="count" label="数量">
</el-table-column>
<el-table-column prop="remark" label="备注">
</el-table-column>
<el-table-column prop="operate" label="操作">
<template slot-scope="scope">
<el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
<el-popconfirm
title="确定删除吗？"
@confirm="del(scope.row.id)"
style="margin-left:8px;"
>
<el-button slot="reference" size="small" type="danger">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="物品名" prop="name">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
</el-form-item>
<el-form-item label="仓库" prop="storage">
<el-col :span="20">
<el-select v-model="form.storage" placehoLder="请选择仓库" style="margin-left: 5px;">
<el-option
v-for="item in storageData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="分类" prop="goodstype">
<el-col :span="20">
<el-select v-model="form.goodstype" placeholder="请选择分类" style="margin-left: 5px;">
<el-option
v-for="item in goodstypeData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="数量" prop="count">
<el-col :span="20">
<el-input v-model="form.count"></el-input>
</el-col>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-col :span="20">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible=false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</el-dialog>
<el-dialog
title="提示"
:visible.sync="inDialogVisible"
width="30%"
center>
<el-form ref="form1" :rules="rules1" :model="form1" label-width="80px">
<el-form-item label="物品名">
<el-col :span="20">
<el-input v-model="form1.goodsname" readonly></el-input>
</el-col>
</el-form-item>
<el-form-item label="数量" prop="count">
<el-col :span="20">
<el-input v-model="form1.count"></el-input>
</el-col>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-col :span="20">
<el-input type="textarea" v-model="form1.remark"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="inDialogVisible=false">取消</el-button>
<el-button type="primary" @click="doInGoods">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<style scoped>
</style>
<script>
export default {
name: "GoodsManage",
data() {
let checkCount = (rule, value, callback) => {
if (value > 9999) {
callback(new Error('数量输入过大'));
} else {
callback();
}
};
return {
user: JSON.parse(sessionStorage.getItem('CurUser')),
storageData: [],
tableData: [],
goodstypeData: [],
pageSize: 10,
pageNum: 1,
storage: '',
goodstype: '',
total: 0,
name: '',
centerDialogVisible: false,
inDialogVisible: false,
currentRow: {},
form: {
id: '',
name: '',
remark: '',
count: '',
storage: '',
goodstype: '',
},
form1: {
goods: '',
goodsname: '',
userid: '13',
adminId: '',
remark: ''
},
rules1: {},
rules: {
name: [
{required: true, message: '请输入物品名', trigger: 'blur'},
],
storage: [
{required: true, message: '请选择仓库', trigger: 'blur'}
],
goodstype: [
{required: true, message: '请选择分类'，trigger:'blur'}
],
count: [
{required: true, message: '请输入数量', trigger: 'blur'},
{pattern: /^([1-9][0-9]*){1,4}$/, message: '数量必须为正整数', trigger: "blur"},
{validator: checkCount, trigger: 'blur'}
]
}
}
},
methods: {
selectCurrentChange(val) {
this.currentRow = val;
},
formatStorage(row) {
let temp = this.storageData.find(item => {
return item.id === row.storage
})
return temp && temp.name
},
formatGoodsType(row) {
let temp = this.goodstypeData.find(item => {
return item.id === row.goodstype
})
return temp && temp.name
},
add() {
this.centerDialogVisible = true
this.$nextTick(() => {
this.resetForm()
this.form.id = ''
})
},
inGoods() {
if (!this.currentRow.id) {
alert('请选择记录');
return;
}
this.inDialogVisible = true
this.$nextTick(() => {
this.resetInForm()
})
this.form1.goodsname = this.currentRow.name
this.form1.goods = this.currentRow.id
this.form1.adminId = this.user.id
},
mod(row) {
//this.form=row就可以了
this.centerDialogVisible = true
this.$nextTick(() => {
this.form.id = row.id;
this.form.remark = row.remark;
this.form.name = row.name;
this.form.storage = row.storage;
this.form.goodstype = row.goodstype;
this.form.count = row.count;
})
},
del(id) {
this.$axios.get(this.$httpUrl + '/goods/del?id=' + id).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.loadPost();
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
resetForm() {
//this.centerDialogVisible = true
this.$refs.form.resetFields();
//this.form.id = '';
},
resetInForm() {
this.$refs.form1.resetFields();
},
doSave() {
this.$axios.post(this.$httpUrl + '/goods/save', this.form).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.centerDialogVisible = false
this.loadPost();
this.resetForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
doMod() {
this.$axios.post(this.$httpUrl + '/goods/update', this.form).then(res => res.data).then(res => {
console.log(res);
if (res.code == 200) {
this.$message({
message: '操作成功！',
type: 'success'
});
this.centerDialogVisible = false;
this.loadPost();
this.resetForm();
} else {
this.$message({
message: '操作失败！',
type: 'error'
});
}
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.id) {
this.doMod();
} else {
this.doSave();
}
} else {
console.log('error submit!!');
return false;
}
});
},
loadPost() {
this.$axios.post(this.$httpUrl + '/goods/listPage', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: {
name: this.name,
goodstype: this.goodstype + '',//string和int强转一下
storage: this.storage + ''
}
}).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.tableData = res.data
this.total = res.total
} else {
alert('获取数据失败！请刷新页面')
}
})
},
loadStorage() {
this.$axios.get(this.$httpUrl + '/storage/list').then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.storageData = res.data
} else {
alert('获取数据失败！请刷新页面')
}
})
},
loadGoodsType() {
this.$axios.get(this.$httpUrl + '/goodstype/list').then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.goodstypeData = res.data
} else {
alert('获取数据失败！请刷新页面')
}
})
},
resetParam() {
this.name = ''
this.storage = ''
this.goodstype = ''
},
doInGoods() {
this.$axios.post(this.$httpUrl + '/record/save', this.form1).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.inDialogVisible = false
this.loadPost();
this.resetInForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据
this.pageSize = val
this.loadPost()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val
this.loadPost()
}
},
beforeMount() {
this.loadStorage()
this.loadGoodsType()
this.loadPost()
}
}
</script>- 表里没有操作时间的，按我说的来做，数据库里面类型修改为timestamp，默认那里再加上CURRENT_TIMESTAMP这个默认值,
2.没有时间的直接改成`createtime` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '操作时间' ON UPDATE CURRENT_TIMESTAMP
3.操作时间为空的搜一下mybaitsplus的注解@TableField，加在实体类里
方法选一个即可
java
CREATE TABLE `record` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
`goods` int(11) NOT NULL COMMENT '货品id',
`userId` int(11) DEFAULT NULL COMMENT '取货人/补货人',
`admin_id` int(11) DEFAULT NULL COMMENT '操作人id',
`count` int(11) DEFAULT NULL COMMENT '数量',
`createtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '操作时间',
`remark` varchar(1000) DEFAULT NULL COMMENT '备注',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;进一步补充goods的相关方法
java
package com.wms.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.wms.common.QueryPageParam;
import com.wms.common.Result;
import com.wms.entity.Goods;
import com.wms.entity.Record;
import com.wms.service.GoodsService;
import com.wms.service.RecordService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
/**
* <p>
* 前端控制器
* </p>
*
* @author wms
* @since 2024-12-07
*/
@RestController
@RequestMapping("/record")
public class RecordController {
@Autowired
private RecordService recordService;
@Autowired
private GoodsService goodsService;
@PostMapping("/listPage")
public Result listPage(@RequestBody QueryPageParam query) {
HashMap param = query.getParam();
String name = (String) param.get("name");
String storage = (String) param.get("storage");
String goodstype = (String) param.get("goodstype");
Page<Record> page = new Page();
page.setCurrent(query.getPageNum());
page.setSize(query.getPageSize());
QueryWrapper<Record> queryWrapper = new QueryWrapper();
queryWrapper.apply(" a.goods=b.id and b.storage=c.id and b.goodsType=d.id ");
if (StringUtils.isNotBlank(name) && !"null".equals(name)) {
//lambdaQueryWrapper.like(Record::getName, name);
queryWrapper.like("b.name", name);
}
if (StringUtils.isNotBlank(storage) && !"null".equals(storage)) {
queryWrapper.eq("c.id", storage);
}
if (StringUtils.isNotBlank(goodstype) && !"null".equals(goodstype)) {
queryWrapper.eq("d.id", goodstype);
}
IPage result = recordService.pageCC(page, queryWrapper);
return Result.success(result.getRecords(), result.getTotal());
}
//将入库数据和原有数据相加吧
//新增
@PostMapping("/save")
public Result save(@RequestBody Record record) {
Goods goods = goodsService.getById(record.getGoods());
int n = record.getCount();
int num = goods.getCount() + n;
goods.setCount(num);
goodsService.updateById(goods);
return recordService.save(record) ? Result.success() : Result.fail();
}
}可以实现初步功能
Record加一句
@TableField(exist=false)
private String action;RecordController添加出库相关的内容
java
//将入库数据和原有数据相加吧
//新增
@PostMapping("/save")
public Result save(@RequestBody Record record) {
Goods goods = goodsService.getById(record.getGoods());
int n = record.getCount();
//出库
if("2".equals(record.getAction())) {
n = -n;
record.setCount(n);
}
int num = goods.getCount() + n;
goods.setCount(num);
goodsService.updateById(goods);
return recordService.save(record) ? Result.success() : Result.fail();
}SelectUser.vue
java
<template>
<div>
<div style="margin-left:5px">
<el-input v-model="name" placeholder="请输入名字:" suffix-icon="el-icon-search" style="width:200px;"
@keyup.enter.native="loadPost"></el-input>
<el-select v-model="sex" filterableplacehoLder="请选择性别" style="margin-left:5px">
<el-option
v-for="item in sexs"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" style="margin-left:5px" @click="loadPost">查询</el-button>
<el-button type="success" @click="resetParam">重置</el-button>
<!--<el-button type="primary" style="margin-left:5px" @click="add">新增</el-button>-->
</div>
<el-table :data="tableData"
:header-cell-style="{background:'#f2f5fc',color:'#555'}"
border
highlight-current-row
@current-change="selectCurrentChange"
>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="no" label="账号" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="age" label="年龄" width="80">
</el-table-column>
<el-table-column prop="sex" label="性别" width="80">
<template slot-scope="scope">
<el-tag
:type="scope.row.sex === 1 ?'primary':'success'"
disable-transitions>{{ scope.row.sex === 1 ? '男' : '女' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="roleId" label="角色" width="120">
<template slot-scope="scope">
<el-tag
:type="scope.row.roleId === 0 ?'danger':(scope.row.roleId === 1 ?'primary':'success')"
disable-transitions>
{{ scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '用户') }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="phone" label="电话" >
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="账号" prop="no">
<el-col :span="20">
<el-input v-model="form.no"></el-input>
</el-col>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-col :span="20">
<el-input v-model="form.password"></el-input>
</el-col>
</el-form-item>
<el-form-item label="名字" prop="name">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-col :span="20">
<el-input v-model="form.age"></el-input>
</el-col>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-col :span="20">
<el-input v-model="form.phone"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible=false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<style scoped>
</style>
<script>
export default {
name: "SelectUser",
data() {
let checkAge = (rule, value, callback) => {
if (value > 150) {
callback(new Error('年龄太大！lbd再来我让你飞起来！'));
} else {
callback();
}
};
let checkDuplicate = (rule, value, callback) => {
if (this.form.id) {
return callback();
}
this.$axios.get(this.$httpUrl + "/user/findByNo?no=" + this.form.no).then(res => res.data).then(res => {
if (res.code !== 200) {//es6解构也可以
callback();
} else {
callback(new Error('账号已经存在'));
}
});
};
return {
tableData: [],
pageSize: 10,
pageNum: 1,
total: 0,
name: '',
sex: '',
sexs: [
{
value: '1',
label: '男'
}, {
value: '0',
label: '女'
}
],
centerDialogVisible: false,
form: {
name: '',
no: '',
age: '',
password: '',
phone: '',
sex: '0',
roleId: '2'
},
rules: {
no: [
{required: true, message: '请输入账号', trigger: 'blur'},
{min: 3, max: 8, message: '长度在3-8个字符', trigger: 'blur'},
{validator: checkDuplicate, trigger: 'blur'}
],
name: [
{required: true, message: '请输入名字', trigger: 'blur'},
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 4, max: 10, message: '长度在4-10个字符之间', trigger: 'blur'}
],
age: [
{required: true, message: '请输入年龄', trigger: 'blur'},
{min: 1, max: 3, message: '长度在1到3个位', trigger: 'blur'},
{pattern: /^([1-9][0-9]*){1,3}$/, message: '年龄必须为正整数字', trigger: "blur"},
{validator: checkAge, trigger: 'blur'}
],
phone: [
{required: true, message: "手机号不能为空", trigger: "blur"},
{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
]
}
}
},
methods: {
add() {
this.centerDialogVisible = true
this.$nextTick(() => {
this.resetForm()
})
},
mod(row) {
//this.form=row就可以了
this.centerDialogVisible = true
this.$nextTick(() => {
this.form.id = row.id;
this.form.no = row.no;
this.form.name = row.name;
this.form.sex = row.sex + '';
this.form.age = row.age + '';//转化成字符串类型
this.form.phone = row.phone;
this.form.password = '';
this.form.roleId = row.roleId;
})//修改User的时候要确保账号不能修改，否则有可能会数据库存在账号相同的情况！！！！给账号的input里加个v-bind:disabled="isDisabled",如果是修改就把isDisabled设置为true，添加就false
},
del(id) {
this.$axios.get(this.$httpUrl + '/user/del?id=' + id).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.loadPost();
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
resetForm() {
this.centerDialogVisible = true
this.$refs.form.resetFields();
},
doSave() {
this.$axios.post(this.$httpUrl + '/user/save', this.form).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.centerDialogVisible = false
this.loadPost();
this.resetForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
doMod() {
this.$axios.post(this.$httpUrl + '/user/update', this.form).then(res => res.data).then(res => {
console.log(res);
if (res.code == 200) {
this.$message({
message: '操作成功！',
type: 'success'
});
this.centerDialogVisible = false;
this.loadPost();
this.resetForm();
} else {
this.$message({
message: '操作失败！',
type: 'error'
});
}
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.id) {
this.doMod();
} else {
this.doSave();
}
} else {
console.log('error submit!!');
return false;
}
});
},
loadGet() {
this.$axios.get(this.$httpUrl + '/user/list').then(res => res.data).then(res => {
console.log(res)
})
},
loadPost() {
this.$axios.post(this.$httpUrl + '/user/listPageC1', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: {
name: this.name,
sex: this.sex,
roleId:'2'
}
}).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.tableData = res.data
this.total = res.total
} else {
alert('获取数据失败！请刷新页面')
}
})
},
resetParam() {
this.name = ''
this.sex = ''
},
selectCurrentChange(val) {
//this.currentRow=val
this.$emit("doSelectUser",val)
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据
this.pageSize = val
this.loadPost()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val
this.loadPost()
}
},
beforeMount() {
// this.loadGet();
this.loadPost()
}
}
</script>GoodsManage.vue
java
<template>
<div>
<div style="margin-left:5px">
<el-input v-model="name" placeholder="请输入物品名:" suffix-icon="el-icon-search" style="width:200px;"
@keyup.enter.native="loadPost"></el-input>
<el-select v-model="storage" placehoLder="请选择仓库" style="margin-left: 5px;">
<el-option
v-for="item in storageData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="goodstype" placeholder="请选择分类" style="margin-left: 5px;">
<el-option
v-for="item in goodstypeData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-button type="primary" style="margin-left:5px" @click="loadPost">查询</el-button>
<el-button type="success" @click="resetParam">重置</el-button>
<el-button type="primary" style="margin-left:5px" @click="add">新增</el-button>
<el-button type="success" style="margin-left:5px;" @click="inGoods">入库</el-button>
<el-button type="success" style="margin-left:5px;" @click="outGoods">出库</el-button>
</div>
<el-table :data="tableData"
:header-cell-style="{background:'#f2f5fc',color:'#555'}"
border
highlight-current-row
@current-change="selectCurrentChange"
>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="name" label="物品名" width="80">
</el-table-column>
<el-table-column prop="storage" label="仓库" :formatter="formatStorage">
</el-table-column>
<el-table-column prop="goodstype" label="分类" :formatter="formatGoodsType">
</el-table-column>
<el-table-column prop="count" label="数量">
</el-table-column>
<el-table-column prop="remark" label="备注">
</el-table-column>
<el-table-column prop="operate" label="操作">
<template slot-scope="scope">
<el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
<el-popconfirm
title="确定删除吗？"
@confirm="del(scope.row.id)"
style="margin-left:8px;"
>
<el-button slot="reference" size="small" type="danger">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog
title="物品维护"
:visible.sync="centerDialogVisible"
width="30%"
center>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="物品名" prop="name">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
</el-form-item>
<el-form-item label="仓库" prop="storage">
<el-col :span="20">
<el-select v-model="form.storage" placehoLder="请选择仓库" style="margin-left: 5px;">
<el-option
v-for="item in storageData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="分类" prop="goodstype">
<el-col :span="20">
<el-select v-model="form.goodstype" placeholder="请选择分类" style="margin-left: 5px;">
<el-option
v-for="item in goodstypeData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="数量" prop="count">
<el-col :span="20">
<el-input v-model="form.count"></el-input>
</el-col>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-col :span="20">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible=false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</el-dialog>
<el-dialog
title="出入库"
:visible.sync="inDialogVisible"
width="30%"
center>
<el-dialog
width="70%"
title="用户选择"
:visible.sync="innerVisible"
append-to-body>
<SelectUser @doSelectUser="doSelectUser"></SelectUser>
<span slot="footer" class="dialog-footer">
<el-button @click="innerVisible=false">取消</el-button>
<el-button type="primary" @click="confirmUser">确定</el-button>
</span>
</el-dialog>
<el-form ref="form1" :rules="rules1" :model="form1" label-width="80px">
<el-form-item label="物品名">
<el-col :span="20">
<el-input v-model="form1.goodsname" readonly></el-input>
</el-col>
</el-form-item>
<el-form-item label="申请人">
<el-col :span="20">
<el-input v-model="form1.username" readonly @click.native="selectUser"></el-input>
</el-col>
</el-form-item>
<el-form-item label="数量" prop="count">
<el-col :span="20">
<el-input v-model="form1.count"></el-input>
</el-col>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-col :span="20">
<el-input type="textarea" v-model="form1.remark"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="inDialogVisible=false">取消</el-button>
<el-button type="primary" @click="doInGoods">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<style scoped>
</style>
<script>
import SelectUser from "../user/SelectUser";
export default {
name: "GoodsManage",
components: {SelectUser},
data() {
let checkCount = (rule, value, callback) => {
if (value > 9999) {
callback(new Error('数量输入过大'));
} else {
callback();
}
};
return {
user: JSON.parse(sessionStorage.getItem('CurUser')),
storageData: [],
tableData: [],
goodstypeData: [],
pageSize: 10,
pageNum: 1,
storage: '',
goodstype: '',
total: 0,
name: '',
centerDialogVisible: false,
inDialogVisible: false,
innerVisible: false,
currentRow: {},
tempUser: {},
form: {
id: '',
name: '',
remark: '',
count: '',
storage: '',
goodstype: '',
},
form1: {
goods: '',
goodsname: '',
count: '',
username: '',
userid: '',
adminId: '',
remark: '',
action:1,
},
rules1: {},
rules: {
name: [
{required: true, message: '请输入物品名', trigger: 'blur'},
],
storage: [
{required: true, message: '请选择仓库', trigger: 'blur'}
],
goodstype: [
{required: true, message: '请选择分类'，trigger:'blur'}
],
count: [
{required: true, message: '请输入数量', trigger: 'blur'},
{pattern: /^([1-9][0-9]*){1,4}$/, message: '数量必须为正整数', trigger: "blur"},
{validator: checkCount, trigger: 'blur'}
]
}
}
},
methods: {
confirmUser() {
this.username = this.tempUser.name
this.userid = this.tempUser.id
this.innerVisible = false
},
doSelectUser(val) {
console.log(val)
this.tempUser = val
},
selectCurrentChange(val) {
this.currentRow = val;
},
formatStorage(row) {
let temp = this.storageData.find(item => {
return item.id === row.storage
})
return temp && temp.name
},
formatGoodsType(row) {
let temp = this.goodstypeData.find(item => {
return item.id === row.goodstype
})
return temp && temp.name
},
add() {
this.centerDialogVisible = true
this.$nextTick(() => {
this.resetForm()
this.form.id = ''
})
},
inGoods() {
if (!this.currentRow.id) {
alert('请选择记录');
return;
}
this.inDialogVisible = true
this.$nextTick(() => {
this.resetInForm()
})
this.form1.goodsname = this.currentRow.name
this.form1.goods = this.currentRow.id
this.form1.adminId = this.user.id
this.form1.action = '1'
},
outGoods() {
if (!this.currentRow.id) {
alert('请选择记录');
return;
}
this.inDialogVisible = true
this.$nextTick(() => {
this.resetInForm()
})
this.form1.goodsname = this.currentRow.name
this.form1.goods = this.currentRow.id
this.form1.adminId = this.user.id
this.form1.action = '2'
},
mod(row) {
//this.form=row就可以了
this.centerDialogVisible = true
this.$nextTick(() => {
this.form.id = row.id;
this.form.remark = row.remark;
this.form.name = row.name;
this.form.storage = row.storage;
this.form.goodstype = row.goodstype;
this.form.count = row.count;
})
},
del(id) {
this.$axios.get(this.$httpUrl + '/goods/del?id=' + id).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.loadPost();
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
selectUser() {
this.innerVisible = true;
},
resetForm() {
//this.centerDialogVisible = true
this.$refs.form.resetFields();
//this.form.id = '';
},
resetInForm() {
this.$refs.form1.resetFields();
},
doSave() {
this.$axios.post(this.$httpUrl + '/goods/save', this.form).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.centerDialogVisible = false
this.loadPost();
this.resetForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
doMod() {
this.$axios.post(this.$httpUrl + '/goods/update', this.form).then(res => res.data).then(res => {
console.log(res);
if (res.code == 200) {
this.$message({
message: '操作成功！',
type: 'success'
});
this.centerDialogVisible = false;
this.loadPost();
this.resetForm();
} else {
this.$message({
message: '操作失败！',
type: 'error'
});
}
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.id) {
this.doMod();
} else {
this.doSave();
}
} else {
console.log('error submit!!');
return false;
}
});
},
loadPost() {
this.$axios.post(this.$httpUrl + '/goods/listPage', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: {
name: this.name,
goodstype: this.goodstype + '',//string和int强转一下
storage: this.storage + ''
}
}).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.tableData = res.data
this.total = res.total
} else {
alert('获取数据失败！请刷新页面')
}
})
},
loadStorage() {
this.$axios.get(this.$httpUrl + '/storage/list').then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.storageData = res.data
} else {
alert('获取数据失败！请刷新页面')
}
})
},
loadGoodsType() {
this.$axios.get(this.$httpUrl + '/goodstype/list').then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.goodstypeData = res.data
} else {
alert('获取数据失败！请刷新页面')
}
})
},
resetParam() {
this.name = ''
this.storage = ''
this.goodstype = ''
},
doInGoods() {
this.$axios.post(this.$httpUrl + '/record/save', this.form1).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.inDialogVisible = false
this.loadPost();
this.resetInForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据
this.pageSize = val
this.loadPost()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val
this.loadPost()
}
},
beforeMount() {
this.loadStorage()
this.loadGoodsType()
this.loadPost()
}
}
</script>申请人不知道为什么没传上去 😡😡😡😡😡😡😡😡😡😡😡😡
三十四、权限控制优化
如果要保险得在后端用过滤器进行监听,但是我懒得做
SelectUser
java
<template>
<div>
<div style="margin-left:5px">
<el-input v-model="name" placeholder="请输入名字:" suffix-icon="el-icon-search" style="width:200px;"
@keyup.enter.native="loadPost"></el-input>
<el-select v-model="sex" filterableplacehoLder="请选择性别" style="margin-left:5px">
<el-option
v-for="item in sexs"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" style="margin-left:5px" @click="loadPost">查询</el-button>
<el-button type="success" @click="resetParam">重置</el-button>
<!--<el-button type="primary" style="margin-left:5px" @click="add">新增</el-button>-->
</div>
<el-table :data="tableData"
:header-cell-style="{background:'#f2f5fc',color:'#555'}"
border
highlight-current-row
@current-change="selectCurrentChange"
>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="no" label="账号" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="age" label="年龄" width="80">
</el-table-column>
<el-table-column prop="sex" label="性别" width="80">
<template slot-scope="scope">
<el-tag
:type="scope.row.sex === 1 ?'primary':'success'"
disable-transitions>{{ scope.row.sex === 1 ? '男' : '女' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="roleId" label="角色" width="120">
<template slot-scope="scope">
<el-tag
:type="scope.row.roleId === 0 ?'danger':(scope.row.roleId === 1 ?'primary':'success')"
disable-transitions>
{{ scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '用户') }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="phone" label="电话" >
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="账号" prop="no">
<el-col :span="20">
<el-input v-model="form.no"></el-input>
</el-col>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-col :span="20">
<el-input v-model="form.password"></el-input>
</el-col>
</el-form-item>
<el-form-item label="名字" prop="name">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-col :span="20">
<el-input v-model="form.age"></el-input>
</el-col>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-col :span="20">
<el-input v-model="form.phone"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible=false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<style scoped>
</style>
<script>
export default {
name: "SelectUser",
data() {
let checkAge = (rule, value, callback) => {
if (value > 150) {
callback(new Error('年龄太大！lbd再来我让你飞起来！'));
} else {
callback();
}
};
let checkDuplicate = (rule, value, callback) => {
if (this.form.id) {
return callback();
}
this.$axios.get(this.$httpUrl + "/user/findByNo?no=" + this.form.no).then(res => res.data).then(res => {
if (res.code !== 200) {//es6解构也可以
callback();
} else {
callback(new Error('账号已经存在'));
}
});
};
return {
tableData: [],
pageSize: 10,
pageNum: 1,
total: 0,
name: '',
sex: '',
sexs: [
{
value: '1',
label: '男'
}, {
value: '0',
label: '女'
}
],
centerDialogVisible: false,
form: {
name: '',
no: '',
age: '',
password: '',
phone: '',
sex: '0',
roleId: '2'
},
rules: {
no: [
{required: true, message: '请输入账号', trigger: 'blur'},
{min: 3, max: 8, message: '长度在3-8个字符', trigger: 'blur'},
{validator: checkDuplicate, trigger: 'blur'}
],
name: [
{required: true, message: '请输入名字', trigger: 'blur'},
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 4, max: 10, message: '长度在4-10个字符之间', trigger: 'blur'}
],
age: [
{required: true, message: '请输入年龄', trigger: 'blur'},
{min: 1, max: 3, message: '长度在1到3个位', trigger: 'blur'},
{pattern: /^([1-9][0-9]*){1,3}$/, message: '年龄必须为正整数字', trigger: "blur"},
{validator: checkAge, trigger: 'blur'}
],
phone: [
{required: true, message: "手机号不能为空", trigger: "blur"},
{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
]
}
}
},
methods: {
add() {
this.centerDialogVisible = true
this.$nextTick(() => {
this.resetForm()
})
},
mod(row) {
//this.form=row就可以了
this.centerDialogVisible = true
this.$nextTick(() => {
this.form.id = row.id;
this.form.no = row.no;
this.form.name = row.name;
this.form.sex = row.sex + '';
this.form.age = row.age + '';//转化成字符串类型
this.form.phone = row.phone;
this.form.password = '';
this.form.roleId = row.roleId;
})//修改User的时候要确保账号不能修改，否则有可能会数据库存在账号相同的情况！！！！给账号的input里加个v-bind:disabled="isDisabled",如果是修改就把isDisabled设置为true，添加就false
},
del(id) {
this.$axios.get(this.$httpUrl + '/user/del?id=' + id).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.loadPost();
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
resetForm() {
this.centerDialogVisible = true
this.$refs.form.resetFields();
},
doSave() {
this.$axios.post(this.$httpUrl + '/user/save', this.form).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.centerDialogVisible = false
this.loadPost();
this.resetForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
doMod() {
this.$axios.post(this.$httpUrl + '/user/update', this.form).then(res => res.data).then(res => {
console.log(res);
if (res.code == 200) {
this.$message({
message: '操作成功！',
type: 'success'
});
this.centerDialogVisible = false;
this.loadPost();
this.resetForm();
} else {
this.$message({
message: '操作失败！',
type: 'error'
});
}
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.id) {
this.doMod();
} else {
this.doSave();
}
} else {
console.log('error submit!!');
return false;
}
});
},
loadGet() {
this.$axios.get(this.$httpUrl + '/user/list').then(res => res.data).then(res => {
console.log(res)
})
},
loadPost() {
this.$axios.post(this.$httpUrl + '/user/listPageC1', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: {
name: this.name,
sex: this.sex,
roleId:'2'
}
}).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.tableData = res.data
this.total = res.total
} else {
alert('获取数据失败！请刷新页面')
}
})
},
resetParam() {
this.name = ''
this.sex = ''
},
selectCurrentChange(val) {
//this.currentRow=val
this.$emit("doSelectUser",val)
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据
this.pageSize = val
this.loadPost()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val
this.loadPost()
}
},
beforeMount() {
// this.loadGet();
this.loadPost()
}
}
</script>GoodsManage
java
<template>
<div>
<div style="margin-left:5px">
<el-input v-model="name" placeholder="请输入物品名:" suffix-icon="el-icon-search" style="width:200px;"
@keyup.enter.native="loadPost"></el-input>
<el-select v-model="storage" placehoLder="请选择仓库" style="margin-left: 5px;">
<el-option
v-for="item in storageData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="goodstype" placeholder="请选择分类" style="margin-left: 5px;">
<el-option
v-for="item in goodstypeData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-button type="primary" style="margin-left:5px" @click="loadPost">查询</el-button>
<el-button type="success" @click="resetParam">重置</el-button>
<el-button type="primary" style="margin-left:5px" @click="add" v-if="user.roleId!=2">新增</el-button>
<el-button type="success" style="margin-left:5px;" @click="inGoods" v-if="user.roleId!=2">入库</el-button>
<el-button type="success" style="margin-left:5px;" @click="outGoods" v-if="user.roleId!=2">出库</el-button>
</div>
<el-table :data="tableData"
:header-cell-style="{background:'#f2f5fc',color:'#555'}"
border
highlight-current-row
@current-change="selectCurrentChange"
>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="name" label="物品名" width="80">
</el-table-column>
<el-table-column prop="storage" label="仓库" :formatter="formatStorage">
</el-table-column>
<el-table-column prop="goodstype" label="分类" :formatter="formatGoodsType">
</el-table-column>
<el-table-column prop="count" label="数量">
</el-table-column>
<el-table-column prop="remark" label="备注">
</el-table-column>
<el-table-column prop="operate" label="操作" v-if="user.roleId!=2">
<template slot-scope="scope">
<el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
<el-popconfirm
title="确定删除吗？"
@confirm="del(scope.row.id)"
style="margin-left:8px;"
>
<el-button slot="reference" size="small" type="danger">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog
title="物品维护"
:visible.sync="centerDialogVisible"
width="30%"
center>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="物品名" prop="name">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
</el-form-item>
<el-form-item label="仓库" prop="storage">
<el-col :span="20">
<el-select v-model="form.storage" placehoLder="请选择仓库" style="margin-left: 5px;">
<el-option
v-for="item in storageData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="分类" prop="goodstype">
<el-col :span="20">
<el-select v-model="form.goodstype" placeholder="请选择分类" style="margin-left: 5px;">
<el-option
v-for="item in goodstypeData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="数量" prop="count">
<el-col :span="20">
<el-input v-model="form.count"></el-input>
</el-col>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-col :span="20">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible=false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</el-dialog>
<el-dialog
title="出入库"
:visible.sync="inDialogVisible"
width="30%"
center>
<el-dialog
width="70%"
title="用户选择"
:visible.sync="innerVisible"
append-to-body>
<SelectUser @doSelectUser="doSelectUser"></SelectUser>
<span slot="footer" class="dialog-footer">
<el-button @click="innerVisible=false">取消</el-button>
<el-button type="primary" @click="confirmUser">确定</el-button>
</span>
</el-dialog>
<el-form ref="form1" :rules="rules1" :model="form1" label-width="80px">
<el-form-item label="物品名">
<el-col :span="20">
<el-input v-model="form1.goodsname" readonly></el-input>
</el-col>
</el-form-item>
<el-form-item label="申请人">
<el-col :span="20">
<el-input v-model="form1.username" readonly @click.native="selectUser"></el-input>
</el-col>
</el-form-item>
<el-form-item label="数量" prop="count">
<el-col :span="20">
<el-input v-model="form1.count"></el-input>
</el-col>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-col :span="20">
<el-input type="textarea" v-model="form1.remark"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="inDialogVisible=false">取消</el-button>
<el-button type="primary" @click="doInGoods">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<style scoped>
</style>
<script>
import SelectUser from "../user/SelectUser";
export default {
name: "GoodsManage",
components: {SelectUser},
data() {
let checkCount = (rule, value, callback) => {
if (value > 9999) {
callback(new Error('数量输入过大'));
} else {
callback();
}
};
return {
user: JSON.parse(sessionStorage.getItem('CurUser')),
storageData: [],
tableData: [],
goodstypeData: [],
pageSize: 10,
pageNum: 1,
storage: '',
goodstype: '',
total: 0,
name: '',
centerDialogVisible: false,
inDialogVisible: false,
innerVisible: false,
currentRow: {},
tempUser: {},
form: {
id: '',
name: '',
remark: '',
count: '',
storage: '',
goodstype: '',
},
form1: {
goods: '',
goodsname: '',
count: '',
username: '',
userid: '',
adminId: '',
remark: '',
action: 1,
},
rules1: {},
rules: {
name: [
{required: true, message: '请输入物品名', trigger: 'blur'},
],
storage: [
{required: true, message: '请选择仓库', trigger: 'blur'}
],
goodstype: [
{required: true, message: '请选择分类'，trigger:'blur'}
],
count: [
{required: true, message: '请输入数量', trigger: 'blur'},
{pattern: /^([1-9][0-9]*){1,4}$/, message: '数量必须为正整数', trigger: "blur"},
{validator: checkCount, trigger: 'blur'}
]
}
}
},
methods: {
confirmUser() {
this.username = this.tempUser.name
this.userid = this.tempUser.id
this.innerVisible = false
},
doSelectUser(val) {
console.log(val)
this.tempUser = val
},
selectCurrentChange(val) {
this.currentRow = val;
},
formatStorage(row) {
let temp = this.storageData.find(item => {
return item.id === row.storage
})
return temp && temp.name
},
formatGoodsType(row) {
let temp = this.goodstypeData.find(item => {
return item.id === row.goodstype
})
return temp && temp.name
},
add() {
this.centerDialogVisible = true
this.$nextTick(() => {
this.resetForm()
this.form.id = ''
})
},
inGoods() {
if (!this.currentRow.id) {
alert('请选择记录');
return;
}
this.inDialogVisible = true
this.$nextTick(() => {
this.resetInForm()
})
this.form1.goodsname = this.currentRow.name
this.form1.goods = this.currentRow.id
this.form1.adminId = this.user.id
this.form1.action = '1'
},
outGoods() {
if (!this.currentRow.id) {
alert('请选择记录');
return;
}
this.inDialogVisible = true
this.$nextTick(() => {
this.resetInForm()
})
this.form1.goodsname = this.currentRow.name
this.form1.goods = this.currentRow.id
this.form1.adminId = this.user.id
this.form1.action = '2'
},
mod(row) {
//this.form=row就可以了
this.centerDialogVisible = true
this.$nextTick(() => {
this.form.id = row.id;
this.form.remark = row.remark;
this.form.name = row.name;
this.form.storage = row.storage;
this.form.goodstype = row.goodstype;
this.form.count = row.count;
})
},
del(id) {
this.$axios.get(this.$httpUrl + '/goods/del?id=' + id).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.loadPost();
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
selectUser() {
this.innerVisible = true;
},
resetForm() {
//this.centerDialogVisible = true
this.$refs.form.resetFields();
//this.form.id = '';
},
resetInForm() {
this.$refs.form1.resetFields();
},
doSave() {
this.$axios.post(this.$httpUrl + '/goods/save', this.form).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.centerDialogVisible = false
this.loadPost();
this.resetForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
doMod() {
this.$axios.post(this.$httpUrl + '/goods/update', this.form).then(res => res.data).then(res => {
console.log(res);
if (res.code == 200) {
this.$message({
message: '操作成功！',
type: 'success'
});
this.centerDialogVisible = false;
this.loadPost();
this.resetForm();
} else {
this.$message({
message: '操作失败！',
type: 'error'
});
}
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.id) {
this.doMod();
} else {
this.doSave();
}
} else {
console.log('error submit!!');
return false;
}
});
},
loadPost() {
this.$axios.post(this.$httpUrl + '/goods/listPage', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: {
name: this.name,
goodstype: this.goodstype + '',//string和int强转一下
storage: this.storage + ''
}
}).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.tableData = res.data
this.total = res.total
} else {
alert('获取数据失败！请刷新页面')
}
})
},
loadStorage() {
this.$axios.get(this.$httpUrl + '/storage/list').then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.storageData = res.data
} else {
alert('获取数据失败！请刷新页面')
}
})
},
loadGoodsType() {
this.$axios.get(this.$httpUrl + '/goodstype/list').then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.goodstypeData = res.data
} else {
alert('获取数据失败！请刷新页面')
}
})
},
resetParam() {
this.name = ''
this.storage = ''
this.goodstype = ''
},
doInGoods() {
this.$axios.post(this.$httpUrl + '/record/save', this.form1).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.inDialogVisible = false
this.loadPost();
this.resetInForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据
this.pageSize = val
this.loadPost()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val
this.loadPost()
}
},
beforeMount() {
this.loadStorage()
this.loadGoodsType()
this.loadPost()
}
}
</script>RecordManage
java
<template>
<div>
<div style="margin-left:5px">
<el-input v-model="name" placeholder="请输入物品名:" suffix-icon="el-icon-search" style="width:200px;"
@keyup.enter.native="loadPost"></el-input>
<el-select v-model="storage" placehoLder="请选择仓库" style="margin-left: 5px;">
<el-option
v-for="item in storageData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="goodstype" placeholder="请选择分类" style="margin-left: 5px;">
<el-option
v-for="item in goodstypeData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-button type="primary" style="margin-left:5px" @click="loadPost">查询</el-button>
<el-button type="success" @click="resetParam">重置</el-button>
</div>
<el-table :data="tableData"
:header-cell-style="{background:'#f2f5fc',color:'#555'}"
border
>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="goodsname" label="物品名" width="80">
</el-table-column>
<el-table-column prop="storagename" label="仓库" >
</el-table-column>
<el-table-column prop="goodstypename" label="分类" >
</el-table-column>
<el-table-column prop="adminname" label="操作人" >
</el-table-column>
<el-table-column prop="username" label="申请人" >
</el-table-column>
<el-table-column prop="count" label="数量">
</el-table-column>
<el-table-column prop="createtime" label="操作时间">
</el-table-column>
<el-table-column prop="remark" label="备注">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<style scoped>
</style>
<script>
export default {
name: "RecordManage",
data() {
return {
user:JSON.parse(sessionStorage.getItem('CurUser')),
storageData: [],
tableData: [],
goodstypeData: [],
pageSize: 10,
pageNum: 1,
storage: '',
goodstype: '',
total: 0,
name: '',
centerDialogVisible: false,
form: {
id: '',
name: '',
remark: '',
count: '',
storage: '',
goodstype: '',
},
}
},
methods: {
formatStorage(row) {
let temp = this.storageData.find(item => {
return item.id === row.storage
})
return temp && temp.name
},
formatGoodsType(row) {
let temp = this.goodstypeData.find(item => {
return item.id === row.goodstype
})
return temp && temp.name
},
add() {
this.centerDialogVisible = true
this.$nextTick(() => {
this.resetForm()
this.form.id = ''
})
},
mod(row) {
//this.form=row就可以了
this.centerDialogVisible = true
this.$nextTick(() => {
this.form.id = row.id;
this.form.remark = row.remark;
this.form.name = row.name;
this.form.storage = row.storage;
this.form.goodstype = row.goodstype;
this.form.count = row.count;
})
},
del(id) {
this.$axios.get(this.$httpUrl + '/goods/del?id=' + id).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.loadPost();
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
resetForm() {
this.centerDialogVisible = true
this.$refs.form.resetFields();
this.form.id = '';
},
doSave() {
this.$axios.post(this.$httpUrl + '/goods/save', this.form).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.centerDialogVisible = false
this.loadPost();
this.resetForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
doMod() {
this.$axios.post(this.$httpUrl + '/goods/update', this.form).then(res => res.data).then(res => {
console.log(res);
if (res.code == 200) {
this.$message({
message: '操作成功！',
type: 'success'
});
this.centerDialogVisible = false;
this.loadPost();
this.resetForm();
} else {
this.$message({
message: '操作失败！',
type: 'error'
});
}
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.id) {
this.doMod();
} else {
this.doSave();
}
} else {
console.log('error submit!!');
return false;
}
});
},
loadPost() {
this.$axios.post(this.$httpUrl + '/record/listPage', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: {
name: this.name,
goodstype: this.goodstype + '',//string和int强转一下
storage: this.storage + '',
roleId:this.user.roleId+'',
userId:this.user.id+'',
}
}).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.tableData = res.data
this.total = res.total
} else {
alert('获取数据失败！请刷新页面')
}
})
},
loadStorage() {
this.$axios.get(this.$httpUrl + '/storage/list').then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.storageData = res.data
} else {
alert('获取数据失败！请刷新页面')
}
})
},
loadGoodsType() {
this.$axios.get(this.$httpUrl + '/goodstype/list').then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.goodstypeData = res.data
} else {
alert('获取数据失败！请刷新页面')
}
})
},
resetParam() {
this.name = ''
this.storage = ''
this.goodstype = ''
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据
this.pageSize = val
this.loadPost()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val
this.loadPost()
}
},
beforeMount() {
this.loadGoodsType()
this.loadStorage()
this.loadPost()
}
}
</script>RecordController
java
package com.wms.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.wms.common.QueryPageParam;
import com.wms.common.Result;
import com.wms.entity.Goods;
import com.wms.entity.Record;
import com.wms.service.GoodsService;
import com.wms.service.RecordService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
/**
* <p>
* 前端控制器
* </p>
*
* @author wms
* @since 2024-12-07
*/
@RestController
@RequestMapping("/record")
public class RecordController {
@Autowired
private RecordService recordService;
@Autowired
private GoodsService goodsService;
@PostMapping("/listPage")
public Result listPage(@RequestBody QueryPageParam query) {
HashMap param = query.getParam();
String name = (String) param.get("name");
String storage = (String) param.get("storage");
String goodstype = (String) param.get("goodstype");
String roleId = (String) param.get("roleId");
String userId = (String) param.get("userId");
Page<Record> page = new Page();
page.setCurrent(query.getPageNum());
page.setSize(query.getPageSize());
QueryWrapper<Record> queryWrapper = new QueryWrapper();
queryWrapper.apply(" a.goods=b.id and b.storage=c.id and b.goodsType=d.id ");
if("2".equals(roleId)) {
//queryWrapper.eq(Record::getUserid, userId);
queryWrapper.apply("a.userId="+userId);
}
if (StringUtils.isNotBlank(name) && !"null".equals(name)) {
//lambdaQueryWrapper.like(Record::getName, name);
queryWrapper.like("b.name", name);
}
if (StringUtils.isNotBlank(storage) && !"null".equals(storage)) {
queryWrapper.eq("c.id", storage);
}
if (StringUtils.isNotBlank(goodstype) && !"null".equals(goodstype)) {
queryWrapper.eq("d.id", goodstype);
}
IPage result = recordService.pageCC(page, queryWrapper);
return Result.success(result.getRecords(), result.getTotal());
}
//将入库数据和原有数据相加吧
//新增
@PostMapping("/save")
public Result save(@RequestBody Record record) {
Goods goods = goodsService.getById(record.getGoods());
int n = record.getCount();
//出库
if("2".equals(record.getAction())) {
n = -n;
record.setCount(n);
}
int num = goods.getCount() + n;
goods.setCount(num);
goodsService.updateById(goods);
return recordService.save(record) ? Result.success() : Result.fail();
}
}UserManage
java
<template>
<div>
<div style="margin-left:5px">
<el-input v-model="name" placeholder="请输入名字:" suffix-icon="el-icon-search" style="width:200px;"
@keyup.enter.native="loadPost"></el-input>
<el-select v-model="sex" filterableplacehoLder="请选择性别" style="margin-left:5px">
<el-option
v-for="item in sexs"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" style="margin-left:5px" @click="loadPost">查询</el-button>
<el-button type="success" @click="resetParam">重置</el-button>
<el-button type="primary" style="margin-left:5px" @click="add">新增</el-button>
</div>
<el-table :data="tableData"
:header-cell-style="{background:'#f2f5fc',color:'#555'}"
border
>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="no" label="账号" width="120">
</el-table-column>
<el-table-column prop="name" label="姓名" width="80">
</el-table-column>
<el-table-column prop="age" label="年龄" width="80">
</el-table-column>
<el-table-column prop="sex" label="性别" width="80">
<template slot-scope="scope">
<el-tag
:type="scope.row.sex === 1 ?'primary':'success'"
disable-transitions>{{ scope.row.sex === 1 ? '男' : '女' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="roleId" label="角色" width="120">
<template slot-scope="scope">
<el-tag
:type="scope.row.roleId === 0 ?'danger':(scope.row.roleId === 1 ?'primary':'success')"
disable-transitions>
{{ scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '用户') }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="phone" label="电话" width="120">
</el-table-column>
<el-table-column prop="operate" label="操作">
<template slot-scope="scope">
<el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
<el-popconfirm
title="确定删除吗？"
@confirm="del(scope.row.id)"
style="margin-left:8px;"
>
<el-button slot="reference" size="small" type="danger">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="账号" prop="no">
<el-col :span="20">
<el-input v-model="form.no"></el-input>
</el-col>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-col :span="20">
<el-input v-model="form.password"></el-input>
</el-col>
</el-form-item>
<el-form-item label="名字" prop="name">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-col :span="20">
<el-input v-model="form.age"></el-input>
</el-col>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-col :span="20">
<el-input v-model="form.phone"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible=false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<style scoped>
</style>
<script>
export default {
name: "UserManage",
data() {
let checkAge = (rule, value, callback) => {
if (value > 150) {
callback(new Error('年龄太大！lbd再来我让你飞起来！'));
} else {
callback();
}
};
let checkDuplicate = (rule, value, callback) => {
if (this.form.id) {
return callback();
}
this.$axios.get(this.$httpUrl + "/user/findByNo?no=" + this.form.no).then(res => res.data).then(res => {
if (res.code !== 200) {//es6解构也可以
callback();
} else {
callback(new Error('账号已经存在'));
}
});
};
return {
tableData: [],
pageSize: 10,
pageNum: 1,
total: 0,
name: '',
sex: '',
sexs: [
{
value: '1',
label: '男'
}, {
value: '0',
label: '女'
}
],
centerDialogVisible: false,
form: {
name: '',
no: '',
age: '',
password: '',
phone: '',
sex: '0',
roleId: '2'
},
rules: {
no: [
{required: true, message: '请输入账号', trigger: 'blur'},
{min: 3, max: 8, message: '长度在3-8个字符', trigger: 'blur'},
{validator: checkDuplicate, trigger: 'blur'}
],
name: [
{required: true, message: '请输入名字', trigger: 'blur'},
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 4, max: 10, message: '长度在4-10个字符之间', trigger: 'blur'}
],
age: [
{required: true, message: '请输入年龄', trigger: 'blur'},
{min: 1, max: 3, message: '长度在1到3个位', trigger: 'blur'},
{pattern: /^([1-9][0-9]*){1,3}$/, message: '年龄必须为正整数字', trigger: "blur"},
{validator: checkAge, trigger: 'blur'}
],
phone: [
{required: true, message: "手机号不能为空", trigger: "blur"},
{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
]
}
}
},
methods: {
add() {
this.centerDialogVisible = true
this.$nextTick(() => {
this.resetForm()
})
},
mod(row) {
//this.form=row就可以了
this.centerDialogVisible = true
this.$nextTick(() => {
this.form.id = row.id;
this.form.no = row.no;
this.form.name = row.name;
this.form.sex = row.sex + '';
this.form.age = row.age + '';//转化成字符串类型
this.form.phone = row.phone;
this.form.password = '';
this.form.roleId = row.roleId;
})//修改User的时候要确保账号不能修改，否则有可能会数据库存在账号相同的情况！！！！给账号的input里加个v-bind:disabled="isDisabled",如果是修改就把isDisabled设置为true，添加就false
},
del(id) {
this.$axios.get(this.$httpUrl + '/user/del?id=' + id).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.loadPost();
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
resetForm() {
this.centerDialogVisible = true
this.$refs.form.resetFields();
},
doSave() {
this.$axios.post(this.$httpUrl + '/user/save', this.form).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
message: '操作成功!',
type: 'success'
});
this.centerDialogVisible = false
this.loadPost();
this.resetForm()
} else {
this.$message({
message: '操作失败!请返回重新操作...',
type: 'error'
});
}
});
},
doMod() {
this.$axios.post(this.$httpUrl + '/user/update', this.form).then(res => res.data).then(res => {
console.log(res);
if (res.code == 200) {
this.$message({
message: '操作成功！',
type: 'success'
});
this.centerDialogVisible = false;
this.loadPost();
this.resetForm();
} else {
this.$message({
message: '操作失败！',
type: 'error'
});
}
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.id) {
this.doMod();
} else {
this.doSave();
}
} else {
console.log('error submit!!');
return false;
}
});
},
loadGet() {
this.$axios.get(this.$httpUrl + '/user/list').then(res => res.data).then(res => {
console.log(res)
})
},
loadPost() {
this.$axios.post(this.$httpUrl + '/user/listPageC1', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: {
name: this.name,
sex: this.sex,
roleId:'2'
}
}).then(res => res.data).then(res => {
console.log(res)
if (res.code === 200) {
this.tableData = res.data
this.total = res.total
} else {
alert('获取数据失败！请刷新页面')
}
})
},
resetParam() {
this.name = ''
this.sex = ''
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据
this.pageSize = val
this.loadPost()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val
this.loadPost()
}
},
beforeMount() {
// this.loadGet();
this.loadPost()
}
}
</script>三十五、如何部署前后端分离项目
预计在linux系统上部署并且部署到网站中去😭😭😭😭😭😭😭我看拖拖大法将会发挥作用
一、 要求：
1.后端：IDEAmaven
2.前端：node、vue环境
3.数据库：mysql
二、步骤：
1.获取代码放置到相应目录
2.后端代码处理
-
jdk版本
-
maven配置（路径配置、是否生效）
-
执行数据库的脚本和修改数据库连接配置主机ip
-
启动服务验证
右键pom文件add maven即可
3.前端代码处理
- 加载依赖 npm i
- 配置执行环境
- 启动验证
三十六、Vuex持久化后浏览器刷新丢失数据
1.分析
vuex持久化后，每当浏览器刷新就会丢失state中的数据
有没有办法可以保存这个state的数据呢？
2.插件vuex-persistedstate使用
安装：npm i vuex-persistedstate
在store/index.js 引入：
import createPersistedState from 'vuex-persistedstate'使用：
plugins:[createPersistedState()]3.菜单问题解决
菜单还在但是路由没了
4.动态路由问题
在App.vue中
java
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: { },
data(){
return{
user:JSON.parse(sessionStorage.getItem('CurUser')),
}
},
watch:{
'$store.state.menu':{
handler(val,old){
if(!old&&this.user&&this.user.no){
this.$store.commit("setRouter",val)
}
},
immediate:true
}
}
}
</script>
<style>
</style>store/index.js中添加
mutations: {
setMenu(state,menuList) {
state.menu=menuList
addNewRoute(menuList)
},
setRouter(state,menuList) {
addNewRoute(menuList)
}
},