p6hj2n987
/
fourth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: p6hj2n987:main
Branches Tags
p6hj2n987:main
p6hj2n987:luchengfeng_branch
p6hj2n987:huyuqi_branch
p6hj2n987:liran_branch
p6hj2n987:yangyuxin_branch
p6hj2n987:develop
..
compare: p6hj2n987:liran_branch
Branches Tags
p6hj2n987:main
p6hj2n987:luchengfeng_branch
p6hj2n987:huyuqi_branch
p6hj2n987:liran_branch
p6hj2n987:yangyuxin_branch
p6hj2n987:develop

No commits in common. 'main' and 'liran_branch' have entirely different histories.
main ... liran_bran

48 changed files with 2237 additions and 11037 deletions
Show Stats

114
layout/Layout.vue
Unescape View File

@ -1,114 +0,0 @@
<template>
<div class="app-wrapper" :class="classObj">
<sidebar class="sidebar-container"></sidebar>
<div class="main-container">
<navbar></navbar>
<app-main></app-main>
</div>
</div>
</template>
<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'layout',
components: {
Navbar,
Sidebar,
AppMain
},
mixins: [ResizeMixin],
computed: {
sidebar() {
return this.$store.state.app.sidebar
},
device() {
return this.$store.state.app.device
},
classObj() {
return {
hideSidebar: !this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
}
</style>
#abc
<template>
<!-- 最外层的 `div` 元素，类名为 `app-wrapper`，并且通过 `:class="classObj"` 进行动态类名绑定，根据 `classObj` 计算属性返回的对象来决定应用哪些类名，用于实现根据不同条件动态改变样式的功能 -->
<div class="app-wrapper" :class="classObj">
<!-- 使用名为 `sidebar` 的自定义组件，类名为 `sidebar-container`，通常这个组件用于展示页面的侧边栏内容，比如导航菜单等功能模块 -->
<sidebar class="sidebar-container"></sidebar>
<!-- 一个 `div` 元素，类名为 `main-container`，作为主要内容区域的容器，用于包裹页面中除侧边栏之外的核心展示内容 -->
<div class="main-container">
<!-- 使用名为 `navbar` 的自定义组件，用于展示页面顶部的导航栏，包含诸如页面切换、功能操作入口等元素 -->
<navbar></navbar>
<!-- 使用名为 `app-main` 的自定义组件，用于承载页面的主体内容，例如数据展示、操作表单等具体业务相关的内容展示 -->
<app-main></app-main>
</div>
</div>
</template>
<script>
// 从 `./components` 目录下分别导入 `Navbar`、`Sidebar`、`AppMain` 这三个自定义组件，这些组件在页面布局中分别承担不同的功能模块展示任务，如前面模板部分注释所述
import { Navbar, Sidebar, AppMain } from './components';
// 从 `./mixin/ResizeHandler` 路径导入 `ResizeMixin`，混入（`mixins`）是 Vue.js 中一种复用代码的方式，`ResizeMixin` 里可能包含了处理页面尺寸变化相关的逻辑，会被混入到当前组件中使用
import ResizeMixin from './mixin/ResizeHandler';
export default {
name: 'layout',
components: {
// 在当前组件的 `components` 属性中注册 `Navbar`、`Sidebar`、`AppMain` 这三个组件，使得在模板中可以直接通过对应的标签名来调用它们，遵循 Vue.js 组件化开发的组件注册和使用规则
Navbar,
Sidebar,
AppMain
},
mixins: [ResizeMixin],
computed: {
sidebar() {
// 计算属性 `sidebar`，通过访问 Vuex 存储（`$store`）中 `app` 模块下的 `sidebar` 状态对象，获取侧边栏相关的状态信息，例如侧边栏是否打开等，供其他地方使用（比如动态控制侧边栏显示隐藏的样式等）
return this.$store.state.app.sidebar;
},
device() {
// 计算属性 `device`，同样从 `$store` 中获取 `app` 模块下关于设备类型的状态信息，判断当前设备是 `mobile`（移动端）还是其他类型（如桌面端等），以便根据设备类型做不同的布局或功能适配
return this.$store.state.app.device;
},
classObj() {
// 计算属性 `classObj`，返回一个对象，对象中的属性名对应要添加或移除的类名，属性值为布尔值，根据相关状态决定是否应用对应的类名。例如 `hideSidebar` 类名会在侧边栏未打开（`!this.sidebar.opened`）时添加，用于隐藏侧边栏；`withoutAnimation` 类名依据侧边栏是否设置无动画（`this.sidebar.withoutAnimation`）来决定是否添加；`mobile` 类名在设备类型为移动端（`this.device === 'mobile'`）时添加，实现针对移动端的样式调整等功能
return {
hideSidebar:!this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device ==='mobile'
};
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// 使用 `@import` 指令导入 `src/styles/mixin.scss` 文件，这个文件里可能定义了一些可复用的 SCSS 样式混入（`mixin`），可以在当前样式文件中调用，以减少样式代码的重复编写并方便样式的统一管理。
@import "src/styles/mixin.scss";
.app-wrapper {
// 使用导入的 `clearfix` 混入（假设 `mixin.scss` 中定义了 `clearfix` 混入用于清除浮动等布局相关效果），来处理元素的布局样式，确保内部元素的正确排列。
@include clearfix;
// 设置元素的定位方式为 `relative`（相对定位），为后续可能的绝对定位子元素提供定位参考，便于进行更灵活的页面布局。
position: relative;
// 将元素的高度设置为 `100%`，通常是相对于父元素的高度占比，可能用于撑满整个可视区域或者某个容器区域等情况，具体取决于父元素的高度设置。
height: 100%;
// 将元素的宽度设置为 `100%`，使其在水平方向上占满父元素或者所在的容器宽度，实现全屏或者占满指定宽度区域的效果。
width: 100%;
}
</style>

43
layout/components/AppMain.vue
Unescape View File

@ -1,43 +0,0 @@
<template>
<section class="app-main">
<transition name="fade" mode="out-in">
<!-- <router-view :key="key"></router-view> -->
<router-view></router-view>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
// key() {
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
// }
}
}
</script>
#abc
<template>
<!-- 使用 `section` 元素作为容器，类名为 `app-main`，通常这个元素会用于承载页面的主体内容部分，在整个页面布局结构中扮演重要角色，例如展示各种业务模块、数据展示区域等 -->
<section class="app-main">
<!-- 使用 Vue.js 的 `<transition>` 组件，设置过渡效果的名称为 `fade`，过渡模式为 `out-in`。这种过渡模式意味着旧元素先执行离开过渡（淡出），完成后新元素再执行进入过渡（淡入），用于在路由视图切换时（不同页面组件切换时）实现平滑的过渡动画效果 -->
<transition name="fade" mode="out-in">
<!-- 原本此处使用 `:key` 绑定了一个计算属性 `key`（目前代码中该计算属性被注释掉了），用于给 `<router-view>` 组件添加一个唯一标识，当路由变化且 `key` 值改变时，会强制重新渲染 `<router-view>` 对应的组件，实现更有效的组件更新和过渡效果展示。现在虽然没有绑定 `key`，但 `<router-view>` 组件依然用于渲染与当前路由匹配的组件内容，也就是展示具体的页面内容部分 -->
<router-view></router-view>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
// 以下是一个被注释掉的计算属性 `key` 的定义。其目的是为了给 `<router-view>` 组件生成一个动态的、唯一的标识（`key`）。
// 通过判断 `this.$route.name` 是否有定义来生成不同的 `key` 值。如果 `$route.name` 存在，那么 `key` 值就是 `$route.name` 与当前时间戳（通过 `+new Date()` 获取）拼接而成，这样每次路由切换且路由名称改变时，`key` 值就会改变，强制 `<router-view>` 重新渲染对应的组件；如果 `$route.name` 不存在，就用整个 `$route` 对象与当前时间戳拼接作为 `key` 值，同样也是为了保证在路由相关信息变化时能够触发组件的重新渲染，以配合 `<transition>` 组件实现更好的过渡动画效果等功能。不过目前代码中该计算属性处于注释状态，暂时未生效。
// key() {
// return this.$route.name!== undefined? this.$route.name + +new Date() : this.$route + +new Date()
// }
}
}
</script>

235
layout/components/Navbar.vue
Unescape View File

@ -1,235 +0,0 @@
<template>
<el-menu class="navbar" mode="horizontal">
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<breadcrumb></breadcrumb>
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img class="user-avatar" :src="avatar">
<i class="el-icon-caret-bottom"></i>
</div>
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<router-link class="inlineBlock" to="/">
<el-dropdown-item>
首页
</el-dropdown-item>
</router-link>
<el-dropdown-item divided>
<span @click="logout" style="display:block;">退出</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
export default {
components: {
Breadcrumb,
Hamburger
},
computed: {
...mapGetters([
'sidebar',
'avatar'
])
},
methods: {
toggleSideBar() {
this.$store.dispatch('ToggleSideBar')
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
height: 50px;
line-height: 50px;
border-radius: 0px !important;
.hamburger-container {
line-height: 58px;
height: 50px;
float: left;
padding: 0 10px;
}
.screenfull {
position: absolute;
right: 90px;
top: 16px;
color: red;
}
.avatar-container {
height: 50px;
display: inline-block;
position: absolute;
right: 35px;
.avatar-wrapper {
cursor: pointer;
margin-top: 5px;
position: relative;
.user-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
</style>
#abc
<template>
<!-- 使用 Element UI 的 `el-menu` 组件创建一个水平模式（`mode="horizontal"`）的导航栏，类名为 `navbar`，用于构建页面顶部的导航菜单结构 -->
<el-menu class="navbar" mode="horizontal">
<!-- 使用名为 `hamburger` 的自定义组件，类名为 `hamburger-container`，通过属性绑定传递 `toggleClick` 方法（用于切换侧边栏显示状态）以及 `isActive` 属性（与侧边栏是否打开状态相关），通常这个组件会以汉堡菜单图标形式呈现，点击可展开或收起侧边栏 -->
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<!-- 使用名为 `breadcrumb` 的自定义组件，用于展示面包屑导航，显示当前页面在整个页面层级结构中的位置路径信息，方便用户知晓所在页面的层级关系 -->
<breadcrumb></breadcrumb>
<!-- 使用 Element UI 的 `el-dropdown` 下拉菜单组件，类名为 `avatar-container`，设置触发下拉菜单的方式为点击（`trigger="click"`），用于创建一个包含用户头像等相关操作选项的下拉菜单 -->
<el-dropdown class="avatar-container" trigger="click">
<!-- 一个 `div` 元素，类名为 `avatar-wrapper`，作为用户头像及其相关元素的容器，用于包裹头像图片和下拉箭头图标等 -->
<div class="avatar-wrapper">
<!-- 使用 `img` 图片元素，通过 `:src` 绑定 `avatar` 变量（在计算属性中通过 Vuex 的 `getters` 获取，用于显示用户头像图片资源），设置类名为 `user-avatar`，用于展示用户的头像 -->
<img class="user-avatar" :src="avatar">
<!-- 使用 Element UI 的图标组件 `el-icon-caret-bottom`，展示一个向下的箭头图标，用于提示用户该区域可点击展开下拉菜单，增强视觉提示效果 -->
<i class="el-icon-caret-bottom"></i>
</div>
<!-- `el-dropdown-menu` 组件，类名为 `user-dropdown`，通过 `slot="dropdown"` 插槽与外层的 `el-dropdown` 组件关联，用于定义下拉菜单中具体的菜单项内容 -->
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<!-- 使用 `router-link` 组件创建一个路由链接，类名为 `inlineBlock`，链接到根路径（`/`），点击可导航到首页，并且将 `el-dropdown-item` 作为子元素包裹在其中，用于在下拉菜单中展示“首页”这一菜单项 -->
<router-link class="inlineBlock" to="/">
<el-dropdown-item>
首页
</el-dropdown-item>
</router-link>
<!-- `el-dropdown-item` 组件，设置了 `divided` 属性（可能用于添加分割线样式，区分不同菜单项），内部包含一个 `span` 元素，点击该 `span` 元素会触发 `logout` 方法，用于执行退出登录的操作，在下拉菜单中展示“退出”这一菜单项 -->
<el-dropdown-item divided>
<span @click="logout" style="display:block;">退出</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu>
</template>
<script>
// 从 `vuex` 中导入 `mapGetters` 函数，这个函数用于将 Vuex 中的 `getters` 映射到组件的计算属性中，方便获取 Vuex 中存储的状态数据。
import { mapGetters } from 'vuex';
// 从 `@/components/` 路径下导入名为 `Breadcrumb` 的自定义组件，该组件用于展示面包屑导航相关功能逻辑，已在前面模板部分注释中介绍其作用。
import Breadcrumb from '@/components/Breadcrumb';
// 从 `@/components/` 路径下导入名为 `Hamburger` 的自定义组件，用于实现侧边栏展开收起的汉堡菜单图标相关功能逻辑，同样在模板部分注释有相关说明。
import Hamburger from '@/components/Hamburger';
export default {
components: {
// 在当前组件的 `components` 属性中注册 `Breadcrumb` 和 `Hamburger` 这两个组件，使得在模板中可以直接通过对应的标签名来调用它们，遵循 Vue.js 组件化开发的组件注册和使用规则。
Breadcrumb,
Hamburger
},
computed: {
// 使用 `mapGetters` 函数将 Vuex 中的 `sidebar` 和 `avatar` 这两个 `getters` 映射到当前组件的计算属性中，这样在组件内部就可以直接通过 `this.sidebar` 和 `this.avatar` 来获取对应的状态数据，`sidebar` 相关数据可能用于判断侧边栏的状态，`avatar` 则用于显示用户头像图片资源等。
...mapGetters([
'sidebar',
'avatar'
])
},
methods: {
toggleSideBar() {
// 定义 `toggleSideBar` 方法，当调用该方法时，通过 `$store.dispatch` 方法触发 Vuex 中的 `ToggleSideBar` 异步操作（通常对应一个 `action`，在 Vuex 的 `store` 中定义了相关逻辑，比如改变侧边栏的显示或隐藏状态等），用于实现点击汉堡菜单图标切换侧边栏显示状态的功能。
this.$store.dispatch('ToggleSideBar')
},
logout() {
// 定义 `logout` 方法，当点击“退出”菜单项时触发该方法，通过 `$store.dispatch` 方法触发 Vuex 中的 `LogOut` 异步操作（同样在 `store` 中有对应逻辑，比如清除用户登录状态等相关操作），并且在 `LogOut` 异步操作成功完成（通过 `.then` 回调）后，调用 `location.reload` 方法刷新页面，目的是重新实例化 `vue-router` 对象，避免可能出现的一些路由相关的 `bug`，从而实现完整的退出登录并刷新页面的功能。
this.$store.dispatch('LogOut').then(() => {
location.reload(); // 为了重新实例化vue-router对象 避免bug
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// 定义类名为 `navbar` 的样式规则，用于设置整个导航栏的基础样式。
.navbar {
// 设置导航栏的高度为 `50px`，使导航栏在垂直方向上占据一定的空间高度，保持统一的外观高度。
height: 50px;
// 设置行高为 `50px`，使得导航栏内的文本等元素在垂直方向上能够居中对齐，呈现出整齐美观的视觉效果。
line-height: 50px;
// 覆盖 `el-menu` 组件默认的边框圆角样式，将其设置为 `0px`，使导航栏呈现出直角的外观效果，更符合特定的设计风格要求，`!important` 用于提升样式优先级，确保该样式能够生效。
border-radius: 0px!important;
// 定义类名为 `hamburger-container` 的内部样式规则，用于设置汉堡菜单图标所在容器的样式。
.hamburger-container {
// 设置行高为 `58px`，调整汉堡菜单图标在垂直方向上的位置，使其在导航栏内有合适的布局展示效果。
line-height: 58px;
// 设置高度为 `50px`，与导航栏高度保持一致，确保在垂直方向上占满整个导航栏的空间。
height: 50px;
// 设置元素向左浮动，使汉堡菜单图标能够靠导航栏左侧排列，方便用户操作以及整体布局的合理性。
float: left;
// 设置左右内边距为 `0 10px`，给汉堡菜单图标在水平方向上留出一定的空间，避免图标与其他元素过于紧凑或重叠。
padding: 0 10px;
}
// 定义类名为 `screenfull` 的样式规则（从代码上下文看，此处可能暂时未完全使用到该样式，也许后续有相关功能扩展），用于设置一个可能与全屏相关功能的元素样式（比如全屏按钮等）。
.screenfull {
// 设置元素的定位方式为 `absolute`（绝对定位），使其可以相对于最近的已定位祖先元素进行定位，方便精确控制其在导航栏中的位置。
position: absolute;
// 设置元素距离右侧 `90px` 的距离，用于确定其在水平方向上的位置，使其出现在导航栏右侧的特定位置处。
right: 90px;
// 设置元素距离顶部 `16px` 的距离，用于确定其在垂直方向上的位置，调整其在导航栏中的垂直布局位置。
top: 16px;
// 设置元素的颜色为红色，用于突出显示该元素，可能起到视觉提示等作用（同样具体功能需看后续实现）。
color: red;
}
// 定义类名为 `avatar-container` 的样式规则，用于设置包含用户头像的下拉菜单容器的样式。
.avatar-container {
// 设置高度为 `50px`，与导航栏高度保持一致，使其在垂直方向上占满对应的空间，呈现出整齐的布局效果。
height: 50px;
// 设置元素以行内块级元素（`inline-block`）的形式展示，使其可以在水平方向上与其他元素并排排列，同时又能设置宽度、高度等块级元素的属性。
display: inline-block;
// 设置元素的定位方式为 `absolute`（绝对定位），便于精确控制其在导航栏右侧的位置，方便用户操作以及整体布局的合理性。
position: absolute;
// 设置元素距离右侧 `35px` 的距离，确定其在水平方向上的具体位置，使其出现在导航栏右侧合适的位置处。
right: 35px;
// 定义类名为 `avatar-wrapper` 的内部样式规则，用于设置用户头像及其相关元素的包裹容器的样式。
.avatar-wrapper {
// 设置鼠标指针样式为 `cursor: pointer`，当鼠标悬停在该区域时，会显示为手型指针，提示用户该区域可点击操作，增强交互性。
cursor: pointer;
// 设置顶部外边距为 `5px`，用于调整用户头像在垂直方向上的位置，使其在下拉菜单容器中有合适的布局展示效果。
margin-top: 5px;
// 设置元素的定位方式为 `relative`（相对定位），为内部的绝对定位元素（如头像下方的下拉箭头图标）提供定位参考，便于进行更精细的布局调整。
position: relative;
// 定义类名为 `user-avatar` 的内部样式规则，用于设置用户头像图片的样式。
.user-avatar {
// 设置图片的宽度为 `40px`，确定头像图片在水平方向上的尺寸大小，使其呈现出合适的视觉效果。
width: 40px;
// 设置图片的高度为 `40px`，确定头像图片在垂直方向上的尺寸大小，保持头像图片为正方形的外观效果，符合常见的头像展示样式要求。
height: 40px;
// 设置图片的边框圆角为 `10px`，使头像图片呈现出一定的圆角效果，增加视觉上的柔和感和美观度。
border-radius: 10px;
}
// 定义类名为 `el-icon-caret-bottom` 的内部样式规则，用于设置下拉箭头图标的样式。
.el-icon-caret-bottom {
// 设置元素的定位方式为 `absolute`（绝对定位），使其可以相对于外层的 `avatar-wrapper`（相对定位的祖先元素）进行精确的位置定位。
position: absolute;
// 设置元素距离右侧 `-20px` 的距离，使其出现在头像图片的右侧偏左一点的位置，用于指示该区域可点击展开下拉菜单。
right: -20px;
// 设置元素距离顶部 `25px` 的距离，调整其在垂直方向上的位置，使其在头像下方合适的位置处展示，符合常见的下拉菜单箭头图标布局位置要求。
top: 25px;
// 设置图标的字体大小为 `12px`，调整下拉箭头图标的大小，使其在视觉上与头像等元素比例协调，呈现出合适的视觉效果。
font-size: 12px;
}
}
}
}
</style>

154
layout/components/Sidebar/SidebarItem.vue
Unescape View File

@ -1,154 +0,0 @@
<template>
<div class="menu-wrapper">
<template v-for="item in routes" v-if="!item.hidden&&item.children">
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
:key="item.children[0].name">
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{item.children[0].meta.title}}</span>
</el-menu-item>
</router-link>
<el-submenu v-else :index="item.name||item.path" :key="item.name">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
<!--支持外链功能-->
<a v-else-if="child.path.startsWith('http')" v-bind:href="child.path" target="_blank" :key="child.name">
<el-menu-item :index="item.path+'/'+child.path">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
</el-menu-item>
</a>
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
<el-menu-item :index="item.path+'/'+child.path">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
},
isNest: {
type: Boolean,
default: false
}
},
methods: {
hasOneShowingChildren(children) {
const showingChildren = children.filter(item => {
return !item.hidden
})
if (showingChildren.length === 1) {
return true
}
return false
}
}
}
</script>
#abc
<template>
<!-- 最外层的 `div` 元素，类名为 `menu-wrapper`，它充当整个侧边栏菜单的包裹容器，起到组织和定位内部菜单元素的作用，使得菜单在页面布局中有一个明确的范围和样式框架。 -->
<div class="menu-wrapper">
<!-- 使用 `v-for` 指令对 `routes` 数组进行循环遍历，`routes` 数组应该是从父组件传入的数据，包含了侧边栏菜单各个层级的路由配置信息等内容。同时结合 `v-if` 指令进行条件判断，只有当当前遍历到的 `item` 元素的 `hidden` 属性为 `false`（意味着该菜单项需要显示出来，而非隐藏）并且 `item` 具有 `children` 属性（表示这个菜单项包含子菜单）时，才会渲染内部对应的菜单结构内容，以此实现根据数据动态生成侧边栏菜单的功能，有选择性地展示有效的菜单项及其子菜单。 -->
<template v-for="item in routes" v-if="!item.hidden&&item.children">
<!-- 使用 `router-link` 组件创建一个路由链接，这是 Vue Router 用于实现页面导航的组件。通过 `v-if` 指令添加了复杂的条件判断，只有当满足以下几个条件时才会渲染这个路由链接：
- `hasOneShowingChildren(item.children)` 方法返回 `true`，即当前菜单项（`item`）的子菜单数组（`item.children`）经过筛选后只有一个需要显示的子项（`hasOneShowingChildren` 方法会在后续的 `methods` 部分详细介绍，作用是筛选出未隐藏的子项并判断数量是否为 1）。
- `!item.children[0].children` 为 `true`，也就是当前菜单项的第一个子菜单项（`item.children[0]`）不存在它自己的子菜单，说明是一个没有下一级嵌套的子菜单项。
- `!item.alwaysShow` 为 `true`，可能表示该菜单项不是那种始终要显示特定链接形式的特殊菜单项（具体含义需结合整体业务逻辑判断）。
`:to` 属性绑定了一个拼接后的路由路径，由当前菜单项（`item`）的 `path` 属性和它第一个子菜单项（`item.children[0]`）的 `path` 属性通过 `+` 号拼接而成，用于指定点击这个路由链接后要跳转到的页面路径。`:key` 属性绑定了第一个子菜单项（`item.children[0]`）的 `name` 属性，在 Vue 的虚拟 DOM 渲染机制中，`key` 可以帮助更高效准确地识别每个列表项（这里的路由链接作为一种列表项），便于在数据变化时进行精准的更新、复用以及重新排序等操作，优化渲染性能。 -->
<router-link v-if="hasOneShowingChildren(item.children) &&!item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
:key="item.children[0].name">
<!-- 使用 Element UI 的 `el-menu-item` 组件来表示一个菜单项，它是侧边栏菜单中的具体可点击选项。`:index` 属性绑定了同样是由当前菜单项（`item`）的 `path` 和其第一个子菜单项（`item.children[0]`）的 `path` 拼接而成的字符串，这个 `index` 属性在菜单的选中状态管理等方面可能会起到标识作用（例如确定哪个菜单项当前处于激活状态等）。`:class` 属性通过对象语法绑定了一个类名控制逻辑，根据 `!isNest`（`isNest` 是从父组件传入的布尔类型属性，用于判断当前菜单项是否处于嵌套菜单的情境中，默认值为 `false`）的值来决定是否添加 `submenu-title-noDropdown` 类名，从而实现根据不同的菜单层级或状态应用不同的样式，比如改变外观样式以体现是否是嵌套菜单下的标题样式等。 -->
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
<!-- 使用 `svg-icon` 自定义组件（从代码上下文推测，应该是用于展示 SVG 格式的图标），通过 `v-if` 指令进行条件判断，只有当当前菜单项的第一个子菜单项（`item.children[0]`）的 `meta` 对象中存在 `icon` 属性（通常 `meta` 对象用于存放菜单项的一些额外元数据，比如图标、标题等相关信息）时，才会将该 `icon` 属性的值作为图标类名传递给 `svg-icon` 组件，进而展示对应的图标，用于增强菜单项的可视化效果，让用户更直观地识别菜单项对应的功能或页面类型等。 -->
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
<!-- 使用 `span` 元素来展示菜单项的标题文本内容，同样通过 `v-if` 指令判断，只有当当前菜单项的第一个子菜单项（`item.children[0]`）的 `meta` 对象中存在 `title` 属性时，才会将该 `title` 属性的值作为文本内容渲染到 `span` 元素中，显示在菜单项上，明确告知用户该菜单项所代表的含义或对应的页面名称等信息。通过 `slot="title"` 属性，将这个 `span` 元素放置在 `el-menu-item` 组件指定的标题插槽位置，确保文本正确显示在菜单项的合适位置上。 -->
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{item.children[0].meta.title}}</span>
</el-menu-item>
</router-link>
<!-- 使用 Element UI 的 `el-submenu` 组件来创建一个包含子菜单的菜单项容器，通过 `v-else` 指令，意味着当不满足上面 `router-link` 组件的渲染条件时（即当前菜单项的子菜单情况不符合前面所描述的那种只有一个无子菜单的显示子项的情况），就会渲染这个 `el-submenu` 组件，用于展示更复杂的、具有多个子菜单项或者嵌套子菜单的菜单结构。`:index` 属性绑定了当前菜单项（`item`）的 `name` 属性或者 `path` 属性（优先使用 `name`，如果 `name` 不存在则使用 `path`），用于在菜单体系中标识这个子菜单的唯一性，便于菜单状态管理、展开与折叠控制等操作能准确对应到这个子菜单上。`:key` 属性绑定了当前菜单项（`item`）的 `name` 属性，同样是为了在 Vue 的虚拟 DOM 渲染机制中给这个组件实例一个唯一标识，方便进行高效的更新和复用操作，提升渲染性能。 -->
<el-submenu v-else :index="item.name||item.path" :key="item.name">
<!-- 使用 `template` 元素并通过 `slot="title"` 属性定义了 `el-submenu` 组件的标题部分内容的插槽，用于自定义子菜单标题的展示样式和内容，包括图标和标题文本等信息，这些内容会展示在子菜单展开按钮等位置，方便用户直观地识别这个子菜单所代表的功能分类或相关页面集合等。 -->
<template slot="title">
<!-- 与前面类似，使用 `svg-icon` 自定义组件展示图标，通过 `v-if` 指令判断当前菜单项（`item`）的 `meta` 对象中是否存在 `icon` 属性，如果存在则将该 `icon` 属性的值作为图标类名传递给 `svg-icon` 组件，展示对应的图标，增强子菜单标题的可视化效果，帮助用户快速识别该子菜单相关信息。 -->
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
<!-- 使用 `span` 元素展示子菜单标题的文本内容，通过 `v-if` 指令判断当前菜单项（`item`）的 `meta` 对象中是否存在 `title` 属性，如果存在则将该 `title` 属性的值作为文本渲染到 `span` 元素中，显示在子菜单标题位置，明确告知用户这个子菜单所涉及的内容范围等信息。通过 `slot="title"` 将这个 `span` 元素放置在 `template` 元素指定的标题插槽位置，确保文本正确显示在子菜单标题的合适位置上。 -->
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
</template>
<!-- 再次使用 `v-for` 指令对当前菜单项（`el-submenu` 对应的 `item`）的 `children` 数组（即子菜单的各个子项）进行循环遍历，同时结合 `v-if` 指令进行条件判断，只有当子项的 `hidden` 属性为 `false`（表示该子项需要显示出来，而非隐藏）时，才会渲染内部对应的菜单相关组件，用于动态生成子菜单下的具体菜单项内容，实现有选择性地展示有效的子菜单项，过滤掉不需要显示的子项。 -->
<template v-for="child in item.children" v-if="!child.hidden">
<!-- 使用名为 `sidebar-item` 的自定义组件（也就是当前正在定义的这个组件自身，通过递归调用自身来处理嵌套菜单的情况），通过 `:is-nest="true"` 属性传递一个布尔值，表示当前处于嵌套菜单的状态（因为这里是在处理子菜单中的子菜单项，属于嵌套层级情况），同时添加 `nest-menu` 类名（从代码结构推测，这个类名应该是用于应用一些特定的样式，实现嵌套菜单相关的外观样式控制，比如缩进、字体大小调整等，具体样式定义需查看对应的 CSS 代码）。通过 `:routes="[child]"` 属性将当前子项（`child`）作为一个只包含一个元素的数组传递给 `sidebar-item` 组件，目的是让 `sidebar-item` 组件以这个子项为基础数据，递归地处理它可能存在的子菜单情况（如果 `child` 本身也有 `children` 属性，即还有下一层级的子菜单的话），`:key` 属性绑定当前子项（`child`）的 `path` 属性，用于在 Vue 的虚拟 DOM 渲染机制中给这个 `sidebar-item` 组件实例一个唯一标识，便于进行高效的更新、复用以及重新排序等操作，优化渲染性能，实现多级嵌套菜单的递归构建和渲染功能。 -->
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
<!-- 使用 `a` 元素（超链接）来创建一个外部链接菜单项，通过 `v-else-if` 指令进行条件判断，当当前子项（`child`）的 `path` 属性是以 `http` 开头时（表明这是一个指向外部网页的链接），就会渲染这个 `a` 元素。通过 `v-bind:href` 指令将当前子项（`child`）的 `path` 属性绑定为超链接的 `href` 属性值，即链接地址，同时设置 `target="_blank"` 属性，使得点击这个链接时会在新的浏览器标签页中打开对应的外部网页。`:key` 属性绑定当前子项（`child`）的 `name` 属性，用于在 Vue 的虚拟 DOM 渲染机制中给这个 `a` 元素一个唯一标识，方便进行高效的更新操作，确保在数据变化时能正确渲染这个外部链接菜单项。 -->
<a v-else-if="child.path.startsWith('http')" v-bind:href="child.path" target="_blank" :key="child.name">
<el-menu-item :index="item.path+'/'+child.path">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
</el-menu-item>
</a>
<!-- 使用 `router-link` 组件创建一个内部路由链接菜单项，通过 `v-else` 指令，当不满足上面 `sidebar-item` 和 `a` 元素的渲染条件时（即既不是嵌套菜单情况，也不是外部链接情况，而是内部页面路由链接的常规情况），就会渲染这个 `router-link` 组件。`:to` 属性绑定了由当前菜单项（`el-submenu` 对应的 `item`）的 `path` 属性和当前子项（`child`）的 `path` 属性通过 `+` 号拼接而成的字符串作为路由路径，用于指定点击这个路由链接后要跳转到的内部页面路径。`:key` 属性绑定当前子项（`child`）的 `name` 属性，用于在 Vue 的虚拟 DOM 渲染机制中给这个 `router-link` 组件一个唯一标识，方便进行高效的更新操作，确保在数据变化时能正确渲染这个内部路由链接菜单项，实现内部页面之间的导航功能。 -->
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
<el-menu-item :index="item.path+'/'+child.path">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: {
// 定义一个名为 `routes` 的属性，其类型被指定为 `Array`（数组类型），这个属性是从父组件传入的数据，预期传入的是一个包含侧边栏菜单路由配置信息的数组，数组中的每个元素通常是一个对象，对象里包含了诸如 `path`（路由路径）、`meta`（包含图标、标题等额外元数据的对象）、`children`（子菜单相关信息，如果有的话）等属性，用于在模板中根据这些数据动态生成侧边栏菜单的各个层级和菜单项内容，实现菜单的灵活配置和渲染。
routes: {
type: Array
},
// 定义一个名为 `isNest` 的属性，其类型为 `Boolean`（布尔类型），默认值设置为 `false`。这个属性同样是从父组件传入，用于标识当前菜单项是否处于嵌套菜单的情境中，在模板中可以根据这个属性的值来应用不同的样式（例如通过添加或移除特定类名来改变外观样式）或者进行不同的逻辑处理（比如某些交互行为在嵌套和非嵌套情况下可能有所不同），以区分不同层级的菜单展示效果和功能逻辑。
isNest: {
type: Boolean,
default: false
}
},
methods: {
hasOneShowingChildren(children) {
// 定义一个名为 `hasOneShowingChildren` 的方法，该方法接收一个参数 `children`，这个参数预期是一个菜单项的子菜单数组（从调用该方法的地方来看，通常是 `item.children` 的形式传入，即某个菜单项下的所有子菜单项组成的数组），其作用是判断这个子菜单数组经过筛选后是否只有一个需要显示的子项。
const showingChildren = children.filter(item => {
// 使用 JavaScript 的数组 `filter` 方法对传入的 `children` 数组进行筛选操作，`filter` 方法会遍历数组中的每个元素（这里每个元素对应一个子菜单项，通常是一个对象），并执行传入的回调函数，回调函数中返回 `true` 的元素会被保留下来组成新的数组。在这里，回调函数判断每个子菜单项的 `hidden` 属性是否为 `false`（即是否不隐藏，需要显示），如果是，则该子菜单项会被保留在新的 `showingChildren` 数组中，这样就得到了经过筛选后的只包含需要显示的子菜单项的数组。
return!item.hidden
})
if (showingChildren.length === 1) {
// 判断经过筛选后的 `showingChildren` 数组的长度是否等于 `1`，如果等于 `1`，说明经过筛选后只有一个需要显示的子菜单项，此时返回 `true`，表示满足只有一个显示子项的条件。
return true
}
return false
// 如果 `showingChildren` 数组的长度不等于 `1`，则返回 `false`，表示不满足只有一个显示子项的条件，意味着子菜单的显示情况不符合特定的业务逻辑要求（例如前面在模板中使用该方法判断是否以某种特定方式渲染菜单项的情况）。
}
}
}
</script>

89
layout/components/Sidebar/index.vue
Unescape View File

@ -1,89 +0,0 @@
<template>
<scroll-bar>
<el-menu
mode="vertical"
:show-timeout="200"
:default-active="$route.path"
:collapse="isCollapse"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
>
<sidebar-item :routes="routes"></sidebar-item>
</el-menu>
</scroll-bar>
</template>
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import ScrollBar from '@/components/ScrollBar'
export default {
components: { SidebarItem, ScrollBar },
computed: {
...mapGetters([
'sidebar',
'routers'
]),
routes() {
// return this.$router.options.routes
return this.routers
},
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>
#abc
<template>
<!-- 使用名为 `scroll-bar` 的自定义组件（可能是用于实现滚动条相关功能的组件，比如自定义滚动条样式、添加滚动交互逻辑等），该组件作为外层容器，包裹内部的 `el-menu` 组件，以便为菜单提供滚动功能（如果有相应实现的话） -->
<scroll-bar>
<!-- 使用 Element UI 的 `el-menu` 菜单组件，设置菜单模式为 `vertical`（垂直方向展示），`:show-timeout` 属性设置为 `200`，表示菜单展开或收起时过渡动画的显示时长（单位可能是毫秒），`:default-active` 属性绑定为 `$route.path`，意味着会根据当前路由的路径来自动设置默认激活的菜单项（与当前页面匹配的菜单项处于激活状态），`:collapse` 属性绑定 `isCollapse` 变量（在计算属性中定义，与侧边栏是否折叠相关），用于控制菜单是否折叠显示，同时设置了背景颜色、文本颜色以及激活状态下的文本颜色，用于定义菜单的整体外观颜色风格 -->
<el-menu
mode="vertical"
:show-timeout="200"
:default-active="$route.path"
:collapse="isCollapse"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
>
<!-- 使用名为 `sidebar-item` 的自定义组件（在 `script` 部分有导入和注册，用于根据传入的路由配置信息动态生成侧边栏菜单的具体内容），通过 `:routes` 属性传递 `routes` 变量（在计算属性中定义，包含了菜单相关的路由配置数据），用于递归地构建完整的侧边栏菜单结构，展示各个菜单项及其嵌套子菜单等内容 -->
<sidebar-item :routes="routes"></sidebar-item>
</el-menu>
</scroll-bar>
</template>
<script>
// 从 `vuex` 中导入 `mapGetters` 函数，该函数用于将 Vuex 中的 `getters` 映射到组件的计算属性中，方便获取 Vuex 存储中的特定状态数据，以便在组件内使用。
import { mapGetters } from 'vuex';
// 从当前相对路径下导入名为 `SidebarItem` 的自定义组件，这个组件已经在模板部分出现，用于构建侧边栏菜单的具体菜单项和子菜单等内容，通过接收路由配置信息来实现动态菜单生成功能。
import SidebarItem from './SidebarItem';
// 从 `@/components/` 路径下导入名为 `ScrollBar` 的自定义组件，作为外层包裹 `el-menu` 的容器，用于提供滚动条相关功能（如前所述），可能包含自定义滚动条样式和交互逻辑等实现。
import ScrollBar from '@/components/ScrollBar';
export default {
components: {
// 在当前组件的 `components` 属性中注册 `SidebarItem` 和 `ScrollBar` 这两个组件，使得在模板中可以直接通过对应的标签名来调用它们，遵循 Vue.js 组件化开发的组件注册和使用规则。
SidebarItem,
ScrollBar
},
computed: {
// 使用 `mapGetters` 函数将 Vuex 中的 `sidebar` 和 `routers` 这两个 `getters` 映射到当前组件的计算属性中，这样在组件内部就可以直接通过 `this.sidebar` 和 `this.routers` 来获取对应的状态数据。`sidebar` 相关数据可能与侧边栏的整体状态（如是否打开等）有关，`routers` 则用于获取菜单相关的路由配置信息，用于构建侧边栏菜单。
...mapGetters([
'sidebar',
'routers'
]),
routes() {
// 定义一个名为 `routes` 的计算属性，原本代码中有注释掉的 `return this.$router.options.routes`，可能之前是尝试直接从路由实例的配置选项中获取路由信息。现在返回的是 `this.routers`，也就是通过 `mapGetters` 从 Vuex 中获取到的路由配置数据，这些数据会传递给 `sidebar-item` 组件用于构建侧边栏菜单，包含了各个菜单项的路径、嵌套关系、图标、标题等信息。
return this.routers;
},
isCollapse() {
// 定义一个名为 `isCollapse` 的计算属性，通过对 `this.sidebar.opened` 取反来判断侧边栏是否处于折叠状态。如果 `sidebar.opened` 为 `false`（即侧边栏未打开），那么 `isCollapse` 就为 `true`，表示侧边栏是折叠的；反之则为 `false`，表示侧边栏是展开的，该值会绑定到 `el-menu` 组件的 `:collapse` 属性上，用于控制菜单的折叠显示效果。
return!this.sidebar.opened;
}
}
}
</script>

3
layout/components/index.js
Unescape View File

@ -1,3 +0,0 @@
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'

41
layout/mixin/ResizeHandler.js
Unescape View File

@ -1,41 +0,0 @@
import store from '@/store'
const { body } = document
const WIDTH = 1024
const RATIO = 3
export default {
watch: {
$route(route) {
if (this.device === 'mobile' && this.sidebar.opened) {
store.dispatch('CloseSideBar', { withoutAnimation: false })
}
}
},
beforeMount() {
window.addEventListener('resize', this.resizeHandler)
},
mounted() {
const isMobile = this.isMobile()
if (isMobile) {
store.dispatch('ToggleDevice', 'mobile')
store.dispatch('CloseSideBar', { withoutAnimation: true })
}
},
methods: {
isMobile() {
const rect = body.getBoundingClientRect()
return rect.width - RATIO < WIDTH
},
resizeHandler() {
if (!document.hidden) {
const isMobile = this.isMobile()
store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
if (isMobile) {
store.dispatch('CloseSideBar', { withoutAnimation: true })
}
}
}
}
}

386
login/index.vue
Unescape View File

@ -1,386 +0,0 @@
<template>
<div>
<el-card class="login-form-layout">
<el-form autoComplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-position="left">
<div style="text-align: center">
<svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon>
</div>
<h2 class="login-title color-main">mall-admin-web</h2>
<el-form-item prop="username">
<el-input name="username"
type="text"
v-model="loginForm.username"
autoComplete="on"
placeholder="请输入用户名">
<span slot="prefix">
<svg-icon icon-class="user" class="color-main"></svg-icon>
</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input name="password"
:type="pwdType"
@keyup.enter.native="handleLogin"
v-model="loginForm.password"
autoComplete="on"
placeholder="请输入密码">
<span slot="prefix">
<svg-icon icon-class="password" class="color-main"></svg-icon>
</span>
<span slot="suffix" @click="showPwd">
<svg-icon icon-class="eye" class="color-main"></svg-icon>
</span>
</el-input>
</el-form-item>
<el-form-item style="margin-bottom: 60px;text-align: center">
<el-button style="width: 45%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
<el-button style="width: 45%" type="primary" @click.native.prevent="handleTry">
获取体验账号
</el-button>
</el-form-item>
</el-form>
</el-card>
<img :src="login_center_bg" class="login-center-layout">
<el-dialog
title="公众号二维码"
:visible.sync="dialogVisible"
:show-close="false"
:center="true"
width="30%">
<div style="text-align: center">
<span class="font-title-large"><span class="color-main font-extra-large">关注公众号</span>回复<span class="color-main font-extra-large">体验</span>获取体验账号</span>
<br>
<img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg" width="160" height="160" style="margin-top: 10px">
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogConfirm">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {isvalidUsername} from '@/utils/validate';
import {setSupport,getSupport,setCookie,getCookie} from '@/utils/support';
import login_center_bg from '@/assets/images/login_center_bg.png'
export default {
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户名'))
} else {
callback()
}
};
const validatePass = (rule, value, callback) => {
if (value.length < 3) {
callback(new Error('密码不能小于3位'))
} else {
callback()
}
};
return {
loginForm: {
username: '',
password: '',
},
loginRules: {
username: [{required: true, trigger: 'blur', validator: validateUsername}],
password: [{required: true, trigger: 'blur', validator: validatePass}]
},
loading: false,
pwdType: 'password',
login_center_bg,
dialogVisible:false,
supportDialogVisible:false
}
},
created() {
this.loginForm.username = getCookie("username");
this.loginForm.password = getCookie("password");
if(this.loginForm.username === undefined||this.loginForm.username==null||this.loginForm.username===''){
this.loginForm.username = 'admin';
}
if(this.loginForm.password === undefined||this.loginForm.password==null){
this.loginForm.password = '';
}
},
methods: {
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = 'password'
}
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// let isSupport = getSupport();
// if(isSupport===undefined||isSupport==null){
// this.dialogVisible =true;
// return;
// }
this.loading = true;
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false;
setCookie("username",this.loginForm.username,15);
setCookie("password",this.loginForm.password,15);
this.$router.push({path: '/'})
}).catch(() => {
this.loading = false
})
} else {
console.log('参数验证不合法！');
return false
}
})
},
handleTry(){
this.dialogVisible =true
},
dialogConfirm(){
this.dialogVisible =false;
setSupport(true);
},
dialogCancel(){
this.dialogVisible = false;
setSupport(false);
}
}
}
</script>
<style scoped>
.login-form-layout {
position: absolute;
left: 0;
right: 0;
width: 360px;
margin: 140px auto;
border-top: 10px solid #409EFF;
}
.login-title {
text-align: center;
}
.login-center-layout {
background: #409EFF;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin-top: 200px;
}
</style>
#abc
<template>
<div>
<!-- 使用 Element UI 的 `el-card` 组件创建一个卡片式的布局容器，类名为 `login-form-layout`，用于包裹登录相关的表单元素，使其在页面上呈现出特定的视觉效果和布局样式 -->
<el-card class="login-form-layout">
<!-- 使用 Element UI 的 `el-form` 表单组件，设置自动补全功能为 `on`，绑定数据模型为 `loginForm`，关联表单验证规则为 `loginRules`，设置表单引用名为 `loginForm`，标签位置为 `left`（通常指表单标签在输入框左侧显示），用于构建登录表单 -->
<el-form autoComplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-position="left">
<!-- 一个 `div` 元素，设置文本居中对齐，内部使用 `svg-icon` 组件展示一个名为 `login-mall` 的图标，用于在登录表单上方显示一个具有特定样式（宽度、高度、颜色）的图标，可能起到品牌标识等作用 -->
<div style="text-align: center">
<svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon>
</div>
<!-- 一个 `h2` 标题元素，类名为 `login-title` 和 `color-main`，用于显示页面标题“mall-admin-web”，通过 `color-main` 类可能会应用特定的主色调样式 -->
<h2 class="login-title color-main">mall-admin-web</h2>
<!-- `el-form-item` 表单元素，指定了验证属性 `prop` 为 `username`，用于包裹用户名输入框相关的内容，对应表单中用户名的输入和验证部分 -->
<el-form-item prop="username">
<!-- 使用 Element UI 的 `el-input` 输入框组件，设置 `name` 属性为 `username`，类型为 `text`，双向绑定 `loginForm.username` 数据，自动补全功能为 `on`，设置占位提示文字为“请输入用户名”，用于接收用户输入的用户名 -->
<el-input name="username"
type="text"
v-model="loginForm.username"
autoComplete="on"
placeholder="请输入用户名">
<!-- 使用 `slot` 插槽在输入框前缀位置插入一个 `svg-icon` 组件，图标类名为 `user` 且应用 `color-main` 类，用于在用户名输入框前面展示一个表示用户的图标，增强视觉提示效果 -->
<span slot="prefix">
<svg-icon icon-class="user" class="color-main"></svg-icon>
</span>
</el-input>
</el-form-item>
<!-- `el-form-item` 表单元素，指定验证属性 `prop` 为 `password`，用于包裹密码输入框相关的内容，对应表单中密码的输入和验证部分 -->
<el-form-item prop="password">
<!-- 使用 Element UI 的 `el-input` 输入框组件，设置 `name` 属性为 `password`，类型通过 `pwdType` 变量动态控制（用于实现密码显示隐藏切换功能），监听回车键按下事件（`@keyup.enter.native`）并触发 `handleLogin` 方法，双向绑定 `loginForm.password` 数据，自动补全功能为 `on`，设置占位提示文字为“请输入密码”，用于接收用户输入的密码 -->
<el-input name="password"
:type="pwdType"
@keyup.enter.native="handleLogin"
v-model="loginForm.password"
autoComplete="on"
placeholder="请输入密码">
<!-- 使用 `slot` 插槽在输入框前缀位置插入一个 `svg-icon` 组件，图标类名为 `password` 且应用 `color-main` 类，用于在密码输入框前面展示一个表示密码的图标，增强视觉提示效果 -->
<span slot="prefix">
<svg-icon icon-class="password" class="color-main"></svg-icon>
</span>
<!-- 使用 `slot` 插槽在输入框后缀位置插入一个 `svg-icon` 组件，图标类名为 `eye` 且应用 `color-main` 类，点击该图标可触发 `showPwd` 方法，用于实现密码显示隐藏的切换功能，通过点击眼睛图标来切换密码的可见性 -->
<span slot="suffix" @click="showPwd">
<svg-icon icon-class="eye" class="color-main"></svg-icon>
</span>
</el-input>
</el-form-item>
<!-- `el-form-item` 表单元素，设置了底部外边距为 `60px` 且文本居中对齐，用于放置登录和获取体验账号的按钮，作为表单底部的操作按钮区域 -->
<el-form-item style="margin-bottom: 60px;text-align: center">
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置样式宽度为 `45%`，按钮类型为 `primary`（通常表示主要的、突出显示的按钮样式），通过 `loading` 变量控制加载状态显示（如按钮显示加载动画等），点击时触发 `handleLogin` 方法（阻止默认行为，防止表单提交等默认操作），用于执行登录操作 -->
<el-button style="width: 45%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置样式宽度为 `45%`，按钮类型为 `primary`，点击时触发 `handleTry` 方法（阻止默认行为），用于执行获取体验账号的操作 -->
<el-button style="width: 45%" type="primary" @click.native.prevent="handleTry">
获取体验账号
</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 使用 `img` 图片元素，通过 `:src` 绑定 `login_center_bg` 变量（在 `data` 中定义，应该是图片资源路径），类名为 `login-center-layout`，用于展示登录页面中心位置的背景图片，根据样式设置其布局和显示效果 -->
<img :src="login_center_bg" class="login-center-layout">
<!-- 使用 Element UI 的 `el-dialog` 对话框组件，设置标题为“公众号二维码”，通过双向绑定控制对话框的显示隐藏状态（`:visible.sync`），设置不显示关闭按钮（`:show-close="false"`），使其居中显示（`:center="true"`），宽度为 `30%`，用于弹出展示公众号二维码相关信息的对话框 -->
<el-dialog
title="公众号二维码"
:visible.sync="dialogVisible"
:show-close="false"
:center="true"
width="30%">
<!-- 一个 `div` 元素，设置文本居中对齐，内部包含文本和图片元素，用于在对话框中展示引导用户关注公众号获取体验账号的相关提示信息以及公众号二维码图片 -->
<div style="text-align: center">
<span class="font-title-large"><span class="color-main font-extra-large">关注公众号</span>回复<span class="color-main font-extra-large">体验</span>获取体验账号</span>
<br>
<!-- 使用 `img` 图片元素，设置图片源地址、宽度、高度以及顶部外边距，用于展示公众号二维码图片 -->
<img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg" width="160" height="160" style="margin-top: 10px">
</div>
<span slot="footer" class="dialog-footer">
<!-- 使用 Element UI 的 `el-button` 按钮组件，按钮类型为 `primary`，点击时触发 `dialogConfirm` 方法，用于在对话框中执行确定操作 -->
<el-button type="primary" @click="dialogConfirm">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// 从 `@/utils/validate` 模块中导入 `isvalidUsername` 函数，该函数应该是用于验证用户名是否合法的工具函数，根据特定规则判断输入的用户名是否符合要求
import {isvalidUsername} from '@/utils/validate';
// 从 `@/utils/support` 模块中导入多个函数，`setSupport` 和 `getSupport` 函数可能用于设置和获取某种支持状态相关的数据（可能与功能启用等相关），`setCookie` 和 `getCookie` 函数则用于设置和获取浏览器的 `Cookie` 值，用于存储和读取用户相关信息等操作
import {setSupport,getSupport,setCookie,getCookie} from '@/utils/support';
// 导入名为 `login_center_bg` 的图片资源，该资源路径是从 `@/assets/images/login_center_bg.png` 引入的，会在模板中用于显示登录页面的背景图片
import login_center_bg from '@/assets/images/login_center_bg.png'
export default {
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
// 自定义用户名验证函数，接收验证规则、输入的值以及回调函数。如果通过 `isvalidUsername` 函数验证用户名不合法，则调用回调函数并传入一个 `Error` 对象，提示“请输入正确的用户名”；如果验证通过，则直接调用回调函数，表示验证成功
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户名'))
} else {
callback()
}
};
const validatePass = (rule, value, callback) => {
// 自定义密码验证函数，接收验证规则、输入的值以及回调函数。如果输入的密码长度小于 `3` 位，则调用回调函数并传入一个 `Error` 对象，提示“密码不能小于3位”；如果密码长度符合要求，则调用回调函数表示验证成功
if (value.length < 3) {
callback(new Error('密码不能小于3位'))
} else {
callback()
}
};
return {
// 用于存储登录表单的数据对象，包含 `username`（用户名）和 `password`（密码）两个属性，初始值为空字符串，后续会根据用户输入和从 `Cookie` 中获取的值进行更新
loginForm: {
username: '',
password: '',
},
// 定义登录表单的验证规则对象，`username` 属性对应一个数组，包含一个验证规则对象，要求该字段必填（`required: true`），触发验证的时机是输入框失去焦点（`trigger: 'blur'`），验证函数使用前面定义的 `validateUsername` 函数；`password` 属性同样对应一个数组，包含一个验证规则对象，要求必填，触发验证时机为失去焦点，验证函数使用 `validatePass` 函数
loginRules: {
username: [{required: true, trigger: 'blur', validator: validateUsername}],
password: [{required: true, trigger: 'blur', validator: validatePass}]
},
// 用于控制登录按钮加载状态的布尔变量，初始值为 `false`，当点击登录按钮发起登录请求时会设置为 `true`，请求完成后再根据结果设置回 `false`，用于在按钮上显示加载动画等提示用户操作正在进行中
loading: false,
// 用于控制密码输入框类型的变量，初始值为 `password`，通过 `showPwd` 方法可以切换其值，实现密码显示隐藏功能，当值为 `password` 时密码以密文形式显示，为空字符串时则以明文形式显示
pwdType: 'password',
// 存储登录页面中心背景图片资源的变量，从导入的图片资源赋值而来，用于在模板中正确显示背景图片
login_center_bg,
// 通过双向绑定控制公众号二维码对话框显示隐藏状态的布尔变量，初始值为 `false`，表示对话框默认不显示，会在相关操作（如点击获取体验账号按钮）时根据逻辑设置为 `true` 来显示对话框
dialogVisible:false,
// 另一个控制对话框显示隐藏状态的变量（从代码上下文看可能未完全使用到，也许后续有相关功能扩展），初始值为 `false`，用于其他类似对话框（可能与支持相关，具体看后续功能）的显示隐藏控制
supportDialogVisible:false
}
},
created() {
// 在组件创建时，尝试从浏览器 `Cookie` 中获取用户名和密码信息，并分别赋值给 `loginForm.username` 和 `loginForm.password`。如果获取到的用户名不存在、为 `null` 或者为空字符串，则将用户名默认设置为 `admin`；如果获取到的密码不存在或为 `null`，则将密码设置为空字符串，这样可以实现记住用户上次登录信息的功能（如果有设置 `Cookie` 的话）
this.loginForm.username = getCookie("username");
this.loginForm.password = getCookie("password");
if(this.loginForm.username === undefined||this.loginForm.username==null||this.loginForm.username===''){
this.loginForm.username = 'admin';
}
if(this.loginForm.password === undefined||this.loginForm.password==null){
this.loginForm.password = '';
}
},
methods: {
showPwd() {
// 用于切换密码显示隐藏的方法，当 `pwdType` 当前值为 `password` 时，将其设置为空字符串，使密码以明文显示；反之，将 `pwdType` 设置回 `password`，让密码以密文显示
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = 'password'
}
},
handleLogin() {
// 处理登录操作的方法，首先通过调用表单引用（`$refs.loginForm`）的 `validate` 方法对登录表单进行验证，如果验证通过（`valid` 为 `true`），则进行以下操作：
// （代码中部分逻辑被注释掉了，原逻辑可能是先获取某种支持状态，如果未获取到则显示对话框提示用户，此处假设后续完善相关功能）
// 先将 `loading` 设置为 `true`，表示登录操作正在进行，触发加载动画等提示；然后通过 `$store.dispatch` 方法触发名为 `Login` 的 Vuex 异步操作（可能是向后端发送登录请求等相关逻辑），登录成功后，将 `loading` 设置回 `false`，并使用 `setCookie` 函数分别将当前输入的用户名和密码保存到 `Cookie` 中（有效期可能为 `15` 天，具体看 `setCookie` 函数实现），最后通过 `$router.push` 方法进行路由跳转，跳转到根路径（`/`），实现登录成功后进入系统首页等功能；如果验证不通过（`valid` 为 `false`），则在控制台输出“参数验证不合法！”的提示信息，并返回 `false`，阻止后续操作
this.$refs.loginForm.validate(valid => {
if (valid) {
// let isSupport = getSupport();
// if(isSupport===undefined||isSupport==null){
// this.dialogVisible =true;
// return;
// }
this.loading = true;
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false;
setCookie("username",this.loginForm.username,15);
setCookie("password",this.loginForm.password,15);
this.$router.push({path: '/'})
}).catch(() => {
this.loading = false
})
} else {
console.log('参数验证不合法！');
return false
}
})
},
handleTry() {
// 处理获取体验账号的方法，当点击“获取体验账号”按钮时，将 `dialogVisible` 设置为 `true`
this.dialogVisible =true
},
dialogConfirm() {
// 处理对话框中“确定”按钮点击的方法，将 `dialogVisible` 设置为 `false`，隐藏对话框，同时调用 `setSupport` 函数设置某种支持状态为 `true`（具体支持的含义需看 `setSupport` 函数实现，可能与功能启用等相关）
this.dialogVisible =false;
setSupport(true);
},
dialogCancel() {
// 处理对话框中“取消”按钮点击的方法（代码中未看到实际调用该方法的地方，也许后续功能扩展会用到），将 `dialogVisible` 设置为 `false`，隐藏对话框，同时调用 `setSupport` 函数设置某种支持状态为 `false`
this.dialogVisible = false;
setSupport(false);
}
}
}
</script>
<style scoped>
// 定义类名为 `login-form-layout` 的样式规则，设置元素的定位为 `absolute`（绝对定位），使其可以相对于最近的已定位祖先元素进行定位（在没有祖先元素定位的情况下相对于 `body` 定位），左右边距设置为 `0`，宽度为 `360px`，上下外边距设置为 `140px` 且水平居中（通过 `auto` 实现

34
pms/brand/add.vue
Unescape View File

@ -1,34 +0,0 @@
<template> 
<brand-detail :is-edit='false'></brand-detail>
</template>
<script>
import BrandDetail from './components/BrandDetail'
export default {
name: 'addBrand',
components: { BrandDetail }
}
</script>
<style>
</style>
#abc
<template>
<!-- 使用BrandDetail组件，并传递一个名为is-edit的属性，值设置为false，用于表示当前处于非编辑状态 -->
<brand-detail :is-edit='false'></brand-detail>
</template>
<script>
// 导入BrandDetail组件，它应该是定义在./components/BrandDetail路径下的一个Vue组件
import BrandDetail from './components/BrandDetail'
export default {
name: 'addBrand',
// 在组件的配置对象中，注册BrandDetail组件，使其可以在当前组件的模板中使用
components: { BrandDetail }
}
</script>
<style>
/* 这里可以添加针对当前组件的样式规则，目前为空 */
</style>

145
pms/brand/components/BrandDetail.vue
Unescape View File

@ -1,145 +0,0 @@
<template> 
<el-card class="form-container" shadow="never">
<el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px">
<el-form-item label="品牌名称：" prop="name">
<el-input v-model="brand.name"></el-input>
</el-form-item>
<el-form-item label="品牌首字母：">
<el-input v-model="brand.firstLetter"></el-input>
</el-form-item>
<el-form-item label="品牌LOGO：" prop="logo">
<single-upload v-model="brand.logo"></single-upload>
</el-form-item>
<el-form-item label="品牌专区大图：">
<single-upload v-model="brand.bigPic"></single-upload>
</el-form-item>
<el-form-item label="品牌故事：">
<el-input
placeholder="请输入内容"
type="textarea"
v-model="brand.brandStory"
:autosize="true"></el-input>
</el-form-item>
<el-form-item label="排序：" prop="sort">
<el-input v-model.number="brand.sort"></el-input>
</el-form-item>
<el-form-item label="是否显示：">
<el-radio-group v-model="brand.showStatus">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="品牌制造商：">
<el-radio-group v-model="brand.factoryStatus">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button>
<el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
import {createBrand, getBrand, updateBrand} from '@/api/brand'
import SingleUpload from '@/components/Upload/singleUpload'
const defaultBrand={
bigPic: '',
brandStory: '',
factoryStatus: 0,
firstLetter: '',
logo: '',
name: '',
showStatus: 0,
sort: 0
};
export default {
name: 'BrandDetail',
components:{SingleUpload},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
brand:Object.assign({}, defaultBrand),
rules: {
name: [
{required: true, message: '请输入品牌名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
logo: [
{required: true, message: '请输入品牌logo', trigger: 'blur'}
],
sort: [
{type: 'number', message: '排序必须为数字'}
],
}
}
},
created() {
if (this.isEdit) {
getBrand(this.$route.query.id).then(response => {
this.brand = response.data;
});
}else{
this.brand = Object.assign({},defaultBrand);
}
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateBrand(this.$route.query.id, this.brand).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration:1000
});
this.$router.back();
});
} else {
createBrand(this.brand).then(response => {
this.$refs[formName].resetFields();
this.brand = Object.assign({},defaultBrand);
this.$message({
message: '提交成功',
type: 'success',
duration:1000
});
});
}
});
} else {
this.$message({
message: '验证失败',
type: 'error',
duration:1000
});
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.brand = Object.assign({},defaultBrand);
}
}
}
</script>
<style>
</style>

674
pms/brand/index.vue
Unescape View File

@ -1,674 +0,0 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float: right"
@click="searchBrandList()"
type="primary"
size="small">
查询结果
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="输入搜索：">
<el-input style="width: 203px" v-model="listQuery.keyword" placeholder="品牌名称/关键字"></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button
class="btn-add"
@click="addBrand()"
size="mini">
添加
</el-button>
</el-card>
<div class="table-container">
<el-table ref="brandTable"
:data="list"
style="width: 100%"
@selection-change="handleSelectionChange"
v-loading="listLoading"
border>
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="品牌名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="品牌首字母" width="100" align="center">
<template slot-scope="scope">{{scope.row.firstLetter}}</template>
</el-table-column>
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<el-table-column label="品牌制造商" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleFactoryStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.factoryStatus">
</el-switch>
</template>
</el-table-column>
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleShowStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.showStatus">
</el-switch>
</template>
</el-table-column>
<el-table-column label="相关" width="220" align="center">
<template slot-scope="scope">
<span>商品：</span>
<el-button
size="mini"
type="text"
@click="getProductList(scope.$index, scope.row)">100
</el-button>
<span>评价：</span>
<el-button
size="mini"
type="text"
@click="getProductCommentList(scope.$index, scope.row)">1000
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {fetchList, updateShowStatus, updateFactoryStatus, deleteBrand} from '@/api/brand'
export default {
name: 'brandList',
data() {
return {
operates: [
{
label: "显示品牌",
value: "showBrand"
},
{
label: "隐藏品牌",
value: "hideBrand"
}
],
operateType: null,
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 10
},
list: null,
total: null,
listLoading: true,
multipleSelection: []
}
},
created() {
this.getList();
},
methods: {
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
this.totalPage = response.data.totalPage;
this.pageSize = response.data.pageSize;
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleUpdate(index, row) {
this.$router.push({path: '/pms/updateBrand', query: {id: row.id}})
},
handleDelete(index, row) {
this.$confirm('是否要删除该品牌', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteBrand(row.id).then(response => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
this.getList();
});
});
},
getProductList(index, row) {
console.log(index, row);
},
getProductCommentList(index, row) {
console.log(index, row);
},
handleFactoryStatusChange(index, row) {
var data = new URLSearchParams();
data.append("ids", row.id);
data.append("factoryStatus", row.factoryStatus);
updateFactoryStatus(data).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}).catch(error => {
if (row.factoryStatus === 0) {
row.factoryStatus = 1;
} else {
row.factoryStatus = 0;
}
});
},
handleShowStatusChange(index, row) {
let data = new URLSearchParams();
;
data.append("ids", row.id);
data.append("showStatus", row.showStatus);
updateShowStatus(data).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}).catch(error => {
if (row.showStatus === 0) {
row.showStatus = 1;
} else {
row.showStatus = 0;
}
});
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
searchBrandList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleBatchOperate() {
console.log(this.multipleSelection);
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let showStatus = 0;
if (this.operateType === 'showBrand') {
showStatus = 1;
} else if (this.operateType === 'hideBrand') {
showStatus = 0;
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
let data = new URLSearchParams();
data.append("ids", ids);
data.append("showStatus", showStatus);
updateShowStatus(data).then(response => {
this.getList();
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
addBrand() {
this.$router.push({path: '/pms/addBrand'})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
#abc
<template>
<!-- 整个页面的最外层容器，用于布局和包裹内部的各个组件与元素 -->
<div class="app-container">
<!-- 筛选搜索区域的卡片组件，设置阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用Element UI的图标组件，展示搜索图标 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索的文字说明 -->
<span>筛选搜索</span>
<!-- Element UI的按钮组件，点击时触发searchBrandList方法，样式设置为靠右，类型为主要按钮，尺寸为小 -->
<el-button
style="float: right"
@click="searchBrandList()"
type="primary"
size="small">
查询结果
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 内联表单组件，绑定数据模型为listQuery，尺寸为小，标签宽度为140px -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单项，标签显示为“输入搜索：” -->
<el-form-item label="输入搜索：">
<!-- 输入框组件，绑定数据模型为listQuery的keyword属性，宽度为203px，有占位提示文字 -->
<el-input style="width: 203px" v-model="listQuery.keyword" placeholder="品牌名称/关键字"></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片组件，设置阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 使用Element UI的图标组件，展示票务图标（此处可能表意不太准确，需根据实际情况确认合适图标含义） -->
<i class="el-icon-tickets"></i>
<!-- 显示数据列表的文字说明 -->
<span>数据列表</span>
<!-- Element UI的按钮组件，点击时触发addBrand方法，尺寸为迷你 -->
<el-button
class="btn-add"
@click="addBrand()"
size="mini">
添加
</el-button>
</el-card>
<!-- 表格容器，用于放置展示数据的表格 -->
<div class="table-container">
<!-- Element UI的表格组件，绑定数据为list，宽度为100%，监听选择行变化事件、加载状态变化，设置边框 -->
<el-table ref="brandTable"
:data="list"
style="width: 100%"
@selection-change="handleSelectionChange"
v-loading="listLoading"
border>
<!-- 表格列，类型为选择框，宽度为60px，内容居中对齐 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 表格列，标签显示为“编号”，宽度为100px，内容居中对齐，通过插槽作用域展示对应行的数据中的id属性 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列，标签显示为“品牌名称”，内容居中对齐，通过插槽作用域展示对应行的数据中的name属性 -->
<el-table-column label="品牌名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列，标签显示为“品牌首字母”，宽度为100px，内容居中对齐，通过插槽作用域展示对应行的数据中的firstLetter属性 -->
<el-table-column label="品牌首字母" width="100" align="center">
<template slot-scope="scope">{{scope.row.firstLetter}}</template>
</el-table-column>
<!-- 表格列，标签显示为“排序”，宽度为100px，内容居中对齐，通过插槽作用域展示对应行的数据中的sort属性 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 表格列，标签显示为“品牌制造商”，宽度为100px，内容居中对齐，内部包含一个开关组件，用于切换工厂状态，绑定对应行的数据中的factoryStatus属性，并监听状态改变事件 -->
<el-table-column label="品牌制造商" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleFactoryStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.factoryStatus">
</el-switch>
</template>
</el-table-column>
<!-- 表格列，标签显示为“是否显示”，宽度为100px，内容居中对齐，内部包含一个开关组件，用于切换显示状态，绑定对应行的数据中的showStatus属性，并监听状态改变事件 -->
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleShowStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.showStatus">
</el-switch>
</template>
</el-table-column>
<!-- 表格列，标签显示为“相关”，宽度为220px，内容居中对齐，内部包含查看商品、评价相关的按钮，点击可触发对应的方法并传递对应行数据 -->
<el-table-column label="相关" width="220" align="center">
<template slot-scope="scope">
<span>商品：</span>
<el-button
size="mini"
type="text"
@click="getProductList(scope.$index, scope.row)">100
</el-button>
<span>评价：</span>
<el-button
size="mini"
type="text"
@click="getProductCommentList(scope.$index, scope.row)">1000
</el-button>
</template>
</el-table-column>
<!-- 表格列，标签显示为“操作”，宽度为200px，内容居中对齐，内部包含编辑、删除按钮，点击可触发对应的操作方法并传递对应行数据 -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 批量操作区域的容器 -->
<div class="batch-operate-container">
<!-- 下拉选择框组件，绑定数据模型为operateType，有占位提示文字 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 通过循环生成下拉选项，每个选项的标签和值根据operates数组中的元素来确定 -->
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- Element UI的按钮组件，点击时触发handleBatchOperate方法，样式设置有一定间隔，类型为主要按钮，尺寸为小 -->
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- 分页容器，用于放置分页组件 -->
<div class="pagination-container">
<!-- Element UI的分页组件，设置背景色，监听页面尺寸和当前页变化事件，布局包含多种分页相关元素，绑定相关数据属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 从 @/api/brand模块中导入多个函数，用于获取品牌列表、更新显示状态、更新工厂状态、删除品牌等操作
import {fetchList, updateShowStatus, updateFactoryStatus, deleteBrand} from '@/api/brand'
export default {
name: 'brandList',
data() {
return {
// 定义批量操作的选项数组，每个选项包含标签和对应的值，用于下拉选择批量操作类型
operates: [
{
label: "显示品牌",
value: "showBrand"
},
{
label: "隐藏品牌",
value: "hideBrand"
}
],
// 绑定下拉选择框选中的值，初始为null，用于记录选择的批量操作类型
operateType: null,
// 用于存储列表查询相关的参数，如搜索关键字、当前页码、每页数量等
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 10
},
// 存储获取到的品牌列表数据，初始为null
list: null,
// 存储品牌数据的总条数，初始为null
total: null,
// 用于控制表格加载状态的布尔值，初始为true表示正在加载
listLoading: true,
// 存储表格中多选的行数据，初始为空数组
multipleSelection: []
}
},
created() {
// 在组件创建时调用getList方法，用于获取品牌列表数据
this.getList();
},
methods: {
getList() {
// 将列表加载状态设置为true，表示开始加载数据
this.listLoading = true;
// 调用fetchList函数，传入列表查询参数，获取品牌列表数据，成功后处理返回结果并更新相关数据和状态
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
this.totalPage = response.data.totalPage;
this.pageSize = response.data.pageSize;
});
},
handleSelectionChange(val) {
// 当表格中选择行发生变化时，更新multipleSelection数组，保存当前选中的行数据
this.multipleSelection = val;
},
handleUpdate(index, row) {
// 点击编辑按钮时，通过路由跳转到更新品牌的页面，并传递要编辑的品牌的id作为查询参数
this.$router.push({path: '/pms/updateBrand', query: {id: row.id}})
},
handleDelete(index, row) {
// 点击删除按钮时，弹出确认框，询问是否要删除该品牌，确认后调用deleteBrand函数删除品牌数据，成功后显示提示信息并重新获取品牌列表
this.$confirm('是否要删除该品牌', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteBrand(row.id).then(response => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
this.getList();
});
});
},
getProductList(index, row) {
// 点击查看商品相关按钮时，目前只是在控制台打印对应行的索引和数据，可根据实际需求完善具体功能
console.log(index, row);
},
getProductCommentList(index, row) {
// 点击查看评价相关按钮时，目前只是在控制台打印对应行的索引和数据，可根据实际需求完善具体功能
console.log(index, row);
},
handleFactoryStatusChange(index, row) {
// 创建一个URLSearchParams对象，用于构造请求参数，添加要修改的品牌的id和新的工厂状态值，然后调用updateFactoryStatus函数更新工厂状态，成功后显示提示信息，失败时进行状态回滚
var data = new URLSearchParams();
data.append("ids", row.id);
data.append("factoryStatus", row.factoryStatus);
updateFactoryStatus(data).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}).catch(error => {
if (row.factoryStatus === 0) {
row.factoryStatus = 1;
} else {
row.factoryStatus = 0;
}
});
},
handleShowStatusChange(index, row) {
// 创建一个URLSearchParams对象，用于构造请求参数，添加要修改的品牌的id和新的显示状态值，然后调用updateShowStatus函数更新显示状态，成功后显示提示信息，失败时进行状态回滚
let data = new URLSearchParams();
data.append("ids", row.id);
data.append("showStatus", row.showStatus);
updateShowStatus(data).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}).catch(error => {
if (row.showStatus === 0) {
row.showStatus = 1;
} else {
row.showStatus = 0;
}
});
},
handleSizeChange(val) {
// 当分页组件的页面尺寸发生变化时，重置当前页码为1，并更新列表查询参数中的每页数量，然后重新获取品牌列表数据
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
// 当分页组件的当前页码发生变化时，更新列表查询参数中的当前页码，然后重新获取品牌列表数据
this.listQuery.pageNum = val;
this.getList();
},
searchBrandList() {
// 点击查询结果按钮时，重置当前页码为1，然后重新获取品牌列表数据
this.listQuery.pageNum = 1;
this.getList();
},
handleBatchOperate() {
console.log(this.multipleSelection);
// 如果没有选择任何记录，弹出提示信息，要求选择一条记录后再进行批量操作
if (this.multipleSelection.length < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let showStatus = 0;
// 根据选择的批量操作类型（显示品牌或隐藏品牌）设置对应的显示状态值
if (this.operateType === 'showBrand') {
showStatus = 1;
} else if (this.operateType === 'hideBrand') {
showStatus = 0;
} else {
// 如果没有选择有效的批量操作类型，弹出提示信息，要求选择操作类型
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
// 遍历多选的行数据，提取出每个选中品牌的id，存入ids数组
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
let data = new URLSearchParams();
data.append("ids", ids);
data.append("showStatus", showStatus);
// 调用updateShowStatus函数进行批量更新显示状态操作，成功后重新获取品牌列表数据并显示提示信息
updateShowStatus(data).then(response => {
this.getList();
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
addBrand() {
// 点击添加按钮时，通过路由跳转到添加品牌的页面
this.$router.push({path: '/pms/addBrand'})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 这里是当前组件的样式部分，目前为空，可按照设计需求添加具体的样式规则，
scoped属性表示样式只作用于当前组件内部的元素，避免样式污染其他组件 */
</

37
pms/brand/update.vue
Unescape View File

@ -1,37 +0,0 @@
<template> 
<brand-detail :is-edit='true'></brand-detail>
</template>
<script>
import BrandDetail from './components/BrandDetail'
export default {
name: 'updateBrand',
components: { BrandDetail }
}
</script>
<style>
</style>
#abc
<template>
<!-- 使用BrandDetail组件，并传递一个名为is-edit的属性，值设置为true，意味着当前处于编辑状态，
可能用于控制BrandDetail组件内部呈现出可编辑的界面等相关功能 -->
<brand-detail :is-edit='true'></brand-detail>
</template>
<script>
// 从'./components/BrandDetail'路径导入BrandDetail组件，这个组件应该是在对应路径下定义好的Vue组件，
// 后续会在当前组件中使用它来构建页面的一部分内容
import BrandDetail from './components/BrandDetail'
export default {
name: 'updateBrand',
// 在当前组件的配置对象中，注册BrandDetail组件，使得它能够在模板（template）部分被正确识别和使用，
// 这样就可以像在模板中那样通过标签形式调用该组件了
components: { BrandDetail }
}
</script>
<style>
/* 此处是用于定义当前组件样式的区域，目前为空，可根据设计需求在此添加各种CSS样式规则，
比如对组件内元素的布局、颜色、字体等样式相关的设置 */
</style>

30
pms/product/add.vue
Unescape View File

@ -1,30 +0,0 @@
<template> 
<product-detail :is-edit='false'></product-detail>
</template>
<script>
import ProductDetail from './components/ProductDetail'
export default {
name: 'addProduct',
components: { ProductDetail }
}
</script>
<style>
</style>
#abc
<template>
<!-- 这里使用了名为 `product-detail` 的自定义组件，通过 `:is-edit='false'` 属性绑定，向 `product-detail` 组件传递了一个名为 `is-edit` 的属性，值为 `false`，意味着当前是新增商品的操作模式（而非编辑商品模式），`product-detail` 组件应该会根据这个属性来展示相应的界面和执行对应的逻辑 -->
<product-detail :is-edit='false'></product-detail>
</template>
<script>
// 从相对路径 `./components/` 下导入名为 `ProductDetail` 的组件，这个组件应该是已经定义好的，包含了商品详情相关的功能逻辑、界面展示等内容，比如商品信息填写、促销设置、属性配置以及关联设置等一系列与商品相关的操作界面和处理逻辑
import ProductDetail from './components/ProductDetail';
export default {
name: 'addProduct',
// 在组件的 `components` 属性中注册了 `ProductDetail` 组件，使得在当前组件（`addProduct`）的模板中可以直接使用 `<product-detail>` 标签来调用该组件，这是 Vue.js 中组件复用的一种常见方式
components: { ProductDetail }
}
</script>
<style>
/* 这里的样式部分目前为空，可根据 `addProduct` 组件整体的视觉设计需求，添加相应的 CSS 样式规则，比如设置组件的布局、大小、颜色等样式属性，使其在页面中呈现出符合预期的外观效果 */
</style>

952
pms/product/components/ProductAttrDetail.vue
Unescape View File

@ -1,952 +0,0 @@
<template>
<div style="margin-top: 50px">
<el-form :model="value" ref="productAttrForm" label-width="120px" class="form-inner-container" size="small">
<el-form-item label="属性类型：">
<el-select v-model="value.productAttributeCategoryId"
placeholder="请选择属性类型"
@change="handleProductAttrChange">
<el-option
v-for="item in productAttributeCategoryOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品规格：">
<el-card shadow="never" class="cardBg">
<div v-for="(productAttr,idx) in selectProductAttr">
{{productAttr.name}}：
<el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
<el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
class="littleMarginLeft"></el-checkbox>
</el-checkbox-group>
<div v-else>
<el-checkbox-group v-model="selectProductAttr[idx].values">
<div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
class="littleMarginLeft">
<el-checkbox :label="item" :key="item"></el-checkbox>
<el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
</el-button>
</div>
</el-checkbox-group>
<el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
<el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
</div>
</div>
</el-card>
<el-table style="width: 100%;margin-top: 20px"
:data="value.skuStockList"
border>
<el-table-column
v-for="(item,index) in selectProductAttr"
:label="item.name"
:key="item.id"
align="center">
<template slot-scope="scope">
{{getProductSkuSp(scope.row,index)}}
</template>
</el-table-column>
<el-table-column
label="销售价格"
width="100"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.price"></el-input>
</template>
</el-table-column>
<el-table-column
label="促销价格"
width="100"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.promotionPrice"></el-input>
</template>
</el-table-column>
<el-table-column
label="商品库存"
width="80"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.stock"></el-input>
</template>
</el-table-column>
<el-table-column
label="库存预警值"
width="80"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.lowStock"></el-input>
</template>
</el-table-column>
<el-table-column
label="SKU编号"
width="160"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.skuCode"></el-input>
</template>
</el-table-column>
<el-table-column
label="操作"
width="80"
align="center">
<template slot-scope="scope">
<el-button
type="text"
@click="handleRemoveProductSku(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button
type="primary"
style="margin-top: 20px"
@click="handleRefreshProductSkuList">刷新列表
</el-button>
<el-button
type="primary"
style="margin-top: 20px"
@click="handleSyncProductSkuPrice">同步价格
</el-button>
<el-button
type="primary"
style="margin-top: 20px"
@click="handleSyncProductSkuStock">同步库存
</el-button>
</el-form-item>
<el-form-item label="属性图片：" v-if="hasAttrPic">
<el-card shadow="never" class="cardBg">
<div v-for="(item,index) in selectProductAttrPics">
<span>{{item.name}}:</span>
<single-upload v-model="item.pic"
style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
</div>
</el-card>
</el-form-item>
<el-form-item label="商品参数：">
<el-card shadow="never" class="cardBg">
<div v-for="(item,index) in selectProductParam" :class="{littleMarginTop:index!==0}">
<div class="paramInputLabel">{{item.name}}:</div>
<el-select v-if="item.inputType===1" class="paramInput" v-model="selectProductParam[index].value">
<el-option
v-for="item in getParamInputList(item.inputList)"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<el-input v-else class="paramInput" v-model="selectProductParam[index].value"></el-input>
</div>
</el-card>
</el-form-item>
<el-form-item label="商品相册：">
<multi-upload v-model="selectProductPics"></multi-upload>
</el-form-item>
<el-form-item label="商品详情：">
<el-tabs v-model="activeHtmlName" type="card">
<el-tab-pane label="电脑端详情" name="pc">
<tinymce :width="595" :height="300" v-model="value.detailHtml"></tinymce>
</el-tab-pane>
<el-tab-pane label="移动端详情" name="mobile">
<tinymce :width="595" :height="300" v-model="value.detailMobileHtml"></tinymce>
</el-tab-pane>
</el-tabs>
</el-form-item>
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品促销</el-button>
<el-button type="primary" size="medium" @click="handleNext">下一步，选择商品关联</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {fetchList as fetchProductAttrCateList} from '@/api/productAttrCate'
import {fetchList as fetchProductAttrList} from '@/api/productAttr'
import SingleUpload from '@/components/Upload/singleUpload'
import MultiUpload from '@/components/Upload/multiUpload'
import Tinymce from '@/components/Tinymce'
export default {
name: "ProductAttrDetail",
components: {SingleUpload, MultiUpload, Tinymce},
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
//编辑模式时是否初始化成功
hasEditCreated:false,
//商品属性分类下拉选项
productAttributeCategoryOptions: [],
//选中的商品属性
selectProductAttr: [],
//选中的商品参数
selectProductParam: [],
//选中的商品属性图片
selectProductAttrPics: [],
//可手动添加的商品属性
addProductAttrValue: '',
//商品富文本详情激活类型
activeHtmlName: 'pc'
}
},
computed: {
//是否有商品属性图片
hasAttrPic() {
if (this.selectProductAttrPics.length < 1) {
return false;
}
return true;
},
//商品的编号
productId(){
return this.value.id;
},
//商品的主图和画册图片
selectProductPics:{
get:function () {
let pics=[];
if(this.value.pic===undefined||this.value.pic==null||this.value.pic===''){
return pics;
}
pics.push(this.value.pic);
if(this.value.albumPics===undefined||this.value.albumPics==null||this.value.albumPics===''){
return pics;
}
let albumPics = this.value.albumPics.split(',');
for(let i=0;i<albumPics.length;i++){
pics.push(albumPics[i]);
}
return pics;
},
set:function (newValue) {
if (newValue == null || newValue.length === 0) {
this.value.pic = null;
this.value.albumPics = null;
} else {
this.value.pic = newValue[0];
this.value.albumPics = '';
if (newValue.length > 1) {
for (let i = 1; i < newValue.length; i++) {
this.value.albumPics += newValue[i];
if (i !== newValue.length - 1) {
this.value.albumPics += ',';
}
}
}
}
}
}
},
created() {
this.getProductAttrCateList();
},
watch: {
productId:function (newValue) {
if(!this.isEdit)return;
if(this.hasEditCreated)return;
if(newValue===undefined||newValue==null||newValue===0)return;
this.handleEditCreated();
}
},
methods: {
handleEditCreated() {
//根据商品属性分类id获取属性和参数
if(this.value.productAttributeCategoryId!=null){
this.handleProductAttrChange(this.value.productAttributeCategoryId);
}
this.hasEditCreated=true;
},
getProductAttrCateList() {
let param = {pageNum: 1, pageSize: 100};
fetchProductAttrCateList(param).then(response => {
this.productAttributeCategoryOptions = [];
let list = response.data.list;
for (let i = 0; i < list.length; i++) {
this.productAttributeCategoryOptions.push({label: list[i].name, value: list[i].id});
}
});
},
getProductAttrList(type, cid) {
let param = {pageNum: 1, pageSize: 100, type: type};
fetchProductAttrList(cid, param).then(response => {
let list = response.data.list;
if (type === 0) {
this.selectProductAttr = [];
for (let i = 0; i < list.length; i++) {
let options = [];
let values = [];
if (this.isEdit) {
if (list[i].handAddStatus === 1) {
//编辑状态下获取手动添加编辑属性
options = this.getEditAttrOptions(list[i].id);
}
//编辑状态下获取选中属性
values = this.getEditAttrValues(i);
}
this.selectProductAttr.push({
id: list[i].id,
name: list[i].name,
handAddStatus: list[i].handAddStatus,
inputList: list[i].inputList,
values: values,
options: options
});
}
if(this.isEdit){
//编辑模式下刷新商品属性图片
this.refreshProductAttrPics();
}
} else {
this.selectProductParam = [];
for (let i = 0; i < list.length; i++) {
let value=null;
if(this.isEdit){
//编辑模式下获取参数属性
value= this.getEditParamValue(list[i].id);
}
this.selectProductParam.push({
id: list[i].id,
name: list[i].name,
value: value,
inputType: list[i].inputType,
inputList: list[i].inputList
});
}
}
});
},
//获取设置的可手动添加属性值
getEditAttrOptions(id) {
let options = [];
for (let i = 0; i < this.value.productAttributeValueList.length; i++) {
let attrValue = this.value.productAttributeValueList[i];
if (attrValue.productAttributeId === id) {
let strArr = attrValue.value.split(',');
for (let j = 0; j < strArr.length; j++) {
options.push(strArr[j]);
}
break;
}
}
return options;
},
//获取选中的属性值
getEditAttrValues(index) {
let values = new Set();
if (index === 0) {
for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku = this.value.skuStockList[i];
let spData = JSON.parse(sku.spData);
if (spData!= null && spData.length>=1) {
values.add(spData[0].value);
}
}
} else if (index === 1) {
for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku = this.value.skuStockList[i];
let spData = JSON.parse(sku.spData);
if (spData!= null && spData.length>=2) {
values.add(spData[1].value);
}
}
} else {
for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku = this.value.skuStockList[i];
let spData = JSON.parse(sku.spData);
if (spData!= null && spData.length>=3) {
values.add(spData[2].value);
}
}
}
return Array.from(values);
},
//获取属性的值
getEditParamValue(id){
for(let i=0;i<this.value.productAttributeValueList.length;i++){
if(id===this.value.productAttributeValueList[i].productAttributeId){
return this.value.productAttributeValueList[i].value;
}
}
},
handleProductAttrChange(value) {
this.getProductAttrList(0, value);
this.getProductAttrList(1, value);
},
getInputListArr(inputList) {
return inputList.split(',');
},
handleAddProductAttrValue(idx) {
let options = this.selectProductAttr[idx].options;
if (this.addProductAttrValue == null || this.addProductAttrValue == '') {
this.$message({
message: '属性值不能为空',
type: 'warning',
duration: 1000
});
return
}
if (options.indexOf(this.addProductAttrValue) !== -1) {
this.$message({
message: '属性值不能重复',
type: 'warning',
duration: 1000
});
return;
}
this.selectProductAttr[idx].options.push(this.addProductAttrValue);
this.addProductAttrValue = null;
},
handleRemoveProductAttrValue(idx, index) {
this.selectProductAttr[idx].options.splice(index, 1);
},
getProductSkuSp(row, index) {
let spData = JSON.parse(row.spData);
if(spData!=null&&index<spData.length){
return spData[index].value;
}else{
return null;
}
},
handleRefreshProductSkuList() {
this.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.refreshProductAttrPics();
this.refreshProductSkuList();
});
},
handleSyncProductSkuPrice(){
this.$confirm('将同步第一个sku的价格到所有sku,是否继续', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.value.skuStockList!==null&&this.value.skuStockList.length>0){
let tempSkuList = [];
tempSkuList = tempSkuList.concat(tempSkuList,this.value.skuStockList);
let price=this.value.skuStockList[0].price;
for(let i=0;i<tempSkuList.length;i++){
tempSkuList[i].price=price;
}
this.value.skuStockList=[];
this.value.skuStockList=this.value.skuStockList.concat(this.value.skuStockList,tempSkuList);
}
});
},
handleSyncProductSkuStock(){
this.$confirm('将同步第一个sku的库存到所有sku,是否继续', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.value.skuStockList!==null&&this.value.skuStockList.length>0){
let tempSkuList = [];
tempSkuList = tempSkuList.concat(tempSkuList,this.value.skuStockList);
let stock=this.value.skuStockList[0].stock;
let lowStock=this.value.skuStockList[0].lowStock;
for(let i=0;i<tempSkuList.length;i++){
tempSkuList[i].stock=stock;
tempSkuList[i].lowStock=lowStock;
}
this.value.skuStockList=[];
this.value.skuStockList=this.value.skuStockList.concat(this.value.skuStockList,tempSkuList);
}
});
},
refreshProductSkuList() {
this.value.skuStockList = [];
let skuList = this.value.skuStockList;
//只有一个属性时
if (this.selectProductAttr.length === 1) {
let attr = this.selectProductAttr[0];
for (let i = 0; i < attr.values.length; i++) {
skuList.push({
spData: JSON.stringify([{key:attr.name,value:attr.values[i]}])
});
}
} else if (this.selectProductAttr.length === 2) {
let attr0 = this.selectProductAttr[0];
let attr1 = this.selectProductAttr[1];
for (let i = 0; i < attr0.values.length; i++) {
if (attr1.values.length === 0) {
skuList.push({
spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
});
continue;
}
for (let j = 0; j < attr1.values.length; j++) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
skuList.push({
spData: JSON.stringify(spData)
});
}
}
} else {
let attr0 = this.selectProductAttr[0];
let attr1 = this.selectProductAttr[1];
let attr2 = this.selectProductAttr[2];
for (let i = 0; i < attr0.values.length; i++) {
if (attr1.values.length === 0) {
skuList.push({
spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
});
continue;
}
for (let j = 0; j < attr1.values.length; j++) {
if (attr2.values.length === 0) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
skuList.push({
spData: JSON.stringify(spData)
});
continue;
}
for (let k = 0; k < attr2.values.length; k++) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
spData.push({key:attr2.name,value:attr2.values[k]});
skuList.push({
spData: JSON.stringify(spData)
});
}
}
}
}
},
refreshProductAttrPics() {
this.selectProductAttrPics = [];
if (this.selectProductAttr.length >= 1) {
let values = this.selectProductAttr[0].values;
for (let i = 0; i < values.length; i++) {
let pic=null;
if(this.isEdit){
//编辑状态下获取图片
pic=this.getProductSkuPic(values[i]);
}
this.selectProductAttrPics.push({name: values[i], pic: pic})
}
}
},
//获取商品相关属性的图片
getProductSkuPic(name){
for(let i=0;i<this.value.skuStockList.length;i++){
let spData = JSON.parse(this.value.skuStockList[i].spData);
if(name===spData[0].value){
return this.value.skuStockList[i].pic;
}
}
return null;
},
//合并商品属性
mergeProductAttrValue() {
this.value.productAttributeValueList = [];
for (let i = 0; i < this.selectProductAttr.length; i++) {
let attr = this.selectProductAttr[i];
if (attr.handAddStatus === 1 && attr.options != null && attr.options.length > 0) {
this.value.productAttributeValueList.push({
productAttributeId: attr.id,
value: this.getOptionStr(attr.options)
});
}
}
for (let i = 0; i < this.selectProductParam.length; i++) {
let param = this.selectProductParam[i];
this.value.productAttributeValueList.push({
productAttributeId: param.id,
value: param.value
});
}
},
//合并商品属性图片
mergeProductAttrPics() {
for (let i = 0; i < this.selectProductAttrPics.length; i++) {
for (let j = 0; j < this.value.skuStockList.length; j++) {
let spData = JSON.parse(this.value.skuStockList[j].spData);
if (spData[0].value === this.selectProductAttrPics[i].name) {
this.value.skuStockList[j].pic = this.selectProductAttrPics[i].pic;
}
}
}
},
getOptionStr(arr) {
let str = '';
for (let i = 0; i < arr.length; i++) {
str += arr[i];
if (i != arr.length - 1) {
str += ',';
}
}
return str;
},
handleRemoveProductSku(index, row) {
let list = this.value.skuStockList;
if (list.length === 1) {
list.pop();
} else {
list.splice(index, 1);
}
},
getParamInputList(inputList) {
return inputList.split(',');
},
handlePrev() {
this.$emit('prevStep')
},
handleNext() {
this.mergeProductAttrValue();
this.mergeProductAttrPics();
this.$emit('nextStep')
}
}
}
</script>
<style scoped>
.littleMarginLeft {
margin-left: 10px;
}
.littleMarginTop {
margin-top: 10px;
}
.paramInput {
width: 250px;
}
.paramInputLabel {
display: inline-block;
width: 100px;
text-align: right;
padding-right: 10px
}
.cardBg {
background: #F8F9FC;
}
</style>
#abc
<template>
<!-- 整体的外层 div，设置了距离顶部 50px 的 margin，用于页面布局上的间隔 -->
<div style="margin-top: 50px">
<!-- el-form 表单组件，绑定数据模型为 value，设置了表单引用名、标签宽度、类名以及尺寸为小，用于收集和展示商品相关信息 -->
<el-form :model="value" ref="productAttrForm" label-width="120px" class="form-inner-container" size="small">
<!-- 表单项，标签显示为“属性类型：” -->
<el-form-item label="属性类型：">
<!-- el-select 下拉选择框组件，绑定 v-model 为 value.productAttributeCategoryId，有占位提示文字，并且监听 change 事件 -->
<el-select v-model="value.productAttributeCategoryId"
placeholder="请选择属性类型"
@change="handleProductAttrChange">
<!-- 通过循环生成下拉选项，每个选项的标签和值根据 productAttributeCategoryOptions 数组中的元素来确定 -->
<el-option
v-for="item in productAttributeCategoryOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 表单项，标签显示为“商品规格：”，用于展示和操作商品规格相关内容 -->
<el-form-item label="商品规格：">
<!-- el-card 卡片组件，设置阴影效果为无，添加了自定义类名 cardBg，用于对商品规格部分进行布局划分 -->
<el-card shadow="never" class="cardBg">
<!-- 循环遍历 selectProductAttr 数组，展示每个商品属性相关内容 -->
<div v-for="(productAttr,idx) in selectProductAttr">
<!-- 显示商品属性的名称 -->
{{productAttr.name}}：
<!-- 根据商品属性的 handAddStatus 判断使用不同的复选框组展示方式，当为 0 时使用固定的输入列表生成复选框 -->
<el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
<el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
class="littleMarginLeft"></el-checkbox>
</el-checkbox-group>
<!-- 当 handAddStatus 不为 0 时，展示可动态操作的复选框组，包含添加、删除选项等功能 -->
<div v-else>
<el-checkbox-group v-model="selectProductAttr[idx].values">
<div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
class="littleMarginLeft">
<el-checkbox :label="item" :key="item"></el-checkbox>
<el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
</el-button>
</div>
</el-checkbox-group>
<el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
<el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
</div>
</div>
</el-card>
<!-- el-table 表格组件，设置宽度为 100%，绑定数据为 value.skuStockList，设置边框，用于展示商品 SKU 相关信息 -->
<el-table style="width: 100%;margin-top: 20px"
:data="value.skuStockList"
border>
<!-- 循环生成表格列，根据 selectProductAttr 数组中的每个商品属性生成对应列，用于展示每个 SKU 对应的属性值 -->
<el-table-column
v-for="(item,index) in selectProductAttr"
:label="item.name"
:key="item.id"
align="center">
<template slot-scope="scope">
{{getProductSkuSp(scope.row,index)}}
</template>
</el-table-column>
<!-- 表格列，标签显示为“销售价格”，宽度为 100px，内容居中对齐，内部使用输入框展示和编辑价格 -->
<el-table-column
label="销售价格"
width="100"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.price"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“促销价格”，宽度为 100px，内容居中对齐，内部使用输入框展示和编辑促销价格 -->
<el-table-column
label="促销价格"
width="100"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.promotionPrice"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“商品库存”，宽度为 80px，内容居中对齐，内部使用输入框展示和编辑库存数量 -->
<el-table-column
label="商品库存"
width="80"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.stock"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“库存预警值”，宽度为 80px，内容居中对齐，内部使用输入框展示和编辑库存预警值 -->
<el-table-column
label="库存预警值"
width="80"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.lowStock"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“SKU 编号”，宽度为 160px，内容居中对齐，内部使用输入框展示和编辑 SKU 编号 -->
<el-table-column
label="SKU 编号"
width="160"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.skuCode"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“操作”，宽度为 80px，内容居中对齐，内部包含删除按钮，点击可删除对应行的 SKU 数据 -->
<el-table-column
label="操作"
width="80"
align="center">
<template slot-scope="scope">
<el-button
type="text"
@click="handleRemoveProductSku(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- el-button 按钮组件，类型为主要按钮，点击时触发 handleRefreshProductSkuList 方法，用于刷新商品 SKU 列表 -->
<el-button
type="primary"
style="margin-top: 20px"
@click="handleRefreshProductSkuList">刷新列表
</el-button>
<!-- el-button 按钮组件，类型为主要按钮，点击时触发 handleSyncProductSkuPrice 方法，用于同步商品 SKU 的价格 -->
<el-button
type="primary"
style="margin-top: 20px"
@click="handleSyncProductSkuPrice">同步价格
</el-button>
<!-- el-button 按钮组件，类型为主要按钮，点击时触发 handleSyncProductSkuStock 方法，用于同步商品 SKU 的库存 -->
<el-button
type="primary"
style="margin-top: 20px"
@click="handleSyncProductSkuStock">同步库存
</el-button>
</el-form-item>
<!-- 根据 hasAttrPic 计算属性判断是否显示商品属性图片相关内容，只有当有属性图片时才展示 -->
<el-form-item label="属性图片：" v-if="hasAttrPic">
<!-- el-card 卡片组件，设置阴影效果为无，添加了自定义类名 cardBg，用于对商品属性图片部分进行布局划分 -->
<el-card shadow="never" class="cardBg">
<!-- 循环遍历 selectProductAttrPics 数组，展示每个商品属性图片相关内容，使用 single-upload 组件上传图片 -->
<div v-for="(item,index) in selectProductAttrPics">
<span>{{item.name}}:</span>
<single-upload v-model="item.pic"
style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
</div>
</el-card>
</el-form-item>
<!-- 表单项，标签显示为“商品参数：”，用于展示和编辑商品参数相关内容 -->
<el-form-item label="商品参数：">
<!-- el-card 卡片组件，设置阴影效果为无，添加了自定义类名 cardBg，用于对商品参数部分进行布局划分 -->
<el-card shadow="never" class="cardBg">
<!-- 循环遍历 selectProductParam 数组，展示每个商品参数相关内容，根据输入类型选择不同的输入组件展示和编辑参数值 -->
<div v-for="(item,index) in selectProductParam" :class="{littleMarginTop:index!==0}">
<div class="paramInputLabel">{{item.name}}:</div>
<el-select v-if="item.inputType===1" class="paramInput" v-model="selectProductParam[index].value">
<el-option
v-for="item in getParamInputList(item.inputList)"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<el-input v-else class="paramInput" v-model="selectProductParam[index].value"></el-input>
</div>
</el-card>
</el-form-item>
<!-- 表单项，标签显示为“商品相册：”，使用 multi-upload 组件用于上传商品的相册图片 -->
<el-form-item label="商品相册：">
<multi-upload v-model="selectProductPics"></multi-upload>
</el-form-item>
<!-- 表单项，标签显示为“商品详情：”，使用 el-tabs 选项卡组件展示电脑端和移动端的商品详情，分别使用 tinymce 富文本编辑器进行编辑 -->
<el-form-item label="商品详情：">
<el-tabs v-model="activeHtmlName" type="card">
<el-tab-pane label="电脑端详情" name="pc">
<tinymce :width="595" :height="300" v-model="value.detailHtml"></tinymce>
</el-tab-pane>
<el-tab-pane label="移动端详情" name="mobile">
<tinymce :width="595" :height="300" v-model="value.detailMobileHtml"></tinymce>
</el-tab-pane>
</el-tabs>
</el-form-item>
<!-- 表单项，用于放置操作按钮，设置文本居中对齐，包含“上一步”和“下一步”按钮，点击分别触发对应的方法 -->
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品促销</el-button>
<el-button type="primary" size="medium" @click="handleNext">下一步，选择商品关联</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 从 @/api/productAttrCate 模块中导入名为 fetchList 的函数，并将其重命名为 fetchProductAttrCateList，用于获取商品属性分类列表数据
import {fetchList as fetchProductAttrCateList} from '@/api/productAttrCate'
// 从 @/api/productAttr 模块中导入名为 fetchList 的函数，并将其重命名为 fetchProductAttrList，用于获取商品属性列表数据等相关操作
import {fetchList as fetchProductAttrList} from '@/api/productAttr'
// 导入 SingleUpload 组件，用于单个文件上传，可能是用于上传商品相关的单个图片等功能
import SingleUpload from '@/api/SingleUpload'
// 导入 MultiUpload 组件，用于多个文件上传，比如上传商品相册图片
import MultiUpload from '@/api/MultiUpload'
// 导入 Tinymce 组件，用于展示和编辑富文本内容，这里用于商品详情的编辑
import Tinymce from '@/api/Tinymce'
export default
name: "ProductAttrDetail",
components: {SingleUpload, MultiUpload, Tinymce},
props: {
// 接收一个名为 value 的对象类型属性，用于绑定表单数据等相关信息
value: Object,
// 接收一个名为 isEdit 的布尔类型属性，默认值为 false，用于判断当前是否处于编辑模式
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
// 编辑模式时是否初始化成功的标志，初始值为 false
hasEditCreated: false,
// 用于存储商品属性分类下拉选项的数组，初始为空，后续会填充从接口获取的数据
productAttributeCategoryOptions: [],
// 用于存储选中的商品属性的数组，每个元素包含属性的各种相关信息，初始为空
selectProductAttr: [],
// 用于存储选中的商品参数的数组，每个元素包含参数的各种相关信息，初始为空
selectProductParam: [],
// 用于存储选中的商品属性图片的数组，每个元素包含图片相关信息，初始为空
selectProductAttrPics: [],
// 用于临时存储可手动添加的商品属性值，初始为空字符串
addProductAttrValue: '',
// 用于指定商品富文本详情激活的选项卡名称，初始值为 'pc'，表示电脑端详情
activeHtmlName: 'pc'
}
},
computed: {
// 计算属性，根据 selectProductAttrPics 数组长度判断是否有商品属性图片，返回布尔值
hasAttrPic() {
if (this.selectProductAttrPics.length < 1) {
return false;
}
return true;
},
// 计算属性，返回商品的编号，从 value 对象中获取
productId() {
return this.value.id;
},
// 计算属性，用于获取和设置商品的主图和画册图片，通过对 value 中的相关属性进行处理，实现图片数据的双向绑定
selectProductPics: {
get: function () {
let pics = [];
if (this.value.pic === undefined || this.value.pic == null || this.value.pic === '') {
return pics;
}
pics.push(this.value.pic);
if (this.value.albumPics === undefined || this.value.albumPics == null || this.value.albumPics === '') {
return pics;
}
let albumPics = this.value.albumPics.split(',');
for (let i = 0; i < albumPics.length; i++) {
pics.push(albumPics[i]);
}
return pics;
},
set: function (newValue) {
if (newValue == null || newValue.length === 0) {
this.value.pic = null;
this.value.albumPics = null;
} else {
this.value.pic = newValue[0];
this.value.albumPics = '';
if (newValue.length > 1) {
for (let i = 1; i < newValue.length; i++) {
this.value.albumPics += newValue[i];
if (i!== newValue.length - 1) {
this.value.albumPics += ',';
}
}
}
}
}
}
},
created() {
// 在组件创建时调用 getProductAttrCateList 方法，用于获取商品属性分类列表数据
this.getProductAttrCateList();
},
watch: {
productId: function (newValue) {
// 如果不是编辑模式，直接返回，不进行后续操作
if (!this.isEdit) return;
// 如果已经初始化成功，直接返回，避免重复操作
if (this.hasEditCreated) return;
// 如果新值为 undefined、null 或者 0，直接返回
if (newValue === undefined || newValue == null || newValue === 0) return;
// 调用 handleEditCreated 方法进行编辑模式下的初始化操作
this.handleEditCreated();
}
},
methods:
handleEditCreated() {
// 如果商品属性分类 id 不为空，根据该 id 获取商品属性和参数信息
if (this.value.productAttributeCategoryId!= null) {
this.handleProductAttrChange(this.value.productAttributeCategoryId);
}
// 将编辑模式初始化成功标志设置为 true
this.hasEditCreated = true;
},
getProductAttrCateList()

396
pms/product/components/ProductDetail.vue
Unescape View File

@ -1,396 +0,0 @@
<template> 
<el-card class="form-container" shadow="never">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="填写商品信息"></el-step>
<el-step title="填写商品促销"></el-step>
<el-step title="填写商品属性"></el-step>
<el-step title="选择商品关联"></el-step>
</el-steps>
<product-info-detail
v-show="showStatus[0]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep">
</product-info-detail>
<product-sale-detail
v-show="showStatus[1]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep"
@prevStep="prevStep">
</product-sale-detail>
<product-attr-detail
v-show="showStatus[2]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep"
@prevStep="prevStep">
</product-attr-detail>
<product-relation-detail
v-show="showStatus[3]"
v-model="productParam"
:is-edit="isEdit"
@prevStep="prevStep"
@finishCommit="finishCommit">
</product-relation-detail>
</el-card>
</template>
<script>
import ProductInfoDetail from './ProductInfoDetail';
import ProductSaleDetail from './ProductSaleDetail';
import ProductAttrDetail from './ProductAttrDetail';
import ProductRelationDetail from './ProductRelationDetail';
import {createProduct,getProduct,updateProduct} from '@/api/product';
const defaultProductParam = {
albumPics: '',
brandId: null,
brandName: '',
deleteStatus: 0,
description: '',
detailDesc: '',
detailHtml: '',
detailMobileHtml: '',
detailTitle: '',
feightTemplateId: 0,
flashPromotionCount: 0,
flashPromotionId: 0,
flashPromotionPrice: 0,
flashPromotionSort: 0,
giftPoint: 0,
giftGrowth: 0,
keywords: '',
lowStock: 0,
name: '',
newStatus: 0,
note: '',
originalPrice: 0,
pic: '',
//会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
memberPriceList: [],
//商品满减
productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
//商品阶梯价格
productLadderList: [{count: 0,discount: 0,price: 0}],
previewStatus: 0,
price: 0,
productAttributeCategoryId: null,
//商品属性相关{productAttributeId: 0, value: ''}
productAttributeValueList: [],
//商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
skuStockList: [],
//商品相关专题{subjectId: 0}
subjectProductRelationList: [],
//商品相关优选{prefrenceAreaId: 0}
prefrenceAreaProductRelationList: [],
productCategoryId: null,
productCategoryName: '',
productSn: '',
promotionEndTime: '',
promotionPerLimit: 0,
promotionPrice: null,
promotionStartTime: '',
promotionType: 0,
publishStatus: 0,
recommandStatus: 0,
sale: 0,
serviceIds: '',
sort: 0,
stock: 0,
subTitle: '',
unit: '',
usePointLimit: 0,
verifyStatus: 0,
weight: 0
};
export default {
name: 'ProductDetail',
components: {ProductInfoDetail, ProductSaleDetail, ProductAttrDetail, ProductRelationDetail},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
active: 0,
productParam: Object.assign({}, defaultProductParam),
showStatus: [true, false, false, false]
}
},
created(){
if(this.isEdit){
getProduct(this.$route.query.id).then(response=>{
this.productParam=response.data;
});
}
},
methods: {
hideAll() {
for (let i = 0; i < this.showStatus.length; i++) {
this.showStatus[i] = false;
}
},
prevStep() {
if (this.active > 0 && this.active < this.showStatus.length) {
this.active--;
this.hideAll();
this.showStatus[this.active] = true;
}
},
nextStep() {
if (this.active < this.showStatus.length - 1) {
this.active++;
this.hideAll();
this.showStatus[this.active] = true;
}
},
finishCommit(isEdit) {
this.$confirm('是否要提交该产品', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(isEdit){
updateProduct(this.$route.query.id,this.productParam).then(response=>{
this.$message({
type: 'success',
message: '提交成功',
duration:1000
});
this.$router.back();
});
}else{
createProduct(this.productParam).then(response=>{
this.$message({
type: 'success',
message: '提交成功',
duration:1000
});
location.reload();
});
}
})
}
}
}
</script>
<style>
.form-container {
width: 960px;
}
.form-inner-container {
width: 800px;
}
</style>
#abc
<template>
<!-- 使用Element UI的el-card组件创建一个卡片式容器，设置类名为form-container，阴影效果为无，用于对内部内容进行布局包裹 -->
<el-card class="form-container" shadow="never">
<!-- 使用Element UI的el-steps步骤条组件，绑定:active属性用于控制当前激活的步骤，设置完成状态的样式为success，并且让步骤标题居中对齐 -->
<el-steps :active="active" finish-status="success" align-center>
<!-- 定义一个步骤，标题为“填写商品信息”，具体内容由对应的组件（product-info-detail）来填充 -->
<el-step title="填写商品信息"></el-step>
<!-- 定义一个步骤，标题为“填写商品促销”，具体内容由对应的组件（product-sale-detail）来填充 -->
<el-step title="填写商品促销"></el-step>
<!-- 定义一个步骤，标题为“填写商品属性”，具体内容由对应的组件（product-attr-detail）来填充 -->
<el-step title="填写商品属性"></el-step>
<!-- 定义一个步骤，标题为“选择商品关联”，具体内容由对应的组件（product-relation-detail）来填充 -->
<el-step title="选择商品关联"></el-step>
</el-steps>
<!-- 使用product-info-detail组件，通过v-show指令根据showStatus数组中对应索引的值来控制显示隐藏，绑定v-model用于双向数据绑定，传递is-edit属性，并且监听nextStep事件 -->
<product-info-detail
v-show="showStatus[0]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep">
</product-info-detail>
<!-- 使用product-sale-detail组件，通过v-show指令根据showStatus数组中对应索引的值来控制显示隐藏，绑定v-model用于双向数据绑定，传递is-edit属性，并且监听nextStep和prevStep事件 -->
<product-sale-detail
v-show="showStatus[1]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep"
@prevStep="prevStep">
</product-sale-detail>
<!-- 使用product-attr-detail组件，通过v-show指令根据showStatus数组中对应索引的值来控制显示隐藏，绑定v-model用于双向数据绑定，传递is-edit属性，并且监听nextStep和prevStep事件 -->
<product-attr-detail
v-show="showStatus[2]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep"
@prevStep="prevStep">
</product-attr-detail>
<!-- 使用product-relation-detail组件，通过v-show指令根据showStatus数组中对应索引的值来控制显示隐藏，绑定v-model用于双向数据绑定，传递is-edit属性，并且监听prevStep和finishCommit事件 -->
<product-relation-detail
v-show="showStatus[3]"
v-model="productParam"
:is-edit="isEdit"
@prevStep="prevStep"
@finishCommit="finishCommit">
</product-relation-detail>
</el-card>
</template>
<script>
// 导入ProductInfoDetail组件，用于展示和编辑商品信息相关内容，应该是自定义的Vue组件
import ProductInfoDetail from './ProductInfoDetail';
// 导入ProductSaleDetail组件，用于展示和编辑商品促销相关内容，也是自定义的Vue组件
import ProductSaleDetail from './ProductSaleDetail';
// 导入ProductAttrDetail组件，用于展示和编辑商品属性相关内容，同样是自定义的Vue组件
import ProductAttrDetail from './ProductAttrDetail';
// 导入ProductRelationDetail组件，用于展示和编辑商品关联相关内容，自定义的Vue组件
import ProductRelationDetail from './ProductRelationDetail';
// 从 @/api/product模块中导入createProduct、getProduct、updateProduct函数，用于创建、获取、更新商品数据的相关接口操作
import {createProduct, getProduct, updateProduct} from '@/api/product';
// 定义一个默认的商品参数对象，包含了各种商品相关的属性及初始值，用于初始化商品数据或者在没有获取到实际数据时作为默认展示内容
const defaultProductParam = {
albumPics: '',
brandId: null,
brandName: '',
deleteStatus: 0,
description: '',
detailDesc: '',
detailHtml: '',
detailMobileHtml: '',
detailTitle: '',
feightTemplateId: 0,
flashPromotionCount: 0,
flashPromotionId: 0,
flashPromotionPrice: 0,
flashPromotionSort: 0,
giftPoint: 0,
giftGrowth: 0,
keywords: '',
lowStock: 0,
name: '',
newStatus: 0,
note: '',
originalPrice: 0,
pic: '',
// 会员价格列表，每个元素包含会员等级ID、会员价格、会员等级名称等信息，初始为空数组
memberPriceList: [],
// 商品满减信息列表，每个元素包含满减的满价格和减价格，初始只有一个默认元素
productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
// 商品阶梯价格列表，每个元素包含数量、折扣、价格等信息，初始只有一个默认元素
productLadderList: [{count: 0, discount: 0, price: 0}],
previewStatus: 0,
price: 0,
productAttributeCategoryId: null,
// 商品属性值列表，每个元素包含商品属性ID和对应的值，初始为空数组
productAttributeValueList: [],
// 商品SKU库存信息列表，每个元素包含库存预警值、图片、价格、销量、SKU编号、规格数据、库存数量等信息，初始为空数组
skuStockList: [],
// 商品相关专题关联列表，每个元素包含专题ID，初始为空数组
subjectProductRelationList: [],
// 商品相关优选区域关联列表，每个元素包含优选区域ID，初始为空数组
prefrenceAreaProductRelationList: [],
productCategoryId: null,
productCategoryName: '',
productSn: '',
promotionEndTime: '',
promotionPerLimit: 0,
promotionPrice: null,
promotionStartTime: '',
promotionType: 0,
publishStatus: 0,
recommandStatus: 0,
sale: 0,
serviceIds: '',
sort: 0,
stock: 0,
subTitle: '',
unit: '',
usePointLimit: 0,
verifyStatus: 0,
weight: 0
};
export default {
name: 'ProductDetail',
components: {ProductInfoDetail, ProductSaleDetail, ProductAttrDetail, ProductRelationDetail},
props: {
// 定义一个名为isEdit的属性，类型为布尔值，默认值为false，用于判断当前是编辑商品还是新建商品的操作模式
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
// 用于控制当前激活的步骤条步骤索引，初始值为0，表示第一步
active: 0,
// 存储商品相关参数数据，初始通过Object.assign方法复制默认商品参数对象，后续会根据操作进行更新
productParam: Object.assign({}, defaultProductParam),
// 用于控制各个步骤对应的组件显示隐藏状态的数组，初始只有第一个元素为true，表示只显示第一步对应的组件
showStatus: [true, false, false, false]
}
},
created() {
// 如果当前处于编辑模式（isEdit为true），则调用getProduct函数获取商品数据，传入路由查询参数中的商品ID，成功后将获取到的数据赋值给productParam
if (this.isEdit) {
getProduct(this.$route.query.id).then(response => {
this.productParam = response.data;
});
}
},
methods: {
hideAll() {
// 循环遍历showStatus数组，将每个元素设置为false，用于隐藏所有步骤对应的组件
for (let i = 0; i < this.showStatus.length; i++) {
this.showStatus[i] = false;
}
},
prevStep() {
// 如果当前激活步骤索引大于0且小于总步骤数，说明可以回退上一步，将激活步骤索引减1，调用hideAll隐藏所有组件，然后将当前步骤对应的组件显示出来
if (this.active > 0 && this.active < this.showStatus.length) {
this.active--;
this.hideAll();
this.showStatus[this.active] = true;
}
},
nextStep() {
// 如果当前激活步骤索引小于总步骤数减1，说明可以进入下一步，将激活步骤索引加1，调用hideAll隐藏所有组件，然后将下一步对应的组件显示出来
if (this.active < this.showStatus.length - 1) {
this.active++;
this.hideAll();
this.showStatus[this.active] = true;
}
},
finishCommit(isEdit) {
// 弹出确认框，询问是否要提交该产品，用户确认后根据isEdit的值判断是更新商品还是创建商品
this.$confirm('是否要提交该产品', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (isEdit) {
// 如果是编辑模式（isEdit为true），调用updateProduct函数更新商品数据，传入商品ID和当前的商品参数，成功后显示提示信息并返回上一页
updateProduct(this.$route.query.id, this.productParam).then(response => {
this.$message({
type: 'success',
message: '提交成功',
duration: 1000
});
this.$router.back();
});
} else {
// 如果不是编辑模式（即新建商品），调用createProduct函数创建商品，传入当前的商品参数，成功后显示提示信息并刷新页面
createProduct(this.productParam).then(response => {
this.$message({
type: 'success',
message: '提交成功',
duration: 1000
});
location.reload();
});
}
})
}
}
}
</script>

384
pms/product/components/ProductInfoDetail.vue
Unescape View File

@ -1,384 +0,0 @@
<template>
<div style="margin-top: 50px">
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" class="form-inner-container" size="small">
<el-form-item label="商品分类：" prop="productCategoryId">
<el-cascader
v-model="selectProductCateValue"
:options="productCateOptions">
</el-cascader>
</el-form-item>
<el-form-item label="商品名称：" prop="name">
<el-input v-model="value.name"></el-input>
</el-form-item>
<el-form-item label="副标题：" prop="subTitle">
<el-input v-model="value.subTitle"></el-input>
</el-form-item>
<el-form-item label="商品品牌：" prop="brandId">
<el-select
v-model="value.brandId"
@change="handleBrandChange"
placeholder="请选择品牌">
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品介绍：">
<el-input
:autoSize="true"
v-model="value.description"
type="textarea"
placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="商品货号：">
<el-input v-model="value.productSn"></el-input>
</el-form-item>
<el-form-item label="商品售价：">
<el-input v-model="value.price"></el-input>
</el-form-item>
<el-form-item label="市场价：">
<el-input v-model="value.originalPrice"></el-input>
</el-form-item>
<el-form-item label="商品库存：">
<el-input v-model="value.stock"></el-input>
</el-form-item>
<el-form-item label="计量单位：">
<el-input v-model="value.unit"></el-input>
</el-form-item>
<el-form-item label="商品重量：">
<el-input v-model="value.weight" style="width: 300px"></el-input>
<span style="margin-left: 20px">克</span>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="value.sort"></el-input>
</el-form-item>
<el-form-item style="text-align: center">
<el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {fetchListWithChildren} from '@/api/productCate'
import {fetchList as fetchBrandList} from '@/api/brand'
import {getProduct} from '@/api/product';
export default {
name: "ProductInfoDetail",
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
hasEditCreated:false,
//选中商品分类的值
selectProductCateValue: [],
productCateOptions: [],
brandOptions: [],
rules: {
name: [
{required: true, message: '请输入商品名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
}
};
},
created() {
this.getProductCateList();
this.getBrandList();
},
computed:{
//商品的编号
productId(){
return this.value.id;
}
},
watch: {
productId:function(newValue){
if(!this.isEdit)return;
if(this.hasEditCreated)return;
if(newValue===undefined||newValue==null||newValue===0)return;
this.handleEditCreated();
},
selectProductCateValue: function (newValue) {
if (newValue != null && newValue.length === 2) {
this.value.productCategoryId = newValue[1];
this.value.productCategoryName= this.getCateNameById(this.value.productCategoryId);
} else {
this.value.productCategoryId = null;
this.value.productCategoryName=null;
}
}
},
methods: {
//处理编辑逻辑
handleEditCreated(){
if(this.value.productCategoryId!=null){
this.selectProductCateValue.push(this.value.cateParentId);
this.selectProductCateValue.push(this.value.productCategoryId);
}
this.hasEditCreated=true;
},
getProductCateList() {
fetchListWithChildren().then(response => {
let list = response.data;
this.productCateOptions = [];
for (let i = 0; i < list.length; i++) {
let children = [];
if (list[i].children != null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id});
}
}
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
}
});
},
getBrandList() {
fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
this.brandOptions = [];
let brandList = response.data.list;
for (let i = 0; i < brandList.length; i++) {
this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
}
});
},
getCateNameById(id){
let name=null;
for(let i=0;i<this.productCateOptions.length;i++){
for(let j=0;j<this.productCateOptions[i].children.length;j++){
if(this.productCateOptions[i].children[j].value===id){
name=this.productCateOptions[i].children[j].label;
return name;
}
}
}
return name;
},
handleNext(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit('nextStep');
} else {
this.$message({
message: '验证失败',
type: 'error',
duration:1000
});
return false;
}
});
},
handleBrandChange(val) {
let brandName = '';
for (let i = 0; i < this.brandOptions.length; i++) {
if (this.brandOptions[i].value === val) {
brandName = this.brandOptions[i].label;
break;
}
}
this.value.brandName = brandName;
}
}
}
</script>
<style scoped>
</style>
#abc
<template>
<!-- 外层的 div 元素，设置了距离顶部 50px 的 margin，用于在页面布局上与其他元素产生间隔 -->
<div style="margin-top: 50px">
<!-- el-form 表单组件，用于收集和验证商品相关信息。绑定数据模型为 value，关联验证规则 rules，设置了表单引用名、标签宽度、类名以及尺寸为小 -->
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" class="form-inner-container" size="small">
<!-- 表单项，标签显示为“商品分类：”，通过 prop 属性关联对应的验证规则，用于选择商品分类 -->
<el-form-item label="商品分类：" prop="productCategoryId">
<!-- el-cascader 级联选择器组件，绑定 v-model 为 selectProductCateValue，其选项数据由 productCateOptions 提供，用于选择多级的商品分类 -->
<el-cascader
v-model="selectProductCateValue"
:options="productCateOptions">
</el-cascader>
</el-form-item>
<!-- 表单项，标签显示为“商品名称：”，通过 prop 属性关联对应的验证规则，内部使用输入框收集商品名称信息 -->
<el-form-item label="商品名称：" prop="name">
<el-input v-model="value.name"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“副标题：”，通过 prop 属性关联对应的验证规则，内部使用输入框收集商品副标题信息 -->
<el-form-item label="副标题：" prop="subTitle">
<el-input v-model="value.subTitle"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品品牌：”，通过 prop 属性关联对应的验证规则，内部使用下拉选择框选择商品品牌，并且监听 change 事件 -->
<el-form-item label="商品品牌：" prop="brandId">
<el-select
v-model="value.brandId"
@change="handleBrandChange"
placeholder="请选择品牌">
<!-- 通过循环生成下拉选项，每个选项的标签和值根据 brandOptions 数组中的元素来确定 -->
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 表单项，标签显示为“商品介绍：”，内部使用可自动调整大小的文本域输入框收集商品介绍信息 -->
<el-form-item label="商品介绍：">
<el-input
:autoSize="true"
v-model="value.description"
type="textarea"
placeholder="请输入内容"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品货号：”，内部使用输入框收集商品货号信息 -->
<el-form-item label="商品货号：">
<el-input v-model="value.productSn"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品售价：”，内部使用输入框收集商品售价信息 -->
<el-form-item label="商品售价：">
<el-input v-model="value.price"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“市场价：”，内部使用输入框收集商品市场价信息 -->
<el-form-item label="市场价：">
<el-input v-model="value.originalPrice"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品库存：”，内部使用输入框收集商品库存信息 -->
<el-form-item label="商品库存：">
<el-input v-model="value.stock"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“计量单位：”，内部使用输入框收集商品计量单位信息 -->
<el-form-item label="计量单位：">
<el-input v-model="value.unit"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品重量：”，内部使用输入框收集商品重量信息，并在输入框右侧显示“克”作为单位提示 -->
<el-form-item label="商品重量：">
<el-input v-model="value.weight" style="width: 300px"></el-input>
<span style="margin-left: 20px">克</span>
</el-form-item>
<!-- 表单项，标签显示为“排序”，内部使用输入框收集商品排序相关信息 -->
<el-form-item label="排序">
<el-input v-model="value.sort"></el-input>
</el-form-item>
<!-- 表单项，用于放置操作按钮，设置文本居中对齐，包含一个“下一步”按钮，点击时触发 handleNext 方法并传入当前表单名称，用于进入下一个填写商品促销的步骤 -->
<el-form-item style="text-align: center">
<el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 从 @/api/productCate 模块中导入名为 fetchListWithChildren 的函数，用于获取带有子级的商品分类列表数据
import {fetchListWithChildren} from '@/api/productCate'
// 从 @/api/brand 模块中导入名为 fetchList 的函数，并将其重命名为 fetchBrandList，用于获取品牌列表数据
import {fetchList as fetchBrandList} from '@/api/brand'
// 从 @/api/product 模块中导入名为 getProduct 的函数，用于获取商品数据，可能在编辑商品时使用
import {getProduct} from '@/api/product';
export default
name: "ProductInfoDetail",
props: {
// 接收一个名为 value 的对象类型属性，用于绑定表单相关的数据，方便在组件内外传递和操作商品信息
value: Object,
// 接收一个名为 isEdit 的布尔类型属性，默认值为 false，用于判断当前是否处于编辑商品的操作模式
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
// 编辑模式时是否初始化成功的标志，初始值为 false，用于控制一些编辑相关的初始化操作是否执行
hasEditCreated: false,
// 用于存储选中的商品分类的值，以数组形式表示，适用于级联选择器的选择结果，初始为空数组
selectProductCateValue: [],
// 用于存储商品分类的选项数据，每个元素包含分类名称、分类 ID 以及子分类信息等，初始为空数组，后续会从接口获取数据填充
productCateOptions: [],
// 用于存储品牌的下拉选项数据，每个元素包含品牌名称和品牌 ID，初始为空数组，后续会从接口获取数据填充
brandOptions: [],
// 定义表单验证规则对象，针对不同的表单字段设置相应的验证要求，如必填、长度限制等
rules: {
name: [
// 验证规则：该项为必填项，触发验证的时机是输入框失去焦点时，验证失败提示信息为“请输入商品名称”
{required: true, message: '请输入商品名称', trigger: 'blur'},
// 验证规则：输入的字符长度需在 2 到 140 个之间，触发验证的时机是输入框失去焦点时，验证失败提示信息为“长度在 2 到 140 个字符”
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
subTitle: [
// 验证规则：该项为必填项，触发验证的时机是输入框失去焦点时，验证失败提示信息为“请输入商品副标题”
{required: true, message: '请输入商品副标题', trigger: 'blur'}
],
productCategoryId: [
// 验证规则：该项为必填项，触发验证的时机是输入框失去焦点时，验证失败提示信息为“请选择商品分类”
{required: true, message: '请选择商品分类', trigger: 'blur'}
],
brandId: [
// 验证规则：该项为必填项，触发验证的时机是输入框失去焦点时，验证失败提示信息为“请选择商品品牌”
{required: true, message: '请选择商品品牌', trigger: 'blur'}
],
description: [
// 验证规则：该项为必填项，触发验证的时机是输入框失去焦点时，验证失败提示信息为“请输入商品介绍”
{required: true, message: '请输入商品介绍', trigger: 'blur'}
],
requiredProp: [
// 通用的必填项验证规则，触发验证的时机是输入框失去焦点时，验证失败提示信息为“该项为必填项”，可根据实际情况应用到其他需要必填验证的字段
{required: true, message: '该项为必填项', trigger: 'blur'}
]
}
};
},
created() {
// 在组件创建时，调用 getProductCateList 方法获取商品分类列表数据，以及调用 getBrandList 方法获取品牌列表数据
this.getProductCateList();
this.getBrandList();
},
computed: {
// 计算属性，用于获取商品的编号，从 value 对象中提取 id 属性值返回，如果不存在则返回 undefined
productId() {
return this.value.id;
}
},
watch: {
productId: function (newValue) {
// 如果当前不是编辑模式，直接返回，不进行后续操作
if (!this.isEdit) return;
// 如果已经初始化成功，直接返回，避免重复操作
if (this.hasEditCreated) return;
// 如果新值为 undefined、null 或者 0，直接返回，说明没有有效的商品编号，不需要进行编辑相关初始化
if (newValue === undefined || newValue == null || newValue === 0) return;
// 调用 handleEditCreated 方法进行编辑模式下的初始化操作
this.handleEditCreated();
},
selectProductCateValue: function (newValue) {
// 当选中的商品分类值发生变化时，如果新值不为 null 且长度为 2（表示选择了二级分类，具体根据级联选择器的结构而定）
if (newValue!= null && newValue.length === 2) {
// 将商品分类的 ID 设置为选中的二级分类的 ID
this.value.productCategoryId = newValue[1];
// 通过 getCateNameById 方法获取对应的分类名称，并赋值给商品分类名称属性
this.value.productCategoryName = this.getCateNameById(this.value.productCategoryId);
} else {
// 如果不符合上述条件，说明没有选择有效的分类或者选择被清空了，将商品分类 ID 和名称都设置为 null
this.value.productCategoryId = null;
this.value.productCategoryName = null;
}
}
},
methods:
// 处理编辑模式下的初始化逻辑，例如设置级联选择器的选中值等
handleEditCreated()
if (this.value.productCategoryId!= null)
//

310
pms/product/components/ProductRelationDetail.vue
Unescape View File

@ -1,310 +0,0 @@
<template>
<div style="margin-top: 50px">
<el-form :model="value"
ref="productRelationForm"
label-width="120px"
class="form-inner-container"
size="small">
<el-form-item label="关联专题：">
<el-transfer
style="display: inline-block"
filterable
:filter-method="filterMethod"
filter-placeholder="请输入专题名称"
v-model="selectSubject"
:titles="subjectTitles"
:data="subjectList">
</el-transfer>
</el-form-item>
<el-form-item label="关联优选：">
<el-transfer
style="display: inline-block"
filterable
:filter-method="filterMethod"
filter-placeholder="请输入优选名称"
v-model="selectPrefrenceArea"
:titles="prefrenceAreaTitles"
:data="prefrenceAreaList">
</el-transfer>
</el-form-item>
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
<el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {fetchListAll as fetchSubjectList} from '@/api/subject'
import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
export default {
name: "ProductRelationDetail",
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
//所有专题列表
subjectList: [],
//专题左右标题
subjectTitles: ['待选择', '已选择'],
//所有专题列表
prefrenceAreaList: [],
//专题左右标题
prefrenceAreaTitles: ['待选择', '已选择']
};
},
created() {
this.getSubjectList();
this.getPrefrenceAreaList();
},
computed:{
//选中的专题
selectSubject:{
get:function () {
let subjects =[];
if(this.value.subjectProductRelationList==null||this.value.subjectProductRelationList.length<=0){
return subjects;
}
for(let i=0;i<this.value.subjectProductRelationList.length;i++){
subjects.push(this.value.subjectProductRelationList[i].subjectId);
}
return subjects;
},
set:function (newValue) {
this.value.subjectProductRelationList=[];
for(let i=0;i<newValue.length;i++){
this.value.subjectProductRelationList.push({subjectId:newValue[i]});
}
}
},
//选中的优选
selectPrefrenceArea:{
get:function () {
let prefrenceAreas =[];
if(this.value.prefrenceAreaProductRelationList==null||this.value.prefrenceAreaProductRelationList.length<=0){
return prefrenceAreas;
}
for(let i=0;i<this.value.prefrenceAreaProductRelationList.length;i++){
prefrenceAreas.push(this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId);
}
return prefrenceAreas;
},
set:function (newValue) {
this.value.prefrenceAreaProductRelationList=[];
for(let i=0;i<newValue.length;i++){
this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
}
}
}
},
methods: {
filterMethod(query, item) {
return item.label.indexOf(query) > -1;
},
getSubjectList() {
fetchSubjectList().then(response => {
let list = response.data;
for (let i = 0; i < list.length; i++) {
this.subjectList.push({
label: list[i].title,
key: list[i].id
});
}
});
},
getPrefrenceAreaList() {
fetchPrefrenceAreaList().then(response=>{
let list = response.data;
for (let i = 0; i < list.length; i++) {
this.prefrenceAreaList.push({
label: list[i].name,
key: list[i].id
});
}
});
},
handlePrev(){
this.$emit('prevStep')
},
handleFinishCommit(){
this.$emit('finishCommit',this.isEdit);
}
}
}
</script>
<style scoped>
</style>
#abc
<template>
<!-- 外层的 div 元素，设置了距离顶部 50px 的 margin，用于在页面布局上与其他元素产生间隔 -->
<div style="margin-top: 50px">
<!-- el-form 表单组件，用于收集和展示商品关联相关信息。绑定数据模型为 value，设置了表单引用名、标签宽度、类名以及尺寸为小 -->
<el-form :model="value"
ref="productRelationForm"
label-width="120px"
class="form-inner-container"
size="small">
<!-- 表单项，标签显示为“关联专题：”，用于选择商品关联的专题信息 -->
<el-form-item label="关联专题：">
<!-- el-transfer 穿梭框组件，设置为内联块级元素显示，可进行过滤操作，绑定过滤方法、设置过滤占位提示文字，双向绑定选中的数据，指定左右标题以及数据源 -->
<el-transfer
style="display: inline-block"
filterable
:filter-method="filterMethod"
filter-placeholder="请输入专题名称"
v-model="selectSubject"
:titles="subjectTitles"
:data="subjectList">
</el-transfer>
</el-form-item>
<!-- 表单项，标签显示为“关联优选：”，用于选择商品关联的优选信息 -->
<el-form-item label="关联优选：">
<!-- el-transfer 穿梭框组件，设置为内联块级元素显示，可进行过滤操作，绑定过滤方法、设置过滤占位提示文字，双向绑定选中的数据，指定左右标题以及数据源 -->
<el-transfer
style="display: inline-block"
filterable
:filter-method="filterMethod"
filter-placeholder="请输入优选名称"
v-model="selectPrefrenceArea"
:titles="prefrenceAreaTitles"
:data="prefrenceAreaList">
</el-transfer>
</el-form-item>
<!-- 表单项，用于放置操作按钮，设置文本居中对齐，包含“上一步”和“完成，提交商品”按钮，点击分别触发对应的方法 -->
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
<el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 从 @/api/subject 模块中导入名为 fetchListAll 的函数，并将其重命名为 fetchSubjectList，用于获取所有专题列表数据
import {fetchListAll as fetchSubjectList} from '@/api/subject'
// 从 @/api/prefrenceArea 模块中导入名为 fetchList 的函数，并将其重命名为 fetchPrefrenceAreaList，用于获取优选区域列表数据
import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
export default {
name: "ProductRelationDetail",
props: {
// 接收一个名为 value 的对象类型属性，用于绑定表单相关的数据，方便在组件内外传递和操作商品关联相关的信息
value: Object,
// 接收一个名为 isEdit 的布尔类型属性，默认值为 false，用于判断当前是否处于编辑商品的操作模式
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
// 用于存储所有专题列表数据，每个元素包含专题的标签（通常是专题名称）和键（通常是专题 ID），初始为空数组，后续会从接口获取数据填充
subjectList: [],
// 用于设置专题穿梭框组件左右两边的标题，分别为“待选择”和“已选择”，表示数据在穿梭框中的不同状态
subjectTitles: ['待选择', '已选择'],
// 用于存储所有优选区域列表数据，每个元素包含优选区域的标签（通常是优选区域名称）和键（通常是优选区域 ID），初始为空数组，后续会从接口获取数据填充
prefrenceAreaList: [],
// 用于设置优选区域穿梭框组件左右两边的标题，分别为“待选择”和“已选择”，表示数据在穿梭框中的不同状态
prefrenceAreaTitles: ['待选择', '已选择']
};
},
created() {
// 在组件创建时，调用 getSubjectList 方法获取专题列表数据，以及调用 getPrefrenceAreaList 方法获取优选区域列表数据
this.getSubjectList();
this.getPrefrenceAreaList();
},
computed: {
// 计算属性，用于获取选中的专题信息，从 value 对象中的 subjectProductRelationList 数组提取专题 ID 组成新数组返回
selectSubject: {
get: function () {
let subjects = [];
if (this.value.subjectProductRelationList == null || this.value.subjectProductRelationList.length <= 0) {
return subjects;
}
for (let i = 0; i < this.value.subjectProductRelationList.length; i++) {
subjects.push(this.value.subjectProductRelationList[i].subjectId);
}
return subjects;
},
set: function (newValue) {
// 当设置选中的专题信息时，先清空 value 对象中的 subjectProductRelationList 数组，然后根据新传入的值构建新的关联对象数组，每个对象包含选中的专题 ID
this.value.subjectProductRelationList = [];
for (let i = 0; i < newValue.length; i++) {
this.value.subjectProductRelationList.push({subjectId: newValue[i]});
}
}
},
// 计算属性，用于获取选中的优选信息，从 value 对象中的 prefrenceAreaProductRelationList 数组提取优选区域 ID 组成新数组返回
selectPrefrenceArea: {
get: function () {
let prefrenceAreas = [];
if (this.value.prefrenceAreaProductRelationList == null || this.value.prefrenceAreaProductRelationList.length <= 0) {
return prefrenceAreas;
}
for (let i = 0; i < this.value.prefrenceAreaProductRelationList.length; i++) {
prefrenceAreas.push(this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId);
}
return prefrenceAreas;
},
set: function (newValue) {
// 当设置选中的优选信息时，先清空 value 对象中的 prefrenceAreaProductRelationList 数组，然后根据新传入的值构建新的关联对象数组，每个对象包含选中的优选区域 ID
this.value.prefrenceAreaProductRelationList = [];
for (let i = 0; i < newValue.length; i++) {
this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId: newValue[i]});
}
}
}
},
methods: {
// 过滤方法，用于 el-transfer 穿梭框组件的过滤功能，根据输入的查询字符串（query）判断在数据项（item）的标签中是否存在匹配内容，返回布尔值
filterMethod(query, item) {
return item.label.indexOf(query) > -1;
},
getSubjectList() {
// 调用 fetchSubjectList 函数获取专题列表数据，成功后对返回的数据进行处理，构建适合穿梭框使用的数据源格式（包含标签和键）
fetchSubjectList().then(response => {
let list = response.data;
for (let i = 0; i < list.length; i++) {
this.subjectList.push({
label: list[i].title,
key: list[i].id
});
}
});
},
getPrefrenceAreaList() {
// 调用 fetchPrefrenceAreaList 函数获取优选区域列表数据，成功后对返回的数据进行处理，构建适合穿梭框使用的数据源格式（包含标签和键）
fetchPrefrenceAreaList().then(response => {
let list = response.data;
for (let i = 0; i < list.length; i++) {
this.prefrenceAreaList.push({
label: list[i].name,
key: list[i].id
});
}
});
},
handlePrev() {
// 触发父组件的 prevStep 事件，通常用于回退到上一步操作，比如返回填写商品属性的步骤
this.$emit('prevStep')
},
handleFinishCommit() {
// 触发父组件的 finishCommit 事件，并传递当前是否处于编辑模式（isEdit）的参数，通常用于提交商品相关信息的操作，父组件可根据该参数判断是编辑提交还是新建提交
this.$emit('finishCommit', this.isEdit);
}
}
}
</script>
<style scoped>
/* 这里的样式部分设置了 scoped 属性，表示样式仅作用于当前组件内部的元素，目前为空，可根据组件的设计需求添加具体的样式规则，比如对表单内各元素、穿梭框等的样式调整，使其在页面中呈现出符合设计预期的外观效果 */
</style>

601
pms/product/components/ProductSaleDetail.vue
Unescape View File

@ -1,601 +0,0 @@
<template>
<div style="margin-top: 50px">
<el-form :model="value" ref="productSaleForm" label-width="120px" class="form-inner-container" size="small">
<el-form-item label="赠送积分：">
<el-input v-model="value.giftPoint"></el-input>
</el-form-item>
<el-form-item label="赠送成长值：">
<el-input v-model="value.giftGrowth"></el-input>
</el-form-item>
<el-form-item label="积分购买限制：">
<el-input v-model="value.usePointLimit"></el-input>
</el-form-item>
<el-form-item label="预告商品：">
<el-switch
v-model="value.previewStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="商品上架：">
<el-switch
v-model="value.publishStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="商品推荐：">
<span style="margin-right: 10px">新品</span>
<el-switch
v-model="value.newStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
<span style="margin-left: 10px;margin-right: 10px">推荐</span>
<el-switch
v-model="value.recommandStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="服务保证：">
<el-checkbox-group v-model="selectServiceList">
<el-checkbox :label="1">无忧退货</el-checkbox>
<el-checkbox :label="2">快速退款</el-checkbox>
<el-checkbox :label="3">免费包邮</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="详细页标题：">
<el-input v-model="value.detailTitle"></el-input>
</el-form-item>
<el-form-item label="详细页描述：">
<el-input v-model="value.detailDesc"></el-input>
</el-form-item>
<el-form-item label="商品关键字：">
<el-input v-model="value.keywords"></el-input>
</el-form-item>
<el-form-item label="商品备注：">
<el-input v-model="value.note" type="textarea" :autoSize="true"></el-input>
</el-form-item>
<el-form-item label="选择优惠方式：">
<el-radio-group v-model="value.promotionType" size="small">
<el-radio-button :label="0">无优惠</el-radio-button>
<el-radio-button :label="1">特惠促销</el-radio-button>
<el-radio-button :label="2">会员价格</el-radio-button>
<el-radio-button :label="3">阶梯价格</el-radio-button>
<el-radio-button :label="4">满减价格</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-show="value.promotionType===1">
<div>
开始时间：
<el-date-picker
v-model="value.promotionStartTime"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择开始时间">
</el-date-picker>
</div>
<div class="littleMargin">
结束时间：
<el-date-picker
v-model="value.promotionEndTime"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择结束时间">
</el-date-picker>
</div>
<div class="littleMargin">
促销价格：
<el-input style="width: 220px" v-model="value.promotionPrice" placeholder="输入促销价格"></el-input>
</div>
</el-form-item>
<el-form-item v-show="value.promotionType===2">
<div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}">
{{item.memberLevelName}}：
<el-input v-model="item.memberPrice" style="width: 200px"></el-input>
</div>
</el-form-item>
<el-form-item v-show="value.promotionType===3">
<el-table :data="value.productLadderList"
style="width: 80%" border>
<el-table-column
label="数量"
align="center"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.count"></el-input>
</template>
</el-table-column>
<el-table-column
label="折扣"
align="center"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.discount"></el-input>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button>
<el-button type="text" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item v-show="value.promotionType===4">
<el-table :data="value.productFullReductionList"
style="width: 80%" border>
<el-table-column
label="满"
align="center"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.fullPrice"></el-input>
</template>
</el-table-column>
<el-table-column
label="立减"
align="center"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.reducePrice"></el-input>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button>
<el-button type="text" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
<el-button type="primary" size="medium" @click="handleNext">下一步，填写商品属性</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
export default {
name: "ProductSaleDetail",
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
//日期选择器配置
pickerOptions1: {
disabledDate(time) {
return time.getTime() < Date.now();
}
}
}
},
created() {
if (this.isEdit) {
// this.handleEditCreated();
} else {
fetchMemberLevelList({defaultStatus: 0}).then(response => {
let memberPriceList = [];
for (let i = 0; i < response.data.length; i++) {
let item = response.data[i];
memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
}
this.value.memberPriceList = memberPriceList;
});
}
},
computed: {
//选中的服务保证
selectServiceList: {
get() {
let list = [];
if (this.value.serviceIds === undefined || this.value.serviceIds == null || this.value.serviceIds === '') return list;
let ids = this.value.serviceIds.split(',');
for (let i = 0; i < ids.length; i++) {
list.push(Number(ids[i]));
}
return list;
},
set(newValue) {
let serviceIds = '';
if (newValue != null && newValue.length > 0) {
for (let i = 0; i < newValue.length; i++) {
serviceIds += newValue[i] + ',';
}
if (serviceIds.endsWith(',')) {
serviceIds = serviceIds.substr(0, serviceIds.length - 1)
}
this.value.serviceIds = serviceIds;
} else {
this.value.serviceIds = null;
}
}
}
},
methods: {
handleEditCreated() {
let ids = this.value.serviceIds.split(',');
console.log('handleEditCreated', ids);
for (let i = 0; i < ids.length; i++) {
this.selectServiceList.push(Number(ids[i]));
}
},
handleRemoveProductLadder(index, row) {
let productLadderList = this.value.productLadderList;
if (productLadderList.length === 1) {
productLadderList.pop();
productLadderList.push({
count: 0,
discount: 0,
price: 0
})
} else {
productLadderList.splice(index, 1);
}
},
handleAddProductLadder(index, row) {
let productLadderList = this.value.productLadderList;
if (productLadderList.length < 3) {
productLadderList.push({
count: 0,
discount: 0,
price: 0
})
} else {
this.$message({
message: '最多只能添加三条',
type: 'warning'
});
}
},
handleRemoveFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList;
if (fullReductionList.length === 1) {
fullReductionList.pop();
fullReductionList.push({
fullPrice: 0,
reducePrice: 0
});
} else {
fullReductionList.splice(index, 1);
}
},
handleAddFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList;
if (fullReductionList.length < 3) {
fullReductionList.push({
fullPrice: 0,
reducePrice: 0
});
} else {
this.$message({
message: '最多只能添加三条',
type: 'warning'
});
}
},
handlePrev() {
this.$emit('prevStep')
},
handleNext() {
this.$emit('nextStep')
}
}
}
</script>
<style scoped>
.littleMargin {
margin-top: 10px;
}
</style>
#abc
<template>
<!-- 外层的 div 元素，设置了距离顶部 50px 的 margin，用于在页面布局上与其他元素产生间隔 -->
<div style="margin-top: 50px">
<!-- el-form 表单组件，用于收集和展示商品促销相关信息。绑定数据模型为 value，设置了表单引用名、标签宽度、类名以及尺寸为小 -->
<el-form :model="value" ref="productSaleForm" label-width="120px" class="form-inner-container" size="small">
<!-- 表单项，标签显示为“赠送积分：”，内部使用输入框收集赠送积分的数量信息 -->
<el-form-item label="赠送积分：">
<el-input v-model="value.giftPoint"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“赠送成长值：”，内部使用输入框收集赠送成长值的数量信息 -->
<el-form-item label="赠送成长值：">
<el-input v-model="value.giftGrowth"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“积分购买限制：”，内部使用输入框收集积分购买限制的相关信息 -->
<el-form-item label="积分购买限制：">
<el-input v-model="value.usePointLimit"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“预告商品：”，内部使用 el-switch 开关组件来控制商品是否为预告状态，通过设置不同的激活值和非激活值来表示开关的两种状态 -->
<el-form-item label="预告商品：">
<el-switch
v-model="value.previewStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<!-- 表单项，标签显示为“商品上架：”，内部使用 el-switch 开关组件来控制商品是否上架，通过设置不同的激活值和非激活值来表示开关的两种状态 -->
<el-form-item label="商品上架：">
<el-switch
v-model="value.publishStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<!-- 表单项，标签显示为“商品推荐：”，包含多个开关组件，分别用于控制商品是否为新品以及是否推荐，通过设置不同的激活值和非激活值来表示开关的两种状态，并在开关之间添加了文字提示间隔 -->
<el-form-item label="商品推荐：">
<span style="margin-right: 10px">新品</span>
<el-switch
v-model="value.newStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
<span style="margin-left: 10px;margin-right: 10px">推荐</span>
<el-switch
v-model="value.recommandStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<!-- 表单项，标签显示为“服务保证：”，内部使用 el-checkbox-group 复选框组组件，提供了几个固定的服务选项供用户选择，用于选择商品的服务保证内容 -->
<el-form-item label="服务保证：">
<el-checkbox-group v-model="selectServiceList">
<el-checkbox :label="1">无忧退货</el-checkbox>
<el-checkbox :label="2">快速退款</el-checkbox>
<el-checkbox :label="3">免费包邮</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 表单项，标签显示为“详细页标题：”，内部使用输入框收集商品详细页标题信息 -->
<el-form-item label="详细页标题：">
<el-input v-model="value.detailTitle"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“详细页描述：”，内部使用输入框收集商品详细页描述信息 -->
<el-form-item label="详细页描述：">
<el-input v-model="value.detailDesc"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品关键字：”，内部使用输入框收集商品关键字信息 -->
<el-form-item label="商品关键字：">
<el-input v-model="value.keywords"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品备注：”，内部使用可自动调整大小的文本域输入框收集商品备注信息 -->
<el-form-item label="商品备注：">
<el-input v-model="value.note" type="textarea" :autoSize="true"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“选择优惠方式：”，内部使用 el-radio-group 单选框组组件，提供了几种不同的优惠方式选项供用户选择，用于确定商品采用的优惠方式 -->
<el-form-item label="选择优惠方式：">
<el-radio-group v-model="value.promotionType" size="small">
<el-radio-button :label="0">无优惠</el-radio-button>
<el-radio-button :label="1">特惠促销</el-radio-button>
<el-radio-button :label="2">会员价格</el-radio-button>
<el-radio-button :label="3">阶梯价格</el-radio-button>
<el-radio-button :label="4">满减价格</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 根据商品优惠方式（promotionType）的值判断是否显示，当值为 1（特惠促销）时显示该部分内容，用于设置特惠促销的相关时间和价格信息 -->
<el-form-item v-show="value.promotionType===1">
<div>
开始时间：
<!-- el-date-picker 日期时间选择器组件，绑定 v-model 为 value.promotionStartTime，设置选择器类型为 datetime，关联日期禁用配置，有占位提示文字，用于选择特惠促销开始时间 -->
<el-date-picker
v-model="value.promotionStartTime"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择开始时间">
</el-date-picker>
</div>
<div class="littleMargin">
结束时间：
<!-- el-date-picker 日期时间选择器组件，绑定 v-model 为 value.promotionEndTime，设置选择器类型为 datetime，关联日期禁用配置，有占位提示文字，用于选择特惠促销结束时间 -->
<el-date-picker
v-model="value.promotionEndTime"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择结束时间">
</el-date-picker>
</div>
<div class="littleMargin">
促销价格：
<!-- 输入框组件，设置宽度为 220px，绑定 v-model 为 value.promotionPrice，有占位提示文字，用于输入特惠促销价格 -->
<el-input style="width: 220px" v-model="value.promotionPrice" placeholder="输入促销价格"></el-input>
</div>
</el-form-item>
<!-- 根据商品优惠方式（promotionType）的值判断是否显示，当值为 2（会员价格）时显示该部分内容，通过循环展示每个会员等级对应的价格输入框，用于设置不同会员等级的商品价格 -->
<el-form-item v-show="value.promotionType===2">
<div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}">
{{item.memberLevelName}}：
<el-input v-model="item.memberPrice" style="width: 200px"></el-input>
</div>
</el-form-item>
<!-- 根据商品优惠方式（promotionType）的值判断是否显示，当值为 3（阶梯价格）时显示该部分内容，使用 el-table 表格组件展示和操作商品阶梯价格相关信息，包含数量、折扣等列以及添加、删除操作按钮 -->
<el-form-item v-show="value.promotionType===3">
<el-table :data="value.productLadderList"
style="width: 80%" border>
<!-- 表格列，标签显示为“数量”，内容居中对齐，宽度为 120px，内部使用输入框展示和编辑阶梯价格对应的数量信息 -->
<el-table-column
label="数量"
align="center"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.count"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“折扣”，内容居中对齐，宽度为 120px，内部使用输入框展示和编辑阶梯价格对应的折扣信息 -->
<el-table-column
label="折扣"
align="center"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.discount"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“操作”，内容居中对齐，内部包含删除和添加按钮，点击可对当前行的阶梯价格数据进行相应操作 -->
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button>
<el-button type="text" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 根据商品优惠方式（promotionType）的值判断是否显示，当值为 4（满减价格）时显示该部分内容，使用 el-table 表格组件展示和操作商品满减价格相关信息，包含满减条件、立减金额等列以及添加、删除操作按钮 -->
<el-form-item v-show="value.promotionType===4">
<el-table :data="value.productFullReductionList"
style="width: 80%" border>
<!-- 表格列，标签显示为“满”，内容居中对齐，宽度为 120px，内部使用输入框展示和编辑满减价格对应的满金额信息 -->
<el-table-column
label="满"
align="center"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.fullPrice"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“立减”，内容居中对齐，宽度为 120px，内部使用输入框展示和编辑满减价格对应的立减金额信息 -->
<el-table-column
label="立减"
align="center"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.reducePrice"></el-input>
</template>
</el-table-column>
<!-- 表格列，标签显示为“操作”，内容居中对齐，内部包含删除和添加按钮，点击可对当前行的满减价格数据进行相应操作 -->
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button>
<el-button type="text" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 表单项，用于放置操作按钮，设置文本居中对齐，包含“上一步”和“下一步”按钮，点击分别触发对应的方法，用于在商品信息填写流程中进行步骤切换 -->
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
<el-button type="primary" size="medium" @click="handleNext">下一步，填写商品属性</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 从 @/api/memberLevel 模块中导入名为 fetchList 的函数，并将其重命名为 fetchMemberLevelList，用于获取会员等级列表数据
import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
export default
name: "ProductSaleDetail",
props: {
// 接收一个名为 value 的对象类型属性，用于绑定表单相关的数据，方便在组件内外传递和操作商品促销相关的信息
value: Object,
// 接收一个名为 isEdit 的布尔类型属性，默认值为 false，用于判断当前是否处于编辑商品的操作模式
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
// 日期选择器的配置对象，用于控制日期选择的可选项等情况，这里设置了 disabledDate 函数，用于禁用当前时间之前的日期，即只能选择当前时间及之后的日期作为促销时间等用途
pickerOptions1: {
disabledDate(time) {
return time.getTime() < Date.now();
}
}
};
},
created() {
if (this.isEdit) {
// 此处原代码注释掉了 handleEditCreated 方法调用，可能原本计划在编辑模式下执行一些初始化相关操作，但目前未启用，可根据实际需求完善此处逻辑
// this.handleEditCreated();
} else {
// 如果不是编辑模式，调用 fetchMemberLevelList 函数获取会员等级列表数据，传入默认状态参数，成功后对返回的数据进行处理，构建适合用于会员价格设置的格式（包含会员等级 ID 和名称），并赋值给 value.memberPriceList
fetchMemberLevelList({defaultStatus: 0}).then(response => {
let memberPriceList = [];
for (let i = 0; i < response.data.length; i++) {
let item = response.data[i];
memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
}
this.value.memberPriceList = memberPriceList;
});
}
},
computed: {
// 计算属性，用于获取和设置选中的服务保证信息，通过对 value.serviceIds 字符串进行处理（分割、转换类型等操作），实现与复选框组组件的双向数据绑定，方便获取和更新服务保证的选择情况
selectServiceList: {
get() {
let list = [];
if (this.value.serviceIds === undefined || this.value.serviceIds == null || this.value.serviceIds === '') return list;
let ids = this.value.serviceIds.split(',');
for (let i = 0; i < ids.length; i++) {
list.push(Number(ids[i]));
}
return list;
},
set(newValue) {
let serviceIds = '';
if (newValue!= null && newValue.length > 0) {
for (let i = 0; i < newValue.length; i++) {
serviceIds += newValue[i] + ',';
}
if (serviceIds.endsWith(',')) {
serviceIds = serviceIds.substr(0, serviceIds.length - 1)
}
this.value.serviceIds = serviceIds;
} else {
this.value.serviceIds = null;
}
}
}
},
methods:
handleEditCreated() {
let ids = this.value.serviceIds.split(',');
console.log('handleEditCreated', ids);
for (let i = 0; i < ids.length; i++) {
this.selectServiceList.push(Number(ids[i]));
}
},
handleRemoveProductLadder(index, row) {
let productLadderList = this.value.productLadderList;
// 如果商品阶梯价格列表只有一条数据，先移除该条数据，然后再添加一条默认的（数量、折扣、价格都为 0）数据，保证至少有一条数据存在
if (productLadderList.length === 1) {
productLadderList.pop();
productLadderList.push({
count: 0,
discount: 0,
price: 0
})
} else {
// 如果不止一条数据，直接根据索引移除指定行的数据
productLadderList.splice(index, 1);
}
},
handleAddProductLadder(index, row)
let productLadderList = this.value.productLadderList;
// 如果商品阶梯价格列表长度小于 3（可能限制最多添加三条数据），则添加一条默认的（数量、折扣、价格都为 0）数据
if (productLadderList.length < 3)
productLadderList.push
count: 0,
discount:

908
pms/product/index.vue
Unescape View File

@ -1,908 +0,0 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float: right"
@click="handleSearchList()"
type="primary"
size="small">
查询结果
</el-button>
<el-button
style="float: right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="输入搜索：">
<el-input style="width: 203px" v-model="listQuery.keyword" placeholder="商品名称"></el-input>
</el-form-item>
<el-form-item label="商品货号：">
<el-input style="width: 203px" v-model="listQuery.productSn" placeholder="商品货号"></el-input>
</el-form-item>
<el-form-item label="商品分类：">
<el-cascader
clearable
v-model="selectProductCateValue"
:options="productCateOptions">
</el-cascader>
</el-form-item>
<el-form-item label="商品品牌：">
<el-select v-model="listQuery.brandId" placeholder="请选择品牌" clearable>
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上架状态：">
<el-select v-model="listQuery.publishStatus" placeholder="全部" clearable>
<el-option
v-for="item in publishStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="审核状态：">
<el-select v-model="listQuery.verifyStatus" placeholder="全部" clearable>
<el-option
v-for="item in verifyStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button
class="btn-add"
@click="handleAddProduct()"
size="mini">
添加
</el-button>
</el-card>
<div class="table-container">
<el-table ref="productTable"
:data="list"
style="width: 100%"
@selection-change="handleSelectionChange"
v-loading="listLoading"
border>
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="商品图片" width="120" align="center">
<template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
</el-table-column>
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">
<p>{{scope.row.name}}</p>
<p>品牌：{{scope.row.brandName}}</p>
</template>
</el-table-column>
<el-table-column label="价格/货号" width="120" align="center">
<template slot-scope="scope">
<p>价格：￥{{scope.row.price}}</p>
<p>货号：{{scope.row.productSn}}</p>
</template>
</el-table-column>
<el-table-column label="标签" width="140" align="center">
<template slot-scope="scope">
<p>上架：
<el-switch
@change="handlePublishStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.publishStatus">
</el-switch>
</p>
<p>新品：
<el-switch
@change="handleNewStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.newStatus">
</el-switch>
</p>
<p>推荐：
<el-switch
@change="handleRecommendStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommandStatus">
</el-switch>
</p>
</template>
</el-table-column>
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<el-table-column label="SKU库存" width="100" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleShowSkuEditDialog(scope.$index, scope.row)" circle></el-button>
</template>
</el-table-column>
<el-table-column label="销量" width="100" align="center">
<template slot-scope="scope">{{scope.row.sale}}</template>
</el-table-column>
<el-table-column label="审核状态" width="100" align="center">
<template slot-scope="scope">
<p>{{scope.row.verifyStatus | verifyStatusFilter}}</p>
<p>
<el-button
type="text"
@click="handleShowVerifyDetail(scope.$index, scope.row)">审核详情
</el-button>
</p>
</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<p>
<el-button
size="mini"
@click="handleShowProduct(scope.$index, scope.row)">查看
</el-button>
<el-button
size="mini"
@click="handleUpdateProduct(scope.$index, scope.row)">编辑
</el-button>
</p>
<p>
<el-button
size="mini"
@click="handleShowLog(scope.$index, scope.row)">日志
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</p>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<el-dialog
title="编辑货品信息"
:visible.sync="editSkuInfo.dialogVisible"
width="40%">
<span>商品货号：</span>
<span>{{editSkuInfo.productSn}}</span>
<el-input placeholder="按sku编号搜索" v-model="editSkuInfo.keyword" size="small" style="width: 50%;margin-left: 20px">
<el-button slot="append" icon="el-icon-search" @click="handleSearchEditSku"></el-button>
</el-input>
<el-table style="width: 100%;margin-top: 20px"
:data="editSkuInfo.stockList"
border>
<el-table-column
label="SKU编号"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.skuCode"></el-input>
</template>
</el-table-column>
<el-table-column
v-for="(item,index) in editSkuInfo.productAttr"
:label="item.name"
:key="item.id"
align="center">
<template slot-scope="scope">
{{getProductSkuSp(scope.row,index)}}
</template>
</el-table-column>
<el-table-column
label="销售价格"
width="80"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.price"></el-input>
</template>
</el-table-column>
<el-table-column
label="商品库存"
width="80"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.stock"></el-input>
</template>
</el-table-column>
<el-table-column
label="库存预警值"
width="100"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.lowStock"></el-input>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="editSkuInfo.dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleEditSkuConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
fetchList,
updateDeleteStatus,
updateNewStatus,
updateRecommendStatus,
updatePublishStatus
} from '@/api/product'
import {fetchList as fetchSkuStockList,update as updateSkuStockList} from '@/api/skuStock'
import {fetchList as fetchProductAttrList} from '@/api/productAttr'
import {fetchList as fetchBrandList} from '@/api/brand'
import {fetchListWithChildren} from '@/api/productCate'
const defaultListQuery = {
keyword: null,
pageNum: 1,
pageSize: 5,
publishStatus: null,
verifyStatus: null,
productSn: null,
productCategoryId: null,
brandId: null
};
export default {
name: "productList",
data() {
return {
editSkuInfo:{
dialogVisible:false,
productId:null,
productSn:'',
productAttributeCategoryId:null,
stockList:[],
productAttr:[],
keyword:null
},
operates: [
{
label: "商品上架",
value: "publishOn"
},
{
label: "商品下架",
value: "publishOff"
},
{
label: "设为推荐",
value: "recommendOn"
},
{
label: "取消推荐",
value: "recommendOff"
},
{
label: "设为新品",
value: "newOn"
},
{
label: "取消新品",
value: "newOff"
},
{
label: "转移到分类",
value: "transferCategory"
},
{
label: "移入回收站",
value: "recycle"
}
],
operateType: null,
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: true,
selectProductCateValue: null,
multipleSelection: [],
productCateOptions: [],
brandOptions: [],
publishStatusOptions: [{
value: 1,
label: '上架'
}, {
value: 0,
label: '下架'
}],
verifyStatusOptions: [{
value: 1,
label: '审核通过'
}, {
value: 0,
label: '未审核'
}]
}
},
created() {
this.getList();
this.getBrandList();
this.getProductCateList();
},
watch: {
selectProductCateValue: function (newValue) {
if (newValue != null && newValue.length == 2) {
this.listQuery.productCategoryId = newValue[1];
} else {
this.listQuery.productCategoryId = null;
}
}
},
filters: {
verifyStatusFilter(value) {
if (value === 1) {
return '审核通过';
} else {
return '未审核';
}
}
},
methods: {
getProductSkuSp(row, index) {
let spData = JSON.parse(row.spData);
if(spData!=null&&index<spData.length){
return spData[index].value;
}else{
return null;
}
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
getBrandList() {
fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
this.brandOptions = [];
let brandList = response.data.list;
for (let i = 0; i < brandList.length; i++) {
this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
}
});
},
getProductCateList() {
fetchListWithChildren().then(response => {
let list = response.data;
this.productCateOptions = [];
for (let i = 0; i < list.length; i++) {
let children = [];
if (list[i].children != null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id});
}
}
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
}
});
},
handleShowSkuEditDialog(index,row){
this.editSkuInfo.dialogVisible=true;
this.editSkuInfo.productId=row.id;
this.editSkuInfo.productSn=row.productSn;
this.editSkuInfo.productAttributeCategoryId = row.productAttributeCategoryId;
this.editSkuInfo.keyword=null;
fetchSkuStockList(row.id,{keyword:this.editSkuInfo.keyword}).then(response=>{
this.editSkuInfo.stockList=response.data;
});
if(row.productAttributeCategoryId!=null){
fetchProductAttrList(row.productAttributeCategoryId,{type:0}).then(response=>{
this.editSkuInfo.productAttr=response.data.list;
});
}
},
handleSearchEditSku(){
fetchSkuStockList(this.editSkuInfo.productId,{keyword:this.editSkuInfo.keyword}).then(response=>{
this.editSkuInfo.stockList=response.data;
});
},
handleEditSkuConfirm(){
if(this.editSkuInfo.stockList==null||this.editSkuInfo.stockList.length<=0){
this.$message({
message: '暂无sku信息',
type: 'warning',
duration: 1000
});
return
}
this.$confirm('是否要进行修改', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
updateSkuStockList(this.editSkuInfo.productId,this.editSkuInfo.stockList).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
this.editSkuInfo.dialogVisible=false;
});
});
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleAddProduct() {
this.$router.push({path:'/pms/addProduct'});
},
handleBatchOperate() {
if(this.operateType==null){
this.$message({
message: '请选择操作类型',
type: 'warning',
duration: 1000
});
return;
}
if(this.multipleSelection==null||this.multipleSelection.length<1){
this.$message({
message: '请选择要操作的商品',
type: 'warning',
duration: 1000
});
return;
}
this.$confirm('是否要进行该批量操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids=[];
for(let i=0;i<this.multipleSelection.length;i++){
ids.push(this.multipleSelection[i].id);
}
switch (this.operateType) {
case this.operates[0].value:
this.updatePublishStatus(1,ids);
break;
case this.operates[1].value:
this.updatePublishStatus(0,ids);
break;
case this.operates[2].value:
this.updateRecommendStatus(1,ids);
break;
case this.operates[3].value:
this.updateRecommendStatus(0,ids);
break;
case this.operates[4].value:
this.updateNewStatus(1,ids);
break;
case this.operates[5].value:
this.updateNewStatus(0,ids);
break;
case this.operates[6].value:
break;
case this.operates[7].value:
this.updateDeleteStatus(1,ids);
break;
default:
break;
}
this.getList();
});
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handlePublishStatusChange(index, row) {
let ids = [];
ids.push(row.id);
this.updatePublishStatus(row.publishStatus, ids);
},
handleNewStatusChange(index, row) {
let ids = [];
ids.push(row.id);
this.updateNewStatus(row.newStatus, ids);
},
handleRecommendStatusChange(index, row) {
let ids = [];
ids.push(row.id);
this.updateRecommendStatus(row.recommandStatus, ids);
},
handleResetSearch() {
this.selectProductCateValue = [];
this.listQuery = Object.assign({}, defaultListQuery);
},
handleDelete(index, row){
this.$confirm('是否要进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = [];
ids.push(row.id);
this.updateDeleteStatus(1,ids);
});
},
handleUpdateProduct(index,row){
this.$router.push({path:'/pms/updateProduct',query:{id:row.id}});
},
handleShowProduct(index,row){
console.log("handleShowProduct",row);
},
handleShowVerifyDetail(index,row){
console.log("handleShowVerifyDetail",row);
},
handleShowLog(index,row){
console.log("handleShowLog",row);
},
updatePublishStatus(publishStatus, ids) {
let params = new URLSearchParams();
params.append('ids', ids);
params.append('publishStatus', publishStatus);
updatePublishStatus(params).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
updateNewStatus(newStatus, ids) {
let params = new URLSearchParams();
params.append('ids', ids);
params.append('newStatus', newStatus);
updateNewStatus(params).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
updateRecommendStatus(recommendStatus, ids) {
let params = new URLSearchParams();
params.append('ids', ids);
params.append('recommendStatus', recommendStatus);
updateRecommendStatus(params).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
updateDeleteStatus(deleteStatus, ids) {
let params = new URLSearchParams();
params.append('ids', ids);
params.append('deleteStatus', deleteStatus);
updateDeleteStatus(params).then(response => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
});
this.getList();
}
}
}
</script>
<style></style>
#abc
<template>
<!-- 最外层的 div 元素，设置了类名为 `app-container`，用于包裹整个页面内容，作为整体布局的容器 -->
<div class="app-container">
<!-- 使用 Element UI 的 `el-card` 组件创建一个卡片式容器，类名为 `filter-container`，设置阴影效果为无，用于放置筛选搜索相关的内容 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用一个图标元素，这里是 Element UI 的搜索图标，用于在视觉上提示筛选搜索功能 -->
<i class="el-icon-search"></i>
<!-- 显示“筛选搜索”文字，用于明确功能区域的用途 -->
<span>筛选搜索</span>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置样式为右浮动，点击时触发 `handleSearchList` 方法，按钮类型为主要按钮（通常有突出显示效果），尺寸为小，用于执行查询结果的操作 -->
<el-button
style="float: right"
@click="handleSearchList()"
type="primary"
size="small">
查询结果
</el-button>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置样式为右浮动且与右侧有 15px 的间隔，点击时触发 `handleResetSearch` 方法，尺寸为小，用于执行重置筛选条件的操作 -->
<el-button
style="float: right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 使用 Element UI 的 `el-form` 表单组件，设置表单为内联模式（表单元素在一行显示），绑定数据模型为 `listQuery`，尺寸为小，标签宽度为 140px，用于放置各种筛选条件输入框 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单项，标签显示为“输入搜索：”，内部使用 `el-input` 输入框组件，设置宽度为 203px，双向绑定 `listQuery.keyword` 数据，有占位提示文字“商品名称”，用于输入搜索关键词，按商品名称进行筛选 -->
<el-form-item label="输入搜索：">
<el-input style="width: 203px" v-model="listQuery.keyword" placeholder="商品名称"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品货号：”，内部使用 `el-input` 输入框组件，设置宽度为 203px，双向绑定 `listQuery.productSn` 数据，有占位提示文字“商品货号”，用于输入商品货号进行筛选 -->
<el-form-item label="商品货号：">
<el-input style="width: 203px" v-model="listQuery.productSn" placeholder="商品货号"></el-input>
</el-form-item>
<!-- 表单项，标签显示为“商品分类：”，内部使用 `el-cascader` 级联选择器组件，设置可清除选择内容，双向绑定 `selectProductCateValue` 数据，其选项数据由 `productCateOptions` 提供，用于选择商品分类进行筛选 -->
<el-form-item label="商品分类：">
<el-cascader
clearable
v-model="selectProductCateValue"
:options="productCateOptions">
</el-cascader>
</el-form-item>
<!-- 表单项，标签显示为“商品品牌：”，内部使用 `el-select` 下拉选择框组件，双向绑定 `listQuery.brandId` 数据，有占位提示文字“请选择品牌”，设置可清除选择内容，其下拉选项通过循环 `brandOptions` 数组生成，用于选择商品品牌进行筛选 -->
<el-form-item label="商品品牌：">
<el-select v-model="listQuery.brandId" placeholder="请选择品牌" clearable>
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 表单项，标签显示为“上架状态：”，内部使用 `el-select` 下拉选择框组件，双向绑定 `listQuery.publishStatus` 数据，有占位提示文字“全部”，设置可清除选择内容，其下拉选项由 `publishStatusOptions` 数组提供，用于选择商品上架状态进行筛选 -->
<el-form-item label="上架状态：">
<el-select v-model="listQuery.publishStatus" placeholder="全部" clearable>
<el-option
v-for="item in publishStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 表单项，标签显示为“审核状态：”，内部使用 `el-select` 下拉选择框组件，双向绑定 `listQuery.verifyStatus` 数据，有占位提示文字“全部”，设置可清除选择内容，其下拉选项由 `verifyStatusOptions` 数组提供，用于选择商品审核状态进行筛选 -->
<el-form-item label="审核状态：">
<el-select v-model="listQuery.verifyStatus" placeholder="全部" clearable>
<el-option
v-for="item in verifyStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 使用 Element UI 的 `el-card` 组件创建一个卡片式容器，类名为 `operate-container`，设置阴影效果为无，用于放置数据列表操作相关的内容 -->
<el-card class="operate-container" shadow="never">
<!-- 使用一个图标元素，这里是 Element UI 的票务图标，可能用于视觉上提示与数据操作相关的功能 -->
<i class="el-icon-tickets"></i>
<!-- 显示“数据列表”文字，用于明确功能区域的用途 -->
<span>数据列表</span>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置类名为 `btn-add`，点击时触发 `handleAddProduct` 方法，尺寸为迷你型，用于执行添加商品的操作 -->
<el-button
class="btn-add"
@click="handleAddProduct()"
size="mini">
添加
</el-button>
</el-card>
<!-- 一个 div 元素，设置类名为 `table-container`，用于包裹数据列表表格，作为表格展示的容器 -->
<div class="table-container">
<!-- 使用 Element UI 的 `el-table` 表格组件，设置了表格引用名为 `productTable`，绑定数据为 `list`，宽度为 100%，监听行选择变化事件 `selection-change` 并触发 `handleSelectionChange` 方法，根据 `listLoading` 变量控制加载状态显示，设置表格边框，用于展示商品数据列表 -->
<el-table ref="productTable"
:data="list"
style="width: 100%"
@selection-change="handleSelectionChange"
v-loading="listLoading"
border>
<!-- 表格列，类型为选择列（可勾选行），宽度为 60px，内容居中对齐，用于选择表格中的行数据 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 表格列，标签显示为“编号”，宽度为 100px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品编号信息 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列，标签显示为“商品图片”，宽度为 120px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品图片信息，图片设置了高度为 80px -->
<el-table-column label="商品图片" width="120" align="center">
<template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
</el-table-column>
<!-- 表格列，标签显示为“商品名称”，内容居中对齐，通过插槽作用域获取当前行数据，展示商品名称以及品牌信息 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">
<p>{{scope.row.name}}</p>
<p>品牌：{{scope.row.brandName}}</p>
</template>
</el-table-column>
<!-- 表格列，标签显示为“价格/货号”，宽度为 120px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品价格和货号信息 -->
<el-table-column label="价格/货号" width="120" align="center">
<template slot-scope="scope">
<p>价格：￥{{scope.row.price}}</p>
<p>货号：{{scope.row.productSn}}</p>
</template>
</el-table-column>
<!-- 表格列，标签显示为“标签”，宽度为 140px，内容居中对齐，通过插槽作用域获取当前行数据，包含多个开关组件，用于展示和操作商品的上架、新品、推荐等状态信息 -->
<el-table-column label="标签" width="140" align="center">
<template slot-scope="scope">
<p>上架：
<!-- 使用 `el-switch` 开关组件，监听开关状态变化事件 `change` 并触发对应的方法，设置激活值和非激活值，双向绑定当前行的 `publishStatus` 数据，用于控制商品上架状态 -->
<el-switch
@change="handlePublishStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.publishStatus">
</el-switch>
</p>
<p>新品：
<!-- 使用 `el-switch` 开关组件，监听开关状态变化事件 `change` 并触发对应的方法，设置激活值和非激活值，双向绑定当前行的 `newStatus` 数据，用于控制商品是否为新品状态 -->
<el-switch
@change="handleNewStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.newStatus">
</el-switch>
</p>
<p>推荐：
<!-- 使用 `el-switch` 开关组件，监听开关状态变化事件 `change` 并触发对应的方法，设置激活值和非激活值，双向绑定当前行的 `recommandStatus` 数据，用于控制商品是否为推荐状态 -->
<el-switch
@change="handleRecommendStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommandStatus">
</el-switch>
</p>
</template>
</el-table-column>
<!-- 表格列，标签显示为“排序”，宽度为 100px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品排序信息 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 表格列，标签显示为“SKU 库存”，宽度为 100px，内容居中对齐，通过插槽作用域获取当前行数据，包含一个编辑按钮，点击触发 `handleShowSkuEditDialog` 方法，用于查看和编辑商品 SKU 库存信息 -->
<el-table-column label="SKU 库存" width="100" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleShowSkuEditDialog(scope.$index, scope.row)" circle></el-button>
</template>
</el-table-column>
<!-- 表格列，标签显示为“销量”，宽度为 100px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品销量信息 -->
<el-table-column label="销量" width="100" align="center">
<template slot-scope="scope">{{scope.row.sale}}</template>
</el-table-column>
<!-- 表格列，标签显示为“审核状态”，宽度为 100px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品审核状态信息，同时包含一个查看审核详情的按钮，点击触发 `handleShowVerifyDetail` 方法 -->
<el-table-column label="审核状态" width="100" align="center">
<template slot-scope="scope">
<p>{{scope.row.verifyStatus | verifyStatusFilter}}</p>
<p>
<el-button
type="text"
@click="handleShowVerifyDetail(scope.$index, scope.row)">审核详情
</el-button>
</p>
</template>
</el-table-column>
<!-- 表格列，标签显示为“操作”，宽度为 160px，内容居中对齐，通过插槽作用域获取当前行数据，包含多个操作按钮，如查看、编辑、查看日志、删除等，分别触发对应的方法，用于对商品进行各种操作 -->
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<p>
<el-button
size="mini"
@click="handleShowProduct(scope.$index, scope.row)">查看
</el-button>
<el-button
size="mini"
@click="handleUpdateProduct(scope.$index, scope.row)">编辑
</el-button>
</p>
<p>
<el-button
size="mini"
@click="handleShowLog(scope.$index, scope.row)">日志
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</p>
</template>
</el-table-column>
</el-table>
</div>
<!-- 一个 div 元素，设置类名为 `batch-operate-container`，用于放置批量操作相关的内容，如选择批量操作类型和执行操作的按钮 -->
<div class="batch-operate-container">
<!-- 使用 Element UI 的 `el-select` 下拉选择框组件，尺寸为小，双向绑定 `operateType` 数据，有占位提示文字“批量操作”，其下拉选项通过循环 `operates` 数组生成，用于选择批量操作的类型 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置样式为左距 20px，类名为 `search-button`，点击时触发 `handleBatchOperate` 方法，按钮类型为主要按钮（通常有突出显示效果），尺寸为小，用于执行确定批量操作的动作 -->
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- 一个 div 元素，设置类名为 `pagination-container`，用于包裹分页组件，作为分页功能的容器 -->
<div class="pagination-container">
<!-- 使用 Element UI 的 `el-pagination` 分页组件，设置背景色样式，监听页面尺寸变化和当前页变化事件并分别触发对应的方法，设置分页布局样式，绑定页面尺寸、可选页面尺寸数组、当前页码以及总数据量等数据，用于实现数据列表的分页功能 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<!-- 使用 Element UI 的 `el-dialog` 对话框组件，设置标题为“编辑货品信息”，通过双向绑定控制对话框的显示隐藏状态，宽度设置为 40%，用于展示和编辑商品 SKU 库存相关的详细信息 -->
<el-dialog
title="编辑货品信息"
:visible.sync="editSkuInfo.dialogVisible"
width="40%">
<span>商品货号：

30
pms/product/update.vue
Unescape View File

@ -1,30 +0,0 @@
<template> 
<product-detail :is-edit='true'></product-detail>
</template>
<script>
import ProductDetail from './components/ProductDetail'
export default {
name: 'updateProduct',
components: { ProductDetail }
}
</script>
<style>
</style>
#abc
<template>
<!-- 此处使用了名为 `product-detail` 的自定义组件，通过 `:is-edit='true'` 属性绑定，向 `product-detail` 组件传递了一个名为 `is-edit` 的属性，值为 `true`，意味着当前是编辑商品的操作模式（与新增商品模式相区别），`product-detail` 组件应该会根据这个属性来展示相应的编辑界面以及执行对应的逻辑 -->
<product-detail :is-edit='true'></product-detail>
</template>
<script>
// 从相对路径 `./components/` 下导入名为 `ProductDetail` 的组件，这个组件想必已经在对应的路径下被定义好了，其内部应该包含了商品详情相关的各种功能逻辑，比如展示商品已有的各项信息、提供可编辑的输入框等交互元素来修改商品信息，以及处理保存等编辑相关的操作逻辑等内容。
import ProductDetail from './components/ProductDetail';
export default {
name: 'updateProduct',
// 在组件的 `components` 属性中注册了 `ProductDetail` 组件，使得在当前组件（`updateProduct`）的模板中可以直接使用 `<product-detail>` 标签来调用该组件，这是 Vue.js 里实现组件复用的常规做法，方便将复杂功能模块拆分成独立组件进行管理和使用。
components: { ProductDetail }
}
</script>
<style>
/* 这里的样式部分目前为空，可根据 `updateProduct` 组件整体的视觉呈现需求，添加相应的 CSS 样式规则，例如对整个组件布局进行调整，设置组件内各元素的字体、颜色、间距等样式属性，使其在页面中展现出符合预期的外观效果 */
</style>

32
pms/productAttr/addProductAttr.vue
Unescape View File

@ -1,32 +0,0 @@
<template>
<product-attr-detail :is-edit='false'></product-attr-detail>
</template>
<script>
import ProductAttrDetail from './components/ProductAttrDetail'
export default {
name: 'addProductAttr',
components: { ProductAttrDetail }
}
</script>
<style scoped>
</style>
#abc
<template>
<!-- 使用名为 `product-attr-detail` 的自定义组件，通过 `:is-edit='false'` 属性绑定，向该组件传递了名为 `is-edit` 的属性，值设为 `false`，表示当前处于添加商品属性的操作模式（区别于编辑商品属性模式）。`product-attr-detail` 组件会依据这个属性值来展示对应的界面以及执行相应的添加相关逻辑 -->
<product-attr-detail :is-edit='false'></product-attr-detail>
</template>
<script>
// 从相对路径 `./components/` 下导入名为 `ProductAttrDetail` 的组件，这个组件应该已经在对应路径中被定义好，里面包含了与商品属性详情相关的功能逻辑，例如展示商品属性添加的表单界面、处理属性值的输入校验以及实现添加属性到系统等操作逻辑。
import ProductAttrDetail from './components/ProductAttrDetail';
export default {
name: 'addProductAttr',
// 在当前组件的 `components` 属性中注册 `ProductAttrDetail` 组件，这使得在 `addProductAttr` 组件的模板里能够直接通过 `<product-attr-detail>` 标签来调用它，遵循了 Vue.js 组件化开发中复用组件的常规方式，便于对不同功能模块进行独立开发和管理。
components: { ProductAttrDetail }
}
</script>
<style scoped>
/* 这里样式部分设置了 `scoped` 属性，意味着样式只会应用到当前组件内部的元素上。目前该部分样式为空，后续可以根据 `addProductAttr` 组件的视觉设计要求，添加对应的 CSS 样式规则，像设置组件内文本的字体、颜色，表单元素的布局、边框样式等，让组件在页面中呈现出期望的外观效果 */
</style>

185
pms/productAttr/components/ProductAttrDetail.vue
Unescape View File

@ -1,185 +0,0 @@
<template>
<el-card class="form-container" shadow="never">
<el-form :model="productAttr" :rules="rules" ref="productAttrFrom" label-width="150px">
<el-form-item label="属性名称：" prop="name">
<el-input v-model="productAttr.name"></el-input>
</el-form-item>
<el-form-item label="商品类型：">
<el-select v-model="productAttr.productAttributeCategoryId" placeholder="请选择">
<el-option
v-for="item in productAttrCateList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分类筛选样式:">
<el-radio-group v-model="productAttr.filterType">
<el-radio :label="0">普通</el-radio>
<el-radio :label="1">颜色</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="能否进行检索:">
<el-radio-group v-model="productAttr.searchType">
<el-radio :label="0">不需要检索</el-radio>
<el-radio :label="1">关键字检索</el-radio>
<el-radio :label="2">范围检索</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="商品属性关联:">
<el-radio-group v-model="productAttr.relatedStatus">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="属性是否可选:">
<el-radio-group v-model="productAttr.selectType">
<el-radio :label="0">唯一</el-radio>
<el-radio :label="1">单选</el-radio>
<el-radio :label="2">复选</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="属性值的录入方式:">
<el-radio-group v-model="productAttr.inputType">
<el-radio :label="0">手工录入</el-radio>
<el-radio :label="1">从下面列表中选择</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="属性值可选值列表:">
<el-input :autosize="true" type="textarea" v-model="inputListFormat"></el-input>
</el-form-item>
<el-form-item label="是否支持手动新增:">
<el-radio-group v-model="productAttr.handAddStatus">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序属性：">
<el-input v-model="productAttr.sort"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('productAttrFrom')">提交</el-button>
<el-button v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
import {fetchList} from '@/api/productAttrCate'
import {createProductAttr,getProductAttr,updateProductAttr} from '@/api/productAttr'
const defaultProductAttr = {
filterType: 0,
handAddStatus: 0,
inputList: '',
inputType: 0,
name: '',
productAttributeCategoryId: 0,
relatedStatus: 0,
searchType: 0,
selectType: 0,
sort: 0,
type: 0
};
export default {
name: "ProductAttrDetail",
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
productAttr: Object.assign({}, defaultProductAttr),
rules: {
name: [
{required: true, message: '请输入属性名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
]
},
productAttrCateList: null,
inputListFormat:null
}
},
created() {
if(this.isEdit){
getProductAttr(this.$route.query.id).then(response => {
this.productAttr = response.data;
this.inputListFormat = this.productAttr.inputList.replace(/,/g,'\n');
});
}else{
this.resetProductAttr();
}
this.getCateList();
},
watch:{
inputListFormat: function (newValue, oldValue) {
newValue = newValue.replace(/\n/g,',');
this.productAttr.inputList = newValue;
}
},
methods: {
getCateList() {
let listQuery = {pageNum: 1, pageSize: 100};
fetchList(listQuery).then(response => {
this.productAttrCateList = response.data.list;
});
},
resetProductAttr() {
this.productAttr = Object.assign({}, defaultProductAttr);
this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
this.productAttr.type = Number(this.$route.query.type);
},
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.isEdit){
updateProductAttr(this.$route.query.id,this.productAttr).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
this.$router.back();
});
}else{
createProductAttr(this.productAttr).then(response=>{
this.$message({
message: '提交成功',
type: 'success',
duration: 1000
});
this.resetForm('productAttrFrom');
});
}
});
} else {
this.$message({
message: '验证失败',
type: 'error',
duration: 1000
});
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.resetProductAttr();
}
},
}
</script>
<style scoped>
</style>

463
pms/productAttr/index.vue
Unescape View File

@ -1,463 +0,0 @@
<template> 
<div class="app-container">
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<span style="margin-top: 5px">数据列表</span>
<el-button
class="btn-add"
@click="addProductAttrCate()"
size="mini">
添加
</el-button>
</el-card>
<div class="table-container">
<el-table ref="productAttrCateTable"
style="width: 100%"
:data="list"
v-loading="listLoading"
border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="类型名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="属性数量" width="200" align="center">
<template slot-scope="scope">{{scope.row.attributeCount==null?0:scope.row.attributeCount}}</template>
</el-table-column>
<el-table-column label="参数数量" width="200" align="center">
<template slot-scope="scope">{{scope.row.paramCount==null?0:scope.row.paramCount}}</template>
</el-table-column>
<el-table-column label="设置" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="getAttrList(scope.$index, scope.row)">属性列表
</el-button>
<el-button
size="mini"
@click="getParamList(scope.$index, scope.row)">参数列表
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
:before-close="handleClose()"
width="30%">
<el-form ref="productAttrCatForm":model="productAttrCate" :rules="rules" label-width="120px">
<el-form-item label="类型名称" prop="name">
<el-input v-model="productAttrCate.name" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleConfirm('productAttrCatForm')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {fetchList,createProductAttrCate,deleteProductAttrCate,updateProductAttrCate} from '@/api/productAttrCate'
export default {
name: 'productAttrCateList',
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
pageNum: 1,
pageSize: 5
},
dialogVisible: false,
dialogTitle:'',
productAttrCate:{
name:'',
id:null
},
rules: {
name: [
{ required: true, message: '请输入类型名称', trigger: 'blur' }
]
}
}
},
created() {
this.getList();
},
methods: {
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
addProductAttrCate() {
this.dialogVisible = true;
this.dialogTitle = "添加类型";
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleDelete(index, row) {
this.$confirm('是否要删除该品牌', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteProductAttrCate(row.id).then(response=>{
this.$message({
message: '删除成功',
type: 'success',
duration:1000
});
this.getList();
});
});
},
handleUpdate(index, row) {
this.dialogVisible = true;
this.dialogTitle = "编辑类型";
this.productAttrCate.name = row.name;
this.productAttrCate.id = row.id;
},
getAttrList(index, row) {
this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:0}})
},
getParamList(index, row) {
this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:1}})
},
handleConfirm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
let data = new URLSearchParams();
data.append("name",this.productAttrCate.name);
if(this.dialogTitle==="添加类型"){
createProductAttrCate(data).then(response=>{
this.$message({
message: '添加成功',
type: 'success',
duration:1000
});
this.dialogVisible = false;
this.getList();
});
}else{
updateProductAttrCate(this.productAttrCate.id,data).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration:1000
});
this.dialogVisible = false;
this.getList();
});
}
} else {
console.log('error submit!!');
return false;
}
});
},
handleClose(){
if (!this.dialogVisible && this.$refs.productAttrCatForm) {
this.$refs.productAttrCatForm.clearValidate()
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
#abc
<template>
<!-- 最外层的 div 元素，设置了类名为 `app-container`，作为整个页面内容的容器，用于整体布局和包裹内部的各个功能模块 -->
<div class="app-container">
<!-- 使用 Element UI 的 `el-card` 组件创建一个卡片式容器，类名为 `operate-container`，设置阴影效果为无，用于放置与数据列表操作相关的内容，比如添加按钮等 -->
<el-card class="operate-container" shadow="never">
<!-- 使用 Element UI 的图标组件，展示票务图标，并设置了距顶部 5px 的 margin，用于在视觉上提示与数据操作相关的功能，起到一定的表意作用 -->
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<!-- 显示“数据列表”文字，同样设置了距顶部 5px 的 margin，用于明确此卡片容器内操作主要针对的数据列表功能区域 -->
<span style="margin-top: 5px">数据列表</span>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置类名为 `btn-add`，点击时触发 `addProductAttrCate` 方法，尺寸为迷你型，用于执行添加商品属性分类的操作 -->
<el-button
class="btn-add"
@click="addProductAttrCate()"
size="mini">
添加
</el-button>
</el-card>
<!-- 一个 div 元素，设置类名为 `table-container`，作为表格展示的容器，用于包裹下面的 `el-table` 组件，呈现数据列表内容 -->
<div class="table-container">
<!-- 使用 Element UI 的 `el-table` 表格组件，设置了表格引用名为 `productAttrCateTable`，宽度为 100%，绑定数据为 `list`，根据 `listLoading` 变量控制加载状态显示，设置表格边框，用于展示商品属性分类相关的数据列表 -->
<el-table ref="productAttrCateTable"
style="width: 100%"
:data="list"
v-loading="listLoading"
border>
<!-- 表格列，标签显示为“编号”，宽度为 100px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品属性分类的编号信息 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列，标签显示为“类型名称”，内容居中对齐，通过插槽作用域获取当前行数据，展示商品属性分类的类型名称信息 -->
<el-table-column label="类型名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列，标签显示为“属性数量”，宽度为 200px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品属性分类对应的属性数量信息，如果数量为 `null`，则显示为 0 -->
<el-table-column label="属性数量" width="200" align="center">
<template slot-scope="scope">{{scope.row.attributeCount==null?0:scope.row.attributeCount}}</template>
</el-table-column>
<!-- 表格列，标签显示为“参数数量”，宽度为 200px，内容居中对齐，通过插槽作用域获取当前行数据，展示商品属性分类对应的参数数量信息，如果数量为 `null`，则显示为 0 -->
<el-table-column label="参数数量" width="200" align="center">
<template slot-scope="scope">{{scope.row.paramCount==null?0:scope.row.paramCount}}</template>
</el-table-column>
<!-- 表格列，标签显示为“设置”，宽度为 200px，内容居中对齐，通过插槽作用域获取当前行数据，包含两个按钮，分别点击可跳转到对应的属性列表和参数列表页面，用于查看相应详细信息 -->
<el-table-column label="设置" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="getAttrList(scope.$index, scope.row)">属性列表
</el-button>
<el-button
size="mini"
@click="getParamList(scope.$index, scope.row)">参数列表
</el-button>
</template>
</el-table-column>
<!-- 表格列，标签显示为“操作”，宽度为 200px，内容居中对齐，通过插槽作用域获取当前行数据，包含编辑和删除两个按钮，分别点击可触发对应的编辑和删除操作方法 -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 一个 div 元素，设置类名为 `pagination-container`，用于包裹分页组件，作为分页功能的容器 -->
<div class="pagination-container">
<!-- 使用 Element UI 的 `el-pagination` 分页组件，设置背景色样式，监听页面尺寸变化和当前页变化事件并分别触发对应的方法，设置分页布局样式，绑定页面尺寸、可选页面尺寸数组、当前页码以及总数据量等数据，用于实现数据列表的分页功能 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<!-- 使用 Element UI 的 `el-dialog` 对话框组件，通过双向绑定控制对话框的标题、显示隐藏状态以及关闭前的操作，宽度设置为 30%，用于弹出添加或编辑商品属性分类的表单界面 -->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
:before-close="handleClose()"
width="30%">
<!-- 使用 Element UI 的 `el-form` 表单组件，设置了表单引用名、绑定数据模型为 `productAttrCate`、关联表单验证规则 `rules`，标签宽度为 120px，用于放置添加或编辑商品属性分类的输入框等表单元素 -->
<el-form ref="productAttrCatForm":model="productAttrCate" :rules="rules" label-width="120px">
<!-- 表单项，标签显示为“类型名称”，指定了验证属性 `prop` 为 `name`，内部使用 `el-input` 输入框组件，双向绑定 `productAttrCate.name` 数据，设置自动补全功能为关闭，用于输入商品属性分类的名称 -->
<el-form-item label="类型名称" prop="name">
<el-input v-model="productAttrCate.name" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<!-- 使用 Element UI 的 `el-button` 按钮组件，点击时隐藏对话框，用于取消添加或编辑操作 -->
<el-button @click="dialogVisible = false">取 消</el-button>
<!-- 使用 Element UI 的 `el-button` 按钮组件，点击时触发 `handleConfirm` 方法并传入表单引用名，按钮类型为主要按钮（通常有突出显示效果），用于确认添加或编辑操作 -->
<el-button type="primary" @click="handleConfirm('productAttrCatForm')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// 从 `@/api/productAttrCate` 模块中导入多个函数，分别用于获取商品属性分类列表、创建商品属性分类、删除商品属性分类以及更新商品属性分类，这些函数应该是与后端 API 进行交互的接口调用函数
import {fetchList,createProductAttrCate,deleteProductAttrCate,updateProductAttrCate} from '@/api/productAttrCate';
export default {
name: 'productAttrCateList',
data() {
return {
// 用于存储商品属性分类数据列表，初始为 `null`，后续会通过接口获取数据进行填充
list: null,
// 用于存储数据列表的总条数，初始为 `null`，同样会在获取数据后更新
total: null,
// 用于控制数据列表加载状态的布尔变量，初始为 `true`，表示正在加载，在数据获取成功后会设置为 `false`
listLoading: true,
// 用于存储数据列表查询相关的参数，包含当前页码和每页显示数量，初始设置了默认的页码和每页显示数量
listQuery: {
pageNum: 1,
pageSize: 5
},
// 通过双向绑定控制对话框显示隐藏状态的布尔变量，初始为 `false`，表示对话框默认不显示
dialogVisible: false,
// 用于存储对话框标题的变量，初始为空字符串，会根据操作（添加或编辑）动态设置相应的标题内容
dialogTitle: '',
// 用于存储商品属性分类相关信息的对象，包含名称和 ID，初始时名称为空字符串，ID 为 `null`，在编辑操作时会填充对应的数据
productAttrCate: {
name: '',
id: null
},
// 定义表单验证规则，这里针对 `name` 属性设置了必填验证规则，当输入框失去焦点（`blur` 触发）时，如果未输入内容，会提示“请输入类型名称”的错误信息
rules: {
name: [
{ required: true, message: '请输入类型名称', trigger: 'blur' }
]
}
};
},
created() {
// 在组件创建时调用 `getList` 方法，用于获取商品属性分类的数据列表，触发与后端接口交互获取初始数据
this.getList();
},
methods: {
getList() {
// 将 `listLoading` 设置为 `true`，表示数据正在加载中，通常会在页面上显示加载动画等提示
this.listLoading = true;
// 调用 `fetchList` 函数，传入 `listQuery` 参数（包含当前页码和每页数量等查询条件），与后端接口交互获取商品属性分类数据列表，成功获取后更新 `listLoading` 为 `false`，并将返回的数据中的列表数据和总条数分别赋值给 `list` 和 `total` 属性
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
addProductAttrCate() {
// 当点击添加按钮时，将 `dialogVisible` 设置为 `true`，使对话框显示出来，同时将 `dialogTitle` 设置为“添加类型”，明确操作是添加商品属性分类
this.dialogVisible = true;
this.dialogTitle = "添加类型";
},
handleSizeChange(val) {
// 当分页组件的页面尺寸发生变化时触发此方法，将 `listQuery` 中的 `pageNum` 设置为 1（回到第一页），并更新 `pageSize` 为新的页面尺寸值 `val`，然后调用 `getList` 方法重新获取数据，实现分页数据更新
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
// 当分页组件的当前页码发生变化时触发此方法，将 `listQuery` 中的 `pageNum` 更新为新的页码值 `val`，接着调用 `getList` 方法获取对应页码的数据，实现分页切换功能
this.listQuery.pageNum = val;
this.getList();
},
handleDelete(index, row) {
// 当点击删除按钮时，弹出确认对话框，提示用户是否要删除该商品属性分类，用户点击确定后，调用 `deleteProductAttrCate` 函数，传入要删除的商品属性分类的 `id`，与后端接口交互执行删除操作，成功后显示删除成功的提示信息，并调用 `getList` 方法刷新数据列表
this.$confirm('是否要删除该品牌', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteProductAttrCate(row.id).then(response => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
this.getList();
});
});
},
handleUpdate(index, row) {
// 当点击编辑按钮时，将 `dialogVisible` 设置为 `true`，使对话框显示出来，将 `dialogTitle` 设置为“编辑类型”，表明当前操作是编辑商品属性分类，同时将当前行的商品属性分类名称和 ID 赋值给 `productAttrCate` 对象，用于在对话框表单中显示已有的数据供编辑
this.dialogVisible = true;
this.dialogTitle = "编辑类型";
this.productAttrCate.name = row.name;
this.productAttrCate.id = row.id;
},
getAttrList(index, row) {
// 当点击属性列表按钮时，通过 `$router.push` 方法进行路由跳转，跳转到 `/pms/productAttrList` 路径，并传递查询参数 `cid`（商品属性分类 ID）、`cname`（商品属性分类名称）以及 `type`（值为 0，表示查看属性列表相关操作），用于导航到对应的属性列表页面
this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:0}})
},
getParamList(index, row) {
// 当点击参数列表按钮时，通过 `$router.push` 方法进行路由跳转，跳转到 `/pms/productAttrList` 路径，并传递查询参数 `cid`（商品属性分类 ID）、`cname`（商品属性分类名称）以及 `type`（值为 1，表示查看参数列表相关操作），用于导航到对应的参数列表页面
this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:1}})
},
handleConfirm(formName) {
// 此方法用于处理对话框中表单的确认操作，通过调用 `$refs[formName].validate` 方法对指定表单进行验证，如果验证通过（`valid` 为 `true`），则根据对话框标题判断是添加还是编辑操作，若是添加操作（`dialogTitle` 为“添加类型”），调用 `createProductAttrCate` 函数，传入表单数据，与后端接口交互创建新的商品属性分类；若是编辑操作，调用 `updateProductAttrCate` 函数，传入商品属性分类 ID 和表单数据，与后端接口交互更新商品属性分类信息，操作成功后均会显示相应的成功提示信息，隐藏对话框并刷新数据列表；若验证不通过（`valid` 为 `false`），则在控制台输出错误提示信息并返回 `false`，阻止后续操作
this.$refs[formName].validate((valid) => {
if (valid) {
let data = new URLSearchParams();
data.append("name",this.productAttrCate.name);
if(this.dialogTitle==="添加类型"){
createProductAttrCate(data).then(response => {
this.$message({
message: '添加成功',
type: 'success',
duration: 1000
});
this.dialogVisible = false;
this.getList();
});
}else{
updateProductAttrCate(this.productAttrCate.id,data).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
this.dialogVisible = false;
this.getList();
});
}
} else {
console.log('error submit!!');
return false;
}
});
},
handleClose() {
// 在对话框关闭前触发此方法，如果对话框当前不显示且表单引用存在（`$refs.productAttrCatForm`），则调用表单的 `clearValidate` 方法清除表单验证相关的状态，比如错误提示等，为下次打开表单做准备
if (!this.dialogVisible && this.$refs.productAttrCatForm) {
this.$refs.productAttrCatForm.clearValidate()
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

455
pms/productAttr/productAttrList.vue
Unescape View File

@ -1,455 +0,0 @@
<template> 
<div class="app-container">
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<span style="margin-top: 5px">数据列表</span>
<el-button
class="btn-add"
@click="addProductAttr()"
size="mini">
添加
</el-button>
</el-card>
<div class="table-container">
<el-table ref="productAttrTable"
:data="list"
style="width: 100%"
@selection-change="handleSelectionChange"
v-loading="listLoading"
border>
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="属性名称" width="140" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="商品类型" width="140" align="center">
<template slot-scope="scope">{{$route.query.cname}}</template>
</el-table-column>
<el-table-column label="属性是否可选" width="120" align="center">
<template slot-scope="scope">{{scope.row.selectType|selectTypeFilter}}</template>
</el-table-column>
<el-table-column label="属性值的录入方式" width="150" align="center">
<template slot-scope="scope">{{scope.row.inputType|inputTypeFilter}}</template>
</el-table-column>
<el-table-column label="可选值列表" align="center">
<template slot-scope="scope">{{scope.row.inputList}}</template>
</el-table-column>
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {fetchList, deleteProductAttr} from '@/api/productAttr'
export default {
name: 'productAttrList',
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
pageNum: 1,
pageSize: 5,
type: this.$route.query.type
},
operateType: null,
multipleSelection: [],
operates: [
{
label: "删除",
value: "deleteProductAttr"
}
]
}
},
created() {
this.getList();
},
methods: {
getList() {
this.listLoading = true;
fetchList(this.$route.query.cid, this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
addProductAttr() {
this.$router.push({path:'/pms/addProductAttr',query:{cid:this.$route.query.cid,type:this.$route.query.type}});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleBatchOperate() {
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
if (this.operateType !== 'deleteProductAttr') {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
this.handleDeleteProductAttr(ids);
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleUpdate(index, row) {
this.$router.push({path:'/pms/updateProductAttr',query:{id:row.id}});
},
handleDeleteProductAttr(ids) {
this.$confirm('是否要删除该属性', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let data = new URLSearchParams();
data.append("ids", ids);
deleteProductAttr(data).then(response => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
this.getList();
});
});
},
handleDelete(index, row) {
let ids = [];
ids.push(row.id);
this.handleDeleteProductAttr(ids);
},
},
filters: {
inputTypeFilter(value) {
if (value === 1) {
return '从列表中选取';
} else {
return '手工录入'
}
},
selectTypeFilter(value) {
if (value === 1) {
return '单选';
} else if (value === 2) {
return '多选';
} else {
return '唯一'
}
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
#abc
<template>
<!-- 最外层的 div 元素，类名为 `app-container`，作为整个页面内容的容器，用于包裹内部各个功能模块，实现整体页面布局 -->
<div class="app-container">
<!-- 使用 Element UI 的 `el-card` 组件创建一个卡片式容器，类名为 `operate-container`，设置阴影效果为 `never`（无阴影），用于放置与数据列表操作相关的元素，比如操作按钮等 -->
<el-card class="operate-container" shadow="never">
<!-- 使用 Element UI 的图标组件展示票务图标，并设置 `margin-top: 5px`，使其在垂直方向上距顶部有一定间距，在视觉上辅助提示该区域与数据操作相关 -->
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<!-- 显示“数据列表”文字，同样设置 `margin-top: 5px`，明确该卡片容器内的操作是针对下方展示的数据列表，起到功能说明作用 -->
<span style="margin-top: 5px">数据列表</span>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置类名为 `btn-add`，点击时触发 `addProductAttr` 方法，尺寸为 `mini`（迷你型），用于执行添加商品属性的操作 -->
<el-button
class="btn-add"
@click="addProductAttr()"
size="mini">
添加
</el-button>
</el-card>
<!-- div 元素，类名为 `table-container`，作为表格展示的容器，用于包裹 `el-table` 组件，使其在页面中以特定样式展示数据列表 -->
<div class="table-container">
<!-- 使用 Element UI 的 `el-table` 表格组件，设置引用名为 `productAttrTable`，绑定数据为 `list`，宽度为 `100%`，监听 `selection-change` 事件（当表格行选择状态改变时）并触发 `handleSelectionChange` 方法，根据 `listLoading` 变量控制加载状态显示（如显示加载动画等），设置表格边框样式，用于展示商品属性相关的数据列表 -->
<el-table ref="productAttrTable"
:data="list"
style="width: 100%"
@selection-change="handleSelectionChange"
v-loading="listLoading"
border>
<!-- 表格列，类型为 `selection`（选择列），宽度为 `60px`，内容在单元格中居中对齐，用于在表格中提供勾选行的功能，方便进行批量操作等选择行的场景 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 表格列，标签显示为“编号”，宽度为 `100px`，内容在单元格中居中对齐，通过插槽作用域（`slot-scope`）获取当前行数据，展示商品属性的编号信息 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列，标签显示为“属性名称”，宽度为 `140px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，展示商品属性的名称信息 -->
<el-table-column label="属性名称" width="140" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列，标签显示为“商品类型”，宽度为 `140px`，内容在单元格中居中对齐，通过路由对象（`$route`）的查询参数（`query`）获取 `cname` 的值来展示商品类型信息，表明该属性所属的商品类型 -->
<el-table-column label="商品类型" width="140" align="center">
<template slot-scope="scope">{{$route.query.cname}}</template>
</el-table-column>
<!-- 表格列，标签显示为“属性是否可选”，宽度为 `120px`，内容在单元格中居中对齐，通过管道符（`|`）使用 `selectTypeFilter` 过滤器对 `scope.row.selectType` 的值进行处理后展示，用于以更友好的文字形式展示属性可选类型（如单选、多选等） -->
<el-table-column label="属性是否可选" width="120" align="center">
<template slot-scope="scope">{{scope.row.selectType|selectTypeFilter}}</template>
</el-table-column>
<!-- 表格列，标签显示为“属性值的录入方式”，宽度为 `150px`，内容在单元格中居中对齐，通过管道符使用 `inputTypeFilter` 过滤器对 `scope.row.inputType` 的值进行处理后展示，用于以更友好的文字形式展示属性值录入方式（如从列表中选取、手工录入等） -->
<el-table-column label="属性值的录入方式" width="150" align="center">
<template slot-scope="scope">{{scope.row.inputType|inputTypeFilter}}</template>
</el-table-column>
<!-- 表格列，标签显示为“可选值列表”，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，直接展示商品属性的可选值列表信息 -->
<el-table-column label="可选值列表" align="center">
<template slot-scope="scope">{{scope.row.inputList}}</template>
</el-table-column>
<!-- 表格列，标签显示为“排序”，宽度为 `100px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，展示商品属性在排序方面的相关信息，比如用于确定属性展示顺序等 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 表格列，标签显示为“操作”，宽度为 `200px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，包含编辑和删除两个按钮，分别点击可触发对应的 `handleUpdate` 和 `handleDelete` 方法，用于对单个商品属性进行编辑或删除操作 -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- div 元素，类名为 `batch-operate-container`，用于放置批量操作相关的元素，如选择批量操作类型的下拉框和执行操作的按钮 -->
<div class="batch-operate-container">
<!-- 使用 Element UI 的 `el-select` 下拉选择框组件，尺寸为 `small`（小型），双向绑定 `operateType` 数据，设置占位提示文字为“批量操作”，其下拉选项通过循环 `operates` 数组生成，用于选择批量操作的具体类型 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置样式 `margin-left: 20px`（距左侧 20px 间距），类名为 `search-button`，点击时触发 `handleBatchOperate` 方法，按钮类型为 `primary`（主要按钮，通常有突出显示效果），尺寸为 `small`，用于执行确定批量操作的动作 -->
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- div 元素，类名为 `pagination-container`，作为分页功能的容器，用于包裹 `el-pagination` 分页组件，实现数据列表的分页展示 -->
<div class="pagination-container">
<!-- 使用 Element UI 的 `el-pagination` 分页组件，设置 `background`（背景色样式），监听 `size-change`（页面尺寸变化）和 `current-change`（当前页码变化）事件，并分别触发对应的 `handleSizeChange` 和 `handleCurrentChange` 方法，设置分页布局样式，绑定页面尺寸、可选页面尺寸数组、当前页码以及总数据量等数据，实现数据列表的分页功能 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 从 `@/api/productAttr` 模块中导入 `fetchList`（用于获取商品属性列表）和 `deleteProductAttr`（用于删除商品属性）两个函数，这些函数通常是与后端 API 进行交互的接口调用函数
import {fetchList, deleteProductAttr} from '@/api/productAttr';
export default {
name: 'productAttrList',
data() {
return {
// 用于存储商品属性数据列表，初始值为 `null`，后续会通过调用接口获取数据并赋值，以展示在表格中
list: null,
// 用于存储数据列表的总条数，初始值为 `null`，同样会在获取数据后更新相应的值，用于分页等相关功能展示
total: null,
// 用于控制数据列表加载状态的布尔变量，初始值为 `true`，表示正在加载数据，当数据获取完成后会设置为 `false`，可以配合页面上的加载动画等提示用户数据加载情况
listLoading: true,
// 用于存储数据列表查询相关的参数，包含当前页码、每页显示数量以及类型（从路由查询参数中获取 `type` 值赋给它），初始设置了默认的页码和每页显示数量
listQuery: {
pageNum: 1,
pageSize: 5,
type: this.$route.query.type
},
// 用于存储批量操作类型的变量，通过双向绑定与页面上的下拉选择框关联，初始值为 `null`，用户选择后会更新相应的值
operateType: null,
// 用于存储表格中多选的行数据，通过监听 `selection-change` 事件更新，方便后续进行批量操作时获取选择的行数据
multipleSelection: [],
// 定义了可进行的批量操作选项数组，每个元素包含 `label`（显示名称）和 `value`（对应操作的值），目前仅定义了“删除”这一操作选项
operates: [
{
label: "删除",
value: "deleteProductAttr"
}
]
};
},
created() {
// 在组件创建时调用 `getList` 方法，用于获取商品属性的数据列表，触发与后端接口的交互，获取初始展示的数据
this.getList();
},
methods: {
getList() {
// 将 `listLoading` 设置为 `true`，表示开始加载数据，可在此处结合页面展示加载提示，如显示加载动画等
this.listLoading = true;
// 调用 `fetchList` 函数，传入从路由查询参数获取的 `cid`（商品属性所属分类的 ID，可能用于筛选获取对应分类下的属性）以及 `listQuery`（包含当前页码、每页数量等查询条件），与后端接口交互获取商品属性数据列表，成功获取后将 `listLoading` 设置为 `false`，并把返回数据中的列表数据和总条数分别赋值给 `list` 和 `total` 属性
fetchList(this.$route.query.cid, this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
addProductAttr() {
// 当点击添加按钮时，通过 `$router.push` 方法进行路由跳转，跳转到 `/pms/addProductAttr` 路径，并传递查询参数 `cid`（从当前路由查询参数获取，用于指定添加的商品属性所属分类）和 `type`（同样从当前路由查询参数获取，可能用于区分不同类型的属性添加场景），导航到添加商品属性的页面
this.$router.push({path:'/pms/addProductAttr',query:{cid:this.$route.query.cid,type:this.$route.query.type}});
},
handleSelectionChange(val) {
// 当表格行选择状态改变时（如勾选或取消勾选行）触发此方法，将选择的行数据赋值给 `multipleSelection` 变量，方便后续获取用户选择的行，用于批量操作等场景
this.multipleSelection = val;
},
handleBatchOperate() {
// 处理批量操作的方法，首先判断如果用户没有选择任何行（`multipleSelection` 长度小于 1），则弹出提示信息，告知用户需要选择一条记录；接着判断如果选择的批量操作类型不是 `deleteProductAttr`（目前仅定义了这一种批量操作类型），则弹出提示信息，要求用户选择正确的批量操作类型；如果上述条件都满足，则获取选择行的 `id` 组成数组，调用 `handleDeleteProductAttr` 方法进行删除操作
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
if (this.operateType!== 'deleteProductAttr') {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
this.handleDeleteProductAttr(ids);
},
handleSizeChange(val) {
// 当分页组件的页面尺寸（每页显示数量）发生变化时触发此方法，将 `listQuery` 中的 `pageNum` 设置为 1（回到第一页），并更新 `pageSize` 为新的页面尺寸值 `val`，然后调用 `getList` 方法重新获取数据，实现分页数据更新功能
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
// 当分页组件的当前页码发生变化时触发此方法，将 `listQuery` 中的 `pageNum` 更新为新的页码值 `val`，然后调用 `getList` 方法获取对应页码的数据，实现分页切换功能
this.listQuery.pageNum = val;
this.getList();
},
handleUpdate(index, row) {
// 当点击表格中某行的编辑按钮时，通过 `$router.push` 方法进行路由跳转，跳转到 `/pms/updateProductAttr` 路径，并传递查询参数 `id`（当前行商品属性的 ID），导航到编辑该商品属性的页面
this.$router.push({path:'/pms/updateProductAttr',query:{id:row.id}});
},
handleDeleteProductAttr(ids) {
// 处理删除商品属性的方法，首先弹出确认对话框，提示用户是否要删除选择的属性，用户点击确定后，创建 `URLSearchParams` 对象，将需要删除的属性 `ids` 加入参数中，调用 `deleteProductAttr` 函数与后端接口交互执行删除操作，成功后显示删除成功的提示信息，并调用 `getList` 方法刷新数据列表，以更新页面展示的数据
this.$confirm('是否要删除该属性', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let data = new URLSearchParams();
data.append("ids", ids);
deleteProductAttr(data).then(response => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
this.getList();
});
});
},
handleDelete(index, row) {
// 点击表格中某行的删除按钮时调用此方法，首先创建数组 `ids` 并将当前行商品属性的 `id` 加入其中，然后调用 `handleDeleteProductAttr` 方法进行删除操作，实现单个属性的删除功能，复用了批量删除的逻辑
let ids = [];
ids.push(row.id);
this.handleDeleteProductAttr(ids);
}
},
filters:
// 过滤器函数，用于将 `inputType` 的值转换为更

32
pms/productAttr/updateProductAttr.vue
Unescape View File

@ -1,32 +0,0 @@
<template>
<product-attr-detail :is-edit='true'></product-attr-detail>
</template>
<script>
import ProductAttrDetail from './components/ProductAttrDetail'
export default {
name: 'updateProductAttr',
components: { ProductAttrDetail }
}
</script>
<style scoped>
</style>
#abc
<template>
<!-- 使用名为 `product-attr-detail` 的自定义组件，通过 `:is-edit='true'` 属性绑定，向该组件传递了名为 `is-edit` 的属性，值设为 `true`，表示当前处于编辑商品属性的操作模式（区别于新增商品属性模式）。`product-attr-detail` 组件会依据这个属性值来展示对应的编辑界面以及执行相应的编辑相关逻辑 -->
<product-attr-detail :is-edit='true'></product-attr-detail>
</template>
<script>
// 从相对路径 `./components/` 下导入名为 `ProductAttrDetail` 的组件，这个组件应该已经在对应路径中被定义好，里面包含了与商品属性详情相关的功能逻辑，例如展示商品属性已有的各项信息、提供可编辑的输入框等交互元素来修改属性内容，以及处理保存修改等编辑相关的操作逻辑等内容。
import ProductAttrDetail from './components/ProductAttrDetail';
export default {
name: 'updateProductAttr',
// 在当前组件的 `components` 属性中注册 `ProductAttrDetail` 组件，这使得在 `updateProductAttr` 组件的模板里能够直接通过 `<product-attr-detail>` 标签来调用它，遵循了 Vue.js 组件化开发中复用组件的常规方式，便于对不同功能模块进行独立开发和管理。
components: { ProductAttrDetail }
}
</script>
<style scoped>
/* 这里样式部分设置了 `scoped` 属性，意味着样式只会应用到当前组件内部的元素上。目前该部分样式为空，后续可以根据 `updateProductAttr` 组件的视觉设计要求，添加对应的 CSS 样式规则，像设置组件内文本的字体、颜色，表单元素的布局、边框样式等，让组件在页面中呈现出期望的外观效果 */
</style>

31
pms/productCate/add.vue
Unescape View File

@ -1,31 +0,0 @@
<template> 
<product-cate-detail :is-edit='false'></product-cate-detail>
</template>
<script>
import ProductCateDetail from './components/ProductCateDetail'
export default {
name: 'addProductCate',
components: { ProductCateDetail }
}
</script>
<style>
</style>
#abc
<template>
<!-- 使用名为 `product-cate-detail` 的自定义组件，通过 `:is-edit='false'` 属性绑定，向 `product-cate-detail` 组件传递了 `is-edit` 属性，其值为 `false`，这表明当前处于添加商品分类的操作模式（与编辑商品分类模式相区分）。`product-cate-detail` 组件会基于这个属性值，展示出对应的添加商品分类界面，并执行相应的添加相关逻辑 -->
<product-cate-detail :is-edit='false'></product-cate-detail>
</template>
<script>
// 从相对路径 `./components/` 导入名为 `ProductCateDetail` 的组件，该组件在对应的 `./components/` 路径下应该已经事先定义好了，其内部通常包含了与商品分类详情相关的一系列功能逻辑，比如展示添加商品分类所需的表单元素、对输入的分类信息进行格式校验、将新的商品分类信息发送到后端进行保存等操作逻辑，以实现添加商品分类的完整功能。
import ProductCateDetail from './components/ProductCateDetail';
export default {
name: 'addProductCate',
// 在本组件的 `components` 属性里注册 `ProductCateDetail` 组件，这样就能在 `addProductCate` 组件的模板中，直接通过 `<product-cate-detail>` 标签来调用它，这是 Vue.js 组件化开发中常用的复用组件的方式，方便把不同功能的代码拆分成独立的组件，便于后续的开发、维护以及代码的可读性提升。
components: { ProductCateDetail }
}
</script>
<style>
/* 这里的样式部分目前为空，后续可以依据 `addProductCate` 组件整体的视觉呈现要求，添加相应的 CSS 样式规则，例如设置组件在页面中的整体布局样式（如宽度、高度、外边距、内边距等），对组件内文本的字体、字号、颜色等样式属性进行定义，还可以针对各种表单元素（如果有的话）设置其边框、背景色、圆角等外观样式，从而让组件在页面中展现出符合预期的视觉效果 */
</style>

264
pms/productCate/components/ProductCateDetail.vue
Unescape View File

@ -1,264 +0,0 @@
<template>
<el-card class="form-container" shadow="never">
<el-form :model="productCate"
:rules="rules"
ref="productCateFrom"
label-width="150px">
<el-form-item label="分类名称：" prop="name">
<el-input v-model="productCate.name"></el-input>
</el-form-item>
<el-form-item label="上级分类：">
<el-select v-model="productCate.parentId"
placeholder="请选择分类">
<el-option
v-for="item in selectProductCateList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数量单位：">
<el-input v-model="productCate.productUnit"></el-input>
</el-form-item>
<el-form-item label="排序：">
<el-input v-model="productCate.sort"></el-input>
</el-form-item>
<el-form-item label="是否显示：">
<el-radio-group v-model="productCate.showStatus">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否显示在导航栏：">
<el-radio-group v-model="productCate.navStatus">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="分类图标：">
<single-upload v-model="productCate.icon"></single-upload>
</el-form-item>
<el-form-item v-for="(filterProductAttr, index) in filterProductAttrList"
:label="index | filterLabelFilter"
:key="filterProductAttr.key"
>
<el-cascader
clearable
v-model="filterProductAttr.value"
:options="filterAttrs">
</el-cascader>
<el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(filterProductAttr)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button>
</el-form-item>
<el-form-item label="关键词：">
<el-input v-model="productCate.keywords"></el-input>
</el-form-item>
<el-form-item label="分类描述：">
<el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
<el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
import {fetchList, createProductCate, updateProductCate, getProductCate} from '@/api/productCate';
import {fetchListWithAttr} from '@/api/productAttrCate';
import {getProductAttrInfo} from '@/api/productAttr';
import SingleUpload from '@/components/Upload/singleUpload';
const defaultProductCate = {
description: '',
icon: '',
keywords: '',
name: '',
navStatus: 0,
parentId: 0,
productUnit: '',
showStatus: 0,
sort: 0,
productAttributeIdList: []
};
export default {
name: "ProductCateDetail",
components: {SingleUpload},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
productCate: Object.assign({}, defaultProductCate),
selectProductCateList: [],
rules: {
name: [
{required: true, message: '请输入品牌名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
]
},
filterAttrs: [],
filterProductAttrList: [{
value: []
}]
}
},
created() {
if (this.isEdit) {
getProductCate(this.$route.query.id).then(response => {
this.productCate = response.data;
});
getProductAttrInfo(this.$route.query.id).then(response => {
if (response.data != null && response.data.length > 0) {
this.filterProductAttrList = [];
for (let i = 0; i < response.data.length; i++) {
this.filterProductAttrList.push({
key: Date.now() + i,
value: [response.data[i].attributeCategoryId, response.data[i].attributeId]
})
}
}
});
} else {
this.productCate = Object.assign({}, defaultProductCate);
}
this.getSelectProductCateList();
this.getProductAttrCateList();
},
methods: {
getSelectProductCateList() {
fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
this.selectProductCateList = response.data.list;
this.selectProductCateList.unshift({id: 0, name: '无上级分类'});
});
},
getProductAttrCateList() {
fetchListWithAttr().then(response => {
let list = response.data;
for (let i = 0; i < list.length; i++) {
let productAttrCate = list[i];
let children = [];
if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) {
for (let j = 0; j < productAttrCate.productAttributeList.length; j++) {
children.push({
label: productAttrCate.productAttributeList[j].name,
value: productAttrCate.productAttributeList[j].id
})
}
}
this.filterAttrs.push({label: productAttrCate.name, value: productAttrCate.id, children: children});
}
});
},
getProductAttributeIdList() {
//获取选中的筛选商品属性
let productAttributeIdList = [];
for (let i = 0; i < this.filterProductAttrList.length; i++) {
let item = this.filterProductAttrList[i];
if (item.value !== null && item.value.length === 2) {
productAttributeIdList.push(item.value[1]);
}
}
return productAttributeIdList;
},
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
this.productCate.productAttributeIdList = this.getProductAttributeIdList();
updateProductCate(this.$route.query.id, this.productCate).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
this.$router.back();
});
} else {
this.productCate.productAttributeIdList = this.getProductAttributeIdList();
createProductCate(this.productCate).then(response => {
this.$refs[formName].resetFields();
this.resetForm(formName);
this.$message({
message: '提交成功',
type: 'success',
duration: 1000
});
});
}
});
} else {
this.$message({
message: '验证失败',
type: 'error',
duration: 1000
});
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.productCate = Object.assign({}, defaultProductCate);
this.getSelectProductCateList();
this.filterProductAttrList = [{
value: []
}];
},
removeFilterAttr(productAttributeId) {
if (this.filterProductAttrList.length === 1) {
this.$message({
message: '至少要留一个',
type: 'warning',
duration: 1000
});
return;
}
var index = this.filterProductAttrList.indexOf(productAttributeId);
if (index !== -1) {
this.filterProductAttrList.splice(index, 1)
}
},
handleAddFilterAttr() {
if (this.filterProductAttrList.length === 3) {
this.$message({
message: '最多添加三个',
type: 'warning',
duration: 1000
});
return;
}
this.filterProductAttrList.push({
value: null,
key: Date.now()
});
}
},
filters: {
filterLabelFilter(index) {
if (index === 0) {
return '筛选属性：';
} else {
return '';
}
}
}
}
</script>
<style scoped>
</style>

456
pms/productCate/index.vue
Unescape View File

@ -1,456 +0,0 @@
<template>
<div class="app-container">
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<span style="margin-top: 5px">数据列表</span>
<el-button
class="btn-add"
@click="handleAddProductCate()"
size="mini">
添加
</el-button>
</el-card>
<div class="table-container">
<el-table ref="productCateTable"
style="width: 100%"
:data="list"
v-loading="listLoading" border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="分类名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="级别" width="100" align="center">
<template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
</el-table-column>
<el-table-column label="商品数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.productCount }}</template>
</el-table-column>
<el-table-column label="数量单位" width="100" align="center">
<template slot-scope="scope">{{scope.row.productUnit }}</template>
</el-table-column>
<el-table-column label="导航栏" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleNavStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.navStatus">
</el-switch>
</template>
</el-table-column>
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleShowStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.showStatus">
</el-switch>
</template>
</el-table-column>
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort }}</template>
</el-table-column>
<el-table-column label="设置" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
:disabled="scope.row.level | disableNextLevel"
@click="handleShowNextLevel(scope.$index, scope.row)">查看下级
</el-button>
<el-button
size="mini"
@click="handleTransferProduct(scope.$index, scope.row)">转移商品
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {fetchList,deleteProductCate,updateShowStatus,updateNavStatus} from '@/api/productCate'
export default {
name: "productCateList",
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
pageNum: 1,
pageSize: 5
},
parentId: 0
}
},
created() {
this.resetParentId();
this.getList();
},
watch: {
$route(route) {
this.resetParentId();
this.getList();
}
},
methods: {
resetParentId(){
this.listQuery.pageNum = 1;
if (this.$route.query.parentId != null) {
this.parentId = this.$route.query.parentId;
} else {
this.parentId = 0;
}
},
handleAddProductCate() {
this.$router.push('/pms/addProductCate');
},
getList() {
this.listLoading = true;
fetchList(this.parentId, this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleNavStatusChange(index, row) {
let data = new URLSearchParams();
let ids=[];
ids.push(row.id)
data.append('ids',ids);
data.append('navStatus',row.navStatus);
updateNavStatus(data).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
handleShowStatusChange(index, row) {
let data = new URLSearchParams();
let ids=[];
ids.push(row.id)
data.append('ids',ids);
data.append('showStatus',row.showStatus);
updateShowStatus(data).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
handleShowNextLevel(index, row) {
this.$router.push({path: '/pms/productCate', query: {parentId: row.id}})
},
handleTransferProduct(index, row) {
console.log('handleAddProductCate');
},
handleUpdate(index, row) {
this.$router.push({path:'/pms/updateProductCate',query:{id:row.id}});
},
handleDelete(index, row) {
this.$confirm('是否要删除该品牌', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteProductCate(row.id).then(response => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
this.getList();
});
});
}
},
filters: {
levelFilter(value) {
if (value === 0) {
return '一级';
} else if (value === 1) {
return '二级';
}
},
disableNextLevel(value) {
if (value === 0) {
return false;
} else {
return true;
}
}
}
}
</script>
<style scoped>
</style>
#abc
<template>
<!-- 最外层的 `div` 元素，设置了类名为 `app-container`，作为整个页面内容的容器，用于包裹内部各个功能模块，实现整体页面布局 -->
<div class="app-container">
<!-- 使用 Element UI 的 `el-card` 组件创建一个卡片式容器，类名为 `operate-container`，设置阴影效果为 `never`（无阴影），用于放置与数据列表操作相关的元素，比如操作按钮等 -->
<el-card class="operate-container" shadow="never">
<!-- 使用 Element UI 的图标组件展示票务图标，并设置 `margin-top: 5px`，使其在垂直方向上距顶部有一定间距，在视觉上辅助提示该区域与数据操作相关 -->
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<!-- 显示“数据列表”文字，同样设置 `margin-top: 5px`，明确该卡片容器内的操作是针对下方展示的数据列表，起到功能说明作用 -->
<span style="margin-top: 5px">数据列表</span>
<!-- 使用 Element UI 的 `el-button` 按钮组件，设置类名为 `btn-add`，点击时触发 `handleAddProductCate` 方法，尺寸为 `mini`（迷你型），用于执行添加商品分类的操作 -->
<el-button
class="btn-add"
@click="handleAddProductCate()"
size="mini">
添加
</el-button>
</el-card>
<!-- `div` 元素，类名为 `table-container`，作为表格展示的容器，用于包裹 `el-table` 组件，使其在页面中以特定样式展示数据列表 -->
<div class="table-container">
<!-- 使用 Element UI 的 `el-table` 表格组件，设置引用名为 `productCateTable`，宽度为 `100%`，绑定数据为 `list`，根据 `v-loading` 指令结合 `listLoading` 变量控制加载状态显示（如显示加载动画等），设置表格边框样式，用于展示商品分类相关的数据列表 -->
<el-table ref="productCateTable"
style="width: 100%"
:data="list"
v-loading="listLoading" border>
<!-- 表格列，标签显示为“编号”，宽度为 `100px`，内容在单元格中居中对齐，通过插槽作用域（`slot-scope`）获取当前行数据，展示商品分类的编号信息 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列，标签显示为“分类名称”，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，展示商品分类的名称信息 -->
<el-table-column label="分类名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列，标签显示为“级别”，宽度为 `100px`，内容在单元格中居中对齐，通过管道符（`|`）使用 `levelFilter` 过滤器对 `scope.row.level` 的值进行处理后展示，用于以更友好的文字形式（如“一级”“二级”等）展示商品分类的级别信息 -->
<el-table-column label="级别" width="100" align="center">
<template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
</el-table-column>
<!-- 表格列，标签显示为“商品数量”，宽度为 `100px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，展示该商品分类下包含的商品数量信息 -->
<el-table-column label="商品数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.productCount }}</template>
</el-table-column>
<!-- 表格列，标签显示为“数量单位”，宽度为 `100px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，展示商品数量对应的单位信息 -->
<el-table-column label="数量单位" width="100" align="center">
<template slot-scope="scope">{{scope.row.productUnit }}</template>
</el-table-column>
<!-- 表格列，标签显示为“导航栏”，宽度为 `100px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，包含一个 `el-switch` 开关组件，监听开关状态变化事件 `change` 并触发 `handleNavStatusChange` 方法，双向绑定 `scope.row.navStatus` 数据，用于控制商品分类在导航栏的显示状态（如是否展示在导航栏等） -->
<el-table-column label="导航栏" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleNavStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.navStatus">
</el-switch>
</template>
</el-table-column>
<!-- 表格列，标签显示为“是否显示”，宽度为 `100px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，包含一个 `el-switch` 开关组件，监听开关状态变化事件 `change` 并触发 `handleShowStatusChange` 方法，双向绑定 `scope.row.showStatus` 数据，用于控制商品分类是否显示（可能在页面其他位置的显示与否等情况） -->
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleShowStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.showStatus">
</el-switch>
</template>
</el-table-column>
<!-- 表格列，标签显示为“排序”，宽度为 `100px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，展示商品分类在排序方面的相关信息，比如用于确定分类展示顺序等 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort }}</template>
</el-table-column>
<!-- 表格列，标签显示为“设置”，宽度为 `200px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，包含两个按钮：“查看下级”按钮，根据 `scope.row.level` 通过 `disableNextLevel` 过滤器判断是否禁用（如果是一级分类可能允许查看下级等逻辑），点击触发 `handleShowNextLevel` 方法；“转移商品”按钮，点击触发 `handleTransferProduct` 方法，用于相关的商品转移操作（目前方法内仅打印日志，可能后续完善具体逻辑） -->
<el-table-column label="设置" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
:disabled="scope.row.level | disableNextLevel"
@click="handleShowNextLevel(scope.$index, scope.row)">查看下级</ </el-button>
<el-button
size="mini"
@click="handleTransferProduct(scope.$index, scope.row)">转移商品</ </el-button>
</template>
</el-table-column>
<!-- 表格列，标签显示为“操作”，宽度为 `200px`，内容在单元格中居中对齐，通过插槽作用域获取当前行数据，包含编辑和删除两个按钮，分别点击可触发对应的 `handleUpdate` 和 `handleDelete` 方法，用于对单个商品分类进行编辑或删除操作 -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑</ </el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</ </el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- `div` 元素，类名为 `pagination-container`，作为分页功能的容器，用于包裹 `el-pagination` 分页组件，实现数据列表的分页展示 -->
<div class="pagination-container">
<!-- 使用 Element UI 的 `el-pagination` 分页组件，设置 `background`（背景色样式），监听 `size-change`（页面尺寸变化）和 `current-change`（当前页码变化）事件，并分别触发对应的 `handleSizeChange` 和 `handleCurrentChange` 方法，设置分页布局样式，绑定页面尺寸、可选页面尺寸数组、当前页码以及总数据量等数据，实现数据列表的分页功能 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 从 `@/api/productCate` 模块中导入多个函数，分别是 `fetchList`（用于获取商品分类列表）、`deleteProductCate`（用于删除商品分类）、`updateShowStatus`（用于更新商品分类的显示状态）、`updateNavStatus`（用于更新商品分类在导航栏的状态），这些函数通常是与后端 API 进行交互的接口调用函数
import {fetchList,deleteProductCate,updateShowStatus,updateNavStatus} from '@/api/productCate';
export default {
name: "productCateList",
data() {
return {
// 用于存储商品分类数据列表，初始值为 `null`，后续会通过调用接口获取数据并赋值，以展示在表格中
list: null,
// 用于存储数据列表的总条数，初始值为 `null`，同样会在获取数据后更新相应的值，用于分页等相关功能展示
total: null,
// 用于控制数据列表加载状态的布尔变量，初始值为 `true`，表示正在加载数据，当数据获取完成后会设置为 `false`，可以配合页面上的加载动画等提示用户数据加载情况
listLoading: true,
// 用于存储数据列表查询相关的参数，包含当前页码和每页显示数量，初始设置了默认的页码和每页显示数量
listQuery: {
pageNum: 1,
pageSize: 5
},
// 用于存储上级分类 ID 的变量，初始值为 `0`，可能用于筛选获取对应上级分类下的子分类等情况，会根据路由参数动态变化
parentId: 0
};
},
created() {
// 在组件创建时，先调用 `resetParentId` 方法来重置上级分类 ID，然后调用 `getList` 方法，用于获取商品分类的数据列表，触发与后端接口的交互，获取初始展示的数据
this.resetParentId();
this.getList();
},
watch: {
// 监听路由对象（`$route`）的变化，当路由发生改变时，同样先调用 `resetParentId` 方法重置上级分类 ID，再调用 `getList` 方法重新获取商品分类数据列表，以确保页面展示的数据与当前路由对应的情况相符，比如切换到不同上级分类下查看子分类等场景
$route(route) {
this.resetParentId();
this.getList();
}
},
methods: {
resetParentId() {
// 将 `listQuery` 中的 `pageNum` 设置为 `1`（回到第一页），然后判断路由查询参数中的 `parentId` 是否不为 `null`，如果是，则将其值赋给 `parentId` 变量；如果路由查询参数中 `parentId` 为 `null`，则将 `parentId` 设置为 `0`，用于确定当前要获取的商品分类列表对应的上级分类 ID
this.listQuery.pageNum = 1;
if (this.$route.query.parentId!= null) {
this.parentId = this.$route.query.parentId;
} else {
this.parentId = 0;
}
},
handleAddProductCate() {
// 当点击添加按钮时，通过 `$router.push` 方法进行路由跳转，跳转到 `/pms/addProductCate` 路径，导航到添加商品分类的页面
this.$router.push('/pms/addProductCate');
},
getList() {
// 将 `listLoading` 设置为 `true`，表示开始加载数据，可在此处结合页面展示加载提示，如显示加载动画等
this.listLoading = true;
// 调用 `fetchList` 函数，传入 `parentId`（上级分类 ID，用于筛选获取对应上级分类下的子分类数据）以及 `listQuery`（包含当前页码、每页数量等查询条件），与后端接口交互获取商品分类数据列表，成功获取后将 `listLoading` 设置为 `false`，并把返回数据中的列表数据和总条数分别赋值给 `list` 和 `total` 属性
fetchList(this.parentId, this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
handleSizeChange(val) {
// 当分页组件的页面尺寸（每页显示数量）发生变化时触发此方法，将 `listQuery` 中的 `pageNum` 设置为 `1`（回到第一页），并更新 `pageSize` 为新的页面尺寸值 `val`，然后调用 `getList` 方法重新获取数据，实现分页数据更新功能
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
// 当分页组件的当前页码发生变化时触发此方法，将 `listQuery` 中的 `pageNum` 更新为新的页码值 `val`，然后调用 `getList` 方法获取对应页码的数据，实现分页切换功能
this.listQuery.pageNum = val;
this.getList();
},
handleNavStatusChange(index, row) {
// 处理商品分类导航栏状态改变的方法，首先创建 `URLSearchParams` 对象用于构建请求参数，将当前行商品分类的 `id` 放入数组 `ids` 并添加到请求参数中，同时添加 `navStatus`（当前行商品分类在导航栏的新状态值）到请求参数，然后调用 `updateNavStatus` 函数与后端接口交互执行更新导航栏状态的操作，成功后显示更新成功的提示信息
let data = new URLSearchParams();
let ids=[];
ids.push(row.id)
data.append('ids',ids);
data.append('navStatus',row.navStatus);
updateNavStatus(data).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
handleShowStatusChange(index, row) {
// 处理商品分类显示状态改变的方法，同样先创建 `URLSearchParams` 对象构建请求参数，将当前行商品分类的 `id` 放入数组 `ids` 并添加到请求参数中，同时添加 `showStatus`（当前行商品分类的新显示状态值）到请求参数，然后调用 `updateShowStatus` 函数与后端接口交互执行更新显示状态的操作，成功后显示更新成功的提示信息
let data = new URLSearchParams();
let ids=[];
ids.push(row.id)
data.append('ids',ids);
data.append('showStatus',row.showStatus);
updateShowStatus(data).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
handleShowNextLevel(index, row) {
// 当点击“查看下级”按钮时，通过 `$router.push` 方法进行路由跳转，跳转到 `/pms/productCate` 路径，并传递查询参数 `parentId`（当前行商品分类的 `id`，用于获取该分类下的下级分类数据），导航到查看下级商品分类的页面
this.$router.push({path: '/pms/productCate', query: {parentId: row.id}})
},
handleTransferProduct(index, row) {
// 当点击“转移商品”按钮时，目前仅在控制台打印 `handleAddProductCate`，可能后续需要完善具体的商品转移相关逻辑，比如弹出选择框让用户选择转移到哪个分类等操作
console.log('handleAddProductCate');
},
handleUpdate(index, row)
// 当点击表格中某行的编辑按钮时，通过 `$router.push

31
pms/productCate/update.vue
Unescape View File

@ -1,31 +0,0 @@
<template> 
<product-cate-detail :is-edit='true'></product-cate-detail>
</template>
<script>
import ProductCateDetail from './components/ProductCateDetail'
export default {
name: 'updateProductCate',
components: { ProductCateDetail }
}
</script>
<style>
</style>
#abc
<template>
<!-- 使用名为 `product-cate-detail` 的自定义组件，并通过 `:is-edit='true'` 进行属性绑定，传递了 `is-edit` 属性且其值设为 `true`。这意味着当前处于编辑商品分类的操作模式（与新增商品分类的模式相区别），`product-cate-detail` 组件会依据这个属性值来展示对应的编辑界面，以及执行相应的编辑相关逻辑，例如展示已有的商品分类信息以供修改，并处理保存修改后的数据等操作 -->
<product-cate-detail :is-edit='true'></product-cate-detail>
</template>
<script>
// 从相对路径 `./components/` 下导入名为 `ProductCateDetail` 的组件。这个组件应该已经在 `./components/` 对应的路径中被定义好了，其内部通常包含了与商品分类详情相关的各种功能逻辑，比如展示商品分类已有的各项详细信息（名称、级别等），提供可编辑的输入框等交互元素来修改这些信息，以及处理保存修改后的数据到后端等编辑相关的操作逻辑，以此实现完整的商品分类编辑功能。
import ProductCateDetail from './components/ProductCateDetail';
export default {
name: 'updateProductCate',
// 在当前组件的 `components` 属性中注册 `ProductCateDetail` 组件，这使得在 `updateProductCate` 组件的模板里能够直接通过 `<product-cate-detail>` 标签来调用它，遵循了 Vue.js 组件化开发中复用组件的常规方式，便于将不同功能的代码拆分成独立的组件进行开发、维护和管理，提高代码的可读性和可扩展性。
components: { ProductCateDetail }
}
</script>
<style>
/* 这里的样式部分目前为空，后续可以根据 `updateProductCate` 组件整体的视觉呈现要求，添加相应的 CSS 样式规则。例如，可以设置组件在页面中的整体布局样式（如宽度、高度、外边距、内边距等），对组件内文本的字体、字号、颜色等样式属性进行定义，还能针对各种表单元素（如果有的话）设置其边框、背景色、圆角等外观样式，从而让组件在页面中展现出符合预期的视觉效果 */
</style>

73
src/views/home/index.vue
Unescape View File

@ -1,7 +1,5 @@
<template>
<!-- 容器，用于包裹整个仪表盘 -->
<div class="app-container">
<!-- 学习教程链接部分 -->
<div class="address-layout">
<el-row :gutter="20">
<el-col :span="6">
@ -30,8 +28,6 @@
</el-col>
</el-row>
</div>
<!-- 订单统计部分 -->
<div class="total-layout">
<el-row :gutter="20">
<el-col :span="6">
@ -55,18 +51,16 @@
<div class="total-value">￥5000.00</div>
</div>
</el-col>
<!--<el-col :span="6">
<div class="total-frame">
<svg-icon icon-class="total-week" class="total-icon">
</svg-icon>
<div class="total-title">近7天销售总额</div>
<div class="total-value">￥50000.00</div>
</div>
</el-col>-->
<!--<el-col :span="6">-->
<!--<div class="total-frame">-->
<!--<svg-icon icon-class="total-week" class="total-icon">-->
<!--</svg-icon>-->
<!--<div class="total-title">近7天销售总额</div>-->
<!--<div class="total-value">￥50000.00</div>-->
<!--</div>-->
<!--</el-col>-->
</el-row>
</div>
<!-- 公众号二维码部分 -->
<el-card class="mine-layout">
<div style="text-align: center">
<img width="150px" height="150px" src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg">
@ -74,8 +68,6 @@
<div style="text-align: center">mall全套学习教程连载中！</div>
<div style="text-align: center;margin-top: 5px"><span class="color-main">关注公号</span>，第一时间获取。</div>
</el-card>
<!-- 待处理事务部分 -->
<div class="un-handle-layout">
<div class="layout-title">待处理事务</div>
<div class="un-handle-content">
@ -141,8 +133,6 @@
</el-row>
</div>
</div>
<!-- 商品总览和用户总览部分 -->
<div class="overview-layout">
<el-row :gutter="20">
<el-col :span="12">
@ -185,8 +175,6 @@
</el-col>
</el-row>
</div>
<!-- 订单统计图表部分 -->
<div class="statistics-layout">
<div class="layout-title">订单统计</div>
<el-row>
@ -255,15 +243,12 @@
</div>
</div>
</template>
<script>
// 引入日期处理工具函数
import {str2Date} from '@/utils/date';
// 引入图标图片
import img_home_order from '@/assets/images/home_order.png';
import img_home_today_amount from '@/assets/images/home_today_amount.png';
import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
// 模拟从后端获取的数据
const DATA_FROM_BACKEND = {
columns: ['date', 'orderCount','orderAmount'],
rows: [
@ -284,12 +269,10 @@
{date: '2018-11-15', orderCount: 40, orderAmount: 4293}
]
};
export default {
name: 'home',
data() {
return {
// 日期选择器的快捷选项
pickerOptions: {
shortcuts: [{
text: '最近一周',
@ -307,68 +290,52 @@
}
}]
},
// 订单统计的日期范围
orderCountDate: '',
// 图表的设置
chartSettings: {
xAxisType: 'time',
area:true,
axisSite: { right: ['orderAmount']},
labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}
},
// 图表的数据
labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}},
chartData: {
columns: [],
rows: []
},
// 加载状态
loading: false,
// 数据为空状态
dataEmpty: false,
// 图标图片
img_home_order,
img_home_today_amount,
img_home_yesterday_amount
}
},
created(){
// 初始化订单统计日期范围
this.initOrderCountDate();
// 获取数据
this.getData();
},
methods:{
// 处理日期变化
handleDateChange(){
this.getData();
},
// 初始化订单统计日期范围
initOrderCountDate(){
let start = new Date(2018,10,1);
const end = new Date(start.getTime() + 1000 * 60 * 60 * 24 * 7);
this.orderCountDate=[start,end];
},
// 获取数据
getData(){
setTimeout(() => {
this.chartData = {
columns: ['date', 'orderCount','orderAmount'],
rows: []
};
// 遍历后端数据
for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
let item=DATA_FROM_BACKEND.rows[i];
let currDate=str2Date(item.date);
let start=this.orderCountDate[0];
let end=this.orderCountDate[1];
// 判断当前日期是否在选择的日期范围内
if(currDate.getTime()>=start.getTime()&&currDate.getTime()<=end.getTime()){
this.chartData.rows.push(item);
}
}
// 设置数据为空状态
this.dataEmpty = false;
// 设置加载状态
this.loading = false
}, 1000)
}
@ -377,37 +344,31 @@
</script>
<style scoped>
/* 容器样式 */
.app-container {
margin-top: 40px;
margin-left: 120px;
margin-right: 120px;
}
/* 地址布局样式 */
.address-layout {
}
/* 总布局样式 */
.total-layout {
margin-top: 20px;
}
/* 总框架样式 */
.total-frame {
border: 1px solid #DCDFE6;
padding: 20px;
height: 100px;
}
/* 总图标样式 */
.total-icon {
color: #409EFF;
width: 60px;
height: 60px;
}
/* 总标题样式 */
.total-title {
position: relative;
font-size: 16px;
@ -416,7 +377,6 @@
top: -50px;
}
/* 总值样式 */
.total-value {
position: relative;
font-size: 18px;
@ -425,13 +385,11 @@
top: -40px;
}
/* 待处理布局样式 */
.un-handle-layout {
margin-top: 20px;
border: 1px solid #DCDFE6;
}
/* 布局标题样式 */
.layout-title {
color: #606266;
padding: 15px 20px;
@ -439,45 +397,37 @@
font-weight: bold;
}
/* 待处理内容样式 */
.un-handle-content {
padding: 20px 40px;
}
/* 待处理项样式 */
.un-handle-item {
border-bottom: 1px solid #EBEEF5;
padding: 10px;
}
/* 总览布局样式 */
.overview-layout {
margin-top: 20px;
}
/* 总览项值样式 */
.overview-item-value {
font-size: 24px;
text-align: center;
}
/* 总览项标题样式 */
.overview-item-title {
margin-top: 10px;
text-align: center;
}
/* 外边框样式 */
.out-border {
border: 1px solid #DCDFE6;
}
/* 统计布局样式 */
.statistics-layout {
margin-top: 20px;
border: 1px solid #DCDFE6;
}
/* 我的布局样式 */
.mine-layout {
position: absolute;
right: 140px;
@ -485,9 +435,8 @@
width: 250px;
height: 235px;
}
/* 地址内容样式 */
.address-content{
padding: 20px;
font-size: 18px
}
</style>
</style>

886
src/views/oms/apply/applyDetail.vue
Unescape View File

@ -2,622 +2,386 @@
<div class="detail-container">
<el-card shadow="never">
<span class="font-title-medium">退货商品</span>
<!--
使用el-table组件来展示表格数据。
border属性用于给表格添加边框，使其样式上更清晰的显示表格结构。
class="standard-margin" 用于给这个表格元素添加一个自定义的类名，通过这个类名可以在CSS中定义相应的外边距等样式规则，以控制表格在页面中的布局显示效果。
ref="productTable" 是给这个表格元素添加一个引用标识，方便在Vue实例的JavaScript代码中通过this.$refs.productTable来获取这个表格组件的实例，进而可以调用它的一些方法或者访问它的属性等。
:data="productList" 是使用Vue的指令将名为productList的数据绑定到表格组件上，这个productList应该是在Vue实例的数据对象中定义好的数组类型的数据，表格组件会基于这个数据来渲染每一行的内容。
-->
<el-table
<el-table
border
class="standard-margin"
ref="productTable"
:data="productList">
<!-- 这里可以添加<el-table-column>等子组件来定义表格的具体列信息，比如列标题、列对应的数据字段等 -->
</el-table>
<!--
el-table-column组件用于定义el-table中的列信息。
label="商品图片" 属性指定了该列在表格头部显示的标题名称为“商品图片”，这样用户就能直观知晓这一列所代表的数据含义。
width="160" 属性设置了该列的宽度为160像素，通过设置合适的宽度可以让表格各列布局更加合理、美观，避免内容显示过于拥挤或稀疏。
align="center" 属性将该列中的内容在水平方向上进行居中对齐，使展示效果更加整齐、规范，符合常见的页面布局审美要求。
-->
<el-table-column label="商品图片" width="160" align="center">
<!--
template标签结合slot-scope="scope" 是一种在表格列中自定义内容渲染的方式。
slot-scope="scope" 这里的scope是一个包含了当前行数据等相关信息的对象，通过它可以访问到当前行对应的数据。
-->
<template slot-scope="scope">
<!--
img标签用于在表格单元格中展示图片。
style="height:80px" 是内联样式，用于设置图片的高度为80像素，以此来统一该列中图片展示的高度，达到整齐美观的视觉效果。
:src="scope.row.productPic" 是使用Vue的绑定语法，将src属性绑定到scope.row.productPic上，也就是从scope对象中获取当前行（row）对应的商品图片的路径（productPic）信息，从而正确地显示对应的商品图片。
-->
<img style="height:80px" :src="scope.row.productPic">
</template>
</el-table-column>
<!--
el-table-column 组件用于在 el-table 中定义具体的列信息。
label="商品名称" 属性设定了此列在表格头部所显示的标题文字为“商品名称”，方便用户明确该列所展示的数据内容大致范围。
align="center" 属性将该列单元格内的内容在水平方向进行居中对齐，让表格内的数据呈现更加规整、美观，符合常规的页面排版视觉效果要求。
-->
<el-table-column label="商品名称" align="center">
<!--
template 标签结合 slot-scope="scope" 的写法，是在 Element UI 组件的表格列中自定义单元格内容展示方式的常用手段。
slot-scope="scope" 这里定义的 scope 是一个包含了当前行诸多相关信息的对象，借助它可以访问到当前行（对应表格中的一行数据）的具体数据情况。
-->
<template slot-scope="scope">
<!--
span 标签在这里用于包裹文本内容，使其可以灵活地设置样式以及在 HTML 结构中进行布局。
class="font-small" 给 span 标签添加了一个名为“font-small”的类名，通常是在项目的 CSS 文件（或者是内联样式所在的样式作用域内）中定义了对应的字体大小等样式规则，以此来让文本以较小的字体呈现，可能是为了在表格单元格内更合理地展示信息，避免文字过大而影响整体布局美观性。
{{scope.row.productName}} 这是 Vue 中的插值表达式，它会将 scope 对象中 row 属性下的 productName 字段对应的值渲染显示出来，也就是展示当前行对应的商品名称信息。
-->
<span class="font-small">{{scope.row.productName}}</span><br>
<!--
这里同样使用 span 标签结合类名“font-small”来包裹文本内容，用于控制文本的样式呈现。
“品牌：{{scope.row.productBrand}}”中的插值表达式 {{scope.row.productBrand}} 用于获取并显示当前行对应的商品品牌信息，前面添加“品牌：”这样的固定文字，是为了更清晰地告知用户后面跟着的是商品的品牌内容，整体在表格单元格内更直观地展示商品相关的关键信息。
-->
<span class="font-small">品牌：{{scope.row.productBrand}}</span>
</template>
</el-table-column>
<!--
el-table-column 组件用于在 el-table 中定义特定的列信息，以此来控制表格每列的展示内容、样式等相关属性。
label="价格/货号" 属性用于指定该列在表格头部显示的标题内容为“价格/货号”，使用这样的标题可以简洁地告知用户这一列将会呈现商品的价格以及货号相关信息。
width="180" 属性设置了此列的宽度为 180 像素，通过合理设置列宽，能够让表格整体的布局更加协调、美观，避免不同列的内容显示出现过宽或过窄等影响阅读体验的情况。
align="center" 属性使得该列单元格内的所有内容在水平方向上进行居中对齐，确保数据展示整齐、规范，符合常规页面设计中对于表格数据排版的美观要求。
-->
<el-table-column label="价格/货号" width="180" align="center">
<!--
template 标签配合 slot-scope="scope" 的写法，是在 Element UI 组件的表格列中自定义单元格具体内容呈现方式的常见做法。
slot-scope="scope" 这里定义的 scope 是一个包含了当前行各项相关信息的对象，借助它可以访问到当前行（也就是对应表格中的某一行完整数据）的各个数据字段情况。
-->
<template slot-scope="scope">
<!--
span 标签用于包裹具体的文本内容，通过添加类名等操作，可以方便地为其设置样式，同时在 HTML 结构里实现灵活的布局效果。
class="font-small" 给 span 标签添加了一个名为“font-small”的类名，一般情况下，在项目的 CSS 样式文件或者所在的样式作用域内，会针对这个类名预先定义相应的样式规则，例如设置较小的字体大小等，目的是为了让文本以更合适的尺寸在表格单元格内进行展示，避免字体过大占据过多空间而影响整体的布局美观程度。
“价格：￥{{scope.row.productRealPrice}}”中的插值表达式 {{scope.row.productRealPrice}} 会从 scope 对象中 row 属性下对应的 productRealPrice 字段获取值，并将其渲染显示出来，在前面添加“价格：￥”这样的固定文本描述，能更清晰地向用户表明后面跟着的是商品的具体价格信息，整体呈现出商品价格的展示形式。
-->
<span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
<!--
同样使用 span 标签并添加“font-small”类名来控制文本样式，保持和前面价格展示文本在样式上的一致性。
“货号：NO.{{scope.row.productId}}”里的插值表达式 {{scope.row.productId}} 用于获取并展示当前行对应的商品货号信息，在前面添加“货号：NO.”的固定文本，是为了更直观地告知用户后面显示的是商品的货号，让用户可以更清晰地分辨出不同的数据内容，符合良好的信息展示规范。
-->
<span class="font-small">货号：NO.{{scope.row.productId}}</span>
</template>
</el-table-column>
<!--
以下是一系列用于定义 el-table 中不同列信息的 el-table-column 组件。
第一个 el-table-column 组件，用于定义展示“属性”信息的列。
label="属性" 属性指定了该列在表格头部显示的标题为“属性”，方便用户知晓此列所呈现的数据范畴。
width="180" 属性将该列的宽度设置为 180 像素，通过合理设定宽度，使表格布局更显协调美观，避免列宽不合适影响整体展示效果。
align="center" 属性让该列单元格内的内容在水平方向上居中对齐，确保数据排列整齐规范，符合常规的页面设计审美要求。
其内部 template 标签结合 slot-scope="scope" 来获取当前行数据，并展示相应内容。具体来说，{{scope.row.productAttr}} 这个插值表达式会从 scope 对象中 row 属性下的 productAttr 字段获取值，并渲染显示出来，也就是在单元格中展示当前行对应的商品属性信息。
-->
<el-table-column label="属性" width="180" align="center">
<template slot-scope="scope">{{scope.row.productAttr}}</template>
</el-table-column>
<!--
第二个 el-table-column 组件，用于定义展示“数量”信息的列。
label="数量" 属性设定该列在表格头部的标题为“数量”，清晰表明此列所展示的数据内容。
width="100" 属性将列宽设定为 100 像素，同样是为了优化表格整体的布局效果，让各列宽度适配展示内容的多少。
align="center" 属性使得该列内容在水平方向居中对齐，增强表格数据展示的规整性。
内部 template 标签中通过 {{scope.row.productCount}} 插值表达式，从 scope 对象的 row 属性下的 productCount 字段获取对应的值，并将其展示在单元格中，实现当前行商品数量信息的呈现。
-->
<el-table-column label="数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.productCount}}</template>
</el-table-column>
<!--
第三个 el-table-column 组件，用于定义展示“小计”信息的列。
label="小计" 属性指定了该列在表格头部显示的标题是“小计”，让用户明白此处展示的是经过一定计算后的金额小计数据。
width="100" 属性将该列宽度设为 100 像素，以适配表格布局，使各列看起来疏密得当。
align="center" 属性保证该列内容在水平方向上居中对齐，提升整体展示的美观度。
内部 template 标签里的 {{totalAmount}} 插值表达式，这里推测 totalAmount 应该是在 Vue 实例的 data 或者 computed 等相关属性中定义好的一个变量（可能是基于商品的单价、数量等计算得出的小计金额），会将其对应的值渲染显示出来，用于展示每一行对应的金额小计情况。
-->
<el-table-column label="小计" width="100" align="center">
<template slot-scope="scope">￥{{totalAmount}}</template>
</el-table-column>
</el-table>
<div style="float:right;margin-top:15px;margin-bottom:15px">
<el-table-column label="商品图片" width="160" align="center">
<template slot-scope="scope">
<img style="height:80px" :src="scope.row.productPic">
</template>
</el-table-column>
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">
<span class="font-small">{{scope.row.productName}}</span><br>
<span class="font-small">品牌：{{scope.row.productBrand}}</span>
</template>
</el-table-column>
<el-table-column label="价格/货号" width="180" align="center">
<template slot-scope="scope">
<span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
<span class="font-small">货号：NO.{{scope.row.productId}}</span>
</template>
</el-table-column>
<el-table-column label="属性" width="180" align="center">
<template slot-scope="scope">{{scope.row.productAttr}}</template>
</el-table-column>
<el-table-column label="数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.productCount}}</template>
</el-table-column>
<el-table-column label="小计" width="100" align="center">
<template slot-scope="scope">￥{{totalAmount}}</template>
</el-table-column>
</el-table>
<div style="float:right;margin-top:15px;margin-bottom:15px">
<span class="font-title-medium">合计：</span>
<span class="font-title-medium color-danger">￥{{totalAmount}}</span>
</div>
</el-card>
<!--
使用 el-card 组件来创建一个卡片式的布局容器，shadow="never" 属性表示该卡片不显示阴影效果，class="standard-margin" 用于给卡片添加一个自定义的类名，通过这个类名可以在 CSS 中定义相应的外边距等样式规则，以控制卡片在页面中的布局显示效果，此卡片用于展示服务单相关信息。
-->
<el-card shadow="never" class="standard-margin">
<!--
使用 span 标签展示一个标题文本，class="font-title-medium" 给 span 标签添加了一个类名，用于设置该标题的字体样式（推测是中等大小的字体，具体样式由项目中对应的 CSS 规则定义），文本内容为“服务单信息”，用于明确下方展示内容的主题。
-->
<span class="font-title-medium">服务单信息</span>
<!--
div 标签作为一个容器，添加了 class="form-container-border" 类名（推测用于设置边框等样式来区分不同的信息块），内部包含多个 el-row 和 el-col 组件用于布局服务单的各项具体信息。
-->
<div class="form-container-border">
<!--
el-row 组件用于创建行布局，在 Element UI 的栅格系统中，多个 el-col 组件放置在 el-row 内来划分列，实现灵活的页面布局。
以下是第一组 el-row 和 el-col 组件，用于展示“服务单号”信息。
-->
<el-card shadow="never" class="standard-margin">
<span class="font-title-medium">服务单信息</span>
<div class="form-container-border">
<el-row>
<!--
el-col 组件用于定义列，:span="6" 表示该列占 6 份（在默认 24 份的栅格系统中），class="form-border form-left-bg font-small" 给该列添加了类名，用于设置边框、背景（可能是左边栏的背景色用于区分左右内容）以及字体大小（较小字体，同样具体样式由对应 CSS 规则定义），文本内容为“服务单号”，作为该信息项的标题显示在左边栏。
-->
<el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
<!--
此 el-col 组件占 18 份，用于展示服务单号的具体值，通过插值表达式 {{orderReturnApply.id}} 从 orderReturnApply 对象的 id 属性获取对应的值并渲染显示，class="form-border font-small" 用于设置边框和较小字体样式。
-->
<el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
<el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
</el-row>
<!--
以下是第二组 el-row 和 el-col 组件，用于展示“申请状态”信息，结构和功能与展示“服务单号”类似，不同之处在于展示的值通过管道符（|）使用了 formatStatus 过滤器（推测是在 Vue 实例中定义好的，用于对状态值进行格式化处理，比如转换为更友好的文字描述等）。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
</el-row>
<!--
以下是第三组 el-row 和 el-col 组件，用于展示“订单编号”信息，除了通过插值表达式 {{orderReturnApply.orderSn}} 展示订单编号具体值外，还添加了一个 el-button 组件。
el-button 组件的 type="text" 表示是文本样式按钮（外观上更简洁，类似普通文本链接效果），size="small" 表示小尺寸按钮，@click="handleViewOrder" 绑定了点击事件，点击该按钮会调用 Vue 实例中定义的 handleViewOrder 方法，用于实现查看订单的相关操作。
对应列设置了 height 和 line-height 样式来控制高度和行高，使布局更美观。
-->
<el-row>
<el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
</el-col>
<el-col class="form-border font-small" :span="18" style="height:50px">
{{orderReturnApply.orderSn}}
<el-button type="text" size="small" @click="handleViewOrder">查看</el-button>
</el-col>
<el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
</el-col>
<el-col class="form-border font-small" :span="18" style="height:50px">
{{orderReturnApply.orderSn}}
<el-button type="text" size="small" @click="handleViewOrder">查看</el-button>
</el-col>
</el-row>
<!--
以下是第四组 el-row 和 el-col 组件，用于展示“申请时间”信息，通过插值表达式 {{orderReturnApply.createTime | formatTime}} 展示申请时间具体值，使用了 formatTime 过滤器（推测用于将时间格式进行格式化，比如转换为指定的日期时间格式等）。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
</el-row>
<!--
以下是第五组 el-row 和 el-col 组件，用于展示“用户账号”信息，通过插值表达式 {{orderReturnApply.memberUsername}} 展示用户账号具体值。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
</el-row>
<!--
以下是第六组 el-row 和 el-col 组件，用于展示“联系人”信息，通过插值表达式 {{orderReturnApply.returnName}} 展示联系人具体值。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
</el-row>
<!--
以下是第七组 el-row 和 el-col 组件，用于展示“联系电话”信息，通过插值表达式 {{orderReturnApply.returnPhone}} 展示联系电话具体值。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
</el-row>
<!--
以下是第八组 el-row 和 el-col 组件，用于展示“退货原因”信息，通过插值表达式 {{orderReturnApply.reason}} 展示退货原因具体值。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
</el-row>
<!--
以下是第九组 el-row 和 el-col 组件，用于展示“问题描述”信息，通过插值表达式 {{orderReturnApply.description}} 展示问题描述具体值。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
</el-row>
<!--
以下是第十组 el-row 和 el-col 组件，用于展示“凭证图片”信息，el-col 列设置了 height 样式控制高度，内部使用 v-for 指令对 proofPics 数组进行循环遍历（推测 proofPics 是一个包含图片路径等信息的数组），对于每个元素 item，通过 :src="item" 将其作为图片的 src 属性值，展示对应的图片，图片设置了 width 和 height 样式控制大小为 80px×80px。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
</el-col>
<el-col class="form-border font-small" :span="18" style="height:100px">
<img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
</el-col>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
</el-col>
<el-col class="form-border font-small" :span="18" style="height:100px">
<img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
</el-col>
</el-row>
</div>
<!--
以下又是一个添加了 class="form-container-border" 类名的 div 容器，用于展示另一部分服务单相关信息，内部同样由多个 el-row 和 el-col 组件构成。
-->
<div class="form-container-border">
<!--
以下是第一组 el-row 和 el-col 组件，用于展示“订单金额”信息，通过插值表达式 ￥{{totalAmount}} 展示订单金额具体值（前面添加“￥”符号表示人民币金额）。
-->
</div>
<div class="form-container-border">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
<el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
<el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col>
</el-row>
<!--
以下是第二组 el-row 和 el-col 组件，用于展示“确认退款金额”信息，除了展示固定的“￥”符号外，还使用了 el-input 组件。
el-input 组件的 size="small" 表示小尺寸输入框，v-model="updateStatusParam.returnAmount" 使用双向数据绑定，将输入框的值与 Vue 实例中 updateStatusParam 对象的 returnAmount 属性进行绑定，方便数据的获取和更新，:disabled="orderReturnApply.status!==0" 根据服务单申请状态是否为 0 来决定输入框是否可用（如果状态不是 0 则不可用），并设置了 width 样式控制宽度以及 margin-left 样式控制左边距。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18">
￥
<el-input size="small" v-model="updateStatusParam.returnAmount"
:disabled="orderReturnApply.status!==0"
style="width:200px;margin-left: 10px"></el-input>
</el-col>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18">
￥
<el-input size="small" v-model="updateStatusParam.returnAmount"
:disabled="orderReturnApply.status!==0"
style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
<!--
以下 v-show="orderReturnApply.status!==3" 指令根据服务单申请状态是否不等于 3 来决定是否显示内部包含的元素，用于在特定状态下展示相关信息，内部是一组与选择收货相关的 el-row 和 el-col 组件。
-->
<div v-show="orderReturnApply.status!==3">
<!--
以下是第一组用于展示“选择收货点”信息的 el-row 和 el-col 组件，el-col 中使用 el-select 组件来创建一个下拉选择框。
el-select 组件的 size="small" 表示小尺寸下拉框，style="width:200px" 设置宽度，:disabled="orderReturnApply.status!==0" 根据服务单申请状态是否为 0 来决定下拉框是否可用，v-model="updateStatusParam.companyAddressId" 通过双向数据绑定将选择的值与 Vue 实例中 updateStatusParam 对象的 companyAddressId 属性进行绑定，内部通过 v-for 指令循环遍历 companyAddressList 数组（推测是包含收货点地址信息的数组），为每个元素 address 创建一个 el-option 选项，通过 :key、:value 和 :label 属性分别设置选项的唯一标识、对应的值以及显示的文本内容。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18">
<el-select size="small"
style="width:200px"
:disabled="orderReturnApply.status!==0"
v-model="updateStatusParam.companyAddressId">
<el-option v-for="address in companyAddressList"
:key="address.id"
:value="address.id"
:label="address.addressName">
</el-option>
</el-select>
</el-col>
</el-row>
<!--
以下是第二组用于展示“收货人姓名”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.name}} 展示收货人姓名具体值（推测 currentAddress 是当前选择或关联的收货地址对象）。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
</el-row>
<!--
以下是第三组用于展示“所在区域”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress | formatRegion}} 展示所在区域具体值，使用了 formatRegion 过滤器（推测用于对地址区域信息进行格式化处理，使其显示更规范等）。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
</el-row>
<!--
以下是第四组用于展示“详细地址”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.detailAddress}} 展示详细地址具体值。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
</el-row>
<!--
以下是第五组用于展示“联系电话”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.phone}} 展示联系电话具体值。
-->
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18">
<el-select size="small"
style="width:200px"
:disabled="orderReturnApply.status!==0"
v-model="updateStatusParam.companyAddressId">
<el-option v-for="address in companyAddressList"
:key="address.id"
:value="address.id"
:label="address.addressName">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
</el-row>
</div>
</div>
<!--
以下是一个添加了 class="form-container-border" 类名且通过 v-show="orderReturnApply.status!==0" 根据服务单申请状态是否不等于 0 来决定是否显示的 div 容器，内部包含用于展示“处理人员”“处理时间”“处理备注”等相关信息的 el-row 和 el-col 组件，结构和功能与前面类似，时间相关的值使用对应的时间格式化过滤器进行处理。
-->
<div class="form-container-border" v-show="orderReturnApply.status!==0">
</div>
<div class="form-container-border" v-show="orderReturnApply.status!==0">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleMan}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleMan}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleTime | formatTime}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleTime | formatTime}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleNote}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleNote}}</el-col>
</el-row>
</div>
<!--
以下是一个添加了 class="form-container-border" 类名且通过 v-show="orderReturnApply.status===2" 根据服务单申请状态是否等于 2 来决定是否显示的 div 容器，内部包含用于展示“收货人员”“收货时间”“收货备注”等相关信息的 el-row 和 el-col 组件，结构和功能与前面类似，时间相关的值使用对应的时间格式化过滤器进行处理。
-->
<div class="form-container-border" v-show="orderReturnApply.status===2">
</div>
<div class="form-container-border" v-show="orderReturnApply.status===2">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
<el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
</el-row>
</div>
</div>
<div class="form-container-border" v-show="orderReturnApply.status===0">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">处理备注</el-col>
<el-col class="form-border font-small" :span="18">
<el-input size="small" v-model="updateStatusParam.handleNote" style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
</div>
<div class="form-container-border" v-show="orderReturnApply.status===1">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">收货备注</el-col>
<el-col class="form-border font-small" :span="18">
<el-input size="small" v-model="updateStatusParam.receiveNote" style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
</div>
<div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===0">
<el-button type="primary" size="small" @click="handleUpdateStatus(1)">确认退货</el-button>
<el-button type="danger" size="small" @click="handleUpdateStatus(3)">拒绝退货</el-button>
</div>
<div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===1">
<el-button type="primary" size="small" @click="handleUpdateStatus(2)">确认收货</el-button>
</div>
</el-card>
</div>
</template>
<script>
// 从 @/api/returnApply 文件中导入 getApplyDetail 和 updateApplyStatus 函数，推测这两个函数用于获取服务申请详情以及更新申请状态，可能是与后端 API 进行交互的接口调用函数
import {getApplyDetail, updateApplyStatus} from '@/api/returnApply';
// 从 @/api/companyAddress 文件中导入 fetchList 函数，可能用于获取公司地址列表相关数据，同样是和后端 API 交互的函数
import {fetchList} from '@/api/companyAddress';
// 从 @/utils/date 文件中导入 formatDate 函数，推测用于对日期格式进行格式化处理
import {formatDate} from '@/utils/date';
// 定义一个名为 defaultUpdateStatusParam 的常量对象，用于设置更新申请状态时的默认参数值
const defaultUpdateStatusParam = {
companyAddressId: null,
handleMan: 'admin',
handleNote: null,
receiveMan: 'admin',
receiveNote: null,
returnAmount: 0,
status: 0
};
// 定义一个名为 defaultOrderReturnApply 的常量对象，用于设置服务单申请相关信息的默认值，包含了各种可能的字段，如订单编号、创建时间、用户账号等，初始都设为 null 或默认值
const defaultOrderReturnApply = {
import {getApplyDetail,updateApplyStatus} from '@/api/returnApply';
import {fetchList} from '@/api/companyAddress';
import {formatDate} from '@/utils/date';
const defaultUpdateStatusParam = {
companyAddressId: null,
handleMan: 'admin',
handleNote: null,
receiveMan: 'admin',
receiveNote: null,
returnAmount: 0,
status: 0
};
const defaultOrderReturnApply = {
id: null,
orderId: null,
companyAddressId: null,
productId: null,
orderSn: null,
createTime: null,
memberUsername: null,
returnAmount: null,
returnName: null,
returnPhone: null,
status: null,
handleTime: null,
productPic: null,
productName: null,
productBrand: null,
productAttr: null,
productCount: null,
productPrice: null,
productRealPrice: null,
reason: null,
description: null,
proofPics: null,
handleNote: null,
handleMan: null,
receiveMan: null,
receiveTime: null,
receiveNote: null
};
export default {
name: 'returnApplyDetail',
data() {
return {
id: null,
orderId: null,
companyAddressId: null,
productId: null,
orderSn: null,
createTime: null,
memberUsername: null,
returnAmount: null,
returnName: null,
returnPhone: null,
status: null,
handleTime: null,
productPic: null,
productName: null,
productBrand: null,
productAttr: null,
productCount: null,
productPrice: null,
productRealPrice: null,
reason: null,
description: null,
orderReturnApply: Object.assign({},defaultOrderReturnApply),
productList: null,
proofPics: null,
handleNote: null,
handleMan: null,
receiveMan: null,
receiveTime: null,
receiveNote: null
};
// 定义并导出一个 Vue 组件，组件名为 returnApplyDetail
export default {
name: 'returnApplyDetail',
// Vue 组件的 data 函数，用于返回组件的初始数据对象
data() {
return {
// 用于存储服务单的唯一标识，初始设为 null，可能后续从路由参数等地方获取具体值
id: null,
// 通过 Object.assign 创建一个 orderReturnApply 对象的副本，初始值基于 defaultOrderReturnApply 的默认设置，用于存储服务单申请的详细信息
orderReturnApply: Object.assign({}, defaultOrderReturnApply),
// 用于存储商品列表相关数据，初始设为 null
productList: null,
// 用于存储凭证图片相关数据（可能是图片路径数组等形式），初始设为 null
proofPics: null,
// 通过 Object.assign 创建一个 updateStatusParam 对象的副本，初始值基于 defaultUpdateStatusParam 的默认设置，用于存储更新服务单状态时的相关参数
updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
// 用于存储公司地址列表数据，初始设为 null
companyAddressList: null
}
},
// created 生命周期钩子函数，在组件实例创建完成后立即调用
created() {
// 从当前路由的查询参数中获取名为 id 的参数值，并赋值给组件的 id 属性，用于后续获取对应服务单详情等操作
this.id = this.$route.query.id;
// 调用 getDetail 方法，用于获取服务单的详细信息
this.getDetail();
},
// computed 属性，用于定义计算属性，其值会根据依赖的数据自动计算更新
computed: {
// 定义名为 totalAmount 的计算属性，用于计算订单的总金额
totalAmount() {
// 先判断 orderReturnApply 对象是否不为 null，避免空指针等问题
if (this.orderReturnApply!= null) {
// 根据服务单申请中的商品实际单价（productRealPrice）和商品数量（productCount）相乘来计算总金额
return this.orderReturnApply.productRealPrice * this.orderReturnApply.productCount;
} else {
// 如果 orderReturnApply 为 null，则返回 0 作为默认的总金额值
return 0;
}
},
// 定义名为 currentAddress 的计算属性，用于获取当前选择的公司地址信息
currentAddress() {
console.log("currentAddress()");
// 获取 updateStatusParam 中存储的公司地址 ID
let id = this.updateStatusParam.companyAddressId;
// 如果公司地址列表为 null，直接返回一个空对象，避免后续操作出现问题
if (this.companyAddressList == null) return {};
// 遍历公司地址列表
for (let i = 0; i < this.companyAddressList.length; i++) {
let address = this.companyAddressList[i];
// 查找与当前存储的地址 ID 匹配的地址对象
if (address.id === id) {
return address;
}
}
// 如果未找到匹配的地址，返回 null
return null;
}
},
// filters 属性，用于定义过滤器函数，可在模板中对数据进行格式化处理
filters: {
// 定义名为 formatStatus 的过滤器函数，用于将服务单申请状态的数字值转换为对应的文字描述
formatStatus(status) {
if (status === 0) {
return "待处理";
} else if (status === 1) {
return "退货中";
} else if (status === 2) {
return "已完成";
} else {
return "已拒绝";
}
},
// 定义名为 formatTime 的过滤器函数，用于将时间数据（可能是时间戳等格式）格式化为指定的日期时间字符串格式
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
// 定义名为 formatRegion 的过滤器函数，用于将地址对象中的省份、城市、区域等信息拼接成一个完整的区域描述字符串
formatRegion(address) {
let str = address.province;
if (address.city!= null) {
str += " " + address.city;
}
str += " " + address.region;
return str;
}
},
// methods 属性，用于定义组件的各种方法，这些方法可以在组件的模板中通过事件绑定等方式调用
methods: {
// 定义 handleViewOrder 方法，用于处理查看订单的操作
handleViewOrder() {
// 使用 Vue Router 的 $router.push 方法进行路由跳转，跳转到 /oms/orderDetail 路径，并传递当前服务单对应的订单 ID 作为查询参数，以便在订单详情页面展示对应的订单信息
this.$router.push({path: '/oms/orderDetail', query: {id: this.orderReturnApply.orderId}});
},
// 定义 getDetail 方法，用于获取服务单的详细信息
getDetail() {
console.log("getDetail")
// 调用 getApplyDetail 函数（从 API 导入的函数），传入当前服务单的 ID，获取服务单详情数据
getApplyDetail(this.id).then(response => {
// 将获取到的服务单详情数据赋值给 orderReturnApply 属性，用于在组件中展示相关信息
this.orderReturnApply = response.data;
// 初始化商品列表为空数组
this.productList = [];
// 将服务单详情数据作为唯一元素添加到商品列表中，可能后续会有对商品列表进一步处理的逻辑（虽然此处看起来有点奇怪，可能需要根据实际业务需求确认是否合理）
this.productList.push(this.orderReturnApply);
// 如果服务单详情中的凭证图片数据（proofPics）不为 null，将其以逗号分隔的字符串形式转换为数组，赋值给 proofPics 属性，方便后续在模板中展示图片等操作
if (this.orderReturnApply.proofPics!= null) {
this.proofPics = this.orderReturnApply.proofPics.split(",")
}
// 如果服务单申请状态为 1（退货中）或 2（已完成），将服务单详情中的退款金额和公司地址 ID 赋值给更新状态的参数对象，可能用于在对应状态下展示或后续操作中使用这些数据
if (this.orderReturnApply.status === 1 || this.orderReturnApply.status === 2) {
this.updateStatusParam.returnAmount = this.orderReturnApply.returnAmount;
this.updateStatusParam.companyAddressId = this.orderReturnApply.companyAddressId;
}
// 调用 getCompanyAddressList 方法，用于获取公司地址列表数据
this.getCompanyAddressList();
});
},
// 定义 getCompanyAddressList 方法，用于获取公司地址列表数据
getCompanyAddressList() {
console.log("getCompanyAddressList()")
// 调用 fetchList 函数（从 API 导入的函数）获取公司地址列表数据
fetchList().then(response => {
// 将获取到的公司地址列表数据赋值给 companyAddressList 属性，用于在组件中展示相关选项或进行其他关联操作
this.companyAddressList = response.data;
// 遍历公司地址列表
for (let i = 0; i < this.companyAddressList.length; i++) {
// 如果当前地址的接收状态为 1（具体含义需根据业务定义）且服务单申请状态为 0（待处理），将当前地址的 ID 赋值给更新状态参数对象中的公司地址 ID，可能用于默认选择某个合适的收货地址等操作
if (this.companyAddressList[i].receiveStatus === 1 && this.orderReturnApply.status === 0) {
this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
}
}
});
},
// 定义 handleUpdateStatus 方法，用于处理更新服务单状态的操作
handleUpdateStatus(status) {
// 将传入的状态值赋值给更新状态参数对象的 status 属性，用于后续提交更新请求时使用
this.updateStatusParam.status = status;
// 使用 $confirm 组件（可能是 Element UI 等提供的确认框组件）弹出确认提示框，询问用户是否要进行此操作，设置确认按钮文本、取消按钮文本以及提示框类型等属性
this.$confirm('是否要进行此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果用户点击确认按钮，调用 updateApplyStatus 函数（从 API 导入的函数），传入服务单 ID 和更新状态参数对象，向后端发送更新服务单状态的请求
updateApplyStatus(this.id, this.updateStatusParam).then(response => {
// 使用 $message 组件（可能是 Element UI 等提供的消息提示组件）显示操作成功的提示信息，设置提示信息类型、具体内容以及显示时长等属性
this.$message({
type: 'success',
message: '操作成功!',
duration: 1000
});
// 使用 $router.back() 方法进行路由回退，回到上一个页面，可能是在操作完成后返回相关列表页面等
this.$router.back();
});
});
}
updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
companyAddressList: null
}
},
created() {
this.id = this.$route.query.id;
this.getDetail();
},
computed: {
totalAmount() {
if (this.orderReturnApply != null) {
return this.orderReturnApply.productRealPrice * this.orderReturnApply.productCount;
} else {
return 0;
}
},
currentAddress() {
console.log("currentAddress()");
let id = this.updateStatusParam.companyAddressId;
if(this.companyAddressList==null)return {};
for (let i = 0; i < this.companyAddressList.length; i++) {
let address = this.companyAddressList[i];
if (address.id === id) {
return address;
}
}
return null;
}
},
filters: {
formatStatus(status) {
if (status === 0) {
return "待处理";
} else if (status === 1) {
return "退货中";
} else if (status === 2) {
return "已完成";
} else {
return "已拒绝";
}
},
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
formatRegion(address) {
let str = address.province;
if (address.city != null) {
str += " " + address.city;
}
str += " " + address.region;
return str;
}
},
methods: {
handleViewOrder(){
this.$router.push({path:'/oms/orderDetail',query:{id:this.orderReturnApply.orderId}});
},
getDetail() {
getApplyDetail(this.id).then(response => {
console.log("getDetail")
this.orderReturnApply = response.data;
this.productList = [];
this.productList.push(this.orderReturnApply);
if (this.orderReturnApply.proofPics != null) {
this.proofPics = this.orderReturnApply.proofPics.split(",")
}
//退货中和完成
if(this.orderReturnApply.status===1||this.orderReturnApply.status===2){
this.updateStatusParam.returnAmount=this.orderReturnApply.returnAmount;
this.updateStatusParam.companyAddressId=this.orderReturnApply.companyAddressId;
}
this.getCompanyAddressList();
});
},
getCompanyAddressList() {
fetchList().then(response => {
console.log("getCompanyAddressList()")
this.companyAddressList = response.data;
for (let i = 0; i < this.companyAddressList.length; i++) {
if (this.companyAddressList[i].receiveStatus === 1&&this.orderReturnApply.status===0) {
this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
}
}
});
},
handleUpdateStatus(status){
this.updateStatusParam.status=status;
this.$confirm('是否要进行此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateApplyStatus(this.id,this.updateStatusParam).then(response=>{
this.$message({
type: 'success',
message: '操作成功!',
duration:1000
});
this.$router.back();
});
});
}
}
}
</script>
<style scoped>
/* 定义名为 detail-container 的类选择器样式，设置其定位为绝对定位，水平方向铺满整个父容器（left: 0; right: 0;），宽度为 1080 像素，设置内边距以及外边距，用于布局和样式展示，可能是整个服务单详情页面的主要容器样式 */
.detail-container {
position: absolute;
left: 0;
right: 0;
width: 1080px;
padding: 35px 35px 15px 35px;
margin: 20px auto;
}
.detail-container {
position: absolute;
left: 0;
right: 0;
width: 1080px;
padding: 35px 35px 15px 35px;
margin: 20px auto;
}
.standard-margin {
margin-top: 15px;
}
.form-border {
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
}
.form-container-border {
border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6;
margin-top: 15px;
}
.form-left-bg {
background: #F2F6FC;
}
</style>
/* 定义名为 standard-margin 的类选择器样式，设置顶部外边距为 15 像素，用于给某些元素添加统一的间距，使页面布局更美观 */
.standard-margin {
margin-top: 15px;
}
/* 定义名为 form-border 的类选择器样式，设置右边框和下边框为 1 像素的实线，颜色为 #DCDFE6，同时设置内边距，用于给表单相关的元素添加边框和合适的内边距，使其展示更清晰、美观 */
.form-border {
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
}
/* 定义名为 form-container-border 的类选择器样式，设置左边框和上边框为 1 像素的实线，颜色为 #DCDFE6，同时设置顶部外边距，用于给包含表单元素的容器添加边框，区分不同的信息块 */
.form-container-border {
border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6;
margin-top: 15px;
}
/* 定义名为 form-left-bg 的类选择器样式，设置背景颜色为 #F2F6FC，可能用于给表单左边栏等特定区域设置背景色，起到区分和美化的作用 */
.form-left-bg {
background: #F2F6FC;
}
</style>

625
src/views/oms/apply/index.vue
Unescape View File

@ -1,380 +1,275 @@
<template>
<!-- 整个页面内容的容器，添加了 app-container 类名，用于整体布局和样式控制 -->
<div class="app-container">
<!-- 使用 el-card 组件创建一个卡片式的容器，用于放置筛选搜索相关的内容，设置 shadow="never" 表示不显示阴影效果，添加了 filter-container 类名用于样式定制 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用 el-icon-search 图标类（Element UI 提供的图标）展示一个搜索图标，用于提示用户此处是筛选搜索功能区域 -->
<i class="el-icon-search"></i>
<!-- 展示一个文本标签，内容为“筛选搜索”，用于明确此区域的功能 -->
<span>筛选搜索</span>
<!-- 使用 el-button 组件创建一个按钮，设置样式为右浮动（float:right），按钮类型为 primary（通常是主要操作按钮的样式），绑定了点击事件 handleSearchList()，点击按钮会调用该方法，按钮尺寸为 small（小尺寸按钮），按钮文本为“查询搜索”，用于触发查询搜索的操作 -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 使用 el-button 组件创建一个按钮，设置样式为右浮动且距离右边有 15 像素的外边距（float:right;margin-right: 15px），绑定了点击事件 handleResetSearch()，点击按钮会调用该方法，按钮尺寸为 small，按钮文本为“重置”，用于将筛选搜索的条件重置为默认状态 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 使用 el-form 组件创建一个表单，设置 :inline="true" 表示表单为行内表单（各表单项在一行内排列），:model="listQuery" 将表单数据与 listQuery 对象进行双向绑定，size="small" 表示表单尺寸为小尺寸，label-width="140px" 设置表单标签的宽度为 140 像素，用于布局表单各项输入框和选择框等元素 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- el-form-item 组件用于定义表单中的每一项，此处的标签文本为“输入搜索：”，用于提示用户此项的功能 -->
<el-form-item label="输入搜索：">
<!-- 使用 el-input 组件创建一个输入框，通过 v-model="listQuery.id" 将输入框的值与 listQuery 对象中的 id 属性进行双向绑定，添加了 input-width 类名（推测用于设置宽度等样式，在 CSS 部分有定义），placeholder="服务单号" 设置输入框的占位提示文本为“服务单号”，用户可在此输入服务单号相关内容进行搜索 -->
<el-input v-model="listQuery.id" class="input-width" placeholder="服务单号"></el-input>
</el-form-item>
<el-form-item label="处理状态：">
<!-- 使用 el-select 组件创建一个下拉选择框，通过 v-model="listQuery.status" 将选择框选中的值与 listQuery 对象中的 status 属性进行双向绑定，placeholder="全部" 设置占位提示文本为“全部”，clearable 表示可以清空选择框的值，添加了 input-width 类名用于样式设置，内部通过 v-for 指令循环遍历 statusOptions 数组（在 Vue 实例的 data 或其他地方定义），为每个元素创建一个 el-option 选项，用于展示不同的处理状态选项供用户选择 -->
<el-select v-model="listQuery.status" placeholder="全部" clearable class="input-width">
<el-option v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="申请时间：">
<!-- 使用 el-date-picker 组件创建一个日期选择器，添加了 input-width 类名用于样式设置，通过 v-model="listQuery.createTime" 将选择的日期值与 listQuery 对象中的 createTime 属性进行双向绑定，value-format="yyyy-MM-dd" 定义日期选择器返回的日期格式为“yyyy-MM-dd”，type="date" 表示选择器类型为日期选择（只选择年月日），placeholder="请选择时间" 设置占位提示文本，用户可在此选择申请时间进行筛选 -->
<el-date-picker
class="input-width"
v-model="listQuery.createTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<el-form-item label="操作人员：">
<!-- 使用 el-input 组件创建一个输入框，通过 v-model="listQuery.handleMan" 将输入框的值与 listQuery 对象中的 handleMan 属性进行双向绑定，添加了 input-width 类名用于样式设置，placeholder="全部" 设置占位提示文本为“全部”，用户可在此输入操作人员相关内容进行搜索 -->
<el-input v-model="listQuery.handleMan" class="input-width" placeholder="全部"></el-input>
</el-form-item>
<el-form-item label="处理时间：">
<!-- 使用 el-date-picker 组件创建一个日期选择器，与上面申请时间的日期选择器类似，通过 v-model="listQuery.handleTime" 将选择的日期值与 listQuery 对象中的 handleTime 属性进行双向绑定，用于选择处理时间进行筛选 -->
<el-date-picker
class="input-width"
v-model="listQuery.handleTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 使用 el-card 组件创建一个卡片式的容器，添加了 operate-container 类名用于样式定制，内部只展示了一个图标和一个文本标签，用于提示此区域是关于数据列表相关内容，但目前看起来只是一个标题性质的展示，可能后续会添加更多相关操作按钮等元素 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
</el-card>
<!-- 创建一个 div 容器，添加了 table-container 类名用于样式控制，用于放置数据表格相关内容 -->
<div class="table-container">
<!-- 使用 el-table 组件创建一个表格，ref="returnApplyTable" 给表格添加一个引用标识，方便在 Vue 实例的 JavaScript 代码中通过 this.$refs.returnApplyTable 来获取这个表格组件的实例，:data="list" 将表格的数据与 list 数组（在 Vue 实例中定义，用于存储要展示的数据列表）进行绑定，设置表格宽度为 100%铺满父容器，绑定了 @selection-change 事件，当表格行的选择状态改变时会调用 handleSelectionChange 方法，v-loading="listLoading" 根据 listLoading 的值（布尔类型，用于表示是否正在加载数据）来显示或隐藏加载动画，border 属性给表格添加边框，使表格样式更清晰 -->
<el-table ref="returnApplyTable"
:data="list"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading" border>
<!-- 使用 el-table-column 组件定义表格的列，type="selection" 表示此列为选择列（用于勾选表格行），width="60" 设置列宽为 60 像素，align="center" 将列内容在水平方向居中对齐 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column label="服务单号" width="180" align="center">
<!-- 在表格列中使用 template 结合 slot-scope="scope" 的方式自定义单元格内容的展示，通过插值表达式 {{scope.row.id}} 从 scope 对象中 row 属性下的 id 字段获取对应的值并渲染显示，也就是展示每一行对应的服务单号信息 -->
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="申请时间" width="180" align="center">
<!-- 同样使用 template 和 slot-scope 自定义单元格内容展示，通过插值表达式 {{scope.row.createTime | formatTime}} 展示申请时间信息，使用了 formatTime 过滤器（在 Vue 实例的 filters 中定义，用于将时间格式进行格式化处理）对时间数据进行处理后再展示 -->
<template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
</el-table-column>
<el-table-column label="用户账号" align="center">
<!-- 通过插值表达式 {{scope.row.memberUsername}} 展示每一行对应的用户账号信息，从 scope 对象中获取相关数据 -->
<template slot-scope="scope">{{scope.row.memberUsername}}</template>
</el-table-column>
<el-table-column label="退款金额" width="180" align="center">
<!-- 通过插值表达式 ￥{{scope.row | formatReturnAmount}} 展示退款金额信息，使用了 formatReturnAmount 过滤器（在 Vue 实例的 filters 中定义，用于根据业务逻辑计算并返回退款金额的值，可能是基于商品价格、数量等因素计算）对数据进行处理后再展示，前面添加“￥”符号表示人民币金额 -->
<template slot-scope="scope">￥{{scope.row | formatReturnAmount}}</template>
</el-table-column>
<el-table-column label="申请状态" width="180" align="center">
<!-- 通过插值表达式 {{scope.row.status | formatStatus}} 展示申请状态信息，使用了 formatStatus 过滤器（在 Vue 实例的 filters 中定义，用于将状态的数字值转换为对应的文字描述，使展示更友好易懂）对状态数据进行处理后再展示 -->
<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
</el-table-column>
<el-table-column label="处理时间" width="180" align="center">
<!-- 通过插值表达式 {{scope.row.handleTime | formatTime}} 展示处理时间信息，使用 formatTime 过滤器对时间数据进行格式化处理后展示 -->
<template slot-scope="scope">{{scope.row.handleTime | formatTime}}</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<!-- 在表格列的单元格中使用 el-button 组件创建一个按钮，设置按钮尺寸为 mini（最小尺寸按钮），绑定了点击事件 handleViewDetail(scope.$index, scope.row)，点击按钮会调用该方法并传入当前行的索引（scope.$index）和当前行的数据对象（scope.row），按钮文本为“查看详情”，用于跳转到对应服务单的详情页面查看详细信息 -->
<el-button
size="mini"
@click="handleViewDetail(scope.$index, scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 创建一个 div 容器，添加了 batch-operate-container 类名用于样式控制，用于放置批量操作相关的元素，如下拉选择框和按钮等 -->
<div class="batch-operate-container">
<!-- 使用 el-select 组件创建一个下拉选择框，设置尺寸为 small，通过 v-model="operateType" 将选择框选中的值与 operateType 属性进行双向绑定，placeholder="批量操作" 设置占位提示文本，用于选择要进行的批量操作类型，内部通过 v-for 指令循环遍历 operateOptions 数组（在 Vue 实例的 data 中定义），为每个元素创建一个 el-option 选项，展示不同的批量操作选项供用户选择 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operateOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="输入搜索：">
<el-input v-model="listQuery.id" class="input-width" placeholder="服务单号"></el-input>
</el-form-item>
<el-form-item label="处理状态：">
<el-select v-model="listQuery.status" placeholder="全部" clearable class="input-width">
<el-option v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 使用 el-button 组件创建一个按钮，设置样式距离左边有 20 像素的外边距（margin-left: 20px），添加了 search-button 类名（推测用于样式设置，虽然 CSS 部分未看到具体样式定义），绑定了点击事件 handleBatchOperate()，点击按钮会调用该方法，按钮类型为 primary，按钮尺寸为 small，按钮文本为“确定”，用于触发批量操作的执行 -->
</el-form-item>
<el-form-item label="申请时间：">
<el-date-picker
class="input-width"
v-model="listQuery.createTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<el-form-item label="操作人员：">
<el-input v-model="listQuery.handleMan" class="input-width" placeholder="全部"></el-input>
</el-form-item>
<el-form-item label="处理时间：">
<el-date-picker
class="input-width"
v-model="listQuery.handleTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
</el-card>
<div class="table-container">
<el-table ref="returnApplyTable"
:data="list"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading" border>
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column label="服务单号" width="180" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="申请时间" width="180" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
</el-table-column>
<el-table-column label="用户账号" align="center">
<template slot-scope="scope">{{scope.row.memberUsername}}</template>
</el-table-column>
<el-table-column label="退款金额" width="180" align="center">
<template slot-scope="scope">￥{{scope.row | formatReturnAmount}}</template>
</el-table-column>
<el-table-column label="申请状态" width="180" align="center">
<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
</el-table-column>
<el-table-column label="处理时间" width="180" align="center">
<template slot-scope="scope">{{scope.row.handleTime | formatTime}}</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- 创建一个 div 容器，添加了 pagination-container 类名用于样式控制，用于放置分页相关的组件 -->
<div class="pagination-container">
<!-- 使用 el-pagination 组件创建分页器，background 属性表示给分页按钮等添加背景色，绑定了 @size-change 事件和 @current-change 事件，分别在页面大小改变和当前页码改变时调用 handleSizeChange 方法和 handleCurrentChange 方法，layout 属性定义分页器的布局显示哪些元素（如总条数、每页条数选择、上一页、页码、下一页、跳转到指定页等），:current-page.sync="listQuery.pageNum" 通过双向绑定将当前页码与 listQuery 对象中的 pageNum 属性关联起来，:page-size="listQuery.pageSize" 将每页显示的条数与 listQuery 对象中的 pageSize 属性关联起来，:page-sizes="[5,10,15]" 定义可选择的每页条数的选项数组，:total="total" 将总数据条数与 total 属性关联起来，用于分页功能的展示和交互 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
size="mini"
@click="handleViewDetail(scope.$index, scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operateOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 从项目的 @/utils/date 文件中导入 formatDate 函数，该函数大概率是用于对日期数据进行格式化处理，使其符合特定的显示格式要求
import {formatDate} from '@/utils/date';
// 从 @/api/returnApply 文件中导入 fetchList 和 deleteApply 这两个函数，fetchList 函数通常用于向后台发起请求获取服务申请列表相关的数据，deleteApply 函数则可能是用于向后台发送删除服务申请的请求，它们都是和后端 API 进行交互的重要接口调用函数
import {fetchList, deleteApply} from '@/api/returnApply';
// 定义一个名为 defaultListQuery 的常量对象，用于设置获取服务申请列表时的默认查询参数。
// 各属性含义如下：
// pageNum: 表示当前页码，初始值设为 1，代表默认显示第一页数据。
// pageSize: 表示每页显示的数据条数，初始设为 10，即默认每页展示 10 条服务申请相关记录。
// id: 用于根据服务单号进行筛选查询，初始设为 null，意味着一开始没有特定的服务单号筛选条件。
// receiverKeyword: 可能是与接收者相关的搜索关键字，初始为 null，暂未设置具体筛选内容。
// status: 用于按服务申请的处理状态进行筛选，初始设为 null，也就是不做状态筛选。
// createTime: 按申请时间进行筛选的字段，初始值 null 表示无申请时间筛选条件。
// handleMan: 根据操作人员进行筛选的字段，初始为 null，未指定操作人员筛选条件。
// handleTime: 用于依据处理时间来筛选服务申请记录，同样初始设为 null，无此方面的筛选要求。
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
id: null,
receiverKeyword: null,
status: null,
createTime: null,
handleMan: null,
handleTime: null
};
// 定义一个名为 defaultStatusOptions 的常量数组，用于配置服务申请处理状态的可选项。
// 数组中的每个元素都是一个对象，对象包含 'label'（用于在前端界面上显示给用户看的文字描述，比如 '待处理'）和 'value'（对应后台存储或业务逻辑中使用的实际数值，如 0 代表待处理状态）两个属性。
const defaultStatusOptions = [
{
label: '待处理',
value: 0
},
{
label: '退货中',
import {formatDate} from '@/utils/date';
import {fetchList,deleteApply} from '@/api/returnApply';
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
id: null,
receiverKeyword: null,
status: null,
createTime: null,
handleMan: null,
handleTime: null
};
const defaultStatusOptions=[
{
label: '待处理',
value: 0
},
{
label: '退货中',
value: 1
},
{
label: '已完成',
value: 2
},
{
label: '已拒绝',
value: 3
}
];
export default {
name:'returnApplyList',
data() {
return {
listQuery:Object.assign({},defaultListQuery),
statusOptions: Object.assign({},defaultStatusOptions),
list:null,
total:null,
listLoading:false,
multipleSelection:[],
operateType:1,
operateOptions: [
{
label: "批量删除",
value: 1
},
{
label: '已完成',
value: 2
},
{
label: '已拒绝',
value: 3
}
],
}
},
created(){
this.getList();
},
filters:{
formatTime(time) {
if(time==null||time===''){
return 'N/A';
}
];
// 定义并导出一个名为 returnApplyList 的 Vue 组件
export default {
name:'returnApplyList',
// data 函数用于返回组件的初始数据对象，定义了组件中用到的各种数据及其初始值
data() {
return {
// 通过 Object.assign 创建 listQuery 对象的副本，初始值参照 defaultListQuery 的设置，后续这个对象会根据用户在界面上的筛选操作动态变化，用于向后台请求服务申请列表时传递相应的查询参数
listQuery: Object.assign({}, defaultListQuery),
// 同样通过 Object.assign 创建 statusOptions 对象的副本，初始值基于 defaultStatusOptions，用于在前端界面展示可供用户选择的服务申请处理状态下拉选项
statusOptions: Object.assign({}, defaultStatusOptions),
// 用于存储从后台获取到的服务申请列表数据，初始设为 null，等调用 fetchList 函数获取到数据后再进行赋值
list: null,
// 用于保存服务申请列表的总数据条数，初始值为 null，在获取列表数据时会一同获取总条数并赋值，以便用于分页等相关功能展示
total: null,
// 布尔类型的变量，用于表示当前是否正在加载数据，初始设为 false，在调用获取数据的函数（如 fetchList）时会将其设为 true，数据加载完成后再设回 false，方便在界面上展示加载动画等反馈给用户
listLoading: false,
// 用于存储用户在表格中多选的服务申请记录数据，初始为空数组，每当表格行的选择状态改变时（通过 handleSelectionChange 方法更新），这个数组会相应更新，记录被选中的行数据
multipleSelection: [],
// 用于绑定批量操作类型下拉选择框选中的值，初始设为 1，可能对应着默认的批量操作类型（比如当前代码中只定义了批量删除操作，值为 1 就代表批量删除），用户可通过下拉选择框改变其值来选择不同的批量操作
operateType: 1,
// 定义批量操作的可选项数组，每个元素是一个对象，包含 'label'（显示给用户的操作名称，这里是 "批量删除"）和 'value'（对应操作的标识值，这里批量删除对应的值为 1）属性，用于在前端界面展示可供用户选择的批量操作下拉选项
operateOptions: [
{
label: "批量删除",
value: 1
}
],
}
},
// created 生命周期钩子函数，在组件实例被创建后立即执行，这里主要调用了 getList 方法，目的是在组件初始化时就去获取服务申请列表数据，确保页面展示时有初始数据可用
created() {
this.getList();
},
// filters 属性用于定义过滤器函数，这些函数可以在模板中对相应的数据进行格式化处理后再展示给用户
filters: {
// 定义名为 formatTime 的过滤器函数，用于将时间格式的数据进行格式化。
// 如果传入的时间参数 time 为 null 或者空字符串（即没有有效的时间数据），则返回 'N/A'，表示无可用时间信息。
// 若 time 有值，就通过 new Date(time) 将其转换为 JavaScript 的 Date 对象，再调用导入的 formatDate 函数（前面从 @/utils/date 文件导入的）按照 'yyyy-MM-dd hh:mm:ss' 的格式进行格式化，并返回格式化后的时间字符串。
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
// 定义名为 formatStatus 的过滤器函数，用于将服务申请的状态数值转换为对应的文字描述。
// 它会遍历 defaultStatusOptions 数组，对比传入的 status 参数值和数组中每个元素的 value 值，如果相等，就返回该元素对应的 label 值（即对应的文字描述），以此实现状态数值到文字的转换，方便在前端界面更友好地展示状态信息。
formatStatus(status) {
for (let i = 0; i < defaultStatusOptions.length; i++) {
if (status === defaultStatusOptions[i].value) {
return defaultStatusOptions[i].label;
}
}
},
// 定义名为 formatReturnAmount 的过滤器函数，用于计算并返回服务申请中对应的退款金额。
// 它通过获取传入的 row 对象（通常是服务申请记录相关的数据对象）中的 productRealPrice（商品实际价格）和 productCount（商品数量）属性值，并将两者相乘，得到退款金额后返回，这样在前端模板中就能方便地展示计算后的退款金额数据了。
formatReturnAmount(row) {
return row.productRealPrice * row.productCount;
}
},
// methods 属性用于定义组件中的各种方法，这些方法可以在模板中通过事件绑定等方式被调用，以实现各种交互逻辑和业务功能
methods: {
// 定义 handleSelectionChange 方法，用于处理表格行选择状态改变的事件。
// 参数 val 就是当前表格行选择状态改变后的值（通常是一个包含被选中行数据的数组），将这个值直接赋值给 multipleSelection 属性，使得 multipleSelection 能实时更新为当前用户在表格中选中的服务申请记录数据，方便后续进行批量操作等逻辑处理。
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 定义 handleResetSearch 方法，用于重置筛选搜索的条件。
// 它将 listQuery 对象重新赋值为 defaultListQuery 的副本，也就是把所有筛选条件恢复到初始的默认状态，这样用户下次进行搜索时就相当于从初始状态重新开始筛选服务申请记录了。
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 定义 handleSearchList 方法，用于触发搜索服务申请列表的操作。
// 首先将 listQuery 对象中的 pageNum 属性重置为 1，确保搜索结果从第一页开始展示，然后调用 getList 方法，该方法会根据当前 listQuery 中的筛选条件向后台请求服务申请列表数据，并更新界面上的列表展示以及相关分页等信息。
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// 定义 handleViewDetail 方法，用于处理查看服务申请详情的操作。
// 参数 index 表示当前点击查看详情的行在表格中的索引位置，row 则是该行对应的服务申请记录数据对象。
// 通过使用 Vue Router 的 $router.push 方法进行路由跳转，跳转到 '/oms/returnApplyDetail' 路径，并将当前服务申请记录的 id（从 row.id 获取）作为查询参数传递过去，以便在详情页面能根据这个 id 获取并展示对应的服务申请详细信息。
handleViewDetail(index, row) {
this.$router.push({path: '/oms/returnApplyDetail', query: {id: row.id}})
},
// 定义 handleBatchOperate 方法，用于处理批量操作的逻辑。
// 首先判断 multipleSelection 是否为 null 或者其长度小于 1，即用户是否没有选择任何要操作的服务申请记录，如果是这种情况，就通过 $message 组件（可能是 Element UI 等提供的消息提示组件）弹出一个警告类型的提示消息，告知用户需要选择要操作的申请，然后直接返回，不再执行后续批量操作的逻辑。
// 如果用户选择了要操作的记录且 operateType 等于 1（当前代码中代表批量删除操作），则会弹出一个确认框（通过 $confirm 组件，同样可能是 Element UI 等提供的确认框组件）询问用户是否要进行删除操作，确认框设置了确认按钮文本、取消按钮文本以及提示框类型等属性。
// 如果用户点击确认按钮，会进行以下操作：
// 1. 创建一个 URLSearchParams 对象，用于构建向后台发送请求时的参数格式（通常用于处理 URL 中的查询参数等情况）。
// 2. 循环遍历 multipleSelection 数组，将每个被选中服务申请记录的 id 提取出来存放到 ids 数组中。
// 3. 使用 params.append("ids", ids) 将 ids 数组添加到 URLSearchParams 对象中，形成符合后台接口要求的参数格式。
// 4. 调用 deleteApply 函数，传入构建好的 params 参数，向后台发送批量删除服务申请的请求，在请求成功的回调函数中（then 部分），再次调用 getList 方法，用于重新获取最新的服务申请列表数据（因为删除操作后列表数据会有变化），同时通过 $message 组件弹出一个成功类型的提示消息，告知用户删除成功。
handleBatchOperate() {
if (this.multipleSelection == null || this.multipleSelection.length < 1) {
this.$message({
message: '请选择要操作的申请',
type: 'warning',
duration: 1000
});
return;
}
if (this.operateType === 1) {
//批量删除
this.$confirm('是否要进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
params.append("ids", ids);
deleteApply(params).then(response => {
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
}
},
// 定义 handleSizeChange 方法，用于处理每页显示数据条数改变的事件。
// 参数 val 就是用户选择的新的每页显示条数的值，首先将 listQuery 对象中的 pageNum 属性重置为 1，确保在改变每页条数后从第一页开始展示数据，然后将 listQuery 的 pageSize 属性更新为 val（新的每页条数），最后调用 getList 方法，根据新的查询参数重新获取服务申请列表数据并更新界面展示。
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 定义 handleCurrentChange 方法，用于处理当前页码改变的事件。
// 参数 val 是用户切换到的新的页码值，直接将 listQuery 对象中的 pageNum 属性更新为 val，然后调用 getList 方法，根据新的页码去获取对应的服务申请列表数据并更新界面展示，实现分页功能的页面数据切换。
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// 定义 getList 方法，用于获取服务申请列表数据。
// 首先将 listLoading 属性设为 true，表示开始加载数据，这样在界面上可以通过绑定这个属性来展示加载动画等提示用户正在获取数据。
// 然后调用 fetchList 函数，传入 listQuery 对象作为查询参数向后台发起请求获取服务申请列表数据，在请求成功的回调函数（then 部分）中：
// 1. 将 listLoading 属性设回 false，表示数据加载完成，隐藏加载动画。
// 2. 将获取到的服务申请列表数据赋值给 list 属性，用于在前端界面的表格等组件中展示具体的服务申请记录信息。
// 3. 将获取到的服务申请列表总数据条数赋值给 total 属性，以便分页组件等能根据总条数正确展示分页信息。
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
formatStatus(status){
for(let i=0;i<defaultStatusOptions.length;i++){
if(status===defaultStatusOptions[i].value){
return defaultStatusOptions[i].label;
}
}
},
formatReturnAmount(row){
return row.productRealPrice*row.productCount;
}
},
methods:{
handleSelectionChange(val){
this.multipleSelection = val;
},
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleViewDetail(index,row){
this.$router.push({path:'/oms/returnApplyDetail',query:{id:row.id}})
},
handleBatchOperate(){
if(this.multipleSelection==null||this.multipleSelection.length<1){
this.$message({
message: '请选择要操作的申请',
type: 'warning',
duration: 1000
});
return;
}
if(this.operateType===1){
//批量删除
this.$confirm('是否要进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
let ids=[];
for(let i=0;i<this.multipleSelection.length;i++){
ids.push(this.multipleSelection[i].id);
}
params.append("ids",ids);
deleteApply(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
}
},
handleSizeChange(val){
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val){
this.listQuery.pageNum = val;
this.getList();
},
getList(){
this.listLoading=true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
}
}
</script>
<style scoped>
/* 定义了一个名为.input-width 的类选择器样式，用于设置元素的宽度为 203 像素。
在 HTML 模板中，那些添加了这个类名的元素（比如某些输入框等）就会应用这个宽度样式，起到统一控制相关元素宽度，使页面布局更规整的作用 */
.input-width {
width: 203px;
}
width: 203px;
}
</style>

11
src/views/oms/apply/reason.vue
Unescape View File

@ -104,14 +104,6 @@
</el-dialog>
</div>
</template>
<script>
import {formatDate} from '@/utils/date';
import {fetchList,deleteReason,updateStatus,addReason,getReasonDetail,updateReason} from '@/api/returnReason';
@ -272,9 +264,6 @@
}
}
</script>
<style scoped>
.input-width {
width: 80%;

27
src/views/oms/order/components/logisticsDialog.vue
Unescape View File

@ -1,26 +1,12 @@
<template>
<!-- el-dialog组件用于创建一个对话框，这里用于展示订单跟踪相关内容 -->
<!-- title属性设置对话框的标题为"订单跟踪" -->
<!-- :visible.sync是双向绑定属性，用于控制对话框的显示与隐藏，绑定到组件实例中的visible属性 -->
<!-- :before-close绑定了一个关闭前的处理函数handleClose，用于在关闭对话框时执行一些操作 -->
<!-- width属性设置对话框的宽度为页面宽度的40% -->
<template> 
<el-dialog title="订单跟踪"
:visible.sync="visible"
:before-close="handleClose"
width="40%">
<!-- el-steps组件用于创建竖向排列的步骤条，用于展示订单物流的各个步骤 -->
<!-- direction="vertical"表示步骤条竖向排列 -->
<!-- :active="6"表示默认激活第6个步骤（索引从0开始计数） -->
<!-- finish-status="success"表示已完成的步骤显示为成功状态（通常有相应的样式体现） -->
<!-- space="50px"设置每个步骤之间的间距为50像素 -->
<el-steps direction="vertical"
:active="6"
finish-status="success"
space="50px">
<!-- 使用v-for指令循环遍历logisticsList数组，为每个元素创建一个el-step组件，用于展示物流的单个步骤 -->
<!-- :key属性绑定唯一标识，这里用item.name，便于Vue进行高效的DOM更新 -->
<!-- :title属性绑定步骤的标题，对应item.name -->
<!-- :description属性绑定步骤的描述信息，对应item.time -->
<el-step v-for="item in logisticsList"
:key="item.name"
:title="item.name"
@ -29,7 +15,6 @@
</el-dialog>
</template>
<script>
// 定义一个默认的物流列表数组，包含了订单物流各个阶段的信息，每个对象有name（步骤名称）和time（对应时间）属性
const defaultLogisticsList=[
{name: '订单已提交，等待付款',time:'2017-04-01 12:00:00 '},
{name: '订单付款成功',time:'2017-04-01 12:00:00 '},
@ -41,17 +26,14 @@
];
export default {
name:'logisticsDialog',
// 定义一个名为value的属性，类型为布尔值，用于接收父组件传递过来的值，这里用于控制对话框显示隐藏相关逻辑
props: {
value: Boolean
},
computed:{
visible: {
// get方法，用于获取visible属性的值，返回从父组件传入的value值，实现数据的读取
get() {
return this.value;
},
// set方法，用于设置visible属性的值，当外部修改visible时，同时更新value的值，实现双向绑定的效果
set(visible){
this.value=visible;
}
@ -59,20 +41,19 @@
},
data() {
return {
// 将默认的物流列表进行浅拷贝赋值给logisticsList，这样在组件内部对logisticsList操作不会影响到外部传入的默认数据
logisticsList:Object.assign({},defaultLogisticsList)
}
},
methods:{
// 自定义方法emitInput，用于触发名为'input'的事件，并传递参数val，通常用于和父组件进行数据交互，通知父组件数据的变化情况
emitInput(val) {
this.$emit('input', val)
},
// 处理对话框关闭的方法，当调用该方法时，通过emitInput方法传递false值，通知父组件将对话框隐藏（通常是通过改变绑定的visible属性实现）
handleClose(){
this.emitInput(false);
}
}
}
</script>
<style></style>
<style></style>

217
src/views/oms/order/deliverOrderList.vue
Unescape View File

@ -1,134 +1,99 @@
<template>
<!-- 整个页面内容的外层容器，添加了 app-container 类名，用于整体的布局控制以及样式应用，可能在对应的 CSS 文件中有相关样式定义 -->
<div class="app-container">
<!-- 使用 el-card 组件创建一个卡片式的容器，添加了 operate-container 类名用于特定样式定制，设置 shadow="never" 表示该卡片不显示阴影效果，内部包含一个图标和一个文本标签，用于提示此区域是和“发货列表”相关的内容 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>发货列表</span>
</el-card>
<!-- 创建一个 div 容器，添加了 table-container 类名用于样式控制，用于放置包含发货信息的表格以及相关操作按钮等内容 -->
<div class="table-container">
<!-- 使用 el-table 组件创建一个表格，ref="deliverOrderTable" 给表格添加了一个引用标识，方便在 Vue 实例的 JavaScript 代码中通过 this.$refs.deliverOrderTable 来获取这个表格组件的实例，设置表格宽度为 100%以铺满父容器，通过 :data="list" 将表格要展示的数据与 list 数组（在 Vue 实例的 data 中定义）进行绑定，border 属性用于给表格添加边框，使其样式更清晰、美观 -->
<el-table ref="deliverOrderTable"
style="width: 100%;"
:data="list" border>
<!-- 使用 el-table-column 组件定义表格的列，label="订单编号" 设置该列在表头显示的标题为“订单编号”，width="180" 设置列宽为 180 像素，align="center" 将列内容在水平方向上进行居中对齐，内部使用 template 结合 slot-scope="scope" 的方式来自定义单元格内容展示，通过插值表达式 {{scope.row.orderSn}} 从 scope 对象中 row 属性下的 orderSn 字段获取对应的值并渲染显示，也就是展示每一行对应的订单编号信息 -->
<el-table-column label="订单编号" width="180" align="center">
<template slot-scope="scope">{{scope.row.orderSn}}</template>
</el-table-column>
<el-table-column label="收货人" width="180" align="center">
<template slot-scope="scope">{{scope.row.receiverName}}</template>
</el-table-column>
<el-table-column label="手机号码" width="160" align="center">
<template slot-scope="scope">{{scope.row.receiverPhone}}</template>
</el-table-column>
<el-table-column label="邮政编码" width="160" align="center">
<template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
</el-table-column>
<el-table-column label="收货地址" align="center">
<template slot-scope="scope">{{scope.row.address}}</template>
</el-table-column>
<el-table-column label="配送方式" width="160" align="center">
<template slot-scope="scope">
<!-- 在表格列的单元格中使用 el-select 组件创建一个下拉选择框，placeholder="请选择物流公司" 设置下拉框的占位提示文本，v-model="scope.row.deliveryCompany" 通过双向数据绑定将选择框选中的值与当前行数据对象（scope.row）中的 deliveryCompany 属性进行绑定，方便数据的更新与获取，size="small" 表示下拉框为小尺寸，内部通过 v-for 指令循环遍历 companyOptions 数组（在 Vue 实例的 data 中定义，用于存储物流公司名称列表），为每个元素创建一个 el-option 选项，:key、:label 和 :value 都设置为当前元素，也就是每个选项的唯一标识、显示文本以及对应的值都为物流公司名称，用于展示可供选择的物流公司选项 -->
<el-select placeholder="请选择物流公司"
v-model="scope.row.deliveryCompany"
size="small">
<el-option v-for="item in companyOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="物流单号" width="180" align="center">
<template slot-scope="scope">
<!-- 在表格列的单元格中使用 el-input 组件创建一个输入框，size="small" 表示输入框为小尺寸，v-model="scope.row.deliverySn" 通过双向数据绑定将输入框的值与当前行数据对象（scope.row）中的 deliverySn 属性进行绑定，方便输入物流单号后的数据更新与获取 -->
<el-input size="small" v-model="scope.row.deliverySn"></el-input>
</template>
</el-table-column>
</el-table>
<!-- 创建一个 div 容器，设置顶部外边距为 15 像素（margin-top: 15px），文本水平居中（text-align: center），用于放置操作按钮，包括“取消”和“确定”按钮 -->
<div style="margin-top: 15px;text-align: center">
<!-- 使用 el-button 组件创建一个按钮，绑定了 click 事件，点击按钮会调用 cancel 方法（在 Vue 实例的 methods 中定义），按钮文本为“取消”，用于取消当前操作并返回上一个页面等相关逻辑 -->
<el-button @click="cancel">取消</el-button>
<!-- 使用 el-button 组件创建一个按钮，绑定了 click 事件，点击按钮会调用 confirm 方法（在 Vue 实例的 methods 中定义），按钮类型为 primary（通常表示主要操作按钮，样式上会有相应突出显示），按钮文本为“确定”，用于触发发货操作等相关业务逻辑 -->
<el-button @click="confirm" type="primary">确定</el-button>
</div>
</div>
<template> 
<div class="app-container">
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>发货列表</span>
</el-card>
<div class="table-container">
<el-table ref="deliverOrderTable"
style="width: 100%;"
:data="list" border>
<el-table-column label="订单编号" width="180" align="center">
<template slot-scope="scope">{{scope.row.orderSn}}</template>
</el-table-column>
<el-table-column label="收货人" width="180" align="center">
<template slot-scope="scope">{{scope.row.receiverName}}</template>
</el-table-column>
<el-table-column label="手机号码" width="160" align="center">
<template slot-scope="scope">{{scope.row.receiverPhone}}</template>
</el-table-column>
<el-table-column label="邮政编码" width="160" align="center">
<template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
</el-table-column>
<el-table-column label="收货地址" align="center">
<template slot-scope="scope">{{scope.row.address}}</template>
</el-table-column>
<el-table-column label="配送方式" width="160" align="center">
<template slot-scope="scope">
<el-select placeholder="请选择物流公司"
v-model="scope.row.deliveryCompany"
size="small">
<el-option v-for="item in companyOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="物流单号" width="180" align="center">
<template slot-scope="scope">
<el-input size="small" v-model="scope.row.deliverySn"></el-input>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 15px;text-align: center">
<el-button @click="cancel">取消</el-button>
<el-button @click="confirm" type="primary">确定</el-button>
</div>
</div>
</div>
</template>
<script>
// 从项目的 @/api/order 文件中导入 deliveryOrder 函数，推测这个函数用于向后台 API 发送发货相关的请求，比如将发货信息提交给后台进行处理等，是与后端进行交互的重要接口调用函数
import {deliveryOrder} from '@/api/order'
// 定义一个名为 defaultLogisticsCompanies 的常量数组，用于存储默认的物流公司名称列表，这里包含了“顺丰快递”“圆通快递”“中通快递”“韵达快递”等常见的物流公司名称，在表格的配送方式下拉选择框中会展示这些选项供用户选择物流公司
const defaultLogisticsCompanies = ["顺丰快递", "圆通快递", "中通快递", "韵达快递"];
// 定义并导出一个名为 deliverOrderList 的 Vue 组件
export default {
name: 'deliverOrderList',
// data 函数用于返回组件的初始数据对象，定义了组件中用到的各种数据及其初始值
data() {
return {
// 用于存储发货相关的订单信息列表，初始设为空数组，后续可能会通过路由参数等方式获取具体数据并赋值，用于在表格中展示发货信息
list: [],
// 通过将 defaultLogisticsCompanies 数组直接赋值给 companyOptions 属性，用于存储物流公司选项列表，供表格中配送方式下拉选择框使用，展示可供选择的物流公司名称
companyOptions: defaultLogisticsCompanies
}
},
// created 生命周期钩子函数，在组件实例创建完成后立即执行，这里主要进行了对 list 数据的初始化操作
created() {
// 从当前路由的查询参数中获取名为 list 的参数值，并赋值给组件的 list 属性，尝试获取发货相关的订单信息列表数据，但这个数据应该是符合一定格式要求的（比如数组形式），所以下面还有进一步的判断处理
this.list = this.$route.query.list;
// 判断 list 是否不是数组类型（通过 instanceof Array 判断），如果不是数组，就将 list 重新赋值为空数组，避免后续操作出现问题，保证 list 属性始终是一个数组，用于表格数据展示等相关逻辑
if (this.list instanceof Array === false) {
this.list = [];
}
},
// methods 属性用于定义组件中的各种方法，这些方法可以在模板中通过事件绑定等方式被调用，以实现各种交互逻辑和业务功能
methods: {
// 定义 cancel 方法，用于处理取消操作的逻辑，通过 Vue Router 的 $router.back() 方法实现路由回退，也就是返回上一个页面，通常用于用户不想进行发货操作，点击“取消”按钮时执行的逻辑
cancel() {
this.$router.back();
},
// 定义 confirm 方法，用于处理确认发货操作的逻辑
confirm() {
// 使用 $confirm 组件（可能是 Element UI 等提供的确认框组件）弹出一个确认提示框，询问用户是否要进行发货操作，设置了确认按钮文本为“确定”，取消按钮文本为“取消”，提示框类型为 warning（可能会有相应的警告样式提示用户谨慎操作）
this.$confirm('是否要进行发货操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果用户点击确认按钮，调用 deliveryOrder 函数（前面从 API 导入的函数），传入 list 数组（包含要发货的订单信息），向后台发送发货请求，在请求成功的回调函数（then 部分）中：
// 1. 通过 $router.back() 方法进行路由回退，返回上一个页面，可能是在发货成功后回到发货列表页面或者相关的订单管理页面等。
// 2. 使用 $message 组件（可能是 Element UI 等提供的消息提示组件）弹出一个成功类型的提示消息，告知用户发货成功，展示友好的操作反馈给用户。
deliveryOrder(this.list).then(response => {
this.$router.back();
this.$message({
type: 'success',
message: '发货成功!'
});
});
}).catch(() => {
// 如果用户在确认提示框中点击了取消按钮，或者请求过程中出现异常被捕获到（通过 catch 块），会使用 $message 组件弹出一个信息类型的提示消息，告知用户已取消发货，同样是给用户一个操作反馈，让用户知晓当前操作的结果。
this.$message({
type: 'info',
message: '已取消发货'
});
});
}
}
import {deliveryOrder} from '@/api/order'
const defaultLogisticsCompanies=["顺丰快递","圆通快递","中通快递","韵达快递"];
export default {
name: 'deliverOrderList',
data() {
return {
list:[],
companyOptions:defaultLogisticsCompanies
}
},
created(){
this.list= this.$route.query.list;
//当list不为数组时转换为数组
if(this.list instanceof Array===false){
this.list=[];
}
},
methods:{
cancel(){
this.$router.back();
},
confirm(){
this.$confirm('是否要进行发货操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deliveryOrder(this.list).then(response=>{
this.$router.back();
this.$message({
type: 'success',
message: '发货成功!'
});
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消发货'
});
});
}
}
}
</script>
<style></style>

983
src/views/oms/order/index.vue
View File

File diff suppressed because it is too large Load Diff

923
src/views/oms/order/orderDetail.vue
View File

File diff suppressed because it is too large Load Diff

312
src/views/oms/order/setting.vue
Unescape View File

@ -1,207 +1,127 @@
<template>
<!-- 使用 el-card 组件创建一个卡片式的布局容器，设置类名为 "form-container"，阴影效果为 "never"（即无阴影），用于包裹整个订单设置的表单内容 -->
<el-card class="form-container" shadow="never">
<!-- 使用 el-form 组件创建表单，绑定表单数据模型为 "orderSetting"，设置表单的引用名为 "orderSettingForm"（方便后续通过 $refs 来获取表单实例进行验证等操作），
同时通过 :rules 绑定验证规则对象 "rules"，设置表单标签的宽度为 150px，用于统一表单中各个表单项标签的显示宽度 -->
<el-form :model="orderSetting"
ref="orderSettingForm"
:rules="rules"
label-width="150px">
<!-- 以下是各个表单项（el-form-item）的定义，每个表单项对应一个订单设置的时间相关配置 -->
<!-- 秒杀订单超时未付款自动关闭的时间设置表单项 -->
<el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
<!-- 使用 el-input 组件创建一个输入框，通过 v-model 双向绑定 "orderSetting.flashOrderOvertime" 数据，意味着用户在输入框中输入的值会实时更新到这个数据属性中，
同时设置输入框的类名为 "input-width"，用于控制输入框的宽度样式（在后面的 <style> 部分定义了该类对应的宽度为 50%） -->
<el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
<!-- 使用 slot="append" 定义一个后置插槽，在输入框后面添加一个文本内容 "分"，用于提示用户输入的时间单位是分钟 -->
<template slot="append">分</template>
</el-input>
<!-- 展示一个提示文本，设置类名为 "note-margin"（在后面 <style> 部分定义了该类的左边距样式），用于提示用户该项设置对应的业务含义，即秒杀订单超过设定时间未付款会自动关闭 -->
<span class="note-margin">未付款，订单自动关闭</span>
</el-form-item>
<!-- 正常订单超时未付款自动关闭的时间设置表单项，结构和上面秒杀订单的类似 -->
<el-form-item label="正常订单超过：" prop="normalOrderOvertime">
<el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
<template slot="append">分</template>
</el-input>
<span class="note-margin">未付款，订单自动关闭</span>
</el-form-item>
<!-- 发货后超时未收货自动完成订单的时间设置表单项 -->
<el-form-item label="发货超过：" prop="confirmOvertime">
<el-input v-model="orderSetting.confirmOvertime" class="input-width">
<template slot="append">天</template>
</el-input>
<span class="note-margin">未收货，订单自动完成</span>
</el-form-item>
<!-- 订单完成后超时自动结束交易且不能申请售后的时间设置表单项 -->
<el-form-item label="订单完成超过：" prop="finishOvertime">
<el-input v-model="orderSetting.finishOvertime" class="input-width">
<template slot="append">天</template>
</el-input>
<span class="note-margin">自动结束交易，不能申请售后</span>
</el-form-item>
<!-- 订单完成后超时自动给予五星好评的时间设置表单项 -->
<el-form-item label="订单完成超过：" prop="commentOvertime">
<el-input v-model="orderSetting.commentOvertime" class="input-width">
<template slot="append">天</template>
</el-input>
<span class="note-margin">自动五星好评</span>
</el-form-item>
<!-- 定义一个提交按钮的表单项 -->
<el-form-item>
<!-- 使用 el-button 组件创建一个按钮，设置按钮的点击事件为调用 "confirm('orderSettingForm')" 方法（在后面的 methods 中定义），按钮类型为 "primary"（通常是主要的、突出显示的按钮样式），按钮文字为 "提交" -->
<el-button
@click="confirm('orderSettingForm')"
type="primary">提交</el-button>
</el-form-item>
</el-form>
</el-card>
<template> 
<el-card class="form-container" shadow="never">
<el-form :model="orderSetting"
ref="orderSettingForm"
:rules="rules"
label-width="150px">
<el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
<el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
<template slot="append">分</template>
</el-input>
<span class="note-margin">未付款，订单自动关闭</span>
</el-form-item>
<el-form-item label="正常订单超过：" prop="normalOrderOvertime">
<el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
<template slot="append">分</template>
</el-input>
<span class="note-margin">未付款，订单自动关闭</span>
</el-form-item>
<el-form-item label="发货超过：" prop="confirmOvertime">
<el-input v-model="orderSetting.confirmOvertime" class="input-width">
<template slot="append">天</template>
</el-input>
<span class="note-margin">未收货，订单自动完成</span>
</el-form-item>
<el-form-item label="订单完成超过：" prop="finishOvertime">
<el-input v-model="orderSetting.finishOvertime" class="input-width">
<template slot="append">天</template>
</el-input>
<span class="note-margin">自动结束交易，不能申请售后</span>
</el-form-item>
<el-form-item label="订单完成超过：" prop="commentOvertime">
<el-input v-model="orderSetting.commentOvertime" class="input-width">
<template slot="append">天</template>
</el-input>
<span class="note-margin">自动五星好评</span>
</el-form-item>
<el-form-item>
<el-button
@click="confirm('orderSettingForm')"
type="primary">提交</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
// 从 '@/api/orderSetting' 模块中导入两个函数，getOrderSetting 函数大概率用于获取订单设置的相关信息，updateOrderSetting 函数用于将修改后的订单设置信息提交更新到后端
import {getOrderSetting, updateOrderSetting} from '@/api/orderSetting';
// 定义一个名为 defaultOrderSetting 的常量对象，用于表示订单设置的默认数据结构和初始值。
// 包含了各个时间设置项的初始值都为 0（如秒杀订单超时时间、正常订单超时时间等）以及一个用于标识的 id 属性初始值设为 null，
// 后续可以基于这个默认结构来填充实际获取到的数据或者重置相关设置数据。
const defaultOrderSetting = {
id: null,
flashOrderOvertime: 0,
normalOrderOvertime: 0,
confirmOvertime: 0,
finishOvertime: 0,
commentOvertime: 0
};
// 定义一个名为 checkTime 的函数，用于作为表单输入框的验证规则函数。
// 接收三个参数：rule（当前验证规则对象，包含了一些验证相关的配置信息），value（输入框中用户输入的值），callback（用于回调告知验证结果的函数）
const checkTime = (rule, value, callback) => {
// 判断用户输入的值是否为空，如果为空，就通过 callback 函数返回一个 Error 对象，并传入错误提示信息 '时间不能为空'，
// 这样在表单验证时就会显示相应的错误提示给用户，告知输入不符合要求。
if (!value) {
return callback(new Error('时间不能为空'));
}
console.log("checkTime", value);
// 将用户输入的值尝试转换为整数（使用 parseInt 函数），并将转换后的结果赋值给 intValue 变量。
let intValue = parseInt(value);
// 判断转换后的结果是否是一个有效的整数（使用 Number.isInteger 函数进行判断），如果不是整数，
// 则通过 callback 函数返回一个 Error 对象，并传入错误提示信息 '请输入数字值'，提示用户输入的内容必须是数字类型。
if (!Number.isInteger(intValue)) {
return callback(new Error('请输入数字值'));
import {getOrderSetting,updateOrderSetting} from '@/api/orderSetting';
const defaultOrderSetting = {
id: null,
flashOrderOvertime: 0,
normalOrderOvertime: 0,
confirmOvertime: 0,
finishOvertime: 0,
commentOvertime: 0
};
const checkTime = (rule, value, callback) => {
if (!value) {
return callback(new Error('时间不能为空'));
}
console.log("checkTime",value);
let intValue = parseInt(value);
if (!Number.isInteger(intValue)) {
return callback(new Error('请输入数字值'));
}
callback();
};
export default {
name: 'orderSetting',
data() {
return {
orderSetting: Object.assign({}, defaultOrderSetting),
rules: {
flashOrderOvertime:{validator: checkTime, trigger: 'blur' },
normalOrderOvertime:{validator: checkTime, trigger: 'blur' },
confirmOvertime: {validator: checkTime, trigger: 'blur' },
finishOvertime: {validator: checkTime, trigger: 'blur' },
commentOvertime:{validator: checkTime, trigger: 'blur' }
}
// 如果上述验证都通过，即输入的值不为空且是整数，就调用 callback 函数，不传入任何参数，表示验证通过。
callback();
};
// 导出一个 Vue 组件的配置对象，用于定义名为 'orderSetting' 的 Vue 组件相关属性和方法。
export default {
// 组件的名称，用于在 Vue 实例或其他组件中进行识别和引用，这里组件名为 'orderSetting'。
name: 'orderSetting',
// data 函数用于定义组件内部的响应式数据，返回的对象中的属性可以在组件的模板、方法等地方使用，并且数据变化会自动更新相关绑定的 DOM 元素。
data() {
return {
// 使用 Object.assign 方法将 defaultOrderSetting 对象的属性复制到 orderSetting 对象中，
// 初始化 orderSetting 对象，使其具有默认的订单设置数据结构和初始值，后续获取到实际数据或者用户修改数据都会更新这个对象。
orderSetting: Object.assign({}, defaultOrderSetting),
// 定义表单验证规则对象 rules，其中每个属性对应一个表单项的验证规则配置，
// 通过 validator 属性指定具体的验证函数（这里都使用了前面定义的 checkTime 函数），trigger 属性设置触发验证的时机为 'blur'（即输入框失去焦点时触发验证）。
rules: {
flashOrderOvertime: {validator: checkTime, trigger: 'blur'},
normalOrderOvertime: {validator: checkTime, trigger: 'blur'},
confirmOvertime: {validator: checkTime, trigger: 'blur'},
finishOvertime: {validator: checkTime, trigger: 'blur'},
commentOvertime: {validator: checkTime, trigger: 'blur'}
}
}
},
// created 生命周期钩子函数，在组件实例被创建后立即调用，这里调用了 getDetail 方法（在下面的 methods 中定义），
// 用于获取订单设置的初始详细信息，以便填充到页面的表单中展示给用户查看或者进行后续修改操作。
created() {
this.getDetail();
},
// 定义组件的各种方法，用于处理组件中的业务逻辑。
methods: {
// confirm 方法，用于处理提交表单的相关逻辑，接收一个参数 formName，用于指定要验证的表单引用名（这里传入的是 'orderSettingForm'，对应前面 el-form 组件设置的 ref 属性值）。
confirm(formName) {
// 通过 $refs[formName] 获取到表单实例（这里就是前面定义的 'orderSettingForm' 对应的表单对象），然后调用 validate 方法进行表单验证，
// validate 方法接收一个回调函数作为参数，回调函数接收一个参数 valid，表示表单验证的结果（true 表示验证通过，false 表示验证不通过）。
this.$refs[formName].validate((valid) => {
if (valid) {
// 如果表单验证通过，使用 $confirm 组件（通常是基于 Vue 的弹出确认框组件，例如 Element UI 中的 confirm 弹框）弹出一个确认提示框，
// 向用户询问是否要提交修改，提示框的标题为 '是否要提交修改?'，整体标题为 '提示'，确认按钮文字设置为 '确定'，取消按钮文字设置为 '取消'，类型设置为 'warning'（一般是带有警告意味的样式）。
this.$confirm('是否要提交修改?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果用户在弹出的确认提示框中点击了 '确定' 按钮，调用 updateOrderSetting 函数（前面导入的用于更新订单设置的 API 函数），
// 传入参数 1（这里参数 1 的含义可能根据后端接口要求而定，也许是代表某个固定的配置标识等情况）和当前的订单设置数据对象（this.orderSetting），
// 向后端发送更新订单设置的请求，等待后端处理并返回响应结果。
updateOrderSetting(1, this.orderSetting).then(response => {
// 当后端返回响应并且更新成功后（具体成功的判断可能在 updateOrderSetting 函数内部或者依据后端返回的数据格式来确定），
// 使用 $message 组件（一般是基于 Vue 的消息提示框组件，例如 Element UI 中的消息提示框）弹出一个成功提示消息，告知用户提交成功，
// 设置消息类型为 'success'（通常是绿色背景等表示成功的样式），消息内容为 '提交成功!'，显示时长为 1000 毫秒（1 秒），给用户操作反馈后自动消失。
this.$message({
type: 'success',
message: '提交成功!',
duration: 1000
});
})
});
} else {
// 如果表单验证不通过，使用 $message 组件弹出一个警告提示消息，告知用户提交参数不合法，设置消息类型为 'warning'（一般是黄色背景等表示警告的样式），
// 提示用户检查输入的参数是否符合要求。
this.$message({
message: '提交参数不合法',
type: 'warning'
});
return false;
}
}
},
created(){
this.getDetail();
},
methods:{
confirm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否要提交修改?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateOrderSetting(1,this.orderSetting).then(response=>{
this.$message({
type: 'success',
message: '提交成功!',
duration:1000
});
},
// getDetail 方法，用于获取订单设置的详细信息，调用前面导入的 getOrderSetting 函数（用于获取订单设置信息的 API 函数），
// 传入参数 1（同样参数 1 的含义依据后端接口要求而定），等待后端返回订单设置数据，然后将返回的数据赋值给 orderSetting 对象，
// 这样页面上绑定 orderSetting 对象的表单输入框等元素就能展示出最新获取到的订单设置信息了。
getDetail() {
getOrderSetting(1).then(response => {
this.orderSetting = response.data;
})
}
}
})
});
} else {
this.$message({
message: '提交参数不合法',
type: 'warning'
});
return false;
}
});
},
getDetail(){
getOrderSetting(1).then(response=>{
this.orderSetting=response.data;
})
}
}
}
</script>
<style scoped>
/* 定义一个类名为 "input-width" 的样式规则，设置元素的宽度为 50%，用于控制前面模板中 el-input 组件输入框的宽度，使其在页面上展示的宽度占父容器的一半 */
.input-width {
width: 50%;
}
.input-width {
width: 50%;
}
/* 定义一个类名为 "note-margin" 的样式规则，设置元素的左边距为 15px，用于控制前面模板中那些提示文本（span 元素）的左边距，使其与输入框等元素有一定的间隔，布局更加美观清晰 */
.note-margin {
margin-left: 15px;
}
.note-margin {
margin-left: 15px;
}
</style>

542
src/views/ums/admin/index.vue
Unescape View File

@ -1,236 +1,344 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="输入搜索：">
<el-input v-model="listQuery.keyword" class="input-width" placeholder="帐号/姓名" clearable></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
</el-card>
<div class="table-container">
<el-table ref="adminTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="帐号" align="center">
<template slot-scope="scope">{{scope.row.username}}</template>
</el-table-column>
<el-table-column label="姓名" align="center">
<template slot-scope="scope">{{scope.row.nickName}}</template>
</el-table-column>
<el-table-column label="邮箱" align="center">
<template slot-scope="scope">{{scope.row.email}}</template>
</el-table-column>
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<el-table-column label="最后登录" width="160" align="center">
<template slot-scope="scope">{{scope.row.loginTime | formatDateTime}}</template>
</el-table-column>
<el-table-column label="是否启用" width="140" align="center">
<template slot-scope="scope">
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleSelectRole(scope.$index, scope.row)">分配角色
</el-button>
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[10,15,20]"
:total="total">
</el-pagination>
</div>
<el-dialog
:title="isEdit?'编辑用户':'添加用户'"
:visible.sync="dialogVisible"
width="40%">
<el-form :model="admin"
ref="adminForm"
label-width="150px" size="small">
<el-form-item label="帐号：">
<el-input v-model="admin.username" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="姓名：">
<el-input v-model="admin.nickName" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="邮箱：">
<el-input v-model="admin.email" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="密码：">
<el-input v-model="admin.password" type="password" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="备注：">
<el-input v-model="admin.note"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="是否启用：">
<el-radio-group v-model="admin.status">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="分配角色"
:visible.sync="allocDialogVisible"
width="30%">
<el-select v-model="allocRoleIds" multiple placeholder="请选择" size="small" style="width: 80%">
<el-option
v-for="item in allRoleList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
<el-button @click="allocDialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleAllocDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// 引入日期处理工具函数
import {str2Date} from '@/utils/date';
// 引入图标图片
import img_home_order from '@/assets/images/home_order.png';
import img_home_today_amount from '@/assets/images/home_today_amount.png';
import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
import {fetchList,createAdmin,updateAdmin,updateStatus,deleteAdmin,getRoleByAdmin,allocRole} from '@/api/login';
import {fetchAllRoleList} from '@/api/role';
import {formatDate} from '@/utils/date';
// 模拟从后端获取的数据
const DATA_FROM_BACKEND = {
columns: ['date', 'orderCount','orderAmount'],
rows: [
{date: '2018-11-01', orderCount: 10, orderAmount: 1093},
{date: '2018-11-02', orderCount: 20, orderAmount: 2230},
{date: '2018-11-03', orderCount: 33, orderAmount: 3623},
{date: '2018-11-04', orderCount: 50, orderAmount: 6423},
{date: '2018-11-05', orderCount: 80, orderAmount: 8492},
{date: '2018-11-06', orderCount: 60, orderAmount: 6293},
{date: '2018-11-07', orderCount: 20, orderAmount: 2293},
{date: '2018-11-08', orderCount: 60, orderAmount: 6293},
{date: '2018-11-09', orderCount: 50, orderAmount: 5293},
{date: '2018-11-10', orderCount: 30, orderAmount: 3293},
{date: '2018-11-11', orderCount: 20, orderAmount: 2293},
{date: '2018-11-12', orderCount: 80, orderAmount: 8293},
{date: '2018-11-13', orderCount: 100, orderAmount: 10293},
{date: '2018-11-14', orderCount: 10, orderAmount: 1293},
{date: '2018-11-15', orderCount: 40, orderAmount: 4293}
]
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
keyword: null
};
const defaultAdmin = {
id: null,
username: null,
password: null,
nickName: null,
email: null,
note: null,
status: 1
};
export default {
name: 'home',
name: 'adminList',
data() {
return {
// 日期选择器的快捷选项
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
let start = new Date(2018,10,1);
const end = new Date(start.getTime() + 1000 * 60 * 60 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一月',
onClick(picker) {
let start = new Date(2018,10,1);
const end = new Date(start.getTime() + 1000 * 60 * 60 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}]
},
// 订单统计的日期范围
orderCountDate: '',
// 图表的设置
chartSettings: {
xAxisType: 'time',
area:true,
axisSite: { right: ['orderAmount']},
labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}
},
// 图表的数据
chartData: {
columns: [],
rows: []
},
// 加载状态
loading: false,
// 数据为空状态
dataEmpty: false,
// 图标图片
img_home_order,
img_home_today_amount,
img_home_yesterday_amount
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: false,
dialogVisible: false,
admin: Object.assign({}, defaultAdmin),
isEdit: false,
allocDialogVisible: false,
allocRoleIds:[],
allRoleList:[],
allocAdminId:null
}
},
created(){
// 初始化订单统计日期范围
this.initOrderCountDate();
// 获取数据
this.getData();
created() {
this.getList();
this.getAllRoleList();
},
methods:{
// 处理日期变化
handleDateChange(){
this.getData();
filters: {
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// 初始化订单统计日期范围
initOrderCountDate(){
let start = new Date(2018,10,1);
const end = new Date(start.getTime() + 1000 * 60 * 60 * 24 * 7);
this.orderCountDate=[start,end];
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 获取数据
getData(){
setTimeout(() => {
this.chartData = {
columns: ['date', 'orderCount','orderAmount'],
rows: []
};
// 遍历后端数据
for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
let item=DATA_FROM_BACKEND.rows[i];
let currDate=str2Date(item.date);
let start=this.orderCountDate[0];
let end=this.orderCountDate[1];
// 判断当前日期是否在选择的日期范围内
if(currDate.getTime()>=start.getTime()&&currDate.getTime()<=end.getTime()){
this.chartData.rows.push(item);
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.admin = Object.assign({},defaultAdmin);
},
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消修改'
});
this.getList();
});
},
handleDelete(index, row) {
this.$confirm('是否要删除该用户?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteAdmin(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.admin = Object.assign({},row);
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateAdmin(this.admin.id,this.admin).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createAdmin(this.admin).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
handleAllocDialogConfirm(){
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
params.append("adminId", this.allocAdminId);
params.append("roleIds", this.allocRoleIds);
allocRole(params).then(response => {
this.$message({
message: '分配成功！',
type: 'success'
});
this.allocDialogVisible = false;
})
})
},
handleSelectRole(index,row){
this.allocAdminId = row.id;
this.allocDialogVisible = true;
this.getRoleListByAdmin(row.id);
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
getAllRoleList() {
fetchAllRoleList().then(response => {
this.allRoleList = response.data;
});
},
getRoleListByAdmin(adminId) {
getRoleByAdmin(adminId).then(response => {
let allocRoleList = response.data;
this.allocRoleIds=[];
if(allocRoleList!=null&&allocRoleList.length>0){
for(let i=0;i<allocRoleList.length;i++){
this.allocRoleIds.push(allocRoleList[i].id);
}
}
// 设置数据为空状态
this.dataEmpty = false;
// 设置加载状态
this.loading = false
}, 1000)
});
}
}
}
</script>
<style></style>
<style scoped>
/* 容器样式 */
.app-container {
margin-top: 40px;
margin-left: 120px;
margin-right: 120px;
}
/* 地址布局样式 */
.address-layout {
}
/* 总布局样式 */
.total-layout {
margin-top: 20px;
}
/* 总框架样式 */
.total-frame {
border: 1px solid #DCDFE6;
padding: 20px;
height: 100px;
}
/* 总图标样式 */
.total-icon {
color: #409EFF;
width: 60px;
height: 60px;
}
/* 总标题样式 */
.total-title {
position: relative;
font-size: 16px;
color: #909399;
left: 70px;
top: -50px;
}
/* 总值样式 */
.total-value {
position: relative;
font-size: 18px;
color: #606266;
left: 70px;
top: -40px;
}
/* 待处理布局样式 */
.un-handle-layout {
margin-top: 20px;
border: 1px solid #DCDFE6;
}
/* 布局标题样式 */
.layout-title {
color: #606266;
padding: 15px 20px;
background: #F2F6FC;
font-weight: bold;
}
/* 待处理内容样式 */
.un-handle-content {
padding: 20px 40px;
}
/* 待处理项样式 */
.un-handle-item {
border-bottom: 1px solid #EBEEF5;
padding: 10px;
}
/* 总览布局样式 */
.overview-layout {
margin-top: 20px;
}
/* 总览项值样式 */
.overview-item-value {
font-size: 24px;
text-align: center;
}
/* 总览项标题样式 */
.overview-item-title {
margin-top: 10px;
text-align: center;
}
/* 外边框样式 */
.out-border {
border: 1px solid #DCDFE6;
}
/* 统计布局样式 */
.statistics-layout {
margin-top: 20px;
border: 1px solid #DCDFE6;
}
/* 我的布局样式 */
.mine-layout {
position: absolute;
right: 140px;
top: 107px;
width: 250px;
height: 235px;
}
/* 地址内容样式 */
.address-content{
padding: 20px;
font-size: 18px
}
</style>

12
src/views/ums/menu/add.vue
Unescape View File

@ -1,16 +1,14 @@
<template>
<!-- 使用 MenuDetail 组件，并传递 is-edit 属性为 false -->
<template> 
<menu-detail :is-edit='false'></menu-detail>
</template>
<script>
// 引入 MenuDetail 组件
import MenuDetail from './components/MenuDetail'
export default {
name: 'addMenu', // 组件名称为 addMenu
components: { MenuDetail } // 注册 MenuDetail 组件
name: 'addMenu',
components: { MenuDetail }
}
</script>
<style>
</style>

42
src/views/ums/menu/components/MenuDetail.vue
Unescape View File

@ -1,18 +1,15 @@
<template>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card class="form-container" shadow="never">
<!-- 使用 el-form 组件创建表单，绑定数据模型和验证规则 -->
<el-form :model="menu" :rules="rules" ref="menuFrom" label-width="150px">
<!-- 表单项：菜单名称 -->
<el-form :model="menu"
:rules="rules"
ref="menuFrom"
label-width="150px">
<el-form-item label="菜单名称：" prop="title">
<!-- 使用 el-input 组件创建输入框，双向绑定 menu.title -->
<el-input v-model="menu.title"></el-input>
</el-form-item>
<!-- 表单项：上级菜单 -->
<el-form-item label="上级菜单：">
<!-- 使用 el-select 组件创建下拉选择框，双向绑定 menu.parentId -->
<el-select v-model="menu.parentId" placeholder="请选择菜单">
<!-- 使用 v-for 指令遍历 selectMenuList，生成 el-option 选项 -->
<el-select v-model="menu.parentId"
placeholder="请选择菜单">
<el-option
v-for="item in selectMenuList"
:key="item.id"
@ -21,33 +18,24 @@
</el-option>
</el-select>
</el-form-item>
<!-- 表单项：前端名称 -->
<el-form-item label="前端名称：" prop="name">
<el-input v-model="menu.name"></el-input>
</el-form-item>
<!-- 表单项：前端图标 -->
<el-form-item label="前端图标：" prop="icon">
<el-input v-model="menu.icon" style="width: 80%"></el-input>
<!-- 使用 svg-icon 组件显示图标 -->
<svg-icon style="margin-left: 8px" :icon-class="menu.icon"></svg-icon>
</el-form-item>
<!-- 表单项：是否显示 -->
<el-form-item label="是否显示：">
<!-- 使用 el-radio-group 组件创建单选按钮组，双向绑定 menu.hidden -->
<el-radio-group v-model="menu.hidden">
<el-radio :label="0">是</el-radio>
<el-radio :label="1">否</el-radio>
</el-radio-group>
</el-form-item>
<!-- 表单项：排序 -->
<el-form-item label="排序：">
<el-input v-model="menu.sort"></el-input>
</el-form-item>
<!-- 表单项：操作按钮 -->
<el-form-item>
<!-- 提交按钮 -->
<el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
<!-- 重置按钮，仅在非编辑状态下显示 -->
<el-button v-if="!isEdit" @click="resetForm('menuFrom')">重置</el-button>
</el-form-item>
</el-form>
@ -55,10 +43,8 @@
</template>
<script>
// 引入菜单相关的 API 方法
import {fetchList, createMenu, updateMenu, getMenu} from '@/api/menu';
// 默认菜单数据
const defaultMenu = {
title: '',
parentId: 0,
@ -67,10 +53,8 @@
hidden: 0,
sort: 0
};
export default {
name: "MenuDetail",
// 接收 isEdit 属性，用于判断是否为编辑状态
props: {
isEdit: {
type: Boolean,
@ -79,11 +63,8 @@
},
data() {
return {
// 菜单数据模型
menu: Object.assign({}, defaultMenu),
// 下拉菜单列表
selectMenuList: [],
// 表单验证规则
rules: {
title: [
{required: true, message: '请输入菜单名称', trigger: 'blur'},
@ -101,28 +82,22 @@
}
},
created() {
// 如果是编辑状态，获取菜单详情
if (this.isEdit) {
getMenu(this.$route.query.id).then(response => {
this.menu = response.data;
});
} else {
// 否则，初始化菜单数据
this.menu = Object.assign({}, defaultMenu);
}
// 获取下拉菜单列表
this.getSelectMenuList();
},
methods: {
// 获取下拉菜单列表
getSelectMenuList() {
fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
this.selectMenuList = response.data.list;
// 添加无上级菜单选项
this.selectMenuList.unshift({id: 0, title: '无上级菜单'});
});
},
// 提交表单
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
@ -132,7 +107,6 @@
type: 'warning'
}).then(() => {
if (this.isEdit) {
// 编辑状态下，调用更新菜单 API
updateMenu(this.$route.query.id, this.menu).then(response => {
this.$message({
message: '修改成功',
@ -142,7 +116,6 @@
this.$router.back();
});
} else {
// 新增状态下，调用创建菜单 API
createMenu(this.menu).then(response => {
this.$refs[formName].resetFields();
this.resetForm(formName);
@ -155,6 +128,7 @@
});
}
});
} else {
this.$message({
message: '验证失败',
@ -165,7 +139,6 @@
}
});
},
// 重置表单
resetForm(formName) {
this.$refs[formName].resetFields();
this.menu = Object.assign({}, defaultMenu);
@ -176,4 +149,5 @@
</script>
<style scoped>
</style>

206
src/views/ums/menu/index.vue
Unescape View File

@ -1,142 +1,117 @@
<template>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card class="operate-container" shadow="never">
<!-- 使用 el-icon 组件显示图标 -->
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<!-- 使用 el-span 组件显示文本 -->
<span style="margin-top: 5px">数据列表</span>
<!-- 使用 el-button 组件创建添加按钮，点击时调用 handleAddMenu 方法 -->
<el-button
class="btn-add"
@click="handleAddMenu()"
size="mini">
添加
</el-button>
</el-card>
<!-- 使用 el-table 组件创建表格，绑定数据模型和加载状态 -->
<div class="table-container">
<el-table ref="menuTable"
style="width: 100%"
:data="list"
v-loading="listLoading" border>
<!-- 表格列：编号 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列：菜单名称 -->
<el-table-column label="菜单名称" align="center">
<template slot-scope="scope">{{scope.row.title}}</template>
</el-table-column>
<!-- 表格列：菜单级数 -->
<el-table-column label="菜单级数" width="100" align="center">
<template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
</el-table-column>
<!-- 表格列：前端名称 -->
<el-table-column label="前端名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列：前端图标 -->
<el-table-column label="前端图标" width="100" align="center">
<template slot-scope="scope"><svg-icon :icon-class="scope.row.icon"></svg-icon></template>
</el-table-column>
<!-- 表格列：是否显示 -->
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<!-- 使用 el-switch 组件创建开关，双向绑定 scope.row.hidden -->
<el-switch
@change="handleHiddenChange(scope.$index, scope.row)"
:active-value="0"
:inactive-value="1"
v-model="scope.row.hidden">
</el-switch>
</template>
</el-table-column>
<!-- 表格列：排序 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort }}</template>
</el-table-column>
<!-- 表格列：设置 -->
<el-table-column label="设置" width="120" align="center">
<template slot-scope="scope">
<!-- 使用 el-button 组件创建按钮，点击时调用 handleShowNextLevel 方法 -->
<el-button
size="mini"
type="text"
:disabled="scope.row.level | disableNextLevel"
@click="handleShowNextLevel(scope.$index, scope.row)">查看下级
</el-button>
</template>
</el-table-column>
<!-- 表格列：操作 -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<!-- 使用 el-button 组件创建按钮，点击时调用 handleUpdate 或 handleDelete 方法 -->
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 使用 el-pagination 组件创建分页器，绑定数据模型和事件 -->
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[10,15,20]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
<div class="app-container">
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<span style="margin-top: 5px">数据列表</span>
<el-button
class="btn-add"
@click="handleAddMenu()"
size="mini">
添加
</el-button>
</el-card>
<div class="table-container">
<el-table ref="menuTable"
style="width: 100%"
:data="list"
v-loading="listLoading" border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="菜单名称" align="center">
<template slot-scope="scope">{{scope.row.title}}</template>
</el-table-column>
<el-table-column label="菜单级数" width="100" align="center">
<template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
</el-table-column>
<el-table-column label="前端名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="前端图标" width="100" align="center">
<template slot-scope="scope"><svg-icon :icon-class="scope.row.icon"></svg-icon></template>
</el-table-column>
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-switch
@change="handleHiddenChange(scope.$index, scope.row)"
:active-value="0"
:inactive-value="1"
v-model="scope.row.hidden">
</el-switch>
</template>
</el-table-column>
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort }}</template>
</el-table-column>
<el-table-column label="设置" width="120" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
:disabled="scope.row.level | disableNextLevel"
@click="handleShowNextLevel(scope.$index, scope.row)">查看下级
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[10,15,20]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 引入菜单相关的 API 方法
import {fetchList,deleteMenu,updateMenu,updateHidden} from '@/api/menu'
export default {
name: "menuList",
data() {
return {
// 菜单数据列表
list: null,
// 总记录数
total: null,
// 加载状态
listLoading: true,
// 查询参数
listQuery: {
pageNum: 1,
pageSize: 5
},
// 父级菜单 ID
parentId: 0
}
},
created() {
// 初始化父级菜单 ID 和获取菜单列表
this.resetParentId();
this.getList();
},
watch: {
// 监听路由变化，重新获取菜单列表
$route(route) {
this.resetParentId();
this.getList();
}
},
methods: {
// 重置父级菜单 ID
resetParentId(){
this.listQuery.pageNum = 1;
if (this.$route.query.parentId != null) {
@ -145,12 +120,9 @@
this.parentId = 0;
}
},
// 处理添加菜单
handleAddMenu() {
// 跳转到添加菜单页面
this.$router.push('/ums/addMenu');
},
// 获取菜单列表
getList() {
this.listLoading = true;
fetchList(this.parentId, this.listQuery).then(response => {
@ -159,20 +131,16 @@
this.total = response.data.total;
});
},
// 处理分页大小变化
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理分页页码变化
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// 处理是否显示变化
handleHiddenChange(index, row) {
// 更新菜单是否显示
updateHidden(row.id,{hidden:row.hidden}).then(response=>{
this.$message({
message: '修改成功',
@ -181,19 +149,13 @@
});
});
},
// 处理显示下级菜单
handleShowNextLevel(index, row) {
// 跳转到下级菜单列表页面
this.$router.push({path: '/ums/menu', query: {parentId: row.id}})
},
// 处理编辑菜单
handleUpdate(index, row) {
// 跳转到编辑菜单页面
this.$router.push({path:'/ums/updateMenu',query:{id:row.id}});
},
// 处理删除菜单
handleDelete(index, row) {
// 弹出确认框，确认后删除菜单
this.$confirm('是否要删除该菜单', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -211,7 +173,6 @@
}
},
filters: {
// 菜单级数过滤器
levelFilter(value) {
if (value === 0) {
return '一级';
@ -219,7 +180,6 @@
return '二级';
}
},
// 禁用下级菜单过滤器
disableNextLevel(value) {
if (value === 0) {
return false;
@ -230,5 +190,7 @@
}
}
</script>
<style scoped>
</style>

14
src/views/ums/menu/update.vue
Unescape View File

@ -1,16 +1,14 @@
<template>
<!-- 使用 MenuDetail 组件，并传递 is-edit 属性为 true -->
<template> 
<menu-detail :is-edit='true'></menu-detail>
</template>
<script>
// 引入 MenuDetail 组件
import MenuDetail from './components/MenuDetail'
export default {
name: 'updateMenu', // 组件名称为 updateMenu
components: { MenuDetail } // 注册 MenuDetail 组件
name: 'updateMenu',
components: { MenuDetail }
}
</script>
<style>
</style>
</style>

192
src/views/ums/resource/categoryList.vue
Unescape View File

@ -1,115 +1,84 @@
<template>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card shadow="never" class="operate-container">
<!-- 使用 el-icon 组件显示图标 -->
<i class="el-icon-tickets"></i>
<!-- 使用 el-span 组件显示文本 -->
<span>数据列表</span>
<!-- 使用 el-button 组件创建添加按钮，点击时调用 handleAdd 方法 -->
<el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
</el-card>
<!-- 使用 el-table 组件创建表格，绑定数据模型和加载状态 -->
<div class="table-container">
<el-table ref="resourceCategoryTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列：编号 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列：名称 -->
<el-table-column label="名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列：创建时间 -->
<el-table-column label="创建时间" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列：排序 -->
<el-table-column label="排序" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 表格列：操作 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<!-- 使用 el-button 组件创建按钮，点击时调用 handleUpdate 或 handleDelete 方法 -->
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<template> 
<div class="app-container">
<el-card shadow="never" class="operate-container">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
</el-card>
<div class="table-container">
<el-table ref="resourceCategoryTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<el-table-column label="排序" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
title="添加分类"
:visible.sync="dialogVisible"
width="40%">
<el-form :model="resourceCategory"
ref="resourceCategoryForm"
label-width="150px" size="small">
<el-form-item label="名称：">
<el-input v-model="resourceCategory.name" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="排序：">
<el-input v-model="resourceCategory.sort" style="width: 250px"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
<!-- 使用 el-dialog 组件创建对话框，绑定数据模型和事件 -->
<el-dialog
title="添加分类"
:visible.sync="dialogVisible"
width="40%">
<!-- 使用 el-form 组件创建表单，绑定数据模型和验证规则 -->
<el-form :model="resourceCategory"
ref="resourceCategoryForm"
label-width="150px" size="small">
<!-- 表单项：名称 -->
<el-form-item label="名称：">
<!-- 使用 el-input 组件创建输入框，双向绑定 resourceCategory.name -->
<el-input v-model="resourceCategory.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项：排序 -->
<el-form-item label="排序：">
<!-- 使用 el-input 组件创建输入框，双向绑定 resourceCategory.sort -->
<el-input v-model="resourceCategory.sort" style="width: 250px"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer">
<!-- 使用 el-button 组件创建取消按钮，点击时关闭对话框 -->
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<!-- 使用 el-button 组件创建确定按钮，点击时调用 handleDialogConfirm 方法 -->
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
// 引入资源分类相关的 API 方法
import {listAllCate, createResourceCategory, updateResourceCategory, deleteResourceCategory} from '@/api/resourceCategory';
// 引入日期格式化工具
import {listAllCate,createResourceCategory,updateResourceCategory,deleteResourceCategory} from '@/api/resourceCategory';
import {formatDate} from '@/utils/date';
// 默认资源分类数据
const defaultResourceCategory = {
name: null,
sort: 0
const defaultResourceCategory={
name:null,
sort:0
};
export default {
name: 'resourceCategoryList',
data() {
return {
// 资源分类数据列表
list: null,
// 加载状态
listLoading: false,
// 对话框可见性
dialogVisible: false,
// 是否为编辑状态
isEdit: false,
// 资源分类数据模型
resourceCategory: Object.assign({}, defaultResourceCategory)
dialogVisible:false,
isEdit:false,
resourceCategory:Object.assign({},defaultResourceCategory)
}
},
created() {
// 初始化获取资源分类列表
this.getList();
},
filters: {
// 日期格式化过滤器
filters:{
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
@ -119,23 +88,17 @@
}
},
methods: {
// 处理添加分类
handleAdd() {
// 显示对话框，设置编辑状态为 false，初始化资源分类数据
this.dialogVisible = true;
this.isEdit = false;
this.resourceCategory = Object.assign({}, defaultResourceCategory);
this.resourceCategory = Object.assign({},defaultResourceCategory);
},
// 处理编辑分类
handleUpdate(index, row) {
// 显示对话框，设置编辑状态为 true，初始化资源分类数据
handleUpdate(index,row){
this.dialogVisible = true;
this.isEdit = true;
this.resourceCategory = Object.assign({}, row);
this.resourceCategory = Object.assign({},row);
},
// 处理删除分类
handleDelete(index, row) {
// 弹出确认框，确认后删除分类
handleDelete(index,row){
this.$confirm('是否要删除该分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -146,45 +109,37 @@
type: 'success',
message: '删除成功!'
});
// 刷新资源分类列表
this.getList();
});
});
},
// 处理对话框确认
handleDialogConfirm() {
// 弹出确认框，确认后添加或更新分类
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
// 编辑状态下，调用更新分类 API
updateResourceCategory(this.resourceCategory.id, this.resourceCategory).then(response => {
updateResourceCategory(this.resourceCategory.id,this.resourceCategory).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
// 关闭对话框，刷新资源分类列表
this.dialogVisible = false;
this.dialogVisible =false;
this.getList();
})
} else {
// 新增状态下，调用创建分类 API
createResourceCategory(this.resourceCategory).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
// 关闭对话框，刷新资源分类列表
this.dialogVisible = false;
this.dialogVisible =false;
this.getList();
})
}
})
},
// 获取资源分类列表
getList() {
this.listLoading = true;
listAllCate({}).then(response => {
@ -195,6 +150,7 @@
}
}
</script>
<style>
</style>

315
src/views/ums/resource/index.vue
Unescape View File

@ -1,153 +1,137 @@
<template>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card class="filter-container" shadow="never">
<!-- 使用 el-icon 组件显示图标 -->
<i class="el-icon-search"></i>
<!-- 使用 el-span 组件显示文本 -->
<span>筛选搜索</span>
<!-- 使用 el-button 组件创建查询按钮，点击时调用 handleSearchList 方法 -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 使用 el-button 组件创建重置按钮，点击时调用 handleResetSearch 方法 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</el-card>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card class="operate-container" shadow="never">
<!-- 使用 el-icon 组件显示图标 -->
<i class="el-icon-tickets"></i>
<!-- 使用 el-span 组件显示文本 -->
<span>数据列表</span>
<!-- 使用 el-button 组件创建添加按钮，点击时调用 handleAdd 方法 -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
<!-- 使用 el-button 组件创建资源分类按钮，点击时调用 handleShowCategory 方法 -->
<el-button size="mini" class="btn-add" @click="handleShowCategory()">资源分类</el-button>
</el-card>
<!-- 使用 el-table 组件创建表格，绑定数据模型和加载状态 -->
<div class="table-container">
<el-table ref="resourceTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列：编号 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列：资源名称 -->
<el-table-column label="资源名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列：资源路径 -->
<el-table-column label="资源路径" align="center">
<template slot-scope="scope">{{scope.row.url}}</template>
</el-table-column>
<!-- 表格列：描述 -->
<el-table-column label="描述" align="center">
<template slot-scope="scope">{{scope.row.description}}</template>
</el-table-column>
<!-- 表格列：添加时间 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列：操作 -->
<el-table-column label="操作" width="140" align="center">
<template slot-scope="scope">
<!-- 使用 el-button 组件创建编辑按钮，点击时调用 handleUpdate 方法 -->
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<!-- 使用 el-button 组件创建删除按钮，点击时调用 handleDelete 方法 -->
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="资源名称：">
<el-input v-model="listQuery.nameKeyword" class="input-width" placeholder="资源名称" clearable></el-input>
</el-form-item>
<el-form-item label="资源路径：">
<el-input v-model="listQuery.urlKeyword" class="input-width" placeholder="资源路径" clearable></el-input>
</el-form-item>
<el-form-item label="资源分类：">
<el-select v-model="listQuery.categoryId" placeholder="全部" clearable class="input-width">
<el-option v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
<el-button size="mini" class="btn-add" @click="handleShowCategory()">资源分类</el-button>
</el-card>
<div class="table-container">
<el-table ref="resourceTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="资源名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="资源路径" align="center">
<template slot-scope="scope">{{scope.row.url}}</template>
</el-table-column>
<el-table-column label="描述" align="center">
<template slot-scope="scope">{{scope.row.description}}</template>
</el-table-column>
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<el-table-column label="操作" width="140" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[10,15,20]"
:total="total">
</el-pagination>
</div>
<el-dialog
:title="isEdit?'编辑资源':'添加资源'"
:visible.sync="dialogVisible"
width="40%">
<el-form :model="resource"
ref="resourceForm"
label-width="150px" size="small">
<el-form-item label="资源名称：">
<el-input v-model="resource.name" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="资源路径：">
<el-input v-model="resource.url" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="资源分类：">
<el-select v-model="resource.categoryId" placeholder="全部" clearable style="width: 250px">
<el-option v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="描述：">
<el-input v-model="resource.description"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
<!-- 使用 el-pagination 组件创建分页器，绑定数据模型和事件 -->
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[10,15,20]"
:total="total">
</el-pagination>
</div>
<!-- 使用 el-dialog 组件创建对话框，绑定数据模型和事件 -->
<el-dialog
:title="isEdit?'编辑资源':'添加资源'"
:visible.sync="dialogVisible"
width="40%">
<!-- 使用 el-form 组件创建表单，绑定数据模型和验证规则 -->
<el-form :model="resource"
ref="resourceForm"
label-width="150px" size="small">
<!-- 表单项：资源名称 -->
<el-form-item label="资源名称：">
<!-- 使用 el-input 组件创建输入框，双向绑定 resource.name -->
<el-input v-model="resource.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项：资源路径 -->
<el-form-item label="资源路径：">
<!-- 使用 el-input 组件创建输入框，双向绑定 resource.url -->
<el-input v-model="resource.url" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项：资源分类 -->
<el-form-item label="资源分类：">
<!-- 使用 el-select 组件创建下拉选择框，双向绑定 resource.categoryId -->
<el-select v-model="resource.categoryId" placeholder="全部" clearable style="width: 250px">
<!-- 使用 v-for 指令遍历 categoryOptions，生成 el-option 选项 -->
<el-option v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 表单项：描述 -->
<el-form-item label="描述：">
<!-- 使用 el-input 组件创建文本域，双向绑定 resource.description -->
<el-input v-model="resource.description"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer">
<!-- 使用 el-button 组件创建取消按钮，点击时关闭对话框 -->
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<!-- 使用 el-button 组件创建确定按钮，点击时调用 handleDialogConfirm 方法 -->
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
// 引入资源相关的 API 方法
import {fetchList,createResource,updateResource,deleteResource} from '@/api/resource';
// 引入资源分类相关的 API 方法
import {listAllCate} from '@/api/resourceCategory';
// 引入日期格式化工具
import {formatDate} from '@/utils/date';
// 默认查询参数
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
@ -155,7 +139,6 @@
urlKeyword: null,
categoryId:null
};
// 默认资源数据
const defaultResource = {
id: null,
name: null,
@ -163,38 +146,26 @@
categoryId: null,
description:''
};
export default {
name: 'resourceList',
data() {
return {
// 查询参数
listQuery: Object.assign({}, defaultListQuery),
// 资源数据列表
list: null,
// 总记录数
total: null,
// 加载状态
listLoading: false,
// 对话框可见性
dialogVisible: false,
// 是否为编辑状态
isEdit: false,
// 资源数据模型
resource: Object.assign({}, defaultResource),
// 资源分类选项
isEdit: false,
categoryOptions:[],
// 默认资源分类 ID
defaultCategoryId:null
}
},
created() {
// 初始化获取资源列表和资源分类列表
this.getList();
this.getCateList();
},
filters: {
// 日期格式化过滤器
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
@ -204,41 +175,29 @@
}
},
methods: {
// 处理重置搜索
handleResetSearch() {
// 重置查询参数
this.listQuery = Object.assign({}, defaultListQuery);
},
// 处理查询搜索
handleSearchList() {
// 重置页码，获取资源列表
this.listQuery.pageNum = 1;
this.getList();
},
// 处理分页大小变化
handleSizeChange(val) {
// 重置页码，设置分页大小，获取资源列表
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理分页页码变化
handleCurrentChange(val) {
// 设置页码，获取资源列表
this.listQuery.pageNum = val;
this.getList();
},
// 处理添加资源
handleAdd() {
// 显示对话框，设置编辑状态为 false，初始化资源数据
this.dialogVisible = true;
this.isEdit = false;
this.resource = Object.assign({},defaultResource);
this.resource.categoryId = this.defaultCategoryId;
},
// 处理删除资源
handleDelete(index, row) {
// 弹出确认框，确认后删除资源
this.$confirm('是否要删除该资源?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -249,57 +208,45 @@
type: 'success',
message: '删除成功!'
});
// 刷新资源列表
this.getList();
});
});
},
// 处理编辑资源
handleUpdate(index, row) {
// 显示对话框，设置编辑状态为 true，初始化资源数据
this.dialogVisible = true;
this.isEdit = true;
this.resource = Object.assign({},row);
},
// 处理对话框确认
handleDialogConfirm() {
// 弹出确认框，确认后添加或更新资源
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
// 编辑状态下，调用更新资源 API
updateResource(this.resource.id,this.resource).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
// 关闭对话框，刷新资源列表
this.dialogVisible =false;
this.getList();
})
} else {
// 新增状态下，调用创建资源 API
createResource(this.resource).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
// 关闭对话框，刷新资源列表
this.dialogVisible =false;
this.getList();
})
}
})
},
// 处理显示资源分类
handleShowCategory(){
// 跳转到资源分类列表页面
this.$router.push({path: '/ums/resourceCategory'})
},
// 获取资源列表
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
@ -308,21 +255,19 @@
this.total = response.data.total;
});
},
// 获取资源分类列表
getCateList(){
listAllCate().then(response=>{
let cateList = response.data;
for(let i=0;i<cateList.length;i++){
let cate = cateList[i];
// 添加资源分类选项
this.categoryOptions.push({label:cate.name,value:cate.id});
}
// 设置默认资源分类 ID
this.defaultCategoryId=cateList[0].id;
})
}
}
}
</script>
<style></style>

22
src/views/ums/role/allocMenu.vue
Unescape View File

@ -1,7 +1,5 @@
<template>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card class="form-container" shadow="never">
<!-- 使用 el-tree 组件创建树形控件，绑定数据模型和属性 -->
<el-tree
:data="menuTreeList"
show-checkbox
@ -11,17 +9,15 @@
highlight-current
:props="defaultProps">
</el-tree>
<!-- 使用 el-button 组件创建保存按钮，点击时调用 handleSave 方法 -->
<div style="margin-top: 20px" align="center">
<el-button type="primary" @click="handleSave()">保存</el-button>
<!-- 使用 el-button 组件创建清空按钮，点击时调用 handleClear 方法 -->
<el-button @click="handleClear()">清空</el-button>
</div>
</el-card>
</template>
<script>
// 引入菜单相关的 API 方法
import {fetchTreeList} from '@/api/menu';
import {listMenuByRole,allocMenu} from '@/api/role';
@ -29,31 +25,25 @@
name: "allocMenu",
data() {
return {
// 菜单树形数据列表
menuTreeList: [],
// 树形控件属性
defaultProps: {
children: 'children',
label: 'title'
},
// 角色 ID
roleId: null
roleId:null
};
},
created() {
// 获取角色 ID，获取菜单树形列表，获取角色菜单
this.roleId = this.$route.query.roleId;
this.treeList();
this.getRoleMenu(this.roleId);
},
methods: {
// 获取菜单树形列表
treeList() {
fetchTreeList().then(response => {
this.menuTreeList = response.data;
});
},
// 获取角色菜单
getRoleMenu(roleId){
listMenuByRole(roleId).then(response=>{
let menuList = response.data;
@ -66,13 +56,10 @@
}
}
}
// 设置树形控件选中的节点
this.$refs.tree.setCheckedKeys(checkedMenuIds);
});
},
// 处理保存
handleSave() {
// 获取树形控件选中的节点
let checkedNodes = this.$refs.tree.getCheckedNodes();
let checkedMenuIds=new Set();
if(checkedNodes!=null&&checkedNodes.length>0){
@ -84,7 +71,6 @@
}
}
}
// 弹出确认框，确认后分配菜单
this.$confirm('是否分配菜单？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -99,14 +85,11 @@
type: 'success',
duration: 1000
});
// 返回上一页
this.$router.back();
})
})
},
// 处理清空
handleClear() {
// 清空树形控件选中的节点
this.$refs.tree.setCheckedKeys([]);
}
}
@ -114,4 +97,5 @@
</script>
<style scoped>
</style>

46
src/views/ums/role/allocResource.vue
Unescape View File

@ -1,20 +1,14 @@
<template>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card class="form-container" shadow="never">
<!-- 使用 v-for 指令遍历 allResourceCate，生成多个 div -->
<div v-for="(cate,index) in allResourceCate" :class="index===0?'top-line':null" :key="'cate'+cate.id">
<!-- 使用 el-row 组件创建行，设置背景颜色 -->
<el-row class="table-layout" style="background: #F2F6FC;">
<!-- 使用 el-checkbox 组件创建复选框，双向绑定 cate.checked，点击时调用 handleCheckAllChange 方法 -->
<el-checkbox v-model="cate.checked"
:indeterminate="isIndeterminate(cate.id)"
@change="handleCheckAllChange(cate)">
{{cate.name}}
</el-checkbox>
</el-row>
<!-- 使用 el-row 组件创建行 -->
<el-row class="table-layout">
<!-- 使用 el-col 组件创建列，遍历 getResourceByCate(cate.id)，生成多个 el-checkbox -->
<el-col :span="8" v-for="resource in getResourceByCate(cate.id)" :key="resource.id" style="padding: 4px 0">
<el-checkbox v-model="resource.checked" @change="handleCheckChange(resource)">
{{resource.name}}
@ -22,17 +16,15 @@
</el-col>
</el-row>
</div>
<!-- 使用 el-button 组件创建保存按钮，点击时调用 handleSave 方法 -->
<div style="margin-top: 20px" align="center">
<el-button type="primary" @click="handleSave()">保存</el-button>
<!-- 使用 el-button 组件创建清空按钮，点击时调用 handleClear 方法 -->
<el-button @click="handleClear()">清空</el-button>
</div>
</el-card>
</template>
<script>
// 引入资源相关的 API 方法
import {fetchAllResourceList} from '@/api/resource';
import {listAllCate} from '@/api/resourceCategory';
import {allocResource,listResourceByRole} from '@/api/role';
@ -41,21 +33,16 @@
name: "allocResource",
data() {
return {
// 角色 ID
roleId: null,
// 所有资源
allResource: null,
// 所有资源分类
allResourceCate: null
};
},
created() {
// 获取角色 ID，获取所有资源分类列表，获取所有资源列表，获取角色资源
this.roleId = this.$route.query.roleId;
this.getAllResourceCateList();
},
methods: {
// 获取所有资源列表
getAllResourceList() {
fetchAllResourceList().then(response => {
this.allResource = response.data;
@ -65,7 +52,6 @@
this.getResourceByRole(this.roleId);
});
},
// 获取所有资源分类列表
getAllResourceCateList() {
listAllCate().then(response => {
this.allResourceCate = response.data;
@ -75,7 +61,6 @@
this.getAllResourceList();
});
},
// 根据资源分类 ID 获取资源列表
getResourceByCate(categoryId) {
let cateResource = [];
if (this.allResource == null) return null;
@ -87,7 +72,6 @@
}
return cateResource;
},
// 根据角色 ID 获取角色资源
getResourceByRole(roleId){
listResourceByRole(roleId).then(response=>{
let allocResource = response.data;
@ -100,7 +84,6 @@
this.$forceUpdate();
});
},
// 判断资源是否被选中
getResourceChecked(resourceId,allocResource){
if(allocResource==null||allocResource.length===0) return false;
for(let i=0;i<allocResource.length;i++){
@ -110,7 +93,6 @@
}
return false;
},
// 判断资源分类下的所有资源是否都被选中
isIndeterminate(categoryId) {
let cateResources = this.getResourceByCate(categoryId);
if (cateResources == null) return false;
@ -122,7 +104,6 @@
}
return !(checkedCount === 0 || checkedCount === cateResources.length);
},
// 判断资源分类下的所有资源是否都被选中
isAllChecked(categoryId) {
let cateResources = this.getResourceByCate(categoryId);
if (cateResources == null) return false;
@ -137,25 +118,24 @@
}
return checkedCount === cateResources.length;
},
// 处理保存
handleSave() {
this.$confirm('是否分配资源？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
}).then(() => {
let checkedResourceIds = new Set();
if(this.allResource!=null&&this.allResource.length>0){
this.allResource.forEach(item=>{
if(item.checked){
if (this.allResource != null && this.allResource.length > 0) {
this.allResource.forEach(item => {
if (item.checked) {
checkedResourceIds.add(item.id);
}
});
}
let params = new URLSearchParams();
params.append("roleId",this.roleId);
params.append("resourceIds",Array.from(checkedResourceIds));
allocResource(params).then(response=>{
params.append("roleId", this.roleId);
params.append("resourceIds", Array.from(checkedResourceIds));
allocResource(params).then(response => {
this.$message({
message: '分配成功',
type: 'success',
@ -165,25 +145,22 @@
})
})
},
// 处理清空
handleClear() {
this.allResourceCate.forEach(item=>{
this.allResourceCate.forEach(item => {
item.checked = false;
});
this.allResource.forEach(item=>{
this.allResource.forEach(item => {
item.checked = false;
});
this.$forceUpdate();
},
// 处理全选
handleCheckAllChange(cate) {
let cateResources = this.getResourceByCate(cate.id);
for(let i=0;i<cateResources.length;i++){
for (let i = 0; i < cateResources.length; i++) {
cateResources[i].checked = cate.checked;
}
this.$forceUpdate();
},
// 处理选择
handleCheckChange(resource) {
this.allResourceCate.forEach(item=>{
if(item.id===resource.categoryId){
@ -203,6 +180,7 @@
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
}
.top-line {
border-top: 1px solid #DCDFE6;
}

311
src/views/ums/role/index.vue
Unescape View File

@ -1,88 +1,79 @@
<template>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card class="filter-container" shadow="never">
<!-- 使用 el-icon 组件显示图标 -->
<i class="el-icon-search"></i>
<!-- 使用 el-span 组件显示文本 -->
<span>筛选搜索</span>
<!-- 使用 el-button 组件创建查询按钮，点击时调用 handleSearchList 方法 -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 使用 el-button 组件创建重置按钮，点击时调用 handleResetSearch 方法 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</el-card>
<!-- 使用 el-card 组件创建一个卡片容器，设置阴影效果 -->
<el-card class="operate-container" shadow="never">
<!-- 使用 el-icon 组件显示图标 -->
<i class="el-icon-tickets"></i>
<!-- 使用 el-span 组件显示文本 -->
<span>数据列表</span>
<!-- 使用 el-button 组件创建添加按钮，点击时调用 handleAdd 方法 -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
</el-card>
<!-- 使用 el-table 组件创建表格，绑定数据模型和加载状态 -->
<div class="table-container">
<el-table ref="roleTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列：编号 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列：角色名称 -->
<el-table-column label="角色名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列：描述 -->
<el-table-column label="描述" align="center">
<template slot-scope="scope">{{scope.row.description}}</template>
</el-table-column>
<!-- 表格列：用户数 -->
<el-table-column label="用户数" width="100" align="center">
<template slot-scope="scope">{{scope.row.adminCount}}</template>
</el-table-column>
<!-- 表格列：添加时间 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列：是否启用 -->
<el-table-column label="是否启用" width="140" align="center">
<template slot-scope="scope">
<!-- 使用 el-switch 组件创建开关，双向绑定 scope.row.status -->
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<!-- 表格列：操作 -->
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<!-- 使用 el-button 组件创建按钮，点击时调用 handleSelectMenu 或 handleSelectResource 或 handleUpdate 或 handleDelete 方法 -->
<el-row>
<el-button size="mini"
type="text"
@click="handleSelectMenu(scope.$index, scope.row)">分配菜单
</el-button>
<el-button size="mini"
type="text"
@click="handleSelectResource(scope.$index, scope.row)">分配资源
</el-button>
</el-row>
<el-row>
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="输入搜索：">
<el-input v-model="listQuery.keyword" class="input-width" placeholder="角色名称" clearable></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
</el-card>
<div class="table-container">
<el-table ref="roleTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="角色名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="描述" align="center">
<template slot-scope="scope">{{scope.row.description}}</template>
</el-table-column>
<el-table-column label="用户数" width="100" align="center">
<template slot-scope="scope">{{scope.row.adminCount}}</template>
</el-table-column>
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<el-table-column label="是否启用" width="140" align="center">
<template slot-scope="scope">
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<el-row>
<el-button size="mini"
type="text"
@click="handleSelectMenu(scope.$index, scope.row)">分配菜单
</el-button>
<el-button size="mini"
type="text"
@click="handleSelectResource(scope.$index, scope.row)">分配资源
</el-button>
</el-row>
<el-row>
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
@ -92,78 +83,62 @@
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</el-row>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
<el-dialog
:title="isEdit?'编辑角色':'添加角色'"
:visible.sync="dialogVisible"
width="40%">
<el-form :model="role"
ref="roleForm"
label-width="150px" size="small">
<el-form-item label="角色名称：">
<el-input v-model="role.name" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="描述：">
<el-input v-model="role.description"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="是否启用：">
<el-radio-group v-model="role.status">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
<!-- 使用 el-pagination 组件创建分页器，绑定数据模型和事件 -->
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
<!-- 使用 el-dialog 组件创建对话框，绑定数据模型和事件 -->
<el-dialog
:title="isEdit?'编辑角色':'添加角色'"
:visible.sync="dialogVisible"
width="40%">
<!-- 使用 el-form 组件创建表单，绑定数据模型和验证规则 -->
<el-form :model="role"
ref="roleForm"
label-width="150px" size="small">
<!-- 表单项：角色名称 -->
<el-form-item label="角色名称：">
<!-- 使用 el-input 组件创建输入框，双向绑定 role.name -->
<el-input v-model="role.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项：描述 -->
<el-form-item label="描述：">
<!-- 使用 el-input 组件创建文本域，双向绑定 role.description -->
<el-input v-model="role.description"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项：是否启用 -->
<el-form-item label="是否启用：">
<!-- 使用 el-radio-group 组件创建单选组，双向绑定 role.status -->
<el-radio-group v-model="role.status">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer">
<!-- 使用 el-button 组件创建取消按钮，点击时关闭对话框 -->
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<!-- 使用 el-button 组件创建确定按钮，点击时调用 handleDialogConfirm 方法 -->
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
// 引入角色相关的 API 方法
import {fetchList,createRole,updateRole,updateStatus,deleteRole} from '@/api/role';
// 引入日期格式化工具
import {formatDate} from '@/utils/date';
// 默认查询参数
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
// 默认角色数据
const defaultRole = {
id: null,
name: null,
@ -171,33 +146,23 @@
adminCount: 0,
status: 1
};
export default {
name: 'roleList',
data() {
return {
// 查询参数
listQuery: Object.assign({}, defaultListQuery),
// 角色数据列表
list: null,
// 总记录数
total: null,
// 加载状态
listLoading: false,
// 对话框可见性
dialogVisible: false,
// 是否为编辑状态
isEdit: false,
// 角色数据模型
role: Object.assign({}, defaultRole)
role: Object.assign({}, defaultRole),
isEdit: false
}
},
created() {
// 初始化获取角色列表
this.getList();
},
filters: {
// 日期格式化过滤器
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
@ -207,40 +172,28 @@
}
},
methods: {
// 处理重置搜索
handleResetSearch() {
// 重置查询参数
this.listQuery = Object.assign({}, defaultListQuery);
},
// 处理查询搜索
handleSearchList() {
// 重置页码，获取角色列表
this.listQuery.pageNum = 1;
this.getList();
},
// 处理分页大小变化
handleSizeChange(val) {
// 重置页码，设置分页大小，获取角色列表
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理分页页码变化
handleCurrentChange(val) {
// 设置页码，获取角色列表
this.listQuery.pageNum = val;
this.getList();
},
// 处理添加角色
handleAdd() {
// 显示对话框，设置编辑状态为 false，初始化角色数据
this.dialogVisible = true;
this.isEdit = false;
this.role = Object.assign({},defaultRole);
},
// 处理状态变化
handleStatusChange(index, row) {
// 弹出确认框，确认后修改角色状态
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -260,9 +213,7 @@
this.getList();
});
},
// 处理删除角色
handleDelete(index, row) {
// 弹出确认框，确认后删除角色
this.$confirm('是否要删除该角色?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -281,57 +232,44 @@
});
});
},
// 处理编辑角色
handleUpdate(index, row) {
// 显示对话框，设置编辑状态为 true，初始化角色数据
this.dialogVisible = true;
this.isEdit = true;
this.role = Object.assign({},row);
},
// 处理对话框确认
handleDialogConfirm() {
// 弹出确认框，确认后添加或更新角色
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
// 编辑状态下，调用更新角色 API
updateRole(this.role.id,this.role).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
// 关闭对话框，刷新角色列表
this.dialogVisible =false;
this.getList();
})
} else {
// 新增状态下，调用创建角色 API
createRole(this.role).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
// 关闭对话框，刷新角色列表
this.dialogVisible =false;
this.getList();
})
}
})
},
// 处理分配菜单
handleSelectMenu(index,row){
// 跳转到分配菜单页面
this.$router.push({path:'/ums/allocMenu',query:{roleId:row.id}})
},
// 处理分配资源
handleSelectResource(index,row){
// 跳转到分配资源页面
this.$router.push({path:'/ums/allocResource',query:{roleId:row.id}})
},
// 获取角色列表
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
@ -343,5 +281,6 @@
}
}
</script>
<style></style>

Write Preview
Loading…
Cancel
Save