pcygfhfke
/
ECOM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request '提交测试1' (#8) from 王兆华 into main

Browse Source
王佳龙
pk6txuy2w 4 months ago
parent ef2ec46a09 78e2ee06a8
commit e3f14e0369
20 changed files with 6080 additions and 3390 deletions
Show Stats Download Patch File Download Diff File

69
superMarket-frontend/src/views/Home.vue
Unescape View File

@ -1,38 +1,57 @@
<template>
<!-- 根容器 -->
<div>
<!-- 面包屑导航，使用 "/" 作为分隔符 -->
<el-breadcrumb separator="/">
<!-- 面包屑的首页项 -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
</el-breadcrumb><br />
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 具有 id 为 home_bg 的 div 容器，用于展示欢迎信息和背景图片 -->
<div id="home_bg">
<h1 style="color: white;font-size: 28px;text-align: center;width: 1024px;">欢迎访问超市管理系统</h1>
<!-- 一级标题，设置文本颜色为白色，字体大小为 28px，文本居中对齐，宽度为 1024px -->
<h1 style="color: white;font-size: 28px;text-align: center;width: 1024px;">欢迎访问电商管理系统</h1>
</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
mounted() {
},
};
// 导出默认的 Vue 组件配置对象
export default {
// 定义组件的数据
data() {
return {
// 目前数据对象为空，没有定义任何响应式数据
};
},
// 定义组件的方法
methods: {
// 目前方法对象为空，没有定义任何方法
},
// 组件挂载完成后的钩子函数
mounted() {
// 目前该钩子函数为空，没有在组件挂载后执行任何操作
},
};
</script>
<style>
#home_bg {
top: 0;
left: 0;
overflow-y: auto;
height: 80vh;
background-image: url("../assets/55.png");
background-repeat: no-repeat;
text-align: center;
}
</style>
/* 选择 id 为 home_bg 的元素进行样式设置 */
#home_bg {
/* 元素顶部与父元素顶部对齐 */
top: 0;
/* 元素左侧与父元素左侧对齐 */
left: 0;
/* 当内容超过容器高度时，显示垂直滚动条 */
overflow-y: auto;
/* 设置容器高度为视口高度的 80% */
height: 80vh;
/* 设置背景图片为指定路径下的 55.png 文件 */
background-image: url("../assets/55.png");
/* 背景图片不重复显示 */
background-repeat: no-repeat;
/* 文本居中对齐 */
text-align: center;
}
</style>

364
superMarket-frontend/src/views/Login.vue
Unescape View File

