p6hj2n987
/
fourth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

2 #2

Merged
p6hj2n987 merged 1 commits from yangyuxin_branch into main 1 year ago
Conversation 0 Commits 1 Files Changed 29
29 changed files with 7515 additions and 0 deletions
Show Stats Download Patch File Download Diff File

114
layout/Layout.vue
Unescape View File

@ -0,0 +1,114 @@
<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

@ -0,0 +1,43 @@
<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

@ -0,0 +1,235 @@
<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

@ -0,0 +1,154 @@
<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

@ -0,0 +1,89 @@
<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

@ -0,0 +1,3 @@
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

@ -0,0 +1,41 @@
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

@ -0,0 +1,386 @@
<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

@ -0,0 +1,34 @@
<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

@ -0,0 +1,145 @@
<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

@ -0,0 +1,674 @@
<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

@ -0,0 +1,37 @@
<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

@ -0,0 +1,30 @@
<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

@ -0,0 +1,952 @@
<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

@ -0,0 +1,396 @@
<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

@ -0,0 +1,384 @@
<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

@ -0,0 +1,310 @@
<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

@ -0,0 +1,601 @@
<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

@ -0,0 +1,908 @@
<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

@ -0,0 +1,30 @@
<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

@ -0,0 +1,32 @@
<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

@ -0,0 +1,185 @@
<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

@ -0,0 +1,463 @@
<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

@ -0,0 +1,455 @@
<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

@ -0,0 +1,32 @@
<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

@ -0,0 +1,31 @@
<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

@ -0,0 +1,264 @@
<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

@ -0,0 +1,456 @@
<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

@ -0,0 +1,31 @@
<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>
Write Preview
Loading…
Cancel
Save