非常简单实用的前后端分离项目-仓库管理系统（Springboot+Vue）part 4

三十三、出入库管理

 Header.vue导一下,RecordController加一个

 //将入库数据和原有数据相加吧//新增@PostMapping("/save")public Result save(@RequestBody Record record) {return recordService.save(record) ? Result.success() : Result.fail();}

GoodsManage.vue

<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-optionv-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-optionv-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'}"borderhighlight-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-popconfirmtitle="确定删除吗？"@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-dialogtitle="提示":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-optionv-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-optionv-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-dialogtitle="提示":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 = truethis.$nextTick(() => {this.resetForm()this.form.id = ''})},inGoods() {if (!this.currentRow.id) {alert('请选择记录');return;}this.inDialogVisible = truethis.$nextTick(() => {this.resetInForm()})this.form1.goodsname = this.currentRow.namethis.form1.goods = this.currentRow.idthis.form1.adminId = this.user.id},mod(row) {//this.form=row就可以了this.centerDialogVisible = truethis.$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 = truethis.$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 = falsethis.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.datathis.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 = falsethis.loadPost();this.resetInForm()} else {this.$message({message: '操作失败!请返回重新操作...',type: 'error'});}});},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据this.pageSize = valthis.loadPost()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = valthis.loadPost()}},beforeMount() {this.loadStorage()this.loadGoodsType()this.loadPost()}
}</script>

1. 表里没有操作时间的，按我说的来做，数据库里面类型修改为timestamp，默认那里再加上CURRENT_TIMESTAMP这个默认值,

2.没有时间的直接改成`createtime` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '操作时间' ON UPDATE CURRENT_TIMESTAMP

3.操作时间为空的搜一下mybaitsplus的注解@TableField，加在实体类里

方法选一个即可 

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的相关方法

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 {@Autowiredprivate RecordService recordService;@Autowiredprivate 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添加出库相关的内容

 //将入库数据和原有数据相加吧//新增@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

<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-optionv-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'}"borderhighlight-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-dialogtitle="提示":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 = truethis.$nextTick(() => {this.resetForm()})},mod(row) {//this.form=row就可以了this.centerDialogVisible = truethis.$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 = truethis.$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 = falsethis.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.datathis.total = res.total} else {alert('获取数据失败！请刷新页面')}})},resetParam() {this.name = ''this.sex = ''},selectCurrentChange(val) {//this.currentRow=valthis.$emit("doSelectUser",val)},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据this.pageSize = valthis.loadPost()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = valthis.loadPost()}},beforeMount() {// this.loadGet();this.loadPost()}
}</script>

GoodsManage.vue

<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-optionv-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-optionv-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'}"borderhighlight-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-popconfirmtitle="确定删除吗？"@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-dialogtitle="物品维护":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-optionv-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-optionv-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-dialogtitle="出入库":visible.sync="inDialogVisible"width="30%"center><el-dialogwidth="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.namethis.userid = this.tempUser.idthis.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 = truethis.$nextTick(() => {this.resetForm()this.form.id = ''})},inGoods() {if (!this.currentRow.id) {alert('请选择记录');return;}this.inDialogVisible = truethis.$nextTick(() => {this.resetInForm()})this.form1.goodsname = this.currentRow.namethis.form1.goods = this.currentRow.idthis.form1.adminId = this.user.idthis.form1.action = '1'},outGoods() {if (!this.currentRow.id) {alert('请选择记录');return;}this.inDialogVisible = truethis.$nextTick(() => {this.resetInForm()})this.form1.goodsname = this.currentRow.namethis.form1.goods = this.currentRow.idthis.form1.adminId = this.user.idthis.form1.action = '2'},mod(row) {//this.form=row就可以了this.centerDialogVisible = truethis.$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 = truethis.$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 = falsethis.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.datathis.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 = falsethis.loadPost();this.resetInForm()} else {this.$message({message: '操作失败!请返回重新操作...',type: 'error'});}});},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据this.pageSize = valthis.loadPost()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = valthis.loadPost()}},beforeMount() {this.loadStorage()this.loadGoodsType()this.loadPost()}
}</script>

申请人不知道为什么没传上去 😡😡😡😡😡😡😡😡😡😡😡😡

三十四、权限控制优化

如果要保险得在后端用过滤器进行监听,但是我懒得做

SelectUser

<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-optionv-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'}"borderhighlight-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-dialogtitle="提示":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 = truethis.$nextTick(() => {this.resetForm()})},mod(row) {//this.form=row就可以了this.centerDialogVisible = truethis.$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 = truethis.$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 = falsethis.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.datathis.total = res.total} else {alert('获取数据失败！请刷新页面')}})},resetParam() {this.name = ''this.sex = ''},selectCurrentChange(val) {//this.currentRow=valthis.$emit("doSelectUser",val)},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据this.pageSize = valthis.loadPost()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = valthis.loadPost()}},beforeMount() {// this.loadGet();this.loadPost()}
}</script>

GoodsManage

<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-optionv-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-optionv-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'}"borderhighlight-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-popconfirmtitle="确定删除吗？"@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-dialogtitle="物品维护":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-optionv-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-optionv-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-dialogtitle="出入库":visible.sync="inDialogVisible"width="30%"center><el-dialogwidth="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.namethis.userid = this.tempUser.idthis.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 = truethis.$nextTick(() => {this.resetForm()this.form.id = ''})},inGoods() {if (!this.currentRow.id) {alert('请选择记录');return;}this.inDialogVisible = truethis.$nextTick(() => {this.resetInForm()})this.form1.goodsname = this.currentRow.namethis.form1.goods = this.currentRow.idthis.form1.adminId = this.user.idthis.form1.action = '1'},outGoods() {if (!this.currentRow.id) {alert('请选择记录');return;}this.inDialogVisible = truethis.$nextTick(() => {this.resetInForm()})this.form1.goodsname = this.currentRow.namethis.form1.goods = this.currentRow.idthis.form1.adminId = this.user.idthis.form1.action = '2'},mod(row) {//this.form=row就可以了this.centerDialogVisible = truethis.$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 = truethis.$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 = falsethis.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.datathis.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 = falsethis.loadPost();this.resetInForm()} else {this.$message({message: '操作失败!请返回重新操作...',type: 'error'});}});},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据this.pageSize = valthis.loadPost()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = valthis.loadPost()}},beforeMount() {this.loadStorage()this.loadGoodsType()this.loadPost()}
}</script>

RecordManage

<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-optionv-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-optionv-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 = truethis.$nextTick(() => {this.resetForm()this.form.id = ''})},mod(row) {//this.form=row就可以了this.centerDialogVisible = truethis.$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 = truethis.$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 = falsethis.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.datathis.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 = valthis.loadPost()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = valthis.loadPost()}},beforeMount() {this.loadGoodsType()this.loadStorage()this.loadPost()}
}</script>

RecordController

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 {@Autowiredprivate RecordService recordService;@Autowiredprivate 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

<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-optionv-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-popconfirmtitle="确定删除吗？"@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-dialogtitle="提示":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 = truethis.$nextTick(() => {this.resetForm()})},mod(row) {//this.form=row就可以了this.centerDialogVisible = truethis.$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 = truethis.$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 = falsethis.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.datathis.total = res.total} else {alert('获取数据失败！请刷新页面')}})},resetParam() {this.name = ''this.sex = ''},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageNum = 1//这个错误是先翻到第二页在调页面条数，显示无数据this.pageSize = valthis.loadPost()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = valthis.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中

<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=menuListaddNewRoute(menuList)},setRouter(state,menuList) {addNewRoute(menuList)}
},