@ -1,185 +1,221 @@
<template>
<!-- 页面的根容器，类名为 container -->
<div class="container">
<div style="width: 25%; display: flex;background-color: rgba(255,255,255,0.9);">
<div style="flex: 1;width: 50%;padding: 40px;display: flex;flex-direction: column;justify-content: center;" >
<div style="text-align: center; font-size: 28px; margin-bottom: 20px; color: #0481de;font-weight: bold;">超 市 管 理 系 统</div>
<br>
<el-form :model="loginForm" ref="loginForm" class="demo-ruleForm">
<el-form-item prop="username">
<el-row>
<el-col :span="2" style="text-align: right">
<i
class="iconfont icon-r-user1"
style="font-size: 26px;color: grey;"
>
</i>
</el-col>
<el-col
:span="22"
style="text-align: left; padding-left: 10px"
>
<el-input
v-model="loginForm.username"
placeholder="账号"
></el-input>
</el-col>
</el-row>
</el-form-item>
<!-- 用于登录表单的容器，宽度占比 25%，使用 flex 布局，背景颜色为半透明白色 -->
<div style="width: 25%; display: flex;background-color: rgba(255,255,255,0.9);">
<!-- 内部容器，flex 占比为 1，宽度 50%，内边距 40px，使用 flex 列布局，内容垂直居中 -->
<div style="flex: 1;width: 50%;padding: 40px;display: flex;flex-direction: column;justify-content: center;" >
<!-- 显示系统名称的文本，居中对齐，字体大小 28px，颜色为 #0481de，加粗 -->
<div style="text-align: center; font-size: 28px; margin-bottom: 20px; color: #0481de;font-weight: bold;">电 商 管 理 系 统</div>
<!-- 换行 -->
<br>
<!-- 表单组件，绑定数据到 loginForm，引用为 loginForm，类名为 demo-ruleForm -->
<el-form :model="loginForm" ref="loginForm" class="demo-ruleForm">
<!-- 账号表单项 -->
<el-form-item prop="username">
<!-- 行布局 -->
<el-row>
<!-- 左侧列，占 2 列宽度，文本右对齐 -->
<el-col :span="2" style="text-align: right">
<!-- 显示用户图标，字体大小 26px，颜色为灰色 -->
<i
class="iconfont icon-r-user1"
style="font-size: 26px;color: grey;"
>
</i>
</el-col>
<!-- 右侧列，占 22 列宽度，文本左对齐，左侧内边距 10px -->
<el-col
:span="22"
style="text-align: left; padding-left: 10px"
>
<!-- 输入框，双向绑定到 loginForm 的 username 属性，用于输入账号 -->
<el-input
v-model="loginForm.username"
placeholder="账号"
></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item prop="password">
<el-row>
<el-col :span="2" style="text-align: right">
<i
class="iconfont icon-r-lock"
style="font-size: 26px;color: grey;"
>
</i>
</el-col>
<el-col
:span="22"
style="text-align: left; padding-left: 10px"
>
<el-input
type="password"
v-model="loginForm.password"
placeholder="密码"
></el-input>
</el-col>
</el-row>
</el-form-item>
<br>
<el-form-item>
<el-button
style="font-size: 18px;width: 100%"
type="primary"
@click="submitForm('loginForm')"
>
登录</el-button
>
</el-form-item>
</el-form>
</div>
<!-- 密码表单项 -->
<el-form-item prop="password">
<!-- 行布局 -->
<el-row>
<!-- 左侧列，占 2 列宽度，文本右对齐 -->
<el-col :span="2" style="text-align: right">
<!-- 显示锁图标，字体大小 26px，颜色为灰色 -->
<i
class="iconfont icon-r-lock"
style="font-size: 26px;color: grey;"
>
</i>
</el-col>
<!-- 右侧列，占 22 列宽度，文本左对齐，左侧内边距 10px -->
<el-col
:span="22"
style="text-align: left; padding-left: 10px"
>
<!-- 密码输入框，双向绑定到 loginForm 的 password 属性，用于输入密码 -->
<el-input
type="password"
v-model="loginForm.password"
placeholder="密码"
></el-input>
</el-col>
</el-row>
</el-form-item>
<!-- 换行 -->
<br>
<!-- 提交按钮表单项 -->
<el-form-item>
<!-- 提交按钮，字体大小 18px，宽度 100%，类型为 primary，点击触发 submitForm 方法 -->
<el-button
style="font-size: 18px;width: 100%"
type="primary"
@click="submitForm('loginForm')"
>
登录
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</template>
<style>
/* 根容器样式，高度为视口高度 100vh，隐藏溢出内容，设置背景图片，使用 flex 布局，内容垂直水平居中，文本颜色为 #666 */
.container {
height: 100vh;
overflow: hidden;
background-image: url("../assets/bg1.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
/* 具有 id 为 login 的元素样式，固定定位，覆盖整个页面，隐藏垂直溢出内容，设置背景图片 */
#login {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow-y: hidden;
height: 100%;
background: url("../assets/img/01.jpg") center top / cover no-repeat;
}
/* 登录表单样式，白色背景，宽度 400px，高度 280px，居中显示，文本居中，上内边距 10px，边框样式、颜色和圆角设置，透明度 0.9 */
.loginForm {
background-color: white;
width: 400px;
height: 280px;
margin: 150px auto;
text-align: center;
padding-top: 10px;
border-color: #ffffff;
border-style: solid;
border-radius: 15px;
opacity: 0.9;
}
.container {
height: 100vh;
overflow: hidden;
/*background-color: #005aff;*/
background-image: url("../assets/bg1.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
#login {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow-y: hidden;
height: 100%;
background: url("../assets/img/01.jpg") center top / cover no-repeat;
}
.loginForm {
background-color: white;
width: 400px;
height: 280px;
margin: 150px auto;
text-align: center;
padding-top: 10px;
border-color: #ffffff;
border-style: solid;
border-radius: 15px;
opacity: 0.9;
}
/* 登录表单内输入框样式，宽度 260px */
.loginForm input {
width: 260px;
}
.loginForm input {
width: 260px;
}
/* h3 标签样式，上下外边距 10px */
h3 {
margin: 10px 0;
}
h3 {
margin: 10px 0;
}
.loginForm button {
margin-right: 40px;
}
/* 登录表单内按钮样式，右侧外边距 40px */
.loginForm button {
margin-right: 40px;
}
</style>
<script>
import { ajaxPost, popup } from "@/assets/js/common";
import Cookies from "js-cookie";
// 导入通用的 ajaxPost 函数和弹出提示框函数
import { ajaxPost, popup } from "@/assets/js/common";
// 导入 Cookies 库
import Cookies from "js-cookie";
export default {
data() {
return {
loginForm: {
username: "",
password: "",
export default {
// 组件的数据
data() {
return {
// 登录表单数据，包含账号和密码字段
loginForm: {
username: "",
password: "",
},
// 表单验证规则，账号必填，密码必填且长度在 5 到 8 位之间
rules: {
username: [
{
required: true,
message: "账号不能为空",
trigger: "blur",
},
],
password: [
{
required: true,
message: "密码不能为空",
trigger: "blur",
},
{
min: 6,
max: 8,
message: "密码长度为 5-8 位",
trigger: "blur",
},
],
},
};
},
// 组件的方法
methods: {
// 提交表单的方法，验证表单数据，通过后发送登录请求，根据响应处理登录结果
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
ajaxPost("/login", this.loginForm).then((res) => {
res = res.data;
if (res.code == 200) {
// 登录成功，设置 token 和 employee 的 cookie，有效期为 1/48 天
Cookies.set("token", res.data.token, {
expires: 1 / 48,
});
Cookies.set(
"employee",
JSON.stringify(res.data.employee),
{ expires: 1 / 48 }
);
// 弹出登录成功提示，跳转到首页
popup("登录成功，请稍等...");
this.$router.push("/index");
} else {
// 登录失败，弹出错误提示
popup(res.msg, "warning");
}
});
} else {
// 表单验证失败，弹出错误提示
popup("账号或密码格式不正确！", "error");
}
});
},
rules: {
username: [
{
required: true,
message: "账号不能为空",
trigger: "blur",
},
],
password: [
{
required: true,
message: "密码不能为空",
trigger: "blur",
},
{
min: 6,
max: 8,
message: "密码长度为5-8位",
trigger: "blur",
},
],
// 重置表单的方法，调用表单的 resetFields 方法重置表单字段
resetForm(formName) {
this.$refs[formName].resetFields();
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
ajaxPost("/login", this.loginForm).then((res) => {
res = res.data;
if (res.code == 200) {
Cookies.set("token", res.data.token, {
expires: 1 / 48,
});
Cookies.set(
"employee",
JSON.stringify(res.data.employee),
{ expires: 1 / 48 }
);
popup("登录成功，请稍等...");
this.$router.push("/index");
} else {
popup(res.msg, "warning");
}
});
} else {
popup("账号或密码格式不正确！", "error");
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
};
</script>

296
superMarket-frontend/src/views/index.vue
Unescape View File

@ -1,25 +1,34 @@
<template>
<!-- 使用 el-container 布局容器 -->
<el-container>
<!-- 页面头部区域，设置高度为 80px -->
<el-header style="height: 80px">
<!-- 行布局 -->
<el-row>
<!-- 左侧列，占 12 列宽度，设置顶部外边距为 20px -->
<el-col :span="12" style="margin-top: 20px">
<!-- 显示系统图标和名称 -->
<i
style="color: white; font-size: 32px"
class="iconfont icon-r-building"
>
<b style="font-size: 26px"> 超市管理系统</b></i
<b style="font-size: 26px"> 电商管理系统</b></i
>
</el-col>
<!-- 右侧列，占 12 列宽度，文本右对齐，设置顶部外边距为 15px，鼠标指针为手型 -->
<el-col
:span="12"
style="text-align: right; margin-top: 15px; cursor: pointer"
>
<!-- 下拉菜单组件 -->
<el-dropdown>
<!-- 头像组件，设置大小为 50，形状为方形，头像图片来源 -->
<el-avatar
:size="50"
shape="square"
:src="BaseApi + circleUrl"
></el-avatar>
<!-- 显示用户类型（管理员或用户）和用户名 -->
<b
style="
font-size: 24px;
@ -27,21 +36,26 @@
margin-top: -10px;
"
>
{{isAdmin ? "管理员 " : "用户 "}}
{{isAdmin? "管理员 " : "用户 "}}
{{ loginName }}</b
>
<!-- 下拉菜单内容 -->
<el-dropdown-menu slot="dropdown">
<!-- 个人资料完善菜单项，点击触发 informationBtn 方法 -->
<el-dropdown-item @click.native="informationBtn">个人资料完善</el-dropdown-item>
<!-- 退出菜单项，点击触发 empExit 方法 -->
<el-dropdown-item @click.native="empExit">退出</el-dropdown-item>
<!-- 注销菜单项，点击将 logoutVisable 设置为 true，显示注销账户对话框 -->
<el-dropdown-item @click.native="logoutVisable = true">注销</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-header>
<!--注销账户-->
<!-- 注销账户对话框，标题为“注销账户”，双向绑定显示状态到 logoutVisable，宽度为 70% -->
<el-dialog title="注销账户" :visible.sync="logoutVisable" width="70%">
<!-- 表单组件，绑定数据到 logoutform，设置验证规则，引用为 logoutform -->
<el-form
:model="logoutform"
:rules="rules"
@ -49,18 +63,22 @@
label-width="100px"
class="demo-ruleForm"
>
<!-- 内容表单项，输入框双向绑定到 logoutform 的 content 属性 -->
<el-form-item label="内容" prop="content">
<el-input
v-model="logoutform.content"
placeholder="请填写“本人确定注销”"
placeholder="请填写‘本人确定注销’"
></el-input>
</el-form-item>
<!-- 确定和取消按钮表单项 -->
<el-form-item>
<!-- 确定按钮，点击触发 logoutSubmit 方法，传递表单引用 -->
<el-button
type="primary"
@click="logoutSubmit('logoutform')"
>确 定</el-button
>
<!-- 取消按钮，点击触发 logoutCel 方法，传递表单引用 -->
<el-button @click="logoutCel('logoutform')"
>取 消</el-button
>
@ -68,8 +86,11 @@
</el-form>
</el-dialog>
<!-- 另一个 el-container 布局容器 -->
<el-container>
<!-- 侧边栏，宽度为 200px，设置最小高度为 900px，隐藏垂直滚动条 -->
<el-aside width="200px" style="overflow-y: hidden;min-height: 900px;">
<!-- 菜单组件，设置背景颜色、文本颜色、激活文本颜色，启用路由，唯一打开 -->
<el-menu
background-color="#6495ED"
text-color="white"
@ -77,12 +98,15 @@
:unique-opened="true"
active-text-color="#FFDEAD"
>
<!-- 遍历 menu_catalogs 数组生成子菜单 -->
<el-submenu
v-for="item in menu_catalogs"
:key="item.id"
:index="item.id + ''"
>
<!-- 子菜单标题模板 -->
<template slot="title">
<!-- 显示菜单图标和标签 -->
<i
:class="item.icon"
style="font-size: 26px; color: white"
@ -90,12 +114,15 @@
<b style="font-size: 18px"> {{ item.label }}</b>
</i>
</template>
<!-- 菜单项组 -->
<el-menu-item-group>
<!-- 遍历子菜单的子项生成菜单项 -->
<el-menu-item
v-for="c in item.children"
:key="c.id"
:index="c.purl"
>
<!-- 显示菜单项图标和标签 -->
<i :class="c.icon" style="font-size: 24px"> </i>
<b style="font-size: 16px"> {{ c.label }}</b>
</el-menu-item>
@ -103,6 +130,7 @@
</el-submenu>
</el-menu>
</el-aside>
<!-- 主要内容区域，显示路由视图 -->
<el-main>
<router-view />
</el-main>
@ -110,139 +138,153 @@
</el-container>
</template>
<script>
import { clearCookie, loginEmp } from "@/assets/js/auth";
import { ajaxGet, ajaxPost, popup } from "@/assets/js/common";
import Cookies from "js-cookie";
// 导入清除 cookie 和获取登录员工信息的函数
import { clearCookie, loginEmp } from "@/assets/js/auth";
// 导入通用的 ajaxGet、ajaxPost 函数和弹出提示框函数
import { ajaxGet, ajaxPost, popup } from "@/assets/js/common";
// 导入 Cookies 库
import Cookies from "js-cookie";
export default {
data() {
return {
BaseApi: this.$store.state.BaseApi,
logoutVisable: false,
loginName: "",
isAdmin: "",
logoutform: {},
circleUrl: loginEmp().headImg,
menu_catalogs: [],
rules: {
content: [
{
required: true,
message: "内容不能为空",
trigger: "blur",
},
],
},
};
},
methods: {
init() {
this.isAdmin = loginEmp().isAdmin;
this.loginName = loginEmp().nickName;
ajaxGet("/empMenu", {}).then((res) => {
res = res.data;
if (res.code == 200) {
this.menu_catalogs = res.data;
}
});
},
/*个人资料*/
informationBtn() {
this.$router.push("/personal/information");
popup("请完善个人的资料");
export default {
// 组件的数据
data() {
return {
// 基础 API 地址，从 Vuex store 中获取
BaseApi: this.$store.state.BaseApi,
// 注销账户对话框的显示状态
logoutVisable: false,
// 登录用户名
loginName: "",
// 用户是否为管理员
isAdmin: "",
// 注销账户表单数据
logoutform: {},
// 头像图片的相对路径，通过 loginEmp 函数获取
circleUrl: loginEmp().headImg,
// 菜单目录数据
menu_catalogs: [],
// 表单验证规则，content 字段必填
rules: {
content: [
{
required: true,
message: "内容不能为空",
trigger: "blur",
},
],
},
};
},
/*账户退出*/
empExit() {
this.$confirm("确定要退出系统?", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
ajaxGet("/exit", this.pwdForm).then((res) => {
res = res.data;
if (res.code == 200) {
popup("成功退出系统...");
clearCookie("employee");
clearCookie("token");
this.$router.push("/");
} else {
popup(res.msg, "error");
}
});
// 组件的方法
methods: {
// 初始化方法，获取用户信息和菜单数据
init() {
this.isAdmin = loginEmp().isAdmin;
this.loginName = loginEmp().nickName;
// 发送 GET 请求获取菜单数据
ajaxGet("/empMenu", {}).then((res) => {
res = res.data;
if (res.code == 200) {
// 如果请求成功，更新菜单目录数据
this.menu_catalogs = res.data;
}
});
},
/*个人资料完善方法，跳转到个人资料页面并弹出提示*/
informationBtn() {
this.$router.push("/personal/information");
popup("请完善个人的资料");
},
/*账户退出方法，弹出确认对话框，确认后发送请求退出系统并清除 cookie，跳转到首页*/
empExit() {
this.$confirm("确定要退出系统?", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作",
.then(() => {
ajaxGet("/exit", this.pwdForm).then((res) => {
res = res.data;
if (res.code == 200) {
popup("成功退出系统...");
clearCookie("employee");
clearCookie("token");
this.$router.push("/");
} else {
popup(res.msg, "error");
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作",
});
});
},
/*注销账户取消方法，重置表单字段，清空表单数据，关闭对话框*/
logoutCel(formName) {
this.$refs[formName].resetFields();
this.logoutform = {};
this.logoutVisable = false;
},
/*注销账户提交方法，验证表单数据，通过后发送请求注销账户，成功后清除 cookie，关闭对话框，跳转到首页*/
logoutSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
ajaxPost("/logout", {
content: this.logoutform.content,
}).then((res) => {
res = res.data;
if (res.code == 200) {
popup("注销成功");
clearCookie("employee");
clearCookie("token");
this.logoutVisable = false;
this.$router.push("/");
} else {
popup(res.msg, "error");
}
});
}
});
},
},
/*注销账户*/
logoutCel(formName) {
this.$refs[formName].resetFields();
this.logoutform = {};
this.logoutVisable = false;
},
logoutSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
ajaxPost("/logout", {
content: this.logoutform.content,
}).then((res) => {
res = res.data;
if (res.code == 200) {
popup("注销成功");
clearCookie("employee");
clearCookie("token");
this.logoutVisable = false;
this.$router.push("/");
} else {
popup(res.msg, "error");
}
});
}
});
// 组件挂载完成后的钩子函数，调用 init 方法初始化数据
mounted() {
this.init();
},
},
mounted() {
this.init();
},
};
};
</script>
<style>
.avatar {
display: inline-block;
width: 200px;
float: right;
}
.personalFul {
background-color: #ffffff;
position: absolute;
z-index: 999999;
top: 58px;
right: 20px;
width: 151px;
}
/* 头像样式，内联块显示，宽度 200px，浮动到右侧 */
.avatar {
display: inline-block;
width: 200px;
float: right;
}
/* .personalFul ul > li {
margin: 1px auto;
padding: 0px;
height: 20px;
color: #ffffff;
background-color: #6495ED;
list-style-type: none;
} */
/* 个人资料下拉菜单样式，白色背景，绝对定位，z 轴层级为 999999，顶部距离 58px，右侧距离 20px，宽度 151px */
.personalFul {
background-color: #ffffff;
position: absolute;
z-index: 999999;
top: 58px;
right: 20px;
width: 151px;
}
.personalFul ul > li:hover {
background-color: #fc4316;
}
/* 个人资料下拉菜单列表项鼠标悬停样式，背景颜色为 #fc4316 */
.personalFul ul > li:hover {
background-color: #fc4316;
}
.el-menu-item i {
color: white;
}
.el-submenu__title i {
color: white;
}
/* 菜单项图标颜色为白色 */
.el-menu-item i {
color: white;
}
/* 子菜单标题图标颜色为白色 */
.el-submenu__title i {
color: white;
}
</style>

713
superMarket-frontend/src/views/inventory_management/detail_store_goods_in/List.vue
View File

File diff suppressed because it is too large Load Diff

526
superMarket-frontend/src/views/inventory_management/detail_store_goods_in/notice/List.vue
Unescape View File

@ -1,53 +1,73 @@
<template>
<!-- 组件模板的根元素 -->
<div>
<!-- 搜索表单的容器 -->
<div class="searchForm">
<!-- 商品名输入框的列 -->
<div class="column">
<!-- 商品名标签 -->
<span>商品名：</span>
<!-- 输入框，用于输入商品名，绑定到 searchForm.name -->
<el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm.name"/>
</div>
<!-- 搜索按钮的列 -->
<div class="column">
<!-- 成功类型的按钮，点击触发 submitSearchForm 方法 -->
<el-button type="success" @click="submitSearchForm">搜索</el-button>
</div>
</div>
<!-- 表格的容器 -->
<div class="table">
<!-- Element UI 表格组件，数据绑定到 tableData -->
<el-table
:data="tableData"
style="width: 100%;"
size="medium">
<!-- 序号列，使用 type="index" 自动生成序号 -->
<el-table-column
width="200"
type="index"
label="序号">
</el-table-column>
<!-- 封面列，展示商品封面图片 -->
<el-table-column
prop="coverUrl"
label="封面">
<!-- 自定义列内容的模板 -->
<template v-slot="scope">
<!-- 图片标签，高度固定为 60px，图片地址绑定到当前行的 coverUrl -->
<img height="60px" :src="scope.row.coverUrl">
</template>
</el-table-column>
<!-- 商品名列，展示商品名称 -->
<el-table-column
prop="name"
label="商品名">
</el-table-column>
<!-- 进货单价列，展示商品进货单价 -->
<el-table-column
prop="purchashPrice"
label="进货单价">
</el-table-column>
<!-- 入库数量列，展示商品入库数量 -->
<el-table-column
prop="goodsNum"
label="入库数量">
</el-table-column>
<!-- 操作列，包含入库按钮 -->
<el-table-column>
<!-- 自定义列内容的模板 -->
<template v-slot="scope">
<!-- 成功类型的按钮，点击触发 goodsInBtn 方法，传入当前行数据 -->
<el-button type="success"
@click="goodsInBtn(scope.row)" plain>入库
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件的容器 -->
<div style="margin: 10px 0 15px 0;">
<!-- Element UI 分页组件 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@ -60,19 +80,23 @@
</div>
</div>
<!--商品入库表单-->
<!-- 商品入库表单对话框 -->
<el-dialog
title="商品入库"
:visible.sync="goodsInVisable"
width="50%">
<!-- 选择商品和仓库表单，当 selectGoodsVisable 为 true 时显示 -->
<el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
class="demo-ruleForm">
<!-- 商品选择表单项 -->
<el-form-item style="width:40%" label="商品：" prop="goodsId">
<!-- 禁用的下拉选择框，绑定到 selectGoods.goodsId -->
<el-select disabled v-model="selectGoods.goodsId"
placeholder="请选择商品"
filterable
@change="$forceUpdate()"
clearable>
<!-- 循环渲染商品选项 -->
<el-option
v-for="item in options_goods"
:key="item.id"
@ -81,12 +105,15 @@
</el-option>
</el-select>
</el-form-item>
<!-- 仓库选择表单项 -->
<el-form-item style="width:40%" label="仓库：" prop="storeId">
<!-- 下拉选择框，绑定到 selectGoods.storeId -->
<el-select v-model="selectGoods.storeId"
placeholder="请选择存储仓库"
filterable
@change="$forceUpdate()"
clearable>
<!-- 循环渲染仓库选项 -->
<el-option
v-for="item in options_store"
:key="item.id"
@ -95,33 +122,49 @@
</el-option>
</el-select>
</el-form-item>
<!-- 操作按钮表单项 -->
<el-form-item style="width:40%">
<!-- 成功类型的按钮，点击触发 selectedGoods 方法 -->
<el-button type="success" @click="selectedGoods('selectGoods')" plain>确定</el-button>
<!-- 警告类型的按钮，点击触发 closeSelectedGoods 方法 -->
<el-button type="warning" @click="closeSelectedGoods('selectGoods')" plain>关闭</el-button>
</el-form-item>
</el-form>
<!-- 详细入库信息表单，当 newVisable 为 true 时显示 -->
<el-form size="mini" v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
class="demo-ruleForm">
<!-- 表单布局行 -->
<el-row>
<!-- 左半部分列 -->
<el-col :span="12">
<!-- 商品名表单项 -->
<el-form-item style="width: 60%" label="商品名：">
<!-- 只读输入框，绑定到 newForm.goodsName -->
<el-input readonly v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
</el-form-item>
</el-col>
<!-- 右半部分列 -->
<el-col :span="12">
<!-- 商品数量表单项 -->
<el-form-item style="width: 60%" label="商品数量：" prop="goodsNum">
<!-- 输入框，绑定到 newForm.goodsNum -->
<el-input v-model="newForm.goodsNum" :placeholder="'如：'+newGoodsNum"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 表单布局行 -->
<el-row>
<!-- 左半部分列 -->
<el-col :span="12">
<!-- 供货商选择表单项 -->
<el-form-item style="width: 60%" label="供货商：" prop="supplierId">
<!-- 下拉选择框，绑定到 newForm.supplierId -->
<el-select v-model="newForm.supplierId"
placeholder="请选择供货商"
filterable
@change="$forceUpdate()"
clearable>
<!-- 循环渲染供货商选项 -->
<el-option
v-for="item in options_suppliers"
:key="item.id"
@ -131,15 +174,22 @@
</el-select>
</el-form-item>
</el-col>
<!-- 右半部分列 -->
<el-col :span="12">
<!-- 商品价格表单项 -->
<el-form-item style="width: 60%" label="商品价格：" prop="goodsPrice">
<!-- 输入框，绑定到 newForm.goodsPrice -->
<el-input v-model="newForm.goodsPrice" placeholder="如：1.0"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 表单布局行 -->
<el-row>
<!-- 左半部分列 -->
<el-col :span="12">
<!-- 生产日期表单项 -->
<el-form-item style="width: 60%" label="生产日期：" prop="birthTime">
<!-- 日期选择器，绑定到 newForm.birthTime -->
<el-date-picker
size="mini"
style="width: 140px"
@ -150,8 +200,11 @@
</el-date-picker>
</el-form-item>
</el-col>
<!-- 右半部分列 -->
<el-col :span="12">
<!-- 过期日期表单项 -->
<el-form-item style="width: 60%" label="过期日期：" prop="expiryTime">
<!-- 日期选择器，绑定到 newForm.expiryTime -->
<el-date-picker
size="mini"
style="width: 140px"
@ -163,16 +216,23 @@
</el-form-item>
</el-col>
</el-row>
<!-- 表单布局行 -->
<el-row>
<!-- 整行列 -->
<el-col :span="24">
<!-- 备注表单项 -->
<el-form-item style="width: 82%" label="备注：">
<!-- 文本输入框，绑定到 newForm.info -->
<el-input type="textarea" v-model="newForm.info" placeholder="如：农夫山泉入库"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 操作按钮表单项 -->
<el-form-item>
<!-- 主要类型的按钮，点击触发 submitNewForm 方法 -->
<el-button type="primary" @click="submitNewForm('newForm')">入库</el-button>
<!-- 按钮，点击触发 saveCancel 方法 -->
<el-button @click="saveCancel('newForm')">取消</el-button>
</el-form-item>
</el-form>
@ -181,230 +241,276 @@
</div>
</template>
<script>
import {popup} from "@/assets/js/common";
import {
queryGoodsStoreById,
queryPageByQo,
updateInventory
} from "@/api/goods_management/goods_store/goodsStoreApi";
import {queryPageNoticeIn} from "@/api/inventory_management/notice/noticeApi";
import {queryGoodsById, selected_goodsAll} from "@/api/goods_management/goods/goodsApi";
import {queryOptionsSuppliers, saveIn} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
import {storeList} from "@/api/inventory_management/store/storeApi";
// 从指定路径的文件中引入名为 popup 的函数，用于弹出提示信息
import {popup} from "@/assets/js/common";
// 从商品管理模块的商品库存 API 文件中引入三个函数
// queryGoodsStoreById 用于根据 ID 查询商品库存信息
// queryPageByQo 用于分页查询商品库存信息
// updateInventory 用于更新商品库存信息
import {
queryGoodsStoreById,
queryPageByQo,
updateInventory
} from "@/api/goods_management/goods_store/goodsStoreApi";
// 从库存管理模块的通知 API 文件中引入 queryPageNoticeIn 函数，用于分页查询通知信息
import {queryPageNoticeIn} from "@/api/inventory_management/notice/noticeApi";
// 从商品管理模块的商品 API 文件中引入两个函数
// queryGoodsById 用于根据 ID 查询商品信息
// selected_goodsAll 用于获取所有商品信息
import {queryGoodsById, selected_goodsAll} from "@/api/goods_management/goods/goodsApi";
// 从库存管理模块的入库明细 API 文件中引入两个函数
// queryOptionsSuppliers 用于查询供货商选项
// saveIn 用于保存商品入库信息
import {queryOptionsSuppliers, saveIn} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
// 从库存管理模块的仓库 API 文件中引入 storeList 函数，用于获取仓库列表信息
import {storeList} from "@/api/inventory_management/store/storeApi";
export default {
data() {
return {
newVisable: false,
goodsInVisable: false,
selectGoodsVisable: true,
newGoodsNum:'',
newForm: {
cn: '',
goodsId: '',
goodsNum: '',
goodsName: '',
goodsPrice: '',
info: '',
expiryTime: '',
birthTime: '',
storeId: ''
},
/*表格*/
tableData: [],
searchForm: {
total: 0,
currentPage: 1,
pageSize: 10,
state: '0'
},
options_goods: [],
options_store: [],
options_suppliers:[],
selectGoods: {},
rules: {
supplierId:[
{required: true, message: '供应商不能为空', trigger: 'blur'},
],
goodsId: [
{required: true, message: '商品编号不能为空', trigger: 'blur'},
],
storeId: [
{required: true, message: '仓库编号不能为空', trigger: 'blur'},
],
goodsNum: [
{required: true, message: '商品数量不能为空', trigger: 'blur'},
],
goodsPrice: [
{required: true, message: '商品价格不能为空', trigger: 'blur'},
],
expiryTime: [
{required: true, message: '过期时间不能为空', trigger: 'blur'},
],
birthTime: [
{required: true, message: '生产时间不能为空', trigger: 'blur'},
],
},
}
},
methods: {
init() {
queryPageNoticeIn(this.searchForm).then(res => {
res = res.data
if (res.code == 200) {
console.log(res.data)
this.tableData = res.data.records
this.searchForm.total = res.data.total
this.searchForm.pageSize = res.data.size
this.searchForm.currentPage = res.data.current
} else {
popup(res.msg, "error")
}
})
},
/*分页*/
handleSizeChange(val) {
this.searchForm.pageSize = val
this.init()
console.log(`每页 ${val} 条`);
// 导出一个默认的 Vue 组件对象
export default {
// 定义组件的数据属性
data() {
return {
// 控制新的商品入库表单是否可见，初始值为 false（不可见）
newVisable: false,
// 控制商品入库对话框是否可见，初始值为 false（不可见）
goodsInVisable: false,
// 控制选择商品和仓库的表单是否可见，初始值为 true（可见）
selectGoodsVisable: true,
// 用于存储新商品数量的变量，初始值为空字符串
newGoodsNum:'',
// 用于存储新商品入库表单数据的对象，包含多个属性
newForm: {
cn: '', // 入库编号，初始值为空字符串
goodsId: '', // 商品 ID，初始值为空字符串
goodsNum: '', // 商品数量，初始值为空字符串
goodsName: '', // 商品名称，初始值为空字符串
goodsPrice: '', // 商品价格，初始值为空字符串
info: '', // 备注信息，初始值为空字符串
expiryTime: '', // 过期时间，初始值为空字符串
birthTime: '', // 生产日期，初始值为空字符串
storeId: '' // 仓库 ID，初始值为空字符串
},
handleCurrentChange(val) {
this.searchForm.currentPage = val
this.init()
console.log(`当前页: ${val}`);
/*表格相关数据*/
// 用于存储表格数据的数组，初始值为空数组
tableData: [],
// 用于存储搜索表单数据的对象，包含多个属性
searchForm: {
total: 0, // 总记录数，初始值为 0
currentPage: 1, // 当前页码，初始值为 1
pageSize: 10, // 每页显示的记录数，初始值为 10
state: '0' // 状态，初始值为 '0'
},
submitSearchForm() {
this.init()
// 用于存储商品选项的数组，初始值为空数组
options_goods: [],
// 用于存储仓库选项的数组，初始值为空数组
options_store: [],
// 用于存储供货商选项的数组，初始值为空数组
options_suppliers:[],
// 用于存储选择的商品和仓库信息的对象，初始值为空对象
selectGoods: {},
// 用于表单验证的规则对象，包含多个字段的验证规则
rules: {
supplierId:[
{required: true, message: '供应商不能为空', trigger: 'blur'}, // 供应商 ID 字段必填，失去焦点时触发验证
],
goodsId: [
{required: true, message: '商品编号不能为空', trigger: 'blur'}, // 商品 ID 字段必填，失去焦点时触发验证
],
storeId: [
{required: true, message: '仓库编号不能为空', trigger: 'blur'}, // 仓库 ID 字段必填，失去焦点时触发验证
],
goodsNum: [
{required: true, message: '商品数量不能为空', trigger: 'blur'}, // 商品数量字段必填，失去焦点时触发验证
],
goodsPrice: [
{required: true, message: '商品价格不能为空', trigger: 'blur'}, // 商品价格字段必填，失去焦点时触发验证
],
expiryTime: [
{required: true, message: '过期时间不能为空', trigger: 'blur'}, // 过期时间字段必填，失去焦点时触发验证
],
birthTime: [
{required: true, message: '生产时间不能为空', trigger: 'blur'}, // 生产日期字段必填，失去焦点时触发验证
],
},
}
},
// 定义组件的方法
methods: {
// 初始化数据的方法
init() {
// 调用 queryPageNoticeIn 函数，传入 searchForm 作为参数进行分页查询通知信息
queryPageNoticeIn(this.searchForm).then(res => {
res = res.data // 获取响应的数据部分
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
console.log(res.data) // 在控制台打印响应数据
this.tableData = res.data.records // 更新表格数据
this.searchForm.total = res.data.total // 更新总记录数
this.searchForm.pageSize = res.data.size // 更新每页显示的记录数
this.searchForm.currentPage = res.data.current // 更新当前页码
} else { // 如果响应码不为 200（表示请求失败）
popup(res.msg, "error") // 弹出错误提示信息
}
})
},
/*分页相关方法*/
// 处理每页显示记录数变化的方法
handleSizeChange(val) {
this.searchForm.pageSize = val // 更新每页显示的记录数
this.init() // 重新调用 init 方法以更新数据
console.log(`每页 ${val} 条`); // 在控制台打印每页显示的记录数
},
// 处理当前页码变化的方法
handleCurrentChange(val) {
this.searchForm.currentPage = val // 更新当前页码
this.init() // 重新调用 init 方法以更新数据
console.log(`当前页: ${val}`); // 在控制台打印当前页码
},
// 提交搜索表单的方法
submitSearchForm() {
this.init() // 重新调用 init 方法以根据搜索条件更新数据
},
detailStoreGoodsIn_goodsAll() {
selected_goodsAll().then(res => {
res = res.data
if (res.code == 200) {
this.options_goods = res.data
} else {
popup(res.msg, 'error')
// 获取所有商品信息的方法
detailStoreGoodsIn_goodsAll() {
selected_goodsAll().then(res => { // 调用 selected_goodsAll 函数获取所有商品信息
res = res.data // 获取响应的数据部分
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
this.options_goods = res.data // 更新商品选项数组
} else { // 如果响应码不为 200（表示请求失败）
popup(res.msg, 'error') // 弹出错误提示信息
}
})
},
// 获取所有供货商信息的方法
detailStoreGoodsIn_suppliers(){
queryOptionsSuppliers().then(res=>{ // 调用 queryOptionsSuppliers 函数获取供货商选项
res=res.data // 获取响应的数据部分
if (res.code==200){ // 如果响应码为 200（表示请求成功）
this.options_suppliers=res.data // 更新供货商选项数组
}else { // 如果响应码不为 200（表示请求失败）
popup(res.msg,"error") // 弹出错误提示信息
}
})
},
detailStoreGoodsIn_suppliers(){
queryOptionsSuppliers().then(res=>{
res=res.data
if (res.code==200){
this.options_suppliers=res.data
}else {
popup(res.msg,"error")
}
}
)
},
// 获取所有仓库信息的方法
detailStoreGoodsIn_storeAll() {
storeList({state: '0'}).then(res => { // 调用 storeList 函数，传入状态为 '0' 获取仓库列表
res = res.data // 获取响应的数据部分
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
for (var item of res.data) { // 遍历响应数据
this.options_store.push({id: item.id, name: item.name}) // 将仓库信息添加到仓库选项数组中
}
)
},
detailStoreGoodsIn_storeAll() {
storeList({state: '0'}).then(res => {
res = res.data
if (res.code == 200) {
for (var item of res.data) {
this.options_store.push({id: item.id, name: item.name})
} else { // 如果响应码不为 200（表示请求失败）
popup(res.msg, "error") // 弹出错误提示信息
}
})
},
// 处理选择商品和仓库表单提交的方法
selectedGoods(formName) {
this.$refs[formName].validate((valid) => { // 验证指定表单的字段是否符合规则
if (valid) { // 如果验证通过
queryGoodsById({id: this.selectGoods.goodsId}).then(res => { // 根据选择的商品 ID 查询商品信息
res = res.data // 获取响应的数据部分
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
this.selectGoodsVisable = false // 隐藏选择商品和仓库的表单
this.newVisable = true // 显示新的商品入库表单
this.newForm.storeId = this.selectGoods.storeId // 设置新表单的仓库 ID
this.newForm.goodsId = res.data.id // 设置新表单的商品 ID
this.newForm.goodsName = res.data.name // 设置新表单的商品名称
this.newForm.goodsPrice = res.data.purchashPrice // 设置新表单的商品价格
} else { // 如果响应码不为 200（表示请求失败）
popup(res.msg, "error") // 弹出错误提示信息
}
} else {
popup(res.msg, "error")
}
})
},
selectedGoods(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
queryGoodsById({id: this.selectGoods.goodsId}).then(res => {
res = res.data
if (res.code == 200) {
this.selectGoodsVisable = false
this.newVisable = true
this.newForm.storeId = this.selectGoods.storeId
this.newForm.goodsId = res.data.id
this.newForm.goodsName = res.data.name
this.newForm.goodsPrice = res.data.purchashPrice
} else {
popup(res.msg, "error")
}
})
}
})
})
}
})
},
closeSelectedGoods(formName){
this.$refs[formName].resetFields()
this.goodsInVisable=false
this.newVisable = false
this.selectGoodsVisable = true
this.selectGoods={}
},
submitNewForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
saveIn(this.newForm).then(res => {
res = res.data
if (res.code == 200) {
popup("入库成功")
this.goodsInVisable=false
this.selectGoodsVisable = true
this.newVisable = false
this.init()
} else {
popup(res.msg, "error")
}
})
}
})
},
// 关闭选择商品和仓库表单的方法
closeSelectedGoods(formName){
this.$refs[formName].resetFields() // 重置指定表单的字段值
this.goodsInVisable=false // 隐藏商品入库对话框
this.newVisable = false // 隐藏新的商品入库表单
this.selectGoodsVisable = true // 显示选择商品和仓库的表单
this.selectGoods={} // 清空选择的商品和仓库信息对象
},
// 提交新商品入库表单的方法
submitNewForm(formName) {
this.$refs[formName].validate((valid) => { // 验证指定表单的字段是否符合规则
if (valid) { // 如果验证通过
saveIn(this.newForm).then(res => { // 调用 saveIn 函数保存商品入库信息
res = res.data // 获取响应的数据部分
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
popup("入库成功") // 弹出入库成功的提示信息
this.goodsInVisable=false // 隐藏商品入库对话框
this.selectGoodsVisable = true // 显示选择商品和仓库的表单
this.newVisable = false // 隐藏新的商品入库表单
this.init() // 重新调用 init 方法以更新数据
} else { // 如果响应码不为 200（表示请求失败）
popup(res.msg, "error") // 弹出错误提示信息
}
})
}
})
},
saveCancel(formName) {
this.$refs[formName].resetFields()
this.newVisable = false
this.selectGoodsVisable = true
},
goodsInBtn(row) {
this.selectGoods.goodsId=row.id
this.newGoodsNum=row.goodsNum
this.goodsInVisable = true
},
},
mounted() {
this.searchForm.state1 = '0'
this.detailStoreGoodsIn_goodsAll()
this.detailStoreGoodsIn_storeAll()
this.detailStoreGoodsIn_suppliers()
this.init()
}
// 取消新商品入库表单提交的方法
saveCancel(formName) {
this.$refs[formName].resetFields() // 重置指定表单的字段值
this.newVisable = false // 隐藏新的商品入库表单
this.selectGoodsVisable = true // 显示选择商品和仓库的表单
},
// 点击入库按钮时执行的方法
goodsInBtn(row) {
this.selectGoods.goodsId=row.id // 设置选择的商品 ID 为点击行的商品 ID
this.newGoodsNum=row.goodsNum // 设置新商品数量为点击行的商品数量
this.goodsInVisable = true // 显示商品入库对话框
},
},
// 组件挂载到 DOM 后执行的生命周期钩子函数
mounted() {
this.searchForm.state1 = '0' // 设置搜索表单的状态为 '0'
this.detailStoreGoodsIn_goodsAll() // 调用获取所有商品信息的方法
this.detailStoreGoodsIn_storeAll() // 调用获取所有仓库信息的方法
this.detailStoreGoodsIn_suppliers() // 调用获取所有供货商信息的方法
this.init() // 调用初始化数据的方法
}
}
</script>
<style>
.searchForm {
height: 134px;
}
/* 选择器.searchForm，用于选择类名为 searchForm 的元素 */
.searchForm {
height: 134px; /* 设置元素的高度为 134 像素 */
}
.table {
height: 320px;
}
/* 选择器.table，用于选择类名为 table 的元素 */
.table {
height: 320px; /* 设置元素的高度为 320 像素 */
}
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
/* 选择器.pageUtils，用于选择类名为 pageUtils 的元素 */
.pageUtils {
position: absolute; /* 设置元素的定位方式为绝对定位 */
width: 84%; /* 设置元素的宽度为父元素宽度的 84% */
margin: 2px auto; /* 上下外边距为 2 像素，左右自动居中 */
height: 43px; /* 设置元素的高度为 43 像素 */
}
.searchForm {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
/* 再次选择类名为 searchForm 的元素，这里重复定义了样式，后定义的样式会覆盖前面的 */
.searchForm {
display: inline-block; /* 设置元素的显示方式为行内块元素 */
margin: 0 auto; /* 上下外边距为 0，左右自动居中 */
height: 51px; /* 设置元素的高度为 51 像素 */
line-height: 51px; /* 设置元素的行高为 51 像素，通常用于使单行文本垂直居中 */
}
.searchForm .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
/* 选择器.searchForm.column，用于选择类名为 searchForm 的元素内部类名为 column 的元素 */
.searchForm .column {
display: inline-block; /* 设置元素的显示方式为行内块元素 */
margin: 0 auto; /* 上下外边距为 0，左右自动居中 */
margin-right: 2px; /* 设置元素的右外边距为 2 像素 */
line-height: 48px; /* 设置元素的行高为 48 像素 */
height: 51px; /* 设置元素的高度为 51 像素 */
}
</style>

731
superMarket-frontend/src/views/inventory_management/detail_store_goods_out/List.vue
View File

File diff suppressed because it is too large Load Diff

297
superMarket-frontend/src/views/inventory_management/detail_store_goods_out/notice/List.vue
Unescape View File

@ -1,67 +1,89 @@
<template>
<!-- 组件的根元素，设置唯一的 ID -->
<div id="detail_store_goods_in">
<!-- 包含标题和按钮的区域 -->
<div class="noticeOut">
<!-- 显示查看出库商品面板的标题 -->
<h1>查看出库商品面板</h1>
<!-- 包含两个按钮的区域 -->
<div class="btns">
<!-- 点击后调用 outGoodsBtn 方法，显示出库货架商品的对话框 -->
<el-button @click="outGoodsBtn" style="width: 200px;height: 100px;background-color: #c09dff">出库货架商品
</el-button>
<!-- 点击后调用 outUntreated 方法，显示过期/下架商品的对话框 -->
<el-button @click="outUntreated" style="width: 200px;height: 100px;background-color: #c09dff">过期/下架商品
</el-button>
</div>
</div>
<!--商品上货架-->
<!-- 商品上货架的对话框，全屏显示 -->
<el-dialog
:fullscreen="true"
:visible.sync="visable1">
<!-- 搜索表单区域 -->
<div class="searchForm">
<!-- 搜索表单的列，包含商品名输入框 -->
<div class="column">
<!-- 显示“商品名：”标签 -->
<span>商品名：</span>
<!-- 输入框，用于输入商品名，双向绑定到 searchForm.name -->
<el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm.name"/>
</div>
<!-- 搜索表单的列，包含搜索和关闭按钮 -->
<div class="column">
<!-- 点击后调用 submitSearchForm 方法进行搜索 -->
<el-button type="success" @click="submitSearchForm">搜索</el-button>
<!-- 点击后隐藏对话框 -->
<el-button type="primary" @click="visable1=false">关闭</el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table">
<!-- 表格组件，数据绑定到 tableData -->
<el-table
:data="tableData"
style="width: 100%;"
size="medium">
<!-- 表格列，显示序号 -->
<el-table-column
width="200"
type="index"
label="序号">
</el-table-column>
<!-- 表格列，显示商品封面 -->
<el-table-column
prop="coverUrl"
label="封面">
<!-- 自定义列内容，显示商品封面图片 -->
<template v-slot="scope">
<img height="60px" :src="scope.row.coverUrl">
</template>
</el-table-column>
<!-- 表格列，显示商品名 -->
<el-table-column
prop="name"
label="商品名">
</el-table-column>
<!-- 表格列，显示出货数量 -->
<el-table-column
prop="goodsNum"
label="出货数量">
</el-table-column>
<!-- 表格列，显示操作按钮 -->
<el-table-column
width="100px"
label="操作">
<!-- 自定义列内容，显示出货按钮 -->
<template v-slot="scope">
<!-- 点击后调用 outGoodsBtn1 方法，处理出货操作 -->
<el-button type="warning"
@click="outGoodsBtn1(scope.row)" plain>出货
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件区域 -->
<div style="margin: 10px 0 15px 0;">
<!-- 分页组件，处理分页相关操作 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@ -74,18 +96,22 @@
</div>
</div>
</el-dialog>
<!--商品出库-->
<!-- 商品出库的对话框 -->
<el-dialog
title="商品出库"
:visible.sync="goodsOutVisable"
width="50%">
<!-- 选择商品和仓库的表单，当 selectGoodsVisable 为 true 时显示 -->
<el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
class="demo-ruleForm">
<!-- 商品选择的表单项 -->
<el-form-item style="width:40%" label="商品：" prop="goodsId">
<!-- 下拉选择框，禁用状态，双向绑定到 selectGoods.goodsId -->
<el-select disabled v-model="selectGoods.goodsId"
placeholder="请选择商品"
filterable
clearable>
<!-- 循环生成商品选项 -->
<el-option
v-for="item in options_goods"
:key="item.id"
@ -94,12 +120,15 @@
</el-option>
</el-select>
</el-form-item>
<!-- 仓库选择的表单项 -->
<el-form-item style="width:40%" label="仓库：" prop="storeId">
<!-- 下拉选择框，双向绑定到 selectGoods.storeId -->
<el-select v-model="selectGoods.storeId"
@change="$forceUpdate"
placeholder="请选择仓库"
filterable
clearable>
<!-- 循环生成仓库选项 -->
<el-option
v-for="item in options_store"
:key="item.id"
@ -108,45 +137,63 @@
</el-option>
</el-select>
</el-form-item>
<!-- 类型选择的表单项 -->
<el-form-item style="width:40%" label="类型：" prop="state">
<!-- 下拉选择框，双向绑定到 selectGoods.state -->
<el-select
v-model="selectGoods.state"
@change="$forceUpdate()"
filterable
placeholder="请选择类型" clearable>
<!-- 出库类型选项 -->
<el-option label="出库" value="0"></el-option>
</el-select>
</el-form-item>
<!-- 表单操作按钮的表单项 -->
<el-form-item style="width:40%">
<!-- 点击后调用 selectedGoods 方法，确认选择 -->
<el-button type="success" @click="selectedGoods('selectGoods')" plain>确定</el-button>
<!-- 点击后调用 closeSelectedGoods 方法，关闭表单 -->
<el-button type="warning" @click="closeSelectedGoods('selectGoods')" plain>关闭</el-button>
</el-form-item>
</el-form>
<!-- 新表单，当 newVisable 为 true 时显示 -->
<el-form size="mini" v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
class="demo-ruleForm">
<!-- 表单的行 -->
<el-row>
<!-- 表单的列，显示商品名 -->
<el-col :span="12">
<el-form-item style="width: 60%" label="商品名：">
<!-- 只读输入框，显示商品名，双向绑定到 newForm.goodsName -->
<el-input readonly v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
</el-form-item>
</el-col>
<!-- 表单的列，显示类型选择 -->
<el-col :span="12">
<el-form-item style="width:60%" label="类型：" prop="state">
<!-- 禁用的下拉选择框，双向绑定到 newForm.state -->
<el-select disabled
v-model="newForm.state"
filterable
@change="$forceUpdate()"
placeholder="请选择类型" clearable>
<!-- 出库类型选项 -->
<el-option label="出库" value="0"></el-option>
<!-- 过期类型选项 -->
<el-option label="过期" value="1"></el-option>
<!-- 下架类型选项 -->
<el-option label="下架" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 表单的行 -->
<el-row>
<!-- 表单的列，显示商品数量输入框 -->
<el-col :span="12">
<el-form-item style="width: 60%" label="商品数量：" prop="goodsNum">
<!-- 数字输入框，双向绑定到 newForm.goodsNum，有数量范围限制 -->
<el-input type="number" @change="()=>{
if(this.goodsNum_max<this.newForm.goodsNum){
this.newForm.goodsNum=this.goodsNum_max
@ -154,16 +201,18 @@
if(this.newForm.goodsNum<1){
this.newForm.goodsNum=1
}
}" min="1" :max="goodsNum_max" v-model="newForm.goodsNum" placeholder="如：1"></el-input>
</el-form-item>
</el-col>
<!-- 表单的列，显示仓库选择 -->
<el-col :span="12">
<el-form-item style="width:60%" label="仓库：" prop="storeId">
<!-- 禁用的下拉选择框，双向绑定到 newForm.storeId -->
<el-select disabled v-model="newForm.storeId"
placeholder="请选择仓库"
filterable
clearable>
<!-- 循环生成仓库选项 -->
<el-option
v-for="item in options_store"
:key="item.id"
@ -174,9 +223,12 @@
</el-form-item>
</el-col>
</el-row>
<!-- 表单的行 -->
<el-row>
<!-- 表单的列，显示出库日期选择器 -->
<el-col :span="12">
<el-form-item style="width: 60%" label="出库日期：" prop="createTime">
<!-- 日期选择器，双向绑定到 newForm.createTime -->
<el-date-picker
size="mini"
style="width: 140px"
@ -187,99 +239,132 @@
</el-date-picker>
</el-form-item>
</el-col>
<!-- 表单的列，显示备注输入框 -->
<el-col :span="12">
<el-form-item style="width: 60%" label="备注：">
<!-- 文本域输入框，双向绑定到 newForm.info -->
<el-input type="textarea" v-model="newForm.info" placeholder="如：某商品因什么原因出库"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 表单操作按钮的表单项 -->
<el-form-item>
<!-- 点击后调用 submitNewForm 方法，提交出库表单 -->
<el-button type="primary" @click="submitNewForm('newForm')">出库</el-button>
<!-- 点击后调用 saveCancel 方法，取消操作 -->
<el-button @click="saveCancel('newForm')">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--商品过期/下架列表显示-->
<!-- 商品过期/下架列表显示的对话框，全屏显示 -->
<el-dialog
:fullscreen="true"
:visible.sync="visable2">
<!-- 搜索表单区域 -->
<div class="searchForm">
<!-- 搜索表单的列，包含商品名输入框 -->
<div class="column">
<!-- 显示“商品名：”标签 -->
<span>商品名：</span>
<!-- 输入框，用于输入商品名，双向绑定到 searchForm1.name -->
<el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm1.name"/>
</div>
<!-- 搜索表单的列，包含类型选择框 -->
<div class="column">
<!-- 显示“类型：”标签 -->
<span>类型：</span>
<!-- 下拉选择框，双向绑定到 searchForm1.state -->
<el-select style="width: 120px"
v-model="searchForm1.state"
@change="$forceUpdate()"
placeholder="请选择类型" clearable>
<!-- 过期类型选项 -->
<el-option label="过期" value="1"></el-option>
<!-- 下架类型选项 -->
<el-option label="下架" value="2"></el-option>
</el-select>
</div>
<!-- 搜索表单的列，包含搜索和关闭按钮 -->
<div class="column">
<!-- 点击后调用 submitSearchForm1 方法进行搜索 -->
<el-button type="success" @click="submitSearchForm1">搜索</el-button>
<!-- 点击后隐藏对话框 -->
<el-button type="primary" @click="visable2=false">关闭</el-button>
</div>
</div>
<!-- 表格区域 -->
<div class="table">
<!-- 表格组件，数据绑定到 tableData1 -->
<el-table
:data="tableData1"
style="width: 100%;"
size="medium">
<!-- 表格列，显示序号 -->
<el-table-column
width="200"
type="index"
label="序号">
</el-table-column>
<!-- 表格列，显示商品封面 -->
<el-table-column
prop="coverUrl"
label="封面">
<!-- 自定义列内容，显示商品封面图片 -->
<template v-slot="scope">
<img height="60px" :src="scope.row.coverUrl">
</template>
</el-table-column>
<!-- 表格列，显示商品名 -->
<el-table-column
prop="goodsName"
label="商品名">
</el-table-column>
<!-- 表格列，显示仓库名 -->
<el-table-column
prop="storeName"
label="仓库">
</el-table-column>
<!-- 表格列，显示处理数量 -->
<el-table-column
prop="untreatedNum"
label="处理数量">
</el-table-column>
<!-- 表格列，显示类型 -->
<el-table-column
prop="state"
label="类型">
<!-- 自定义列内容，根据类型显示不同标签 -->
<template v-slot="scope">
<!-- 过期类型标签 -->
<el-tag type="warning" v-if="scope.row.state=='1'">过期</el-tag>
<!-- 下架类型标签 -->
<el-tag type="danger" v-if="scope.row.state=='2'">下架</el-tag>
</template>
</el-table-column>
<!-- 表格列，显示通知时间 -->
<el-table-column
prop="createTime"
label="通知时间">
</el-table-column>
<!-- 表格列，显示操作按钮 -->
<el-table-column
width="100px"
label="操作">
<!-- 自定义列内容，显示处理按钮 -->
<template v-slot="scope">
<!-- 点击后调用 outUntreatedBtn 方法，处理过期/下架商品 -->
<el-button type="warning"
@click="outUntreatedBtn(scope.row)" plain>处理
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件区域 -->
<div style="margin: 10px 0 15px 0;">
<!-- 分页组件，处理分页相关操作 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@size-change="handleSizeChange1"
@current-change="handleCurrentChange1"
:current-page.sync="searchForm1.currentPage"
:page-sizes="[5, 10, 20, 50]"
:page-size="searchForm1.pageSize"
@ -289,29 +374,37 @@
</div>
</div>
</el-dialog>
<!--处理表单填写-->
<!-- 处理表单填写的对话框 -->
<el-dialog
title="过期/下架商品处理表单"
:visible.sync="visable3"
width="50%">
<!-- 处理表单，当条件满足时显示 -->
<el-form v-if="" :model="outUntreatedForm" :rules="rules" ref="outUntreatedForm" label-width="100px"
class="demo-ruleForm">
<!-- 表单的行，显示商品图片 -->
<el-row>
<!-- 表单的列 -->
<el-col :span="24">
<el-form-item style="width: 60%">
<!-- 显示商品图片 -->
<img height="200px" :src="outUntreatedForm.coverUrl" alt="商品图片"/>
</el-form-item>
</el-col>
</el-row>
<!-- 表单的行，显示商品名称、数量、仓库和类型 -->
<el-row>
<!-- 表单的列，显示商品名称 -->
<el-col :span="24">
<el-form-item style="width: 60%" label="商品名称:">
<!-- 只读输入框，显示商品名称，双向绑定到 outUntreatedForm.goodsName -->
<el-input readonly v-model="outUntreatedForm.goodsName" placeholder="商品名称"/>
</el-form-item>
</el-col>
<!-- 表单的列，显示商品数量 -->
<el-col :span="24">
<el-form-item style="width: 60%" label="商品数量:" prop="untreatedNum">
<!-- 数字输入框，双向绑定到 outUntreatedForm.untreatedNum，有数量范围限制 -->
<el-input
@change="()=>{
if (outUntreatedForm.untreatedNum<=0){
@ -325,79 +418,106 @@
type="number" min="1" :max="untreatedNum" v-model="outUntreatedForm.untreatedNum"/>
</el-form-item>
</el-col>
<!-- 表单的列，显示仓库名称 -->
<el-col :span="24">
<el-form-item style="width: 60%" label="仓库:">
<!-- 只读输入框，显示仓库名称，双向绑定到 outUntreatedForm.storeName -->
<el-input readonly v-model="outUntreatedForm.storeName" placeholder="仓库"/>
</el-form-item>
</el-col>
<!-- 表单的列，显示类型选择 -->
<el-col :span="24">
<el-form-item style="width: 40%" label="类型:">
<!-- 禁用的下拉选择框，双向绑定到 outUntreatedForm.state -->
<el-select disabled
v-model="outUntreatedForm.state"
@change="$forceUpdate()"
placeholder="请选择类型" clearable>
<!-- 过期类型选项 -->
<el-option label="过期" value="1"></el-option>
<!-- 下架类型选项 -->
<el-option label="下架" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 表单的行，显示处理和关闭按钮 -->
<el-row>
<!-- 表单的列 -->
<el-col :span="24">
<el-form-item style="width: 60%">
<!-- 点击后调用 submitOutUntreatedForm 方法，提交处理表单 -->
<el-button type="success" @click="submitOutUntreatedForm('outUntreatedForm')">处理</el-button>
<!-- 点击后调用 closeOutUntreatedForm 方法，关闭表单 -->
<el-button type="primary" @click="closeOutUntreatedForm('outUntreatedForm')">关闭</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</div>
</template>
<script>
// 引入通用的弹出提示方法
import {popup} from "@/assets/js/common";
// 引入库存管理通知相关的 API 方法
import {
queryPageNoticeOut_shelves,
queryPageNoticeOut_untreated, resolveOutUntreatedForm,
saveOut_shelves
} from "@/api/inventory_management/notice/noticeApi";
// 引入库存管理商品出库相关的 API 方法
import {
changeOutGoods,
changeOutStore,
initOutOptions, queryOutGoods, saveOut
} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
// 导出默认的 Vue 组件对象
export default {
// 定义组件的数据属性
data() {
return {
// 控制商品上货架对话框的显示状态
visable1: false,
// 控制商品过期/下架列表对话框的显示状态
visable2: false,
// 控制处理表单对话框的显示状态
visable3: false,
// 处理数量的最大值
untreatedNum: '',
// 处理表单的数据对象
outUntreatedForm: {},
// 控制商品出库对话框的显示状态
goodsOutVisable: false,
// 控制新表单的显示状态
newVisable: false,
// 控制选择商品和仓库表单的显示状态
selectGoodsVisable: true,
// 选择商品和仓库表单的数据对象
selectGoods: {},
// 商品选项数组
options_goods: [],
// 仓库选项数组
options_store: [],
/*表格*/
// 表格数据数组
tableData: [],
// 搜索表单的数据对象，包含分页和状态信息
searchForm: {
total: 0,
currentPage: 1,
pageSize: 5,
state: '0'
},
// 搜索表单 1 的数据对象，包含分页信息
searchForm1: {
total: 0,
currentPage: 1,
pageSize: 5,
},
// 表格数据 1 数组
tableData1: [],
// 新表单的数据对象，包含商品出库相关信息
newForm: {
goodsId: '',
goodsNum: '',
@ -407,6 +527,7 @@
storeId: '',
state: ''
},
// 表单验证规则对象
rules: {
goodsId: [
{required: true, message: '商品编号不能为空', trigger: 'blur'},
@ -429,40 +550,60 @@
},
}
},
// 定义组件的方法
methods: {
// 点击出库货架商品按钮时调用的方法
outGoodsBtn() {
// 初始化数据
this.init()
// 显示商品上货架对话框
this.visable1 = true
},
// 关闭处理表单对话框的方法
closeOutUntreatedForm(formName) {
// 重置表单字段
this.$refs[formName].resetFields()
// 隐藏处理表单对话框
this.visable3 = false
// 清空处理表单数据对象
this.outUntreatedForm = {}
},
// 点击出货按钮时调用的方法
outGoodsBtn1(row) {
// 设置选择的商品 ID
this.selectGoods.goodsId = row.id
// 标记是否存在库存
var flag = false;
// 遍历商品选项数组，检查是否存在该商品库存
for (var item of this.options_goods) {
if (item.id == this.selectGoods.goodsId) {
flag = true;
}
}
// 如果不存在库存，弹出错误提示并返回
if (!flag) {
popup("库存中没有该商品的库存", "error")
return;
}
// 调用 API 方法，根据商品 ID 获取可用仓库
changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
res = res.data
if (res.code == 200) {
// 更新仓库选项数组
this.options_store = res.data
}
})
// 显示商品出库对话框
this.goodsOutVisable = true
// 显示选择商品和仓库表单
this.selectGoodsVisable = true
// 隐藏新表单
this.newVisable = false
// 设置选择的商品类型为出库
this.selectGoods.state = '0'
// 设置商品数量的最大值
this.goodsNum_max = row.goodsNum
// 重置新表单数据对象
this.newForm = {
goodsId: '',
goodsNum: row.goodsNum,
@ -472,186 +613,266 @@
storeId: '',
state: ''
}
},
// 点击处理过期/下架商品按钮时调用的方法
outUntreatedBtn(param) {
// 复制商品信息到处理表单数据对象
this.outUntreatedForm = {...param}
// 设置处理数量的最大值
this.untreatedNum = param.untreatedNum
// 显示处理表单对话框
this.visable3 = true
},
// 提交处理表单的方法
submitOutUntreatedForm(formName) {
// 验证表单字段
this.$refs[formName].validate((valid) => {
if (valid) {
// 调用 API 方法，提交处理表单数据
resolveOutUntreatedForm(this.outUntreatedForm).then(res => {
res = res.data
if (res.code == 200) {
popup("处理成功")
this.visable3 = false
this.outUntreatedForm = {}
this.init1()
} else {
popup(res.msg, "error")
}
res = res.data
if (res.code == 200) {
// 弹出处理成功提示
popup("处理成功")
// 隐藏处理表单对话框
this.visable3 = false
// 清空处理表单数据对象
this.outUntreatedForm = {}
// 初始化过期/下架商品列表数据
this.init1()
} else {
// 弹出错误提示
popup(res.msg, "error")
}
)
})
}
})
},
// 点击过期/下架商品按钮时调用的方法
outUntreated() {
// 初始化过期/下架商品列表数据
this.init1()
// 显示商品过期/下架列表对话框
this.visable2 = true
},
// 商品选择变化时调用的方法
changeGoods() {
// 强制更新视图
this.$forceUpdate()
// 调用 API 方法，根据商品 ID 获取可用仓库
changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
res = res.data
if (res.code == 200) {
// 更新仓库选项数组
this.options_store = res.data
}
})
},
// 初始化商品和仓库选项的方法
initOptions() {
// 调用 API 方法，获取商品和仓库选项数据
initOutOptions().then(res => {
res = res.data
if (res.code == 200) {
// 更新商品选项数组
this.options_goods = res.data.goods
// 更新仓库选项数组
this.options_store = res.data.stores
} else {
// 弹出错误提示
popup(res.msg, "error")
}
})
},
// 初始化商品上货架表格数据的方法
init() {
// 调用 API 方法，获取商品上货架表格数据
queryPageNoticeOut_shelves(this.searchForm).then(res => {
res = res.data
if (res.code == 200) {
// 更新表格数据数组
this.tableData = res.data.records
// 更新搜索表单的总记录数
this.searchForm.total = res.data.total
// 更新搜索表单的每页显示记录数
this.searchForm.pageSize = res.data.size
// 更新搜索表单的当前页码
this.searchForm.currentPage = res.data.current
} else {
// 弹出错误提示
popup(res.msg, "error")
}
})
},
/*分页*/
// 处理每页显示记录数变化的方法
handleSizeChange(val) {
// 更新搜索表单的每页显示记录数
this.searchForm.pageSize = val
// 重新初始化商品上货架表格数据
this.init()
console.log(`每页 ${val} 条`);
},
// 处理当前页码变化的方法
handleCurrentChange(val) {
// 更新搜索表单的当前页码
this.searchForm.currentPage = val
// 重新初始化商品上货架表格数据
this.init()
console.log(`当前页: ${val}`);
},
// 提交搜索表单的方法
submitSearchForm() {
// 重新初始化商品上货架表格数据
this.init()
},
/*过期、下架分页*/
// 初始化过期/下架商品表格数据的方法
init1() {
// 调用 API 方法，获取过期/下架商品表格数据
queryPageNoticeOut_untreated(this.searchForm1).then(res => {
res = res.data
if (res.code == 200) {
// 更新表格数据 1 数组
this.tableData1 = res.data.records
// 更新搜索表单 1 的总记录数
this.searchForm1.total = res.data.total
// 更新搜索表单 1 的每页显示记录数
this.searchForm1.pageSize = res.data.size
// 更新搜索表单 1 的当前页码
this.searchForm1.currentPage = res.data.current
} else {
// 弹出错误提示
popup(res.msg, "error")
}
})
},
// 处理过期/下架商品每页显示记录数变化的方法
handleSizeChange1(val) {
// 更新搜索表单 1 的每页显示记录数
this.searchForm1.pageSize = val
// 重新初始化过期/下架商品表格数据
this.init1()
console.log(`每页 ${val} 条`);
},
// 处理过期/下架商品当前页码变化的方法
handleCurrentChange1(val) {
// 更新搜索表单 1 的当前页码
this.searchForm1.currentPage = val
// 重新初始化过期/下架商品表格数据
this.init1()
console.log(`当前页: ${val}`);
},
// 提交过期/下架商品搜索表单的方法
submitSearchForm1() {
// 重新初始化过期/下架商品表格数据
this.init1()
},
// 选择商品和仓库表单提交时调用的方法
selectedGoods(formName) {
// 验证表单字段
this.$refs[formName].validate((valid) => {
if (valid) {
// 调用 API 方法，根据选择的商品和仓库信息获取商品详细信息
queryOutGoods(this.selectGoods).then(res => {
res = res.data
if (res.code == 200) {
// 隐藏选择商品和仓库表单
this.selectGoodsVisable = false
// 显示新表单
this.newVisable = true
// 更新新表单的商品名称
this.newForm.goodsName = res.data.goodsName
// 更新新表单的商品类型
this.newForm.state = this.selectGoods.state
// 更新新表单的仓库 ID
this.newForm.storeId = this.selectGoods.storeId
// 更新新表单的商品 ID
this.newForm.goodsId = this.selectGoods.goodsId
// 清空选择商品和仓库表单数据对象
// this.selectGoods = {}
} else {
// 弹出错误提示
popup(res.msg, "error")
}
})
}
})
},
// 关闭选择商品和仓库表单的方法
closeSelectedGoods(formName) {
// 重置表单字段
this.$refs[formName].resetFields()
// 清空选择商品和仓库表单数据对象
this.selectGoods = {}
// 隐藏商品出库对话框
this.goodsOutVisable = false
},
// 提交新表单的方法
submitNewForm(formName) {
// 验证表单字段
this.$refs[formName].validate((valid) => {
if (valid) {
// 调用 API 方法，提交新表单数据
saveOut_shelves(this.newForm).then(res => {
res = res.data
res = res.data
if (res.code == 200) {
// 弹出出库成功提示
popup("出库成功")
// 设置搜索表单状态
this.searchForm.state1 = '0'
// 隐藏商品出库对话框
this.goodsOutVisable = false
// 清空选择商品和仓库表单数据对象
this.selectGoods = {}
// 重新初始化商品上货架表格数据
this.init()
} else {
// 弹出错误提示
popup(res.msg, "error")
}
})
}
})
},
// 取消新表单操作的方法
saveCancel(formName) {
// 重置表单字段
this.$refs[formName].resetFields()
// 隐藏新表单
this.newVisable = false
// 显示选择商品和仓库表单
this.selectGoodsVisable = true
}
},
// 组件挂载时执行的钩子函数
mounted() {
// 初始化商品和仓库选项
this.initOptions()
}
}
</script>
<style>
/* 设置 #detail_store_goods_in 下 .noticeOut 元素的高度和背景颜色 */
#detail_store_goods_in .noticeOut {
height: 660px;
background-color: #bfdcf6;
}
/* 设置 #detail_store_goods_in 下 .noticeOut 内的 h1 元素和 .btns 元素的宽度 */
#detail_store_goods_in .noticeOut h1, .btns {
width: 100%;
}
/* 设置搜索表单元素的高度 */
.searchForm {
height: 134px;
}
/* 设置表格元素的高度 */
.table {
height: 320px;
}
/* 设置分页工具元素的定位、宽度、外边距和高度 */
.pageUtils {
position: absolute;
width: 84%;
@ -659,6 +880,7 @@
height: 43px;
}
/* 再次设置搜索表单元素的显示方式、外边距、高度和行高，后定义的样式会覆盖前面的 */
.searchForm {
display: inline-block;
margin: 0 auto;
@ -666,6 +888,7 @@
line-height: 51px;
}
/* 设置搜索表单内 .column 元素的显示方式、外边距、行高和高度 */
.searchForm .column {
display: inline-block;
margin: 0 auto;

133
superMarket-frontend/src/views/inventory_management/store/List.vue
Unescape View File

@ -1,111 +1,160 @@
<template>
<!-- 组件根元素 -->
<div>
<!-- 面包屑导航，用于展示页面层级关系 -->
<el-breadcrumb separator="/">
<!-- 首页导航项 -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 库存管理导航项 -->
<el-breadcrumb-item>库存管理 </el-breadcrumb-item>
<el-breadcrumb-item>仓库管理</el-breadcrumb-item> </el-breadcrumb
><br />
<!-- 仓库管理导航项 -->
<el-breadcrumb-item>仓库管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 栅格布局，一行两列 -->
<el-row>
<!-- 第一列，占 8 份 -->
<el-col :span="8" style="text-align: left;padding-right: 10px;">
<!-- 输入框，用于输入仓库名称，双向绑定到 searchForm.name -->
<el-input placeholder="仓库名称" v-model="searchForm.name"/>
</el-col>
<!-- 第二列，占 8 份 -->
<el-col :span="8">
<!-- 下拉选择框，用于选择仓库状态，双向绑定到 searchForm.state -->
<el-select v-model="searchForm.state" placeholder="请选择状态" clearable>
<!-- 正常状态选项 -->
<el-option label="正常" value="0"></el-option>
<!-- 停用状态选项 -->
<el-option label="停用" value="-1"></el-option>
</el-select>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 栅格布局，一行一列 -->
<el-row>
<!-- 列，占 24 份 -->
<el-col :span="24" style="text-align: left">
<!-- 主要按钮，点击触发 subSearchForm 方法 -->
<el-button
type="primary"
@click="subSearchForm"
style="font-size: 18px"
>
<!-- 搜索图标 -->
<i class="iconfont icon-r-find" style="font-size: 18px">
</i>
搜索</el-button
>
<!-- 按钮文本 -->
搜索</el-button>
<!-- 成功按钮，点击显示创建仓库对话框 -->
<el-button
type="success"
@click="newVisable = true"
style="font-size: 18px"
>
<!-- 添加图标 -->
<i class="iconfont icon-r-add" style="font-size: 18px"> </i>
<!-- 按钮文本 -->
创建仓库
</el-button>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 表格组件，数据绑定到 tableData -->
<el-table
:data="tableData"
style="width: 100%">
<!-- 序号列 -->
<el-table-column
type="index"
label="序号"
width="180">
</el-table-column>
<!-- 仓库名称列 -->
<el-table-column
prop="name"
label="名称"
width="180">
</el-table-column>
<!-- 仓库地址列 -->
<el-table-column
prop="address"
label="地址"
width="180">
</el-table-column>
<!-- 仓库描述列，内容溢出显示 tooltip -->
<el-table-column
prop="info"
:show-overflow-tooltip="true"
label="描述">
</el-table-column>
<!-- 仓库状态列 -->
<el-table-column
prop="state"
label="状态">
<!-- 自定义列内容 -->
<template v-slot="scope">
<!-- 状态为正常时显示绿色标签 -->
<el-tag v-if="scope.row.state=='0'" type="success">正常</el-tag>
<!-- 状态为停用显示红色标签 -->
<el-tag v-else type="danger">停用</el-tag>
</template>
</el-table-column>
<!-- 操作列，固定在右侧 -->
<el-table-column width="240" fixed="right"
label="操作">
<!-- 自定义列内容 -->
<template v-slot="scope">
<!-- 修改按钮，点击触发 editStore 方法 -->
<el-button type="success" style="font-size: 18px;" @click="editStore(scope.row)">
<!-- 修改图标 -->
<i class="iconfont icon-r-edit" style="font-size: 18px;"> </i>
修改
<!-- 按钮文本 -->
修改
</el-button>
<!-- 停用按钮，点击触发 forbidden 方法 -->
<el-button style="font-size: 18px;" type="danger" @click="forbidden(scope.row.id)">
<!-- 停用图标 -->
<i class="iconfont icon-r-no" style="font-size: 18px;"> </i>
停用
<!-- 按钮文本 -->
停用
</el-button>
</template>
</el-table-column>
</el-table>
<!--修改仓库弹出框-->
<!-- 修改仓库信息的对话框 -->
<el-dialog
title="仓库信息修改"
:visible.sync="dialogVisible"
width="50%">
<!-- 表单，数据绑定到 editForm -->
<el-form v-model="editForm" label-width="100px" class="demo-ruleForm">
<!-- 仓库名称表单字段 -->
<el-form-item label="名称：">
<!-- 输入框，双向绑定到 editForm.name -->
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<!-- 仓库地址表单字段 -->
<el-form-item label="地址：">
<!-- 输入框，双向绑定到 editForm.address -->
<el-input type="text" v-model="editForm.address"></el-input>
</el-form-item>
<!-- 仓库描述表单字段 -->
<el-form-item label="描述：">
<!-- 输入框，双向绑定到 editForm.info -->
<el-input type="text" v-model="editForm.info"></el-input>
</el-form-item>
<!-- 仓库状态表单字段 -->
<el-form-item label="状态：">
<!-- 下拉选择框，双向绑定到 editForm.state -->
<el-select v-model="editForm.state"
clearable
@change="$forceUpdate()"
placeholder="请选择状态">
<!-- 循环渲染状态选项 -->
<el-option
v-for="item in options"
:key="item.value"
@ -114,33 +163,49 @@
</el-option>
</el-select>
</el-form-item>
<!-- 表单操作按钮 -->
<el-form-item>
<!-- 提交按钮，点击触发 submitEditForm 方法 -->
<el-button type="primary" @click="submitEditForm" style="font-size: 18px;">
<!-- 确认图标 -->
<i class="iconfont icon-r-yes" style="font-size: 18px;"> </i>
提交
<!-- 按钮文本 -->
提交
</el-button>
<!-- 取消按钮，点击触发 editCancel 方法 -->
<el-button style="font-size: 18px;" @click="editCancel">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--创建仓库弹出框-->
<!-- 创建仓库对话框 -->
<el-dialog
title="创建仓库"
:visible.sync="newVisable"
width="50%">
<!-- 表单，数据绑定到 newForm，有验证规则 -->
<el-form :model="newForm" :rules="rules" ref="newForm" label-width="100px" class="demo-ruleForm">
<!-- 仓库名称表单字段，有验证规则 -->
<el-form-item label="名称：" prop="name">
<!-- 输入框，双向绑定到 newForm.name -->
<el-input v-model="newForm.name"></el-input>
</el-form-item>
<!-- 仓库地址表单字段，有验证规则 -->
<el-form-item label="地址：" prop="address">
<!-- 输入框，双向绑定到 newForm.address -->
<el-input type="text" v-model="newForm.address"></el-input>
</el-form-item>
<!-- 仓库描述表单字段 -->
<el-form-item label="描述：">
<!-- 输入框，双向绑定到 newForm.info -->
<el-input type="text" v-model="newForm.info"></el-input>
</el-form-item>
<!-- 表单操作按钮 -->
<el-form-item>
<!-- 提交按钮，点击触发 submitNewForm 方法 -->
<el-button type="primary" @click="submitNewForm('newForm')" style="font-size: 18px;">
<!-- 确认图标 -->
<i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 提交</el-button>
<!-- 取消按钮，点击触发 saveCancel 方法 -->
<el-button @click="saveCancel" style="font-size: 18px;">取消</el-button>
</el-form-item>
</el-form>
@ -148,117 +213,155 @@
</div>
</template>
<script>
// 引入仓库管理相关的 API 方法
import {deactivate, save, storeList, update} from "@/api/inventory_management/store/storeApi";
// 引入通用弹出提示方法
import {popup} from "@/assets/js/common";
export default {
// 组件的数据
data() {
return {
// 表格数据
tableData: [],
// 新仓库对话框显示状态（这里可能有误，实际使用 newVisable）
newStoreVisable: false,
// 修改仓库对话框显示状态
dialogVisible: false,
// 修改仓库表单数据
editForm: {},
// 搜索表单数据
searchForm:{},
// 创建仓库对话框显示状态
newVisable: false,
// 创建仓库表单数据
newForm:{},
// 状态选项
options: [
{label: '正常', value: '0'},
{label: '停用', value: '-1'}
],
// 表单验证规则
rules: {
// 名称验证规则，不能为空
name:[
{required: true, message: '名称不能为空', trigger: 'blur'},
],
// 地址验证规则，不能为空
address:[
{required: true, message: '地名不能为空', trigger: 'blur'},
],
}
}
},
// 组件的方法
methods: {
// 提交搜索表单，触发数据初始化
subSearchForm(){
this.init()
},
// 初始化数据，调用 storeList API 获取仓库列表
init() {
storeList(this.searchForm).then(res => {
if (res.data.code == 200) {
// 更新表格数据
this.tableData = res.data.data
} else {
// 显示错误提示
popup(res.data.msg, "error")
}
})
},
// 编辑仓库信息，填充表单并显示对话框
editStore(row) {
this.editForm = {...row}
this.dialogVisible = true
},
// 停用仓库，调用 deactivate API
forbidden(sid) {
deactivate(sid).then(res => {
res = res.data
if (res.code == 200) {
// 显示操作成功提示
popup("操作成功")
} else {
// 显示错误提示
popup(res.msg, "error")
}
// 重新初始化数据
this.init()
})
},
// 提交编辑表单，调用 update API
submitEditForm() {
update(this.editForm).then(res => {
res = res.data
if (res.code == 200) {
// 显示操作成功提示
popup("操作成功")
// 重新初始化数据
this.init()
// 关闭对话框
this.dialogVisible=false
} else {
// 显示错误提示
popup(res.msg, "error")
}
})
},
// 取消编辑，关闭对话框并清空表单
editCancel() {
this.dialogVisible = false
this.editForm = {}
// 显示取消操作提示
popup("已取消操作", "info")
},
// 提交新仓库表单，先验证表单
submitNewForm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
save(this.newForm).then(res=>{
res=res.data
if (res.code==200){
// 显示操作成功提示
popup("操作成功")
// 清空表单
this.newForm={}
// 关闭对话框
this.newVisable=false
// 重新初始化数据
this.init()
}else {
// 显示错误提示
popup(res.msg, "error")
}
})
}
});
},
// 取消创建仓库，关闭对话框并重置表单
saveCancel(){
this.newVisable=false
this.$refs["newForm"].resetFields()
}
},
// 组件挂载时初始化数据
mounted() {
this.init()
}
}
</script>
<style>
.search {
/* 搜索区域样式 */
.search {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
.search .column {
/* 搜索区域列样式 */
.search .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;

400
superMarket-frontend/src/views/inventory_management/store/StorageSituation.vue
Unescape View File

@ -1,27 +1,41 @@
<template>
<!-- 组件的根元素 -->
<div>
<!-- 面包屑导航，显示页面层级关系 -->
<el-breadcrumb separator="/">
<!-- 首页导航项 -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 库存管理导航项 -->
<el-breadcrumb-item>库存管理 </el-breadcrumb-item>
<el-breadcrumb-item>库存统计</el-breadcrumb-item> </el-breadcrumb
><br />
<!-- 库存统计导航项 -->
<el-breadcrumb-item>库存统计</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 第一行栅格布局 -->
<el-row>
<!-- 第一列，占 8 份，包含仓库名称输入框 -->
<el-col :span="8">
<el-input placeholder="仓库名称" v-model="searchForm.name" />
</el-col>
<!-- 第二列，占 16 份，显示总存储量信息 -->
<el-col :span="16">
<i class="iconfont icon-r-add" style="font-size: 28px">
<b>
总存储量：<span style="color: #fc4316"
>{{ totalStoreNum ? totalStoreNum : 0 }}件</span
>
>
</b>
</i>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 第二行栅格布局 -->
<el-row>
<!-- 整列占 24 份，包含搜索按钮 -->
<el-col :span="24" style="text-align: left">
<el-button
type="primary"
@ -30,29 +44,38 @@
>
<i class="iconfont icon-r-find" style="font-size: 18px">
</i>
搜索</el-button
>
搜索</el-button>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 表格容器 -->
<div class="table">
<!-- 表格组件，展示仓库列表数据 -->
<el-table :data="tableData" style="width: 100%" size="medium">
<!-- 序号列 -->
<el-table-column type="index" width="200" label="序号">
</el-table-column>
<!-- 仓库名列 -->
<el-table-column
prop="storeName"
:show-overflow-tooltip="true"
label="仓库名"
>
</el-table-column>
<!-- 存货数量列 -->
<el-table-column
prop="residueNum"
:show-overflow-tooltip="true"
label="存货数量"
>
</el-table-column>
<!-- 操作列 -->
<el-table-column label="操作">
<!-- 操作列的内容插槽 -->
<template v-slot="scope">
<!-- 存储明细按钮，点击时调用 detailStoreBtn 方法 -->
<el-button
type="primary"
style="font-size: 18px"
@ -62,12 +85,13 @@
class="iconfont icon-r-find"
style="font-size: 18px"
></i>
存储明细</el-button
>
存储明细</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件容器 -->
<div style="margin: 10px 0 15px 0">
<!-- 分页组件，处理仓库列表的分页操作 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@ -80,13 +104,17 @@
</el-pagination>
</div>
</div>
<!-- 仓库存储明细对话框 -->
<el-dialog
title="仓库存储明细"
:visible.sync="detailStoreVisible"
width="95%"
height="100%"
>
<!-- 对话框内的第一行栅格布局 -->
<el-row>
<!-- 第一列，占 8 份，包含商品选择下拉框 -->
<el-col :span="8" style="text-align: right;">
<el-select
v-model="searchDetailForm.id"
@ -95,6 +123,7 @@
@change="$forceUpdate()"
clearable
>
<!-- 循环生成下拉选项 -->
<el-option
v-for="item in options_storeGoods"
:key="item.id"
@ -104,51 +133,59 @@
</el-option>
</el-select>
</el-col>
<!-- 第二列，占 8 份，包含搜索和关闭按钮 -->
<el-col :span="8">
<el-button type="success" @click="submitDetailSearchForm" style="font-size: 18px;"
>
<i class="iconfont icon-r-find" style="font-size: 18px;"></i>
搜索</el-button
>
搜索</el-button>
<el-button @click="closeDetailStoreVisible" style="font-size: 18px;"
>
<i class="iconfont icon-r-no" style="font-size: 18px;"></i>
关闭</el-button
>
关闭</el-button>
</el-col>
<!-- 第三列，占 8 份，显示仓库内商品的总存储量信息 -->
<el-col :span="8">
<i class="iconfont icon-r-add" style="font-size: 28px">
<b>
总存储量：<span style="color: #fc4316"
>{{ totalStoreNum1 ? totalStoreNum1 : 0 }}件</span
>
</b>
</i>
<i class="iconfont icon-r-add" style="font-size: 28px">
<b>
总存储量：<span style="color: #fc4316"
>{{ totalStoreNum1 ? totalStoreNum1 : 0 }}件</span
>
</b>
</i>
</el-col>
</el-row>
<!-- 换行 -->
<br>
<!-- 对话框内的表格容器 -->
<div class="table" style="overflow: auto;height: 300px;">
<!-- 表格组件，展示仓库内商品的存储明细数据 -->
<el-table :data="tableData1" style="width: 100%" size="medium" >
<!-- 序号列 -->
<el-table-column type="index" width="200" label="序号">
</el-table-column>
<!-- 商品名列 -->
<el-table-column
prop="goodsName"
:show-overflow-tooltip="true"
label="商品名"
>
</el-table-column>
<!-- 商品数量列 -->
<el-table-column
prop="residueNum"
:show-overflow-tooltip="true"
label="商品数量"
>
</el-table-column>
<!-- 占总存储量列，使用环形进度条展示比例 -->
<el-table-column
prop="percentage"
:show-overflow-tooltip="true"
label="占总存储量"
>
<!-- 列内容插槽 -->
<template v-slot="scope">
<el-progress
type="circle"
@ -159,7 +196,9 @@
</template>
</el-table-column>
</el-table>
<!-- 分页组件容器 -->
<div style="margin: 10px 0 15px 0">
<!-- 分页组件，处理仓库内商品存储明细的分页操作 -->
<el-pagination
@size-change="handleSizeChange1"
@current-change="handleCurrentChange1"
@ -176,149 +215,210 @@
</div>
</template>
<script>
import { popup } from "@/assets/js/common";
import {
queryPageByQo,
queryStoreGoodsByStoreId,
} from "@/api/inventory_management/storage_situation/storageSituationApi";
// 引入通用的弹出提示方法
import { popup } from "@/assets/js/common";
// 引入库存管理中库存情况相关的 API 方法
import {
queryPageByQo,
queryStoreGoodsByStoreId,
} from "@/api/inventory_management/storage_situation/storageSituationApi";
export default {
data() {
return {
/*表格*/
tableData: [],
tableData1: [],
totalStoreNum: "",
totalStoreNum1: "",
searchForm: {
total: 0,
currentPage: 1,
pageSize: 5,
// 导出默认的 Vue 组件
export default {
// 定义组件的数据属性
data() {
return {
// 仓库列表表格数据
tableData: [],
// 仓库内商品存储明细表格数据
tableData1: [],
// 仓库列表的总存储量
totalStoreNum: "",
// 仓库内商品存储明细的总存储量
totalStoreNum1: "",
// 仓库列表搜索表单数据
searchForm: {
total: 0,
currentPage: 1,
pageSize: 5,
},
// 仓库内商品存储明细搜索表单数据
searchDetailForm: {
total: 0,
currentPage: 1,
pageSize: 10,
},
// 仓库内商品的选项数据
options_storeGoods: [],
// 仓库存储明细对话框的显示状态
detailStoreVisible: false,
};
},
// 定义组件的方法
methods: {
// 初始化仓库列表数据的方法
init() {
// 调用 API 获取仓库列表数据
queryPageByQo(this.searchForm).then((res) => {
res = res.data;
if (res.code == 200) {
// 更新总存储量
this.totalStoreNum = res.data.totalStoreNum;
// 更新仓库列表表格数据
this.tableData = res.data.page.records;
// 更新搜索表单的总记录数
this.searchForm.total = res.data.page.total;
// 更新搜索表单的每页记录数
this.searchForm.pageSize = res.data.page.size;
// 更新搜索表单的当前页码
this.searchForm.currentPage = res.data.page.current;
} else {
// 弹出错误提示
popup(res.msg, "error");
}
});
},
// 处理仓库列表分页时每页记录数变化的方法
handleSizeChange(val) {
// 更新搜索表单的每页记录数
this.searchForm.pageSize = val;
// 重新初始化仓库列表数据
this.init();
console.log(`每页 ${val} 条`);
},
// 处理仓库列表分页时当前页码变化的方法
handleCurrentChange(val) {
// 更新搜索表单的当前页码
this.searchForm.currentPage = val;
// 重新初始化仓库列表数据
this.init();
console.log(`当前页: ${val}`);
},
searchDetailForm: {
total: 0,
currentPage: 1,
pageSize: 10,
// 提交仓库列表搜索表单的方法
submitSearchForm() {
// 重新初始化仓库列表数据
this.init();
},
options_storeGoods: [],
detailStoreVisible: false,
};
},
methods: {
init() {
queryPageByQo(this.searchForm).then((res) => {
res = res.data;
if (res.code == 200) {
this.totalStoreNum = res.data.totalStoreNum;
this.tableData = res.data.page.records;
this.searchForm.total = res.data.page.total;
this.searchForm.pageSize = res.data.page.size;
this.searchForm.currentPage = res.data.page.current;
// 初始化仓库内商品存储明细数据的方法
init1() {
// 调用 API 获取仓库内商品存储明细数据
queryStoreGoodsByStoreId(this.searchDetailForm).then((res) => {
res = res.data;
if (res.code == 200) {
// 更新仓库内商品的选项数据
this.options_storeGoods = res.data.optionsStoreGoods;
// 更新仓库内商品存储明细的总存储量
this.totalStoreNum1 = res.data.totalStoreNum1;
// 更新仓库内商品存储明细表格数据
this.tableData1 = res.data.vos.records;
// 更新搜索表单的总记录数
this.searchDetailForm.total = res.data.vos.total;
// 更新搜索表单的每页记录数
this.searchDetailForm.pageSize = res.data.vos.size;
// 更新搜索表单的当前页码
this.searchDetailForm.currentPage = res.data.vos.current;
// 显示仓库存储明细对话框
this.detailStoreVisible = true;
} else {
// 弹出错误提示
popup(res.msg, "error");
}
});
},
// 点击存储明细按钮时调用的方法
detailStoreBtn(row) {
// 清空仓库内商品的选项数据
this.options_storeGoods = [];
// 清空仓库内商品存储明细的总存储量
this.totalStoreNum1 = "";
// 设置搜索表单的仓库 ID
this.searchDetailForm.storeId = row.storeId;
// 初始化仓库内商品存储明细数据
this.init1();
},
// 处理仓库内商品存储明细分页时每页记录数变化的方法
handleSizeChange1(val) {
// 更新搜索表单的每页记录数
this.searchDetailForm.pageSize = val;
// 重新初始化仓库内商品存储明细数据
this.init1();
console.log(`每页 ${val} 条`);
},
// 处理仓库内商品存储明细分页时当前页码变化的方法
handleCurrentChange1(val) {
// 更新搜索表单的当前页码
this.searchDetailForm.currentPage = val;
// 重新初始化仓库内商品存储明细数据
this.init1();
console.log(`当前页: ${val}`);
},
// 提交仓库内商品存储明细搜索表单的方法
submitDetailSearchForm() {
// 重新初始化仓库内商品存储明细数据
this.init1();
},
// 根据百分比返回进度条颜色的方法
customColorMethod(percentage) {
if (percentage < 30) {
return "#f56c6c";
} else if (percentage < 70) {
return "#e6a23c";
} else {
popup(res.msg, "error");
return "#67c23a";
}
});
},
/*分页*/
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.init();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.searchForm.currentPage = val;
this.init();
console.log(`当前页: ${val}`);
},
// 关闭仓库存储明细对话框的方法
closeDetailStoreVisible() {
// 重置仓库内商品存储明细搜索表单数据
this.searchDetailForm = {
total: 0,
currentPage: 1,
pageSize: 10,
};
// 隐藏仓库存储明细对话框
this.detailStoreVisible = false;
},
},
submitSearchForm() {
// 组件挂载时执行的钩子函数
mounted() {
// 初始化仓库列表数据
this.init();
},
init1() {
queryStoreGoodsByStoreId(this.searchDetailForm).then((res) => {
res = res.data;
if (res.code == 200) {
this.options_storeGoods = res.data.optionsStoreGoods;
this.totalStoreNum1 = res.data.totalStoreNum1;
this.tableData1 = res.data.vos.records;
this.searchDetailForm.total = res.data.vos.total;
this.searchDetailForm.pageSize = res.data.vos.size;
this.searchDetailForm.currentPage = res.data.vos.current;
this.detailStoreVisible = true;
} else {
popup(res.msg, "error");
}
});
},
detailStoreBtn(row) {
this.options_storeGoods = [];
this.totalStoreNum1 = "";
this.searchDetailForm.storeId = row.storeId;
this.init1();
},
handleSizeChange1(val) {
this.searchDetailForm.pageSize = val;
this.init1();
console.log(`每页 ${val} 条`);
},
handleCurrentChange1(val) {
this.searchDetailForm.currentPage = val;
this.init1();
console.log(`当前页: ${val}`);
},
submitDetailSearchForm() {
this.init1();
},
customColorMethod(percentage) {
if (percentage < 30) {
return "#f56c6c";
} else if (percentage < 70) {
return "#e6a23c";
} else {
return "#67c23a";
}
},
closeDetailStoreVisible() {
this.searchDetailForm = {
total: 0,
currentPage: 1,
pageSize: 10,
};
this.detailStoreVisible = false;
},
},
mounted() {
this.init();
},
};
};
</script>
<style>
.searchForm {
height: 134px;
}
/* 搜索表单相关样式，这里的样式可能与当前组件实际结构不太匹配，存在重复定义 */
.searchForm {
height: 134px;
}
.table {
height: 320px;
}
/* 表格容器样式，设置高度 */
.table {
height: 320px;
}
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
/* 分页工具样式，设置定位、宽度、外边距和高度 */
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
.searchForm {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
/* 再次定义搜索表单样式，覆盖前面的 height 等样式 */
.searchForm {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
.searchForm .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
/* 搜索表单内列的样式 */
.searchForm.column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
</style>

475
superMarket-frontend/src/views/inventory_management/supplier/List.vue
Unescape View File

@ -1,102 +1,138 @@
<template>
<!-- 组件根元素 -->
<div>
<!-- 面包屑导航，展示页面层级关系 -->
<el-breadcrumb separator="/">
<!-- 首页导航项 -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 库存管理导航项 -->
<el-breadcrumb-item>库存管理 </el-breadcrumb-item>
<el-breadcrumb-item>供货商信息</el-breadcrumb-item> </el-breadcrumb
><br />
<!-- 供货商信息导航项 -->
<el-breadcrumb-item>供货商信息</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 栅格布局，一行三列 -->
<el-row>
<!-- 第一列，占 8 份，包含供货商名称输入框 -->
<el-col :span="8" style="text-align: left; padding-right: 10px">
<el-input placeholder="供货商名称" v-model="searchForm.name" />
</el-col>
<!-- 第二列，占 8 份，包含供货商地址输入框 -->
<el-col :span="8" style="text-align: left; padding-right: 10px">
<el-input placeholder="地址" v-model="searchForm.address" />
</el-col>
<!-- 第三列，占 8 份，包含供货商描述输入框 -->
<el-col :span="8">
<el-input placeholder="描述" v-model="searchForm.info" />
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 栅格布局，一行一列 -->
<el-row>
<!-- 列，占 24 份，包含搜索和创建按钮 -->
<el-col :span="24" style="text-align: left">
<!-- 搜索按钮，点击触发 subSearchForm 方法 -->
<el-button
type="primary"
@click="subSearchForm"
style="font-size: 18px"
>
<!-- 搜索图标 -->
<i class="iconfont icon-r-find" style="font-size: 18px">
</i>
搜索</el-button
>
<!-- 按钮文本 -->
搜索</el-button>
<!-- 创建供货商按钮，点击显示创建对话框 -->
<el-button
type="success"
@click="newVisable = true"
style="font-size: 18px"
>
<!-- 添加图标 -->
<i class="iconfont icon-r-add" style="font-size: 18px"> </i>
<!-- 按钮文本 -->
创建供货商
</el-button>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 表格容器 -->
<div class="table">
<!-- 表格组件，展示供货商列表数据 -->
<el-table :data="tableData" style="width: 100%" size="medium">
<!-- 序号列 -->
<el-table-column type="index" width="200" label="序号">
</el-table-column>
<!-- 供货商名称列 -->
<el-table-column
prop="name"
:show-overflow-tooltip="true"
label="名称"
>
</el-table-column>
<!-- 供货商地址列 -->
<el-table-column
prop="address"
:show-overflow-tooltip="true"
label="地址"
>
</el-table-column>
<!-- 供货商联系电话列 -->
<el-table-column
prop="tel"
:show-overflow-tooltip="true"
label="联系电话"
>
</el-table-column>
<!-- 供货商备注列 -->
<el-table-column
prop="info"
:show-overflow-tooltip="true"
label="备注"
>
</el-table-column>
<!-- 操作列，固定在右侧 -->
<el-table-column width="240" fixed="right" label="操作">
<!-- 操作列内容插槽 -->
<template v-slot="scope">
<!-- 修改按钮，点击触发 editBtn 方法 -->
<el-button
type="warning"
@click="editBtn(scope.row.cn)"
style="font-size: 18px"
>
<!-- 修改图标 -->
<i
class="iconfont icon-r-edit"
style="font-size: 18px"
></i>
修改</el-button
>
<!-- 按钮文本 -->
修改</el-button>
<!-- 删除按钮，点击触发 delBtn 方法 -->
<el-button
type="danger"
@click="delBtn(scope.row.cn)"
style="font-size: 18px"
>
<!-- 删除图标 -->
<i
class="iconfont icon-r-delete"
style="font-size: 18px"
></i>
删除</el-button
>
<!-- 按钮文本 -->
删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件容器 -->
<div style="margin: 10px 0 15px 0">
<!-- 分页组件，处理供货商列表分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@ -109,12 +145,14 @@
</el-pagination>
</div>
</div>
<!--创建弹出框-->
<!-- 创建供货商信息对话框 -->
<el-dialog
title="创建供货商信息"
:visible.sync="newVisable"
width="50%"
>
<!-- 表单，绑定 newForm 数据，有验证规则 -->
<el-form
:model="newForm"
:rules="rules"
@ -122,45 +160,57 @@
label-width="100px"
class="demo-ruleForm"
>
<!-- 供货商名称表单字段，有验证规则 -->
<el-form-item label="名称：" prop="name">
<!-- 输入框，双向绑定到 newForm.name -->
<el-input
v-model="newForm.name"
placeholder="供应商名称"
></el-input>
</el-form-item>
<!-- 供货商地址表单字段，有验证规则 -->
<el-form-item label="地址：" prop="address">
<!-- 输入框，双向绑定到 newForm.address -->
<el-input
type="text"
v-model="newForm.address"
placeholder="供应商地址"
></el-input>
</el-form-item>
<!-- 供货商联系电话表单字段，有验证规则 -->
<el-form-item label="电话：" prop="tel">
<!-- 输入框，双向绑定到 newForm.tel -->
<el-input
type="text"
v-model="newForm.tel"
placeholder="联系电话"
></el-input>
</el-form-item>
<!-- 供货商描述表单字段 -->
<el-form-item label="描述：">
<!-- 文本域输入框，双向绑定到 newForm.info -->
<el-input
type="textarea"
v-model="newForm.info"
placeholder="供应商的简单描述"
></el-input>
</el-form-item>
<!-- 表单操作按钮 -->
<el-form-item>
<!-- 提交按钮，点击触发 submitNewForm 方法 -->
<el-button
type="primary"
@click="submitNewForm('newForm')"
style="font-size: 18px"
>
<!-- 确认图标 -->
<i
class="iconfont icon-r-yes"
style="font-size: 18px"
></i>
提交</el-button
>
<!-- 按钮文本 -->
提交</el-button>
<!-- 关闭按钮，点击重置表单并隐藏对话框 -->
<el-button
@click="
() => {
@ -170,17 +220,18 @@
}
"
style="font-size: 18px"
>关闭</el-button
>
>关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--修改弹出框-->
<!-- 修改供货商信息对话框 -->
<el-dialog
title="修改供货商信息"
:visible.sync="editVisable"
width="50%"
>
<!-- 表单，绑定 editForm 数据，有验证规则 -->
<el-form
:model="editForm"
:rules="rules"
@ -188,45 +239,57 @@
label-width="100px"
class="demo-ruleForm"
>
<!-- 供货商名称表单字段，有验证规则 -->
<el-form-item label="名称：" prop="name">
<!-- 输入框，双向绑定到 editForm.name -->
<el-input
v-model="editForm.name"
placeholder="供应商名称"
></el-input>
</el-form-item>
<!-- 供货商地址表单字段，有验证规则 -->
<el-form-item label="地址：" prop="address">
<!-- 输入框，双向绑定到 editForm.address -->
<el-input
type="text"
v-model="editForm.address"
placeholder="供应商地址"
></el-input>
</el-form-item>
<!-- 供货商联系电话表单字段，有验证规则 -->
<el-form-item label="电话：" prop="tel">
<!-- 输入框，双向绑定到 editForm.tel -->
<el-input
type="text"
v-model="editForm.tel"
placeholder="联系电话"
></el-input>
</el-form-item>
<!-- 供货商描述表单字段 -->
<el-form-item label="描述：">
<!-- 文本域输入框，双向绑定到 editForm.info -->
<el-input
type="textarea"
v-model="editForm.info"
placeholder="供应商的简单描述"
></el-input>
</el-form-item>
<!-- 表单操作按钮 -->
<el-form-item>
<!-- 提交按钮，点击触发 submitEditForm 方法 -->
<el-button
type="primary"
@click="submitEditForm('editForm')"
style="font-size: 18px"
>
<!-- 确认图标 -->
<i
class="iconfont icon-r-yes"
style="font-size: 18px"
></i>
提交</el-button
>
<!-- 按钮文本 -->
提交</el-button>
<!-- 关闭按钮，点击重置表单并隐藏对话框 -->
<el-button
@click="
() => {
@ -236,189 +299,237 @@
}
"
style="font-size: 18px"
>关闭</el-button
>
>关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { popup } from "@/assets/js/common";
import {
delSupplier,
queryByCn,
queryPageSupplier,
saveSupplier,
updateSupplier,
} from "@/api/inventory_management/supplier/supplierApi";
// 引入通用弹出提示方法
import { popup } from "@/assets/js/common";
// 引入供货商管理相关 API 方法
import {
delSupplier,
queryByCn,
queryPageSupplier,
saveSupplier,
updateSupplier,
} from "@/api/inventory_management/supplier/supplierApi";
export default {
data() {
return {
tableData: [],
editVisable: false,
editForm: {},
searchForm: {
pageSize: 5,
export default {
// 组件数据
data() {
return {
// 表格数据，存储供货商列表
tableData: [],
// 修改对话框显示状态
editVisable: false,
// 修改表单数据
editForm: {},
// 搜索表单数据
searchForm: {
pageSize: 5,
},
// 创建对话框显示状态
newVisable: false,
// 创建表单数据
newForm: {},
// 表单验证规则
rules: {
// 供货商名称验证规则，不能为空
name: [
{
required: true,
message: "供货商名称不能为空",
trigger: "blur",
},
],
// 供货商地址验证规则，不能为空
address: [
{
required: true,
message: "供货商地址不能为空",
trigger: "blur",
},
],
// 供货商联系电话验证规则，不能为空
tel: [
{
required: true,
message: "供货商联系电话不能为空",
trigger: "blur",
},
],
},
};
},
// 组件方法
methods: {
// 提交搜索表单，触发数据初始化
subSearchForm() {
this.init();
},
newVisable: false,
newForm: {},
rules: {
name: [
{
required: true,
message: "供货商名称不能为空",
trigger: "blur",
},
],
address: [
{
required: true,
message: "供货商地址不能为空",
trigger: "blur",
},
],
tel: [
{
required: true,
message: "供货商联系电话不能为空",
trigger: "blur",
},
],
// 初始化数据，调用 API 获取供货商列表
init() {
queryPageSupplier(this.searchForm).then((res) => {
res = res.data;
if (res.code == 200) {
// 更新表格数据
this.tableData = res.data.records;
// 更新搜索表单的总记录数
this.searchForm.total = res.data.total;
// 更新搜索表单的每页记录数
this.searchForm.pageSize = res.data.size;
// 更新搜索表单的当前页码
this.searchForm.currentPage = res.data.current;
} else {
// 显示错误提示
popup(res.msg, "error");
}
});
},
};
},
methods: {
subSearchForm() {
this.init();
},
init() {
queryPageSupplier(this.searchForm).then((res) => {
res = res.data;
if (res.code == 200) {
this.tableData = res.data.records;
this.searchForm.total = res.data.total;
this.searchForm.pageSize = res.data.size;
this.searchForm.currentPage = res.data.current;
} else {
popup(res.msg, "error");
}
});
},
/*分页*/
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.init();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.searchForm.currentPage = val;
this.init();
console.log(`当前页: ${val}`);
},
submitSearchForm() {
this.init();
},
submitNewForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
saveSupplier(this.newForm).then((res) => {
res = res.data;
if (res.code == 200) {
popup("添加成功");
this.newVisable = false;
this.newForm = {};
this.init();
} else {
popup(res.msg, "error");
}
});
}
});
},
delBtn(cn) {
this.$confirm("确定要删除这条记录" + "？", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
delSupplier({ cn: cn }).then((res) => {
res = res.data;
if (res.code == 200) {
popup("删除成功");
this.init();
} else {
popup(res.msg, "warning");
}
});
// 处理分页时每页记录数变化
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.init();
console.log(`每页 ${val} 条`);
},
// 处理分页时当前页码变化
handleCurrentChange(val) {
this.searchForm.currentPage = val;
this.init();
console.log(`当前页: ${val}`);
},
// 提交搜索表单（此方法与 subSearchForm 功能重复）
submitSearchForm() {
this.init();
},
// 提交创建表单
submitNewForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
saveSupplier(this.newForm).then((res) => {
res = res.data;
if (res.code == 200) {
// 显示添加成功提示
popup("添加成功");
// 隐藏对话框
this.newVisable = false;
// 清空表单数据
this.newForm = {};
// 重新初始化数据
this.init();
} else {
// 显示错误提示
popup(res.msg, "error");
}
});
}
});
},
// 删除供货商记录
delBtn(cn) {
this.$confirm("确定要删除这条记录" + "？", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作",
.then(() => {
delSupplier({ cn: cn }).then((res) => {
res = res.data;
if (res.code == 200) {
// 显示删除成功提示
popup("删除成功");
// 重新初始化数据
this.init();
} else {
// 显示警告提示
popup(res.msg, "warning");
}
});
})
.catch(() => {
// 显示取消操作提示
this.$message({
type: "info",
message: "已取消操作",
});
});
},
// 编辑供货商记录
editBtn(cn) {
queryByCn({ cn: cn }).then((res) => {
res = res.data;
if (res.code == 200) {
// 填充编辑表单数据
this.editForm = { ...res.data };
// 显示编辑对话框
this.editVisable = true;
} else {
// 显示错误提示
popup(res.msg, "error");
}
});
},
// 提交编辑表单
submitEditForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
updateSupplier(this.editForm).then((res) => {
res = res.data;
if (res.code == 200) {
// 显示修改成功提示
popup("修改成功");
// 隐藏编辑对话框
this.editVisable = false;
// 清空编辑表单数据
this.editForm = {};
// 重新初始化数据
this.init();
} else {
// 显示错误提示
popup(res.msg, "error");
}
});
}
});
},
},
editBtn(cn) {
queryByCn({ cn: cn }).then((res) => {
res = res.data;
if (res.code == 200) {
this.editForm = { ...res.data };
this.editVisable = true;
} else {
popup(res.msg, "error");
}
});
},
submitEditForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
updateSupplier(this.editForm).then((res) => {
res = res.data;
if (res.code == 200) {
popup("修改成功");
this.editVisable = false;
this.editForm = {};
this.init();
} else {
popup(res.msg, "error");
}
});
}
});
// 组件挂载时初始化数据
mounted() {
this.init();
},
},
mounted() {
this.init();
},
};
};
</script>
<style>
.table {
height: 320px;
}
/* 表格容器样式，设置高度 */
.table {
height: 320px;
}
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
/* 分页工具样式，设置定位、宽度、外边距和高度 */
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
.search {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
/* 搜索区域样式 */
.search {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
.search .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
/* 搜索区域列样式 */
.search .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
</style>

792
superMarket-frontend/src/views/member_management/member/List.vue
View File

File diff suppressed because it is too large Load Diff

234
superMarket-frontend/src/views/personal/Edit_pwd.vue
Unescape View File

@ -1,12 +1,20 @@
<template>
<!-- 组件的根容器 -->
<div>
<!-- 面包屑导航组件，用于显示页面层级关系，分隔符为 / -->
<el-breadcrumb separator="/">
<!-- 面包屑导航的第一个元素，显示“首页” -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 面包屑导航的第二个元素，显示“个人中心” -->
<el-breadcrumb-item>个人中心 </el-breadcrumb-item>
<el-breadcrumb-item>密码修改</el-breadcrumb-item> </el-breadcrumb
><br />
<!-- 面包屑导航的第三个元素，显示“密码修改” -->
<el-breadcrumb-item>密码修改</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 密码修改表单的容器，设置了 id 为 edit_pwd -->
<div id="edit_pwd">
<!-- Element UI 的表单组件，绑定表单数据到 pwdForm，设置验证规则为 rules，引用为 pwdForm，标签宽度为 100px，添加类名 demo-ruleForm -->
<el-form
:model="pwdForm"
:rules="rules"
@ -14,46 +22,62 @@
label-width="100px"
class="demo-ruleForm"
>
<!-- 显示一个图标和标题“密码修改” -->
<i class="iconfont icon-r-lock" style="font-size: 32px">
<b style="font-size: 28px">密码修改</b></i
>
<!-- 换行 -->
<br />
<!-- 换行 -->
<br />
<!-- 表单中的账号字段，标签为“账号” -->
<el-form-item label="账号">
<!-- 输入框，设置为禁用状态，绑定账号数据到 pwdForm.username -->
<el-input disabled v-model="pwdForm.username"></el-input>
</el-form-item>
<!-- 表单中的旧密码字段，标签为“旧密码”，设置了验证规则（在 rules 中定义） -->
<el-form-item label="旧密码" prop="oldPwd">
<!-- 密码输入框，绑定旧密码数据到 pwdForm.oldPwd -->
<el-input
type="password"
v-model="pwdForm.oldPwd"
></el-input>
</el-form-item>
<!-- 表单中的新密码字段，标签为“新密码”，设置了验证规则（在 rules 中定义） -->
<el-form-item label="新密码" prop="newPwd">
<!-- 密码输入框，绑定新密码数据到 pwdForm.newPwd -->
<el-input
type="password"
v-model="pwdForm.newPwd"
></el-input>
</el-form-item>
<!-- 表单中的操作按钮区域 -->
<el-form-item>
<!-- 确定按钮，类型为 primary，点击触发 submitForm 方法，设置字体大小为 18px -->
<el-button
type="primary"
@click="submitForm('pwdForm')"
style="font-size: 18px"
>
<!-- 按钮图标 -->
<i
class="iconfont icon-r-yes"
style="font-size: 18px"
></i>
<!-- 按钮文本 -->
确定</el-button
>
<!-- 重置按钮，点击触发 resetForm 方法，设置字体大小为 18px -->
<el-button
@click="resetForm('pwdForm')"
style="font-size: 18px"
>
<!-- 按钮图标 -->
<i
class="iconfont icon-r-refresh"
style="font-size: 18px"
></i>
<!-- 按钮文本 -->
重置</el-button
>
</el-form-item>
@ -62,97 +86,127 @@
</div>
</template>
<script>
import { loginEmp, removeToken } from "@/assets/js/auth";
import Cookies from "js-cookie";
import { ajaxPost, popup } from "@/assets/js/common";
// 导入登录员工信息和移除 token 的方法
import { loginEmp, removeToken } from "@/assets/js/auth";
// 导入 js-cookie 库，用于操作 cookie
import Cookies from "js-cookie";
// 导入 ajaxPost 方法用于发送 POST 请求，导入 popup 方法用于显示弹窗提示
import { ajaxPost, popup } from "@/assets/js/common";
export default {
data() {
return {
pwdForm: {},
rules: {
newPwd: [
{
required: true,
message: "新密码不能为空",
trigger: "blur",
},
{
min: 6,
max: 8,
message: "新密码长度为6-8位",
trigger: "blur",
},
],
oldPwd: [
{
required: true,
message: "旧密码不能为空",
trigger: "blur",
},
{
min: 6,
max: 8,
message: "旧密码长度为6-8位",
trigger: "blur",
},
],
},
};
},
methods: {
init() {
this.pwdForm.username = loginEmp().username;
},
resetForm(formName) {
this.$refs[formName].resetFields();
export default {
// 组件的数据部分
data() {
return {
// 表单数据对象
pwdForm: {},
// 表单验证规则
rules: {
newPwd: [
{
// 新密码为必填项，失去焦点时触发验证
required: true,
message: "新密码不能为空",
trigger: "blur"
},
{
// 新密码长度要求为 6 - 8 位，失去焦点时触发验证
min: 6,
max: 8,
message: "新密码长度为6 - 8位",
trigger: "blur"
}
],
oldPwd: [
{
// 旧密码为必填项，失去焦点时触发验证
required: true,
message: "旧密码不能为空",
trigger: "blur"
},
{
// 旧密码长度要求为 6 - 8 位，失去焦点时触发验证
min: 6,
max: 8,
message: "旧密码长度为6 - 8位",
trigger: "blur"
}
]
}
};
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm("确定修改密码?", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
ajaxPost("/personal/edit_pwd", this.pwdForm).then(
(res) => {
res = res.data;
if (res.code == 200) {
popup("密码修改成功,请重新登录...");
this.pwdForm = {
username: this.pwdForm.username,
};
Cookies.remove("employee");
removeToken();
this.$router.push("/");
} else {
popup(res.msg, "error");
}
}
);
// 组件的方法部分
methods: {
// 初始化方法，用于设置表单中的账号信息
init() {
// 从 loginEmp 方法获取登录员工信息，并将账号赋值给 pwdForm.username
this.pwdForm.username = loginEmp().username;
},
// 重置表单方法，接收表单引用名作为参数
resetForm(formName) {
// 调用表单的 resetFields 方法重置表单字段
this.$refs[formName].resetFields();
},
// 提交表单方法，接收表单引用名作为参数
submitForm(formName) {
// 对表单进行验证
this.$refs[formName].validate((valid) => {
if (valid) {
// 弹出确认框，确认是否修改密码
this.$confirm("确定修改密码?", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作",
.then(() => {
// 发送 POST 请求到 /personal/edit_pwd 接口，传递表单数据
ajaxPost("/personal/edit_pwd", this.pwdForm).then(
(res) => {
// 获取响应数据
res = res.data;
if (res.code == 200) {
// 显示密码修改成功提示，并提示重新登录
popup("密码修改成功,请重新登录...");
// 重置表单数据，保留账号信息
this.pwdForm = {
username: this.pwdForm.username
};
// 移除名为 employee 的 cookie
Cookies.remove("employee");
// 移除 token
removeToken();
// 跳转到首页
this.$router.push("/");
} else {
// 显示错误提示弹窗
popup(res.msg, "error");
}
}
);
})
.catch(() => {
// 显示取消操作的提示信息
this.$message({
type: "info",
message: "已取消操作"
});
});
});
}
});
}
});
}
},
},
created() {
this.init();
},
};
// 组件创建完成后的钩子函数
created() {
// 调用初始化方法
this.init();
}
};
</script>
<style>
#edit_pwd {
width: 50%;
margin: 50px auto;
background-color: #ffffff;
padding: 20px;
}
</style>
/* 密码修改表单容器的样式，设置宽度为 50%，水平居中，背景颜色为白色，添加内边距 */
#edit_pwd {
width: 50%;
margin: 50px auto;
background-color: #ffffff;
padding: 20px;
}
</style>

296
superMarket-frontend/src/views/personal/Information.vue
Unescape View File

@ -1,16 +1,28 @@
<template>
<!-- 组件的根元素，设置了 id 为 information -->
<div id="information">
<!-- 面包屑导航组件，用于显示页面层级，分隔符为 / -->
<el-breadcrumb separator="/">
<!-- 面包屑导航的第一个项，显示“首页” -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 面包屑导航的第二个项，显示“个人中心” -->
<el-breadcrumb-item>个人中心 </el-breadcrumb-item>
<el-breadcrumb-item>个人资料</el-breadcrumb-item> </el-breadcrumb
><br />
<!-- 面包屑导航的第三个项，显示“个人资料” -->
<el-breadcrumb-item>个人资料</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 显示一个图标和标题“完善个人资料” -->
<i class="iconfont icon-r-paper" style="font-size: 32px">
<b style="font-size: 28px">完善个人资料</b></i
>
<!-- 换行 -->
<br />
<!-- 换行 -->
<br />
<!-- Element UI 的表单组件，绑定表单数据到 informationForm，设置验证规则为 rules，引用为 informationForm，标签宽度为 100px，添加类名 demo-ruleForm -->
<el-form
:model="informationForm"
:rules="rules"
@ -18,9 +30,13 @@
label-width="100px"
class="demo-ruleForm"
>
<!-- 栅格布局的一行 -->
<el-row>
<!-- 这一行的第一列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，设置宽度为 40% -->
<el-form-item style="width: 40%">
<!-- 上传组件，用于上传头像 -->
<el-upload
class="avatar-uploader"
action="http://localhost:9291/personnel_management/employee/uploadImg"
@ -28,11 +44,13 @@
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<!-- 如果 imageUrl 存在，显示上传的头像图片 -->
<img
v-if="imageUrl"
:src="BaseApi + imageUrl"
class="avatar"
/>
<!-- 如果 imageUrl 不存在，显示一个添加图片的图标 -->
<i
v-else
class="el-icon-plus avatar-uploader-icon"
@ -41,8 +59,11 @@
</el-form-item>
</el-col>
</el-row>
<!-- 栅格布局的一行 -->
<el-row>
<!-- 这一行的第一列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，标签为“电话号码：”，设置宽度为 40%，绑定数据到 informationForm.username -->
<el-form-item
style="width: 40%"
label="电话号码："
@ -54,7 +75,9 @@
></el-input>
</el-form-item>
</el-col>
<!-- 这一行的第二列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，标签为“姓名：”，设置宽度为 40%，绑定数据到 informationForm.nickName -->
<el-form-item
style="width: 40%"
label="姓名："
@ -66,8 +89,11 @@
</el-form-item>
</el-col>
</el-row>
<!-- 栅格布局的一行 -->
<el-row>
<!-- 这一行的第一列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，标签为“身份证号：”，设置宽度为 40%，绑定数据到 informationForm.idCard -->
<el-form-item
style="width: 40%"
label="身份证号："
@ -78,7 +104,9 @@
></el-input>
</el-form-item>
</el-col>
<!-- 这一行的第二列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，标签为“年龄：”，设置宽度为 40%，绑定数据到 informationForm.age，限制输入为数字且在 18 到 70 之间 -->
<el-form-item style="width: 40%" label="年龄：">
<el-input
type="number"
@ -89,8 +117,11 @@
</el-form-item>
</el-col>
</el-row>
<!-- 栅格布局的一行 -->
<el-row>
<!-- 这一行的第一列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，标签为“所属部门：”，设置宽度为 40%，绑定数据到 informationForm.deptId，设置为禁用状态 -->
<el-form-item
style="width: 40%"
label="所属部门："
@ -104,6 +135,7 @@
@change="$forceUpdate()"
clearable
>
<!-- 循环生成部门选项 -->
<el-option
v-for="item in options"
:key="item.id"
@ -114,7 +146,9 @@
</el-select>
</el-form-item>
</el-col>
<!-- 这一行的第二列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，标签为“住址：”，设置宽度为 40%，绑定数据到 informationForm.address -->
<el-form-item style="width: 40%" label="住址：">
<el-input
type="text"
@ -123,8 +157,11 @@
</el-form-item>
</el-col>
</el-row>
<!-- 栅格布局的一行 -->
<el-row>
<!-- 这一行的第一列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，标签为“备注：”，设置宽度为 40%，绑定数据到 informationForm.info，使用文本域输入 -->
<el-form-item style="width: 40%" label="备注：">
<el-input
type="textarea"
@ -134,7 +171,9 @@
></el-input>
</el-form-item>
</el-col>
<!-- 这一行的第二列，占 12 份 -->
<el-col :span="12">
<!-- 表单字段项，标签为“性别：”，设置宽度为 40%，绑定数据到 informationForm.sex -->
<el-form-item style="width: 40%" label="性别：">
<el-select
style="width: 200px"
@ -143,29 +182,37 @@
placeholder="请选择性别"
clearable
>
<!-- 性别选项 -->
<el-option label="女" value="0"></el-option>
<el-option label="男" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 表单操作项 -->
<el-form-item>
<!-- 提交按钮，类型为 primary，点击时调用 submitInformationForm 方法，设置字体大小 -->
<el-button
type="primary"
@click="submitInformationForm('informationForm')"
style="font-size: 18px"
>
<!-- 提交按钮的图标 -->
<i class="iconfont icon-r-yes" style="font-size: 18px"></i>
<!-- 提交按钮的文本 -->
提交</el-button
>
<!-- 重置按钮，点击时调用 resetForm 方法，设置字体大小 -->
<el-button
@click="resetForm('informationForm')"
style="font-size: 18px"
>
<!-- 重置按钮的图标 -->
<i
class="iconfont icon-r-refresh"
style="font-size: 18px"
></i>
<!-- 重置按钮的文本 -->
重置</el-button
>
</el-form-item>
@ -173,108 +220,157 @@
</div>
</template>
<script>
import { listByQo } from "@/api/personnel_management/department/deptApi";
import { popup } from "@/assets/js/common";
import { queryInformation } from "@/api/personal/personApi";
import { update } from "@/api/personnel_management/employee/empApi";
import { loginEmp } from "@/assets/js/auth";
// 导入获取部门列表的 API 方法
import { listByQo } from "@/api/personnel_management/department/deptApi";
// 导入弹窗提示方法
import { popup } from "@/assets/js/common";
// 导入查询个人资料的 API 方法
import { queryInformation } from "@/api/personal/personApi";
// 导入更新个人资料的 API 方法
import { update } from "@/api/personnel_management/employee/empApi";
// 导入获取登录员工信息的方法
import { loginEmp } from "@/assets/js/auth";
export default {
data() {
return {
BaseApi: this.$store.state.BaseApi,
loginEid: loginEmp().id,
informationForm: {},
imageUrl: "",
options: [],
rules: {
username: [
{
required: true,
message: "手机号不能为空",
trigger: "blur",
},
],
nickName: [
{
required: true,
message: "姓名不能为空",
trigger: "blur",
},
],
idCard: [
{
required: true,
message: "身份证号不能为空",
trigger: "blur",
},
],
},
};
},
methods: {
deptAll() {
listByQo({}).then((res) => {
res = res.data;
if (res.code == 200) {
this.options = res.data;
} else {
popup(res.msg, "error");
export default {
// 组件的数据定义
data() {
return {
// 从 Vuex 中获取基础 API 地址
BaseApi: this.$store.state.BaseApi,
// 获取登录员工的 ID
loginEid: loginEmp().id,
// 个人资料表单数据对象
informationForm: {},
// 头像图片的 URL
imageUrl: "",
// 部门选项列表
options: [],
// 表单验证规则
rules: {
username: [
{
// 电话号码为必填项，失去焦点时触发验证
required: true,
message: "手机号不能为空",
trigger: "blur"
}
],
nickName: [
{
// 姓名为必填项，失去焦点时触发验证
required: true,
message: "姓名不能为空",
trigger: "blur"
}
],
idCard: [
{
// 身份证号为必填项，失去焦点时触发验证
required: true,
message: "身份证号不能为空",
trigger: "blur"
}
]
}
});
};
},
init() {
queryInformation().then((res) => {
res = res.data;
if (res.code == 200) {
this.informationForm = { ...res.data };
this.imageUrl = this.informationForm.headImg;
} else {
popup(res.msg, "error");
// 组件的方法定义
methods: {
// 获取所有部门的方法
deptAll() {
// 调用获取部门列表的 API 方法，传递空参数对象
listByQo({}).then((res) => {
// 获取响应数据
res = res.data;
if (res.code == 200) {
// 更新部门选项列表
this.options = res.data;
} else {
// 显示错误提示弹窗
popup(res.msg, "error");
}
});
},
// 初始化个人资料的方法
init() {
// 调用查询个人资料的 API 方法
queryInformation().then((res) => {
// 获取响应数据
res = res.data;
if (res.code == 200) {
// 更新个人资料表单数据
this.informationForm = { ...res.data };
// 更新头像图片 URL
this.imageUrl = this.informationForm.headImg;
} else {
// 显示错误提示弹窗
popup(res.msg, "error");
}
});
},
// 提交个人资料表单的方法
submitInformationForm(formName) {
// 验证表单
this.$refs[formName].validate((valid) => {
if (valid) {
// 调用更新个人资料的 API 方法，传递表单数据
update(this.informationForm).then((res) => {
// 获取响应数据
res = res.data;
if (res.code == 200) {
// 显示更新成功提示弹窗
popup("更新成功");
} else {
// 显示错误提示弹窗
popup(res.msg, "error");
}
// 重新初始化个人资料
this.init();
});
}
});
},
// 重置表单的方法
resetForm(formName) {
// 重置表单字段
this.$refs[formName].resetFields();
// 重新初始化个人资料
this.init();
},
// 处理头像上传成功的方法
handleAvatarSuccess(res) {
// 更新表单中头像的 URL
this.informationForm.headImg = res.url;
// 更新显示的头像图片 URL
this.imageUrl = res.url;
},
// 上传头像前的校验方法
beforeAvatarUpload(file) {
// 判断文件类型是否为 JPEG 或 PNG
const isJPG =
file.type === "image/jpeg" || file.type === "image/png";
// 判断文件大小是否小于 3MB
const isLt2M = file.size / 1024 / 1024 < 3;
if (!isJPG) {
// 显示文件类型错误提示
this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
}
});
},
submitInformationForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
update(this.informationForm).then((res) => {
res = res.data;
if (res.code == 200) {
popup("更新成功");
} else {
popup(res.msg, "error");
}
this.init();
});
if (!isLt2M) {
// 显示文件大小错误提示
this.$message.error("上传头像图片大小不能超过 3MB!");
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.init();
},
/*上传头像*/
handleAvatarSuccess(res) {
this.informationForm.headImg = res.url;
this.imageUrl = res.url;
},
beforeAvatarUpload(file) {
const isJPG =
file.type === "image/jpeg" || file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 3;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
// 返回校验结果，只有类型和大小都符合才允许上传
return isJPG && isLt2M;
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 3MB!");
}
return isJPG && isLt2M;
},
},
mounted() {
this.imageUrl = "";
this.deptAll();
this.init();
},
};
</script>
// 组件挂载完成后的钩子函数
mounted() {
// 初始化头像图片 URL 为空
this.imageUrl = "";
// 获取所有部门信息
this.deptAll();
// 初始化个人资料
this.init();
}
};
</script>

208
superMarket-frontend/src/views/personnel_management/dept/List.vue
Unescape View File

@ -1,134 +1,170 @@
<template>
<!-- 组件的根元素，设置了 id 为 dept_list -->
<div id="dept_list">
<!-- 面包屑导航组件，用于显示页面层级，分隔符为 / -->
<el-breadcrumb separator="/">
<el-breadcrumb-item
>首页</el-breadcrumb-item
>
<el-breadcrumb-item
>人事管理
</el-breadcrumb-item>
<el-breadcrumb-item
>部门管理</el-breadcrumb-item
> </el-breadcrumb
><br />
<!-- 面包屑导航的第一个项，显示“首页” -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 面包屑导航的第二个项，显示“人事管理” -->
<el-breadcrumb-item>人事管理</el-breadcrumb-item>
<!-- 面包屑导航的第三个项，显示“部门管理” -->
<el-breadcrumb-item>部门管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 栅格布局的一行 -->
<el-row>
<!-- 这一行的第一列，占 7 份，包含部门名称输入框 -->
<el-col :span="7">
<el-input placeholder="部门名称" v-model="searchForm.name"/>
</el-col>
<!-- 这一行的第二列，占 7 份，包含部门状态选择框 -->
<el-col :span="7">
<el-select v-model="searchForm.state" placeholder="请选择状态" clearable>
<!-- 状态选择框的选项，标签为“正常”，值为 0 -->
<el-option label="正常" value="0"></el-option>
<!-- 状态选择框的选项，标签为“停用”，值为 -1 -->
<el-option label="停用" value="-1"></el-option>
</el-select>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 栅格布局的一行 -->
<el-row>
<!-- 这一行的列，占 24 份，设置文本左对齐，包含搜索和创建部门按钮 -->
<el-col :span="24" style="text-align: left">
<!-- 搜索按钮，类型为 primary，点击触发 subSearchForm 方法，设置字体大小 -->
<el-button
type="primary"
@click="subSearchForm"
style="font-size: 18px"
>
<i class="iconfont icon-r-find" style="font-size: 18px">
</i>
搜索</el-button
>
<el-button type="success" @click="newVisable=true"
style="font-size: 18px"
>
<i class="iconfont icon-r-add" style="font-size: 18px">
</i> 创建部门
<!-- 搜索按钮的图标 -->
<i class="iconfont icon-r-find" style="font-size: 18px"></i>
<!-- 搜索按钮的文本 -->
搜索</el-button>
<!-- 创建部门按钮，类型为 success，点击将 newVisable 设置为 true，设置字体大小 -->
<el-button type="success" @click="newVisable=true" style="font-size: 18px">
<!-- 创建部门按钮的图标 -->
<i class="iconfont icon-r-add" style="font-size: 18px"></i>
<!-- 创建部门按钮的文本 -->
创建部门
</el-button>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 表格组件，数据绑定到 tableData，设置宽度为 100% -->
<el-table
:data="tableData"
style="width: 100%">
:data="tableData"
style="width: 100%">
<!-- 表格列，显示序号，类型为 index，设置宽度 -->
<el-table-column
type="index"
label="序号"
width="180">
type="index"
label="序号"
width="180">
</el-table-column>
<!-- 表格列，显示部门名称，prop 绑定到数据中的 name 字段，设置宽度 -->
<el-table-column
prop="name"
label="名称"
width="180">
prop="name"
label="名称"
width="180">
</el-table-column>
<!-- 表格列，显示部门描述，prop 绑定到数据中的 info 字段 -->
<el-table-column
prop="info"
label="描述">
prop="info"
label="描述">
</el-table-column>
<!-- 表格列，显示部门状态，根据状态值显示不同的标签 -->
<el-table-column
prop="state"
label="状态">
prop="state"
label="状态">
<template v-slot="scope">
<!-- 如果状态为 0，显示绿色的“正常”标签 -->
<el-tag v-if="scope.row.state=='0'" type="success" style="font-size: 14px;">
<i class="iconfont icon-r-yes" style="font-size: 14px;"> </i> 正常</el-tag>
<i class="iconfont icon-r-yes" style="font-size: 14px;"></i> 正常</el-tag>
<!-- 否则，显示红色的“停用”标签 -->
<el-tag v-else type="danger" style="font-size: 14px;">
<i class="iconfont icon-r-no" style="font-size: 14px;"> </i> 停用</el-tag>
<i class="iconfont icon-r-no" style="font-size: 14px;"></i> 停用</el-tag>
</template>
</el-table-column>
<!-- 表格列，显示操作，固定在右侧，设置宽度 -->
<el-table-column
label="操作" width="240" fixed="right">
label="操作" width="240" fixed="right">
<template v-slot="scope">
<!-- 修改按钮，类型为 success，点击触发 edit 方法，设置字体大小 -->
<el-button type="success" @click="edit(scope.row)" style="font-size: 18px;">
<i class="iconfont icon-r-edit" style="font-size: 18px;"> </i> 修改</el-button>
<i class="iconfont icon-r-edit" style="font-size: 18px;"></i> 修改</el-button>
<!-- 停用按钮，类型为 danger，点击触发 forbidden 方法，设置字体大小 -->
<el-button type="danger" @click="forbidden(scope.row.id)" style="font-size: 18px;">
<i class="iconfont icon-r-no" style="font-size: 18px;"> </i> 停用</el-button>
<i class="iconfont icon-r-no" style="font-size: 18px;"></i> 停用</el-button>
</template>
</el-table-column>
</el-table>
<!--修改描述/状态弹出框-->
<!-- 修改描述/状态的对话框，title 为“部门修改”，根据 dialogVisible 的值显示或隐藏，设置宽度 -->
<el-dialog
title="部门修改"
:visible.sync="dialogVisible"
width="50%">
<el-form v-model="editForm" label-width="100px" class="demo-ruleForm">
title="部门修改"
:visible.sync="dialogVisible"
width="50%">
<!-- 表单组件，绑定到 editForm，设置标签宽度和类名 -->
<el-form v-model="editForm" label-width="100px" class="demo-ruleForm">
<!-- 表单字段项，标签为“名称：”，输入框设置为禁用，绑定数据到 editForm.name -->
<el-form-item label="名称：">
<el-input disabled v-model="editForm.name"></el-input>
</el-form-item>
<!-- 表单字段项，标签为“描述：”，绑定数据到 editForm.info -->
<el-form-item label="描述：">
<el-input type="text" v-model="editForm.info"></el-input>
</el-form-item>
<!-- 表单字段项，标签为“状态：”，绑定数据到 editForm.state，包含状态选择框 -->
<el-form-item label="状态：">
<el-select v-model="editForm.state"
clearable
@change="$forceUpdate()"
placeholder="请选择状态">
<el-select v-model="editForm.state" clearable @change="$forceUpdate()" placeholder="请选择状态">
<!-- 循环生成状态选项 -->
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 表单操作项，包含提交和关闭按钮 -->
<el-form-item>
<!-- 提交按钮，类型为 primary，点击触发 submitEditForm 方法，设置字体大小 -->
<el-button type="primary" @click="submitEditForm" style="font-size: 18px;">
<i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 提交</el-button>
<i class="iconfont icon-r-yes" style="font-size: 18px;"></i> 提交</el-button>
<!-- 关闭按钮，点击触发 canCelEdit 方法，设置字体大小 -->
<el-button @click="canCelEdit" style="font-size: 18px;">
关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--创建弹出框-->
<!-- 创建部门的对话框，title 为“创建部门”，根据 newVisable 的值显示或隐藏，设置宽度 -->
<el-dialog
title="创建部门"
:visible.sync="newVisable"
width="50%">
<el-form :model="newForm" :rules="rules" ref="newForm" label-width="100px" class="demo-ruleForm">
title="创建部门"
:visible.sync="newVisable"
width="50%">
<!-- 表单组件，绑定到 newForm，设置验证规则、引用、标签宽度和类名 -->
<el-form :model="newForm" :rules="rules" ref="newForm" label-width="100px" class="demo-ruleForm">
<!-- 表单字段项，标签为“名称：”，绑定数据到 newForm.name，设置验证规则 -->
<el-form-item label="名称：" prop="name">
<el-input v-model="newForm.name"></el-input>
</el-form-item>
<!-- 表单字段项，标签为“描述：”，绑定数据到 newForm.info -->
<el-form-item label="描述：">
<el-input type="text" v-model="newForm.info"></el-input>
</el-form-item>
<!-- 表单操作项，包含提交和重置按钮 -->
<el-form-item>
<!-- 提交按钮，点击触发 submitNewForm 方法 -->
<el-button type="primary" @click="submitNewForm('newForm')">提交</el-button>
<!-- 重置按钮，点击触发 resetNewForm 方法 -->
<el-button @click="resetNewForm('newForm')">重置</el-button>
</el-form-item>
</el-form>
@ -136,23 +172,35 @@
</div>
</template>
<script>
// 导入弹窗提示方法
import { popup} from "@/assets/js/common";
// 导入部门管理相关的 API 方法
import {deactivate, listByQo, save, update} from "@/api/personnel_management/department/deptApi";
export default {
// 组件的数据定义
data() {
return {
// 表格展示的部门数据
tableData: [],
// 用于修改部门的表单数据
editForm: {},
// 暂未明确用途的 editRow（可能是保留原始行数据等）
editRow:{},
// 修改部门对话框的显示状态
dialogVisible: false,
// 创建部门对话框的显示状态
newVisable:false,
// 创建部门表单的数据
newForm:{},
// 搜索表单的数据
searchForm: {},
// 状态选项列表
options: [
{label: '正常', value: '0'},
{label: '停用', value: '-1'}
],
// 创建部门表单的验证规则，名称为必填项
rules: {
name:[
{required: true, message: '名称不能为空', trigger: 'blur'},
@ -160,94 +208,118 @@
}
}
},
// 组件的方法定义
methods: {
// 初始化数据的方法，获取部门列表数据
init() {
listByQo(this.searchForm).then(res => {
if (res.data.code == 200) {
// 更新表格数据
this.tableData = res.data.data
}else {
// 显示错误提示弹窗
popup(res.data.msg,"error")
}
})
},
// 停用部门的方法，接收部门 ID 作为参数
forbidden(id) {
deactivate(id).then(res => {
res = res.data
if (res.code == 200) {
// 显示操作成功提示弹窗
popup("操作成功")
} else {
// 显示错误提示弹窗
popup(res.msg, "error")
}
// 重新初始化数据
this.init()
})
},
/*弹出修改表单*/
// 弹出修改表单的方法，接收要修改的部门行数据作为参数
edit(row) {
// 将选中行的数据赋值给 editForm
this.editForm= {...row}
// 显示修改部门对话框
this.dialogVisible = true
},
/*条件搜索*/
// 条件搜索的方法，重新初始化数据
subSearchForm() {
this.init()
this.init()
},
/*对接后端修改接口*/
// 提交修改部门表单的方法，对接后端修改接口
submitEditForm() {
update(this.editForm).then(res=>{
res=res.data
if (res.code==200){
// 显示操作成功提示弹窗
popup("操作成功")
// 隐藏修改部门对话框
this.dialogVisible=false
// 重新初始化数据
this.init()
}else {
// 显示错误提示弹窗
popup(res.msg, "error")
}
})
},
/*修改重置按钮*/
// 关闭修改表单并重置数据的方法
canCelEdit(){
this.dialogVisible=false
// 隐藏修改部门对话框
this.dialogVisible=false
// 清空 editForm
this.editForm={}
},
/*创建新角色*/
// 创建新部门的方法，接收表单引用名作为参数
submitNewForm(formName){
// 验证表单
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.newForm)
// 调用保存部门的 API 方法
save(this.newForm).then(res=>{
res=res.data
if (res.code==200){
// 显示操作成功提示弹窗
popup("操作成功")
// 隐藏创建部门对话框
this.newVisable=false
// 清空 newForm
this.newForm={}
// 重新初始化数据
this.init()
}else {
// 显示错误提示弹窗
popup(res.msg, "error")
}
})
}
});
},
// 重置创建部门表单的方法，接收表单引用名作为参数
resetNewForm(formname){
// 重置表单字段
this.$refs[formname].resetFields()
},
},
// 组件创建完成后的钩子函数，初始化数据
created() {
this.init()
}
}
</script>
<style>
.search {
/* 搜索相关的样式类，设置布局和高度等 */
.search {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
.search .column {
.search .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;

1179
superMarket-frontend/src/views/personnel_management/employee/List.vue
View File

File diff suppressed because it is too large Load Diff

323
superMarket-frontend/src/views/sale_management/exchange_point_products_records/List.vue
Unescape View File

@ -1,24 +1,30 @@
<template>
<!-- 定义一个 id 为 sale_records 的 div 容器，作为整个页面的根容器 -->
<div id="sale_records">
<!-- 面包屑导航组件，用于显示当前页面在整个网站结构中的位置，分隔符为 / -->
<el-breadcrumb separator="/">
<el-breadcrumb-item
>首页</el-breadcrumb-item
>
<el-breadcrumb-item
>销售管理
</el-breadcrumb-item>
<el-breadcrumb-item
>积分兑换记录</el-breadcrumb-item
> </el-breadcrumb
><br />
<!-- 面包屑导航的第一个项目，显示“首页” -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 面包屑导航的第二个项目，显示“销售管理” -->
<el-breadcrumb-item>销售管理</el-breadcrumb-item>
<!-- 面包屑导航的第三个项目，显示“积分兑换记录” -->
<el-breadcrumb-item>积分兑换记录</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 行布局组件，用于将其子元素按行排列 -->
<el-row>
<!-- 列布局组件，占 7 列宽度 -->
<el-col :span="7">
<!-- 输入框组件，占位符为“兑换订单编号”，绑定到 searchForm 对象的 cn 属性 -->
<el-input
placeholder="兑换订单编号"
v-model="searchForm.cn"
/>
</el-col>
<!-- 列布局组件，占 7 列宽度 -->
<el-col :span="7">
<!-- 下拉选择框组件，绑定到 searchForm 对象的 memberId 属性，可过滤选项，选择项改变时强制更新组件，占位符为“请选择会员账号”，可清除选择 -->
<el-select
v-model="searchForm.memberId"
placeholder="请选择会员账号"
@ -26,6 +32,7 @@
@change="$forceUpdate()"
clearable
>
<!-- 循环渲染下拉选择框的选项，从 options_memberPhone 数组中获取数据 -->
<el-option
v-for="item in options_memberPhone"
:key="item.id"
@ -35,8 +42,11 @@
</el-option>
</el-select>
</el-col>
<!-- 列布局组件，占 10 列宽度 -->
<el-col :span="10">
<!-- 文本提示“兑换时间：” -->
<span>兑换时间：</span>
<!-- 日期选择器组件，宽度为 140px，绑定到 searchForm 对象的 startTime 属性，日期格式为 yyyy-MM-dd，占位符为“起始时间” -->
<el-date-picker
style="width: 140px"
v-model="searchForm.startTime"
@ -45,7 +55,9 @@
placeholder="起始时间"
>
</el-date-picker>
<!-- 分隔符 -->
-
<!-- 日期选择器组件，宽度为 140px，绑定到 searchForm 对象的 endTime 属性，日期格式为 yyyy-MM-dd，占位符为“结束时间” -->
<el-date-picker
v-model="searchForm.endTime"
style="width: 140px"
@ -56,26 +68,38 @@
</el-date-picker>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 行布局组件，用于将其子元素按行排列 -->
<el-row>
<!-- 列布局组件，占 24 列宽度，文本左对齐 -->
<el-col :span="24" style="text-align: left">
<!-- 按钮组件，类型为成功按钮，点击时调用 submitSearchForm 方法，字体大小为 18px -->
<el-button
type="success"
@click="submitSearchForm"
style="font-size: 18px"
>
<!-- 图标 -->
<i class="iconfont icon-r-find" style="font-size: 18px">
</i>
搜索</el-button
>
<!-- 按钮文本 -->
搜索
</el-button>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 表格数据容器 -->
<div class="table">
<!-- 表格组件，数据绑定到 tableData 数组，宽度为 100%，表格大小为中等 -->
<el-table :data="tableData" style="width: 100%" size="medium">
<!-- 表格列组件，显示“编号”，宽度为 200px，绑定到数据的 cn 属性 -->
<el-table-column prop="cn" width="200" label="编号">
</el-table-column>
<!-- 表格列组件，显示“商品封面” -->
<el-table-column prop="goodsCoverUrl" label="商品封面">
<!-- 自定义表格列内容，显示商品封面图片，图片地址为 BaseApi 加上数据的 goodsCoverUrl 属性 -->
<template v-slot="scope">
<img
:src="BaseApi + scope.row.goodsCoverUrl"
@ -84,34 +108,46 @@
/>
</template>
</el-table-column>
<!-- 表格列组件，显示“商品”，绑定到数据的 goodsName 属性 -->
<el-table-column prop="goodsName" label="商品">
</el-table-column>
<!-- 表格列组件，显示“积分”，绑定到数据的 integral 属性 -->
<el-table-column prop="integral" label="积分">
</el-table-column>
<!-- 表格列组件，显示“会员账号”，宽度为 200px，绑定到数据的 memberPhone 属性 -->
<el-table-column
width="200"
prop="memberPhone"
label="会员账号"
>
</el-table-column>
<!-- 表格列组件，显示“兑换时间”，宽度为 200px，绑定到数据的 updateTime 属性 -->
<el-table-column prop="updateTime" width="200" label="兑换时间">
</el-table-column>
<!-- 表格列组件，显示“操作者”，绑定到数据的 updateby 属性 -->
<el-table-column prop="updateby" label="操作者">
</el-table-column>
<!-- 表格列组件，显示“操作”，宽度为 140px，固定在表格右侧 -->
<el-table-column width="140" fixed="right" label="操作">
<!-- 自定义表格列内容，包含删除按钮 -->
<template v-slot="scope">
<!-- 按钮组件，类型为危险按钮，点击时调用 del 方法，传入当前行的 cn 属性，字体大小为 18px -->
<el-button
type="danger"
@click="del(scope.row.cn)"
style="font-size: 18px;"
>
>
<!-- 图标 -->
<i class="iconfont icon-r-delete" style="font-size: 18px;"> </i>
<!-- 按钮文本 -->
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin: 10px 0 15px 0;">
<!-- 分页组件容器 -->
<div style="margin: 10px 0 15px 0">
<!-- 分页组件，页码大小改变时调用 handleSizeChange 方法，当前页码改变时调用 handleCurrentChange 方法，当前页码绑定到 searchForm 的 currentPage 属性，可选择的每页记录数为 [5, 10, 20, 50]，每页记录数绑定到 searchForm 的 pageSize 属性，布局包含总数、页码大小选择、上一页、页码、下一页、跳转输入框，总记录数绑定到 searchForm 的 total 属性 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@ -127,123 +163,172 @@
</div>
</template>
<script>
import { popup } from "@/assets/js/common";
import {
delExchangePointProducts,
queryOptionsMemberPhone,
queryPageByQoExchangePointProducts,
} from "@/api/sale_management/exchange_point_products/exchangePointProductsApi";
// 从指定路径导入弹窗提示函数
import { popup } from "@/assets/js/common";
// 从指定路径导入积分兑换商品相关的 API 函数
import {
delExchangePointProducts,
queryOptionsMemberPhone,
queryPageByQoExchangePointProducts,
} from "@/api/sale_management/exchange_point_products/exchangePointProductsApi";
export default {
data() {
return {
BaseApi: this.$store.state.BaseApi,
searchForm: {
pageSize: 5,
},
tableData: [],
options_memberPhone: [],
};
},
methods: {
queryOptionsMemberPhone() {
queryOptionsMemberPhone().then((res) => {
res = res.data;
if (res.code == 200) {
this.options_memberPhone = res.data;
} else {
popup(res.msg, "error");
}
});
export default {
// 定义组件的数据
data() {
return {
// 从 store 中获取基础 API 地址
BaseApi: this.$store.state.BaseApi,
// 存储搜索表单数据，初始每页记录数为 5
searchForm: {
pageSize: 5,
},
// 存储表格展示的积分兑换记录数据
tableData: [],
// 存储会员账号选项数据
options_memberPhone: [],
};
},
init() {
if (this.searchForm.startTime > this.searchForm.endTime) {
popup("结束时间不能小于开始时间", "warning");
return;
}
queryPageByQoExchangePointProducts(this.searchForm).then((res) => {
res = res.data;
if (res.code == 200) {
this.tableData = res.data.records;
this.searchForm.total = res.data.total;
this.searchForm.pageSize = res.data.size;
this.searchForm.currentPage = res.data.current;
} else {
popup(res.msg, "error");
// 定义组件的方法
methods: {
// 查询会员账号选项数据
queryOptionsMemberPhone() {
// 调用查询会员账号选项的函数
queryOptionsMemberPhone().then((res) => {
// 获取响应中的数据
res = res.data;
if (res.code == 200) {
// 若响应码为 200，将会员账号选项数据赋值给 options_memberPhone 数组
this.options_memberPhone = res.data;
} else {
// 若响应码不为 200，弹出错误提示
popup(res.msg, "error");
}
});
},
// 初始化表格数据
init() {
// 验证起始时间是否大于结束时间
if (this.searchForm.startTime > this.searchForm.endTime) {
// 若起始时间大于结束时间，弹出警告提示
popup("结束时间不能小于开始时间", "warning");
return;
}
});
},
del(cn) {
this.$confirm("确定删除这条记录？", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
delExchangePointProducts({ cn: cn }).then((res) => {
res = res.data;
if (res.code == 200) {
popup("操作成功");
this.init();
} else {
popup(res.msg, "error");
}
});
// 调用分页查询积分兑换记录的函数，传入搜索表单数据
queryPageByQoExchangePointProducts(this.searchForm).then((res) => {
// 获取响应中的数据
res = res.data;
if (res.code == 200) {
// 若响应码为 200，将积分兑换记录数据赋值给 tableData 数组
this.tableData = res.data.records;
// 将总记录数赋值给搜索表单的 total 属性
this.searchForm.total = res.data.total;
// 将每页记录数赋值给搜索表单的 pageSize 属性
this.searchForm.pageSize = res.data.size;
// 将当前页码赋值给搜索表单的 currentPage 属性
this.searchForm.currentPage = res.data.current;
} else {
// 若响应码不为 200，弹出错误提示
popup(res.msg, "error");
}
});
},
// 删除积分兑换记录
del(cn) {
// 弹出确认对话框
this.$confirm("确定删除这条记录？", "警示", {
// 确认按钮文本
confirmButtonText: "确定",
// 取消按钮文本
cancelButtonText: "取消",
// 对话框类型为警告
type: "warning",
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作",
.then(() => {
// 调用删除积分兑换记录的函数，传入兑换订单编号
delExchangePointProducts({ cn: cn }).then((res) => {
// 获取响应中的数据
res = res.data;
if (res.code == 200) {
// 若响应码为 200，弹出操作成功提示
popup("操作成功");
// 重新初始化表格数据
this.init();
} else {
// 若响应码不为 200，弹出错误提示
popup(res.msg, "error");
}
});
})
.catch(() => {
// 若用户取消操作，弹出提示
this.$message({
type: "info",
message: "已取消操作",
});
});
});
},
/*分页*/
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.init();
},
handleCurrentChange(val) {
this.searchForm.currentPage = val;
this.init();
},
// 处理分页大小改变事件
handleSizeChange(val) {
// 更新搜索表单的 pageSize 属性
this.searchForm.pageSize = val;
// 重新初始化表格数据
this.init();
},
// 处理当前页码改变事件
handleCurrentChange(val) {
// 更新搜索表单的 currentPage 属性
this.searchForm.currentPage = val;
// 重新初始化表格数据
this.init();
},
// 提交搜索表单
submitSearchForm() {
// 重新初始化表格数据
this.init();
},
},
submitSearchForm() {
// 组件挂载完成后执行的钩子函数
mounted() {
// 初始化表格数据
this.init();
// 查询会员账号选项数据
this.queryOptionsMemberPhone();
},
},
mounted() {
this.init();
this.queryOptionsMemberPhone();
},
};
};
</script>
<style>
.searchForm {
height: 134px;
}
/* 搜索表单样式，设置高度 */
.searchForm {
height: 134px;
}
.table {
height: 320px;
}
/* 表格样式，设置高度 */
.table {
height: 320px;
}
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
/* 分页工具样式，设置绝对定位、宽度、边距和高度 */
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
.searchForm {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
/* 搜索表单样式，设置为内联块元素，居中显示和高度、行高 */
.searchForm {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
.searchForm .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
/* 搜索表单列样式，设置为内联块元素，居中显示、右边距、行高和高度 */
.searchForm .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
</style>

1262
superMarket-frontend/src/views/sale_management/sale_cmd/List.vue
View File

File diff suppressed because it is too large Load Diff

386
superMarket-frontend/src/views/sale_management/sale_records/List.vue
Unescape View File

@ -1,25 +1,37 @@
<template>
<!-- 定义一个 id 为 sale_records 的 div 容器，作为整个销售记录页面的根容器 -->
<div id="sale_records">
<!-- 面包屑导航组件，用于展示页面层级关系，分隔符为 / -->
<el-breadcrumb separator="/">
<!-- 面包屑导航的第一个层级，显示“首页” -->
<el-breadcrumb-item
>首页</el-breadcrumb-item
>
<!-- 面包屑导航的第二个层级，显示“销售管理” -->
<el-breadcrumb-item
>销售管理</el-breadcrumb-item
>
<!-- 面包屑导航的第三个层级，显示“销售记录” -->
<el-breadcrumb-item>销售记录</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 4 份宽度 -->
<el-col :span="4">
<!-- 输入框，用于输入销售编号，绑定到 searchForm 的 cn 属性 -->
<el-input
style="height: 21px; width: 130px"
placeholder="销售编号"
v-model="searchForm.cn"
/>
</el-col>
<!-- 列布局，占 10 份宽度 -->
<el-col :span="10">
<!-- 显示“销售时间：”文本 -->
<span>销售时间：</span>
<!-- 日期选择器，用于选择销售起始时间，绑定到 searchForm 的 startSellTime 属性 -->
<el-date-picker
style="width: 140px"
v-model="searchForm.startSellTime"
@ -28,7 +40,9 @@
placeholder="起始时间"
>
</el-date-picker>
<!-- 显示分隔符 - -->
-
<!-- 日期选择器，用于选择销售结束时间，绑定到 searchForm 的 endSellTime 属性 -->
<el-date-picker
v-model="searchForm.endSellTime"
style="width: 140px"
@ -38,7 +52,9 @@
>
</el-date-picker>
</el-col>
<!-- 列布局，占 4 份宽度 -->
<el-col :span="4">
<!-- 下拉选择框，用于选择顾客类型，绑定到 searchForm 的 type 属性 -->
<el-select
style="width: 120px"
v-model="searchForm.type"
@ -46,11 +62,15 @@
placeholder="顾客类型"
clearable
>
<!-- 下拉选项，标签为“非会员顾客”，值为 0 -->
<el-option label="非会员顾客" value="0"></el-option>
<!-- 下拉选项，标签为“会员”，值为 1 -->
<el-option label="会员" value="1"></el-option>
</el-select>
</el-col>
<!-- 列布局，占 4 份宽度 -->
<el-col :span="4">
<!-- 下拉选择框，用于选择支付方式，绑定到 searchForm 的 sellway 属性 -->
<el-select
style="width: 120px"
v-model="searchForm.sellway"
@ -58,136 +78,192 @@
placeholder="支付方式"
clearable
>
<!-- 下拉选项，标签为“支付宝”，值为 0 -->
<el-option label="支付宝" value="0"></el-option>
<!-- 下拉选项，标签为“微信”，值为 1 -->
<el-option label="微信" value="1"></el-option>
<!-- 下拉选项，标签为“现金”，值为 2 -->
<el-option label="现金" value="2"></el-option>
<!-- 下拉选项，标签为“银行卡”，值为 3 -->
<el-option label="银行卡" value="3"></el-option>
</el-select>
</el-col>
</el-row>
<!-- 换行 -->
<br>
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 24 份宽度，文本左对齐 -->
<el-col :span="24" style="text-align: left;">
<!-- 按钮，点击触发 submitSearchForm 方法，用于搜索销售记录 -->
<el-button type="success" @click="submitSearchForm" style="font-size: 18px;"
>
<!-- 按钮内的图标 -->
<i class="iconfont icon-r-find" style="font-size: 18px;"> </i>
<!-- 按钮文本 -->
搜索</el-button
>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 定义一个类名为 table 的 div 容器，用于包裹表格和分页组件 -->
<div class="table">
<!-- 表格组件，展示销售记录数据，数据绑定到 tableData -->
<el-table :data="tableData" style="width: 100%" size="medium">
<!-- 表格列，显示销售编号，宽度为 200px -->
<el-table-column prop="cn" width="200" label="编号">
</el-table-column>
<!-- 表格列，显示销售数量 -->
<el-table-column prop="sellTotal" label="销售数量">
</el-table-column>
<!-- 表格列，显示销售总额 -->
<el-table-column prop="sellTotalmoney" label="销售总额">
<!-- 自定义表格单元格内容，将销售总额保留两位小数显示 -->
<template v-slot="scope">
{{ parseFloat(scope.row.sellTotalmoney).toFixed(2) }}
</template>
</el-table-column>
<!-- 表格列，显示销售时间，当内容过长时显示 tooltip -->
<el-table-column
prop="sellTime"
:show-overflow-tooltip="true"
label="销售时间"
>
</el-table-column>
<!-- 表格列，显示顾客类型，宽度为 120px -->
<el-table-column prop="type" label="顾客类型" width="120">
<!-- 自定义表格单元格内容，根据顾客类型显示不同标签 -->
<template v-slot="scope">
<!-- 若顾客类型为会员，显示橙色标签 -->
<el-tag
effect="dark"
type="warning"
style="font-size: 14px;"
v-if="scope.row.type == '1'"
>
<!-- 标签内的图标 -->
<i class="iconfont icon-r-mark1"></i>
<!-- 标签文本 -->
会员</el-tag
>
<!-- 若顾客类型为非会员，显示蓝色标签 -->
<el-tag effect="dark" type="info" v-else
>非会员</el-tag
>
</template>
</el-table-column>
<!-- 表格列，显示销售员 -->
<el-table-column prop="sellby" label="销售员">
</el-table-column>
<!-- 表格列，显示支付方式 -->
<el-table-column prop="sellway" label="支付方式">
<!-- 自定义表格单元格内容，根据支付方式显示不同标签 -->
<template v-slot="scope">
<!-- 若支付方式为支付宝，显示蓝色标签 -->
<el-tag
effect="dark"
type="primary"
v-if="scope.row.sellway == '0'"
>支付宝</el-tag
>
<!-- 若支付方式为微信，显示绿色标签 -->
<el-tag
effect="dark"
type="success"
v-else-if="scope.row.sellway == '1'"
>微信</el-tag
>
<!-- 若支付方式为银行卡，显示橙色标签 -->
<el-tag
effect="dark"
type="warning"
v-else-if="scope.row.sellway == '3'"
>银行卡</el-tag
>
<!-- 若支付方式为现金，显示红色标签 -->
<el-tag effect="dark" type="danger" v-else>现金</el-tag>
</template>
</el-table-column>
<!-- 表格列，显示备注信息，当内容过长时显示 tooltip -->
<el-table-column
prop="info"
:show-overflow-tooltip="true"
label="备注"
>
</el-table-column>
<!-- 表格列，显示操作按钮，固定在表格右侧，宽度为 240px -->
<el-table-column width="240" label="操作" fixed="right">
<!-- 自定义表格单元格内容，包含明细和删除按钮 -->
<template v-slot="scope">
<!-- 明细按钮，点击触发 detailBtn 方法，显示销售订单明细 -->
<el-button
type="success"
style="font-size: 18px;"
@click="detailBtn(scope.row)"
>
<!-- 按钮内的图标 -->
<i class="iconfont icon-r-find" style="font-size: 18px;"> </i>
<!-- 按钮文本 -->
明细
</el-button>
<!-- 删除按钮，点击触发 del 方法，删除当前销售记录 -->
<el-button
type="danger"
@click="del(scope.row.cn)"
style="font-size: 18px;"
>
<!-- 按钮内的图标 -->
<i class="iconfont icon-r-delete" style="font-size: 18px;"> </i>
<!-- 按钮文本 -->
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 定义一个 div 容器，用于包裹分页组件，设置上下外边距 -->
<div style="margin: 10px 0 15px 0;">
<!-- 分页组件，用于切换表格数据的页码和每页显示数量 -->
<el-pagination
<!-- 每页显示数量变化时触发 handleSizeChange 方法 -->
@size-change="handleSizeChange"
<!-- 当前页码变化时触发 handleCurrentChange 方法 -->
@current-change="handleCurrentChange"
<!-- 双向绑定当前页码到 searchForm 的 currentPage 属性 -->
:current-page.sync="searchForm.currentPage"
<!-- 每页显示数量的可选值 -->
:page-sizes="[5, 10, 20, 50]"
<!-- 绑定每页显示数量到 searchForm 的 pageSize 属性 -->
:page-size="searchForm.pageSize"
<!-- 分页组件的布局 -->
layout="total,sizes, prev, pager, next,jumper"
<!-- 绑定数据总数到 searchForm 的 total 属性 -->
:total="searchForm.total"
>
</el-pagination>
</div>
</div>
<!-- 对话框组件，用于显示销售订单明细，标题为“销售订单明细” -->
<el-dialog
title="销售订单明细"
<!-- 双向绑定对话框的显示状态到 detailSaleRecordsVisable 属性 -->
:visible.sync="detailSaleRecordsVisable"
<!-- 对话框宽度为 80% -->
width="80%"
>
<!-- 表单组件，绑定数据到 saleRecordForm，标签宽度为 100px -->
<el-form
:model="saleRecordForm"
label-width="100px"
class="demo-ruleForm"
>
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 12 份宽度 -->
<el-col :span="12">
<!-- 表单项目，标签为“销售编号：” -->
<el-form-item style="width: 60%" label="销售编号：">
<!-- 输入框，禁用且只读，显示销售编号 -->
<el-input
disabled
readonly
@ -197,13 +273,17 @@
</el-form-item>
</el-col>
</el-row>
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 12 份宽度 -->
<el-col :span="12">
<!-- 表单项目，标签为“支付方式：” -->
<el-form-item
style="width: 80%"
label="支付方式："
prop="sellway"
>
<!-- 支付宝支付方式单选框，禁用状态，绑定到 saleRecordForm 的 sellway 属性 -->
<el-radio
disabled
type="radio"
@ -211,6 +291,7 @@
label="0"
>支付宝</el-radio
>
<!-- 微信支付方式单选框，禁用状态，绑定到 saleRecordForm 的 sellway 属性 -->
<el-radio
disabled
type="radio"
@ -218,6 +299,7 @@
label="1"
>微信</el-radio
>
<!-- 现金支付方式单选框，禁用状态，绑定到 saleRecordForm 的 sellway 属性 -->
<el-radio
disabled
type="radio"
@ -225,6 +307,7 @@
label="2"
>现金</el-radio
>
<!-- 银行卡支付方式单选框，禁用状态，绑定到 saleRecordForm 的 sellway 属性 -->
<el-radio
disabled
type="radio"
@ -235,9 +318,13 @@
</el-form-item>
</el-col>
</el-row>
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 12 份宽度 -->
<el-col :span="12">
<!-- 表单项目，标签为“顾客类型：” -->
<el-form-item style="width: 60%" label="顾客类型：">
<!-- 会员单选框，禁用状态，绑定到 saleRecordForm 的 type 属性 -->
<el-radio
disabled
type="radio"
@ -245,6 +332,7 @@
label="1"
>会员</el-radio
>
<!-- 非会员单选框，禁用状态，绑定到 saleRecordForm 的 type 属性 -->
<el-radio
disabled
type="radio"
@ -254,12 +342,15 @@
>
</el-form-item>
</el-col>
<!-- 列布局，占 12 份宽度，当顾客类型为会员时显示 -->
<el-col :span="12" v-if="saleRecordForm.type == '1'">
<!-- 表单项目，标签为“会员账号：” -->
<el-form-item
style="width: 60%"
label="会员账号："
prop="memberPhone"
>
<!-- 输入框，只读状态，显示会员账号 -->
<el-input
readonly
v-model="saleRecordForm.memberPhone"
@ -268,21 +359,31 @@
</el-form-item>
</el-col>
</el-row>
<!-- 水平线分隔 -->
<hr>
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 24 份宽度 -->
<el-col :span="24">
<!-- 表格组件，展示销售订单明细中的商品信息 -->
<el-table
:data="saleRecordForm.detailSaleRecords"
style="width: 100%"
size="medium"
>
<!-- 表格列，显示商品编号 -->
<el-table-column prop="goodsId" label="商品编号">
</el-table-column>
<!-- 表格列，显示商品名 -->
<el-table-column prop="goodsName" label="商品名">
</el-table-column>
<!-- 表格列，显示商品数量 -->
<el-table-column prop="goodsNum" label="数量">
<!-- 自定义表格单元格内容，显示商品数量输入框和加减按钮 -->
<template v-slot="scope">
<!-- 减号按钮，禁用状态 -->
<el-button type="info" disabled>-</el-button>
<!-- 输入框，禁用状态，显示商品数量 -->
<el-input
disabled
style="width: 80px"
@ -290,18 +391,25 @@
min="1"
v-model="scope.row.goodsNum"
></el-input>
<!-- 加号按钮，禁用状态 -->
<el-button type="info" disabled>+</el-button>
</template>
</el-table-column>
<!-- 表格列，显示商品单价 -->
<el-table-column prop="goodsPrice" label="商品单价（元）">
</el-table-column>
</el-table>
</el-col>
</el-row>
<!-- 水平线分隔 -->
<hr>
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 24 份宽度 -->
<el-col :span="24">
<!-- 表单项目，标签为“备注：” -->
<el-form-item style="width: 100%" label="备注：">
<!-- 文本输入框，禁用且只读，显示备注信息 -->
<el-input
disabled
readonly
@ -312,21 +420,29 @@
</el-form-item>
</el-col>
</el-row>
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 24 份宽度 -->
<el-col :span="24">
<!-- 当销售订单明细中有商品信息时显示订单详情 -->
<div v-if="saleRecordForm.detailSaleRecords.length > 0">
<!-- 显示订单号 -->
订单号：{{ saleRecordForm.cn }}&nbsp;&nbsp;
<!-- 显示商品总数 -->
商品总数：{{
saleRecordForm.sellTotal
? saleRecordForm.sellTotal
: 0
}}&nbsp;&nbsp; 消费：{{
}}&nbsp;&nbsp;
<!-- 显示消费金额，保留两位小数 -->
消费：{{
saleRecordForm.sellTotalmoney
? parseFloat(
saleRecordForm.sellTotalmoney
).toFixed(2)
: 0
}}元&nbsp;&nbsp;
<!-- 当有支付方式时显示支付方式 -->
<span v-if="saleRecordForm.sellway"
>支付方式：{{
saleRecordForm.sellway == "0"
@ -338,9 +454,11 @@
: "银行卡"
}}&nbsp;&nbsp;</span
><br>
<!-- 当顾客类型为会员时显示会员享受 9 折信息 -->
<span v-if="saleRecordForm.type == '1'"
>会员享受9折&nbsp;&nbsp;</span
>
<!-- 当有销售时间时显示消费时间和操作者编号 -->
<span v-if="saleRecordForm.sellTime"
>消费时间：{{
saleRecordForm.sellTime
@ -351,9 +469,13 @@
</div>
</el-col>
</el-row>
<!-- 创建一个行布局 -->
<el-row>
<!-- 列布局，占 24 份宽度 -->
<el-col :span="24">
<!-- 表单项目 -->
<el-form-item>
<!-- 关闭按钮，点击关闭销售订单明细对话框 -->
<el-button
type="info"
@click="detailSaleRecordsVisable = false"
@ -367,119 +489,171 @@
</div>
</template>
<script>
import { popup } from "@/assets/js/common";
import {
delSaleRecords,
queryPageByQoSaleRecords,
} from "@/api/sale_management/saleRecordsApi";
// 导入弹出提示框函数
import { popup } from "@/assets/js/common";
// 导入删除销售记录和分页查询销售记录的 API 函数
import {
delSaleRecords,
queryPageByQoSaleRecords,
} from "@/api/sale_management/saleRecordsApi";
export default {
data() {
return {
detailSaleRecordsVisable: false,
searchForm: {
pageSize: 5
},
tableData: [],
saleRecordForm: {
cn: "",
sellway: "",
info: "",
sellTotal: "",
sellTotalmoney: "",
type: "0",
detailSaleRecords: [],
},
};
},
methods: {
init() {
if (this.searchForm.startSellTime > this.searchForm.endSellTime) {
popup("结束时间不能小于开始时间", "warning");
return;
}
queryPageByQoSaleRecords(this.searchForm).then((res) => {
res = res.data;
if (res.code == 200) {
this.tableData = res.data.records;
this.searchForm.total = res.data.total;
this.searchForm.pageSize = res.data.size;
this.searchForm.currentPage = res.data.current;
} else {
popup(res.msg, "error");
}
});
export default {
// 定义组件的数据
data() {
return {
// 销售订单明细对话框的显示状态
detailSaleRecordsVisable: false,
// 搜索表单数据，默认每页显示 5 条记录
searchForm: {
pageSize: 5
},
// 表格显示的销售记录数据
tableData: [],
// 销售订单明细表单数据
saleRecordForm: {
// 销售编号
cn: "",
// 支付方式
sellway: "",
// 备注信息
info: "",
// 销售商品总数量
sellTotal: "",
// 销售总金额
sellTotalmoney: "",
// 顾客类型
type: "0",
// 销售订单明细中的商品信息列表
detailSaleRecords: [],
},
};
},
del(cn) {
this.$confirm("确定删除这条记录？", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
delSaleRecords({ cn: cn }).then((res) => {
res = res.data;
if (res.code == 200) {
popup("操作成功");
this.init();
} else {
popup(res.msg, "error");
}
});
// 定义组件的方法
methods: {
// 初始化表格数据，根据搜索条件查询销售记录
init() {
// 检查开始时间是否大于结束时间
if (this.searchForm.startSellTime > this.searchForm.endSellTime) {
// 若开始时间大于结束时间，弹出警告提示框
popup("结束时间不能小于开始时间", "warning");
return;
}
// 调用 API 进行分页查询销售记录
queryPageByQoSaleRecords(this.searchForm).then((res) => {
// 获取响应数据
res = res.data;
if (res.code == 200) {
// 若查询成功，更新表格数据
this.tableData = res.data.records;
// 更新总记录数
this.searchForm.total = res.data.total;
// 更新每页显示数量
this.searchForm.pageSize = res.data.size;
// 更新当前页码
this.searchForm.currentPage = res.data.current;
} else {
// 若查询失败，弹出错误提示框
popup(res.msg, "error");
}
});
},
// 删除销售记录
del(cn) {
// 弹出确认删除对话框
this.$confirm("确定删除这条记录？", "警示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作",
.then(() => {
// 若用户确认删除，调用 API 删除销售记录
delSaleRecords({ cn: cn }).then((res) => {
// 获取响应数据
res = res.data;
if (res.code == 200) {
// 若删除成功，弹出操作成功提示框
popup("操作成功");
// 重新初始化表格数据
this.init();
} else {
// 若删除失败，弹出错误提示框
popup(res.msg, "error");
}
});
})
.catch(() => {
// 若用户取消删除，显示取消操作提示信息
this.$message({
type: "info",
message: "已取消操作",
});
});
});
},
detailBtn(row) {
this.saleRecordForm = {
cn: "",
sellway: "",
info: "",
sellTotal: "",
sellTotalmoney: "",
type: "0",
detailSaleRecords: [],
};
this.saleRecordForm = { ...row };
this.detailSaleRecordsVisable = true;
},
/*分页*/
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.init();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.searchForm.currentPage = val;
this.init();
console.log(`当前页: ${val}`);
},
// 显示销售订单明细
detailBtn(row) {
// 重置销售订单明细表单数据
this.saleRecordForm = {
cn: "",
sellway: "",
info: "",
sellTotal: "",
sellTotalmoney: "",
type: "0",
detailSaleRecords: [],
};
// 将当前行数据赋值给销售订单明细表单数据
this.saleRecordForm = { ...row };
// 显示销售订单明细对话框
this.detailSaleRecordsVisable = true;
},
/*分页*/
// 每页显示数量变化时的处理函数
handleSizeChange(val) {
// 更新搜索表单中的每页显示数量
this.searchForm.pageSize = val;
// 重新初始化表格数据
this.init();
// 打印日志，显示当前每页显示数量
console.log(`每页 ${val} 条`);
},
// 当前页码变化时的处理函数
handleCurrentChange(val) {
// 更新搜索表单中的当前页码
this.searchForm.currentPage = val;
// 重新初始化表格数据
this.init();
// 打印日志，显示当前页码
console.log(`当前页: ${val}`);
},
// 提交搜索表单，触发搜索操作
submitSearchForm() {
// 重新初始化表格数据
this.init();
},
},
submitSearchForm() {
// 组件挂载完成后执行的钩子函数
mounted() {
// 初始化表格数据
this.init();
},
},
mounted() {
this.init();
},
};
};
</script>
<style>
.searchForm {
height: 134px;
}
/* 搜索表单样式，设置高度为 134px */
.searchForm {
height: 134px;
}
.table {
height: 320px;
}
/* 表格容器样式，设置高度为 320px */
.table {
height: 320px;
}
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
/* 分页组件样式，绝对定位，宽度为 84%，水平居中，高度为 43px */
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
</style>

231
superMarket-frontend/src/views/system/menu/List.vue
Unescape View File

@ -1,41 +1,63 @@
<template>
<!-- 根容器 -->
<div>
<!-- 面包屑导航，使用 / 作为分隔符 -->
<el-breadcrumb separator="/">
<!-- 面包屑的首页项 -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 面包屑的系统管理项 -->
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
<!-- 面包屑的菜单管理项 -->
<el-breadcrumb-item>菜单管理</el-breadcrumb-item>
</el-breadcrumb
><br />
<!-- 闭合面包屑标签 -->
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 创建一行布局 -->
<el-row>
<!-- 占 8 列宽度，左对齐且右侧有 10px 内边距 -->
<el-col :span="8" style="text-align: left; padding-right: 10px">
<!-- 输入框，用于输入菜单名称，绑定到 searchForm 的 name 属性 -->
<el-input placeholder="菜单名称" v-model="searchForm.name" />
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 创建一行布局 -->
<el-row>
<!-- 占 24 列宽度，左对齐 -->
<el-col :span="24" style="text-align: left">
<!-- 搜索按钮，点击触发 submitSearchForm 方法 -->
<el-button
type="primary"
@click="submitSearchForm"
style="font-size: 18px"
>
<!-- 搜索图标 -->
<i class="iconfont icon-r-find" style="font-size: 18px">
</i>
搜索</el-button
>
<!-- 按钮文本 -->
搜索
</el-button>
<!-- 重置按钮，点击触发 resetSearchForm 方法 -->
<el-button
type="info"
@click="resetSearchForm"
style="font-size: 18px"
>
<!-- 重置图标 -->
<i class="iconfont icon-r-refresh" style="font-size: 18px">
</i>
<!-- 按钮文本 -->
重置
</el-button>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 表格容器 -->
<div class="table">
<!-- 表格组件，绑定数据、设置行键、边框、树形结构属性 -->
<el-table
:data="tableData"
style="width: 100%"
@ -44,75 +66,93 @@
border
:tree-props="{ children: 'children' }"
>
<!-- 菜单名列 -->
<el-table-column prop="label" label="菜单名"> </el-table-column>
<!-- 标识符列，宽度 150px，超长显示 tooltip -->
<el-table-column
width="150"
width="150"
prop="flag"
:show-overflow-tooltip="true"
label="标识符"
>
<!-- 自定义单元格内容，显示标识符标签 -->
<template v-slot="scope">
<el-tag type="info">{{
scope.row.flag ? scope.row.flag : "暂定"
}}</el-tag>
</template>
</el-table-column>
<!-- 类型列 -->
<el-table-column prop="type" label="类型">
<!-- 自定义单元格内容，根据类型显示不同标签 -->
<template v-slot="scope">
<!-- 类型为 0 显示目录标签 -->
<el-tag v-if="scope.row.type == 0"
>目录</el-tag
>
<!-- 类型为 1 显示菜单标签 -->
<el-tag
v-else-if="scope.row.type == 1"
type="success"
>菜单</el-tag
>
<!-- 其他类型显示按钮标签 -->
<el-tag v-else type="warning"
>按钮</el-tag
>
</template>
</el-table-column>
<!-- 图标列 -->
<el-table-column prop="icon" label="图标">
<!-- 自定义单元格内容，显示图标 -->
<template v-slot="scope">
<i :class="scope.row.icon"></i>
</template>
</el-table-column>
<!-- 描述列，超长显示 tooltip -->
<el-table-column
prop="info"
:show-overflow-tooltip="true"
label="描述"
>
<!-- 自定义单元格内容，显示描述标签 -->
<template v-slot="scope">
<el-tag type="info">{{
scope.row.info ? scope.row.info : "无"
}}</el-tag>
</template>
</el-table-column>
<!-- 组件路径列，超长显示 tooltip -->
<el-table-column
prop="component"
:show-overflow-tooltip="true"
label="组件路径"
>
<!-- 自定义单元格内容，显示组件路径标签 -->
<template v-slot="scope">
<el-tag type="info">{{
scope.row.component ? scope.row.component : "暂定"
}}</el-tag>
</template>
</el-table-column>
<!-- 状态列 -->
<el-table-column prop="state" label="状态">
<!-- 自定义单元格内容，根据状态显示不同标签 -->
<template v-slot="scope">
<!-- 状态为 0 显示正常标签 -->
<el-tag
type="success"
v-if="scope.row.state == 0"
>正常</el-tag
>
<!-- 其他状态显示禁用标签 -->
<el-tag type="danger" v-else>禁用</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页组件容器 -->
<div style="margin: 10px 0 15px 0">
<!-- 分页组件，绑定分页相关事件和数据 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@ -128,87 +168,118 @@
</div>
</template>
<script>
import { queryPageByQo } from "@/api/system/menu/menuApi";
import { popup } from "@/assets/js/common";
// 导入根据查询条件分页查询菜单的 API
import { queryPageByQo } from "@/api/system/menu/menuApi";
// 导入弹出提示框函数
import { popup } from "@/assets/js/common";
export default {
data() {
return {
/*搜索*/
/*表格*/
tableData: [],
searchForm: {
total: 0,
currentPage: 1,
pageSize: 5,
},
};
},
methods: {
init() {
queryPageByQo(this.searchForm).then((res) => {
res = res.data;
if (res.code == 200) {
console.log(res.data);
this.tableData = res.data.records;
this.searchForm.total = res.data.total;
this.searchForm.pageSize = res.data.size;
this.searchForm.currentPage = res.data.current;
} else {
popup(res.msg, "error");
}
});
},
submitSearchForm() {
this.init();
},
resetSearchForm() {
this.searchForm.name = "";
export default {
// 组件的数据
data() {
return {
// 表格数据
tableData: [],
// 搜索表单数据，包含总数、当前页、每页数量等
searchForm: {
total: 0,
currentPage: 1,
pageSize: 5,
},
};
},
/*分页*/
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.init();
console.log(`每页 ${val} 条`);
// 组件的方法
methods: {
// 初始化表格数据
init() {
// 调用 API 进行分页查询
queryPageByQo(this.searchForm).then((res) => {
// 获取响应数据
res = res.data;
if (res.code == 200) {
// 打印响应数据
console.log(res.data);
// 更新表格数据
this.tableData = res.data.records;
// 更新总数
this.searchForm.total = res.data.total;
// 更新每页数量
this.searchForm.pageSize = res.data.size;
// 更新当前页
this.searchForm.currentPage = res.data.current;
} else {
// 若查询失败，弹出错误提示框
popup(res.msg, "error");
}
});
},
// 提交搜索表单
submitSearchForm() {
// 重新初始化表格数据
this.init();
},
// 重置搜索表单
resetSearchForm() {
// 清空搜索表单的名称字段
this.searchForm.name = "";
},
// 分页 - 每页数量改变时的处理函数
handleSizeChange(val) {
// 更新搜索表单的每页数量
this.searchForm.pageSize = val;
// 重新初始化表格数据
this.init();
// 打印日志，显示当前每页数量
console.log(`每页 ${val} 条`);
},
// 分页 - 当前页改变时的处理函数
handleCurrentChange(val) {
// 更新搜索表单的当前页
this.searchForm.currentPage = val;
// 重新初始化表格数据
this.init();
// 打印日志，显示当前页
console.log(`当前页: ${val}`);
},
},
handleCurrentChange(val) {
this.searchForm.currentPage = val;
// 组件挂载完成后的钩子函数
mounted() {
// 初始化表格数据
this.init();
console.log(`当前页: ${val}`);
},
},
mounted() {
this.init();
},
};
};
</script>
<style>
.searchForm {
height: 134px;
}
/* 搜索表单样式，高度 134px */
.searchForm {
height: 134px;
}
.table {
height: 320px;
}
/* 表格样式，高度 320px */
.table {
height: 320px;
}
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
.searchForm {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
/* 分页工具样式，绝对定位，宽度 84%，居中，高度 43px */
.pageUtils {
position: absolute;
width: 84%;
margin: 2px auto;
height: 43px;
}
/* 搜索表单样式，内联块显示，居中，高度 51px，行高 51px */
.searchForm {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
.searchForm .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
/* 搜索表单列样式，内联块显示，居中，右侧外边距 2px，行高 48px，高度 51px */
.searchForm .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
</style>

555
superMarket-frontend/src/views/system/role/List.vue
Unescape View File

@ -1,126 +1,173 @@
<template>
<!-- 页面的根容器，id 为 role_list -->
<div id="role_list">
<!-- 面包屑导航组件，使用 "/" 作为分隔符 -->
<el-breadcrumb separator="/">
<!-- 面包屑的首页项 -->
<el-breadcrumb-item>首页</el-breadcrumb-item>
<!-- 面包屑的系统管理项 -->
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
<el-breadcrumb-item>角色管理</el-breadcrumb-item> </el-breadcrumb
><br />
<!-- 面包屑的角色管理项 -->
<el-breadcrumb-item>角色管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 换行 -->
<br />
<!-- 第一行布局 -->
<el-row>
<!-- 左侧列，占 8 列宽度，左对齐，右侧有 10px 内边距 -->
<el-col :span="8" style="text-align: left; padding-right: 10px">
<!-- 输入框，用于输入角色名称，双向绑定到 roleSearchForm 的 name 属性 -->
<el-input
placeholder="角色名称"
v-model="roleSearchForm.name"
/>
</el-col>
<!-- 右侧列，占 8 列宽度 -->
<el-col :span="8">
<!-- 下拉选择框，用于选择角色状态，双向绑定到 roleSearchForm 的 state 属性 -->
<el-select
@change="$forceUpdate"
v-model="roleSearchForm.state"
placeholder="状态"
clearable
>
<!-- 下拉选项，标签为“正常”，值为“0” -->
<el-option label="正常" value="0"></el-option>
<!-- 下拉选项，标签为“停用”，值为“-1” -->
<el-option label="停用" value="-1"></el-option>
</el-select>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 第二行布局 -->
<el-row>
<!-- 整行占 24 列宽度，左对齐 -->
<el-col :span="24" style="text-align: left">
<!-- 搜索按钮，点击触发 subSearchForm 方法，传递参数 'ruleForm' -->
<el-button
type="primary"
@click="subSearchForm('ruleForm')"
style="font-size: 18px"
>
<!-- 搜索图标 -->
<i class="iconfont icon-r-find" style="font-size: 18px">
</i>
搜索</el-button
>
<!-- 按钮文本 -->
搜索
</el-button>
<!-- 创建角色按钮，点击将 newRoleVisable 设置为 true，显示创建角色对话框 -->
<el-button
type="success"
@click="newRoleVisable = true"
style="font-size: 18px"
>
<!-- 创建图标 -->
<i class="iconfont icon-r-add" style="font-size: 18px"> </i>
<!-- 按钮文本 -->
创建角色
</el-button>
</el-col>
</el-row>
<!-- 换行 -->
<br />
<!-- 表格组件，用于展示角色列表数据，数据绑定到 tableData -->
<el-table :data="tableData" style="width: 100%">
<!-- 序号列，类型为 index，显示行号，宽度 180px -->
<el-table-column type="index" label="序号" width="180">
</el-table-column>
<!-- 名称列，显示角色名称，宽度 180px -->
<el-table-column prop="name" label="名称" width="180">
</el-table-column>
<!-- 描述列，显示角色描述 -->
<el-table-column prop="info" label="描述"> </el-table-column>
<!-- 状态列，根据角色状态显示不同标签 -->
<el-table-column prop="state" label="状态">
<!-- 自定义单元格内容 -->
<template v-slot="scope">
<!-- 如果角色状态为“0”，显示绿色的“正常”标签 -->
<el-tag v-if="scope.row.state == '0'" type="success"
>正常</el-tag
>
<!-- 否则，显示红色的“停用”标签 -->
<el-tag v-else type="danger">停用</el-tag>
</template>
</el-table-column>
<!-- 操作列，固定在表格右侧，宽度 360px -->
<el-table-column label="操作" width="360" fixed="right">
<!-- 自定义单元格内容 -->
<template v-slot="scope">
<!-- 修改按钮，点击触发 editRole 方法，传递当前行数据 -->
<el-button
type="success"
@click="editRole(scope.row)"
style="font-size: 18px"
>
<!-- 修改图标 -->
<i
class="iconfont icon-r-edit"
style="font-size: 18px"
></i>
修改</el-button
>
<!-- 按钮文本 -->
修改
</el-button>
<!-- 停用按钮，只有当角色状态为“0”时显示，点击触发 forbidden 方法，传递角色 id -->
<el-button
v-if="scope.row.state == '0'"
type="danger"
@click="forbidden(scope.row.id)"
style="font-size: 18px"
>
<!-- 停用图标 -->
<i
class="iconfont icon-r-no"
style="font-size: 18px"
></i>
停用</el-button
>
<!-- 按钮文本 -->
停用
</el-button>
<!-- 授权按钮，点击触发 checkPermissons 方法，传递角色 id -->
<el-button
type="warning"
@click="checkPermissons(scope.row.id)"
style="font-size: 18px"
>
<!-- 授权图标 -->
<i
class="iconfont icon-r-setting"
style="font-size: 18px"
></i>
授权</el-button
>
<!-- 按钮文本 -->
授权
</el-button>
</template>
</el-table-column>
</el-table>
<!--修改描述/状态弹出框-->
<!-- 修改描述/状态的弹出框，标题为“角色信息修改”，双向绑定显示状态到 dialogVisible，宽度 50% -->
<el-dialog
title="角色信息修改"
:visible.sync="dialogVisible"
width="50%"
>
<!-- 表单组件，绑定数据到 editRoleForm -->
<el-form
v-model="editRoleForm"
label-width="100px"
class="demo-ruleForm"
>
<!-- 名称表单项，输入框禁用，显示角色名称 -->
<el-form-item label="名称：">
<el-input disabled v-model="editRoleForm.name"></el-input>
</el-form-item>
<!-- 描述表单项，输入框用于输入角色描述，双向绑定到 editRoleForm 的 info 属性 -->
<el-form-item label="描述：">
<el-input
type="text"
v-model="editRoleForm.info"
></el-input>
</el-form-item>
<!-- 状态表单项，下拉选择框用于选择角色状态，双向绑定到 editRoleForm 的 state 属性 -->
<el-form-item label="状态：">
<el-select
v-model="editRoleForm.state"
@ -128,6 +175,7 @@
@change="$forceUpdate()"
placeholder="请选择状态"
>
<!-- 遍历 options 数组生成下拉选项 -->
<el-option
v-for="item in options"
:key="item.value"
@ -137,30 +185,38 @@
</el-option>
</el-select>
</el-form-item>
<!-- 提交和重置按钮表单项 -->
<el-form-item>
<!-- 提交按钮，点击触发 submitEditForm 方法 -->
<el-button
type="primary"
@click="submitEditForm"
style="font-size: 18px"
>
<!-- 提交图标 -->
<i
class="iconfont icon-r-yes"
style="font-size: 18px"
></i>
提交</el-button
>
<!-- 按钮文本 -->
提交
</el-button>
<!-- 重置按钮，点击触发 resetEditForm 方法 -->
<el-button @click="resetEditForm" style="font-size: 18px">
<!-- 重置图标 -->
<i
class="iconfont icon-r-refresh"
style="font-size: 18px"
></i>
重置</el-button
>
<!-- 按钮文本 -->
重置
</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--创建角色弹出框-->
<!-- 创建角色的弹出框，标题为“创建角色”，双向绑定显示状态到 newRoleVisable，宽度 50% -->
<el-dialog title="创建角色" :visible.sync="newRoleVisable" width="50%">
<!-- 表单组件，绑定数据到 newRoleForm，设置验证规则，引用为 newRoleForm -->
<el-form
:model="newRoleForm"
:rules="rules"
@ -168,51 +224,62 @@
label-width="100px"
class="demo-ruleForm"
>
<!-- 名称表单项，输入框用于输入角色名称，双向绑定到 newRoleForm 的 name 属性 -->
<el-form-item label="名称：" prop="name">
<el-input v-model="newRoleForm.name"></el-input>
</el-form-item>
<!-- 描述表单项，输入框用于输入角色描述，双向绑定到 newRoleForm 的 info 属性 -->
<el-form-item label="描述：">
<el-input type="text" v-model="newRoleForm.info"></el-input>
</el-form-item>
<!-- 创建和重置按钮表单项 -->
<el-form-item>
<!-- 创建角色按钮，点击触发 submitNewForm 方法，传递参数 'newRoleForm' -->
<el-button
type="primary"
@click="submitNewForm('newRoleForm')"
style="font-size: 18px"
>
<!-- 创建图标 -->
<i
class="iconfont icon-r-add"
style="font-size: 18px"
></i>
创建角色</el-button
>
<!-- 按钮文本 -->
创建角色
</el-button>
<!-- 重置按钮，点击触发 resetNewForm 方法 -->
<el-button @click="resetNewForm" style="font-size: 18px">
<!-- 重置图标 -->
<i
class="iconfont icon-r-refresh"
style="font-size: 18px"
></i
>重置</el-button
>
>重置
</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--职能分配框-->
<!-- 权限分配的弹出框，标题为“权限分配”，双向绑定显示状态到 distributionFulVisable，宽度 50% -->
<el-dialog
title="权限分配"
:visible.sync="distributionFulVisable"
width="50%"
>
<!-- 表单组件，绑定数据到 distributionFulForm -->
<el-form
:model="distributionFulForm"
label-width="100px"
class="demo-ruleForm"
>
<!-- 输入框和树形结构表单项，输入框用于过滤树形结构数据 -->
<el-form-item>
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"
>
</el-input>
<!-- 树形结构组件，绑定数据、设置属性 -->
<el-tree
:data="fuloptions"
class="filter-tree"
@ -225,18 +292,23 @@
:props="props"
></el-tree>
</el-form-item>
<!-- 提交和取消按钮表单项 -->
<el-form-item>
<!-- 提交按钮，点击触发 submitDistributionFulForm 方法 -->
<el-button
type="primary"
@click="submitDistributionFulForm"
style="font-size: 18px"
>
<!-- 提交图标 -->
<i
class="iconfont icon-r-add"
style="font-size: 18px"
></i>
提交</el-button
>
<!-- 按钮文本 -->
提交
</el-button>
<!-- 取消按钮，点击触发 celDistributionFul 方法 -->
<el-button
@click="celDistributionFul"
style="font-size: 18px"
@ -248,205 +320,260 @@
</div>
</template>
<script>
import {
forbiddenRole,
roleList,
edit_role,
save_role,
checkPermissons,
saveRolePermissons,
} from "@/api/system/role/roleApi";
import { ajaxPost, popup } from "@/assets/js/common";
// 导入角色管理相关的 API 函数
import {
forbiddenRole,
roleList,
edit_role,
save_role,
checkPermissons,
saveRolePermissons,
} from "@/api/system/role/roleApi";
// 导入通用的 ajaxPost 函数和弹出提示框函数
import { ajaxPost, popup } from "@/assets/js/common";
export default {
data() {
return {
tableData: [],
editRoleForm: {},
editRoleRow: {},
dialogVisible: false,
newRoleVisable: false,
distributionFulVisable: false,
newRoleForm: {},
roleSearchForm: {},
distributionFulForm: {},
options: [
{ label: "正常", value: "0" },
{ label: "停用", value: "-1" },
],
/*职能分配*/
props: { multiple: true },
fuloptions: [],
default_checked_mid: [],
filterText: "",
rules: {
name: [
{
required: true,
message: "名称不能为空",
trigger: "blur",
},
export default {
// 组件的数据
data() {
return {
// 角色列表数据
tableData: [],
// 编辑角色表单数据
editRoleForm: {},
// 编辑角色时的原始行数据
editRoleRow: {},
// 修改角色信息对话框的显示状态
dialogVisible: false,
// 创建角色对话框的显示状态
newRoleVisable: false,
// 权限分配对话框的显示状态
distributionFulVisable: false,
// 创建角色表单数据
newRoleForm: {},
// 角色搜索表单数据
roleSearchForm: {},
// 权限分配表单数据
distributionFulForm: {},
// 状态选项数组
options: [
{ label: "正常", value: "0" },
{ label: "停用", value: "-1" },
],
},
};
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
init() {
roleList(this.roleSearchForm).then((res) => {
res = res.data;
if ((res.code = 200)) {
this.tableData = res.data;
} else {
popup(res.msg, "error");
}
});
},
forbidden(id) {
forbiddenRole(id).then((res) => {
res = res.data;
if (res.code == 200) {
this.roleSearchForm.state = "0";
this.init();
popup("操作成功");
} else {
popup(res.msg, "error");
}
});
},
/*弹出修改表单*/
editRole(row) {
this.editRoleForm = { ...row };
this.editRoleRow = { ...row };
this.dialogVisible = true;
},
/*条件搜索*/
subSearchForm() {
this.init();
},
/*对接后端修改角色接口*/
submitEditForm() {
if (
this.editRoleForm.info == this.editRoleRow.info &&
this.editRoleForm.state == this.editRoleRow.state
) {
popup("您没有更改内容", "warning");
return;
}
edit_role(this.editRoleForm).then((res) => {
res = res.data;
if (res.code == 200) {
popup("操作成功");
this.editRoleForm = {};
this.editRoleRow = {};
this.dialogVisible = false;
this.roleSearchForm.state = "0";
this.init();
} else {
popup(res.msg, "error");
}
});
/*职能分配相关数据*/
// 树形结构属性
props: { multiple: true },
// 权限选项数据
fuloptions: [],
// 默认选中的权限节点键数组
default_checked_mid: [],
// 过滤文本
filterText: "",
// 表单验证规则，name 字段必填
rules: {
name: [
{
required: true,
message: "名称不能为空",
trigger: "blur",
},
],
},
};
},
/*修改角色重置按钮*/
resetEditForm() {
this.editRoleForm = { ...this.editRoleRow };
},
/*创建新角色*/
submitNewForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.newRoleForm);
save_role(this.newRoleForm).then((res) => {
res = res.data;
if (res.code == 200) {
popup("操作成功");
this.newRoleForm = {};
this.newRoleVisable = false;
this.init();
} else {
popup(res.msg, "error");
}
});
}
});
},
resetNewForm() {
this.newRoleForm = {};
// 监听 filterText 的变化，当变化时调用树形结构的 filter 方法进行过滤
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
/*职能分配*/
/*授权按钮*/
checkPermissons(rid) {
this.distributionFulForm.rid = rid;
this.default_checked_mid = [];
checkPermissons(rid).then((res) => {
res = res.data;
if (res.code == 200) {
this.fuloptions = res.data.menus;
this.default_checked_mid = res.data.menuIds.sort(
(x, y) => x - y
);
console.log(typeof this.default_checked_mid);
console.log(this.default_checked_mid);
} else {
popup(res.msg, "error");
}
});
// 组件的方法
methods: {
// 树形结构节点过滤方法，根据输入的关键字过滤节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 初始化角色列表数据，调用 roleList API 获取数据并更新 tableData
init() {
roleList(this.roleSearchForm).then((res) => {
res = res.data;
if ((res.code = 200)) {
this.tableData = res.data;
} else {
popup(res.msg, "error");
}
});
},
// 停用角色的方法，调用 forbiddenRole API 停用指定 id 的角色
forbidden(id) {
forbiddenRole(id).then((res) => {
res = res.data;
if (res.code == 200) {
// 更新搜索表单的状态为“0”（正常）
this.roleSearchForm.state = "0";
// 重新初始化角色列表
this.init();
// 弹出操作成功提示
popup("操作成功");
} else {
// 弹出错误提示
popup(res.msg, "error");
}
});
},
this.distributionFulVisable = true;
},
submitDistributionFulForm() {
var keys = this.$refs.tree.getCheckedKeys();
var v = JSON.stringify(keys).replace("[", "").replace("]", "");
this.distributionFulForm.menuIds = v;
console.log(this.distributionFulForm.menuIds);
saveRolePermissons(this.distributionFulForm).then((res) => {
res = res.data;
if (res.code == 200) {
popup("操作成功");
this.distributionFulVisable = false;
this.distributionFulForm = {};
this.default_checked_mid = [];
this.fuloptions = [];
} else {
popup(res.msg, "error");
/*弹出修改表单，将当前行数据赋值给 editRoleForm 和 editRoleRow，并显示对话框*/
editRole(row) {
this.editRoleForm = { ...row };
this.editRoleRow = { ...row };
this.dialogVisible = true;
},
/*条件搜索方法，调用 init 方法重新获取角色列表数据*/
subSearchForm() {
this.init();
},
/*对接后端修改角色接口的方法，检查是否有修改内容，有则调用 edit_role API 修改角色信息*/
submitEditForm() {
if (
this.editRoleForm.info == this.editRoleRow.info &&
this.editRoleForm.state == this.editRoleRow.state
) {
// 如果没有更改内容，弹出警告提示
popup("您没有更改内容", "warning");
return;
}
});
this.distributionFulVisable = false;
},
celDistributionFul() {
this.default_checked_mid = [];
this.fuloptions = [];
this.distributionFulForm = {};
this.distributionFulVisable = false;
},
},
created() {
this.init();
},
edit_role (this.editRoleForm).then ((res) => {
res = res.data;
if (res.code == 200) {
// 如果修改成功，弹出操作成功提示
popup ("操作成功");
// 清空编辑表单数据
this.editRoleForm = {};
// 清空原始行数据
this.editRoleRow = {};
// 关闭对话框
this.dialogVisible = false;
// 更新搜索表单的状态为 “0”（正常）
this.roleSearchForm.state = "0";
// 重新初始化角色列表
this.init ();
} else {
// 如果修改失败，弹出错误提示
popup (res.msg, "error");
}
});
},
/修改角色重置按钮方法，将 editRoleRow 数据赋值给 editRoleForm，实现表单重置/
resetEditForm() {
this.editRoleForm = {...this.editRoleRow };
},
/创建新角色方法，验证表单数据，通过后调用 save_role API 创建角色/
submitNewForm (formName) {
this.$refs [formName].validate ((valid) => {
if (valid) {
console.log (this.newRoleForm);
save_role (this.newRoleForm).then ((res) => {
res = res.data;
if (res.code == 200) {
// 如果创建成功，弹出操作成功提示
popup ("操作成功");
// 清空创建表单数据
this.newRoleForm = {};
// 关闭创建角色对话框
this.newRoleVisable = false;
// 重新初始化角色列表
this.init ();
} else {
// 如果创建失败，弹出错误提示
popup (res.msg, "error");
}
});
}
});
},
// 重置创建角色表单数据的方法
resetNewForm () {
this.newRoleForm = {};
},
// 权限分配相关方法
// 授权按钮点击方法，设置 distributionFulForm 的 rid 属性，获取权限数据并显示权限分配对话框
checkPermissons (rid) {
this.distributionFulForm.rid = rid;
this.default_checked_mid = [];
checkPermissons (rid).then ((res) => {
res = res.data;
if (res.code == 200) {
// 获取权限菜单数据
this.fuloptions = res.data.menus;
// 获取默认选中的权限菜单 id 数组并排序
this.default_checked_mid = res.data.menuIds.sort ((x, y) => x - y);
console.log (typeof this.default_checked_mid);
console.log (this.default_checked_mid);
} else {
// 如果获取权限数据失败，弹出错误提示
popup (res.msg, "error");
}
});
this.distributionFulVisable = true;
},
// 提交权限分配表单的方法，获取选中的权限节点键，设置 distributionFulForm 的 menuIds 属性，调用 saveRolePermissons API 保存权限分配
submitDistributionFulForm () {
var keys = this.$refs.tree.getCheckedKeys ();
var v = JSON.stringify (keys).replace ("[", "").replace ("]","");
this.distributionFulForm.menuIds = v;
console.log (this.distributionFulForm.menuIds);
saveRolePermissons (this.distributionFulForm).then ((res) => {
res = res.data;
if (res.code == 200) {
// 如果保存成功，弹出操作成功提示
popup ("操作成功");
// 关闭权限分配对话框
this.distributionFulVisable = false;
// 清空权限分配表单数据
this.distributionFulForm = {};
// 清空默认选中的权限节点键数组
this.default_checked_mid = [];
// 清空权限选项数据
this.fuloptions = [];
} else {
// 如果保存失败，弹出错误提示
popup (res.msg, "error");
}
});
this.distributionFulVisable = false;
},
// 取消权限分配的方法，清空相关数据并关闭对话框
celDistributionFul () {
this.default_checked_mid = [];
this.fuloptions = [];
this.distributionFulForm = {};
this.distributionFulVisable = false;
},
},
// 组件创建时调用 init 方法初始化数据
created () {
this.init ();
},
};
</script>
### `<style>` 部分
```css
<style>
.search {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
/* 搜索区域的样式，内联块显示，居中，高度 51px，行高 51px */
.search {
display: inline-block;
margin: 0 auto;
height: 51px;
line-height: 51px;
}
.search .column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
/* 搜索区域内列的样式，内联块显示，居中，右侧外边距 2px，行高 48px，高度 51px */
.search.column {
display: inline-block;
margin: 0 auto;
margin-right: 2px;
line-height: 48px;
height: 51px;
}
</style>
Write Preview
Loading…
Cancel
Save