Compare commits

..

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

@ -1,7 +1,7 @@
# mall-admin-web
<p>
<a href="#公众号"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/%E5%85%AC%E4%BC%97%E5%8F%B7-macrozheng-blue.svg" alt="公众号"></a>
<a href="#公众号"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/%E4%BA%A4%E6%B5%81-%E5%BE%AE%E4%BF%A1%E7%BE%A4-2BA245.svg" alt="交流"></a>
<a href="https://github.com/macrozheng/mall"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/%E5%90%8E%E5%8F%B0%E9%A1%B9%E7%9B%AE-mall-blue.svg" alt="后台项目"></a>
<a href="https://github.com/macrozheng/mall-swarm"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/Cloud%E7%89%88%E6%9C%AC-mall--swarm-brightgreen.svg" alt="SpringCloud版本"></a>
<a href="https://gitee.com/macrozheng/mall-admin-web"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/%E7%A0%81%E4%BA%91-%E9%A1%B9%E7%9B%AE%E5%9C%B0%E5%9D%80-orange.svg" alt="码云"></a>
@ -9,14 +9,15 @@
## 前言
该项目为前后端分离项目的前端部分
该项目为前后端分离项目的前端部分,后端项目`mall`地址:[传送门](https://github.com/macrozheng/mall) 。
## 项目介绍
`mall-admin-web`是一个电商后台管理系统的前端项目基于Vue+Element实现。主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。
### 项目演示
项目演示地址:[https://www.macrozheng.com/admin/](https://www.macrozheng.com/admin/)
项目在线演示地址:[https://www.macrozheng.com/admin/](https://www.macrozheng.com/admin/)
![后台管理系统功能演示](http://img.macrozheng.com/mall/project/mall_admin_show.png)
@ -67,6 +68,14 @@ src -- 源码目录
- 具体部署过程请参考:[mall前端项目的安装与部署](https://www.macrozheng.com/mall/deploy/mall_deploy_web.html)
- 前端自动化部署请参考:[使用Jenkins一键打包部署前端应用就是这么6](https://www.macrozheng.com/mall/reference/jenkins_vue.html)
## 公众号
学习不走弯路,关注公众号「**macrozheng**」,回复「**学习路线**」获取mall项目专属学习路线
加微信群交流,公众号后台回复「**加群**」即可。
![公众号图片](http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg)
## 许可证
[Apache License 2.0](https://github.com/macrozheng/mall-admin-web/blob/master/LICENSE)

Binary file not shown.

@ -16,8 +16,6 @@ import java.util.stream.Collectors;
* i11111
* dsdhsjhfjs
* fdjkf
* 1111111
* hjhfsj
*/
public class AdminUserDetails implements UserDetails {
//后台用户

@ -9,7 +9,7 @@
<name>mall-security</name>
<description>mall-security project for mall</description>
//zzzzzzz
<parent>
<groupId>com.macro.mall</groupId>
<artifactId>mall</artifactId>

@ -14,7 +14,7 @@ import org.springframework.stereotype.Component;
import java.lang.reflect.Method;
/**123456
/**
* RedisRedis
* Created by macro on 2020/3/17.
*/

@ -1,13 +1,8 @@
<template>
<!-- el-breadcrumb 组件用于创建面包屑导航这里给它添加了类名 "app-breadcrumb"并设置分隔符为 "/"用于分隔面包屑中的各个节点 -->
<el-breadcrumb class="app-breadcrumb" separator="/">
<!-- transition-group 组件用于对一组元素进行过渡动画效果的包裹这里命名为 "breadcrumb"它会根据内部元素的添加删除移动等操作自动应用过渡动画常用于展示动态变化的元素列表此处用于面包屑导航项的过渡效果处理 -->
<transition-group name="breadcrumb">
<!-- 使用 v-for 指令遍历 levelList 数组创建多个 el-breadcrumb-item 组件面包屑导航的每一项并将数组中的每个元素item以及对应的索引index传递到循环体内部使用同时通过 :key 绑定每个项的唯一标识这里使用 item.path确保 Vue 能够正确识别每个元素的变化 -->
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
<!-- 根据条件判断来决定面包屑导航项的显示方式如果该项的 redirect 属性等于 "noredirect" 或者当前项是 levelList 数组中的最后一项index == levelList.length - 1则使用 span 标签显示该项的标题item.meta.title并且添加类名 "no-redirect"用于后续样式设置 -->
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
<!-- 如果不满足上述条件即可以进行路由跳转的情况则使用 router-link 组件创建一个路由链接通过 :to 属性绑定要跳转的目标路径优先使用 item.redirect如果不存在则使用 item.path并在链接中显示该项的标题item.meta.title点击该链接可导航到对应的路由页面 -->
<router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
</el-breadcrumb-item>
</transition-group>
@ -16,17 +11,14 @@
<script>
export default {
// created this.getBreadcrumb
created() {
this.getBreadcrumb()
},
data() {
return {
// levelList null getBreadcrumb
levelList: null
}
},
// watch $routeVue this.getBreadcrumb
watch: {
$route() {
this.getBreadcrumb()
@ -34,15 +26,11 @@ export default {
},
methods: {
getBreadcrumb() {
// this.$route.matched 使 filter name name 便 matched
let matched = this.$route.matched.filter(item => item.name)
const first = matched[0]
// name 'home'
if (first && first.name!== 'home') {
// matched '/home'meta ''
if (first && first.name !== 'home') {
matched = [{ path: '/home', meta: { title: '首页' }}].concat(matched)
}
// matched levelList 使
this.levelList = matched
}
}
@ -50,22 +38,14 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// "app-breadcrumb" "el-breadcrumb"
.app-breadcrumb.el-breadcrumb {
// 使
display: inline-block;
// 14px
font-size: 14px;
// 50px使
line-height: 50px;
// 10px使
margin-left: 10px;
// "no-redirect"
.no-redirect {
// #97a8be
color: #97a8be;
// cursor: text
cursor: text;
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 10px;
.no-redirect {
color: #97a8be;
cursor: text;
}
}
}
</style>

@ -1,277 +1,116 @@
// tinymce.addI18n 方法用于向 TinyMCE 编辑器添加国际化i18n语言包这里添加的是中文简体'zh_CN')语言包。
// 其参数是一个对象,对象的属性名对应着 TinyMCE 编辑器中各种功能或提示文本的标识符,属性值则是对应的中文翻译内容。
tinymce.addI18n('zh_CN',{
// "Cut" 对应的中文翻译为 "剪切",在编辑器中涉及剪切操作相关的功能显示文本时会使用这个翻译。
"Cut": "\u526a\u5207",
// "Heading 5" 翻译为 "标题 5",可能用于表示文档中不同级别的标题,这里是第 5 级标题相关功能展示时对应的文本。
"Heading 5": "\u6807\u98985",
// "Header 2" 翻译为 "标题 2",同样与文档标题级别相关,此处是第 2 级标题对应的文本,可能用于菜单、按钮等地方显示。
"Header 2": "\u6807\u98982",
// 这条较长的文本是一个提示信息,当用户浏览器不支持直接访问剪贴板时显示,提示用户使用 Ctrl + X/C/V 键盘快捷键来进行复制、粘贴、剪切操作。
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u5bf9\u526a\u8d34\u677f\u7684\u8bbf\u95ee\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u952e\u8fdb\u884c\u590d\u5236\u7c98\u8d34\u3002",
"Heading 4": "\u6807\u98984",
// "Div" 翻译为 "Div 区块",可能与 HTML 中的 <div> 标签相关的功能显示文本对应,比如在插入、编辑相关区块操作时使用。
"Div": "Div\u533a\u5757",
// 重复出现的 "Heading 2",同样表示 "标题 2",与前面功能类似,在不同地方用于显示第 2 级标题相关的文本。
"Heading 2": "\u6807\u98982",
// "Paste" 翻译为 "粘贴",对应粘贴操作相关功能在界面上显示的文本内容。
"Paste": "\u7c98\u8d34",
// "Close" 翻译为 "关闭",常用于关闭对话框、菜单等操作对应的提示文本。
"Close": "\u5173\u95ed",
// "Font Family" 翻译为 "字体",在涉及选择字体相关的功能菜单、下拉框等地方会显示该文本,用于提示用户操作的内容。
"Font Family": "\u5b57\u4f53",
// "Pre" 翻译为 "预格式化文本",可能与显示代码块、预格式化的文本段落等相关功能的文本显示对应。
"Pre": "\u9884\u683c\u5f0f\u6587\u672c",
// "Align right" 翻译为 "右对齐",用于在设置文本、图片等元素对齐方式为靠右对齐时显示的文本提示。
"Align right": "\u53f3\u5bf9\u9f50",
// "New document" 翻译为 "新文档",比如在创建新的空白文档等相关操作时会显示该文本作为提示。
"New document": "\u65b0\u6587\u6863",
// "Blockquote" 翻译为 "引用",可能用于在插入、编辑引用块相关功能显示的文本内容,如引用他人文字等场景。
"Blockquote": "\u5f15\u7528",
// "Numbered list" 翻译为 "编号列表",对应创建、编辑有序列表相关操作在界面上显示的文本提示。
"Numbered list": "\u7f16\u53f7\u5217\u8868",
// "Heading 1" 翻译为 "标题 1",表示文档中最高级别的标题相关功能对应的文本,比如文章的主标题相关操作显示文本。
"Heading 1": "\u6807\u98981",
// "Headings" 翻译为 "标题",是一个比较笼统表示各种标题相关功能的文本,比如标题样式选择等场景会用到。
"Headings": "\u6807\u9898",
// "Increase indent" 翻译为 "增加缩进",用于在调整文本段落缩进量,使其更缩进时显示的操作提示文本。
"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
// "Formats" 翻译为 "格式",常用于格式选择、格式转换等相关功能菜单、按钮等地方显示的文本提示。
"Formats": "\u683c\u5f0f",
// "Headers" 翻译为 "标题",与前面类似,也是和文档中各级标题相关功能对应的文本内容。
"Headers": "\u6807\u9898",
// "Select all" 翻译为 "全选",在提供选择全部内容功能的地方会显示该文本,方便用户操作。
"Select all": "\u5168\u9009",
// "Header 3" 翻译为 "标题 3",对应文档中第 3 级标题相关功能显示的文本内容。
"Header 3": "\u6807\u98983",
// "Blocks" 翻译为 "区块",可能涉及页面中各种块状元素(如不同类型的容器、分区等)相关功能显示的文本。
"Blocks": "\u533a\u5757",
// "Undo" 翻译为 "撤销",用于撤销上一步操作的功能按钮等地方显示的文本提示。
"Undo": "\u64a4\u6d88",
// "Strikethrough" 翻译为 "删除线",在给文本添加或取消删除线相关操作时显示的文本提示。
"Strikethrough": "\u5220\u9664\u7ebf",
// "Bullet list" 翻译为 "项目符号列表",对应创建、编辑无序列表相关操作在界面上显示的文本提示。
"Bullet list": "\u9879\u76ee\u7b26\u53f7",
// 重复的 "Header 1",表示 "标题 1",对应相关标题级别功能显示文本。
"Header 1": "\u6807\u98981",
// "Superscript" 翻译为 "上标",用于在设置文本为上标形式(如数学公式中的指数等场景)相关操作显示的文本提示。
"Superscript": "\u4e0a\u6807",
// "Clear formatting" 翻译为 "清除格式",在去除文本已有的格式,恢复到默认格式等相关操作时显示的文本提示。
"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
// "Font Sizes" 翻译为 "字号",在选择字体大小相关的功能菜单、下拉框等地方会显示该文本,提示用户操作内容。
"Font Sizes": "\u5b57\u53f7",
// "Subscript" 翻译为 "下标",用于在设置文本为下标形式(如化学公式中的下标等场景)相关操作显示的文本提示。
"Subscript": "\u4e0b\u6807",
// "Header 6" 翻译为 "标题 6",对应文档中第 6 级标题相关功能显示的文本内容。
"Header 6": "\u6807\u98986",
// "Redo" 翻译为 "重做",用于重新执行上一步被撤销的操作的功能按钮等地方显示的文本提示。
"Redo": "\u91cd\u590d",
// "Paragraph" 翻译为 "段落",与文本段落相关的功能(如段落格式设置、新建段落等)显示的文本提示会用到。
"Paragraph": "\u6bb5\u843d",
// "Ok" 翻译为 "确定",常用于确认操作、提交设置等对话框中的按钮文本提示。
"Ok": "\u786e\u5b9a",
// "Bold" 翻译为 "粗体",在将文本设置为加粗字体相关操作时显示的文本提示。
"Bold": "\u7c97\u4f53",
// "Code" 翻译为 "代码",可能涉及插入、编辑代码块相关功能显示的文本内容,或者切换到代码编辑模式等场景使用。
"Code": "\u4ee3\u7801",
// "Italic" 翻译为 "斜体",在将文本设置为斜体字体相关操作时显示的文本提示。
"Italic": "\u659c\u4f53",
// "Align center" 翻译为 "居中对齐",用于在设置文本、图片等元素对齐方式为居中对齐时显示的文本提示。
"Align center": "\u5c45\u4e2d",
// 重复的 "Header 5",表示 "标题 5",对应相关标题级别功能显示文本。
"Header 5": "\u6807\u98985",
// "Heading 6" 翻译为 "标题 6",对应文档中第 6 级标题相关功能显示的文本内容。
"Heading 6": "\u6807\u98986",
// "Heading 3" 翻译为 "标题 3",对应文档中第 3 级标题相关功能显示的文本内容。
"Heading 3": "\u6807\u98983",
// "Decrease indent" 翻译为 "减少缩进",用于在调整文本段落缩进量,使其减少缩进时显示的操作提示文本。
"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
// 重复的 "Header 4",表示 "标题 4",对应相关标题级别功能显示文本。
"Header 4": "\u6807\u98984",
// 这条长文本是一个关于粘贴模式的提示信息,告知用户当前处于纯文本粘贴模式,再次点击相关选项可切换回普通粘贴模式,下次粘贴内容将以纯文本形式粘贴。
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u5185\u5bb9\u5c06\u73b0\u5728\u4f1a\u7c98\u8d34\u4e3a\u7eaf\u6587\u672c\u6a21\u5f0f\u3002",
// "Underline" 翻译为 "下划线",在给文本添加或取消下划线相关操作时显示的文本提示。
"Underline": "\u4e0b\u5212\u7ebf",
// "Cancel" 翻译为 "取消",常用于取消操作、关闭对话框等不执行当前操作并返回的场景对应的按钮文本提示。
"Cancel": "\u53d6\u6d88",
// "Justify" 翻译为 "两端对齐",用于在设置文本、段落等元素两端对齐方式时显示的文本提示。
"Justify": "\u4e24\u7aef\u5bf9\u9f50",
// "Inline" 翻译为 "行内",可能涉及行内元素相关功能(如行内样式、行内编辑等)显示的文本内容。
"Inline": "\u6587\u672c",
// "Copy" 翻译为 "复制",对应复制操作相关功能在界面上显示的文本内容。
"Copy": "\u590d\u5236",
// "Align left" 翻译为 "左对齐",用于在设置文本、图片等元素对齐方式为靠左对齐时显示的文本提示。
"Align left": "\u5de6\u5bf9\u9f50",
// "Visual aids" 翻译为 "视觉辅助",可能与编辑器中提供的一些辅助查看、编辑的可视化功能(如显示网格线、边框等帮助排版的元素)相关文本提示。
"Visual aids": "\u7f51\u683c\u7ebf",
// "Lower Greek" 翻译为 "小写希腊字母",可能与插入特殊字符、编号等相关功能涉及到使用小写希腊字母时显示的文本提示。
"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
// "Square" 翻译为 "方块",可能用于表示某种形状相关的功能(比如项目符号形状等)显示的文本提示。
"Square": "\u65b9\u5757",
// "Default" 翻译为 "默认",常用于表示恢复到默认设置、使用默认选项等相关功能的文本提示。
"Default": "\u9ed8\u8ba4",
// "Lower Alpha" 翻译为 "小写英文字母",可能与编号、列表等相关功能使用小写英文字母作为序号时显示的文本提示。
"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
// "Circle" 翻译为 "空心圆",同样可能与项目符号、形状相关功能显示的文本提示有关,比如选择项目符号形状为空心圆等场景。
"Circle": "\u7a7a\u5fc3\u5706",
// "Disc" 翻译为 "实心圆",类似上述情况,用于表示实心圆形状相关功能显示的文本提示,比如项目符号形状选择等。
"Disc": "\u5b9e\u5fc3\u5706",
// "Upper Alpha" 翻译为 "大写英文字母",在相关功能使用大写英文字母作为序号(如编号列表等场景)时显示的文本提示。
"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
// "Upper Roman" 翻译为 "大写罗马数字",与使用大写罗马数字作为序号相关功能(如列表编号等场景)显示的文本提示有关。
"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
// "Lower Roman" 翻译为 "小写罗马数字",用于在相关功能使用小写罗马数字作为序号时显示的文本提示,比如列表编号场景。
"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
// 这条长文本是一个关于标识符Id格式要求的提示信息告知用户标识符应以字母开头后面只能跟字母、数字、破折号、点、冒号或下划线用于在输入相关标识内容时给用户提示规范要求。
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
// "Name" 翻译为 "名称",常用于各种元素(如文件、链接、对象等)命名相关功能显示的文本提示。
"Name": "\u540d\u79f0",
// "Anchor" 翻译为 "锚点",在网页编辑中与设置锚点(用于页面内快速定位等功能)相关操作显示的文本提示。
// "Anchor" 翻译为 "锚点",在网页编辑等场景下,通常用于表示页面内的定位标记(锚点)相关功能对应的文本,
// 比如设置锚点、跳转到锚点位置等操作时,界面上显示的提示文字等会使用这个翻译后的文本。
"Anchor": "\u951a\u70b9",
// "Id" 翻译为 "标识符",常用于标识页面元素、数据记录等具有唯一性的标识符号相关功能显示的文本,
// 例如在 HTML 中元素的 id 属性设置、脚本中通过标识符来获取或操作特定对象等场景会用到该文本提示。
"Id": "\u6807\u8bc6\u7b26",
// 这是一个提示性的文本信息,用于当用户在文档有未保存更改的情况下,尝试离开当前页面(如切换页面、关闭窗口等操作)时弹出提示,
// 询问用户是否确定要离开,提醒用户可能存在数据丢失的风险。
"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
// "Restore last draft" 翻译为 "恢复上次草稿",常用于文档编辑软件中,当用户想要找回上一次保存或自动保存的草稿内容时,
// 点击对应功能按钮等操作时会显示该文本作为提示,告知用户此操作的作用。
"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
// "Special character" 翻译为 "特殊字符",在涉及插入、选择特殊符号(如数学符号、版权符号等非常规字母数字字符)相关功能时,
// 界面上对应的菜单、按钮等地方会显示该文本作为操作提示,引导用户进行相应操作。
"Special character": "\u7279\u6b8a\u7b26\u53f7",
// "Source code" 翻译为 "源代码",多用于代码编辑、网页开发等场景,比如查看或编辑 HTML、JavaScript 等代码时,
// 切换到代码视图或者相关代码编辑区域显示该文本,表明此处展示的是原始的代码内容。
"Source code": "\u6e90\u4ee3\u7801",
// "Language" 翻译为 "语言",通常用于选择文档语言、编程语言、界面语言等相关功能的文本提示,
// 例如在国际化设置中选择不同语言版本,或者代码编辑器中切换代码语言模式等场景会出现该文本。
"Language": "\u8bed\u8a00",
// "Insert/Edit code sample" 翻译为 "插入/编辑代码示例",用于在文档编辑、代码展示等场景下,
// 当用户想要添加一段代码示例或者对已有的代码示例进行修改编辑时,对应操作按钮、菜单选项等地方会显示该文本作为提示。
"Insert/Edit code sample": "\u63d2\u5165/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
// "B"、"R"、"G" 这几个单独的字母可能分别代表颜色中的蓝色Blue、红色Red、绿色Green分量相关含义
// 在涉及颜色设置(如 RGB 颜色模式下调整各颜色分量数值等场景)时会作为相关标识使用,具体使用场景需结合具体代码逻辑判断。
"B": "B",
"R": "R",
"G": "G",
// "Color" 翻译为 "颜色",是一个比较通用的表示与颜色相关功能的文本,比如选择字体颜色、背景颜色、元素颜色等操作时,
// 对应的菜单、对话框等地方会显示该文本作为操作提示,引导用户进行颜色相关的设置。
"Color": "\u989c\u8272",
// "Right to left" 翻译为 "从右到左",常用于文本排版、界面布局等涉及方向设置的功能场景,
// 例如一些支持从右向左书写语言(如阿拉伯语等)的排版,或者切换元素排列方向等操作时会显示该文本提示。
"Right to left": "\u4ece\u53f3\u5230\u5de6",
// "Left to right" 翻译为 "从左到右",与上面对应,是常规的文本、元素排列方向设置相关功能显示的文本,
// 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
"Left to right": "\u4ece\u5de6\u5230\u53f3",
// "Emoticons" 翻译为 "表情符号",在支持插入表情符号来丰富文档内容的编辑器中,
// 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示,引导用户选择表情符号。
"Emoticons": "\u8868\u60c5",
// "Robots" 翻译为 "机器人",具体含义要根据具体应用场景判断,可能涉及到网页爬虫相关设置(搜索引擎机器人等)、
// 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
"Robots": "\u673a\u5668\u4eba",
// "Document properties" 翻译为 "文档属性",常用于查看或编辑文档的各种元数据信息,如文档标题、作者、创建时间、
// 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看或修改这些属性。
"Document properties": "\u6587\u6863\u5c5e\u6027",
// "Title" 翻译为 "标题",用途广泛,可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本,
// 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
"Title": "\u6807\u9898",
// "Keywords" 翻译为 "关键词",在文档属性设置、搜索引擎优化等场景下,用于填写、编辑能代表文档核心内容的关键词语,
// 相关功能区域(如文档元数据编辑框等)会显示该文本作为操作提示,引导用户输入关键词。
"Keywords": "\u5173\u952e\u8bcd",
// "Encoding" 翻译为 "编码",常用于设置文档、网页等的字符编码格式(如 UTF-8、GBK 等)相关功能,
// 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
"Encoding": "\u7f16\u7801",
// "Description" 翻译为 "描述",常用来表示对文档、网页等内容的简短说明文字,
// 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
"Description": "\u63cf\u8ff0",
// "Author" 翻译为 "作者",用于在文档属性等相关功能中填写、显示文档创作者的信息,
// 对应功能区域(如文档作者编辑框等)会显示该文本作为操作提示,引导用户输入或查看作者名称。
"Author": "\u4f5c\u8005",
// "Fullscreen" 翻译为 "全屏",在应用程序、网页等提供全屏显示功能的地方,
// 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示,告知用户当前进入了全屏状态或可进入全屏状态。
"Fullscreen": "\u5168\u5c4f",
// "Horizontal line" 翻译为 "水平线",在文档编辑、页面设计等场景下,用于插入、编辑水平分割线相关操作时,
// 对应的菜单、按钮等地方会显示该文本作为操作提示,引导用户进行插入或修改水平线的操作。
"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// "Horizontal space" 翻译为 "水平间距",常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能,
// 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// "Insert/edit image" 翻译为 "插入/编辑图片",在文档编辑、网页内容编辑等场景下,
// 当用户想要添加一张新图片或者对已有的图片进行修改编辑(如调整大小、更换图片等操作)时,
// 对应的操作按钮、菜单选项等地方会显示该文本作为提示,引导用户进行相应操作。
"Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// "General" 翻译为 "常规",常用于表示一组设置选项中的通用、基础设置部分,
// 例如在软件的设置对话框中,会将一些常见的、基本的设置分类到 "常规" 选项卡下,对应的选项卡标题会显示该文本作为提示。
"General": "\u666e\u901a",
// "Advanced" 翻译为 "高级",与 "常规" 相对,通常用于存放更复杂、专业、进阶的设置选项,
// 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置,在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
"Advanced": "\u9ad8\u7ea7",
// "Source" 翻译为 "来源",在很多场景下有不同含义,比如图片、视频等媒体资源的原始地址(来源链接),
// 或者代码片段的引用来源等相关功能显示该文本作为提示信息,引导用户填写或查看相应的来源信息。
"Source": "\u5730\u5740",
// "Border" 翻译为 "边框",常用于设置页面元素(如图片、表格、文本框等)的边框样式、宽度、颜色等相关功能,
// 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示,引导用户进行边框相关的设置。
"Border": "\u8fb9\u6846",
// "Constrain proportions" 翻译为 "保持比例",在调整图片、图形等元素大小时,
// 如果希望元素的宽高比例保持不变(避免拉伸变形),相关操作按钮、设置选项等地方会显示该文本作为提示,
// 告知用户当前设置可保持元素原有比例进行缩放操作。
"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// "Vertical space" 翻译为 "垂直间距",类似于 "Horizontal space",不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能,
// 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// "Image description" 翻译为 "图片描述",常用于为图片添加说明性文字,
// 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下,会有填写图片描述的功能,对应功能区域会显示该文本提示。
"Image description": "\u56fe\u7247\u63cf\u8ff0",
// "Style" 翻译为 "样式",在文档编辑、网页开发等场景下应用广泛,用于设置文本、元素的各种外观样式(如字体样式、颜色样式、布局样式等),
// 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示,引导用户进行样式相关的选择和设置。
"Style": "\u6837\u5f0f",
// "Dimensions" 翻译为 "尺寸",常用于查看或修改图片、表格、页面区域等元素的大小(宽度和高度)相关功能,
// 例如在调整元素大小时,对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示,引导用户操作。
"Dimensions": "\u5927\u5c0f",
// "Insert image" 翻译为 "插入图片",是一个比较简洁明确的提示文本,用于在文档、网页等内容中添加新图片时,
// 对应的操作按钮、菜单选项等地方会显示该文本,引导用户进行插入图片的操作。
"Insert image": "\u63d2\u5165\u56fe\u7247",
// "Image" 翻译为 "图片",是一个通用表示图片相关功能的文本,比如在图片管理、选择图片资源等场景下,
// 对应的菜单、列表等地方会显示该文本作为提示,让用户明确当前操作涉及的对象是图片。
"Image": "\u56fe\u7247",
// "Zoom in" 翻译为 "放大",常用于图片查看、文档页面查看等场景下,当用户想要将显示内容放大以便查看细节时,
// 对应的操作按钮(如放大镜加 + 图标按钮等)会显示该文本作为操作提示,引导用户进行放大操作。
"Zoom in": "\u653e\u5927",
// "Contrast" 翻译为 "对比度",在图片编辑、显示设置等场景下,用于调整图片或屏幕显示内容的对比度相关操作时,
// 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行对比度的调整。
"Contrast": "\u5bf9\u6bd4\u5ea6",
// "Back" 翻译为 "后退",常用于页面导航、操作历史回退等场景,比如在浏览器中返回上一页、
// 软件中撤销上一步操作回到之前的状态等操作时,对应的按钮等地方会显示该文本作为操作提示。
"Back": "\u540e\u9000",
// "Gamma" 翻译为 "伽马值",在涉及图像、显示屏等颜色校正、色彩调整相关功能中,伽马值是一个重要参数,
// 当用户调整伽马值来改变显示效果时,对应的设置区域会显示该文本作为操作提示,引导用户进行操作。
"Gamma": "\u4f3d\u9a6c\u503c",
// "Flip horizontally" 翻译为 "水平翻转",在图片编辑、图形处理等场景下,当用户想要将元素在水平方向上进行镜像翻转时,
// 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行水平翻转操作。
"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// "Resize" 翻译为 "调整大小",常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本,
// 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示,引导用户进行大小调整操作。
"Resize": "\u8c03\u6574\u5927\u5c0f",
// "Sharpen" 翻译为 "锐化",在图片编辑中,用于提高图片清晰度、使图像边缘更锐利等相关操作时,
// 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示,引导用户进行锐化操作。
"Sharpen": "\u9510\u5316",
// "Zoom out" 翻译为 "缩小",与 "Zoom in" 相对,常用于图片查看、文档页面查看等场景下,当用户想要将显示内容缩小以便查看整体情况时,
// 对应的操作按钮(如放大镜加 - 图标按钮等)会显示该文本作为操作提示,引导用户进行缩小操作。
"Zoom out": "\u7f29\u5c0f",
// "Image options" 翻译为 "图片选项",在图片相关功能中,用于展开更多关于图片的设置(如样式、格式、链接等各种设置)时,
// 对应的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看和调整图片的各项具体设置。
"Image options": "\u56fe\u7247\u9009\u9879",
// "Apply" 翻译为 "应用",常用于当用户在设置界面调整好各项参数、选项后,点击该按钮来使设置生效,
// 对应的操作按钮上会显示该文本作为提示,告知用户点击此按钮可将当前设置应用到相应对象上。
"Apply": "\u5e94\u7528",
// "Brightness" 翻译为 "亮度",在图片编辑、显示屏亮度调节等场景下,用于调整图片或屏幕显示内容的明亮程度相关操作时,
// 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行亮度的调整。
"Brightness": "\u4eae\u5ea6",
// "Rotate clockwise" 翻译为 "顺时针旋转",在图片、图形等元素进行旋转操作时,用于提示用户按照顺时针方向旋转元素,
// 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行顺时针旋转操作。
"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
"Cut": "\u526a\u5207",
"Heading 5": "\u6807\u98985",
"Header 2": "\u6807\u98982",
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u5bf9\u526a\u8d34\u677f\u7684\u8bbf\u95ee\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u952e\u8fdb\u884c\u590d\u5236\u7c98\u8d34\u3002",
"Heading 4": "\u6807\u98984",
"Div": "Div\u533a\u5757",
"Heading 2": "\u6807\u98982",
"Paste": "\u7c98\u8d34",
"Close": "\u5173\u95ed",
"Font Family": "\u5b57\u4f53",
"Pre": "\u9884\u683c\u5f0f\u6587\u672c",
"Align right": "\u53f3\u5bf9\u9f50",
"New document": "\u65b0\u6587\u6863",
"Blockquote": "\u5f15\u7528",
"Numbered list": "\u7f16\u53f7\u5217\u8868",
"Heading 1": "\u6807\u98981",
"Headings": "\u6807\u9898",
"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
"Formats": "\u683c\u5f0f",
"Headers": "\u6807\u9898",
"Select all": "\u5168\u9009",
"Header 3": "\u6807\u98983",
"Blocks": "\u533a\u5757",
"Undo": "\u64a4\u6d88",
"Strikethrough": "\u5220\u9664\u7ebf",
"Bullet list": "\u9879\u76ee\u7b26\u53f7",
"Header 1": "\u6807\u98981",
"Superscript": "\u4e0a\u6807",
"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
"Font Sizes": "\u5b57\u53f7",
"Subscript": "\u4e0b\u6807",
"Header 6": "\u6807\u98986",
"Redo": "\u91cd\u590d",
"Paragraph": "\u6bb5\u843d",
"Ok": "\u786e\u5b9a",
"Bold": "\u7c97\u4f53",
"Code": "\u4ee3\u7801",
"Italic": "\u659c\u4f53",
"Align center": "\u5c45\u4e2d",
"Header 5": "\u6807\u98985",
"Heading 6": "\u6807\u98986",
"Heading 3": "\u6807\u98983",
"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
"Header 4": "\u6807\u98984",
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
"Underline": "\u4e0b\u5212\u7ebf",
"Cancel": "\u53d6\u6d88",
"Justify": "\u4e24\u7aef\u5bf9\u9f50",
"Inline": "\u6587\u672c",
"Copy": "\u590d\u5236",
"Align left": "\u5de6\u5bf9\u9f50",
"Visual aids": "\u7f51\u683c\u7ebf",
"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
"Square": "\u65b9\u5757",
"Default": "\u9ed8\u8ba4",
"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
"Circle": "\u7a7a\u5fc3\u5706",
"Disc": "\u5b9e\u5fc3\u5706",
"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
"Name": "\u540d\u79f0",
"Anchor": "\u951a\u70b9",
"Id": "\u6807\u8bc6\u7b26",
"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
"Special character": "\u7279\u6b8a\u7b26\u53f7",
"Source code": "\u6e90\u4ee3\u7801",
"Language": "\u8bed\u8a00",
"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
"B": "B",
"R": "R",
"G": "G",
"Color": "\u989c\u8272",
"Right to left": "\u4ece\u53f3\u5230\u5de6",
"Left to right": "\u4ece\u5de6\u5230\u53f3",
"Emoticons": "\u8868\u60c5",
"Robots": "\u673a\u5668\u4eba",
"Document properties": "\u6587\u6863\u5c5e\u6027",
"Title": "\u6807\u9898",
"Keywords": "\u5173\u952e\u8bcd",
"Encoding": "\u7f16\u7801",
"Description": "\u63cf\u8ff0",
"Author": "\u4f5c\u8005",
"Fullscreen": "\u5168\u5c4f",
"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
"General": "\u666e\u901a",
"Advanced": "\u9ad8\u7ea7",
"Source": "\u5730\u5740",
"Border": "\u8fb9\u6846",
"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
"Image description": "\u56fe\u7247\u63cf\u8ff0",
"Style": "\u6837\u5f0f",
"Dimensions": "\u5927\u5c0f",
"Insert image": "\u63d2\u5165\u56fe\u7247",
"Image": "\u56fe\u7247",
"Zoom in": "\u653e\u5927",
"Contrast": "\u5bf9\u6bd4\u5ea6",
"Back": "\u540e\u9000",
"Gamma": "\u4f3d\u9a6c\u503c",
"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
"Resize": "\u8c03\u6574\u5927\u5c0f",
"Sharpen": "\u9510\u5316",
"Zoom out": "\u7f29\u5c0f",
"Image options": "\u56fe\u7247\u9009\u9879",
"Apply": "\u5e94\u7528",
"Brightness": "\u4eae\u5ea6",
"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
"Edit image": "\u7f16\u8f91\u56fe\u7247",
"Color levels": "\u989c\u8272\u5c42\u6b21",
@ -306,463 +145,6 @@ tinymce.addI18n('zh_CN',{
"Page break": "\u5206\u9875\u7b26",
"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
"Preview": "\u9884\u89c8",
//// "Color" 翻译为 "颜色",是一个比较通用的表示与颜色相关功能的文本,比如选择字体颜色、背景颜色、元素颜色等操作时,
// // 对应的菜单、对话框等地方会显示该文本作为操作提示,引导用户进行颜色相关的设置。
// "Color": "\u989c\u8272",
// // "Right to left" 翻译为 "从右到左",常用于文本排版、界面布局等涉及方向设置的功能场景,
// // 例如一些支持从右向左书写语言(如阿拉伯语等)的排版,或者切换元素排列方向等操作时会显示该文本提示。
// "Right to left": "\u4ece\u53f3\u5230\u5de6",
// // "Left to right" 翻译为 "从左到右",与上面对应,是常规的文本、元素排列方向设置相关功能显示的文本,
// // 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
// "Left to right": "\u4ece\u5de6\u5230\u53f3",
// // "Emoticons" 翻译为 "表情符号",在支持插入表情符号来丰富文档内容的编辑器中,
// // 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示,引导用户选择表情符号。
// "Emoticons": "\u8868\u60c5",
// // "Robots" 翻译为 "机器人",具体含义要根据具体应用场景判断,可能涉及到网页爬虫相关设置(搜索引擎机器人等)、
// // 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
// "Robots": "\u673a\u5668\u4eba",
// // "Document properties" 翻译为 "文档属性",常用于查看或编辑文档的各种元数据信息,如文档标题、作者、创建时间、
// // 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看或修改这些属性。
// "Document properties": "\u6587\u6863\u5c5e\u6027",
// // "Title" 翻译为 "标题",用途广泛,可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本,
// // 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
// "Title": "\u6807\u9898",
// // "Keywords" 翻译为 "关键词",在文档属性设置、搜索引擎优化等场景下,用于填写、编辑能代表文档核心内容的关键词语,
// // 相关功能区域(如文档元数据编辑框等)会显示该文本作为操作提示,引导用户输入关键词。
// "Keywords": "\u5173\u952e\u8bcd",
// // "Encoding" 翻译为 "编码",常用于设置文档、网页等的字符编码格式(如 UTF-8、GBK 等)相关功能,
// // 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
// "Encoding": "\u7f16\u7801",
// // "Description" 翻译为 "描述",常用来表示对文档、网页等内容的简短说明文字,
// // 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
// "Description": "\u63cf\u8ff0",
// // "Author" 翻译为 "作者",用于在文档属性等相关功能中填写、显示文档创作者的信息,
// // 对应功能区域(如文档作者编辑框等)会显示该文本作为操作提示,引导用户输入或查看作者名称。
// "Author": "\u4f5c\u8005",
// // "Fullscreen" 翻译为 "全屏",在应用程序、网页等提供全屏显示功能的地方,
// // 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示,告知用户当前进入了全屏状态或可进入全屏状态。
// "Fullscreen": "\u5168\u5c4f",
// // "Horizontal line" 翻译为 "水平线",在文档编辑、页面设计等场景下,用于插入、编辑水平分割线相关操作时,
// // 对应的菜单、按钮等地方会显示该文本作为操作提示,引导用户进行插入或修改水平线的操作。
// "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// // "Horizontal space" 翻译为 "水平间距",常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能,
// // 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
// "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// // "Insert/edit image" 翻译为 "插入/编辑图片",在文档编辑、网页内容编辑等场景下,
// // 当用户想要添加一张新图片或者对已有的图片进行修改编辑(如调整大小、更换图片等操作)时,
// // 对应的操作按钮、菜单选项等地方会显示该文本作为提示,引导用户进行相应操作。
// "Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// // "General" 翻译为 "常规",常用于表示一组设置选项中的通用、基础设置部分,
// // 例如在软件的设置对话框中,会将一些常见的、基本的设置分类到 "常规" 选项卡下,对应的选项卡标题会显示该文本作为提示。
// "General": "\u666e\u901a",
// // "Advanced" 翻译为 "高级",与 "常规" 相对,通常用于存放更复杂、专业、进阶的设置选项,
// // 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置,在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
// "Advanced": "\u9ad8\u7ea7",
// // "Source" 翻译为 "来源",在很多场景下有不同含义,比如图片、视频等媒体资源的原始地址(来源链接),
// // 或者代码片段的引用来源等相关功能显示该文本作为提示信息,引导用户填写或查看相应的来源信息。
// "Source": "\u5730\u5740",
// // "Border" 翻译为 "边框",常用于设置页面元素(如图片、表格、文本框等)的边框样式、宽度、颜色等相关功能,
// // 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示,引导用户进行边框相关的设置。
// "Border": "\u8fb9\u6846",
// // "Constrain proportions" 翻译为 "保持比例",在调整图片、图形等元素大小时,
// // 如果希望元素的宽高比例保持不变(避免拉伸变形),相关操作按钮、设置选项等地方会显示该文本作为提示,
// // 告知用户当前设置可保持元素原有比例进行缩放操作。
// "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// // "Vertical space" 翻译为 "垂直间距",类似于 "Horizontal space",不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能,
// // 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
// "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// // "Image description" 翻译为 "图片描述",常用于为图片添加说明性文字,
// // 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下,会有填写图片描述的功能,对应功能区域会显示该文本提示。
// "Image description": "\u56fe\u7247\u63cf\u8ff0",
// // "Style" 翻译为 "样式",在文档编辑、网页开发等场景下应用广泛,用于设置文本、元素的各种外观样式(如字体样式、颜色样式、布局样式等),
// // 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示,引导用户进行样式相关的选择和设置。
// "Style": "\u6837\u5f0f",
// // "Dimensions" 翻译为 "尺寸",常用于查看或修改图片、表格、页面区域等元素的大小(宽度和高度)相关功能,
// // 例如在调整元素大小时,对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示,引导用户操作。
// "Dimensions": "\u5927\u5c0f",
// // "Insert image" 翻译为 "插入图片",是一个比较简洁明确的提示文本,用于在文档、网页等内容中添加新图片时,
// // 对应的操作按钮、菜单选项等地方会显示该文本,引导用户进行插入图片的操作。
// "Insert image": "\u63d2\u5165\u56fe\u7247",
// // "Image" 翻译为 "图片",是一个通用表示图片相关功能的文本,比如在图片管理、选择图片资源等场景下,
// // 对应的菜单、列表等地方会显示该文本作为提示,让用户明确当前操作涉及的对象是图片。
// "Image": "\u56fe\u7247",
// // "Zoom in" 翻译为 "放大",常用于图片查看、文档页面查看等场景下,当用户想要将显示内容放大以便查看细节时,
// // 对应的操作按钮(如放大镜加 + 图标按钮等)会显示该文本作为操作提示,引导用户进行放大操作。
// "Zoom in": "\u653e\u5927",
// // "Contrast" 翻译为 "对比度",在图片编辑、显示设置等场景下,用于调整图片或屏幕显示内容的对比度相关操作时,
// // 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行对比度的调整。
// "Contrast": "\u5bf9\u6bd4\u5ea6",
// // "Back" 翻译为 "后退",常用于页面导航、操作历史回退等场景,比如在浏览器中返回上一页、
// // 软件中撤销上一步操作回到之前的状态等操作时,对应的按钮等地方会显示该文本作为操作提示。
// "Back": "\u540e\u9000",
// // "Gamma" 翻译为 "伽马值",在涉及图像、显示屏等颜色校正、色彩调整相关功能中,伽马值是一个重要参数,
// // 当用户调整伽马值来改变显示效果时,对应的设置区域会显示该文本作为操作提示,引导用户进行操作。
// "Gamma": "\u4f3d\u9a6c\u503c",
// // "Flip horizontally" 翻译为 "水平翻转",在图片编辑、图形处理等场景下,当用户想要将元素在水平方向上进行镜像翻转时,
// // 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行水平翻转操作。
// "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// // "Resize" 翻译为 "调整大小",常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本,
// // 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示,引导用户进行大小调整操作。
// "Resize": "\u8c03\u6574\u5927\u5c0f",
// // "Sharpen" 翻译为 "锐化",在图片编辑中,用于提高图片清晰度、使图像边缘更锐利等相关操作时,
// // 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示,引导用户进行锐化操作。
// "Sharpen": "\u9510\u5316",
// // "Zoom out" 翻译为 "缩小",与 "Zoom in" 相对,常用于图片查看、文档页面查看等场景下,当用户想要将显示内容缩小以便查看整体情况时,
// // 对应的操作按钮(如放大镜加 - 图标按钮等)会显示该文本作为操作提示,引导用户进行缩小操作。
// "Zoom out": "\u7f29\u5c0f",
// // "Image options" 翻译为 "图片选项",在图片相关功能中,用于展开更多关于图片的设置(如样式、格式、链接等各种设置)时,
// // 对应的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看和调整图片的各项具体设置。
// "Image options": "\u56fe\u7247\u9009\u9879",
// // "Apply" 翻译为 "应用",常用于当用户在设置界面调整好各项参数、选项后,点击该按钮来使设置生效,
// // 对应的操作按钮上会显示该文本作为提示,告知用户点击此按钮可将当前设置应用到相应对象上。
// "Apply": "\u5e94\u7528",
// // "Brightness" 翻译为 "亮度",在图片编辑、显示屏亮度调节等场景下,用于调整图片或屏幕显示内容的明亮程度相关操作时,
// // 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行亮度的调整。
// "Brightness": "\u4eae\u5ea6",
// // "Rotate clockwise" 翻译为 "顺时针旋转",在图片、图形等元素进行旋转操作时,用于提示用户按照顺时针方向旋转元素,
// // 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行顺时针旋转操作。// "Color" 翻译为 "颜色",是一个比较通用的表示与颜色相关功能的文本,比如选择字体颜色、背景颜色、元素颜色等操作时,
// // 对应的菜单、对话框等地方会显示该文本作为操作提示,引导用户进行颜色相关的设置。
// "Color": "\u989c\u8272",
// // "Right to left" 翻译为 "从右到左",常用于文本排版、界面布局等涉及方向设置的功能场景,
// // 例如一些支持从右向左书写语言(如阿拉伯语等)的排版,或者切换元素排列方向等操作时会显示该文本提示。
// "Right to left": "\u4ece\u53f3\u5230\u5de6",
// // "Left to right" 翻译为 "从左到右",与上面对应,是常规的文本、元素排列方向设置相关功能显示的文本,
// // 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
// "Left to right": "\u4ece\u5de6\u5230\u53f3",
// // "Emoticons" 翻译为 "表情符号",在支持插入表情符号来丰富文档内容的编辑器中,
// // 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示,引导用户选择表情符号。
// "Emoticons": "\u8868\u60c5",
// // "Robots" 翻译为 "机器人",具体含义要根据具体应用场景判断,可能涉及到网页爬虫相关设置(搜索引擎机器人等)、
// // 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
// "Robots": "\u673a\u5668\u4eba",
// // "Document properties" 翻译为 "文档属性",常用于查看或编辑文档的各种元数据信息,如文档标题、作者、创建时间、
// // 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看或修改这些属性。
// "Document properties": "\u6587\u6863\u5c5e\u6027",
// // "Title" 翻译为 "标题",用途广泛,可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本,
// // 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
// "Title": "\u6807\u9898",
// // "Keywords" 翻译为 "关键词",在文档属性设置、搜索引擎优化等场景下,用于填写、编辑能代表文档核心内容的关键词语,
// // 相关功能区域(如文档元数据编辑框等)会显示该文本作为操作提示,引导用户输入关键词。
// "Keywords": "\u5173\u952e\u8bcd",
// // "Encoding" 翻译为 "编码",常用于设置文档、网页等的字符编码格式(如 UTF-8、GBK 等)相关功能,
// // 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
// "Encoding": "\u7f16\u7801",
// // "Description" 翻译为 "描述",常用来表示对文档、网页等内容的简短说明文字,
// // 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
// "Description": "\u63cf\u8ff0",
// // "Author" 翻译为 "作者",用于在文档属性等相关功能中填写、显示文档创作者的信息,
// // 对应功能区域(如文档作者编辑框等)会显示该文本作为操作提示,引导用户输入或查看作者名称。
// "Author": "\u4f5c\u8005",
// // "Fullscreen" 翻译为 "全屏",在应用程序、网页等提供全屏显示功能的地方,
// // 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示,告知用户当前进入了全屏状态或可进入全屏状态。
// "Fullscreen": "\u5168\u5c4f",
// // "Horizontal line" 翻译为 "水平线",在文档编辑、页面设计等场景下,用于插入、编辑水平分割线相关操作时,
// // 对应的菜单、按钮等地方会显示该文本作为操作提示,引导用户进行插入或修改水平线的操作。
// "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// // "Horizontal space" 翻译为 "水平间距",常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能,
// // 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
// "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// // "Insert/edit image" 翻译为 "插入/编辑图片",在文档编辑、网页内容编辑等场景下,
// // 当用户想要添加一张新图片或者对已有的图片进行修改编辑(如调整大小、更换图片等操作)时,
// // 对应的操作按钮、菜单选项等地方会显示该文本作为提示,引导用户进行相应操作。
// "Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// // "General" 翻译为 "常规",常用于表示一组设置选项中的通用、基础设置部分,
// // 例如在软件的设置对话框中,会将一些常见的、基本的设置分类到 "常规" 选项卡下,对应的选项卡标题会显示该文本作为提示。
// "General": "\u666e\u901a",
// // "Advanced" 翻译为 "高级",与 "常规" 相对,通常用于存放更复杂、专业、进阶的设置选项,
// // 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置,在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
// "Advanced": "\u9ad8\u7ea7",
// // "Source" 翻译为 "来源",在很多场景下有不同含义,比如图片、视频等媒体资源的原始地址(来源链接),
// // 或者代码片段的引用来源等相关功能显示该文本作为提示信息,引导用户填写或查看相应的来源信息。
// "Source": "\u5730\u5740",
// // "Border" 翻译为 "边框",常用于设置页面元素(如图片、表格、文本框等)的边框样式、宽度、颜色等相关功能,
// // 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示,引导用户进行边框相关的设置。
// "Border": "\u8fb9\u6846",
// // "Constrain proportions" 翻译为 "保持比例",在调整图片、图形等元素大小时,
// // 如果希望元素的宽高比例保持不变(避免拉伸变形),相关操作按钮、设置选项等地方会显示该文本作为提示,
// // 告知用户当前设置可保持元素原有比例进行缩放操作。
// "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// // "Vertical space" 翻译为 "垂直间距",类似于 "Horizontal space",不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能,
// // 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
// "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// // "Image description" 翻译为 "图片描述",常用于为图片添加说明性文字,
// // 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下,会有填写图片描述的功能,对应功能区域会显示该文本提示。
// "Image description": "\u56fe\u7247\u63cf\u8ff0",
// // "Style" 翻译为 "样式",在文档编辑、网页开发等场景下应用广泛,用于设置文本、元素的各种外观样式(如字体样式、颜色样式、布局样式等),
// // 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示,引导用户进行样式相关的选择和设置。
// "Style": "\u6837\u5f0f",
// // "Dimensions" 翻译为 "尺寸",常用于查看或修改图片、表格、页面区域等元素的大小(宽度和高度)相关功能,
// // 例如在调整元素大小时,对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示,引导用户操作。
// "Dimensions": "\u5927\u5c0f",
// // "Insert image" 翻译为 "插入图片",是一个比较简洁明确的提示文本,用于在文档、网页等内容中添加新图片时,
// // 对应的操作按钮、菜单选项等地方会显示该文本,引导用户进行插入图片的操作。
// "Insert image": "\u63d2\u5165\u56fe\u7247",
// // "Image" 翻译为 "图片",是一个通用表示图片相关功能的文本,比如在图片管理、选择图片资源等场景下,
// // 对应的菜单、列表等地方会显示该文本作为提示,让用户明确当前操作涉及的对象是图片。
// "Image": "\u56fe\u7247",
// // "Zoom in" 翻译为 "放大",常用于图片查看、文档页面查看等场景下,当用户想要将显示内容放大以便查看细节时,
// // 对应的操作按钮(如放大镜加 + 图标按钮等)会显示该文本作为操作提示,引导用户进行放大操作。
// "Zoom in": "\u653e\u5927",
// // "Contrast" 翻译为 "对比度",在图片编辑、显示设置等场景下,用于调整图片或屏幕显示内容的对比度相关操作时,
// // 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行对比度的调整。
// "Contrast": "\u5bf9\u6bd4\u5ea6",
// // "Back" 翻译为 "后退",常用于页面导航、操作历史回退等场景,比如在浏览器中返回上一页、
// // 软件中撤销上一步操作回到之前的状态等操作时,对应的按钮等地方会显示该文本作为操作提示。
// "Back": "\u540e\u9000",
// // "Gamma" 翻译为 "伽马值",在涉及图像、显示屏等颜色校正、色彩调整相关功能中,伽马值是一个重要参数,
// // 当用户调整伽马值来改变显示效果时,对应的设置区域会显示该文本作为操作提示,引导用户进行操作。
// "Gamma": "\u4f3d\u9a6c\u503c",
// // "Flip horizontally" 翻译为 "水平翻转",在图片编辑、图形处理等场景下,当用户想要将元素在水平方向上进行镜像翻转时,
// // 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行水平翻转操作。
// "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// // "Resize" 翻译为 "调整大小",常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本,
// // 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示,引导用户进行大小调整操作。
// "Resize": "\u8c03\u6574\u5927\u5c0f",
// // "Sharpen" 翻译为 "锐化",在图片编辑中,用于提高图片清晰度、使图像边缘更锐利等相关操作时,
// // 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示,引导用户进行锐化操作。
// "Sharpen": "\u9510\u5316",
// // "Zoom out" 翻译为 "缩小",与 "Zoom in" 相对,常用于图片查看、文档页面查看等场景下,当用户想要将显示内容缩小以便查看整体情况时,
// // 对应的操作按钮(如放大镜加 - 图标按钮等)会显示该文本作为操作提示,引导用户进行缩小操作。
// "Zoom out": "\u7f29\u5c0f",
// // "Image options" 翻译为 "图片选项",在图片相关功能中,用于展开更多关于图片的设置(如样式、格式、链接等各种设置)时,
// // 对应的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看和调整图片的各项具体设置。
// "Image options": "\u56fe\u7247\u9009\u9879",
// // "Apply" 翻译为 "应用",常用于当用户在设置界面调整好各项参数、选项后,点击该按钮来使设置生效,
// // 对应的操作按钮上会显示该文本作为提示,告知用户点击此按钮可将当前设置应用到相应对象上。
// "Apply": "\u5e94\u7528",
// // "Brightness" 翻译为 "亮度",在图片编辑、显示屏亮度调节等场景下,用于调整图片或屏幕显示内容的明亮程度相关操作时,
// // 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行亮度的调整。
// "Brightness": "\u4eae\u5ea6",
// // "Rotate clockwise" 翻译为 "顺时针旋转",在图片、图形等元素进行旋转操作时,用于提示用户按照顺时针方向旋转元素,
// // 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行顺时针旋转操作。// "Color" 翻译为 "颜色",是一个比较通用的表示与颜色相关功能的文本,比如选择字体颜色、背景颜色、元素颜色等操作时,
// // 对应的菜单、对话框等地方会显示该文本作为操作提示,引导用户进行颜色相关的设置。
// "Color": "\u989c\u8272",
// // "Right to left" 翻译为 "从右到左",常用于文本排版、界面布局等涉及方向设置的功能场景,
// // 例如一些支持从右向左书写语言(如阿拉伯语等)的排版,或者切换元素排列方向等操作时会显示该文本提示。
// "Right to left": "\u4ece\u53f3\u5230\u5de6",
// // "Left to right" 翻译为 "从左到右",与上面对应,是常规的文本、元素排列方向设置相关功能显示的文本,
// // 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
// "Left to right": "\u4ece\u5de6\u5230\u53f3",
// // "Emoticons" 翻译为 "表情符号",在支持插入表情符号来丰富文档内容的编辑器中,
// // 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示,引导用户选择表情符号。
// "Emoticons": "\u8868\u60c5",
// // "Robots" 翻译为 "机器人",具体含义要根据具体应用场景判断,可能涉及到网页爬虫相关设置(搜索引擎机器人等)、
// // 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
// "Robots": "\u673a\u5668\u4eba",
// // "Document properties" 翻译为 "文档属性",常用于查看或编辑文档的各种元数据信息,如文档标题、作者、创建时间、
// // 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看或修改这些属性。
// "Document properties": "\u6587\u6863\u5c5e\u6027",
// // "Title" 翻译为 "标题",用途广泛,可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本,
// // 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
// "Title": "\u6807\u9898",
// // "Keywords" 翻译为 "关键词",在文档属性设置、搜索引擎优化等场景下,用于填写、编辑能代表文档核心内容的关键词语,
// // 相关功能区域(如文档元数据编辑框等)会显示该文本作为操作提示,引导用户输入关键词。
// "Keywords": "\u5173\u952e\u8bcd",
// // "Encoding" 翻译为 "编码",常用于设置文档、网页等的字符编码格式(如 UTF-8、GBK 等)相关功能,
// // 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
// "Encoding": "\u7f16\u7801",
// // "Description" 翻译为 "描述",常用来表示对文档、网页等内容的简短说明文字,
// // 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
// "Description": "\u63cf\u8ff0",
// // "Author" 翻译为 "作者",用于在文档属性等相关功能中填写、显示文档创作者的信息,
// // 对应功能区域(如文档作者编辑框等)会显示该文本作为操作提示,引导用户输入或查看作者名称。
// "Author": "\u4f5c\u8005",
// // "Fullscreen" 翻译为 "全屏",在应用程序、网页等提供全屏显示功能的地方,
// // 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示,告知用户当前进入了全屏状态或可进入全屏状态。
// "Fullscreen": "\u5168\u5c4f",
// // "Horizontal line" 翻译为 "水平线",在文档编辑、页面设计等场景下,用于插入、编辑水平分割线相关操作时,
// // 对应的菜单、按钮等地方会显示该文本作为操作提示,引导用户进行插入或修改水平线的操作。
// "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// // "Horizontal space" 翻译为 "水平间距",常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能,
// // 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
// "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// // "Insert/edit image" 翻译为 "插入/编辑图片",在文档编辑、网页内容编辑等场景下,
// // 当用户想要添加一张新图片或者对已有的图片进行修改编辑(如调整大小、更换图片等操作)时,
// // 对应的操作按钮、菜单选项等地方会显示该文本作为提示,引导用户进行相应操作。
// "Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// // "General" 翻译为 "常规",常用于表示一组设置选项中的通用、基础设置部分,
// // 例如在软件的设置对话框中,会将一些常见的、基本的设置分类到 "常规" 选项卡下,对应的选项卡标题会显示该文本作为提示。
// "General": "\u666e\u901a",
// // "Advanced" 翻译为 "高级",与 "常规" 相对,通常用于存放更复杂、专业、进阶的设置选项,
// // 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置,在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
// "Advanced": "\u9ad8\u7ea7",
// // "Source" 翻译为 "来源",在很多场景下有不同含义,比如图片、视频等媒体资源的原始地址(来源链接),
// // 或者代码片段的引用来源等相关功能显示该文本作为提示信息,引导用户填写或查看相应的来源信息。
// "Source": "\u5730\u5740",
// // "Border" 翻译为 "边框",常用于设置页面元素(如图片、表格、文本框等)的边框样式、宽度、颜色等相关功能,
// // 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示,引导用户进行边框相关的设置。
// "Border": "\u8fb9\u6846",
// // "Constrain proportions" 翻译为 "保持比例",在调整图片、图形等元素大小时,
// // 如果希望元素的宽高比例保持不变(避免拉伸变形),相关操作按钮、设置选项等地方会显示该文本作为提示,
// // 告知用户当前设置可保持元素原有比例进行缩放操作。
// "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// // "Vertical space" 翻译为 "垂直间距",类似于 "Horizontal space",不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能,
// // 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
// "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// // "Image description" 翻译为 "图片描述",常用于为图片添加说明性文字,
// // 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下,会有填写图片描述的功能,对应功能区域会显示该文本提示。
// "Image description": "\u56fe\u7247\u63cf\u8ff0",
// // "Style" 翻译为 "样式",在文档编辑、网页开发等场景下应用广泛,用于设置文本、元素的各种外观样式(如字体样式、颜色样式、布局样式等),
// // 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示,引导用户进行样式相关的选择和设置。
// "Style": "\u6837\u5f0f",
// // "Dimensions" 翻译为 "尺寸",常用于查看或修改图片、表格、页面区域等元素的大小(宽度和高度)相关功能,
// // 例如在调整元素大小时,对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示,引导用户操作。
// "Dimensions": "\u5927\u5c0f",
// // "Insert image" 翻译为 "插入图片",是一个比较简洁明确的提示文本,用于在文档、网页等内容中添加新图片时,
// // 对应的操作按钮、菜单选项等地方会显示该文本,引导用户进行插入图片的操作。
// "Insert image": "\u63d2\u5165\u56fe\u7247",
// // "Image" 翻译为 "图片",是一个通用表示图片相关功能的文本,比如在图片管理、选择图片资源等场景下,
// // 对应的菜单、列表等地方会显示该文本作为提示,让用户明确当前操作涉及的对象是图片。
// "Image": "\u56fe\u7247",
// // "Zoom in" 翻译为 "放大",常用于图片查看、文档页面查看等场景下,当用户想要将显示内容放大以便查看细节时,
// // 对应的操作按钮(如放大镜加 + 图标按钮等)会显示该文本作为操作提示,引导用户进行放大操作。
// "Zoom in": "\u653e\u5927",
// // "Contrast" 翻译为 "对比度",在图片编辑、显示设置等场景下,用于调整图片或屏幕显示内容的对比度相关操作时,
// // 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行对比度的调整。
// "Contrast": "\u5bf9\u6bd4\u5ea6",
// // "Back" 翻译为 "后退",常用于页面导航、操作历史回退等场景,比如在浏览器中返回上一页、
// // 软件中撤销上一步操作回到之前的状态等操作时,对应的按钮等地方会显示该文本作为操作提示。
// "Back": "\u540e\u9000",
// // "Gamma" 翻译为 "伽马值",在涉及图像、显示屏等颜色校正、色彩调整相关功能中,伽马值是一个重要参数,
// // 当用户调整伽马值来改变显示效果时,对应的设置区域会显示该文本作为操作提示,引导用户进行操作。
// "Gamma": "\u4f3d\u9a6c\u503c",
// // "Flip horizontally" 翻译为 "水平翻转",在图片编辑、图形处理等场景下,当用户想要将元素在水平方向上进行镜像翻转时,
// // 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行水平翻转操作。
// "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// // "Resize" 翻译为 "调整大小",常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本,
// // 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示,引导用户进行大小调整操作。
// "Resize": "\u8c03\u6574\u5927\u5c0f",
// // "Sharpen" 翻译为 "锐化",在图片编辑中,用于提高图片清晰度、使图像边缘更锐利等相关操作时,
// // 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示,引导用户进行锐化操作。
// "Sharpen": "\u9510\u5316",
// // "Zoom out" 翻译为 "缩小",与 "Zoom in" 相对,常用于图片查看、文档页面查看等场景下,当用户想要将显示内容缩小以便查看整体情况时,
// // 对应的操作按钮(如放大镜加 - 图标按钮等)会显示该文本作为操作提示,引导用户进行缩小操作。
// "Zoom out": "\u7f29\u5c0f",
// // "Image options" 翻译为 "图片选项",在图片相关功能中,用于展开更多关于图片的设置(如样式、格式、链接等各种设置)时,
// // 对应的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看和调整图片的各项具体设置。
// "Image options": "\u56fe\u7247\u9009\u9879",
// // "Apply" 翻译为 "应用",常用于当用户在设置界面调整好各项参数、选项后,点击该按钮来使设置生效,
// // 对应的操作按钮上会显示该文本作为提示,告知用户点击此按钮可将当前设置应用到相应对象上。
// "Apply": "\u5e94\u7528",
// // "Brightness" 翻译为 "亮度",在图片编辑、显示屏亮度调节等场景下,用于调整图片或屏幕显示内容的明亮程度相关操作时,
// // 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行亮度的调整。
// "Brightness": "\u4eae\u5ea6",
// // "Rotate clockwise" 翻译为 "顺时针旋转",在图片、图形等元素进行旋转操作时,用于提示用户按照顺时针方向旋转元素,
// // 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行顺时针旋转操作。// "Color" 翻译为 "颜色",是一个比较通用的表示与颜色相关功能的文本,比如选择字体颜色、背景颜色、元素颜色等操作时,
// // 对应的菜单、对话框等地方会显示该文本作为操作提示,引导用户进行颜色相关的设置。
// "Color": "\u989c\u8272",
// // "Right to left" 翻译为 "从右到左",常用于文本排版、界面布局等涉及方向设置的功能场景,
// // 例如一些支持从右向左书写语言(如阿拉伯语等)的排版,或者切换元素排列方向等操作时会显示该文本提示。
// "Right to left": "\u4ece\u53f3\u5230\u5de6",
// // "Left to right" 翻译为 "从左到右",与上面对应,是常规的文本、元素排列方向设置相关功能显示的文本,
// // 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
// "Left to right": "\u4ece\u5de6\u5230\u53f3",
// // "Emoticons" 翻译为 "表情符号",在支持插入表情符号来丰富文档内容的编辑器中,
// // 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示,引导用户选择表情符号。
// "Emoticons": "\u8868\u60c5",
// // "Robots" 翻译为 "机器人",具体含义要根据具体应用场景判断,可能涉及到网页爬虫相关设置(搜索引擎机器人等)、
// // 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
// "Robots": "\u673a\u5668\u4eba",
// // "Document properties" 翻译为 "文档属性",常用于查看或编辑文档的各种元数据信息,如文档标题、作者、创建时间、
// // 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看或修改这些属性。
// "Document properties": "\u6587\u6863\u5c5e\u6027",
// // "Title" 翻译为 "标题",用途广泛,可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本,
// // 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
// "Title": "\u6807\u9898",
// // "Keywords" 翻译为 "关键词",在文档属性设置、搜索引擎优化等场景下,用于填写、编辑能代表文档核心内容的关键词语,
// // 相关功能区域(如文档元数据编辑框等)会显示该文本作为操作提示,引导用户输入关键词。
// "Keywords": "\u5173\u952e\u8bcd",
// // "Encoding" 翻译为 "编码",常用于设置文档、网页等的字符编码格式(如 UTF-8、GBK 等)相关功能,
// // 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
// "Encoding": "\u7f16\u7801",
// // "Description" 翻译为 "描述",常用来表示对文档、网页等内容的简短说明文字,
// // 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
// "Description": "\u63cf\u8ff0",
// // "Author" 翻译为 "作者",用于在文档属性等相关功能中填写、显示文档创作者的信息,
// // 对应功能区域(如文档作者编辑框等)会显示该文本作为操作提示,引导用户输入或查看作者名称。
// "Author": "\u4f5c\u8005",
// // "Fullscreen" 翻译为 "全屏",在应用程序、网页等提供全屏显示功能的地方,
// // 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示,告知用户当前进入了全屏状态或可进入全屏状态。
// "Fullscreen": "\u5168\u5c4f",
// // "Horizontal line" 翻译为 "水平线",在文档编辑、页面设计等场景下,用于插入、编辑水平分割线相关操作时,
// // 对应的菜单、按钮等地方会显示该文本作为操作提示,引导用户进行插入或修改水平线的操作。
// "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// // "Horizontal space" 翻译为 "水平间距",常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能,
// // 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
// "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// // "Insert/edit image" 翻译为 "插入/编辑图片",在文档编辑、网页内容编辑等场景下,
// // 当用户想要添加一张新图片或者对已有的图片进行修改编辑(如调整大小、更换图片等操作)时,
// // 对应的操作按钮、菜单选项等地方会显示该文本作为提示,引导用户进行相应操作。
// "Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// // "General" 翻译为 "常规",常用于表示一组设置选项中的通用、基础设置部分,
// // 例如在软件的设置对话框中,会将一些常见的、基本的设置分类到 "常规" 选项卡下,对应的选项卡标题会显示该文本作为提示。
// "General": "\u666e\u901a",
// // "Advanced" 翻译为 "高级",与 "常规" 相对,通常用于存放更复杂、专业、进阶的设置选项,
// // 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置,在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
// "Advanced": "\u9ad8\u7ea7",
// // "Source" 翻译为 "来源",在很多场景下有不同含义,比如图片、视频等媒体资源的原始地址(来源链接),
// // 或者代码片段的引用来源等相关功能显示该文本作为提示信息,引导用户填写或查看相应的来源信息。
// "Source": "\u5730\u5740",
// // "Border" 翻译为 "边框",常用于设置页面元素(如图片、表格、文本框等)的边框样式、宽度、颜色等相关功能,
// // 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示,引导用户进行边框相关的设置。
// "Border": "\u8fb9\u6846",
// // "Constrain proportions" 翻译为 "保持比例",在调整图片、图形等元素大小时,
// // 如果希望元素的宽高比例保持不变(避免拉伸变形),相关操作按钮、设置选项等地方会显示该文本作为提示,
// // 告知用户当前设置可保持元素原有比例进行缩放操作。
// "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// // "Vertical space" 翻译为 "垂直间距",类似于 "Horizontal space",不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能,
// // 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
// "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// // "Image description" 翻译为 "图片描述",常用于为图片添加说明性文字,
// // 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下,会有填写图片描述的功能,对应功能区域会显示该文本提示。
// "Image description": "\u56fe\u7247\u63cf\u8ff0",
// // "Style" 翻译为 "样式",在文档编辑、网页开发等场景下应用广泛,用于设置文本、元素的各种外观样式(如字体样式、颜色样式、布局样式等),
// // 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示,引导用户进行样式相关的选择和设置。
// "Style": "\u6837\u5f0f",
// // "Dimensions" 翻译为 "尺寸",常用于查看或修改图片、表格、页面区域等元素的大小(宽度和高度)相关功能,
// // 例如在调整元素大小时,对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示,引导用户操作。
// "Dimensions": "\u5927\u5c0f",
// // "Insert image" 翻译为 "插入图片",是一个比较简洁明确的提示文本,用于在文档、网页等内容中添加新图片时,
// // 对应的操作按钮、菜单选项等地方会显示该文本,引导用户进行插入图片的操作。
// "Insert image": "\u63d2\u5165\u56fe\u7247",
// // "Image" 翻译为 "图片",是一个通用表示图片相关功能的文本,比如在图片管理、选择图片资源等场景下,
// // 对应的菜单、列表等地方会显示该文本作为提示,让用户明确当前操作涉及的对象是图片。
// "Image": "\u56fe\u7247",
// // "Zoom in" 翻译为 "放大",常用于图片查看、文档页面查看等场景下,当用户想要将显示内容放大以便查看细节时,
// // 对应的操作按钮(如放大镜加 + 图标按钮等)会显示该文本作为操作提示,引导用户进行放大操作。
// "Zoom in": "\u653e\u5927",
// // "Contrast" 翻译为 "对比度",在图片编辑、显示设置等场景下,用于调整图片或屏幕显示内容的对比度相关操作时,
// // 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行对比度的调整。
// "Contrast": "\u5bf9\u6bd4\u5ea6",
// // "Back" 翻译为 "后退",常用于页面导航、操作历史回退等场景,比如在浏览器中返回上一页、
// // 软件中撤销上一步操作回到之前的状态等操作时,对应的按钮等地方会显示该文本作为操作提示。
// "Back": "\u540e\u9000",
// // "Gamma" 翻译为 "伽马值",在涉及图像、显示屏等颜色校正、色彩调整相关功能中,伽马值是一个重要参数,
// // 当用户调整伽马值来改变显示效果时,对应的设置区域会显示该文本作为操作提示,引导用户进行操作。
// "Gamma": "\u4f3d\u9a6c\u503c",
// // "Flip horizontally" 翻译为 "水平翻转",在图片编辑、图形处理等场景下,当用户想要将元素在水平方向上进行镜像翻转时,
// // 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行水平翻转操作。
// "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// // "Resize" 翻译为 "调整大小",常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本,
// // 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示,引导用户进行大小调整操作。
// "Resize": "\u8c03\u6574\u5927\u5c0f",
// // "Sharpen" 翻译为 "锐化",在图片编辑中,用于提高图片清晰度、使图像边缘更锐利等相关操作时,
// // 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示,引导用户进行锐化操作。
// "Sharpen": "\u9510\u5316",
// // "Zoom out" 翻译为 "缩小",与 "Zoom in" 相对,常用于图片查看、文档页面查看等场景下,当用户想要将显示内容缩小以便查看整体情况时,
// // 对应的操作按钮(如放大镜加 - 图标按钮等)会显示该文本作为操作提示,引导用户进行缩小操作。
// "Zoom out": "\u7f29\u5c0f",
// // "Image options" 翻译为 "图片选项",在图片相关功能中,用于展开更多关于图片的设置(如样式、格式、链接等各种设置)时,
// // 对应的菜单、对话框等地方会显示该文本作为操作入口提示,引导用户查看和调整图片的各项具体设置。
// "Image options": "\u56fe\u7247\u9009\u9879",
// // "Apply" 翻译为 "应用",常用于当用户在设置界面调整好各项参数、选项后,点击该按钮来使设置生效,
// // 对应的操作按钮上会显示该文本作为提示,告知用户点击此按钮可将当前设置应用到相应对象上。
// "Apply": "\u5e94\u7528",
// // "Brightness" 翻译为 "亮度",在图片编辑、显示屏亮度调节等场景下,用于调整图片或屏幕显示内容的明亮程度相关操作时,
// // 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示,引导用户进行亮度的调整。
// "Brightness": "\u4eae\u5ea6",
// // "Rotate clockwise" 翻译为 "顺时针旋转",在图片、图形等元素进行旋转操作时,用于提示用户按照顺时针方向旋转元素,
// // 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示,引导用户进行顺时针旋转操作。//
"Print": "\u6253\u5370",
"Save": "\u4fdd\u5b58",
"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
@ -845,4 +227,4 @@ tinymce.addI18n('zh_CN',{
"View": "\u89c6\u56fe",
"Table": "\u8868\u683c",
"Format": "\u683c\u5f0f"
});
});

@ -1,194 +1,121 @@
<template>
<!-- 创建一个 div 元素作为整个组件内容的包裹容器这是 HTML 中常用的用于组织和划分页面结构的方式 -->
<div>
<!-- el-upload 组件用于实现文件上传功能它是基于 Element UI 库提供的组件方便在 Vue 项目中快速集成文件上传交互功能 -->
<el-upload
<!-- 通过三元表达式根据 useOss 的值来动态决定上传文件的 action 属性值即上传文件的请求地址 -->
<!-- 如果 useOss true就使用 ossUploadUrl 作为上传地址这通常意味着要将文件上传到阿里云 OSSObject Storage Service对象存储服务服务器上 -->
<!-- 如果 useOss false则使用 minioUploadUrl 作为上传地址MinIO 也是一种常用的对象存储服务这里可以根据实际需求切换使用不同的存储服务来上传文件 -->
:action="useOss?ossUploadUrl:minioUploadUrl"
<!-- 同样基于 useOss 的值来决定是否向上传请求中传递额外的数据以对象形式 -->
<!-- useOss true dataObj 作为额外的数据传递给上传请求这些数据一般包含了与文件上传到 OSS 相关的配置信息例如上传策略签名等用于服务器验证上传的合法性 -->
<!-- useOss false 不传递额外的数据即设置为 null -->
:data="useOss?dataObj:null"
<!-- 设置文件列表在页面上的展示类型为 "picture-card"这种类型的展示效果通常是以卡片形式呈现已上传的文件在这里主要是图片文件 -->
<!-- 每个文件会以一个独立的卡片样式展示方便用户直观地查看已上传的文件并且可以进行相应的操作如删除预览等 -->
list-type="picture-card"
<!-- 通过绑定计算属性 fileList将已上传文件的相关信息以特定格式传递给 el-upload 组件以便组件能够正确展示已上传的文件列表 -->
<!-- 计算属性 fileList 会根据组件接收到的相关数据进行处理转化为 el-upload 组件可识别的格式后面会在计算属性部分详细说明 -->
:file-list="fileList"
<!-- 绑定一个名为 before-upload 的回调函数该函数会在每个文件上传之前被触发 -->
<!-- 可以在这个函数中进行一些前置的验证准备工作例如当使用阿里云 OSS 上传时需要在这里获取并设置相关的上传策略等配置信息决定文件是否可以进行上传 -->
:before-upload="beforeUpload"
<!-- 绑定一个名为 on-remove 的回调函数当用户在已展示的文件列表中删除某个文件时这个函数会被触发 -->
<!-- 用于处理文件删除后的相关逻辑比如通知父组件文件列表发生了变化让父组件可以相应地更新页面上显示的文件信息等 -->
:on-remove="handleRemove"
<!-- 绑定一个名为 on-success 的回调函数在文件上传成功后该函数会被触发 -->
<!-- 可以在这个函数里进行后续的操作例如更新文件列表数据通知父组件上传成功的消息以及根据上传结果进行一些页面展示相关的调整等 -->
:on-success="handleUploadSuccess"
<!-- 绑定一个名为 on-preview 的回调函数当用户点击已上传的文件进行预览操作时这个函数会被触发 -->
<!-- 主要用于实现文件的预览功能比如打开一个对话框展示图片的大图等操作 -->
:on-preview="handlePreview"
<!-- 通过绑定 maxCount 属性来设置允许上传的文件最大数量这个属性的值来源于组件通过 props 接收的父组件传递过来的 maxCount -->
<!-- 限制用户最多只能上传指定数量的文件若用户尝试上传超过此数量的文件会触发相应的超出限制处理逻辑 -->
:limit="maxCount"
<!-- 绑定一个名为 on-exceed 的回调函数当用户上传的文件数量超过了通过 :limit 设置的最大数量时该函数会被触发 -->
<!-- 用于给出相应的提示信息告知用户上传文件数量超出了限制让用户知晓当前的操作不符合规定 -->
:on-exceed="handleExceed"
>
<!-- el-upload 组件内部添加一个图标元素使用 el-icon-plus 这个类来展示一个加号图标 -->
<!-- 通常这个加号图标在界面上用于提示用户可以点击此处进行文件上传操作是一种常见的交互设计方式 -->
<i class="el-icon-plus"></i>
</el-upload>
<!-- el-dialog 组件用于创建一个对话框用于展示图片的预览功能它也是 Element UI 库中的组件方便实现弹出式的展示界面 -->
<el-dialog :visible.sync="dialogVisible">
<!-- 在对话框内部放置一个 img 元素用于展示要预览的图片 -->
<!-- 通过绑定 src 属性为 dialogImageUrl根据这个属性的值来确定要展示的图片的路径从而正确显示相应的图片内容 -->
<!-- 设置图片的宽度为 100%让图片能够自适应对话框的宽度完整地展示出来 -->
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
<template> 
<div>
<el-upload
:action="useOss?ossUploadUrl:minioUploadUrl"
:data="useOss?dataObj:null"
list-type="picture-card"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview"
:limit="maxCount"
:on-exceed="handleExceed"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
// '@/api/oss' policy OSS Policy -->
// 访 OSS
import {policy} from '@/api/oss';
import {policy} from '@/api/oss'
// Vue Vue 使使
export default {
// Vue 'multiUpload'便
name: 'multiUpload',
// props -->
props: {
// value -->
// 便 -->
value: Array,
// maxCount -->
// Number 5 5 -->
maxCount: {
type: Number,
default: 5
}
export default {
name: 'multiUpload',
props: {
//
value: Array,
//
maxCount:{
type:Number,
default:5
}
},
data() {
return {
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
data() {
return {
// dataObj 使 OSS -->
// policy signature ossaccessKeyId 访 ID OSS -->
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
// dialogVisible false -->
// true使 -->
dialogVisible: false,
// dialogImageUrl null -->
// 便 img -->
dialogImageUrl: null,
// useOss 使 OSS true MinIO false -->
// -->
useOss: false,
// ossUploadUrl OSS -->
// OSS useOss true 使 OSS -->
ossUploadUrl: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
// minioUploadUrl MinIO -->
// useOss false 使 MinIO MinIO -->
minioUploadUrl: 'http://localhost:8080/minio/upload',
};
},
computed: {
// fileList value -->
// value url fileList fileList -->
// fileList el-upload -->
fileList() {
let fileList = [];
for (let i = 0; i < this.value.length; i++) {
fileList.push({url: this.value[i]});
}
return fileList;
}
},
methods: {
// emitInput 'input' -->
// 使 -->
emitInput(fileList) {
let value = [];
for (let i = 0; i < fileList.length; i++) {
value.push(fileList[i].url);
}
this.$emit('input', value)
},
// handleRemove -->
// el-upload emitInput fileList -->
// -->
handleRemove(file, fileList) {
this.emitInput(fileList);
},
// handlePreview -->
// dialogVisible true使 -->
// file.url dialogImageUrl 便 img -->
handlePreview(file) {
this.dialogVisible = true;
this.dialogImageUrl = file.url;
},
// beforeUpload -->
// 使 OSS useOss false true -->
// 使 OSSuseOss true policy -->
// dataObj resolve(true) -->
// catch reject(false) -->
beforeUpload(file) {
let _self = this;
if (!this.useOss) {
// 使 oss
return true;
}
return new Promise((resolve, reject) => {
policy().then(response => {
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
_self.dataObj.key = response.data.dir + '/${filename}';
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
// handleUploadSuccess -->
// 使 OSS useOss -->
// 使 OSS dataObj.hostdataObj.dirfile.name访 -->
// 使 OSS使res.data.url -->
// 14342 fileList -->
// emitInput 便 -->
handleUploadSuccess(res, file) {
let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name;
if (!this.useOss) {
// 使 oss
url = res.data.url;
}
this.fileList.push({name: file.name, url: url});
this.emitInput(this.fileList);
},
// handleExceed -->
// maxCount -->
// $message 使 this.maxCount -->
// 1000 1 -->
handleExceed(files, fileList) {
this.$message({
message: '最多只能上传' + this.maxCount + '张图片',
type: 'warning',
duration: 1000
});
},
dialogVisible: false,
dialogImageUrl:null,
useOss:false, //使oss->true;使MinIO->false
ossUploadUrl:'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
minioUploadUrl:'http://localhost:8080/minio/upload',
};
},
computed: {
fileList() {
let fileList=[];
for(let i=0;i<this.value.length;i++){
fileList.push({url:this.value[i]});
}
return fileList;
}
},
methods: {
emitInput(fileList) {
let value=[];
for(let i=0;i<fileList.length;i++){
value.push(fileList[i].url);
}
this.$emit('input', value)
},
handleRemove(file, fileList) {
this.emitInput(fileList);
},
handlePreview(file) {
this.dialogVisible = true;
this.dialogImageUrl=file.url;
},
beforeUpload(file) {
let _self = this;
if(!this.useOss){
//使oss
return true;
}
return new Promise((resolve, reject) => {
policy().then(response => {
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
_self.dataObj.key = response.data.dir + '/${filename}';
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
handleUploadSuccess(res, file) {
let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name;
if(!this.useOss){
//使oss
url = res.data.url;
}
this.fileList.push({name: file.name,url:url});
this.emitInput(this.fileList);
},
handleExceed(files, fileList) {
this.$message({
message: '最多只能上传'+this.maxCount+'张图片',
type: 'warning',
duration:1000
});
},
}
}
</script>
<style>
</style>

@ -1,52 +1,30 @@
// 导入Vue框架
import Vue from 'vue'
// 导入normalize.css这是一种现代的CSS重置替代方案
import 'normalize.css/normalize.css'
import 'normalize.css/normalize.css'// A modern alternative to CSS resets
// 导入Element UI库
import ElementUI from 'element - ui'
// 导入Element UI的样式文件这里使用的是主题为chalk的样式
import 'element - ui/lib/theme - chalk/index.css'
// 导入Element UI的中文语言包用于国际化i18n
import locale from 'element - ui/lib/locale/lang/zh - CN'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import VCharts from 'v-charts'
// 导入V - Charts库用于图表绘制
import VCharts from 'v - charts'
import '@/styles/index.scss' // global css
// 导入项目中自定义的全局样式文件
import '@/styles/index.scss'
// 导入应用的根组件App
import App from './App'
// 导入路由配置文件
import router from './router'
// 导入Vuex的store配置文件
import store from './store'
// 导入项目中的图标相关配置(可能是注册全局图标组件等操作)
import '@/icons'
// 导入权限控制相关的配置(可能是实现路由权限、组件权限等功能)
import '@/permission'
import '@/icons' // icon
import '@/permission' // permission control
// 使用Element UI并传入中文语言包配置
Vue.use(ElementUI, { locale })
// 使用V - Charts库
Vue.use(VCharts)
// 设置在生产环境下不显示Vue的提示信息
Vue.config.productionTip = false
// 创建一个Vue实例
new Vue({
// 挂载点选择id为app的DOM元素
el: '#app',
// 使用导入的路由配置
router,
// 使用导入的store配置
store,
// 使用App组件作为模板
template: '<App/>',
// 注册App组件
components: { App }
})

@ -1,79 +1,46 @@
// 导入路由配置文件,这里的路由配置可能定义了应用中的各个页面路径和对应的组件等信息
import router from './router'
// 导入Vuex的store配置文件store通常用于管理应用中的状态数据
import store from './store'
// 导入NProgress库用于在页面跳转时显示进度条
import NProgress from 'nprogress'
// 导入NProgress的样式文件这样才能正确显示进度条样式
import 'nprogress/nprogress.css'
// 从element - ui中导入Message组件用于显示提示信息
import { Message } from 'element - ui'
// 从 @/utils/auth文件中导入getToken函数该函数可能用于获取用户的登录令牌token用于验证用户是否已登录
import { getToken } from '@/utils/auth'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 验权
// 定义一个数组,其中包含不需要进行重定向的路径(白名单),这里只有'/login'路径在白名单中
const whiteList = ['/login']
// 注册一个全局的路由前置守卫beforeEach在每次路由跳转前都会执行这个函数
const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
// 启动NProgress进度条表示路由跳转开始
NProgress.start()
// 判断用户是否有登录令牌token
if (getToken()) {
// 如果用户已登录且要访问的路径是'/login'(登录页)
if (to.path === '/login') {
// 则重定向到应用的首页('/'
next({ path: '/' })
// 手动结束NProgress进度条因为如果当前页是首页不会触发afterEach钩子函数
NProgress.done()
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
} else {
// 如果用户已登录且要访问的不是登录页
// 检查store中是否已经获取到用户角色信息如果没有获取到说明可能是首次登录或者角色信息丢失
if (store.getters.roles.length === 0) {
// 从store中分发dispatch一个名为'GetInfo'的action这个action可能用于从后端获取用户信息
store.dispatch('GetInfo').then(res => {
// 获取从后端返回的用户信息中的菜单menus数据和用户名username数据
let menus = res.data.menus;
let username = res.data.username;
// 根据获取到的菜单数据和用户名在store中分发dispatch一个名为'GenerateRoutes'的action来生成用户可访问的路由表
store.dispatch('GenerateRoutes', { menus, username }).then(() => {
// 将生成的可访问路由表动态添加到路由实例中
router.addRoutes(store.getters.addRoutes);
// 使用传入的to对象要访问的路由进行跳转并设置replace为true表示替换当前历史记录而不是添加新记录
next({...to, replace: true })
store.dispatch('GetInfo').then(res => { // 拉取用户信息
let menus=res.data.menus;
let username=res.data.username;
store.dispatch('GenerateRoutes', { menus,username }).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
next({ ...to, replace: true })
})
}).catch((err) => {
// 如果在获取用户信息过程中出错
// 先从store中分发dispatch一个名为'FedLogOut'的action这个action可能用于执行用户登出操作
store.dispatch('FedLogOut').then(() => {
// 显示错误提示信息,提示用户验证失败,需要重新登录
Message.error(err || 'Verification failed, please login again')
// 重定向到应用的首页('/'
next({ path: '/' })
})
})
} else {
// 如果store中已经有用户角色信息直接放行允许用户访问目标路由
next()
}
}
} else {
// 如果用户没有登录令牌token
// 检查要访问的路径是否在白名单中
if (whiteList.indexOf(to.path)!== -1) {
// 如果在白名单中,直接放行,允许用户访问目标路由
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
// 如果不在白名单中,重定向到登录页('/login'
next('/login')
// 手动结束NProgress进度条
NProgress.done()
}
}
})
// 注册一个全局的路由后置守卫afterEach在每次路由跳转完成后都会执行这个函数
router.afterEach(() => {
// 结束NProgress进度条表示路由跳转结束
NProgress.done()
NProgress.done() // 结束Progress
})

@ -1,113 +1,71 @@
// 导入Vue构造函数Vue是Vue.js框架的核心用于创建Vue实例以及进行各种组件化开发相关操作
import Vue from 'vue'
// 导入Vue Router插件Vue Router用于在Vue.js应用中实现路由功能管理不同页面路由组件之间的切换和导航
import Router from 'vue-router'
// 使用Vue.use方法来安装Vue Router插件使其能够在Vue应用中被使用这一步是必要的初始化操作
Vue.use(Router)
/* Layout */
// 从指定的路径 '../views/layout/Layout' 导入一个名为Layout的组件通常这个组件可能是整个应用的布局框架组件包含侧边栏、顶部导航栏等通用布局结构其他页面组件会在这个布局框架内进行展示
import Layout from '../views/layout/Layout'
/**
* 以下是一段注释用于对路由配置对象中的一些属性进行说明方便后续理解和维护路由配置
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* 解释如果路由配置中的 `hidden` 属性设置为 `true`则对应的路由对应的菜单项将不会显示在侧边栏中默认值为 `false`即默认会显示在侧边栏
*
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
* if not set alwaysShow, only more than one route under the children
* it will becomes nested mode, otherwise not show the root menu
* 解释如果 `alwaysShow` 属性设置为 `true`无论该路由下的子路由数量是多少都会始终显示根菜单如果不设置这个属性只有当子路由数量大于1时才会呈现嵌套菜单模式显示根菜单以及子菜单否则不会显示根菜单
*
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
* 解释如果 `redirect` 属性设置为 `noredirect`在面包屑导航中不会进行重定向操作通常面包屑导航会根据路由跳转情况进行相应的更新显示这里可用于特殊情况的控制
*
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* 解释`name` 属性用于给路由命名这个名称会被 `<keep-alive>` 组件使用必须设置在进行组件缓存等相关功能时需要通过这个名称来识别路由对应的组件
*
* meta : {
title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar,
}
* 解释`meta` 是一个自定义的元数据对象可以在路由配置中添加额外的信息其中 `title` 属性用于设置在子菜单和面包屑导航中显示的名称建议设置方便用户直观了解当前页面信息`icon` 属性用于指定在侧边栏中显示的图标方便通过图标区分不同的菜单功能
title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar,
}
**/
// 定义一个名为constantRouterMap的常量数组用于存放基础的、固定不变的路由配置信息这些路由通常是应用中始终存在且不需要动态加载的部分
export const constantRouterMap = [
// 定义一个登录页面的路由配置对象,路径为 '/login',对应的组件通过动态导入的方式加载(使用 () => import('@/views/login/index') 这种语法,会在实际访问该路由时才加载对应的组件代码,提高初始加载性能),并且设置 `hidden` 属性为 `true`,意味着这个登录页面不会显示在侧边栏中
{path: '/login', component: () => import('@/views/login/index'), hidden: true},
// 定义一个404页面的路由配置对象路径为 '/404',同样通过动态导入加载对应的组件,也设置 `hidden` 属性为 `true`,该页面不会在侧边栏展示,一般用于处理未匹配到的路由情况
{path: '/404', component: () => import('@/views/404'), hidden: true},
{
// 定义一个根路径(空字符串表示应用的根路径)的路由配置,它会作为应用的基础布局框架
path: '',
// 指定该根路径对应的组件为之前导入的Layout组件也就是整个页面的布局框架会围绕这个组件展开
component: Layout,
// 设置重定向路径为 '/home',意味着当访问根路径时,会自动跳转到 '/home' 这个子路径对应的页面
redirect: '/home',
// 在路由的元数据meta中设置标题为 '首页',图标为 'home',这两个信息会分别用于侧边栏菜单的显示和面包屑导航等地方的展示
meta: {title: '首页', icon: 'home'},
// 定义该路由下的子路由数组,每个子路由对应一个具体的页面组件
children: [
{
// 子路由的路径为 'home',也就是在根路径下访问 'home' 会对应这个路由配置
path: 'home',
// 给这个路由命名为 'home',用于后续的路由导航、组件缓存等相关操作
name: 'home',
// 通过动态导入加载对应的组件,这里对应的是 '@/views/home/index' 这个页面组件,一般是应用的仪表盘页面之类的主页面
component: () => import('@/views/home/index'),
// 在子路由的元数据中设置标题为 '仪表盘',图标为 'dashboard',同样用于展示相关信息
meta: {title: '仪表盘', icon: 'dashboard'}
},
{
// 给这个路由命名为 'document',路径是一个外部链接 'https://www.macrozheng.com',可能用于跳转到外部学习教程网站
name: 'document',
path: 'https://www.macrozheng.com',
// 在元数据中设置标题为 '学习教程',图标为 'document',用于侧边栏等地方显示相关信息
meta: {title: '学习教程', icon: 'document'}
},
{
// 给这个路由命名为 'video',路径是另一个外部链接 'https://www.macrozheng.com/mall/catalog/mall_video.html',可能用于跳转到外部视频教程页面
name: 'video',
path: 'https://www.macrozheng.com/mall/catalog/mall_video.html',
// 在元数据中设置标题为 '视频教程',图标为 'video',用于展示相关信息
meta: {title: '视频教程', icon: 'video'}
},
children: [{
path: 'home',
name: 'home',
component: () => import('@/views/home/index'),
meta: {title: '仪表盘', icon: 'dashboard'}
},
{
name: 'document',
path: 'https://www.macrozheng.com',
meta: {title: '学习教程', icon: 'document'}
},
{
name: 'video',
path: 'https://www.macrozheng.com/mall/catalog/mall_video.html',
meta: {title: '视频教程', icon: 'video'}
},
]
}
]
// 定义一个名为asyncRouterMap的常量数组用于存放需要动态加载的路由配置信息通常这些路由对应的模块可能比较大或者是根据用户权限等情况动态决定是否加载的部分
export const asyncRouterMap = [
{
// 定义一个商品管理模块pms相关的路由配置路径为 '/pms'对应的组件是之前导入的Layout组件作为布局框架
path: '/pms',
component: Layout,
// 设置重定向路径为 '/pms/product',访问 '/pms' 时会自动跳转到商品列表页面相关的子路由
redirect: '/pms/product',
// 给这个路由命名为 'pms',方便后续操作识别
name: 'pms',
// 在路由的元数据中设置标题为 '商品',图标为 'product',用于侧边栏菜单等地方显示
meta: {title: '商品', icon: 'product'},
// 定义该路由下的子路由数组,包含商品管理相关的各个具体功能页面的路由配置
children: [
children: [{
path: 'product',
name: 'product',
component: () => import('@/views/pms/product/index'),
meta: {title: '商品列表', icon: 'product-list'}
},
{
// 商品列表页面的子路由,路径为 'product',命名为 'product',通过动态导入加载对应的组件,用于展示商品列表信息
path: 'product',
name: 'product',
component: () => import('@/views/pms/product/index'),
meta: {title: '商品列表', icon: 'product-list'}
},
{
// 添加商品页面的子路由,命名为 'addProduct',通过动态导入加载对应组件,用于添加商品的操作页面
path: 'addProduct',
name: 'addProduct',
component: () => import('@/views/pms/product/add'),
meta: {title: '添加商品', icon: 'product-add'}
},
{
// 修改商品页面的子路由,命名为 'updateProduct',通过动态导入加载对应组件,设置 `hidden` 属性为 `true`,意味着这个页面不会显示在侧边栏等常规菜单中,可能是通过其他方式(比如在商品列表页点击编辑按钮进入)访问
path: 'updateProduct',
name: 'updateProduct',
component: () => import('@/views/pms/product/update'),
@ -115,14 +73,12 @@ export const asyncRouterMap = [
hidden: true
},
{
// 商品分类页面的子路由,命名为 'productCate',通过动态导入加载对应组件,用于商品分类管理相关操作
path: 'productCate',
name: 'productCate',
component: () => import('@/views/pms/productCate/index'),
meta: {title: '商品分类', icon: 'product-cate'}
},
{
// 添加商品分类页面的子路由,命名为 'addProductCate',通过动态导入加载对应组件,设置 `hidden` 属性为 `true`,不会在常规菜单显示,可能是特定操作下进入的页面
path: 'addProductCate',
name: 'addProductCate',
component: () => import('@/views/pms/productCate/add'),
@ -130,7 +86,6 @@ export const asyncRouterMap = [
hidden: true
},
{
// 修改商品分类页面的子路由,命名为 'updateProductCate',通过动态导入加载对应组件,设置 `hidden` 属性为 `true`,同样不在常规菜单展示,用于特定的修改操作入口
path: 'updateProductCate',
name: 'updateProductCate',
component: () => import('@/views/pms/productCate/update'),
@ -138,14 +93,12 @@ export const asyncRouterMap = [
hidden: true
},
{
// 商品类型页面的子路由,命名为 'productAttr',通过动态导入加载对应组件,用于管理商品类型相关功能
path: 'productAttr',
name: 'productAttr',
component: () => import('@/views/pms/productAttr/index'),
meta: {title: '商品类型', icon: 'product-attr'}
},
{
// 商品属性列表页面的子路由,命名为 'productAttrList',通过动态导入加载对应组件,设置 `hidden` 属性为 `true`,不常规显示,可能是特定的查看属性列表的入口
path: 'productAttrList',
name: 'productAttrList',
component: () => import('@/views/pms/productAttr/productAttrList'),
@ -153,7 +106,6 @@ export const asyncRouterMap = [
hidden: true
},
{
// 添加商品属性页面的子路由,命名为 'addProductAttr',通过动态导入加载对应组件,设置 `hidden` 属性为 `true`,不是常规菜单可见的页面,用于添加商品属性操作入口
path: 'addProductAttr',
name: 'addProductAttr',
component: () => import('@/views/pms/productAttr/addProductAttr'),
@ -161,7 +113,6 @@ export const asyncRouterMap = [
hidden: true
},
{
// 修改商品属性页面的子路由,命名为 'updateProductAttr',通过动态导入加载对应组件,设置 `hidden` 属性为 `true`,不在常规菜单展示,用于修改商品属性的操作入口
path: 'updateProductAttr',
name: 'updateProductAttr',
component: () => import('@/views/pms/productAttr/updateProductAttr'),
@ -169,14 +120,12 @@ export const asyncRouterMap = [
hidden: true
},
{
// 品牌管理页面的子路由,命名为 'brand',通过动态导入加载对应组件,用于品牌管理相关操作,比如查看、编辑品牌等
path: 'brand',
name: 'brand',
component: () => import('@/views/pms/brand/index'),
meta: {title: '品牌管理', icon: 'product-brand'}
},
{
// 添加品牌页面的子路由,命名为 'addBrand',通过动态导入加载对应组件,设置 `hidden` 属性为 `true`,不是常规显示的页面,用于添加品牌的操作入口
path: 'addBrand',
name: 'addBrand',
component: () => import('@/views/pms/brand/add'),
@ -184,7 +133,6 @@ export const asyncRouterMap = [
hidden: true
},
{
// 编辑品牌页面的子路由,命名为 'updateBrand',通过动态导入加载对应组件,设置 `hidden` 属性为 `true`,不在常规菜单出现,用于编辑品牌的操作入口
path: 'updateBrand',
name: 'updateBrand',
component: () => import('@/views/pms/brand/update'),
@ -194,8 +142,6 @@ export const asyncRouterMap = [
]
},
{
// 订单管理模块oms相关的路由配置路径为 '/oms'对应Layout组件作为布局框架以下类似的结构都是对订单管理各功能页面路由的详细配置
path: '/oms',
component: Layout,
redirect: '/oms/order',

@ -1,84 +1,57 @@
// id "app"
#app {
// "main-container"
//
.main-container {
// 100%
min-height: 100%;
// margin-left 0.28
transition: margin-left.28s;
// 180px使
transition: margin-left .28s;
margin-left: 180px;
}
// "sidebar-container"
//
.sidebar-container {
// "horizontal-collapse-transition"
.horizontal-collapse-transition {
// 0 widthpadding-leftpadding-right使 ease-in-out 0
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
// 0.28
transition: width.28s;
// 180px"!important" 使
width: 180px!important;
// 100%使
transition: width .28s;
width: 180px !important;
height: 100%;
// fixed使
position: fixed;
// 0px访
font-size: 0px;
// 0
top: 0;
// 0 height: 100% 使
bottom: 0;
// 0使
left: 0;
// z-index 1001
z-index: 1001;
//
overflow: hidden;
// <a> 使 100%
a {
display: inline-block;
width: 100%;
}
// "svg-icon" SVG 16px
.svg-icon {
margin-right: 16px;
}
// "el-menu" 使 Element UI border: none 100%
.el-menu {
border: none;
width: 100%!important;
width: 100% !important;
}
}
// "hideSidebar"
.hideSidebar {
// "hideSidebar" "sidebar-container" 36px
.sidebar-container {
width: 36px!important;
width: 36px !important;
}
// "hideSidebar" "main-container" 36px使
.main-container {
margin-left: 36px;
}
// "submenu-title-noDropdown" 10px"!important" position: relative便
.submenu-title-noDropdown {
padding-left: 10px!important;
padding-left: 10px !important;
position: relative;
// "el-tooltip" 0 10px
.el-tooltip {
padding: 0 10px!important;
padding: 0 10px !important;
}
}
// "el-submenu"
.el-submenu {
// "el-submenu" "el-submenu__title" 10px
&>.el-submenu__title {
padding-left: 10px!important;
// "el-submenu__title" <span> 0 overflow: hidden visibility: hidden
padding-left: 10px !important;
&>span {
height: 0;
width: 0;
@ -86,7 +59,6 @@
visibility: hidden;
display: inline-block;
}
// "el-submenu__title" "el-submenu__icon-arrow" display: none
.el-submenu__icon-arrow {
display: none;
}
@ -94,34 +66,28 @@
}
}
// "sidebar-container" "nest-menu" "el-submenu" "el-submenu__title" "sidebar-container" "el-menu-item" 180px $subMenuBg $subMenuBg SCSS
.sidebar-container.nest-menu.el-submenu>.el-submenu__title,
.sidebar-container.el-submenu.el-menu-item {
min-width: 180px!important;
background-color: $subMenuBg!important;
// $menuHover SCSS
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
.sidebar-container .el-submenu .el-menu-item {
min-width: 180px !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $menuHover!important;
background-color: $menuHover !important;
}
}
// "el-menu--collapse" "el-menu" "el-submenu" 180px
.el-menu--collapse.el-menu.el-submenu {
min-width: 180px!important;
.el-menu--collapse .el-menu .el-submenu {
min-width: 180px !important;
}
// "mobile"
//
.mobile {
// "main-container" 0px使
.main-container {
margin-left: 0px;
}
// "sidebar-container" 50px 0.28 180px
.sidebar-container {
top: 50px;
transition: transform.28s;
width: 180px!important;
transition: transform .28s;
width: 180px !important;
}
// "mobile" "hideSidebar" "sidebar-container" 0.3s transform 180px使 translate3d 3D X
&.hideSidebar {
.sidebar-container {
transition-duration: 0.3s;
@ -130,9 +96,7 @@
}
}
// "withoutAnimation"
.withoutAnimation {
// "withoutAnimation" "main-container" "sidebar-container" none使
.main-container,
.sidebar-container {
transition: none;

@ -1,69 +1,42 @@
// date.js
// 这个函数用于将一个日期对象按照指定的格式进行格式化
export function formatDate(date, fmt) {
// 如果格式化字符串中包含'y+'(表示年份)
if (/(y+)/.test(fmt)) {
// 使用正则表达式匹配到的'y+'替换为对应的年份值
// 获取当前日期的年份,将其转换为字符串
// 根据'y+'的长度,从年份字符串的末尾截取相应长度的字符进行替换
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
// 创建一个对象,包含了从日期对象中获取各种时间单位的方法
let o = {
'M+': date.getMonth() + 1, // 获取月份月份是从0开始的所以要加1
'd+': date.getDate(), // 获取日期
'h+': date.getHours(), // 获取小时
'm+': date.getMinutes(), // 获取分钟
's+': date.getSeconds() // 获取秒
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
// 遍历对象o中的每个属性时间单位
for (let k in o) {
// 使用正则表达式检查格式化字符串中是否包含当前时间单位的格式
if (new RegExp(`(${k})`).test(fmt)) {
// 将当前时间单位的值转换为字符串
let str = o[k] + '';
// 如果当前时间单位在格式化字符串中的格式长度为1则直接替换
// 如果长度大于1则调用padLeftZero函数进行补零操作后再替换
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)? str : padLeftZero(str));
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
// 返回格式化后的字符串
return fmt;
}
// 这个函数用于将字符串格式的日期转换为日期对象
// 如果没有传入分隔符参数,则默认使用'-'作为分隔符
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
export function str2Date(dateStr, separator) {
if (!separator) {
separator = "-";
}
// 根据分隔符将日期字符串拆分成数组
let dateArr = dateStr.split(separator);
// 解析年份
let year = parseInt(dateArr[0]);
// 解析月份
let month;
// 如果月份字符串以'0'开头(例如'04'),则去掉'0'后再解析为整数
//处理月份为04这样的情况
if (dateArr[1].indexOf("0") == 0) {
month = parseInt(dateArr[1].substring(1));
} else {
month = parseInt(dateArr[1]);
}
// 解析日期
let day = parseInt(dateArr[2]);
// 使用解析后的年、月、日创建一个新的日期对象
// 注意月份在日期对象中是从0开始计数的所以要减1
let date = new Date(year, month - 1, day);
// 返回日期对象
return date;
}
// 这个函数用于在字符串左边补零
// 例如,如果传入'5',则返回'05'
function padLeftZero(str) {
// 在字符串前面加上'00',然后根据原字符串的长度从右边截取
return ('00' + str).substr(str.length);
}

@ -1,78 +1,54 @@
// 这个函数用于将给定的时间数据按照指定的格式进行格式化处理支持传入不同类型的时间表示形式如时间戳、Date对象等并转化为格式化后的字符串
export function parseTime(time, cFormat) {
// 如果没有传入任何参数arguments.length === 0表示参数个数为0则直接返回null表示无法进行时间格式化操作
if (arguments.length === 0) {
return null
}
// 如果没有传入自定义的格式化字符串cFormat则使用默认的格式化字符串这里定义了一个包含年、月、日、时、分、秒占位符的格式模板
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
// 判断传入的时间参数是否已经是一个Date对象如果是则直接将其赋值给date变量后续用于提取时间信息进行格式化
if (typeof time === 'object') {
date = time
} else {
// 如果传入的时间参数不是Date对象先进行以下处理
// 如果传入的时间字符串长度为10位通常表示以秒为单位的时间戳比如从后端获取的时间戳可能是这种形式则将其转换为以毫秒为单位的时间戳乘以1000因为JavaScript中Date对象的构造函数接收的是以毫秒为单位的时间戳
if (('' + time).length === 10) time = parseInt(time) * 1000
// 使用转换后的时间戳或者本身就是以毫秒为单位的时间戳创建一个Date对象用于后续获取年、月、日等时间信息
date = new Date(time)
}
// 创建一个对象用于存储从Date对象中提取出的各个时间单位对应的数值键名与格式化字符串中的占位符相对应
const formatObj = {
y: date.getFullYear(), // 获取年份例如2024
m: date.getMonth() + 1, // 获取月份JavaScript中月份是从0开始计数的所以要加1范围是1 - 12
d: date.getDate(), // 获取日期即一个月中的第几天范围是1 - 31
h: date.getHours(), // 获取小时范围是0 - 23
i: date.getMinutes(), // 获取分钟范围是0 - 59
s: date.getSeconds(), // 获取秒范围是0 - 59
a: date.getDay() // 获取星期几返回值是0星期日 - 6星期六
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
// 使用正则表达式替换格式化字符串中的占位符,将其替换为实际的时间数值对应的字符串表示形式
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// 如果占位符是 'a'表示星期几则将数字形式的星期几转换为中文汉字形式例如1转换为“一”表示星期一
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
// 如果占位符对应的时间数值小于10并且占位符长度大于0防止出现类似 {0} 这种不需要补0的情况则在数值前面补0使其格式更规范例如1变为01
if (result.length > 0 && value < 10) {
value = '0' + value
}
// 返回处理后的时间数值对应的字符串如果数值为0或者不存在比如没有获取到对应的时间信息则返回0
return value || 0
})
// 返回最终格式化后的时间字符串
return time_str
}
// 这个函数用于根据时间与当前时间的时间差以相对友好的格式来展示时间例如“刚刚”、“10分钟前”等如果时间差较大或者传入了格式化选项则按照指定格式进行格式化展示
export function formatTime(time, option) {
// 将传入的时间参数转换为以毫秒为单位的时间戳假设传入的是以秒为单位的时间戳乘以1000进行转换方便后续进行时间差的计算等操作
time = +time * 1000
// 根据转换后的时间戳创建一个Date对象用于获取时间信息
const d = new Date(time)
// 获取当前时间的时间戳(以毫秒为单位)
const now = Date.now()
// 计算当前时间与给定时间的时间差单位为秒通过将时间戳差值除以1000得到
const diff = (now - d) / 1000
// 如果时间差小于30秒直接返回“刚刚”表示时间很近
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) { // 如果时间差小于1小时1小时等于3600秒
// 计算时间差对应的分钟数向上取整并返回类似“10分钟前”的格式
} else if (diff < 3600) { // less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) { // 如果时间差小于1天1天等于3600 * 24秒
// 计算时间差对应的小时数向上取整并返回类似“3小时前”的格式
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) { // 如果时间差小于2天
// 直接返回“1天前”
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
// 如果传入了格式化选项option则调用parseTime函数按照传入的选项格式来格式化时间并返回
if (option) {
return parseTime(time, option)
} else {
// 如果没有传入格式化选项则以“月日时分”的格式返回时间例如“10月15日12时30分”
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
}
}

@ -1,17 +1,10 @@
<template>
<!-- 整体的应用容器用于包裹页面内的各个功能模块通过设置外边距来控制在页面中的位置 -->
<div class="app-container">
<!-- 用于展示一些地址相关链接信息的布局容器 -->
<div class="address-layout">
<!-- el-row 组件用于创建行布局通过 :gutter 属性设置列之间的间隔为 20px -->
<el-row :gutter="20">
<!-- el-col 组件用于定义列这里设置占 6 列的宽度在使用了 12 列布局系统的情况下 -->
<el-col :span="6">
<!-- 带有外边框样式的容器 -->
<div class="out-border">
<!-- 标题部分用于显示该区域的标题 -->
<div class="layout-title">学习教程</div>
<!-- 主要内容部分展示具体的链接文本链接指向外部网站点击会在新标签页打开 -->
<div class="color-main address-content">
<a href="https://www.macrozheng.com" target="_blank">mall学习教程</a>
</div>
@ -35,17 +28,12 @@
</el-col>
</el-row>
</div>
<!-- 用于展示一些统计总数相关信息的布局容器 -->
<div class="total-layout">
<el-row :gutter="20">
<el-col :span="6">
<!-- 用于包裹单个统计项的框架容器 -->
<div class="total-frame">
<!-- 通过绑定属性显示对应的图标图标样式通过类名控制 -->
<img :src="img_home_order" class="total-icon">
<!-- 统计项的标题部分 -->
<div class="total-title">今日订单总数</div>
<!-- 显示具体统计数值的部分 -->
<div class="total-value">200</div>
</div>
</el-col>
@ -63,40 +51,30 @@
<div class="total-value">5000.00</div>
</div>
</el-col>
<!-- 以下是被注释掉的一个统计项可能原本用于展示近 7 天销售总额相关信息 -->
<!--<el-col :span="6">-->
<!--<div class="total-frame">-->
<!--<svg-icon icon-class="total-week" class="total-icon">-->
<!--</svg-icon>-->
<!--<div class="total-title">近7天销售总额</div>-->
<!--<div class="total-value">50000.00</div>-->
<!--</div>-->
<!--<div class="total-frame">-->
<!--<svg-icon icon-class="total-week" class="total-icon">-->
<!--</svg-icon>-->
<!--<div class="total-title">近7天销售总额</div>-->
<!--<div class="total-value">50000.00</div>-->
<!--</div>-->
<!--</el-col>-->
</el-row>
</div>
<!-- 用于展示一些特定信息如二维码提示文字等的卡片式布局容器 -->
<el-card class="mine-layout">
<!-- 将图片在水平方向上居中显示图片展示的是一个二维码设置了宽度和高度 -->
<div style="text-align: center">
<img width="150px" height="150px" src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg">
</div>
<!-- 提示文字告知用户 mall 全套学习教程正在连载中 -->
<div style="text-align: center">mall全套学习教程连载中</div>
<!-- 另一行提示文字引导用户关注公众号以第一时间获取相关内容 -->
<div style="text-align: center;margin-top: 5px"><span class="color-main">关注公号</span>第一时间获取</div>
</el-card>
<!-- 用于展示待处理事务相关信息的布局容器 -->
<div class="un-handle-layout">
<!-- 标题部分用于标识这是待处理事务区域 -->
<div class="layout-title">待处理事务</div>
<!-- 内容部分包含多个行和列来展示不同类型的待处理事务信息 -->
<div class="un-handle-content">
<el-row :gutter="20">
<el-col :span="8">
<div class="un-handle-item">
<!-- 显示事务类型的文字设置了字体粗细 -->
<span class="font-medium">待付款订单</span>
<!-- 显示对应事务数量的文字通过浮动使其靠右显示并设置了危险红色的颜色样式 -->
<span style="float: right" class="color-danger">(10)</span>
</div>
</el-col>
@ -155,7 +133,6 @@
</el-row>
</div>
</div>
<!-- 用于展示商品和用户总览信息的布局容器 -->
<div class="overview-layout">
<el-row :gutter="20">
<el-col :span="12">
@ -163,14 +140,12 @@
<div class="layout-title">商品总览</div>
<div style="padding: 40px">
<el-row>
<!-- 展示商品相关统计数值的列设置了危险红色的颜色样式 -->
<el-col :span="6" class="color-danger overview-item-value">100</el-col>
<el-col :span="6" class="color-danger overview-item-value">400</el-col>
<el-col :span="6" class="color-danger overview-item-value">50</el-col>
<el-col :span="6" class="color-danger overview-item-value">500</el-col>
</el-row>
<el-row class="font-medium">
<!-- 展示对应统计数值含义的标题列 -->
<el-col :span="6" class="overview-item-title">已下架</el-col>
<el-col :span="6" class="overview-item-title">已上架</el-col>
<el-col :span="6" class="overview-item-title">库存紧张</el-col>
@ -200,14 +175,12 @@
</el-col>
</el-row>
</div>
<!-- 用于展示订单统计相关信息的布局容器 -->
<div class="statistics-layout">
<div class="layout-title">订单统计</div>
<el-row>
<el-col :span="4">
<div style="padding: 20px">
<div>
<!-- 显示本月订单总数相关信息包括描述文字具体数值以及同比上月的增长情况 -->
<div style="color: #909399;font-size: 14px">本月订单总数</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div>
<div>
@ -216,7 +189,6 @@
</div>
</div>
<div style="margin-top: 20px;">
<!-- 显示本周订单总数相关信息同样包括描述文字数值和同比上周的变化情况 -->
<div style="color: #909399;font-size: 14px">本周订单总数</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div>
<div>
@ -225,7 +197,6 @@
</div>
</div>
<div style="margin-top: 20px;">
<!-- 显示本月销售总额相关信息 -->
<div style="color: #909399;font-size: 14px">本月销售总额</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div>
<div>
@ -234,7 +205,6 @@
</div>
</div>
<div style="margin-top: 20px;">
<!-- 显示本周销售总额相关信息 -->
<div style="color: #909399;font-size: 14px">本周销售总额</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div>
<div>
@ -246,7 +216,6 @@
</el-col>
<el-col :span="20">
<div style="padding: 10px;border-left:1px solid #DCDFE6">
<!-- el-date-picker 组件用于选择日期范围以下是对其各种属性的设置说明 -->
<el-date-picker
style="float: right;z-index: 1"
size="small"
@ -261,7 +230,6 @@
:picker-options="pickerOptions">
</el-date-picker>
<div>
<!-- ve-line 组件可能用于展示图表比如折线图等通过绑定多个属性来设置图表的数据是否显示图例加载状态等 -->
<ve-line
:data="chartData"
:legend-visible="false"
@ -275,6 +243,7 @@
</div>
</div>
</template>
<script>
import {str2Date} from '@/utils/date';
import img_home_order from '@/assets/images/home_order.png';

@ -1,53 +1,36 @@
<template>
<!-- 最外层的 div 作为整个应用布局的包裹容器通过绑定 :class 属性动态地根据计算属性 classObj 的值来添加相应的类名 -->
<div class="app-wrapper" :class="classObj">
<!-- 引入自定义的 Sidebar 组件用于展示侧边栏内容给它添加了一个类名 "sidebar-container"方便后续进行样式设置 -->
<sidebar class="sidebar-container"></sidebar>
<!-- 这是主要内容的容器 div用于放置页面中除侧边栏之外的主体部分 -->
<div class="main-container">
<!-- 引入自定义的 Navbar 组件用于展示页面顶部的导航栏 -->
<navbar></navbar>
<!-- 引入自定义的 AppMain 组件用于展示页面主体的核心内容 -->
<app-main></app-main>
</div>
</div>
</template>
<script>
// components NavbarSidebar AppMain 便使
import { Navbar, Sidebar, AppMain } from './components'
// mixin ResizeHandler ResizeMixinmixin
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'layout',
// components 使 NavbarSidebar AppMain 使
components: {
Navbar,
Sidebar,
AppMain
},
// 使 mixins ResizeMixinmixin layout
mixins: [ResizeMixin],
computed: {
// sidebar Vuex store app sidebar
// 使 sidebar
sidebar() {
return this.$store.state.app.sidebar
},
// device Vuex app device 'mobile'
device() {
return this.$store.state.app.device
},
// classObj sidebar device
//
classObj() {
return {
// !this.sidebar.opened hideSidebar
hideSidebar:!this.sidebar.opened,
// withoutAnimation true withoutAnimation
hideSidebar: !this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
// 'mobile' this.device ==='mobile' mobile 便
mobile: this.device === 'mobile'
}
}
@ -55,44 +38,12 @@ export default {
}
</script>
<script>
// components NavbarSidebar AppMain 便使
import { Navbar, Sidebar, AppMain } from './components'
// mixin ResizeHandler ResizeMixinmixin
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'layout',
// components 使 NavbarSidebar AppMain 使
components: {
Navbar,
Sidebar,
AppMain
},
// 使 mixins ResizeMixinmixin layout
mixins: [ResizeMixin],
computed: {
// sidebar Vuex store app sidebar
// 使 sidebar
sidebar() {
return this.$store.state.app.sidebar
},
// device Vuex app device 'mobile'
device() {
return this.$store.state.app.device
},
// classObj sidebar device
//
classObj() {
return {
// !this.sidebar.opened hideSidebar
hideSidebar:!this.sidebar.opened,
// withoutAnimation true withoutAnimation
withoutAnimation: this.sidebar.withoutAnimation,
// 'mobile' this.device ==='mobile' mobile 便
mobile: this.device === 'mobile'
}
}
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
}
}
</script>
</style>

@ -11,8 +11,8 @@
export default {
name: 'AppMain',
computed: {
// key() {
// 111 11 return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
// .......key() {
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
// }
}
}

@ -1,28 +1,18 @@
<template>
<!-- el-menu 组件用于创建一个菜单这里设置了类名为 "navbar"模式为水平方向horizontal通常用于页面顶部的导航栏布局 -->
<el-menu class="navbar" mode="horizontal">
<!-- Hamburger 组件用于实现类似汉堡包样式的图标按钮点击可切换侧边栏状态通过绑定 :toggleClick 事件来触发切换侧边栏的方法:isActive 根据侧边栏的打开状态来显示相应的样式 -->
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<!-- 引入 Breadcrumb 组件可能用于展示页面的面包屑导航显示当前页面在整个网站结构中的层级路径但此处没有传入具体属性 -->
<breadcrumb></breadcrumb>
<!-- el-dropdown 组件用于创建一个下拉菜单触发方式设置为点击click这里用于展示用户相关操作的下拉菜单比如首页退出等功能 -->
<el-dropdown class="avatar-container" trigger="click">
<!-- 内部的 div 作为一个容器包裹用户头像和下拉箭头图标 -->
<div class="avatar-wrapper">
<!-- 通过绑定 :src 属性展示用户头像图片图片的源地址由变量 "avatar" 决定 -->
<img class="user-avatar" :src="avatar">
<!-- 使用一个向下的图标el-icon-caret-bottom作为下拉菜单的指示箭头 -->
<i class="el-icon-caret-bottom"></i>
</div>
<!-- el-dropdown-menu 组件用于定义下拉菜单的具体内容通过 slot="dropdown" 指定它在 el-dropdown 组件中的插槽位置 -->
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<!-- router-link 组件用于创建路由链接点击可跳转到对应的路由路径这里是首页路径为 "/"样式设置为行内块元素 -->
<router-link class="inlineBlock" to="/">
<el-dropdown-item>
首页
</el-dropdown-item>
</router-link>
<!-- 另一个 el-dropdown-item 用于展示 "退出" 操作添加了分割线样式divided通过点击内部的 span 元素触发 logout 方法来执行退出登录操作 -->
<el-dropdown-item divided>
<span @click="logout" style="display:block;">退出</span>
</el-dropdown-item>
@ -30,37 +20,27 @@
</el-dropdown>
</el-menu>
</template>
<script>
// vuex mapGetters Vuex store getter
import { mapGetters } from 'vuex'
// Breadcrumb
import Breadcrumb from '@/components/Breadcrumb'
// Hamburger
import Hamburger from '@/components/Hamburger'
export default {
// 使 Breadcrumb Hamburger 便使
components: {
Breadcrumb,
Hamburger
},
computed: {
// 使 mapGetters Vuex store 'sidebar' 'avatar' getter
// this.sidebar this.avatar 访 store
...mapGetters([
'sidebar',
'avatar'
])
},
methods: {
// toggleSideBar Vuex store ToggleSideBar action
// action Vuex
toggleSideBar() {
this.$store.dispatch('ToggleSideBar')
},
// logout 退
// this.$store.dispatch Vuex store LogOut action LogOut action
// Promise .then location.reload() vue-router bug
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload() // vue-router bug
@ -69,75 +49,46 @@ export default {
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 为类名为 "navbar" 的元素设置样式,以下是具体的样式属性说明 */
.navbar {
/* 设置元素的高度为 50px */
height: 50px;
/* 设置行高为 50px使得内部文本在垂直方向上居中对齐 */
line-height: 50px;
/* 覆盖默认的边框圆角设置,将其设置为 0px使其呈现直角样式 */
border-radius: 0px!important;
/* 为类名为 "hamburger-container" 的子元素设置样式,它属于 "navbar" 元素内部的元素 */
border-radius: 0px !important;
.hamburger-container {
/* 设置行高为 58px用于垂直方向上的布局调整 */
line-height: 58px;
/* 设置高度与父元素navbar保持一致为 50px */
height: 50px;
/* 将元素向左浮动,使其在水平方向上靠左排列 */
float: left;
/* 设置左右内边距为 10px用于控制内部元素与边界的间距 */
padding: 0 10px;
}
/* 为类名为 "screenfull" 的元素设置样式,它在 "navbar" 元素内部(从样式结构看应该是与全屏相关的功能元素,但代码中未体现其完整使用场景) */
.screenfull {
/* 设置元素的定位为绝对定位,以便可以精确控制其在父元素中的位置 */
position: absolute;
/* 设置元素距离父元素右侧 90px 的位置 */
right: 90px;
/* 设置元素距离父元素顶部 16px 的位置 */
top: 16px;
/* 设置元素的颜色为红色,可能用于特定的提示等功能 */
color: red;
}
/* 为类名为 "avatar-container" 的元素设置样式,它同样是 "navbar" 元素内部用于包裹用户头像及下拉菜单相关内容的容器 */
.avatar-container {
/* 设置高度与父元素navbar一致为 50px */
height: 50px;
/* 将元素设置为行内块级元素,使其可以在水平方向上与其他元素并排显示,同时又能设置宽度、高度等块级元素的属性 */
display: inline-block;
/* 将元素定位在父元素navbar的右侧距离右侧 35px 的位置 */
position: absolute;
right: 35px;
/* 为类名为 "avatar-wrapper" 的子元素设置样式,它是 "avatar-container" 内部进一步包裹头像和图标的容器 */
.avatar-wrapper {
/* 设置鼠标指针样式为手型,提示用户此处可点击操作(一般用于有交互功能的元素) */
cursor: pointer;
/* 设置元素距离顶部 5px 的外边距,用于垂直方向上的位置微调 */
margin-top: 5px;
/* 设置元素为相对定位,以便内部的绝对定位元素可以基于它来进行定位 */
position: relative;
/* 为类名为 "user-avatar" 的子元素(即用户头像图片元素)设置样式 */
.user-avatar {
/* 设置图片的宽度为 40px */
width: 40px;
/* 设置图片的高度为 40px */
height: 40px;
/* 设置图片的边框圆角为 10px使其呈现圆角矩形的外观 */
border-radius: 10px;
}
/* 为类名为 "el-icon-caret-bottom" 的子元素(即下拉箭头图标元素)设置样式 */
.el-icon-caret-bottom {
/* 设置元素为绝对定位以便精确控制其在父元素avatar-wrapper中的位置 */
position: absolute;
/* 设置元素距离父元素右侧 -20px 的位置(负数表示向左偏移) */
right: -20px;
/* 设置元素距离父元素顶部 25px 的位置,用于垂直方向上的定位 */
top: 25px;
/* 设置图标的字体大小为 12px调整图标大小 */
font-size: 12px;
}
}
}
}
</style>

@ -1,57 +1,38 @@
// 从项目的 @/store 目录下导入 Vuex 的 store 实例,这个 store 通常用于管理应用中的状态数据以及处理相关的业务逻辑,例如控制侧边栏的显示隐藏、设备类型的切换等操作
import store from '@/store'
// 通过解构赋值从 document 对象中获取 body 属性,后续可能会基于这个 body 元素来获取页面相关的尺寸等信息,比如判断页面宽度是否满足移动端的条件
const { body } = document
// 定义一个常量 WIDTH表示一个宽度的阈值单位应该是像素这里设置为 1024px可能用于区分移动端和桌面端设备比如页面宽度小于这个值时认为是移动端
const WIDTH = 1024
// 定义一个常量 RATIO具体含义可能和页面尺寸判断逻辑相关结合代码来看可能是在判断页面宽度是否符合移动端条件时需要减去的一个值
const RATIO = 3
export default {
// watch 选项用于监听组件中的数据变化,这里监听了 $routeVue 路由对象)的变化
watch: {
$route(route) {
// 判断当前设备是否为移动端(通过 this.device ==='mobile' 判断,这里的 this.device 应该是组件中的某个属性用于标识设备类型并且侧边栏是打开状态this.sidebar.opened
if (this.device === 'mobile' && this.sidebar.opened) {
// 如果满足上述条件,通过 store.dispatch 方法触发 Vuex store 中的 'CloseSideBar' 这个 action传入一个配置对象 { withoutAnimation: false },表示关闭侧边栏,并且关闭时是否有动画效果设置为 false可能在对应的 action 实现中有相应的处理逻辑来根据这个配置关闭侧边栏并控制动画展示情况)
store.dispatch('CloseSideBar', { withoutAnimation: false })
}
}
},
// beforeMount 生命周期钩子函数,在组件挂载到 DOM 之前被调用。这里给 window 对象添加了一个'resize' 事件监听器,当窗口大小发生变化时,会触发 this.resizeHandler 方法,用于处理窗口大小变化相关的逻辑
beforeMount() {
window.addEventListener('resize', this.resizeHandler)
},
// mounted 生命周期钩子函数,在组件挂载到 DOM 之后被调用。这里首先调用 this.isMobile 方法来判断当前设备是否为移动端
mounted() {
const isMobile = this.isMobile()
if (isMobile) {
// 如果是移动端,通过 store.dispatch 方法触发 Vuex store 中的 'ToggleDevice' 这个 action传入'mobile' 字符串参数,可能用于在 store 中更新设备类型的状态为移动端,以便后续根据这个状态进行相应的布局或功能调整
store.dispatch('ToggleDevice', 'mobile')
// 同时触发 'CloseSideBar' 这个 action传入 { withoutAnimation: true },表示关闭侧边栏并且关闭过程不显示动画,用于在移动端初始加载时关闭侧边栏以适应移动端布局等情况
store.dispatch('CloseSideBar', { withoutAnimation: true })
}
},
methods: {
// 定义一个名为 isMobile 的方法,用于判断当前设备是否为移动端
isMobile() {
// 通过 body.getBoundingClientRect() 方法获取 body 元素的尺寸信息(返回一个包含元素的位置、宽度、高度等信息的 DOMRect 对象)
const rect = body.getBoundingClientRect()
// 判断页面可视区域的宽度rect.width减去常量 RATIO 的值是否小于定义的 WIDTH1024px如果小于则认为当前设备是移动端返回 true否则返回 false
return rect.width - RATIO < WIDTH
},
// 定义 resizeHandler 方法,用于处理窗口大小变化的逻辑,当窗口触发'resize' 事件时会调用这个方法
resizeHandler() {
// 判断当前页面是否处于隐藏状态比如切换到其他标签页等情况document.hidden 为 true 表示页面被隐藏),如果页面没有隐藏
if (!document.hidden) {
// 调用 this.isMobile 方法重新判断当前设备是否变为移动端
const isMobile = this.isMobile()
// 通过 store.dispatch 方法触发 Vuex store 中的 'ToggleDevice' 这个 action根据 isMobile 的结果传入'mobile' 或者 'desktop',用于更新 store 中设备类型的状态,使其与当前实际设备类型保持一致
store.dispatch('ToggleDevice', isMobile? 'mobile' : 'desktop')
store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
if (isMobile) {
// 如果当前设备变为移动端,触发 'CloseSideBar' 这个 action传入 { withoutAnimation: true },关闭侧边栏并且不显示动画,以适应移动端布局要求
store.dispatch('CloseSideBar', { withoutAnimation: true })
}
}

@ -1,36 +1,26 @@
<template>
<!-- 最外层的 div 作为整个登录页面内容的容器 -->
<div>
<!-- 使用 el-card 组件创建一个卡片式的布局容器用于包裹登录表单相关内容并设置了特定的类名 -->
<el-card class="login-form-layout">
<!-- el-form 组件用于创建表单以下是对其属性的设置说明 -->
<el-form autoComplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-position="left">
<!-- div 元素用于将 SVG 图标在水平方向上居中显示 -->
<div style="text-align: center">
<!-- svg-icon 组件用于展示 SVG 图标这里展示的图标类名为 "login-mall"并设置了宽度高度和颜色 -->
<svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon>
</div>
<!-- h2 标题元素展示登录页面的标题 "mall-admin-web"并设置了类名用于样式控制 -->
<h2 class="login-title color-main">mall-admin-web</h2>
<!-- el-form-item 组件表示表单中的一个项目这里对应 "用户名" 输入项通过 prop 属性关联验证规则 -->
<el-form-item prop="username">
<!-- el-input 组件用于创建输入框以下是对其属性和插槽的详细说明 -->
<el-input name="username"
type="text"
v-model="loginForm.username"
autoComplete="on"
placeholder="请输入用户名">
<!-- 使用插槽 "prefix" 在输入框前面添加一个 SVG 图标图标类名为 "user"并设置了类名用于样式控制 -->
<span slot="prefix">
<svg-icon icon-class="user" class="color-main"></svg-icon>
</span>
<span slot="prefix">
<svg-icon icon-class="user" class="color-main"></svg-icon>
</span>
</el-input>
</el-form-item>
<!-- 另一个 el-form-item 组件对应 "密码" 输入项同样通过 prop 属性关联验证规则 -->
<el-form-item prop="password">
<el-input name="password"
:type="pwdType"
@ -38,19 +28,15 @@
v-model="loginForm.password"
autoComplete="on"
placeholder="请输入密码">
<!-- 同样使用插槽 "prefix" 在输入框前面添加表示密码的 SVG 图标图标类名为 "password"并设置类名用于样式控制 -->
<span slot="prefix">
<svg-icon icon-class="password" class="color-main"></svg-icon>
</span>
<!-- 使用插槽 "suffix" 在输入框后面添加一个可点击的 SVG 图标点击这个图标可以切换密码的显示隐藏状态图标类名为 "eye"并设置类名用于样式控制 -->
<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>
<svg-icon icon-class="eye" class="color-main"></svg-icon>
</span>
</el-input>
</el-form-item>
<!-- 又是一个 el-form-item 组件用于放置登录和获取体验账号的按钮并设置了底部外边距和文本居中样式 -->
<el-form-item style="margin-bottom: 60px;text-align: center">
<!-- el-button 组件用于创建按钮以下是按钮的相关属性设置说明 -->
<el-button style="width: 45%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
@ -60,202 +46,139 @@
</el-form-item>
</el-form>
</el-card>
<!-- img 标签用于展示一张背景图片图片的源地址通过绑定的变量 login_center_bg 来动态设置并设置了类名用于样式控制 -->
<img :src="login_center_bg" class="login-center-layout">
<!-- el-dialog 组件用于创建一个对话框以下是对其属性的详细说明 -->
<el-dialog
title="公众号二维码"
:visible.sync="dialogVisible"
:show-close="false"
:center="true"
width="30%">
<!-- div 元素用于在对话框内放置相关内容并将文本居中显示 -->
<div style="text-align: center">
<!-- span 元素用于展示提示文字通过设置不同的类名来控制文字的样式如字体大小颜色等提示用户关注公众号获取体验账号的操作流程 -->
<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>
<!-- 使用插槽 "footer" 在对话框底部定义按钮区域这里只有一个确定按钮 -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogConfirm"></el-button>
<el-button type="primary" @click="dialogConfirm"></el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// @/utils/validate isvalidUsername
import {isvalidUsername} from '@/utils/validate';
// @/utils/support Cookie
import {setSupport, getSupport, setCookie, getCookie} from '@/utils/support';
//
import login_center_bg from '@/assets/images/login_center_bg.png'
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() {
// validateUsername
const validateUsername = (rule, value, callback) => {
// isvalidUsername
if (!isvalidUsername(value)) {
// callback Error
callback(new Error('请输入正确的用户名'))
} else {
//
callback()
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
}
};
// validatePass
const validatePass = (rule, value, callback) => {
// 3
if (value.length < 3) {
// callback Error 3
callback(new Error('密码不能小于3位'))
} else {
//
callback()
},
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';
}
};
return {
// loginForm
loginForm: {
username: '',
password: '',
},
// loginRules
loginRules: {
// blur validateUsername
username: [{required: true, trigger: 'blur', validator: validateUsername}],
// validatePass
password: [{required: true, trigger: 'blur', validator: validatePass}]
},
// loading false
loading: false,
// pwdType 'password'
pwdType: 'password',
//
login_center_bg,
// dialogVisible false
dialogVisible: false,
// supportDialogVisible 使 false
supportDialogVisible: false
}
},
created() {
// Cookie loginForm.username
this.loginForm.username = getCookie("username");
// Cookie loginForm.password
this.loginForm.password = getCookie("password");
// undefinednull
if (this.loginForm.username === undefined || this.loginForm.username == null || this.loginForm.username === '') {
// 'admin'
this.loginForm.username = 'admin';
}
// undefined null
if (this.loginForm.password === undefined || this.loginForm.password == null) {
//
this.loginForm.password = '';
}
},
methods: {
showPwd() {
// pwdType 'password'
if (this.pwdType === 'password') {
//
this.pwdType = ''
} else {
// 'password'
this.pwdType = 'password'
if(this.loginForm.password === undefined||this.loginForm.password==null){
this.loginForm.password = '';
}
},
handleLogin() {
// loginForm
this.$refs.loginForm.validate(valid => {
if (valid) {
// let isSupport = getSupport();
// if (isSupport === undefined || isSupport == null) {
// this.dialogVisible = true;
// return;
// }
// loading true
this.loading = true;
// $store.dispatch 'Login' action loginForm
this.$store.dispatch('Login', this.loginForm).then(() => {
// loading false
this.loading = false;
// Cookie 15 15
setCookie("username", this.loginForm.username, 15);
// Cookie 15
setCookie("password", this.loginForm.password, 15);
// $router.push '/'
this.$router.push({path: '/'})
}).catch(() => {
// loading false
this.loading = false
})
methods: {
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
// false
console.log('参数验证不合法!');
return false
this.pwdType = 'password'
}
})
},
handleTry() {
// dialogVisible true
this.dialogVisible = true
},
dialogConfirm() {
// dialogVisible false
this.dialogVisible = false;
// setSupport true setSupport
setSupport(true);
},
dialogCancel() {
// dialogVisible false
this.dialogVisible = false;
// setSupport false setSupport
setSupport(false);
},
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" 的元素设置样式,以下是具体样式属性的说明 */
.login-form-layout {
/* 将元素定位设置为绝对定位,使其可以相对于最近的已定位祖先元素进行定位 */
position: absolute;
/* 使其在水平方向上相对于父元素左对齐 */
left: 0;
/* 使其在水平方向上相对于父元素右对齐 */
right: 0;
/* 设置元素的宽度为 360px */
width: 360px;
/* 设置元素在垂直方向上居中,通过上下外边距 auto 实现 */
margin: 140px auto;
/* 设置元素的上边框样式,宽度为 10px颜色为 #409EFF */
border-top: 10px solid #409EFF;
}
.login-form-layout {
position: absolute;
left: 0;
right: 0;
width: 360px;
margin: 140px auto;
border-top: 10px solid #409EFF;
}
/* 为类名为 "login-title" 的元素设置样式,这里只是简单地将文本在元素内居中显示 */
.login-title {
text-align: center;
}
.login-title {
text-align: center;
}
/* 为类名为 "login-center-layout" 的元素设置样式,以下是具体样式属性的说明 */
.login-center-layout {
/* 设置元素的背景颜色为 #409EFF */
background: #409EFF;
/* 设置元素的宽度自动适应内容,不会超出父元素宽度 */
width: auto;
/* 设置元素的高度自动适应内容,不会超出父元素高度 */
height: auto;
/* 设置元素的最大宽度为 100%,即不会超过父元素的宽度 */
max-width: 100%;
/* 设置元素的最大高度为 100%,即不会超过父元素的高度 */
max-height: 100%;
/* 设置元素的顶部外边距为 200px */
margin-top: 200px;
}
.login-center-layout {
background: #409EFF;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin-top: 200px;
}
</style>

@ -1,13 +1,9 @@
<template>
<!-- 应用容器 -->
<template> 
<div class="app-container">
<!-- 筛选搜索区域 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标和文本 -->
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<!-- 查询搜索按钮 -->
<el-button
style="float:right"
type="primary"
@ -15,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -23,14 +18,11 @@
重置
</el-button>
</div>
<!-- 表单区域用于输入筛选条件 -->
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 输入搜索项 -->
<el-form-item label="输入搜索:">
<el-input v-model="listQuery.id" class="input-width" placeholder="服务单号"></el-input>
</el-form-item>
<!-- 处理状态下拉选择 -->
<el-form-item label="处理状态:">
<el-select v-model="listQuery.status" placeholder="全部" clearable class="input-width">
<el-option v-for="item in statusOptions"
@ -40,7 +32,6 @@
</el-option>
</el-select>
</el-form-item>
<!-- 申请时间选择 -->
<el-form-item label="申请时间:">
<el-date-picker
class="input-width"
@ -50,11 +41,9 @@
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<!-- 操作人员输入 -->
<el-form-item label="操作人员:">
<el-input v-model="listQuery.handleMan" class="input-width" placeholder="全部"></el-input>
</el-form-item>
<!-- 处理时间选择 -->
<el-form-item label="处理时间:">
<el-date-picker
class="input-width"
@ -67,58 +56,45 @@
</el-form>
</div>
</el-card>
<!-- 数据列表操作区域 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
</el-card>
<!-- 表格容器 -->
<div class="table-container">
<!-- 表格展示数据列表 -->
<el-table ref="returnApplyTable"
:data="list"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading" border>
<!-- 选择列 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 服务单号列 -->
<el-table-column label="服务单号" width="180" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 申请时间列 -->
<el-table-column label="申请时间" width="180" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
</el-table-column>
<!-- 用户账号列 -->
<el-table-column label="用户账号" align="center">
<template slot-scope="scope">{{scope.row.memberUsername}}</template>
</el-table-column>
<!-- 退款金额列 -->
<el-table-column label="退款金额" width="180" align="center">
<template slot-scope="scope">{{scope.row | formatReturnAmount}}</template>
</el-table-column>
<!-- 申请状态列 -->
<el-table-column label="申请状态" width="180" align="center">
<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
</el-table-column>
<!-- 处理时间列 -->
<el-table-column label="处理时间" width="180" align="center">
<template slot-scope="scope">{{scope.row.handleTime | formatTime}}</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleViewDetail(scope.$index, scope.row)">查看详情</el-button>
size="mini"
@click="handleViewDetail(scope.$index, scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 批量操作容器 -->
<div class="batch-operate-container">
<!-- 批量操作下拉选择 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
@ -129,7 +105,6 @@
:value="item.value">
</el-option>
</el-select>
<!-- 批量操作按钮 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -139,7 +114,6 @@
确定
</el-button>
</div>
<!-- 分页容器 -->
<div class="pagination-container">
<el-pagination
background
@ -154,14 +128,9 @@
</div>
</div>
</template>
<script>
//
import {formatDate} from '@/utils/date';
// API
import {fetchList,deleteApply} from '@/api/returnApply';
//
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
@ -172,7 +141,6 @@
handleMan: null,
handleTime: null
};
//
const defaultStatusOptions=[
{
label: '待处理',
@ -191,7 +159,6 @@
value: 3
}
];
export default {
name:'returnApplyList',
data() {
@ -212,11 +179,9 @@
}
},
created(){
//
this.getList();
},
filters:{
//
formatTime(time) {
if(time==null||time===''){
return 'N/A';
@ -224,7 +189,6 @@
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
//
formatStatus(status){
for(let i=0;i<defaultStatusOptions.length;i++){
if(status===defaultStatusOptions[i].value){
@ -232,30 +196,24 @@
}
}
},
// 退
formatReturnAmount(row){
return row.productRealPrice*row.productCount;
}
},
methods:{
//
handleSelectionChange(val){
this.multipleSelection = val;
},
//
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
//
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
//
handleViewDetail(index,row){
this.$router.push({path:'/oms/returnApplyDetail',query:{id:row.id}})
},
//
handleBatchOperate(){
if(this.multipleSelection==null||this.multipleSelection.length<1){
this.$message({
@ -266,7 +224,7 @@
return;
}
if(this.operateType===1){
//
//
this.$confirm('是否要进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',

@ -1,69 +1,59 @@
<template>
<!-- 使用 el-dialog 组件创建一个对话框用于展示订单跟踪相关信息设置对话框的标题为 "订单跟踪"通过 :visible.sync 双向绑定对话框的可见性与组件的 visible 属性关联后面会详细介绍绑定 :before-close 事件处理函数用于在对话框关闭前执行一些操作设置对话框宽度为 40% -->
<el-dialog title="订单跟踪"
:visible.sync="visible"
:before-close="handleClose"
width="40%">
<!-- el-steps 组件用于创建一个步骤条设置方向为垂直direction="vertical"指定当前激活的步骤索引为 6:active="6"这里可能需要根据实际业务逻辑根据订单物流状态动态设置该值设置已完成步骤的状态样式为 "success"通常表示成功完成的视觉效果比如显示为绿色等设置每个步骤之间的间隔为 50pxspace="50px" -->
<el-steps direction="vertical"
:active="6"
finish-status="success"
space="50px">
<!-- 通过 v-for 指令循环遍历 logisticsList 数据数组来动态生成每个步骤el-step每个步骤绑定一个唯一的 key使用 :key="item.name" Vue 中循环渲染列表时key 是必要的有助于 Vue 更高效地更新虚拟 DOM设置步骤的标题为 item.name从数据中获取每个步骤对应的名称设置步骤的描述信息为 item.time从数据中获取对应时间信息 -->
<el-step v-for="item in logisticsList"
:key="item.name"
:title="item.name"
:description="item.time"></el-step>
</el-steps>
</el-dialog>
<template> 
<el-dialog title="订单跟踪"
:visible.sync="visible"
:before-close="handleClose"
width="40%">
<el-steps direction="vertical"
:active="6"
finish-status="success"
space="50px">
<el-step v-for="item in logisticsList"
:key="item.name"
:title="item.name"
:description="item.time"></el-step>
</el-steps>
</el-dialog>
</template>
<script>
// defaultLogisticsListname time
const defaultLogisticsList = [
{name: '订单已提交,等待付款', time: '2017-04-01 12:00:00 '},
{name: '订单付款成功', time: '2017-04-01 12:00:00 '},
{name: '在北京市进行下级地点扫描,等待付款', time: '2017-04-01 12:00:00 '},
{name: '在分拨中心广东深圳公司进行卸车扫描,等待付款', time: '2017-04-01 12:00:00 '},
{name: '在广东深圳公司进行发出扫描', time: '2017-04-01 12:00:00 '},
{name: '到达目的地网点广东深圳公司,快件将很快进行派送', time: '2017-04-01 12:00:00 '},
{name: '订单已签收,期待再次为您服务', time: '2017-04-01 12:00:00 '}
];
// Vue
export default {
// Vue 'logisticsDialog'
name: 'logisticsDialog',
// props value Vue
props: {
value: Boolean
},
computed: {
// visible get set props value Vue props 便
visible: {
get() {
return this.value;
},
set(visible) {
this.value = visible;
}
}
},
data() {
return {
// defaultLogisticsList Object.assign logisticsList
logisticsList: Object.assign({}, defaultLogisticsList)
}
},
methods: {
// emitInput 'input' val Vue $emit
emitInput(val) {
this.$emit('input', val)
},
// handleClose el-dialog :before-close emitInput false
handleClose() {
this.emitInput(false);
}
}
<script>
const defaultLogisticsList=[
{name: '订单已提交,等待付款',time:'2017-04-01 12:00:00 '},
{name: '订单付款成功',time:'2017-04-01 12:00:00 '},
{name: '在北京市进行下级地点扫描,等待付款',time:'2017-04-01 12:00:00 '},
{name: '在分拨中心广东深圳公司进行卸车扫描,等待付款',time:'2017-04-01 12:00:00 '},
{name: '在广东深圳公司进行发出扫描',time:'2017-04-01 12:00:00 '},
{name: '到达目的地网点广东深圳公司,快件将很快进行派送',time:'2017-04-01 12:00:00 '},
{name: '订单已签收,期待再次为您服务',time:'2017-04-01 12:00:00 '}
];
export default {
name:'logisticsDialog',
props: {
value: Boolean
},
computed:{
visible: {
get() {
return this.value;
},
set(visible){
this.value=visible;
}
}
},
data() {
return {
logisticsList:Object.assign({},defaultLogisticsList)
}
},
methods:{
emitInput(val) {
this.$emit('input', val)
},
handleClose(){
this.emitInput(false);
}
</script>
}
}
</script>
<style></style>

@ -1,130 +1,99 @@
<template>
<!-- 创建一个类名为 "app-container" div 作为整体页面的容器 -->
<div class="app-container">
<!-- 使用 el-card 组件创建一个卡片式容器设置类名为 "operate-container" 并取消阴影效果用于展示页面相关标题 -->
<el-card class="operate-container" shadow="never">
<!-- 使用一个图标元素el-icon-tickets展示一个图标 -->
<i class="el-icon-tickets"></i>
<!-- 展示一段文本内容为 "发货列表"用于表明该页面主要展示的内容 -->
<span>发货列表</span>
</el-card>
<!-- 创建一个类名为 "table-container" div用于放置展示发货相关信息的表格以及操作按钮等内容 -->
<div class="table-container">
<!-- el-table 组件创建一个表格设置引用名称宽度以及绑定数据等属性同时设置表格显示边框 -->
<el-table ref="deliverOrderTable"
style="width: 100%;"
:data="list" border>
<!-- 定义表格列用于展示订单编号信息设置宽度和文本对齐方式通过插槽作用域获取对应行数据中的订单编号并展示 -->
<el-table-column label="订单编号" width="180" align="center">
<template slot-scope="scope">{{scope.row.orderSn}}</template>
</el-table-column>
<!-- 定义表格列用于展示收货人信息设置宽度和文本对齐方式通过插槽作用域获取对应行数据中的收货人姓名并展示 -->
<el-table-column label="收货人" width="180" align="center">
<template slot-scope="scope">{{scope.row.receiverName}}</template>
</el-table-column>
<!-- 定义表格列用于展示手机号码信息设置宽度和文本对齐方式通过插槽作用域获取对应行数据中的手机号码并展示 -->
<el-table-column label="手机号码" width="160" align="center">
<template slot-scope="scope">{{scope.row.receiverPhone}}</template>
</el-table-column>
<!-- 定义表格列用于展示邮政编码信息设置宽度和文本对齐方式通过插槽作用域获取对应行数据中的邮政编码并展示 -->
<el-table-column label="邮政编码" width="160" align="center">
<template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
</el-table-column>
<!-- 定义表格列用于展示收货地址信息设置文本对齐方式通过插槽作用域获取对应行数据中的收货地址并展示 -->
<el-table-column label="收货地址" align="center">
<template slot-scope="scope">{{scope.row.address}}</template>
</el-table-column>
<!-- 定义表格列用于展示配送方式信息通过插槽作用域在每个单元格内创建一个下拉选择框用于选择物流公司绑定对应行数据中的 deliveryCompany 属性设置占位提示文本和小尺寸样式通过循环 companyOptions 数据动态生成下拉选项 -->
<el-table-column label="配送方式" width="160" align="center">
<template slot-scope="scope">
<el-select placeholder="请选择物流公司"
v-model="scope.row.deliveryCompany"
size="small">
<el-option v-for="item in companyOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</template>
</el-table-column>
<!-- 定义表格列用于展示物流单号信息通过插槽作用域在每个单元格内创建一个小尺寸的输入框双向绑定对应行数据中的 deliverySn 属性用于输入物流单号 -->
<el-table-column label="物流单号" width="180" align="center">
<template slot-scope="scope">
<el-input size="small" v-model="scope.row.deliverySn"></el-input>
</template>
</el-table-column>
</el-table>
<!-- 创建一个 div设置上边距文本居中对齐用于放置操作按钮 -->
<div style="margin-top: 15px;text-align: center">
<!-- el-button 组件创建一个按钮点击时调用 "cancel" 方法按钮文本为 "取消" -->
<el-button @click="cancel"></el-button>
<!-- el-button 组件创建一个按钮点击时调用 "confirm" 方法按钮类型设置为 "primary"通常表示主要操作按钮样式上可能会突出显示按钮文本为 "确定" -->
<el-button @click="confirm" type="primary">确定</el-button>
</div>
</div>
<template> 
<div class="app-container">
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>发货列表</span>
</el-card>
<div class="table-container">
<el-table ref="deliverOrderTable"
style="width: 100%;"
:data="list" border>
<el-table-column label="订单编号" width="180" align="center">
<template slot-scope="scope">{{scope.row.orderSn}}</template>
</el-table-column>
<el-table-column label="收货人" width="180" align="center">
<template slot-scope="scope">{{scope.row.receiverName}}</template>
</el-table-column>
<el-table-column label="手机号码" width="160" align="center">
<template slot-scope="scope">{{scope.row.receiverPhone}}</template>
</el-table-column>
<el-table-column label="邮政编码" width="160" align="center">
<template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
</el-table-column>
<el-table-column label="收货地址" align="center">
<template slot-scope="scope">{{scope.row.address}}</template>
</el-table-column>
<el-table-column label="配送方式" width="160" align="center">
<template slot-scope="scope">
<el-select placeholder="请选择物流公司"
v-model="scope.row.deliveryCompany"
size="small">
<el-option v-for="item in companyOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="物流单号" width="180" align="center">
<template slot-scope="scope">
<el-input size="small" v-model="scope.row.deliverySn"></el-input>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 15px;text-align: center">
<el-button @click="cancel"></el-button>
<el-button @click="confirm" type="primary">确定</el-button>
</div>
</div>
</div>
</template>
<script>
import {deliveryOrder} from '@/api/order'
const defaultLogisticsCompanies=["顺丰快递","圆通快递","中通快递","韵达快递"];
export default {
name: 'deliverOrderList',
data() {
return {
list:[],
companyOptions:defaultLogisticsCompanies
}
},
created(){
this.list= this.$route.query.list;
//list
if(this.list instanceof Array===false){
this.list=[];
}
},
methods:{
cancel(){
this.$router.back();
},
confirm(){
this.$confirm('是否要进行发货操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deliveryOrder(this.list).then(response=>{
this.$router.back();
this.$message({
type: 'success',
message: '发货成功!'
});
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消发货'
});
});
}
}
}
</script>
<style></style>
<script>
// '@/api/order' deliveryOrder
import {deliveryOrder} from '@/api/order';
//
const defaultLogisticsCompanies = ["顺丰快递", "圆通快递", "中通快递", "韵达快递"];
// Vue
export default {
// Vue "deliverOrderList"
name: 'deliverOrderList',
data() {
return {
//
list: [],
// defaultLogisticsCompanies
companyOptions: defaultLogisticsCompanies
}
},
created() {
// this.$route.query "list" list
this.list = this.$route.query.list;
// list list
if (this.list instanceof Array === false) {
this.list = [];
}
},
methods: {
// "cancel" Vue this.$router back
cancel() {
this.$router.back();
}
// "confirm"
confirm() {
// 使 $confirm "warning"
this.$confirm('是否要进行发货操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// "" "deliveryOrder" list
// then Vue this.$router back 使 $message "!"
deliveryOrder(this.list).then(response => {
this.$router.back();
this.$message({
type: 'success',
message: '发货成功!'
});
});
}).catch(() => {
// "" catch 使 $message ""
this.$message({
type: 'info',
message: '已取消发货'
});
});
}
}
}
</script>
<style></style>

@ -1,550 +1,402 @@
<template>
<!-- 创建一个类名为 "app-container" div 作为整体页面容器 -->
<div class="app-container">
<!-- 使用 el-card 组件创建一个卡片式容器用于放置筛选搜索相关内容设置类名为 "filter-container" 并取消阴影效果 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用一个图标元素el-icon-search展示搜索图标 -->
<i class="el-icon-search"></i>
<!-- 展示一段文本内容为 "筛选搜索" -->
<span>筛选搜索</span>
<!-- el-button 组件创建一个按钮设置样式使其右浮动按钮类型为 "primary"点击时调用 "handleSearchList" 方法按钮大小为 "small"文本为 "查询搜索" -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 类似上述按钮设置右浮动及右外边距点击调用 "handleResetSearch" 方法用于重置筛选条件按钮大小为 "small"文本为 "重置" -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<!-- el-form 组件创建一个内联表单绑定数据模型为 "listQuery"设置表单大小为 "small"标签宽度为 "140px" -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- el-form-item 组件定义表单中的一项用于输入订单编号的搜索框双向绑定 "listQuery.orderSn"设置类名控制宽度添加占位提示文本 -->
<el-form-item label="输入搜索:">
<el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
</el-form-item>
<!-- 类似上述用于输入收货人相关关键字的搜索框绑定 "listQuery.receiverKeyword" -->
<el-form-item label="收货人:">
<el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
</el-form-item>
<!-- 用于选择提交时间的日期选择器绑定 "listQuery.createTime"设置日期格式类型为 "date"仅选择日期及占位提示文本通过类名控制宽度 -->
<el-form-item label="提交时间:">
<el-date-picker
class="input-width"
v-model="listQuery.createTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<!-- 用于选择订单状态的下拉选择框绑定 "listQuery.status"设置类名控制宽度占位提示文本并允许清空选项通过循环选项数据动态生成下拉选项 -->
<el-form-item label="订单状态:">
<el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
<el-option v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 用于选择订单分类的下拉选择框绑定 "listQuery.orderType"类似上述设置 -->
<el-form-item label="订单分类:">
<el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
<el-option v-for="item in orderTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 用于选择订单来源的下拉选择框绑定 "listQuery.sourceType"同样的设置方式 -->
<el-form-item label="订单来源:">
<el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
<el-option v-for="item in sourceTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 使用 el-card 组件创建另一个卡片式容器用于展示数据列表相关的标题设置类名为 "operate-container" 并取消阴影效果 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
</el-card>
<!-- 创建一个类名为 "table-container" div用于放置展示数据的表格 -->
<div class="table-container">
<!-- el-table 组件创建表格设置引用绑定数据宽度监听行选择变化事件以及控制加载状态等属性 -->
<el-table ref="orderTable"
: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="80" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 定义表格列展示订单编号信息设置宽度和文本对齐方式 -->
<el-table-column label="订单编号" width="180" align="center">
<template slot-scope="scope">{{scope.row.orderSn}}</template>
</el-table-column>
<!-- 定义表格列展示提交时间信息设置宽度和文本对齐方式通过管道符调用 formatCreateTime 过滤器对时间进行格式化后展示 -->
<el-table-column label="提交时间" width="180" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
</el-table-column>
<!-- 定义表格列展示用户账号信息设置文本对齐方式通过插槽作用域获取对应行数据展示 -->
<el-table-column label="用户账号" align="center">
<template slot-scope="scope">{{scope.row.memberUsername}}</template>
</el-table-column>
<!-- 定义表格列展示订单金额信息设置宽度和文本对齐方式 -->
<el-table-column label="订单金额" width="120" align="center">
<template slot-scope="scope">{{scope.row.totalAmount}}</template>
</el-table-column>
<!-- 定义表格列展示支付方式信息设置宽度和文本对齐方式通过管道符调用 formatPayType 过滤器对支付方式进行格式化后展示 -->
<el-table-column label="支付方式" width="120" align="center">
<template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
</el-table-column>
<!-- 定义表格列展示订单来源信息设置宽度和文本对齐方式通过管道符调用 formatSourceType 过滤器对订单来源进行格式化后展示 -->
<el-table-column label="订单来源" width="120" align="center">
<template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
</el-table-column>
<!-- 定义表格列展示订单状态信息设置宽度和文本对齐方式通过管道符调用 formatStatus 过滤器对订单状态进行格式化后展示 -->
<el-table-column label="订单状态" width="120" align="center">
<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
</el-table-column>
<!-- 定义表格列展示操作按钮设置宽度和文本对齐方式通过插槽作用域根据不同订单状态动态显示相应操作按钮 -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleViewOrder(scope.$index, scope.row)"
>查看订单</el-button>
<el-button
size="mini"
@click="handleCloseOrder(scope.$index, scope.row)"
v-show="scope.row.status===0">关闭订单</el-button>
<el-button
size="mini"
@click="handleDeliveryOrder(scope.$index, scope.row)"
v-show="scope.row.status===1">订单发货</el-button>
<el-button
size="mini"
@click="handleViewLogistics(scope.$index, scope.row)"
v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
<el-button
size="mini"
type="danger"
@click="handleDeleteOrder(scope.$index, scope.row)"
v-show="scope.row.status===4">删除订单</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 创建一个类名为 "batch-operate-container" div用于放置批量操作相关的选择框和按钮 -->
<div class="batch-operate-container">
<!-- el-select 组件创建下拉选择框设置大小绑定数据模型通过循环选项数据动态生成下拉选项 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operateOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="输入搜索:">
<el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
</el-form-item>
<el-form-item label="收货人:">
<el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
</el-form-item>
<el-form-item label="提交时间:">
<el-date-picker
class="input-width"
v-model="listQuery.createTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<el-form-item label="订单状态:">
<el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
<el-option v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- el-button 组件创建按钮设置左外边距类名点击调用 "handleBatchOperate" 方法按钮类型为 "primary" 以及按钮大小为 "small"文本为 "确定" -->
</el-form-item>
<el-form-item label="订单分类:">
<el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
<el-option v-for="item in orderTypeOptions"
: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.sourceType" class="input-width" placeholder="全部" clearable>
<el-option v-for="item in sourceTypeOptions"
: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-card>
<div class="table-container">
<el-table ref="orderTable"
: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="80" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="订单编号" width="180" align="center">
<template slot-scope="scope">{{scope.row.orderSn}}</template>
</el-table-column>
<el-table-column label="提交时间" width="180" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
</el-table-column>
<el-table-column label="用户账号" align="center">
<template slot-scope="scope">{{scope.row.memberUsername}}</template>
</el-table-column>
<el-table-column label="订单金额" width="120" align="center">
<template slot-scope="scope">{{scope.row.totalAmount}}</template>
</el-table-column>
<el-table-column label="支付方式" width="120" align="center">
<template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
</el-table-column>
<el-table-column label="订单来源" width="120" align="center">
<template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
</el-table-column>
<el-table-column label="订单状态" width="120" align="center">
<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleViewOrder(scope.$index, scope.row)"
>查看订单</el-button>
<el-button
size="mini"
@click="handleCloseOrder(scope.$index, scope.row)"
v-show="scope.row.status===0">关闭订单</el-button>
<el-button
size="mini"
@click="handleDeliveryOrder(scope.$index, scope.row)"
v-show="scope.row.status===1">订单发货</el-button>
<el-button
size="mini"
@click="handleViewLogistics(scope.$index, scope.row)"
v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- 创建一个类名为 "pagination-container" div用于放置分页组件 -->
<div class="pagination-container">
<!-- el-pagination 组件创建分页器设置背景色监听页面大小和当前页变化事件配置分页布局绑定当前页每页显示数量以及可选的每页显示数量选项和总数据条数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
<!-- el-dialog 组件创建一个对话框用于关闭订单时输入备注信息设置标题绑定可见性以及宽度等属性 -->
<el-dialog
title="关闭订单"
:visible.sync="closeOrder.dialogVisible" width="30%">
<span style="vertical-align: top">操作备注</span>
<el-input
style="width: 80%"
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="closeOrder.content">
</el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="closeOrder.dialogVisible = false"> </el-button>
<el-button type="primary" @click="handleCloseOrderConfirm"> </el-button>
</span>
</el-dialog>
<!-- 使用 logistics-dialog 组件自定义组件双向绑定 visible 属性推测用于控制显示隐藏 -->
<logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
size="mini"
type="danger"
@click="handleDeleteOrder(scope.$index, scope.row)"
v-show="scope.row.status===4">删除订单</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operateOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
<el-dialog
title="关闭订单"
:visible.sync="closeOrder.dialogVisible" width="30%">
<span style="vertical-align: top">操作备注</span>
<el-input
style="width: 80%"
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="closeOrder.content">
</el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="closeOrder.dialogVisible = false"> </el-button>
<el-button type="primary" @click="handleCloseOrderConfirm"> </el-button>
</span>
</el-dialog>
<logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
</div>
</template>
<script>
// '@/api/order' API
import {fetchList, closeOrder, deleteOrder} from '@/api/order';
// '@/utils/date' formatDate
import {formatDate} from '@/utils/date';
// LogisticsDialog
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
// listQuery null
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
orderSn: null,
receiverKeyword: null,
status: null,
orderType: null,
sourceType: null,
createTime: null,
};
// Vue datacreatedmethods
export default {
name: '组件名称(这里未定义,可自行补充合适名称)',
data() {
return {
// Object.assign defaultListQuery
listQuery: Object.assign({}, defaultListQuery),
//
list: [],
// false
listLoading: false,
// null
operateType: null,
// label value
operateOptions: [],
//
statusOptions: [],
//
orderTypeOptions: [],
//
sourceTypeOptions: [],
//
closeOrder: {
dialogVisible: false,
content: null
},
// false
logisticsDialogVisible: false
}
},
created() {
// fetchList list
// fetchList(this.listQuery).then(response => { this.list = response.data; });
import {fetchList,closeOrder,deleteOrder} from '@/api/order'
import {formatDate} from '@/utils/date';
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
orderSn: null,
receiverKeyword: null,
status: null,
orderType: null,
sourceType: null,
createTime: null,
};
export default {
name: "orderList",
components:{LogisticsDialog},
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
listLoading: true,
list: null,
total: null,
operateType: null,
multipleSelection: [],
closeOrder:{
dialogVisible:false,
content:null,
orderIds:[]
},
methods: {
// fetchList
handleSearchList() {
//
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.list = response.data;
this.listLoading = false;
});
},
// handleSearchList listQuery
handleResetSearch() {
// listQuery
this.listQuery = Object.assign({}, defaultListQuery);
this.handleSearchList();
},
//
handleSelectionChange(selections) {
// selections
},
//
handleViewOrder(index, row) {
//
this.$router.push({path: '/orderDetail', query: {id: row.id}});
},
//
<script>
// Vue 使
export default {
// Vue
name: "orderList",
// 使 LogisticsDialog
components: {LogisticsDialog},
data() {
return {
// Object.assign defaultListQuery
listQuery: Object.assign({}, defaultListQuery),
// true
listLoading: true,
// null
list: null,
// null
total: null,
// null
operateType: null,
//
multipleSelection: [],
// id
closeOrder: {
dialogVisible: false,
content: null,
orderIds: []
},
// label value
statusOptions: [
{
label: '待付款',
value: 0
},
{
label: '待发货',
value: 1
},
{
label: '已发货',
value: 2
},
{
label: '已完成',
value: 3
},
{
label: '已关闭',
value: 4
}
],
//
orderTypeOptions: [
{
label: '正常订单',
value: 0
},
{
label: '秒杀订单',
value: 1
}
],
//
sourceTypeOptions: [
{
label: 'PC订单',
value: 0
},
{
label: 'APP订单',
value: 1
}
],
//
operateOptions: [
{
label: "批量发货",
value: 1
},
{
label: "关闭订单",
value: 2
},
{
label: "删除订单",
value: 3
}
],
// false
logisticsDialogVisible: false
}
},
created() {
// getList
this.getList();
},
filters: {
// formatCreateTime 'yyyy-MM-dd hh:mm:ss'
formatCreateTime(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
// 1 ''2 '' ''
formatPayType(value) {
if (value === 1) {
return '支付宝';
} else if (value === 2) {
return '微信';
} else {
return '未支付';
}
},
// 1 'APP' 'PC'
formatSourceType(value) {
if (value === 1) {
return 'APP订单';
} else {
return 'PC订单';
}
},
//
formatStatus(value) {
if (value === 1) {
return '待发货';
} else if (value === 2) {
return '已发货';
} else if (value === 3) {
return '已完成';
} else if (value === 4) {
return '已关闭';
} else if (value === 5) {
return '无效订单';
} else {
return '待付款';
}
},
},
methods: {
// listQuery defaultListQuery 便
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 1 getList
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// val multipleSelection
handleSelectionChange(val) {
this.multipleSelection = val;
},
// Vue this.$router'/oms/orderDetail' id
handleViewOrder(index, row) {
this.$router.push({path: '/oms/orderDetail', query: {id: row.id}})
},
// visible true id closeOrder.orderIds 便使
handleCloseOrder(index, row) {
this.closeOrder.dialogVisible = true;
this.closeOrder.orderIds = [row.id];
},
// covertOrder '/oms/deliverOrderList'
handleDeliveryOrder(index, row) {
let listItem = this.covertOrder(row);
this.$router.push({path: '/oms/deliverOrderList', query: {list: [listItem]}})
},
// logisticsDialogVisible true
handleViewLogistics(index, row) {
this.logisticsDialogVisible = true;
},
// ids id deleteOrder ids
handleDeleteOrder(index, row) {
let ids = [];
ids.push(row.id);
this.deleteOrder(ids);
},
//
handleBatchOperate() {
if (this.multipleSelection == null || this.multipleSelection.length < 1) {
this.$message({
message: '请选择要操作的订单',
type: 'warning',
duration: 1000
});
return;
}
// 1
if (this.operateType === 1) {
let list = [];
// 1 covertOrder list
for (let i = 0; i < this.multipleSelection.length; i++) {
if (this.multipleSelection[i].status === 1) {
list.push(this.covertOrder(this.multipleSelection[i]));
}
}
// 0
if (list.length === 0) {
this.$message({
message: '选中订单中没有可以发货的订单',
type: 'warning',
duration: 1000
});
return;
}
// '/oms/deliverOrderList'
this.$router.push({path: '/oms/deliverOrderList', query: {list: list}})
} else if (this.operateType === 2) {
// 2
// closeOrder.orderIds id closeOrder.orderIds visible true
this.closeOrder.orderIds = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
this.closeOrder.orderIds.push(this.multipleSelection[i].id);
}
this.closeOrder.dialogVisible = true;
} else if (this.operateType === 3) {
// 3
let ids = [];
// id ids deleteOrder ids
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
this.deleteOrder(ids);
}
},
// 1 getList
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// getList
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
//
handleCloseOrderConfirm() {
if (this.closeOrder.content == null || this.closeOrder.content === '') {
this.$message({
message: '操作备注不能为空',
type: 'warning',
duration: 1000
});
return;
}
//
}
}
}
</script>
statusOptions: [
{
label: '待付款',
value: 0
},
{
label: '待发货',
value: 1
},
{
label: '已发货',
value: 2
},
{
label: '已完成',
value: 3
},
{
label: '已关闭',
value: 4
}
],
orderTypeOptions: [
{
label: '正常订单',
value: 0
},
{
label: '秒杀订单',
value: 1
}
],
sourceTypeOptions: [
{
label: 'PC订单',
value: 0
},
{
label: 'APP订单',
value: 1
}
],
operateOptions: [
{
label: "批量发货",
value: 1
},
{
label: "关闭订单",
value: 2
},
{
label: "删除订单",
value: 3
}
],
logisticsDialogVisible:false
}
},
created() {
this.getList();
},
filters: {
formatCreateTime(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
formatPayType(value) {
if (value === 1) {
return '支付宝';
} else if (value === 2) {
return '微信';
} else {
return '未支付';
}
},
formatSourceType(value) {
if (value === 1) {
return 'APP订单';
} else {
return 'PC订单';
}
},
formatStatus(value) {
if (value === 1) {
return '待发货';
} else if (value === 2) {
return '已发货';
} else if (value === 3) {
return '已完成';
} else if (value === 4) {
return '已关闭';
} else if (value === 5) {
return '无效订单';
} else {
return '待付款';
}
},
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleViewOrder(index, row){
this.$router.push({path:'/oms/orderDetail',query:{id:row.id}})
},
handleCloseOrder(index, row){
this.closeOrder.dialogVisible=true;
this.closeOrder.orderIds=[row.id];
},
handleDeliveryOrder(index, row){
let listItem = this.covertOrder(row);
this.$router.push({path:'/oms/deliverOrderList',query:{list:[listItem]}})
},
handleViewLogistics(index, row){
this.logisticsDialogVisible=true;
},
handleDeleteOrder(index, row){
let ids=[];
ids.push(row.id);
this.deleteOrder(ids);
},
handleBatchOperate(){
if(this.multipleSelection==null||this.multipleSelection.length<1){
this.$message({
message: '请选择要操作的订单',
type: 'warning',
duration: 1000
});
return;
}
if(this.operateType===1){
//
let list=[];
for(let i=0;i<this.multipleSelection.length;i++){
if(this.multipleSelection[i].status===1){
list.push(this.covertOrder(this.multipleSelection[i]));
}
}
if(list.length===0){
this.$message({
message: '选中订单中没有可以发货的订单',
type: 'warning',
duration: 1000
});
return;
}
this.$router.push({path:'/oms/deliverOrderList',query:{list:list}})
}else if(this.operateType===2){
//
this.closeOrder.orderIds=[];
for(let i=0;i<this.multipleSelection.length;i++){
this.closeOrder.orderIds.push(this.multipleSelection[i].id);
}
this.closeOrder.dialogVisible=true;
}else if(this.operateType===3){
//
let ids=[];
for(let i=0;i<this.multipleSelection.length;i++){
ids.push(this.multipleSelection[i].id);
}
this.deleteOrder(ids);
}
},
handleSizeChange(val){
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val){
this.listQuery.pageNum = val;
this.getList();
},
handleCloseOrderConfirm() {
if (this.closeOrder.content == null || this.closeOrder.content === '') {
this.$message({
message: '操作备注不能为空',
type: 'warning',
duration: 1000
});
return;
}
let params = new URLSearchParams();
params.append('ids', this.closeOrder.orderIds);
params.append('note', this.closeOrder.content);

File diff suppressed because it is too large Load Diff

@ -1,163 +1,127 @@
<template>
<!-- 使用 el-card 组件创建一个卡片式的容器设置类名为 "form-container"并通过 shadow="never" 属性取消卡片的阴影效果 -->
<el-card class="form-container" shadow="never">
<!-- el-form 组件用于创建表单它绑定了名为 "orderSetting" 的数据模型设置了表单的引用名称为 "orderSettingForm"同时指定了表单验证规则 "rules"以及标签的宽度为 150px -->
<el-form :model="orderSetting"
ref="orderSettingForm"
:rules="rules"
label-width="150px">
<!-- el-form-item 组件用于定义表单中的每一个表单项此处是针对 "秒杀订单超过" 这一设置项的表单项通过 prop 属性指定了验证对应的字段名 -->
<el-form-item label="秒杀订单超过:" prop="flashOrderOvertime">
<!-- el-input 组件创建一个输入框通过 v-model 指令双向绑定了 "orderSetting.flashOrderOvertime" 数据意味着用户在输入框中输入的值会实时更新到对应的数据属性中同时设置了类名 "input-width" 用于控制输入框宽度 -->
<el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
<!-- 使用 slot="append" 插槽在输入框后面添加一个单位文本 "分"用于提示用户输入的时间单位 -->
<template slot="append"></template>
</el-input>
<!-- 一个普通的 <span> 标签用于显示一段提示文本设置了类名 "note-margin" 来控制其左边距提示内容为未付款时订单自动关闭的相关说明 -->
<span class="note-margin">未付款订单自动关闭</span>
</el-form-item>
<!-- 与上面类似的表单项针对 "正常订单超过" 的设置同样有输入框及对应的提示信息 -->
<el-form-item label="正常订单超过:" prop="normalOrderOvertime">
<el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">未付款订单自动关闭</span>
</el-form-item>
<!-- 针对 "发货超过" 的表单项输入框用于输入天数后面跟着相应的提示文本 -->
<el-form-item label="发货超过:" prop="confirmOvertime">
<el-input v-model="orderSetting.confirmOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">未收货订单自动完成</span>
</el-form-item>
<!-- 针对 "订单完成超过" 的表单项此处有重复的标签名但应是不同业务场景下的时间设置同样有输入框和对应的提示内容 -->
<el-form-item label="订单完成超过:" prop="finishOvertime">
<el-input v-model="orderSetting.finishOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">自动结束交易不能申请售后</span>
</el-form-item>
<!-- 另一个针对 "订单完成超过" 的表单项可能对应不同的业务逻辑如自动五星好评相关的时间设置同样具备输入框和提示文本 -->
<el-form-item label="订单完成超过:" prop="commentOvertime">
<el-input v-model="orderSetting.commentOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">自动五星好评</span>
</el-form-item>
<!-- 定义一个表单项内部放置一个 el-button 按钮通过 @click 指令绑定了 "confirm('orderSettingForm')" 方法即点击按钮时会调用名为 "confirm" 的方法并传入 "orderSettingForm" 参数按钮类型设置为 "primary"文本显示为 "提交" -->
<el-form-item>
<el-button
@click="confirm('orderSettingForm')"
type="primary">提交</el-button>
</el-form-item>
</el-form>
</el-card>
<template> 
<el-card class="form-container" shadow="never">
<el-form :model="orderSetting"
ref="orderSettingForm"
:rules="rules"
label-width="150px">
<el-form-item label="秒杀订单超过:" prop="flashOrderOvertime">
<el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">未付款订单自动关闭</span>
</el-form-item>
<el-form-item label="正常订单超过:" prop="normalOrderOvertime">
<el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">未付款订单自动关闭</span>
</el-form-item>
<el-form-item label="发货超过:" prop="confirmOvertime">
<el-input v-model="orderSetting.confirmOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">未收货订单自动完成</span>
</el-form-item>
<el-form-item label="订单完成超过:" prop="finishOvertime">
<el-input v-model="orderSetting.finishOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">自动结束交易不能申请售后</span>
</el-form-item>
<el-form-item label="订单完成超过:" prop="commentOvertime">
<el-input v-model="orderSetting.commentOvertime" class="input-width">
<template slot="append"></template>
</el-input>
<span class="note-margin">自动五星好评</span>
</el-form-item>
<el-form-item>
<el-button
@click="confirm('orderSettingForm')"
type="primary">提交</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
// '@/api/orderSetting' "getOrderSetting" "updateOrderSetting"
import {getOrderSetting, updateOrderSetting} from '@/api/orderSetting';
// "defaultOrderSetting" 0 null
const defaultOrderSetting = {
id: null,
flashOrderOvertime: 0,
normalOrderOvertime: 0,
confirmOvertime: 0,
finishOvertime: 0,
commentOvertime: 0
};
// "checkTime" 使
const checkTime = (rule, value, callback) => {
// callback Error
if (!value) {
return callback(new Error('时间不能为空'));
}
console.log("checkTime", value);
// parseInt
let intValue = parseInt(value);
// callback Error
if (!Number.isInteger(intValue)) {
return callback(new Error('请输入数字值'));
import {getOrderSetting,updateOrderSetting} from '@/api/orderSetting';
const defaultOrderSetting = {
id: null,
flashOrderOvertime: 0,
normalOrderOvertime: 0,
confirmOvertime: 0,
finishOvertime: 0,
commentOvertime: 0
};
const checkTime = (rule, value, callback) => {
if (!value) {
return callback(new Error('时间不能为空'));
}
console.log("checkTime",value);
let intValue = parseInt(value);
if (!Number.isInteger(intValue)) {
return callback(new Error('请输入数字值'));
}
callback();
};
export default {
name: 'orderSetting',
data() {
return {
orderSetting: Object.assign({}, defaultOrderSetting),
rules: {
flashOrderOvertime:{validator: checkTime, trigger: 'blur' },
normalOrderOvertime:{validator: checkTime, trigger: 'blur' },
confirmOvertime: {validator: checkTime, trigger: 'blur' },
finishOvertime: {validator: checkTime, trigger: 'blur' },
commentOvertime:{validator: checkTime, trigger: 'blur' }
}
// callback
callback();
};
// Vue
export default {
// Vue "orderSetting"
name: 'orderSetting',
data() {
return {
// "orderSetting" Object.assign "defaultOrderSetting"
orderSetting: Object.assign({}, defaultOrderSetting),
// 使 "checkTime" 'blur'
rules: {
flashOrderOvertime: {validator: checkTime, trigger: 'blur'},
normalOrderOvertime: {validator: checkTime, trigger: 'blur'},
confirmOvertime: {validator: checkTime, trigger: 'blur'},
finishOvertime: {validator: checkTime, trigger: 'blur'},
commentOvertime: {validator: checkTime, trigger: 'blur'}
}
}
},
created() {
// "getDetail"
this.getDetail();
},
methods: {
// "confirm" "formName"
confirm(formName) {
// this.$refs[formName] validate "valid"
this.$refs[formName].validate((valid) => {
// "valid" true
if (valid) {
// 使 $confirm "warning"
this.$confirm('是否要提交修改?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// "" "updateOrderSetting" 1 "orderSetting"
// then 使 $message "!" 1000 1
updateOrderSetting(1, this.orderSetting).then(response => {
this.$message({
type: 'success',
message: '提交成功!',
duration: 1000
});
})
});
} else {
// "valid" false使 $message ""
this.$message({
message: '提交参数不合法',
type: 'warning'
});
return false;
}
}
},
created(){
this.getDetail();
},
methods:{
confirm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否要提交修改?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateOrderSetting(1,this.orderSetting).then(response=>{
this.$message({
type: 'success',
message: '提交成功!',
duration:1000
});
},
// "getDetail"
getDetail() {
// "getOrderSetting" 1 then "orderSetting" 便
getOrderSetting(1).then(response => {
this.orderSetting = response.data;
})
}
}
})
});
} else {
this.$message({
message: '提交参数不合法',
type: 'warning'
});
return false;
}
});
},
getDetail(){
getOrderSetting(1).then(response=>{
this.orderSetting=response.data;
})
}
}
}
</script>
<style scoped>
/* 定义类名为 "input-width" 的样式规则,设置元素的宽度为父元素宽度的 50%,这个类名应用到了输入框上,用于控制输入框在表单中的宽度占比,使其看起来更美观、布局更合理 */
.input-width {
width: 50%;
}
/* 定义类名为 "note-margin" 的样式规则,设置元素的左边距为 15 像素,这个类名应用到了提示文本的 <span> 标签上,用于控制提示文本与输入框之间的距离,使其有合适的间隔,视觉效果更好 */
.note-margin {
margin-left: 15px;
}
.input-width {
width: 50%;
}
.note-margin {
margin-left: 15px;
}
</style>

@ -1,18 +1,13 @@
<template>
<!-- 使用HomeAdvertiseDetail组件并传递一个名为isEdit的prop值为false -->
<template> 
<home-advertise-detail :isEdit="false"></home-advertise-detail>
</template>
<script>
// HomeAdvertiseDetail
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
//
export default {
// addHomeAdvertise
name: 'addHomeAdvertise',
// 使
components: { HomeAdvertiseDetail }
}
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
export default {
name: 'addHomeAdvertise',
components: { HomeAdvertiseDetail }
}
</script>
<style></style>

@ -1,19 +1,15 @@
<template> 
<el-card class="form-container" shadow="never">
<!-- 表单容器使用Element UI的卡片组件 -->
<el-form :model="homeAdvertise"
:rules="rules"
ref="homeAdvertiseFrom"
label-width="150px"
size="small">
<!-- 表单绑定数据模型和验证规则引用名称为'homeAdvertiseFrom' -->
<el-form-item label="广告名称:" prop="name">
<el-input v-model="homeAdvertise.name" class="input-width"></el-input>
<!-- 输入框绑定到homeAdvertise.name用于输入广告名称 -->
</el-form-item>
<el-form-item label="广告位置:">
<el-select v-model="homeAdvertise.type">
<!-- 下拉选择框绑定到homeAdvertise.type用于选择广告位置 -->
<el-option
v-for="type in typeOptions"
:key="type.value"
@ -27,33 +23,27 @@
type="datetime"
placeholder="选择日期"
v-model="homeAdvertise.startTime"></el-date-picker>
<!-- 日期选择器绑定到homeAdvertise.startTime用于选择开始时间 -->
</el-form-item>
<el-form-item label="到期时间:" prop="endTime">
<el-date-picker
type="datetime"
placeholder="选择日期"
v-model="homeAdvertise.endTime"></el-date-picker>
<!-- 日期选择器绑定到homeAdvertise.endTime用于选择到期时间 -->
</el-form-item>
<el-form-item label="上线/下线:">
<el-radio-group v-model="homeAdvertise.status">
<!-- 单选按钮组绑定到homeAdvertise.status用于选择广告状态上线或下线 -->
<el-radio :label="0">下线</el-radio>
<el-radio :label="1">上线</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="广告图片:">
<single-upload v-model="homeAdvertise.pic"></single-upload>
<!-- 自定义上传组件绑定到homeAdvertise.pic用于上传广告图片 -->
</el-form-item>
<el-form-item label="排序:">
<el-input v-model="homeAdvertise.sort" class="input-width"></el-input>
<!-- 输入框绑定到homeAdvertise.sort用于输入广告排序 -->
</el-form-item>
<el-form-item label="广告链接:" prop="url">
<el-input v-model="homeAdvertise.url" class="input-width"></el-input>
<!-- 输入框绑定到homeAdvertise.url用于输入广告链接 -->
</el-form-item>
<el-form-item label="广告备注:">
<el-input
@ -63,21 +53,18 @@
placeholder="请输入内容"
v-model="homeAdvertise.note">
</el-input>
<!-- 文本域绑定到homeAdvertise.note用于输入广告备注 -->
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('homeAdvertiseFrom')"></el-button>
<!-- 提交按钮点击时调用submitForm方法 -->
<el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')"></el-button>
<!-- 重置按钮点击时调用resetForm方法 -->
</el-form-item>
</el-form>
</el-card>
</template>
<script>
import SingleUpload from '@/components/Upload/singleUpload' //
import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise' // API
const defaultTypeOptions = [ // 广
import SingleUpload from '@/components/Upload/singleUpload'
import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise'
const defaultTypeOptions = [
{
label: 'PC首页轮播',
value: 0
@ -87,7 +74,7 @@
value: 1
}
];
const defaultHomeAdvertise = { // 广
const defaultHomeAdvertise = {
name: null,
type: 1,
pic: null,
@ -99,18 +86,18 @@
sort: 0
};
export default {
name: 'HomeAdvertiseDetail', //
components:{SingleUpload}, //
props: { // isEdit
name: 'HomeAdvertiseDetail',
components:{SingleUpload},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() { //
data() {
return {
homeAdvertise: null, // 广
rules: { //
homeAdvertise: null,
rules: {
name: [
{required: true, message: '请输入广告名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
@ -128,42 +115,42 @@
{required: true, message: '请选择广告图片', trigger: 'blur'}
]
},
typeOptions: Object.assign({}, defaultTypeOptions) // 广
typeOptions: Object.assign({}, defaultTypeOptions)
}
},
created(){ //
if (this.isEdit) { // 广homeAdvertise
created(){
if (this.isEdit) {
getHomeAdvertise(this.$route.query.id).then(response => {
this.homeAdvertise = response.data;
});
}else{ // homeAdvertise
}else{
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
}
},
methods: { //
onSubmit(formName) { //
this.$refs[formName].validate((valid) => { //
if (valid) { // API
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) { // 广API
if (this.isEdit) {
updateHomeAdvertise(this.$route.query.id, this.homeAdvertise).then(response => {
this.$refs[formName].resetFields(); //
this.$message({ //
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration:1000
});
this.$router.back(); //
this.$router.back();
});
} else { // 广API
} else {
createHomeAdvertise(this.homeAdvertise).then(response => {
this.$refs[formName].resetFields(); //
this.homeAdvertise = Object.assign({},defaultHomeAdvertise); // homeAdvertise
this.$message({ //
this.$refs[formName].resetFields();
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
this.$message({
message: '提交成功',
type: 'success',
duration:1000
@ -172,26 +159,26 @@
}
});
} else { //
} else {
this.$message({
message: '验证失败',
type: 'error',
duration:1000
});
return false; //
return false;
}
});
},
resetForm(formName) { //
this.$refs[formName].resetFields(); //
this.homeAdvertise = Object.assign({},defaultHomeAdvertise); // homeAdvertise
resetForm(formName) {
this.$refs[formName].resetFields();
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
}
}
}
</script>
<style scoped> // scoped
.input-width { //
width: 70%; // 70%
<style scoped>
.input-width {
width: 70%;
}
</style>

@ -1,13 +1,9 @@
<template> 
<div class="app-container">
<!-- 筛选搜索区域 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标 -->
<i class="el-icon-search"></i>
<!-- 筛选搜索文本 -->
<span>筛选搜索</span>
<!-- 查询按钮 -->
<el-button
style="float:right"
type="primary"
@ -15,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -23,14 +18,11 @@
重置
</el-button>
</div>
<!-- 表单布局用于输入筛选条件 -->
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 广告名称筛选项 -->
<el-form-item label="广告名称:">
<el-input v-model="listQuery.name" class="input-width" placeholder="广告名称"></el-input>
</el-form-item>
<!-- 广告位置筛选项 -->
<el-form-item label="广告位置:">
<el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
<el-option v-for="item in typeOptions"
@ -40,7 +32,6 @@
</el-option>
</el-select>
</el-form-item>
<!-- 到期时间筛选项 -->
<el-form-item label="到期时间:">
<el-date-picker
class="input-width"
@ -53,48 +44,36 @@
</el-form>
</div>
</el-card>
<!-- 操作区域 -->
<el-card class="operate-container" shadow="never">
<!-- 操作图标 -->
<i class="el-icon-tickets"></i>
<!-- 数据列表文本 -->
<span>数据列表</span>
<!-- 添加广告按钮 -->
<el-button size="mini" class="btn-add" @click="handleAdd()">广</el-button>
</el-card>
<!-- 表格展示区域 -->
<div class="table-container">
<el-table ref="homeAdvertiseTable"
: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="120" 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="120" align="center">
<template slot-scope="scope">{{scope.row.type | formatType}}</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="时间" width="220" align="center">
<template slot-scope="scope">
<p>开始时间{{scope.row.startTime | formatTime}}</p>
<p>到期时间{{scope.row.endTime | formatTime}}</p>
</template>
</el-table-column>
<!-- 上线/下线状态列 -->
<el-table-column label="上线/下线" width="120" align="center">
<template slot-scope="scope">
<el-switch
@ -105,23 +84,18 @@
</el-switch>
</template>
</el-table-column>
<!-- 点击次数列 -->
<el-table-column label="点击次数" width="120" align="center">
<template slot-scope="scope">{{scope.row.clickCount}}</template>
</el-table-column>
<!-- 生成订单列 -->
<el-table-column label="生成订单" width="120" align="center">
<template slot-scope="scope">{{scope.row.orderCount}}</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<!-- 编辑按钮 -->
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<!-- 删除按钮 -->
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
@ -130,13 +104,10 @@
</el-table-column>
</el-table>
</div>
<!-- 这是一个包含批量操作和分页功能的容器 div -->
<div class="batch-operate-container">
<!-- el-select 组件用于选择批量操作的类型设置了 small 尺寸并使用 v-model 双向绑定数据到 operateType 变量placeholder 用于显示默认提示文本 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 使用 v-for 循环遍历 operates 数组来生成 el-option 选项每个选项的 key 根据 item.value 来设置label 显示文本取自 item.labelvalue 值取自 item.value -->
<el-option
v-for="item in operates"
:key="item.value"
@ -144,7 +115,6 @@
:value="item.value">
</el-option>
</el-select>
<!-- el-button 组件是一个按钮设置了左边距为 20 像素添加了 search-button 类名绑定了点击事件 handleBatchOperate()按钮类型为 primary通常是主要操作按钮的样式尺寸为 small -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -154,7 +124,6 @@
确定
</el-button>
</div>
<!-- 这是一个用于分页功能展示的容器 div -->
<div class="pagination-container">
<el-pagination
background
@ -170,200 +139,169 @@
</div>
</template>
<script>
// '@/api/homeAdvertise'广
import {fetchList, updateStatus, deleteHomeAdvertise} from '@/api/homeAdvertise';
// '@/utils/date'
import {formatDate} from '@/utils/date';
//
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
name: null,
type: null,
endTime: null
};
// 广PCAPP
const defaultTypeOptions = [
{
label: 'PC首页轮播',
value: 0
},
{
label: 'APP首页轮播',
value: 1
}
];
export default {
name: 'homeAdvertiseList',
data() {
return {
//
listQuery: Object.assign({}, defaultListQuery),
// 广
typeOptions: Object.assign({}, defaultTypeOptions),
// 广null
list: null,
// 广null
total: null,
// false
listLoading: false,
// 广
multipleSelection: [],
//
operates: [
{
label: "删除",
value: 0
}
],
// null
operateType: null
}
},
created() {
// 广
this.getList();
},
filters: {
// 广
formatType(type) {
if (type === 1) {
return 'APP首页轮播';
} else {
return 'PC首页轮播';
}
import {fetchList,updateStatus,deleteHomeAdvertise} from '@/api/homeAdvertise';
import {formatDate} from '@/utils/date';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
name: null,
type: null,
endTime:null
};
const defaultTypeOptions = [
{
label: 'PC首页轮播',
value: 0
},
//
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
{
label: 'APP首页轮播',
value: 1
}
];
export default {
name: 'homeAdvertiseList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
typeOptions: Object.assign({}, defaultTypeOptions),
list: null,
total: null,
listLoading: false,
multipleSelection: [],
operates: [
{
label: "删除",
value: 0
}
],
operateType: null
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
//
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
//
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
//
handleSelectionChange(val) {
this.multipleSelection = val;
},
//
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
created() {
this.getList();
},
//
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
filters:{
formatType(type){
if(type===1){
return 'APP首页轮播';
}else{
return 'PC首页轮播';
}
},
formatTime(time){
if(time==null||time===''){
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
// 广
handleUpdateStatus(index, row) {
this.$confirm('是否要修改上线/下线状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.getList();
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleUpdateStatus(index,row){
this.$confirm('是否要修改上线/下线状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id,{status:row.status}).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '修改成功!'
message: '已取消操作!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
// 广广
handleDelete(index, row) {
this.deleteHomeAdvertise(row.id);
},
//
handleBatchOperate() {
if (this.multipleSelection < 1) {
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);
}
if (this.operateType === 0) {
//
this.deleteHomeAdvertise(ids);
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
// 广广
handleAdd() {
this.$router.push({path: '/sms/addAdvertise'})
},
// 广广广id
handleUpdate(index, row) {
this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
},
// 广true
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
// 广
deleteHomeAdvertise(ids) {
this.$confirm('是否要删除该广告?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
params.append("ids", ids);
deleteHomeAdvertise(params).then(response => {
this.getList();
});
},
handleDelete(index,row){
this.deleteHomeAdvertise(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
type: 'success',
message: '删除成功!'
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
});
})
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if(this.operateType===0){
//
this.deleteHomeAdvertise(ids);
}else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
handleAdd(){
this.$router.push({path: '/sms/addAdvertise'})
},
handleUpdate(index,row){
this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
deleteHomeAdvertise(ids){
this.$confirm('是否要删除该广告?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHomeAdvertise(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
}
}
}
}
</script>
<style scoped>
<!-- 带有scoped属性的style标签里面样式仅作用于当前组件 -->
.input-width {
<!-- 定义类选择器样式设置宽度为203px -->
width: 203px;
}
.input-width {
width: 203px;
}
</style>

@ -1,17 +1,13 @@
<template>
<!-- 在模板中使用了名为home-advertise-detail的自定义组件并传递了一个名为isEdit且值为true的属性可能用于控制该组件处于编辑状态相关的展示或功能 -->
<template> 
<home-advertise-detail :isEdit="true"></home-advertise-detail>
</template>
<script>
// HomeAdvertiseDetail'./components/HomeAdvertiseDetail'
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
export default {
name: 'updateHomeAdvertise',
// HomeAdvertiseDetail使使
components: { HomeAdvertiseDetail }
}
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
export default {
name: 'updateHomeAdvertise',
components: { HomeAdvertiseDetail }
}
</script>
<style></style>

@ -1,14 +1,9 @@
<template>
<!-- 页面整体的外层容器用于布局和包裹内部各部分内容 -->
<template> 
<div class="app-container">
<!-- 筛选搜索区域的卡片容器设置无阴影效果 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 显示搜索图标 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索的文字提示 -->
<span>筛选搜索</span>
<!-- 用于触发查询搜索的按钮绑定对应点击事件设置样式等属性 -->
<el-button
style="float:right"
type="primary"
@ -16,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 用于重置筛选条件的按钮绑定对应点击事件设置样式等属性 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,18 +19,12 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 行内表单绑定数据模型设置尺寸标签宽度等属性 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 品牌名称输入框的表单项 -->
<el-form-item label="品牌名称:">
<!-- 输入框双向绑定品牌名称数据设置类名和占位提示 -->
<el-input v-model="listQuery.brandName" class="input-width" placeholder="品牌名称"></el-input>
</el-form-item>
<!-- 推荐状态选择框的表单项 -->
<el-form-item label="推荐状态:">
<!-- 下拉选择框双向绑定推荐状态数据设置占位提示等属性 -->
<el-select v-model="listQuery.recommendStatus" placeholder="全部" clearable class="input-width">
<!-- 循环生成下拉选项 -->
<el-option v-for="item in recommendOptions"
:key="item.value"
:label="item.label"
@ -47,51 +35,40 @@
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片容器无阴影效果 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 用于触发选择品牌操作的按钮绑定点击事件 -->
<el-button size="mini" class="btn-add" @click="handleSelectBrand()"></el-button>
</el-card>
<!-- 放置数据表格的容器 -->
<div class="table-container">
<!-- 数据表格组件绑定数据设置宽度等属性还有选择改变等相关事件 -->
<el-table ref="homeBrandTable"
: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="120" 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.brandName}}</template>
</el-table-column>
<!-- 通过开关显示是否推荐的表格列绑定状态改变事件 -->
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
</template>
</el-table-column>
<!-- 显示排序的表格列 -->
<el-table-column label="排序" width="160" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 显示状态的表格列使用过滤器格式化内容 -->
<el-table-column label="状态" width="160" align="center">
<template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
</el-table-column>
<!-- 显示操作按钮的表格列 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -106,13 +83,10 @@
</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"
@ -120,7 +94,6 @@
:value="item.value">
</el-option>
</el-select>
<!-- 触发批量操作的按钮设置样式类型等属性绑定点击事件 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -130,9 +103,7 @@
确定
</el-button>
</div>
<!-- 分页组件的容器 -->
<div class="pagination-container">
<!-- 分页组件设置背景各类事件绑定页面尺寸等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -144,26 +115,19 @@
:total="total">
</el-pagination>
</div>
<!-- 选择品牌的对话框组件设置标题可见性绑定宽度等属性 -->
<el-dialog title="选择品牌" :visible.sync="selectDialogVisible" width="40%">
<!-- 对话框内的品牌名称搜索输入框绑定数据设置样式等属性 -->
<el-input v-model="dialogData.listQuery.keyword"
style="width: 250px;margin-bottom: 20px"
size="small"
placeholder="品牌名称搜索">
<!-- 输入框后的搜索按钮绑定点击事件 -->
<el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
</el-input>
<!-- 对话框内展示品牌相关数据的表格设置数据绑定选择改变事件等属性 -->
<el-table :data="dialogData.list"
@selection-change="handleDialogSelectionChange" border>
<!-- 显示选择框的表格列 -->
<el-table-column type="selection" width="60" align="center"></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="220" align="center">
<template slot-scope="scope">
商品<span class="color-main">{{scope.row.productCount}}</span>
@ -171,9 +135,7 @@
</template>
</el-table-column>
</el-table>
<!-- 对话框内的分页组件容器 -->
<div class="pagination-container">
<!-- 分页组件设置背景各类事件绑定页面尺寸等属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@ -187,30 +149,23 @@
</div>
<div style="clear: both;"></div>
<div slot="footer">
<!-- 对话框取消按钮点击隐藏对话框 -->
<el-button size="small" @click="selectDialogVisible = false"> </el-button>
<!-- 对话框确认按钮绑定点击事件 -->
<el-button size="small" type="primary" @click="handleSelectDialogConfirm()"> </el-button>
</div>
</el-dialog>
<!-- 设置排序的对话框组件设置标题可见性绑定宽度等属性 -->
<el-dialog title="设置排序"
:visible.sync="sortDialogVisible"
width="40%">
<!-- 对话框内的表单绑定数据模型设置标签宽度等属性 -->
<el-form :model="sortDialogData"
label-width="150px">
<!-- 排序输入框的表单项 -->
<el-form-item label="排序:">
<el-input v-model="sortDialogData.sort" style="width: 200px"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<!-- 对话框取消按钮点击隐藏对话框 -->
<el-button @click="sortDialogVisible = false" size="small"> </el-button>
<!-- 对话框确认按钮绑定点击事件 -->
<el-button type="primary" @click="handleUpdateSort" size="small"> </el-button>
</span>
<el-button @click="sortDialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleUpdateSort" size="small"> </el-button>
</span>
</el-dialog>
</div>
</template>

@ -1,21 +1,14 @@
<template>
<!-- 在模板中使用了coupon-detail组件并传递isEdit属性值为false可能用于区分添加或编辑操作 -->
<template> 
<coupon-detail :isEdit="false"></coupon-detail>
</template>
<script>
// CouponDetail'./components/CouponDetail'
import CouponDetail from './components/CouponDetail';
export default {
// addCoupon
name: 'addCoupon',
// CouponDetail使使
components: { CouponDetail }
}
import CouponDetail from './components/CouponDetail'
export default {
name: 'addCoupon',
components: { CouponDetail }
}
</script>
<style scoped>
<!-- 带有scoped属性的style标签里面样式仅作用于当前组件目前为空 -->
</style>

@ -1,16 +1,12 @@
<template>
<!-- el-card组件作为表单的容器设置了类名和无阴影效果 -->
<template> 
<el-card class="form-container" shadow="never">
<!-- el-form表单组件绑定了数据模型coupon设置了验证规则表单引用标签宽度和尺寸等属性 -->
<el-form :model="coupon"
:rules="rules"
ref="couponFrom"
label-width="150px"
size="small">
<!-- 优惠券类型的表单项使用el-select下拉选择框来选择类型 -->
<el-form-item label="优惠券类型:">
<el-select v-model="coupon.type">
<!-- 通过v-for循环生成下拉选项 -->
<el-option
v-for="type in typeOptions"
:key="type.value"
@ -19,14 +15,11 @@
</el-option>
</el-select>
</el-form-item>
<!-- 优惠券名称的表单项使用el-input输入框输入名称设置了数据绑定和类名 -->
<el-form-item label="优惠券名称:" prop="name">
<el-input v-model="coupon.name" class="input-width"></el-input>
</el-form-item>
<!-- 适用平台的表单项用el-select下拉选择框选择平台 -->
<el-form-item label="适用平台:">
<el-select v-model="coupon.platform">
<!-- 通过v-for循环生成下拉选项 -->
<el-option
v-for="item in platformOptions"
:key="item.value"
@ -35,40 +28,33 @@
</el-option>
</el-select>
</el-form-item>
<!-- 总发行量的表单项用el-input输入框输入发行量设置了数据绑定和占位提示等属性 -->
<el-form-item label="总发行量:" prop="publishCount">
<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
</el-form-item>
<!-- 面额的表单项用el-input输入框输入面额设置了数据绑定占位提示和后缀文本等属性 -->
<el-form-item label="面额:" prop="amount">
<el-input v-model.number="coupon.amount" placeholder="面值只能是数值限2位小数" class="input-width">
<template slot="append"></template>
</el-input>
</el-form-item>
<!-- 每人限领的表单项用el-input输入框输入限领数量设置了数据绑定和后缀文本等属性 -->
<el-form-item label="每人限领:">
<el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
<template slot="append"></template>
</el-input>
</el-form-item>
<!-- 使用门槛的表单项用el-input输入框输入门槛金额设置了数据绑定前后缀文本等属性 -->
<el-form-item label="使用门槛:" prop="minPoint">
<el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
<template slot="prepend"></template>
<template slot="append">元可用</template>
</el-input>
</el-form-item>
<!-- 领取日期的表单项用el-date-picker日期选择器选择日期设置了数据绑定和类名等属性 -->
<el-form-item label="领取日期:" prop="enableTime">
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.enableTime" class="input-width"></el-date-picker>
</el-form-item>
<!-- 有效期的表单项通过两个el-date-picker日期选择器分别选择开始和结束日期 -->
<el-form-item label="有效期:">
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.startTime" style="width: 150px"></el-date-picker>
<span style="margin-left: 20px;margin-right: 20px"></span>
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.endTime" style="width: 150px"></el-date-picker>
</el-form-item>
<!-- 可使用商品的表单项用el-radio-group单选按钮组选择使用类型 -->
<el-form-item label="可使用商品:">
<el-radio-group v-model="coupon.useType">
<el-radio-button :label="0">全场通用</el-radio-button>
@ -76,27 +62,21 @@
<el-radio-button :label="2">指定商品</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 当可使用商品类型为指定分类时显示的内容包含分类选择器添加按钮和展示关联分类关系的表格 -->
<el-form-item v-show="coupon.useType===1">
<!-- el-cascader分类选择器用于选择分类设置了可清除占位提示等属性 -->
<el-cascader
clearable
placeholder="请选择分类名称"
v-model="selectProductCate"
:options="productCateOptions">
</el-cascader>
<!-- 添加分类关联的按钮绑定点击事件 -->
<el-button @click="handleAddProductCategoryRelation()"></el-button>
<!-- 展示已添加的分类关联关系的表格设置了数据绑定等属性 -->
<el-table ref="productCateRelationTable"
:data="coupon.productCategoryRelationList"
style="width: 100%;margin-top: 20px"
border>
<!-- 显示分类名称的表格列 -->
<el-table-column label="分类名称" align="center">
<template slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
</el-table-column>
<!-- 显示操作按钮删除的表格列 -->
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button size="mini"
@ -107,9 +87,7 @@
</el-table-column>
</el-table>
</el-form-item>
<!-- 当可使用商品类型为指定商品时显示的内容包含商品选择框添加按钮和展示关联商品关系的表格 -->
<el-form-item v-show="coupon.useType===2">
<!-- el-select商品选择框设置了可过滤远程搜索等属性 -->
<el-select
v-model="selectProduct"
filterable
@ -118,7 +96,6 @@
placeholder="商品名称/商品货号"
:remote-method="searchProductMethod"
:loading="selectProductLoading">
<!-- 通过v-for循环生成商品选项 -->
<el-option
v-for="item in selectProductOptions"
:key="item.productId"
@ -128,22 +105,17 @@
<span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
</el-option>
</el-select>
<!-- 添加商品关联的按钮绑定点击事件 -->
<el-button @click="handleAddProductRelation()"></el-button>
<!-- 展示已添加的商品关联关系的表格设置了数据绑定等属性 -->
<el-table ref="productRelationTable"
:data="coupon.productRelationList"
style="width: 100%;margin-top: 20px"
border>
<!-- 显示商品名称的表格列 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.productName}}</template>
</el-table-column>
<!-- 显示商品货号的表格列 -->
<el-table-column label="货号" align="center" width="120" >
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column>
<!-- 显示操作按钮删除的表格列 -->
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button size="mini"
@ -154,7 +126,6 @@
</el-table-column>
</el-table>
</el-form-item>
<!-- 备注的表单项用el-input输入框输入备注内容设置了类名类型为文本域等属性 -->
<el-form-item label="备注:">
<el-input
class="input-width"
@ -164,276 +135,241 @@
v-model="coupon.note">
</el-input>
</el-form-item>
<!-- 提交和重置按钮所在的表单项 -->
<el-form-item>
<!-- 提交按钮设置类型为primary绑定点击事件 -->
<el-button type="primary" @click="onSubmit('couponFrom')"></el-button>
<!-- 重置按钮根据条件判断是否显示绑定点击事件 -->
<el-button v-if="!isEdit" @click="resetForm('couponFrom')"></el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
// '@/api/coupon'
import {createCoupon, getCoupon, updateCoupon} from '@/api/coupon';
// '@/api/product'fetchProductList
import {fetchSimpleList as fetchProductList} from '@/api/product';
// '@/api/productCate'
import {fetchListWithChildren} from '@/api/productCate';
//
const defaultCoupon = {
type: 0,
name: null,
platform: 0,
amount: null,
perLimit: 1,
minPoint: null,
startTime: null,
endTime: null,
useType: 0,
note: null,
publishCount: null,
productRelationList: [],
productCategoryRelationList: []
};
//
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
// PC
const defaultPlatformOptions = [
{
label: '全平台',
value: 0
},
{
label: '移动平台',
value: 1
},
{
label: 'PC平台',
value: 2
}
];
export default {
name: 'CouponDetail',
// isEditfalse
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
//
coupon: Object.assign({}, defaultCoupon),
//
typeOptions: Object.assign({}, defaultTypeOptions),
//
platformOptions: Object.assign({}, defaultPlatformOptions),
//
rules: {
name: [
{required: true, message: '请输入优惠券名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
publishCount: [
{type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
],
amount: [
{type: 'number', required: true, message: '面值只能是数值0.01-10000限2位小数', trigger: 'blur'}
],
minPoint: [
{type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
]
},
// null
selectProduct: null,
// false
selectProductLoading: false,
//
selectProductOptions: [],
// null
selectProductCate: null,
//
productCateOptions: []
import {createCoupon,getCoupon,updateCoupon} from '@/api/coupon';
import {fetchSimpleList as fetchProductList} from '@/api/product';
import {fetchListWithChildren} from '@/api/productCate'
const defaultCoupon = {
type: 0,
name: null,
platform: 0,
amount: null,
perLimit: 1,
minPoint: null,
startTime: null,
endTime: null,
useType: 0,
note: null,
publishCount: null,
productRelationList: [],
productCategoryRelationList: []
};
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
},
created() {
// coupon
if (this.isEdit) {
getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
});
];
const defaultPlatformOptions = [
{
label: '全平台',
value: 0
},
{
label: '移动平台',
value: 1
},
{
label: 'PC平台',
value: 2
}
//
this.getProductCateList();
},
methods: {
//
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateCoupon(this.$route.query.id, this.coupon).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
];
export default {
name: 'CouponDetail',
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
coupon: Object.assign({}, defaultCoupon),
typeOptions: Object.assign({}, defaultTypeOptions),
platformOptions: Object.assign({}, defaultPlatformOptions),
rules: {
name: [
{required: true, message: '请输入优惠券名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
publishCount: [
{type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
],
amount: [
{type: 'number',required: true,message: '面值只能是数值0.01-10000限2位小数',trigger: 'blur'}
],
minPoint: [
{type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
]
},
selectProduct:null,
selectProductLoading: false,
selectProductOptions:[],
selectProductCate: null,
productCateOptions: []
}
},
created(){
if(this.isEdit){
getCoupon(this.$route.query.id).then(response=>{
this.coupon=response.data;
});
}
this.getProductCateList();
},
methods:{
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.isEdit){
updateCoupon(this.$route.query.id,this.coupon).then(response=>{
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration:1000
});
this.$router.back();
});
this.$router.back();
});
} else {
createCoupon(this.coupon).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '提交成功',
type: 'success',
duration: 1000
}else{
createCoupon(this.coupon).then(response=>{
this.$refs[formName].resetFields();
this.$message({
message: '提交成功',
type: 'success',
duration:1000
});
this.$router.back();
});
this.$router.back();
});
}
});
} else {
this.$message({
message: '验证失败',
type: 'error',
duration:1000
});
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.coupon = Object.assign({},defaultCoupon);
},
searchProductMethod(query){
if (query !== '') {
this.loading = true;
fetchProductList({keyword:query}).then(response=>{
this.loading=false;
let productList = response.data;
this.selectProductOptions = [];
for(let i=0;i<productList.length;i++){
let item = productList[i];
this.selectProductOptions.push({productId:item.id,productName:item.name,productSn:item.productSn});
}
});
} else {
this.selectProductOptions = [];
}
},
handleAddProductRelation(){
if(this.selectProduct===null){
this.$message({
message: '验证失败',
type: 'error',
duration: 1000
message: '请先选择商品',
type: 'warning'
});
return false;
return
}
});
},
// coupon
resetForm(formName) {
this.$refs[formName].resetFields();
this.coupon = Object.assign({}, defaultCoupon);
},
//
searchProductMethod(query) {
if (query!== '') {
this.loading = true;
fetchProductList({keyword: query}).then(response => {
this.loading = false;
let productList = response.data;
this.selectProductOptions = [];
for (let i = 0; i < productList.length; i++) {
let item = productList[i];
this.selectProductOptions.push({productId: item.id, productName: item.name, productSn: item.productSn});
this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
this.selectProduct=null;
},
handleDeleteProductRelation(index,row){
this.coupon.productRelationList.splice(index,1);
},
handleAddProductCategoryRelation(){
if(this.selectProductCate===null||this.selectProductCate.length===0){
this.$message({
message: '请先选择商品分类',
type: 'warning'
});
return
}
this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
this.selectProductCate=[];
},
handleDeleteProductCateRelation(index,row){
this.coupon.productCategoryRelationList.splice(index,1);
},
getProductById(id){
for(let i=0;i<this.selectProductOptions.length;i++){
if(id===this.selectProductOptions[i].productId){
return this.selectProductOptions[i];
}
});
} else {
this.selectProductOptions = [];
}
},
//
handleAddProductRelation() {
if (this.selectProduct === null) {
this.$message({
message: '请先选择商品',
type: 'warning'
});
return
}
this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
this.selectProduct = null;
},
//
handleDeleteProductRelation(index, row) {
this.coupon.productRelationList.splice(index, 1);
},
//
handleAddProductCategoryRelation() {
if (this.selectProductCate === null || this.selectProductCate.length === 0) {
this.$message({
message: '请先选择商品分类',
type: 'warning'
});
return
}
this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
this.selectProductCate = [];
},
//
handleDeleteProductCateRelation(index, row) {
this.coupon.productCategoryRelationList.splice(index, 1);
},
// idid
getProductById(id) {
for (let i = 0; i < this.selectProductOptions.length; i++) {
if (id === this.selectProductOptions[i].productId) {
return this.selectProductOptions[i];
}
}
return null;
},
//
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});
return null;
},
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});
}
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
}
});
},
// idid
getProductCateByIds(ids) {
let name;
let parentName;
for (let i = 0; i < this.productCateOptions.length; i++) {
if (this.productCateOptions[i].value === ids[0]) {
parentName = this.productCateOptions[i].label;
for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
if (this.productCateOptions[i].children[j].value === ids[1]) {
name = this.productCateOptions[i].children[j].label;
});
},
getProductCateByIds(ids){
let name;
let parentName;
for (let i = 0; i < this.productCateOptions.length; i++) {
if (this.productCateOptions[i].value === ids[0]) {
parentName = this.productCateOptions[i].label;
for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
if (this.productCateOptions[i].children[j].value === ids[1]) {
name = this.productCateOptions[i].children[j].label;
}
}
}
}
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
}
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
}
}
}
</script>
<style scoped>
<!-- 带有scoped属性的style标签意味着里面定义的样式仅作用于当前组件内的元素 -->
.input-width {
<!-- 定义了一个类选择器样式作用是将应用该类的元素宽度设置为其父元素宽度的60% -->
width: 60%;
}
.input-width {
width: 60%;
}
</style>

@ -1,79 +1,45 @@
<template>
<!-- 整体的外层容器用于布局包裹内部各部分内容 -->
<template> 
<div class="app-container">
<!-- 用于表格布局的容器 -->
<div class="table-layout">
<!-- el-row行组件里面放置多个列用于显示表格标题 -->
<el-row>
<!-- el-col列组件设置占4格宽度显示名称标题 -->
<el-col :span="4" class="table-cell-title">名称</el-col>
<!-- el-col列组件设置占4格宽度显示优惠券类型标题 -->
<el-col :span="4" class="table-cell-title">优惠券类型</el-col>
<!-- el-col列组件设置占4格宽度显示可使用商品标题 -->
<el-col :span="4" class="table-cell-title">可使用商品</el-col>
<!-- el-col列组件设置占4格宽度显示使用门槛标题 -->
<el-col :span="4" class="table-cell-title">使用门槛</el-col>
<!-- el-col列组件设置占4格宽度显示面值标题 -->
<el-col :span="4" class="table-cell-title">面值</el-col>
<!-- el-col列组件设置占4格宽度显示状态标题 -->
<el-col :span="4" class="table-cell-title">状态</el-col>
</el-row>
<!-- el-row行组件里面放置多个列用于显示对应优惠券的具体信息使用了过滤器来格式化显示内容 -->
<el-row>
<!-- el-col列组件设置占4格宽度显示优惠券名称 -->
<el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
<!-- el-col列组件设置占4格宽度显示格式化后的优惠券类型 -->
<el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
<!-- el-col列组件设置占4格宽度显示格式化后的可使用商品类型 -->
<el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
<!-- el-col列组件设置占4格宽度按格式显示使用门槛 -->
<el-col :span="4" class="table-cell">{{coupon.minPoint}}元可用</el-col>
<!-- el-col列组件设置占4格宽度显示优惠券面值 -->
<el-col :span="4" class="table-cell">{{coupon.amount}}</el-col>
<!-- el-col列组件设置占4格宽度显示格式化后的状态 -->
<el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
</el-row>
<!-- el-row行组件里面放置多个列用于显示表格另一部分标题 -->
<el-row>
<!-- el-col列组件设置占4格宽度显示有效期标题 -->
<el-col :span="4" class="table-cell-title">有效期</el-col>
<!-- el-col列组件设置占4格宽度显示总发行量标题 -->
<el-col :span="4" class="table-cell-title">总发行量</el-col>
<!-- el-col列组件设置占4格宽度显示已领取标题 -->
<el-col :span="4" class="table-cell-title">已领取</el-col>
<!-- el-col列组件设置占4格宽度显示待领取标题 -->
<el-col :span="4" class="table-cell-title">待领取</el-col>
<!-- el-col列组件设置占4格宽度显示已使用标题 -->
<el-col :span="4" class="table-cell-title">已使用</el-col>
<!-- el-col列组件设置占4格宽度显示未使用标题 -->
<el-col :span="4" class="table-cell-title">未使用</el-col>
</el-row>
<!-- el-row行组件里面放置多个列用于显示对应优惠券相关数量等具体信息使用了日期格式化等过滤器 -->
<el-row>
<!-- el-col列组件设置占4格宽度按格式显示有效期使用了日期格式化过滤器 -->
<el-col :span="4" class="table-cell" style="font-size: 13px">
{{coupon.startTime|formatDate}}{{coupon.endTime|formatDate}}
</el-col>
<!-- el-col列组件设置占4格宽度显示总发行量 -->
<el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
<!-- el-col列组件设置占4格宽度显示已领取数量 -->
<el-col :span="4" class="table-cell">{{coupon.receiveCount}}</el-col>
<!-- el-col列组件设置占4格宽度通过计算显示待领取数量 -->
<el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.receiveCount}}</el-col>
<!-- el-col列组件设置占4格宽度显示已使用数量 -->
<el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.receiveCount}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col>
<!-- el-col列组件设置占4格宽度通过计算显示未使用数量 -->
<el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.useCount}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col>
</el-row>
</div>
<!-- 筛选搜索区域的卡片容器设置无阴影效果 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 显示搜索图标 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索文字提示 -->
<span>筛选搜索</span>
<!-- 用于触发查询搜索的按钮绑定点击事件设置样式等属性 -->
<el-button
style="float:right"
type="primary"
@ -81,7 +47,6 @@
size="small">
查询搜索
</el-button>
<!-- 用于重置筛选条件的按钮绑定点击事件设置样式等属性 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -90,11 +55,8 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 行内表单绑定数据模型设置尺寸标签宽度等属性 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 对应使用状态选择框的表单项 -->
<el-form-item label="使用状态:">
<!-- 下拉选择框双向绑定使用状态数据设置占位提示等属性通过循环生成下拉选项 -->
<el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
<el-option v-for="item in useTypeOptions"
:key="item.value"
@ -103,54 +65,41 @@
</el-option>
</el-select>
</el-form-item>
<!-- 对应订单编号输入框的表单项 -->
<el-form-item label="订单编号:">
<!-- 输入框双向绑定订单编号数据设置类名和占位提示 -->
<el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 放置数据表格的容器 -->
<div class="table-container">
<!-- 数据表格组件绑定数据设置宽度等属性以及加载状态 -->
<el-table ref="couponHistoryTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 显示优惠码的表格列 -->
<el-table-column label="优惠码" width="160" align="center">
<template slot-scope="scope">{{scope.row.couponCode}}</template>
</el-table-column>
<!-- 显示领取会员的表格列 -->
<el-table-column label="领取会员" width="140" align="center">
<template slot-scope="scope">{{scope.row.memberNickname}}</template>
</el-table-column>
<!-- 显示领取方式的表格列使用过滤器格式化内容 -->
<el-table-column label="领取方式" width="100" align="center">
<template slot-scope="scope">{{scope.row.getType | formatGetType}}</template>
</el-table-column>
<!-- 显示领取时间的表格列使用日期格式化过滤器 -->
<el-table-column label="领取时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
</el-table-column>
<!-- 显示当前状态的表格列使用过滤器格式化内容 -->
<el-table-column label="当前状态" width="140" align="center">
<template slot-scope="scope">{{scope.row.useStatus | formatCouponHistoryUseType}}</template>
</el-table-column>
<!-- 显示使用时间的表格列使用日期格式化过滤器 -->
<el-table-column label="使用时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.useTime | formatTime}}</template>
</el-table-column>
<!-- 显示订单编号的表格列做了空值处理 -->
<el-table-column label="订单编号" align="center">
<template slot-scope="scope">{{scope.row.orderSn===null?'N/A':scope.row.orderSn}}</template>
</el-table-column>
</el-table>
</div>
<!-- 分页组件的容器 -->
<div class="pagination-container">
<!-- 分页组件设置背景各类事件绑定页面尺寸等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -165,231 +114,200 @@
</div>
</template>
<script>
// '@/utils/date'formatDate
import {formatDate} from '@/utils/date';
// '@/api/coupon'getCoupon
import {getCoupon} from '@/api/coupon';
// '@/api/couponHistory'fetchCouponHistoryList
import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
import {formatDate} from '@/utils/date';
import {getCoupon} from '@/api/coupon';
import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
//
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
// 使
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
useStatus: null,
orderSn: null,
couponId: null
};
// 使使使
const defaultUseTypeOptions = [
{
label: "未使用",
value: 0
},
{
label: "已使用",
value: 1
},
{
label: "已过期",
value: 2
}
];
export default {
name: 'couponHistoryList',
data() {
return {
//
coupon: {},
//
listQuery: Object.assign({}, defaultListQuery),
// 使
useTypeOptions: Object.assign({}, defaultUseTypeOptions),
// null
list: null,
// null
total: null,
// false
listLoading: false
}
},
created() {
// coupon
getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
});
// id
this.listQuery.couponId = this.$route.query.id;
//
this.getList();
},
filters: {
//
formatType(type) {
for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) {
return defaultTypeOptions[i].label;
}
}
return '';
},
// 使
formatUseType(useType) {
if (useType === 0) {
return '全场通用';
} else if (useType === 1) {
return '指定分类';
} else {
return '指定商品';
}
},
//
formatPlatform(platform) {
if (platform === 1) {
return '移动平台';
} else if (platform === 2) {
return 'PC平台';
} else {
return '全平台';
}
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
//
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
{
label: '会员赠券',
value: 1
},
//
formatStatus(endTime) {
let now = new Date().getTime();
if (endTime > now) {
return '未过期'
} else {
return '已过期';
}
{
label: '购物赠券',
value: 2
},
//
formatGetType(type) {
if (type === 1) {
return '主动获取';
} else {
return '后台赠送';
}
{
label: '注册赠券',
value: 3
}
];
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
useStatus: null,
orderSn: null,
couponId: null
};
const defaultUseTypeOptions= [
{
label: "未使用",
value: 0
},
// 使
formatCouponHistoryUseType(useType) {
if (useType === 0) {
return '未使用';
} else if (useType === 1) {
return '已使用';
} else {
return '已过期';
}
{
label: "已使用",
value: 1
},
//
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
{
label: "已过期",
value: 2
}
];
export default {
name: 'couponHistoryList',
data() {
return {
coupon: {},
listQuery: Object.assign({}, defaultListQuery),
useTypeOptions:Object.assign({},defaultUseTypeOptions),
list:null,
total:null,
listLoading:false
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
// true
getList() {
this.listLoading = true;
fetchCouponHistoryList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
created() {
getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
});
},
// id
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
this.listQuery.couponId = this.$route.query.id;
},
//
handleSearchList() {
this.listQuery.pageNum = 1;
this.listQuery.couponId=this.$route.query.id;
this.getList();
},
//
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
filters: {
formatType(type) {
for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) {
return defaultTypeOptions[i].label;
}
}
return '';
},
formatUseType(useType) {
if (useType === 0) {
return '全场通用';
} else if (useType === 1) {
return '指定分类';
} else {
return '指定商品';
}
},
formatPlatform(platform) {
if (platform === 1) {
return '移动平台';
} else if (platform === 2) {
return 'PC平台';
} else {
return '全平台';
}
},
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
formatStatus(endTime) {
let now = new Date().getTime();
if (endTime > now) {
return '未过期'
} else {
return '已过期';
}
},
formatGetType(type) {
if(type===1){
return '主动获取';
}else{
return '后台赠送';
}
},
formatCouponHistoryUseType(useType) {
if (useType === 0) {
return '未使用';
} else if (useType === 1) {
return '已使用';
} else {
return '已过期';
}
},
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
//
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
methods: {
getList(){
this.listLoading=true;
fetchCouponHistoryList(this.listQuery).then(response=>{
this.listLoading=false;
this.list=response.data.list;
this.total=response.data.total;
});
},
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
this.listQuery.couponId=this.$route.query.id;
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
}
}
}
}
</script>
<style scoped>
<!-- 定义类名为app-container的样式设置宽度外边距使其水平居中 -->
.app-container {
width: 80%;
margin: 20px auto;
}
<!-- 定义类名为filter-container的样式设置上边距 -->
.filter-container {
margin-top: 20px;
}
<!-- 定义类名为table-layout的样式设置上边距左边框上边框 -->
.table-layout {
margin-top: 20px;
border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6;
}
<!-- 定义类名为table-cell的样式设置高度行高边框内边距字体大小颜色文本对齐溢出处理等属性 -->
.table-cell {
height: 60px;
line-height: 40px;
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
font-size: 14px;
color: #606266;
text-align: center;
overflow: hidden;
}
<!-- 定义类名为table-cell-title的样式设置边框内边距背景色文本对齐字体大小颜色等属性 -->
.table-cell-title {
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
background: #F2F6FC;
text-align: center;
font-size: 14px;
color: #303133;
}
.app-container {
width: 80%;
margin: 20px auto;
}
.filter-container {
margin-top: 20px;
}
.table-layout {
margin-top: 20px;
border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6;
}
.table-cell {
height: 60px;
line-height: 40px;
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
font-size: 14px;
color: #606266;
text-align: center;
overflow: hidden;
}
.table-cell-title {
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
background: #F2F6FC;
text-align: center;
font-size: 14px;
color: #303133;
}
</style>

@ -1,14 +1,9 @@
<template>
<!-- 页面整体的外层容器用于布局包裹内部各部分内容 -->
<template> 
<div class="app-container">
<!-- 筛选搜索区域的卡片容器设置无阴影效果 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 显示搜索图标 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索文字提示 -->
<span>筛选搜索</span>
<!-- 用于触发查询搜索的按钮绑定点击事件设置样式等属性 -->
<el-button
style="float:right"
type="primary"
@ -16,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 用于重置筛选条件的按钮绑定点击事件设置样式等属性 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,18 +19,12 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 行内表单绑定数据模型设置尺寸标签宽度等属性 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 优惠券名称输入框的表单项 -->
<el-form-item label="优惠券名称:">
<!-- 输入框双向绑定优惠券名称数据设置类名和占位提示 -->
<el-input v-model="listQuery.name" class="input-width" placeholder="优惠券名称"></el-input>
</el-form-item>
<!-- 优惠券类型选择框的表单项 -->
<el-form-item label="优惠券类型:">
<!-- 下拉选择框双向绑定优惠券类型数据设置占位提示等属性 -->
<el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
<!-- 通过循环生成下拉选项 -->
<el-option v-for="item in typeOptions"
:key="item.value"
:label="item.label"
@ -47,72 +35,54 @@
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片容器设置无阴影效果 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 用于触发添加操作的按钮绑定点击事件 -->
<el-button size="mini" class="btn-add" @click="handleAdd()"></el-button>
</el-card>
<!-- 放置数据表格的容器 -->
<div class="table-container">
<!-- 数据表格组件绑定数据设置宽度等属性还有选择改变等相关事件 -->
<el-table ref="couponTable"
: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.type | formatType}}</template>
</el-table-column>
<!-- 显示可使用商品类型的表格列使用过滤器格式化内容 -->
<el-table-column label="可使用商品" width="100" align="center">
<template slot-scope="scope">{{scope.row.useType | formatUseType}}</template>
</el-table-column>
<!-- 显示使用门槛的表格列 -->
<el-table-column label="使用门槛" width="140" align="center">
<template slot-scope="scope">{{scope.row.minPoint}}元可用</template>
</el-table-column>
<!-- 显示面值的表格列 -->
<el-table-column label="面值" width="100" align="center">
<template slot-scope="scope">{{scope.row.amount}}</template>
</el-table-column>
<!-- 显示适用平台的表格列使用过滤器格式化内容 -->
<el-table-column label="适用平台" width="100" align="center">
<template slot-scope="scope">{{scope.row.platform | formatPlatform}}</template>
</el-table-column>
<!-- 显示有效期的表格列使用日期格式化等过滤器 -->
<el-table-column label="有效期" width="180" align="center">
<template slot-scope="scope">{{scope.row.startTime|formatDate}}{{scope.row.endTime|formatDate}}</template>
</el-table-column>
<!-- 显示状态的表格列使用过滤器根据结束时间判断并格式化状态 -->
<el-table-column label="状态" width="100" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatStatus}}</template>
</el-table-column>
<!-- 显示操作按钮的表格列 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<!-- 查看按钮绑定点击事件 -->
<el-button size="mini"
type="text"
@click="handleView(scope.$index, scope.row)">查看</el-button>
<!-- 编辑按钮绑定点击事件 -->
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑</el-button>
<!-- 删除按钮绑定点击事件 -->
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
@ -120,9 +90,7 @@
</el-table-column>
</el-table>
</div>
<!-- 分页组件的容器 -->
<div class="pagination-container">
<!-- 分页组件设置背景各类事件绑定页面尺寸等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -137,176 +105,147 @@
</div>
</template>
<script>
// '@/api/coupon'
import {fetchList, deleteCoupon} from '@/api/coupon';
// '@/utils/date'formatDate
import {formatDate} from '@/utils/date';
//
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
name: null,
type: null
};
//
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
export default {
name: 'couponList',
data() {
return {
//
listQuery: Object.assign({}, defaultListQuery),
//
typeOptions: Object.assign({}, defaultTypeOptions),
// null
list: null,
// null
total: null,
// false
listLoading: false,
//
multipleSelection: []
}
},
created() {
//
this.getList();
},
filters: {
//
formatType(type) {
for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) {
return defaultTypeOptions[i].label;
}
}
return '';
},
// 使
formatUseType(useType) {
if (useType === 0) {
return '全场通用';
} else if (useType === 1) {
return '指定分类';
} else {
return '指定商品';
}
import {fetchList,deleteCoupon} from '@/api/coupon';
import {formatDate} from '@/utils/date';
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
name: null,
type: null
};
const defaultTypeOptions=[
{
label: '全场赠券',
value: 0
},
//
formatPlatform(platform) {
if (platform === 1) {
return '移动平台';
} else if (platform === 2) {
return 'PC平台';
} else {
return '全平台';
}
{
label: '会员赠券',
value: 1
},
//
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
{
label: '购物赠券',
value: 2
},
//
formatStatus(endTime) {
let now = new Date().getTime();
let endDate = new Date(endTime);
if (endDate > now) {
return '未过期'
} else {
return '已过期';
}
{
label: '注册赠券',
value: 3
}
},
methods: {
//
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
//
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
//
handleSelectionChange(val) {
this.multipleSelection = val;
},
//
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
];
export default {
name:'couponList',
data() {
return {
listQuery:Object.assign({},defaultListQuery),
typeOptions:Object.assign({},defaultTypeOptions),
list:null,
total:null,
listLoading:false,
multipleSelection:[]
}
},
//
handleCurrentChange(val) {
this.listQuery.pageNum = val;
created(){
this.getList();
},
//
handleAdd() {
this.$router.push({path: '/sms/addCoupon'})
},
// id
handleView(index, row) {
this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
},
// id
handleUpdate(index, row) {
this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
filters:{
formatType(type){
for(let i=0;i<defaultTypeOptions.length;i++){
if(type===defaultTypeOptions[i].value){
return defaultTypeOptions[i].label;
}
}
return '';
},
formatUseType(useType){
if(useType===0){
return '全场通用';
}else if(useType===1){
return '指定分类';
}else{
return '指定商品';
}
},
formatPlatform(platform){
if(platform===1){
return '移动平台';
}else if(platform===2){
return 'PC平台';
}else{
return '全平台';
}
},
formatDate(time){
if(time==null||time===''){
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
formatStatus(endTime){
let now = new Date().getTime();
let endDate = new Date(endTime);
if(endDate>now){
return '未过期'
}else{
return '已过期';
}
}
},
//
handleDelete(index, row) {
this.$confirm('是否进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteCoupon(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
methods:{
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd(){
this.$router.push({path: '/sms/addCoupon'})
},
handleView(index, row) {
this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
},
handleUpdate(index, row) {
this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
},
handleDelete(index, row) {
this.$confirm('是否进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteCoupon(row.id).then(response=>{
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
this.getList();
})
},
getList(){
this.listLoading=true;
fetchList(this.listQuery).then(response=>{
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
})
},
// true
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
}
}
}
</script>
<style scoped>
<!-- scoped属性使样式仅作用于当前组件.input-width类设置元素宽度为203px -->
.input-width {
width: 203px;
}

@ -1,21 +1,14 @@
<template>
<!-- 在模板中使用了coupon-detail组件并传递isEdit属性值为true可能用于告知该组件当前处于编辑模式 -->
<template> 
<coupon-detail :isEdit="true"></coupon-detail>
</template>
<script>
// './components/CouponDetail'CouponDetail
import CouponDetail from './components/CouponDetail';
export default {
// updateCoupon
name: 'updateCoupon',
// CouponDetail使使
components: { CouponDetail }
}
import CouponDetail from './components/CouponDetail'
export default {
name: 'updateCoupon',
components: { CouponDetail }
}
</script>
<style scoped>
<!-- 带有scoped属性的style标签里面样式仅作用于当前组件目前为空 -->
</style>

@ -1,14 +1,9 @@
<template>
<!-- 整个页面的外层容器用于对内部各部分内容进行整体布局 -->
<template> 
<div class="app-container">
<!-- 筛选搜索区域的卡片容器设置了无阴影效果 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 显示搜索图标用于提示此处可进行搜索操作 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索文字明确此处功能 -->
<span>筛选搜索</span>
<!-- 用于触发查询搜索操作的按钮设置了按钮样式类型为主要按钮绑定了点击事件handleSearchList -->
<el-button
style="float:right"
type="primary"
@ -16,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 用于触发重置筛选条件操作的按钮设置了按钮样式与右侧有一定间距绑定了点击事件handleResetSearch -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,75 +19,42 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 行内表单用于设置筛选条件绑定了数据模型listQuery设置了表单尺寸和标签宽度 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 对应活动名称输入框的表单项 -->
<el-form-item label="活动名称:">
<!-- 输入框双向绑定listQuery.keyword数据设置了类名占位提示以及可清除内容的属性 -->
<el-input v-model="listQuery.keyword" class="input-width" placeholder="活动名称" clearable></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片容器同样设置了无阴影效果 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 用于触发添加活动操作的按钮设置了按钮尺寸类名绑定了点击事件handleAdd -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加活动</el-button>
<!-- 用于触发查看秒杀时间段列表操作的按钮设置了按钮尺寸类名绑定了点击事件handleShowSessionList -->
<el-button size="mini" class="btn-add" @click="handleShowSessionList()"></el-button>
</el-card>
<!-- 放置数据表格的容器 -->
<div class="table-container">
<!-- 数据表格组件绑定了数据list设置了宽度加载状态以及边框等属性 -->
<el-table ref="flashTable"
:data="list"
style="width: 100%;"
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">
<!-- 在表格单元格的作用域内显示对应行数据中的id字段内容 -->
{{scope.row.id}}
</template>
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 显示活动标题的表格列内容居中对齐 -->
<el-table-column label="活动标题" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内显示对应行数据中的title字段内容 -->
{{scope.row.title}}
</template>
<template slot-scope="scope">{{scope.row.title}}</template>
</el-table-column>
<!-- 显示活动状态的表格列设置了宽度和对齐方式使用了过滤器formatActiveStatus来格式化显示内容 -->
<el-table-column label="活动状态" width="140" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内使用过滤器对对应行数据进行格式化后显示 -->
{{scope.row | formatActiveStatus}}
</template>
<template slot-scope="scope">{{scope.row |formatActiveStatus}}</template>
</el-table-column>
<!-- 显示开始时间的表格列设置了宽度和对齐方式使用了日期格式化过滤器formatDate -->
<el-table-column label="开始时间" width="140" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内使用日期格式化过滤器对对应行数据中的时间进行格式化后显示 -->
{{scope.row.startDate | formatDate}}
</template>
<template slot-scope="scope">{{scope.row.startDate | formatDate}}</template>
</el-table-column>
<!-- 显示结束时间的表格列设置了宽度和对齐方式同样使用了日期格式化过滤器formatDate -->
<el-table-column label="结束时间" width="140" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内使用日期格式化过滤器对对应行数据中的时间进行格式化后显示 -->
{{scope.row.endDate | formatDate}}
</template>
<template slot-scope="scope">{{scope.row.endDate | formatDate}}</template>
</el-table-column>
<!-- 显示上线/下线操作的表格列设置了宽度和对齐方式里面包含一个开关组件 -->
<el-table-column label="上线/下线" width="200" align="center">
<template slot-scope="scope">
<!-- 开关组件用于切换上线/下线状态绑定了状态改变的事件handleStatusChange设置了激活值和未激活值双向绑定对应行数据中的status字段 -->
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
@ -102,21 +63,17 @@
</el-switch>
</template>
</el-table-column>
<!-- 显示操作按钮的表格列设置了宽度和对齐方式 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<!-- 用于触发设置商品操作的按钮设置了按钮尺寸类型为文本按钮绑定了点击事件handleSelectSession -->
<el-button size="mini"
type="text"
@click="handleSelectSession(scope.$index, scope.row)">设置商品
</el-button>
<!-- 用于触发编辑操作的按钮设置了按钮尺寸类型为文本按钮绑定了点击事件handleUpdate -->
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<!-- 用于触发删除操作的按钮设置了按钮尺寸类型为文本按钮绑定了点击事件handleDelete -->
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
@ -125,10 +82,7 @@
</el-table-column>
</el-table>
</div>
<!-- 分页组件的容器 -->
<div class="pagination-container">
<!-- 分页组件设置了背景显示页面尺寸改变和当前页码改变的事件绑定以及布局当前页码每页显示数量可选的页面尺寸和数据总条数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -140,22 +94,16 @@
:total="total">
</el-pagination>
</div>
<!-- 弹出对话框组件用于添加活动的相关操作设置了标题对话框显示状态的双向绑定以及宽度属性 -->
<el-dialog
title="添加活动"
:visible.sync="dialogVisible"
width="40%">
<!-- 表单组件用于在对话框内收集添加活动的相关信息绑定了数据模型flashPromotion设置了表单引用标签宽度和尺寸等属性 -->
<el-form :model="flashPromotion"
ref="flashPromotionForm"
label-width="150px" size="small">
<!-- 对应活动标题输入框的表单项 -->
<el-form-item label="活动标题:">
<!-- 输入框双向绑定flashPromotion.title数据设置了宽度 -->
<el-input v-model="flashPromotion.title" style="width: 250px"></el-input>
</el-form-item>
<!-- 对应开始时间选择框的表单项使用了日期选择器组件 -->
<el-form-item label="开始时间:">
<el-date-picker
v-model="flashPromotion.startDate"
@ -163,7 +111,6 @@
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<!-- 对应结束时间选择框的表单项同样使用了日期选择器组件 -->
<el-form-item label="结束时间:">
<el-date-picker
v-model="flashPromotion.endDate"
@ -171,221 +118,178 @@
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<!-- 对应上线/下线选择的表单项使用了单选按钮组组件 -->
<el-form-item label="上线/下线">
<el-radio-group v-model="flashPromotion.status">
<!-- 上线单选按钮选项 -->
<el-radio :label="1">上线</el-radio>
<!-- 下线单选按钮选项 -->
<el-radio :label="0">下线</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部的操作按钮区域使用了插槽footer -->
<span slot="footer" class="dialog-footer">
<!-- 取消按钮点击可关闭对话框设置了按钮尺寸 -->
<el-button @click="dialogVisible = false" size="small"> </el-button>
<!-- 确定按钮点击可触发确认添加活动的相关逻辑设置了按钮类型为主要按钮尺寸为小尺寸 -->
<el-button type="primary" @click="handleDialogConfirm()" size="small"> </el-button>
</span>
<el-button @click="dialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// '@/api/flash'
import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
// '@/utils/date'formatDate
import {formatDate} from '@/utils/date';
import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
import {formatDate} from '@/utils/date';
//
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
//
const defaultFlashPromotion = {
id: null,
title: null,
startDate: null,
endDate: null,
status: 0
};
export default {
name: 'flashPromotionList',
data() {
return {
// defaultListQuery
listQuery: Object.assign({}, defaultListQuery),
// null
list: null,
// null
total: null,
// falsetrue
listLoading: false,
// /false
dialogVisible: false,
// defaultFlashPromotion
flashPromotion: Object.assign({}, defaultFlashPromotion),
// truefalsefalse
isEdit: false
}
},
created() {
//
this.getList();
},
filters: {
//
formatActiveStatus(row) {
//
let nowDate = new Date();
//
let startDate = new Date(row.startDate);
//
let endDate = new Date(row.endDate);
//
if (nowDate.getTime() >= startDate.getTime() && nowDate.getTime() <= endDate.getTime()) {
return '活动进行中';
}
//
else if (nowDate.getTime() > endDate.getTime()) {
return '活动已结束';
}
//
else {
return '活动未开始';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
const defaultFlashPromotion = {
id: null,
title: null,
startDate: null,
endDate: null,
status: 0
};
export default {
name: 'flashPromotionList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: false,
dialogVisible: false,
flashPromotion: Object.assign({}, defaultFlashPromotion),
isEdit: false
}
},
// 'N/A'
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
//
let date = new Date(time);
// formatDate 'yyyy-MM-dd'
return formatDate(date, 'yyyy-MM-dd')
}
},
methods: {
// 便
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 1
handleSearchList() {
this.listQuery.pageNum = 1;
created() {
this.getList();
},
// 1
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
//
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// true
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.flashPromotion = Object.assign({}, defaultFlashPromotion);
},
// '/sms/flashSession'
handleShowSessionList() {
this.$router.push({path: '/sms/flashSession'})
filters: {
formatActiveStatus(row) {
let nowDate = new Date();
let startDate = new Date(row.startDate);
let endDate = new Date(row.endDate);
if (nowDate.getTime() >= startDate.getTime() && nowDate.getTime() <= endDate.getTime()) {
return '活动进行中';
} else if (nowDate.getTime() > endDate.getTime()) {
return '活动已结束';
} else {
return '活动未开始';
}
},
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
}
},
//
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消修改'
});
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
});
},
//
handleDelete(index, row) {
this.$confirm('是否要删除该活动?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFlash(row.id).then(response => {
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.flashPromotion = Object.assign({},defaultFlashPromotion);
},
handleShowSessionList() {
this.$router.push({path: '/sms/flashSession'})
},
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '删除成功!'
type: 'info',
message: '取消修改'
});
this.getList();
});
});
},
// true便
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.flashPromotion = Object.assign({}, row);
},
//
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateFlash(this.flashPromotion.id, this.flashPromotion).then(response => {
},
handleDelete(index, row) {
this.$confirm('是否要删除该活动?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFlash(row.id).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
type: 'success',
message: '删除成功!'
});
this.dialogVisible = false;
this.getList();
})
} else {
createFlash(this.flashPromotion).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible = false;
this.getList();
})
}
})
},
// '/sms/selectSession' id
handleSelectSession(index, row) {
this.$router.push({path: '/sms/selectSession', query: {flashPromotionId: row.id}})
},
// truefalse
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
});
});
},
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.flashPromotion = Object.assign({},row);
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateFlash(this.flashPromotion.id,this.flashPromotion).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createFlash(this.flashPromotion).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
handleSelectSession(index,row){
this.$router.push({path:'/sms/selectSession',query:{flashPromotionId:row.id}})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
}
}
}
</script>
<style></style>

@ -1,95 +1,52 @@
<template>
<!-- 整个页面的外层容器用于对内部各部分内容进行整体布局 -->
<template> 
<div class="app-container">
<!-- 操作区域的卡片容器设置了无阴影效果 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 用于触发添加操作的按钮设置了按钮尺寸类名绑定了点击事件handleSelectProduct并且与左侧有一定间距 -->
<el-button size="mini" class="btn-add" @click="handleSelectProduct()" style="margin-left: 20px">添加</el-button>
</el-card>
<!-- 放置数据表格的容器用于展示商品相关数据列表 -->
<div class="table-container">
<!-- 数据表格组件绑定了数据list设置了表格引用宽度加载状态以及边框等属性 -->
<el-table ref="productRelationTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 显示编号的表格列设置了宽度和对齐方式 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内显示对应行数据中的id字段内容 -->
{{scope.row.id}}
</template>
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 显示商品名称的表格列内容居中对齐显示的是每行数据中关联商品对象里的name字段 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内显示对应行数据中关联商品对象里的name字段内容 -->
{{scope.row.product.name}}
</template>
<template slot-scope="scope">{{scope.row.product.name}}</template>
</el-table-column>
<!-- 显示货号的表格列设置了宽度和对齐方式展示格式为NO.加上商品的货号 -->
<el-table-column label="货号" width="140" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内按照特定格式显示对应行数据中关联商品对象里的productSn字段内容 -->
NO.{{scope.row.product.productSn}}
</template>
<template slot-scope="scope">NO.{{scope.row.product.productSn}}</template>
</el-table-column>
<!-- 显示商品价格的表格列设置了宽度和对齐方式展示格式为加上商品价格 -->
<el-table-column label="商品价格" width="100" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内按照特定格式显示对应行数据中关联商品对象里的price字段内容 -->
{{scope.row.product.price}}
</template>
<template slot-scope="scope">{{scope.row.product.price}}</template>
</el-table-column>
<!-- 显示剩余数量的表格列设置了宽度和对齐方式直接显示商品的剩余数量 -->
<el-table-column label="剩余数量" width="100" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内显示对应行数据中关联商品对象里的stock字段内容 -->
{{scope.row.product.stock}}
</template>
<template slot-scope="scope">{{scope.row.product.stock}}</template>
</el-table-column>
<!-- 显示秒杀价格的表格列设置了宽度和对齐方式根据秒杀价格是否为空进行不同展示若不为空则显示加上秒杀价格 -->
<el-table-column label="秒杀价格" width="100" align="center">
<template slot-scope="scope">
<!-- 使用v-if指令判断秒杀价格是否不为空如果是则按照特定格式显示 -->
<p v-if="scope.row.flashPromotionPrice!==null">
{{scope.row.flashPromotionPrice}}
</p>
</template>
</el-table-column>
<!-- 显示秒杀数量的表格列设置了宽度和对齐方式直接显示商品的秒杀数量 -->
<el-table-column label="秒杀数量" width="100" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内显示对应行数据中的flashPromotionCount字段内容 -->
{{scope.row.flashPromotionCount}}
</template>
<template slot-scope="scope">{{scope.row.flashPromotionCount}}</template>
</el-table-column>
<!-- 显示限购数量的表格列设置了宽度和对齐方式直接显示商品的限购数量 -->
<el-table-column label="限购数量" width="100" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内显示对应行数据中的flashPromotionLimit字段内容 -->
{{scope.row.flashPromotionLimit}}
</template>
<template slot-scope="scope">{{scope.row.flashPromotionLimit}}</template>
</el-table-column>
<!-- 显示排序的表格列设置了宽度和对齐方式直接显示商品的排序值 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内显示对应行数据中的sort字段内容 -->
{{scope.row.sort}}
</template>
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 显示操作按钮的表格列设置了宽度和对齐方式 -->
<el-table-column label="操作" width="100" align="center">
<template slot-scope="scope">
<!-- 用于触发编辑操作的按钮设置了按钮尺寸类型为文本按钮绑定了点击事件handleUpdate -->
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<!-- 用于触发删除操作的按钮设置了按钮尺寸类型为文本按钮绑定了点击事件handleDelete -->
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
@ -98,10 +55,7 @@
</el-table-column>
</el-table>
</div>
<!-- 分页组件的容器用于对商品数据列表进行分页操作 -->
<div class="pagination-container">
<!-- 分页组件设置了背景显示页面尺寸改变和当前页码改变的事件绑定以及布局当前页码每页显示数量可选的页面尺寸和数据总条数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -113,47 +67,27 @@
:total="total">
</el-pagination>
</div>
<!-- 弹出对话框组件用于选择商品操作设置了标题对话框显示状态的双向绑定以及宽度属性 -->
<el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
<!-- 输入框组件用于在对话框内输入关键词进行商品搜索双向绑定了dialogData.listQuery.keyword数据设置了宽度外边距尺寸以及占位提示等属性并且包含一个搜索图标按钮 -->
<el-input v-model="dialogData.listQuery.keyword"
style="width: 250px;margin-bottom: 20px"
size="small"
placeholder="商品名称搜索">
<!-- 搜索图标按钮放置在输入框的尾部点击可触发handleSelectSearch事件 -->
<el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
</el-input>
<!-- 数据表格组件用于在对话框内展示搜索到的商品列表绑定了数据dialogData.list并设置了选择改变的事件绑定以及边框属性 -->
<el-table :data="dialogData.list"
@selection-change="handleDialogSelectionChange" border>
<!-- 显示选择框的表格列用于多选操作设置了宽度和对齐方式 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 显示商品名称的表格列内容居中对齐直接显示商品的名称 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内显示对应行数据中的name字段内容 -->
{{scope.row.name}}
</template>
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 显示货号的表格列设置了宽度和对齐方式展示格式为NO.加上商品的货号 -->
<el-table-column label="货号" width="160" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内按照特定格式显示对应行数据中的productSn字段内容 -->
NO.{{scope.row.productSn}}
</template>
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column>
<!-- 显示价格的表格列设置了宽度和对齐方式展示格式为加上商品价格 -->
<el-table-column label="价格" width="120" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内按照特定格式显示对应行数据中的price字段内容 -->
{{scope.row.price}}
</template>
<template slot-scope="scope">{{scope.row.price}}</template>
</el-table-column>
</el-table>
<!-- 分页组件的容器用于对对话框内的商品列表进行分页操作 -->
<div class="pagination-container">
<!-- 分页组件设置了背景显示页面尺寸改变和当前页码改变的事件绑定以及布局当前页码每页显示数量可选的页面尺寸和数据总条数等属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@ -165,266 +99,213 @@
:total="dialogData.total">
</el-pagination>
</div>
<!-- 用于清除浮动确保后续元素布局正常 -->
<div style="clear: both;"></div>
<!-- 对话框底部的操作按钮区域使用了插槽footer -->
<div slot="footer">
<!-- 取消按钮点击可关闭对话框设置了按钮尺寸 -->
<el-button size="small" @click="selectDialogVisible = false"> </el-button>
<!-- 确定按钮点击可触发确认选择商品的相关逻辑设置了按钮类型为主要按钮尺寸为小尺寸 -->
<el-button size="small" type="primary" @click="handleSelectDialogConfirm()"> </el-button>
</div>
</el-dialog>
<!-- 弹出对话框组件用于编辑秒杀商品信息操作设置了标题对话框显示状态的双向绑定以及宽度属性 -->
<el-dialog title="编辑秒杀商品信息"
:visible.sync="editDialogVisible"
width="40%">
<!-- 表单组件用于在对话框内展示和编辑秒杀商品的相关信息绑定了数据模型flashProductRelation设置了表单引用标签宽度和尺寸等属性 -->
:visible.sync="editDialogVisible"
width="40%">
<el-form :model="flashProductRelation"
ref="flashProductRelationForm"
label-width="150px" size="small">
<!-- 对应商品名称展示的表单项此处直接展示商品名称不可编辑 -->
<el-form-item label="商品名称:">
<span>{{flashProductRelation.product.name}}</span>
</el-form-item>
<!-- 对应货号展示的表单项此处直接展示货号不可编辑 -->
<el-form-item label="货号:">
<span>NO.{{flashProductRelation.product.productSn}}</span>
</el-form-item>
<!-- 对应商品价格展示的表单项此处直接展示商品价格不可编辑 -->
<el-form-item label="商品价格:">
<span>{{flashProductRelation.product.price}}</span>
</el-form-item>
<!-- 对应秒杀价格输入框的表单项使用输入框组件双向绑定flashProductRelation.flashPromotionPrice数据设置了类名并在输入框头部添加符号 -->
<el-form-item label="秒杀价格:">
<el-input v-model="flashProductRelation.flashPromotionPrice" class="input-width">
<template slot="prepend"></template>
</el-input>
</el-form-item>
<!-- 对应剩余数量展示的表单项此处直接展示剩余数量不可编辑 -->
<el-form-item label="剩余数量:">
<span>{{flashProductRelation.product.stock}}</span>
</el-form-item>
<!-- 对应秒杀数量输入框的表单项使用输入框组件双向绑定flashProductRelation.flashPromotionCount数据设置了类名 -->
<el-form-item label="秒杀数量:">
<el-input v-model="flashProductRelation.flashPromotionCount" class="input-width"></el-input>
</el-form-item>
<!-- 对应限购数量输入框的表单项使用输入框组件双向绑定flashProductRelation.flashPromotionLimit数据设置了类名 -->
<el-form-item label="限购数量:">
<el-input v-model="flashProductRelation.flashPromotionLimit" class="input-width"></el-input>
</el-form-item>
<!-- 对应排序输入框的表单项使用输入框组件双向绑定flashProductRelation.sort数据设置了类名 -->
<el-form-item label="排序:">
<el-input v-model="flashProductRelation.sort" class="input-width"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部的操作按钮区域使用了插槽footer -->
<span slot="footer" class="dialog-footer">
<!-- 取消按钮点击可关闭对话框设置了按钮尺寸 -->
<el-button @click="editDialogVisible = false" size="small"> </el-button>
<!-- 确定按钮点击可触发确认编辑秒杀商品信息的相关逻辑设置了按钮类型为主要按钮尺寸为小尺寸 -->
<el-button type="primary" @click="handleEditDialogConfirm()" size="small"> </el-button>
</span>
<el-button @click="editDialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleEditDialogConfirm()" size="small"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// '@/api/flashProductRelation'
import {fetchList, createFlashProductRelation, deleteFlashProductRelation, updateFlashProductRelation} from '@/api/flashProductRelation';
// '@/api/product''fetchProductList'
import {fetchList as fetchProductList} from '@/api/product';
// IDID
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
flashPromotionId: null,
flashPromotionSessionId: null
};
export default {
name: 'flashPromotionProductRelationList',
data() {
return {
// defaultListQuery
listQuery: Object.assign({}, defaultListQuery),
// null
list: null,
// null
total: null,
// falsetrue
listLoading: false,
// /false
dialogVisible: false,
// false
selectDialogVisible: false,
//
dialogData: {
import {fetchList,createFlashProductRelation,deleteFlashProductRelation,updateFlashProductRelation} from '@/api/flashProductRelation';
import {fetchList as fetchProductList} from '@/api/product';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
flashPromotionId: null,
flashPromotionSessionId: null
};
export default {
name:'flashPromotionProductRelationList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
listLoading: false,
dialogVisible: false,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
pageNum: 1,
pageSize: 5
}
},
editDialogVisible:false,
flashProductRelation:{
product:{}
}
},
// false
editDialogVisible: false,
//
flashProductRelation: {
product: {}
}
}
},
created() {
// ID
this.listQuery.flashPromotionId = this.$route.query.flashPromotionId;
// ID
this.listQuery.flashPromotionSessionId = this.$route.query.flashPromotionSessionId;
//
this.getList();
},
methods: {
//
handleSizeChange(val) {
this.listQuery.pageNum = 1; //1
this.listQuery.pageSize = val;
this.getList(); //
},
//
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList(); //
created(){
this.listQuery.flashPromotionId=this.$route.query.flashPromotionId;
this.listQuery.flashPromotionSessionId=this.$route.query.flashPromotionSessionId;
this.getList();
},
//
handleSelectProduct() {
this.selectDialogVisible = true; //true
this.getDialogList(); //
},
//
handleUpdate(index, row) {
this.editDialogVisible = true; //true
this.flashProductRelation = Object.assign({}, row); //便
},
//
handleDelete(index, row) {
this.$confirm('是否要删除该商品?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //
deleteFlashProductRelation(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
methods:{
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
},
handleUpdate(index,row){
this.editDialogVisible = true;
this.flashProductRelation = Object.assign({},row);
},
handleDelete(index,row){
this.$confirm('是否要删除该商品?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFlashProductRelation(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
this.getList(); //
});
});
},
//
handleSelectSearch() {
this.getDialogList(); //
},
//
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1; //1
this.dialogData.listQuery.pageSize = val; //
this.getDialogList(); //
},
//
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val; //
this.getDialogList(); //
},
//
handleDialogSelectionChange(val) {
this.dialogData.multipleSelection = val; //
},
//
handleSelectDialogConfirm() {
if (this.dialogData.multipleSelection.length < 1) { //
this.$message({
message: '请选择一条记录', //
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = []; //
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId: this.dialogData.multipleSelection[i].id,
flashPromotionId: this.listQuery.flashPromotionId,
flashPromotionSessionId: this.listQuery.flashPromotionSessionId
});
}
this.$confirm('是否要进行添加操作?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //
createFlashProductRelation(selectProducts).then(response => {
this.selectDialogVisible = false;
this.dialogData.multipleSelection = [];
this.getList();
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
type: 'success',
message: '添加成功!' //
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
});
});
},
//
handleEditDialogConfirm() {
this.$confirm('是否要确认?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //
updateFlashProductRelation(this.flashProductRelation.id, this.flashProductRelation).then(response => {
this.$message({
message: '修改成功!', //
type: 'success'
return;
}
let selectProducts = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId:this.dialogData.multipleSelection[i].id,
flashPromotionId:this.listQuery.flashPromotionId,
flashPromotionSessionId:this.listQuery.flashPromotionSessionId
});
this.editDialogVisible = false;
this.getList();
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createFlashProductRelation(selectProducts).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
},
handleEditDialogConfirm(){
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateFlashProductRelation(this.flashProductRelation.id,this.flashProductRelation).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
});
this.editDialogVisible =false;
this.getList();
})
})
})
},
//
getList() {
this.listLoading = true; //true
fetchList(this.listQuery).then(response => { //
this.listLoading = false; //false
this.list = response.data.list; //
this.total = response.data.total;
});
},
//
getDialogList() {
fetchProductList(this.dialogData.listQuery).then(response => { //
this.dialogData.list = response.data.list; //
this.dialogData.total = response.data.total;
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
}
</script>
<style scoped>
<!-- 使用带有scoped属性的style标签表示这里定义的样式仅作用于当前组件内的元素避免样式污染其他组件 -->
<!-- 定义类名为operate-container的样式规则 -->
.operate-container{
<!-- 设置该类所应用元素的上外边距为0用于控制其与上方元素的间距 -->
margin-top: 0;
}
<!-- 定义类名为input-width的样式规则 -->
.input-width{
<!-- 设置该类所应用元素的宽度为200px通常可用于像输入框等需要统一宽度设置的表单元素 -->
width: 200px;
}
.operate-container{
margin-top: 0;
}
.input-width{
width: 200px;
}
</style>

@ -1,60 +1,31 @@
<template>
<!-- 整个页面的外层容器用于对内部各部分内容进行整体布局 -->
<template> 
<div class="app-container">
<!-- el-card组件用于创建一个卡片式的容器设置了无阴影效果并添加了"operate-container"类名通常可用于放置操作相关的元素或内容展示 -->
<el-card shadow="never" class="operate-container">
<!-- 显示一个图标此处使用的是element-ui提供的"el-icon-tickets"图标用于对下方数据列表进行某种示意比如表示和票务商品列表等相关 -->
<i class="el-icon-tickets"></i>
<!-- 显示文字"数据列表"用于明确下方表格所展示数据的性质 -->
<span>数据列表</span>
</el-card>
<!-- 放置数据表格的容器用于包裹下面的el-table组件使其在页面布局上更加规整 -->
<div class="table-container">
<!-- el-table组件用于创建一个数据表格设置了表格引用为"selectSessionTable"绑定了数据"list"设置表格宽度为占满父容器100%根据"listLoading"的值来显示加载状态如加载动画等并添加了边框样式 -->
<el-table ref="selectSessionTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- el-table-column组件用于定义表格中的列此列用于展示编号信息设置了列的宽度为100像素内容在单元格中居中对齐 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内通过插值表达式显示对应行数据中的"id"字段内容即展示每一行数据的编号 -->
{{scope.row.id}}
</template>
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示秒杀时间段名称信息内容在单元格中居中对齐 -->
<el-table-column label="秒杀时间段名称" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内通过插值表达式显示对应行数据中的"name"字段内容即展示每一行数据对应的秒杀时间段的名称 -->
{{scope.row.name}}
</template>
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示每日开始时间信息内容在单元格中居中对齐使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
<el-table-column label="每日开始时间" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内使用"formatTime"过滤器对对应行数据中的"startTime"字段时间类型数据进行格式化处理后展示 -->
{{scope.row.startTime | formatTime}}
</template>
<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示每日结束时间信息内容在单元格中居中对齐同样使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
<el-table-column label="每日结束时间" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内使用"formatTime"过滤器对对应行数据中的"endTime"字段时间类型数据进行格式化处理后展示 -->
{{scope.row.endTime | formatTime}}
</template>
<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示商品数量信息内容在单元格中居中对齐直接展示对应行数据中的"productCount"字段内容即显示每个秒杀时间段对应的商品数量 -->
<el-table-column label="商品数量" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内通过插值表达式显示对应行数据中的"productCount"字段内容即展示每一行数据对应的商品数量 -->
{{scope.row.productCount}}
</template>
<template slot-scope="scope">{{scope.row.productCount}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示操作按钮内容在单元格中居中对齐 -->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<!-- el-button组件用于创建一个按钮设置了按钮尺寸为"mini"小型按钮按钮类型为"text"绑定了点击事件"handleShowRelation"点击按钮可触发相应的操作逻辑此处按钮显示的文字为"商品列表"可能点击后会跳转到展示对应秒杀时间段下商品列表的页面 -->
<el-button size="mini"
type="text"
@click="handleShowRelation(scope.$index, scope.row)">商品列表
@ -66,67 +37,47 @@
</div>
</template>
<script>
// '@/api/flashSession'fetchSelectList
import {fetchSelectList} from '@/api/flashSession';
// '@/utils/date'formatDate
import {formatDate} from '@/utils/date';
export default {
name: 'selectSessionList',
data() {
return {
// null
list: null,
// falsetruefalse
listLoading: false
}
},
created() {
//
this.getList();
},
filters: {
// formatTime
formatTime(time) {
// null 'N/A'
if (time == null || time === '') {
return 'N/A';
import {fetchSelectList} from '@/api/flashSession';
import {formatDate} from '@/utils/date';
export default {
name: 'selectSessionList',
data() {
return {
list: null,
listLoading: false
}
// JavaScriptDate便使
let date = new Date(time);
// formatDate 'hh:mm:ss' Date
return formatDate(date, 'hh:mm:ss')
}
},
methods: {
//
handleShowRelation(index, row) {
// 使Vue Router '/sms/flashProductRelation'
this.$router.push({path: '/sms/flashProductRelation', query: {
flashPromotionId: this.$route.query.flashPromotionId, flashPromotionSessionId: row.id}}) //IDflashPromotionIdIDflashPromotionSessionIdID
},
//
getList() {
// true
this.listLoading = true;
// fetchSelectListIDIDthen
fetchSelectList({flashPromotionId: this.$route.query.flashPromotionId}).then(response => {
// false
this.listLoading = false;
// list便
this.list = response.data;
});
created() {
this.getList();
},
filters:{
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'hh:mm:ss')
}
},
methods: {
handleShowRelation(index,row){
this.$router.push({path:'/sms/flashProductRelation',query:{
flashPromotionId:this.$route.query.flashPromotionId, flashPromotionSessionId:row.id}})
},
getList() {
this.listLoading = true;
fetchSelectList({flashPromotionId:this.$route.query.flashPromotionId}).then(response => {
this.listLoading = false;
this.list = response.data;
});
}
}
}
}
</script>
<style scoped>
<!-- scoped属性表示该样式作用范围仅限于当前组件内的元素避免样式影响到其他组件中的同名元素起到样式隔离的作用 -->
.operate-container {
<!-- 这是一个CSS样式规则针对类名为operate-container的元素进行样式设置 -->
<!-- margin-top属性用于设置元素的上外边距这里将其值设置为0意味着该元素距离上方相邻元素的间距为0可用于精准控制元素在页面中的垂直布局位置 -->
margin-top: 0;
}
.operate-container {
margin-top: 0;
}
</style>

@ -1,55 +1,29 @@
<template>
<!-- 整个页面的外层容器用于对内部各部分内容进行整体布局 -->
<template> 
<div class="app-container">
<!-- el-card组件用于创建一个卡片式的容器设置了无阴影效果shadow="never"并添加了"operate-container"类名通常可用于放置操作相关的元素比如这里放置了添加按钮等 -->
<el-card shadow="never" class="operate-container">
<!-- 显示一个图标此处使用的是element-ui提供的"el-icon-tickets"图标用于对下方数据列表进行某种示意比如暗示和票务商品列表等相关的操作场景 -->
<i class="el-icon-tickets"></i>
<!-- 显示文字"数据列表"用于明确下方表格所展示数据的性质让用户知晓表格中呈现的是什么内容 -->
<span>数据列表</span>
<!-- el-button组件用于创建一个按钮设置了按钮尺寸为"mini"小型按钮添加了"btn-add"类名可能用于样式设置等绑定了点击事件"handleAdd"点击该按钮可触发对应的添加操作逻辑 -->
<el-button size="mini" class="btn-add" @click="handleAdd()"></el-button>
</el-card>
<!-- 放置数据表格的容器用于包裹下面的el-table组件使其在页面布局上更加规整将表格与其他元素区分开来 -->
<div class="table-container">
<!-- el-table组件用于创建一个数据表格设置了表格引用为"flashSessionTable"绑定了数据"list"这个数据应该是从组件的data属性或者通过接口获取等方式得到的包含了要展示在表格中的具体数据内容设置表格宽度为占满父容器100%根据"listLoading"的值来显示加载状态如加载动画等方便用户知晓数据是否正在加载中并添加了边框样式 -->
<el-table ref="flashSessionTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- el-table-column组件用于定义表格中的列此列用于展示编号信息设置了列的宽度为100像素内容在单元格中居中对齐 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内通过slot-scope获取到对应行的数据对象通过插值表达式显示对应行数据中的"id"字段内容即展示每一行数据的编号 -->
{{scope.row.id}}
</template>
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示秒杀时间段名称信息内容在单元格中居中对齐直接展示对应行数据中的"name"字段内容用于显示每个秒杀时间段对应的名称 -->
<el-table-column label="秒杀时间段名称" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内通过插值表达式显示对应行数据中的"name"字段内容即展示每一行数据对应的秒杀时间段的名称 -->
{{scope.row.name}}
</template>
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示每日开始时间信息内容在单元格中居中对齐使用了名为"formatTime"的过滤器应该是在组件的filters选项中定义的用于对时间数据进行格式化处理对时间数据进行格式化后再展示 -->
<el-table-column label="每日开始时间" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内使用"formatTime"过滤器对对应行数据中的"startTime"字段时间类型数据进行格式化处理后展示 -->
{{scope.row.startTime | formatTime}}
</template>
<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示每日结束时间信息内容在单元格中居中对齐同样使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
<el-table-column label="每日结束时间" align="center">
<template slot-scope="scope">
<!-- 在表格单元格的作用域内使用"formatTime"过滤器对对应行数据中的"endTime"字段时间类型数据进行格式化处理后展示 -->
{{scope.row.endTime | formatTime}}
</template>
<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示启用状态信息内容在单元格中居中对齐里面包含了一个el-switch组件开关组件用于切换启用/禁用状态 -->
<el-table-column label="启用" align="center">
<template slot-scope="scope">
<!-- el-switch组件用于创建一个开关按钮绑定了状态改变的事件"handleStatusChange"当开关状态改变时会触发该事件传递当前行的索引和整行数据作为参数设置了激活值为1表示启用状态对应的数值未激活值为0表示禁用状态对应的数值双向绑定对应行数据中的"status"字段意味着开关状态的改变会直接更新对应行数据里的这个字段值 -->
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
@ -58,15 +32,12 @@
</el-switch>
</template>
</el-table-column>
<!-- el-table-column组件用于定义表格中的列此列用于展示操作按钮设置了列的宽度为180像素内容在单元格中居中对齐 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<!-- el-button组件用于创建一个按钮设置了按钮尺寸为"mini"小型按钮按钮类型为"text"文本样式按钮通常外观上更简洁无背景色等绑定了点击事件"handleUpdate"点击该按钮可触发编辑操作逻辑按钮显示的文字为"编辑" -->
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<!-- el-button组件用于创建一个按钮设置了按钮尺寸为"mini"小型按钮按钮类型为"text"文本样式按钮通常外观上更简洁无背景色等绑定了点击事件"handleDelete"点击该按钮可触发删除操作逻辑按钮显示的文字为"删除" -->
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
@ -75,203 +46,163 @@
</el-table-column>
</el-table>
</div>
<!-- el-dialog组件用于创建一个弹出式对话框常用于展示表单让用户输入信息或者进行确认等操作设置了对话框的标题为"添加时间段"通过":visible.sync"双向绑定了对话框的显示状态与组件data中的dialogVisible属性相关联改变该属性值可控制对话框的显示与隐藏设置了对话框的宽度为40%相对于屏幕宽度等的占比用于控制对话框大小 -->
<el-dialog
title="添加时间段"
:visible.sync="dialogVisible"
width="40%">
<!-- el-form组件用于创建一个表单绑定了数据模型"flashSession"这个对象应该在组件的data属性中定义用于存储表单中输入的数据等设置了表单引用为"flashSessionForm"可用于后续对表单进行验证等操作时的标识设置了标签宽度为150像素表单整体尺寸为"small"小型尺寸用于统一表单元素的外观大小等风格 -->
<el-form :model="flashSession"
ref="flashSessionForm"
label-width="150px" size="small">
<!-- el-form-item组件用于定义表单中的表单项此表单项对应的标签为"秒杀时间段名称:"用于提示用户此处应输入的内容 -->
<el-form-item label="秒杀时间段名称:">
<!-- el-input组件用于创建一个输入框双向绑定了"flashSession.name"数据意味着用户在输入框中输入的内容会实时更新到"flashSession"对象的"name"属性中设置了输入框的宽度为250像素 -->
<el-input v-model="flashSession.name" style="width: 250px"></el-input>
</el-form-item>
<!-- el-form-item组件用于定义表单中的表单项此表单项对应的标签为"每日开始时间:"用于提示用户此处应选择时间 -->
<el-form-item label="每日开始时间:">
<!-- el-time-picker组件用于创建一个时间选择器用户可以通过它选择具体的时间双向绑定了"flashSession.startTime"数据选择的时间会更新到"flashSession"对象的"startTime"属性中设置了占位提示文字为"请选择时间" -->
<el-time-picker
v-model="flashSession.startTime"
placeholder="请选择时间">
</el-time-picker>
</el-form-item>
<!-- el-form-item组件用于定义表单中的表单项此表单项对应的标签为"每日结束时间:"用于提示用户此处应选择时间 -->
<el-form-item label="每日结束时间:">
<!-- el-time-picker组件用于创建一个时间选择器用户可以通过它选择具体的时间双向绑定了"flashSession.endTime"数据选择的时间会更新到"flashSession"对象的"endTime"属性中设置了占位提示文字为"请选择时间" -->
<el-time-picker
v-model="flashSession.endTime"
placeholder="请选择时间">
</el-time-picker>
</el-form-item>
<!-- el-form-item组件用于定义表单中的表单项此表单项对应的标签为"是否启用"用于让用户选择该时间段是否启用 -->
<el-form-item label="是否启用">
<!-- el-radio-group组件用于创建一个单选按钮组绑定了"flashSession.status"数据意味着用户选择的单选按钮的值会更新到"flashSession"对象的"status"属性中 -->
<el-radio-group v-model="flashSession.status">
<!-- el-radio组件用于创建一个单选按钮设置了按钮的标签值为1对应的显示文字为"启用"用户选择该按钮后会将"flashSession.status"的值设为1 -->
<el-radio :label="1">启用</el-radio>
<!-- el-radio组件用于创建一个单选按钮设置了按钮的标签值为0对应的显示文字为"不启用"用户选择该按钮后会将"flashSession.status"的值设为0 -->
<el-radio :label="0">不启用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部的操作按钮区域使用了插槽"footer"来定义通常用于放置确认取消等按钮 -->
<span slot="footer" class="dialog-footer">
<!-- el-button组件用于创建一个按钮点击事件绑定了将"dialogVisible"属性设为false的操作即关闭对话框设置了按钮尺寸为"small"小型按钮按钮显示的文字为"取 消" -->
<el-button @click="dialogVisible = false" size="small"> </el-button>
<!-- el-button组件用于创建一个按钮设置了按钮类型为"primary"主要按钮通常会有突出的样式比如颜色与其他按钮不同等点击事件绑定了"handleDialogConfirm"方法这个方法应该在组件的methods选项中定义用于处理确认添加等相关逻辑设置了按钮尺寸为"small"小型按钮按钮显示的文字为"确 定" -->
<el-button type="primary" @click="handleDialogConfirm()" size="small"> </el-button>
</span>
<el-button @click="dialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// '@/api/flashSession'API
import {fetchList, updateStatus, deleteSession, createSession, updateSession} from '@/api/flashSession';
// '@/utils/date'formatDate使
import {formatDate} from '@/utils/date';
//
const defaultFlashSession = { //
name: null,
startTime: null,
endTime: null,
status: 0 //
};
export default {
name: 'flashPromotionSessionList',
data() {
return {
// null便
list: null,
// falsetruefalse
listLoading: false,
// /false
dialogVisible: false,
// truefalsefalse便
isEdit: false,
// defaultFlashSession
flashSession: Object.assign({}, defaultFlashSession)
}
},
created() {
// 使
this.getList();
},
filters: {
// formatTime便
formatTime(time) {
// null 'N/A'
if (time == null || time === '') {
return 'N/A';
import {fetchList,updateStatus,deleteSession,createSession,updateSession} from '@/api/flashSession';
import {formatDate} from '@/utils/date';
const defaultFlashSession={
name:null,
startTime:null,
endTime:null,
status:0
};
export default {
name: 'flashPromotionSessionList',
data() {
return {
list: null,
listLoading: false,
dialogVisible:false,
isEdit:false,
flashSession:Object.assign({},defaultFlashSession)
}
// JavaScriptDate便使formatDateDate便
let date = new Date(time);
// formatDate 'hh:mm:ss' Date "12:30:00"
return formatDate(date, 'hh:mm:ss')
}
},
methods: {
//
handleAdd() {
this.dialogVisible = true; //true
this.isEdit = false;
this.flashSession = Object.assign({}, defaultFlashSession); //
},
// /
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!' //
});
});
}).catch(() => { //
this.$message({
type: 'info',
message: '取消修改'
});
this.getList(); //
});
created() {
this.getList();
},
// .
handleUpdate(index, row) {
this.dialogVisible = true; //true
this.isEdit = true; //
this.flashSession = Object.assign({}, row);
this.flashSession.startTime = new Date(row.startTime); //Date便便
this.flashSession.endTime = new Date(row.endTime);
filters:{
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'hh:mm:ss')
}
},
// .
handleDelete(index, row) {
this.$confirm('是否要删除该时间段?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //
deleteSession(row.id).then(response => {
methods: {
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.flashSession = Object.assign({},defaultFlashSession);
},
handleStatusChange(index,row){
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '删除成功!' //
type: 'info',
message: '取消修改'
});
this.getList(); //使
this.getList();
});
});
},
// .
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //
if (this.isEdit) {
updateSession(this.flashSession.id, this.flashSession).then(response => {
},
handleUpdate(index,row){
this.dialogVisible = true;
this.isEdit = true;
this.flashSession = Object.assign({},row);
this.flashSession.startTime=new Date(row.startTime);
this.flashSession.endTime=new Date(row.endTime);
},
handleDelete(index,row){
this.$confirm('是否要删除该时间段?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteSession(row.id).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
type: 'success',
message: '删除成功!'
});
this.dialogVisible = false;
this.getList();
})
} else {
createSession(this.flashSession).then(response => {
this.$message({
message: '添加成功!', //
type: 'success'
});
this.dialogVisible = false;
this.getList(); //
})
}
})
},
//
getList() {
this.listLoading = true; //true
fetchList({}).then(response => { //fetchList
this.listLoading = false; //false
this.list = response.data; //list
});
});
});
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateSession(this.flashSession.id,this.flashSession).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createSession(this.flashSession).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
getList() {
this.listLoading = true;
fetchList({}).then(response => {
this.listLoading = false;
this.list = response.data;
});
}
}
}
}
</script>
<style scoped>
<!-- scoped属性表示当前这个style标签内定义的样式作用范围仅限于当前组件内部避免样式影响到其他组件中同名的类或元素起到样式隔离的作用使得样式管理更加清晰和模块化 -->
.operate-container {
<!-- 这是一个CSS选择器用于选中页面中所有应用了operate-container类名的元素接下来在花括号内定义的样式规则就会应用到这些被选中的元素上 -->
<!-- margin-top是CSS的一个属性用于设置元素的上外边距也就是该元素距离其上方相邻元素的间隔距离这里将其值设置为0意味着应用了operate-container类名的元素其上外边距为0像素能精准控制这类元素在页面垂直方向上的布局位置使其更贴合设计需求 -->
margin-top: 0;
}
.operate-container {
margin-top: 0;
}
</style>

@ -1,14 +1,9 @@
<template>
<!-- 整个应用的容器 -->
<template> 
<div class="app-container">
<!-- 筛选搜索的卡片容器设置了阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索文字 -->
<span>筛选搜索</span>
<!-- 查询搜索按钮设置了样式为右浮动类型为主要按钮点击时触发handleSearchList方法按钮大小为小 -->
<el-button
style="float:right"
type="primary"
@ -16,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮设置了样式为右浮动右外边距为15px点击时触发handleResetSearch方法按钮大小为小 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,18 +19,12 @@
</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.productName数据设置了类名和占位提示文字 -->
<el-input v-model="listQuery.productName" class="input-width" placeholder="商品名称"></el-input>
</el-form-item>
<!-- 表单项目标签为推荐状态 -->
<el-form-item label="推荐状态:">
<!-- 下拉选择框双向绑定listQuery.recommendStatus数据设置了占位提示文字和可清除添加了类名 -->
<el-select v-model="listQuery.recommendStatus" placeholder="全部" clearable class="input-width">
<!-- 循环生成下拉选项根据recommendOptions数据中的每个item来生成对应的选项 -->
<el-option v-for="item in recommendOptions"
:key="item.value"
:label="item.label"
@ -47,34 +35,24 @@
</el-form>
</div>
</el-card>
<!-- 操作相关的卡片容器设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 图标 -->
<i class="el-icon-tickets"></i>
<!-- 显示数据列表文字 -->
<i>数据列表</i>
<!-- 选择商品按钮设置了按钮大小为迷你点击时触发handleSelectProduct方法 -->
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleSelectProduct()"></el-button>
</el-card>
<!-- 表格容器 -->
<div class="table-container">
<!-- el-table组件绑定了list数据作为表格数据源设置了宽度为100%选择变化时触发handleSelectionChange方法加载状态绑定listLoading显示边框 -->
<el-table ref="newProductTable"
: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>
<!-- 表格列标签为编号宽度为120px内容居中对齐通过插槽作用域显示对应行的id数据 -->
<el-table-column label="编号" width="120" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列标签为商品名称内容居中对齐通过插槽作用域显示对应行的productName数据 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.productName}}</template>
</el-table-column>
<!-- 表格列标签为是否推荐宽度为200px内容居中对齐包含一个开关组件开关状态改变时触发handleRecommendStatusStatusChange方法设置了开关的激活值未激活值以及双向绑定对应行的recommendStatus数据 -->
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@ -85,15 +63,12 @@
</el-switch>
</template>
</el-table-column>
<!-- 表格列标签为排序宽度为160px内容居中对齐通过插槽作用域显示对应行的sort数据 -->
<el-table-column label="排序" width="160" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 表格列标签为状态宽度为160px内容居中对齐通过管道formatRecommendStatus对对应行的recommendStatus数据进行格式化后显示 -->
<el-table-column label="状态" width="160" align="center">
<template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
</el-table-column>
<!-- 表格列标签为操作宽度为180px内容居中对齐包含两个按钮分别点击时触发handleEditSort和handleDelete方法 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -108,13 +83,10 @@
</el-table-column>
</el-table>
</div>
<!-- 批量操作的容器 -->
<div class="batch-operate-container">
<!-- 下拉选择框设置了大小为小双向绑定operateType数据设置了占位提示文字 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 循环生成下拉选项根据operates数据中的每个item来生成对应的选项 -->
<el-option
v-for="item in operates"
:key="item.value"
@ -122,7 +94,6 @@
:value="item.value">
</el-option>
</el-select>
<!-- 确定按钮设置了左外边距为20px样式类点击时触发handleBatchOperate方法类型为主要按钮大小为小 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -132,9 +103,7 @@
确定
</el-button>
</div>
<!-- 分页容器 -->
<div class="pagination-container">
<!-- el-pagination分页组件设置了背景色页面尺寸改变时触发handleSizeChange方法当前页改变时触发handleCurrentChange方法布局样式绑定了当前页每页显示数量可选的每页显示数量列表以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -146,35 +115,27 @@
:total="total">
</el-pagination>
</div>
<!-- 选择商品的对话框绑定了显示状态设置了标题和宽度 -->
<el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
<!-- 输入框双向绑定dialogData.listQuery.keyword数据设置了宽度下外边距大小和占位提示文字包含一个搜索按钮点击时触发handleSelectSearch方法 -->
<el-input v-model="dialogData.listQuery.keyword"
style="width: 250px;margin-bottom: 20px"
size="small"
placeholder="商品名称搜索">
<el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
</el-input>
<!-- 表格绑定了dialogData.list数据作为数据源选择变化时触发handleDialogSelectionChange方法显示边框 -->
<el-table :data="dialogData.list"
@selection-change="handleDialogSelectionChange" border>
<!-- 表格列类型为选择列宽度为60px内容居中对齐 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 表格列标签为商品名称内容居中对齐通过插槽作用域显示对应行的name数据 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列标签为货号宽度为160px内容居中对齐通过插槽作用域显示对应行的productSn数据格式化为NO. + 货号 -->
<el-table-column label="货号" width="160" align="center">
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column>
<!-- 表格列标签为价格宽度为120px内容居中对齐通过插槽作用域显示对应行的price数据格式化为 + 价格 -->
<el-table-column label="价格" width="120" align="center">
<template slot-scope="scope">{{scope.row.price}}</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<!-- el-pagination分页组件设置了背景色页面尺寸改变时触发handleDialogSizeChange方法当前页改变时触发handleDialogCurrentChange方法布局样式绑定了当前页每页显示数量可选的每页显示数量列表以及总记录数等属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@ -188,331 +149,282 @@
</div>
<div style="clear: both;"></div>
<div slot="footer">
<!-- 取消按钮设置了大小为小点击时隐藏对话框 -->
<el-button size="small" @click="selectDialogVisible = false"> </el-button>
<!-- 确定按钮设置了大小为小类型为主要按钮点击时触发handleSelectDialogConfirm方法 -->
<el-button size="small" type="primary" @click="handleSelectDialogConfirm()"> </el-button>
</div>
</el-dialog>
<!-- 设置排序的对话框绑定了显示状态设置了标题和宽度 -->
<el-dialog title="设置排序"
:visible.sync="sortDialogVisible"
width="40%">
<!-- 表单绑定了sortDialogData数据模型设置了标签宽度 -->
<el-form :model="sortDialogData"
label-width="150px">
<!-- 表单项目标签为排序 -->
<el-form-item label="排序:">
<!-- 输入框双向绑定sortDialogData.sort数据设置了宽度 -->
<el-input v-model="sortDialogData.sort" style="width: 200px"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<!-- 取消按钮点击时隐藏对话框设置了大小为小 -->
<el-button @click="sortDialogVisible = false" size="small"> </el-button>
<!-- 确定按钮点击时触发handleUpdateSort方法设置了大小为小类型为主要按钮 -->
<el-button type="primary" @click="handleUpdateSort" size="small"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// '@/api/hotProduct'
import {fetchList, updateRecommendStatus, deleteHotProduct, createHotProduct, updateHotProductSort} from '@/api/hotProduct';
// '@/api/product'fetchListfetchProductList
import {fetchList as fetchProductList} from '@/api/product';
import {fetchList,updateRecommendStatus,deleteHotProduct,createHotProduct,updateHotProductSort} from '@/api/hotProduct';
import {fetchList as fetchProductList} from '@/api/product';
//
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
//
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
// Vue
export default {
//
name: 'hotProductList',
data() {
return {
// defaultListQuery
listQuery: Object.assign({}, defaultListQuery),
// defaultRecommendOptions
recommendOptions: Object.assign({}, defaultRecommendOptions),
// null
list: null,
// null
total: null,
// truefalse
listLoading: false,
//
multipleSelection: [],
//
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
// null
operateType: null,
// falsetrue
selectDialogVisible: false,
//
dialogData: {
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'hotProductList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
recommendOptions: Object.assign({}, defaultRecommendOptions),
list: null,
total: null,
listLoading: false,
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
//
sortDialogVisible: false,
// id
sortDialogData: {sort: 0, id: null}
}
},
//
created() {
this.getList();
},
// 1
filters: {
formatRecommendStatus(status) {
if (status === 1) {
return '推荐中';
} else {
return '未推荐';
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
operateType: null,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
}
}
},
methods: {
//
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 1
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
//
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 1
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
//
handleCurrentChange(val) {
this.listQuery.pageNum = val;
created() {
this.getList();
},
// id
handleRecommendStatusStatusChange(index, row) {
this.updateRecommendStatusStatus(row.id, row.recommendStatus);
},
// id
handleDelete(index, row) {
this.deleteProduct(row.id);
},
//
handleBatchOperate() {
if (this.multipleSelection < 1) {
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);
}
if (this.operateType === 0) {
//
this.updateRecommendStatusStatus(ids, 1);
} else if (this.operateType === 1) {
//
this.updateRecommendStatusStatus(ids, 0);
} else if (this.operateType === 2) {
//
this.deleteProduct(ids);
} else {
this.$message({ //
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
filters:{
formatRecommendStatus(status){
if(status===1){
return '推荐中';
}else{
return '未推荐';
}
}
},
//
handleSelectProduct() {
this.selectDialogVisible = true;
this.getDialogList();
},
//
handleSelectSearch() {
this.getDialogList();
},
// 1
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
//
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
//
handleDialogSelectionChange(val) {
this.dialogData.multipleSelection = val;
},
//
handleSelectDialogConfirm() {
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId: this.dialogData.multipleSelection[i].id,
productName: this.dialogData.multipleSelection[i].name
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //
createHotProduct(selectProducts).then(response => {
this.selectDialogVisible = false;
this.dialogData.multipleSelection = [];
this.getList();
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
handleDelete(index,row){
this.deleteProduct(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
type: 'success',
message: '添加成功!'
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
});
});
},
//
handleEditSort(index, row) {
this.sortDialogVisible = true;
this.sortDialogData.sort = row.sort; //id
this.sortDialogData.id = row.id;
},
//
handleUpdateSort() { //
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //
updateHotProductSort(this.sortDialogData).then(response => {
this.sortDialogVisible = false;
this.getList();
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//
this.updateRecommendStatusStatus(ids,1);
} else if (this.operateType === 1) {
//
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
//
this.deleteProduct(ids);
}else {
this.$message({
type: 'success',
message: '删除成功!'
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
});
})
},
//
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => { //fetchList
this.listLoading = false;
this.list = response.data.list; //
this.total = response.data.total;
})
},
//
updateRecommendStatusStatus(ids, status) {
this.$confirm('是否要修改推荐状态?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams(); //idURLSearchParams
params.append("ids", ids);
params.append("recommendStatus", status);
updateRecommendStatus(params).then(response => { //updateRecommendStatus
this.getList();
}
},
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
type: 'success',
message: '修改成功!' //
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId:this.dialogData.multipleSelection[i].id,
productName:this.dialogData.multipleSelection[i].name
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createHotProduct(selectProducts).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!' //
});
this.getList();
});
},
//
deleteProduct(ids) {
this.$confirm('是否要删除该推荐?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams(); //idURLSearchParams
params.append("ids", ids);
deleteHotProduct(params).then(response => { //deleteHotProduct
this.getList();
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
},
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateHotProductSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '删除成功!' //
message: '已取消操作!'
});
this.getList();
});
})
},
//
getDialogList() {
fetchProductList(this.dialogData.listQuery).then(response => { //fetchProductList
this.dialogData.list = response.data.list; //
this.dialogData.total = response.data.total;
})
},
deleteProduct(ids){
this.$confirm('是否要删除该推荐?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHotProduct(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
}
</script>
<style></style>

@ -1,14 +1,9 @@
<template>
<!-- 整个页面的容器 -->
<template> 
<div class="app-container">
<!-- 筛选搜索区域的卡片 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索文字 -->
<span>筛选搜索</span>
<!-- 查询搜索按钮点击触发handleSearchList方法按钮样式为小型主色调 -->
<el-button
style="float:right"
type="primary"
@ -16,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮点击触发handleResetSearch方法按钮样式为小型与查询搜索按钮有一定间隔 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,18 +19,12 @@
</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.productName设置了占位提示文字 -->
<el-input v-model="listQuery.productName" class="input-width" placeholder="商品名称"></el-input>
</el-form-item>
<!-- 推荐状态表单项 -->
<el-form-item label="推荐状态:">
<!-- 下拉选择框双向绑定listQuery.recommendStatus有清除功能设置了占位提示文字 -->
<el-select v-model="listQuery.recommendStatus" placeholder="全部" clearable class="input-width">
<!-- 循环生成下拉选项每个选项的keylabelvalue根据recommendOptions中的数据来设置 -->
<el-option v-for="item in recommendOptions"
:key="item.value"
:label="item.label"
@ -47,37 +35,26 @@
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片 -->
<el-card class="operate-container" shadow="never">
<!-- 图标 -->
<i class="el-icon-tickets"></i>
<!-- 显示数据列表文字 -->
<span>数据列表</span>
<!-- 选择商品按钮点击触发handleSelectProduct方法按钮尺寸为迷你型 -->
<el-button size="mini" class="btn-add" @click="handleSelectProduct()"></el-button>
</el-card>
<!-- 表格容器 -->
<div class="table-container">
<!-- el-table组件绑定数据为list设置宽度为100%监听选择变化事件根据listLoading状态显示加载动画有边框 -->
<el-table ref="newProductTable"
: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>
<!-- 编号列宽度为120px内容居中通过插槽作用域展示对应行的id数据 -->
<el-table-column label="编号" width="120" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 商品名称列内容居中通过插槽作用域展示对应行的productName数据 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.productName}}</template>
</el-table-column>
<!-- 是否推荐列宽度为200px内容居中包含一个开关组件 -->
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<!-- 开关组件监听状态改变事件设置了激活和未激活的值双向绑定对应行的recommendStatus数据 -->
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
@ -86,23 +63,18 @@
</el-switch>
</template>
</el-table-column>
<!-- 排序列宽度为160px内容居中通过插槽作用域展示对应行的sort数据 -->
<el-table-column label="排序" width="160" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 状态列宽度为160px内容居中通过管道formatRecommendStatus格式化对应行的recommendStatus数据来展示 -->
<el-table-column label="状态" width="160" align="center">
<template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
</el-table-column>
<!-- 操作列宽度为180px内容居中包含设置排序和删除两个按钮 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<!-- 设置排序按钮点击触发handleEditSort方法按钮尺寸为迷你型文本样式 -->
<el-button size="mini"
type="text"
@click="handleEditSort(scope.$index, scope.row)">设置排序
</el-button>
<!-- 删除按钮点击触发handleDelete方法按钮尺寸为迷你型文本样式 -->
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
@ -111,13 +83,10 @@
</el-table-column>
</el-table>
</div>
<!-- 批量操作容器 -->
<div class="batch-operate-container">
<!-- 下拉选择框用于选择批量操作类型双向绑定operateType设置了占位提示文字 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 循环生成下拉选项每个选项的keylabelvalue根据operates中的数据来设置 -->
<el-option
v-for="item in operates"
:key="item.value"
@ -125,7 +94,6 @@
:value="item.value">
</el-option>
</el-select>
<!-- 确定按钮点击触发handleBatchOperate方法按钮样式为小型主色调与下拉选择框有一定间隔 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -135,9 +103,7 @@
确定
</el-button>
</div>
<!-- 分页容器 -->
<div class="pagination-container">
<!-- el-pagination分页组件设置了背景色监听页面尺寸改变和当前页改变事件配置了布局页面尺寸可选页面尺寸列表当前页总数据量等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -149,36 +115,27 @@
:total="total">
</el-pagination>
</div>
<!-- 选择商品的对话框 -->
<el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
<!-- 输入框双向绑定dialogData.listQuery.keyword设置了宽度样式占位提示文字包含一个搜索按钮 -->
<el-input v-model="dialogData.listQuery.keyword"
style="width: 250px;margin-bottom: 20px"
size="small"
placeholder="商品名称搜索">
<el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
</el-input>
<!-- el-table组件用于对话框内展示数据绑定数据为dialogData.list监听选择变化事件有边框 -->
<el-table :data="dialogData.list"
@selection-change="handleDialogSelectionChange" border>
<!-- 选择列宽度为60px内容居中 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 商品名称列内容居中通过插槽作用域展示对应行的name数据 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 货号列宽度为160px内容居中通过插槽作用域展示对应行的productSn数据格式化展示格式 -->
<el-table-column label="货号" width="160" align="center">
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column>
<!-- 价格列宽度为120px内容居中通过插槽作用域展示对应行的price数据格式化展示格式 -->
<el-table-column label="价格" width="120" align="center">
<template slot-scope="scope">{{scope.row.price}}</template>
</el-table-column>
</el-table>
<!-- 对话框内的分页容器 -->
<div class="pagination-container">
<!-- el-pagination分页组件设置了背景色监听对话框内页面尺寸改变和当前页改变事件配置了布局页面尺寸可选页面尺寸列表当前页总数据量等属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@ -192,334 +149,282 @@
</div>
<div style="clear: both;"></div>
<div slot="footer">
<!-- 取消按钮点击隐藏对话框按钮尺寸为小型 -->
<el-button size="small" @click="selectDialogVisible = false"> </el-button>
<!-- 确定按钮点击触发handleSelectDialogConfirm方法按钮尺寸为小型主色调 -->
<el-button size="small" type="primary" @click="handleSelectDialogConfirm()"> </el-button>
</div>
</el-dialog>
<!-- 设置排序的对话框 -->
<el-dialog title="设置排序"
:visible.sync="sortDialogVisible"
width="40%">
<!-- el-form表单组件绑定数据模型为sortDialogData设置标签宽度 -->
<el-form :model="sortDialogData"
label-width="150px">
<!-- 排序表单项 -->
<el-form-item label="排序:">
<!-- 输入框双向绑定sortDialogData.sort设置了宽度 -->
<el-input v-model="sortDialogData.sort" style="width: 200px"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<!-- 取消按钮点击隐藏对话框按钮尺寸为小型 -->
<el-button @click="sortDialogVisible = false" size="small"> </el-button>
<!-- 确定按钮点击触发handleUpdateSort方法按钮尺寸为小型主色调 -->
<el-button type="primary" @click="handleUpdateSort" size="small"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// '@/api/newProduct'
import {fetchList,updateRecommendStatus,deleteNewProduct,createNewProduct,updateNewProductSort} from '@/api/newProduct';
// '@/api/product'fetchListfetchProductList
import {fetchList as fetchProductList} from '@/api/product';
import {fetchList,updateRecommendStatus,deleteNewProduct,createNewProduct,updateNewProductSort} from '@/api/newProduct';
import {fetchList as fetchProductList} from '@/api/product';
//
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
// ''0
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'newProductList',
data() {
return {
// defaultListQuery
listQuery: Object.assign({}, defaultListQuery),
// defaultRecommendOptions
recommendOptions: Object.assign({}, defaultRecommendOptions),
// null
list: null,
// null
total: null,
// false
listLoading: false,
//
multipleSelection: [],
// ''0
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
// null
operateType: null,
// false
selectDialogVisible:false,
dialogData:{
// null
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'newProductList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
recommendOptions: Object.assign({}, defaultRecommendOptions),
list: null,
// null
total: null,
//
multipleSelection:[],
listQuery:{
// null
keyword: null,
// 1
pageNum: 1,
// 5
pageSize: 5
}
},
// false
sortDialogVisible:false,
// id
sortDialogData:{sort:0,id:null}
}
},
created() {
// getList
this.getList();
},
filters:{
// formatRecommendStatus
formatRecommendStatus(status){
if(status===1){ //10''''
return '推荐中';
}else{
return '未推荐';
listLoading: false,
multipleSelection: [],
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
operateType: null,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
}
}
},
methods: {
// defaultListQuery
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 1getList
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// multipleSelection
handleSelectionChange(val){
this.multipleSelection = val;
},
// 1getList
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
created() {
this.getList();
},
// getList
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// updateRecommendStatusStatusid
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
// deleteProductid
handleDelete(index,row){
this.deleteProduct(row.id);
},
//
handleBatchOperate(){
if (this.multipleSelection < 1) {
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);
}
if (this.operateType === 0) {
//
this.updateRecommendStatusStatus(ids,1);
} else if (this.operateType === 1) {
//
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
//
this.deleteProduct(ids);
}else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
filters:{
formatRecommendStatus(status){
if(status===1){
return '推荐中';
}else{
return '未推荐';
}
}
},
// getDialogList
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
},
// getDialogList
handleSelectSearch(){
this.getDialogList();
},
// 1getDialogList
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
// getDialogList
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
// dialogData.multipleSelection
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
//
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = []; //
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId:this.dialogData.multipleSelection[i].id,
productName:this.dialogData.multipleSelection[i].name
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createNewProduct(selectProducts).then(response=>{ //createNewProduct
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList(); //
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
handleDelete(index,row){
this.deleteProduct(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
type: 'success',
message: '添加成功!'
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
});
});
},
//
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id; //id便
},
//
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateNewProductSort(this.sortDialogData).then(response=>{ //updateNewProductSort
this.sortDialogVisible=false;
this.getList(); //
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//
this.updateRecommendStatusStatus(ids,1);
} else if (this.operateType === 1) {
//
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
//
this.deleteProduct(ids);
}else {
this.$message({
type: 'success',
message: '删除成功!'
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
});
})
},
//
getList() {
this.listLoading = true; //true
fetchList(this.listQuery).then(response => { //fetchList
this.listLoading = false; //false
this.list = response.data.list; //
this.total = response.data.total;
})
},
//
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams(); //ididURLSearchParams
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{ //updateRecommendStatus
this.getList(); //
}
},
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
type: 'success',
message: '修改成功!'
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId:this.dialogData.multipleSelection[i].id,
productName:this.dialogData.multipleSelection[i].name
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createNewProduct(selectProducts).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
}).catch(() => {
this.$message({ //
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
//
deleteProduct(ids){
this.$confirm('是否要删除该推荐?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams(); //ididURLSearchParams
params.append("ids",ids);
deleteNewProduct(params).then(response=>{ //deleteNewProduct
this.getList(); //
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
},
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateNewProductSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '删除成功!'
message: '已取消操作!'
});
this.getList();
});
})
},
//
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{ //fetchProductList
this.dialogData.list=response.data.list; //
this.dialogData.total=response.data.total;
})
},
deleteProduct(ids){
this.$confirm('是否要删除该推荐?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteNewProduct(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
}
</script>
<style></style>

@ -1,14 +1,9 @@
<template>
<!-- 整个页面的容器用于包裹内部的各个组件 -->
<template> 
<div class="app-container">
<!-- el-card组件作为筛选搜索区域的容器设置阴影效果为"never"即无阴影 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用el-icon-search图标用于表示搜索相关的视觉元素 -->
<i class="el-icon-search"></i>
<!-- 显示"筛选搜索"的文字提示 -->
<span>筛选搜索</span>
<!-- el-button按钮组件样式设置为右浮动按钮类型为"primary"主要按钮样式通常为主题色等突出显示点击时调用handleSearchList方法按钮大小为"small" -->
<el-button
style="float:right"
type="primary"
@ -16,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- el-button按钮组件样式设置为右浮动且距离右边距15px点击时调用handleResetSearch方法按钮大小为"small"用于重置相关操作 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,18 +19,12 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- el-form表单组件设置为行内表单形式绑定的数据模型是listQuery表单尺寸为"small"标签宽度为140px -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- el-form-item表单项目组件用于输入框的包裹此处对应的标签文本为"专题名称:" -->
<el-form-item label="专题名称:">
<!-- el-input输入框组件双向绑定数据到listQuery.subjectName设置输入框的类名为"input-width"有相应的占位提示文字 -->
<el-input v-model="listQuery.subjectName" class="input-width" placeholder="专题名称"></el-input>
</el-form-item>
<!-- el-form-item表单项目组件用于下拉选择框的包裹对应的标签文本为"推荐状态:" -->
<el-form-item label="推荐状态:">
<!-- el-select下拉选择框组件双向绑定数据到listQuery.recommendStatus有相应的占位提示文字可清空选择设置类名为"input-width" -->
<el-select v-model="listQuery.recommendStatus" placeholder="全部" clearable class="input-width">
<!-- 通过v-for循环遍历recommendOptions数组生成el-option下拉选项每个选项根据item中的属性设置相应的键显示标签和值 -->
<el-option v-for="item in recommendOptions"
:key="item.value"
:label="item.label"
@ -47,34 +35,24 @@
</el-form>
</div>
</el-card>
<!-- el-card组件作为操作相关区域的容器设置阴影效果为"never"即无阴影 -->
<el-card class="operate-container" shadow="never">
<!-- 使用el-icon-tickets图标用于表示相关操作的视觉元素 -->
<i class="el-icon-tickets"></i>
<!-- 显示"数据列表"的文字提示 -->
<span>数据列表</span>
<!-- el-button按钮组件按钮尺寸为"mini"点击时调用handleSelectSubject方法按钮样式类名为"btn-add"用于选择专题操作 -->
<el-button size="mini" class="btn-add" @click="handleSelectSubject()"></el-button>
</el-card>
<!-- 作为表格显示区域的容器 -->
<div class="table-container">
<!-- el-table表格组件引用了ref为"newSubjectTable"绑定的数据为list设置宽度为100%监听行选择变化事件绑定加载状态到listLoading变量显示表格边框 -->
<el-table ref="newSubjectTable"
:data="list"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading" border>
<!-- el-table-column表格列组件设置列类型为"selection"用于行选择的复选框列宽度为60px内容居中对齐 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- el-table-column表格列组件对应的标签为"编号"宽度为120px内容居中对齐通过插槽作用域展示对应行数据中的id属性 -->
<el-table-column label="编号" width="120" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- el-table-column表格列组件对应的标签为"专题名称"内容居中对齐通过插槽作用域展示对应行数据中的subjectName属性 -->
<el-table-column label="专题名称" align="center">
<template slot-scope="scope">{{scope.row.subjectName}}</template>
</el-table-column>
<!-- el-table-column表格列组件对应的标签为"是否推荐"宽度为200px内容居中对齐内部包含一个el-switch开关组件用于切换推荐状态绑定相应的事件和值 -->
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@ -85,15 +63,12 @@
</el-switch>
</template>
</el-table-column>
<!-- el-table-column表格列组件对应的标签为"排序"宽度为160px内容居中对齐通过插槽作用域展示对应行数据中的sort属性 -->
<el-table-column label="排序" width="160" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- el-table-column表格列组件对应的标签为"状态"宽度为160px内容居中对齐通过过滤器formatRecommendStatus对推荐状态数据进行格式化展示 -->
<el-table-column label="状态" width="160" align="center">
<template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
</el-table-column>
<!-- el-table-column表格列组件对应的标签为"操作"宽度为180px内容居中对齐内部包含两个el-button按钮组件分别用于设置排序和删除操作绑定对应的点击事件 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -108,13 +83,10 @@
</el-table-column>
</el-table>
</div>
<!-- 作为批量操作区域的容器 -->
<div class="batch-operate-container">
<!-- el-select下拉选择框组件尺寸为"small"双向绑定数据到operateType有相应的占位提示文字 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 通过v-for循环遍历operates数组生成el-option下拉选项每个选项根据item中的属性设置相应的键显示标签和值 -->
<el-option
v-for="item in operates"
:key="item.value"
@ -122,7 +94,6 @@
:value="item.value">
</el-option>
</el-select>
<!-- el-button按钮组件距离左边距20px样式类名为"search-button"点击时调用handleBatchOperate方法按钮类型为"primary"主要按钮样式按钮尺寸为"small"用于确定批量操作 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -132,9 +103,7 @@
确定
</el-button>
</div>
<!-- 作为分页区域的容器 -->
<div class="pagination-container">
<!-- el-pagination分页组件设置背景色监听页面尺寸变化和当前页变化事件设置分页布局样式绑定每页显示数量可选的每页显示数量数组当前页码以及总数据量等相关属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -146,35 +115,27 @@
:total="total">
</el-pagination>
</div>
<!-- el-dialog对话框组件标题为"选择专题"对话框显示状态双向绑定到selectDialogVisible变量宽度设置为50% -->
<el-dialog title="选择专题" :visible.sync="selectDialogVisible" width="50%">
<!-- el-input输入框组件双向绑定数据到dialogData.listQuery.keyword设置宽度底边距以及尺寸等样式属性有相应的占位提示文字内部包含一个用于搜索操作的el-button按钮 -->
<el-input v-model="dialogData.listQuery.keyword"
style="width: 250px;margin-bottom: 20px"
size="small"
placeholder="专题名称搜索">
<el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
</el-input>
<!-- el-table表格组件绑定的数据为dialogData.list监听行选择变化事件显示表格边框 -->
<el-table :data="dialogData.list"
@selection-change="handleDialogSelectionChange" border>
<!-- el-table-column表格列组件设置列类型为"selection"用于行选择的复选框列宽度为60px内容居中对齐 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- el-table-column表格列组件对应的标签为"专题名称"内容居中对齐通过插槽作用域展示对应行数据中的title属性 -->
<el-table-column label="专题名称" align="center">
<template slot-scope="scope">{{scope.row.title}}</template>
</el-table-column>
<!-- el-table-column表格列组件对应的标签为"所属分类"宽度为160px内容居中对齐通过插槽作用域展示对应行数据中的categoryName属性 -->
<el-table-column label="所属分类" width="160" align="center">
<template slot-scope="scope">{{scope.row.categoryName}}</template>
</el-table-column>
<!-- el-table-column表格列组件对应的标签为"添加时间"宽度为160px内容居中对齐通过过滤器formatTime对时间数据进行格式化展示 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<!-- el-pagination分页组件设置背景色监听对话框内页面尺寸变化和当前页变化事件设置分页布局样式绑定对话框内每页显示数量当前页码以及总数据量等相关属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@ -188,340 +149,291 @@
</div>
<div style="clear: both;"></div>
<div slot="footer">
<!-- el-button按钮组件按钮尺寸为"small"点击时关闭对话框设置selectDialogVisible为false -->
<el-button size="small" @click="selectDialogVisible = false"> </el-button>
<!-- el-button按钮组件按钮尺寸为"small"按钮类型为"primary"主要按钮样式点击时调用handleSelectDialogConfirm方法用于确定操作 -->
<el-button size="small" type="primary" @click="handleSelectDialogConfirm()"> </el-button>
</div>
</el-dialog>
<!-- el-dialog对话框组件标题为"设置排序"对话框显示状态双向绑定到sortDialogVisible变量宽度设置为40% -->
<el-dialog title="设置排序"
:visible.sync="sortDialogVisible"
width="40%">
<!-- el-form表单组件绑定的数据模型是sortDialogData标签宽度为150px -->
<el-form :model="sortDialogData"
label-width="150px">
<!-- el-form-item表单项目组件对应的标签为"排序:"内部包含一个el-input输入框组件用于输入排序相关的值设置输入框宽度 -->
<el-form-item label="排序:">
<el-input v-model="sortDialogData.sort" style="width: 200px"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<!-- el-button按钮组件点击时关闭对话框设置sortDialogVisible为false按钮尺寸为"small" -->
<el-button @click="sortDialogVisible = false" size="small"> </el-button>
<!-- el-button按钮组件按钮类型为"primary"主要按钮样式点击时调用handleUpdateSort方法按钮尺寸为"small"用于确定排序设置操作 -->
<el-button type="primary" @click="handleUpdateSort" size="small"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// '@/api/homeSubject'
import {fetchList,updateRecommendStatus,deleteHomeSubject,createHomeSubject,updateHomeSubjectSort} from '@/api/homeSubject';
// '@/api/subject'fetchListfetchSubjectList
import {fetchList as fetchSubjectList} from '@/api/subject';
// '@/utils/date'formatDate
import {formatDate} from '@/utils/date';
import {fetchList,updateRecommendStatus,deleteHomeSubject,createHomeSubject,updateHomeSubjectSort} from '@/api/homeSubject';
import {fetchList as fetchSubjectList} from '@/api/subject';
import {formatDate} from '@/utils/date';
//
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
subjectName: null,
recommendStatus: null
};
//
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'homeSubjectList',
data() {
return {
// defaultListQuery便
listQuery: Object.assign({}, defaultListQuery),
// defaultRecommendOptions
recommendOptions: Object.assign({}, defaultRecommendOptions),
// null
list: null,
// null
total: null,
// truefalse
listLoading: false,
//
multipleSelection: [],
//
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
// null
operateType: null,
// falsetrue
selectDialogVisible: false,
//
dialogData: {
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
subjectName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'homeSubjectList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
recommendOptions: Object.assign({}, defaultRecommendOptions),
list: null,
total: null,
listLoading: false,
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
// falsetrue
sortDialogVisible: false,
// id
sortDialogData: { sort: 0, id: null }
}
},
created() {
// getList
this.getList();
},
filters: {
// 1""""
formatRecommendStatus(status) {
if (status === 1) {
return '推荐中';
} else {
return '未推荐';
}
},
// "N/A"
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
operateType: null,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
// defaultListQuery
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 1getList
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// multipleSelection使
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 1getList
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
created() {
this.getList();
},
// getList
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// updateRecommendStatusStatusid
handleRecommendStatusStatusChange(index, row) {
this.updateRecommendStatusStatus(row.id, row.recommendStatus);
},
// deleteSubjectid
handleDelete(index, row) {
this.deleteSubject(row.id);
},
//
//
handleBatchOperate() {
if (this.multipleSelection < 1) { //
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);
}
if (this.operateType === 0) {
//
this.updateRecommendStatusStatus(ids, 1);
} else if (this.operateType === 1) {
//
this.updateRecommendStatusStatus(ids, 0);
} else if (this.operateType === 2) {
//
this.deleteSubject(ids);
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
//
handleSelectSubject() {
this.selectDialogVisible = true;
this.dialogData.listQuery.keyword = null;
this.getDialogList();//getDialogList
},
//
handleSelectSearch() {
this.getDialogList(); //getDialogList
},
//
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1; //1
this.dialogData.listQuery.pageSize = val;
this.getDialogList(); //getDialogList
},
//
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList(); //getDialogList
},
// 使
handleDialogSelectionChange(val) {
this.dialogData.multipleSelection = val;
filters:{
formatRecommendStatus(status){
if(status===1){
return '推荐中';
}else{
return '未推荐';
}
},
formatTime(time){
if(time==null||time===''){
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
//
handleSelectDialogConfirm() {
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectSubjects = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectSubjects.push({
subjectId: this.dialogData.multipleSelection[i].id,
subjectName: this.dialogData.multipleSelection[i].title
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createHomeSubject(selectSubjects).then(response => { //// createHomeSubject
this.selectDialogVisible = false;
this.dialogData.multipleSelection = [];
this.getList();
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
handleDelete(index,row){
this.deleteSubject(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
type: 'success',
message: '添加成功!'
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
});
});
},
//
handleEditSort(index, row) {
this.sortDialogVisible = true;
this.sortDialogData.sort = row.sort;
this.sortDialogData.id = row.id; //id
},
//
handleUpdateSort() {
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateHomeSubjectSort(this.sortDialogData).then(response => { //updateHomeSubjectSort
this.sortDialogVisible = false;
this.getList();
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//
this.updateRecommendStatusStatus(ids,1);
} else if (this.operateType === 1) {
//
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
//
this.deleteSubject(ids);
}else {
this.$message({
type: 'success',
message: '删除成功!' //updateHomeSubjectSort
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
});
})
},
//
getList() {
this.listLoading = true; //true
fetchList(this.listQuery).then(response => { //fetchList
this.listLoading = false; //false
this.list = response.data.list; ////
this.total = response.data.total;
})
},
//
updateRecommendStatusStatus(ids, status) {
this.$confirm('是否要修改推荐状态?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams(); //URLSearchParamsid
params.append("ids", ids);
params.append("finalRecommendStatus", status);
updateRecommendStatus(params).then(response => { //// updateRecommendStatus
this.getList();
}
},
handleSelectSubject(){
this.selectDialogVisible=true;
this.dialogData.listQuery.keyword=null;
this.getDialogList();
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
type: 'success',
message: '修改成功!' //
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectSubjects = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectSubjects.push({
subjectId:this.dialogData.multipleSelection[i].id,
subjectName:this.dialogData.multipleSelection[i].title
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createHomeSubject(selectSubjects).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!' //
});
this.getList();
});
},
//
deleteSubject(ids) {
this.$confirm('是否要删除该推荐?', '提示', { //
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams(); //URLSearchParamsid
params.append("ids", ids);
deleteHomeSubject(params).then(response => { //// deleteHomeSubject
this.getList();
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
},
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateHomeSubjectSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '删除成功!' //
message: '已取消操作!'
});
this.getList();
});
})
},
//
getDialogList() {
fetchSubjectList(this.dialogData.listQuery).then(response => { //fetchSubjectList
this.dialogData.list = response.data.list; //
this.dialogData.total = response.data.total;
})
},
deleteSubject(ids){
this.$confirm('是否要删除该推荐?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHomeSubject(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getDialogList(){
fetchSubjectList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
}
</script>
<style></style>

@ -1,14 +1,14 @@
<template>
<!-- 整体的应用容器 div用于包裹整个页面的各个功能模块 -->
<!-- 整体的应用容器 div -->
<div class="app-container">
<!-- 筛选搜索区域的卡片容器设置了阴影效果为无使其外观更简洁 -->
<!-- 筛选搜索区域的卡片容器设置了阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标使用了element-ui提供的搜索图标样式类 -->
<!-- 搜索图标 -->
<i class="el-icon-search"></i>
<!-- 筛选搜索的文字提示向用户说明此区域功能 -->
<!-- 筛选搜索的文字提示 -->
<span>筛选搜索</span>
<!-- 查询搜索按钮设置了样式为右浮动按钮类型为主要primary点击时调用 handleSearchList 方法来执行搜索操作按钮大小为 small -->
<!-- 查询搜索按钮设置了样式为右浮动按钮类型为主要primary点击时调用 handleSearchList 方法按钮大小为 small -->
<el-button
style="float:right"
type="primary"
@ -16,7 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮设置了样式为右浮动且距离右侧 15px点击时调用 handleResetSearch 方法来重置筛选搜索条件按钮大小为 small -->
<!-- 重置按钮设置了样式为右浮动且距离右侧 15px点击时调用 handleResetSearch 方法按钮大小为 small -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,11 +25,11 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 内联表单绑定了 listQuery 数据对象表单大小为 small标签宽度为 140px用于收集用户输入的筛选搜索条件 -->
<!-- 内联表单绑定了 listQuery 数据对象表单大小为 small标签宽度为 140px -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单项目标签为输入搜索明确此输入框的用途 -->
<!-- 表单项目标签为输入搜索 -->
<el-form-item label="输入搜索:">
<!-- 输入框双向绑定 listQuery.keyword设置了类名占位符提示用户可输入帐号/姓名以及可清空功能方便用户操作 -->
<!-- 输入框双向绑定 listQuery.keyword设置了类名占位符以及可清空功能 -->
<el-input v-model="listQuery.keyword" class="input-width" placeholder="帐号/姓名" clearable></el-input>
</el-form-item>
</el-form>
@ -37,21 +37,21 @@
</el-card>
<!-- 操作区域的卡片容器设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 图标可能用于装饰或提示此区域与数据操作相关 -->
<!-- 图标 -->
<i class="el-icon-tickets"></i>
<!-- 数据列表的文字提示告知用户下方展示的数据相关内容 -->
<!-- 数据列表的文字提示 -->
<span>数据列表</span>
<!-- 添加按钮大小为 mini设置了类名点击时调用 handleAdd 方法用于打开添加用户的对话框设置了左侧外边距为 20px使其在页面上布局更合理 -->
<!-- 添加按钮大小为 mini设置了类名点击时调用 handleAdd 方法设置了左侧外边距为 20px -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
</el-card>
<!-- 表格容器 div用于包裹展示数据的表格 -->
<!-- 表格容器 div -->
<div class="table-container">
<!-- el-table 组件绑定了 list 数据用于展示表格内容设置了加载状态绑定通过 v-loading="listLoading" 控制加载动画显示宽度占满父容器边框等属性使表格展示更规范美观 -->
<!-- el-table 组件绑定了 list 数据用于展示表格内容设置了加载状态绑定宽度边框等属性 -->
<el-table ref="adminTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列标签为编号设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 id 属性将数据准确展示在表格相应单元格中 -->
<!-- 表格列标签为编号设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 id 属性 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
@ -67,7 +67,7 @@
<el-table-column label="邮箱" align="center">
<template slot-scope="scope">{{scope.row.email}}</template>
</el-table-column>
<!-- 表格列标签为添加时间设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 createTime 属性并使用了 formatDateTime 过滤器进行格式化使时间展示格式更友好 -->
<!-- 表格列标签为添加时间设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 createTime 属性并使用了 formatDateTime 过滤器进行格式化 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
@ -75,7 +75,7 @@
<el-table-column label="最后登录" width="160" align="center">
<template slot-scope="scope">{{scope.row.loginTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列标签为是否启用设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 status 属性并使用 el-switch 组件进行切换操作绑定了相关的事件和值方便用户在表格中直接操作启用/禁用状态 -->
<!-- 表格列标签为是否启用设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 status 属性并使用 el-switch 组件进行切换操作绑定了相关的事件和值 -->
<el-table-column label="是否启用" width="140" align="center">
<template slot-scope="scope">
<el-switch
@ -86,7 +86,7 @@
</el-switch>
</template>
</el-table-column>
<!-- 表格列标签为操作设置了宽度和内容居中对齐通过插槽作用域展示操作按钮包括分配角色编辑删除按钮分别绑定了对应的点击事件方法方便对每行数据进行相应操作 -->
<!-- 表格列标签为操作设置了宽度和内容居中对齐通过插槽作用域展示操作按钮包括分配角色编辑删除按钮分别绑定了对应的点击事件方法 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -106,9 +106,9 @@
</el-table-column>
</el-table>
</div>
<!-- 分页容器 div用于放置分页组件 -->
<!-- 分页容器 div -->
<div class="pagination-container">
<!-- el-pagination 分页组件设置了背景色相关页面切换事件绑定如每页数量改变当前页改变的事件处理布局样式当前页每页数量可选每页数量数组以及总记录数等属性实现数据分页展示功能 -->
<!-- el-pagination 分页组件设置了背景色相关页面切换事件绑定布局样式当前页每页数量可选每页数量数组以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -120,39 +120,39 @@
:total="total">
</el-pagination>
</div>
<!-- 编辑/添加用户的对话框组件根据 isEdit 变量来动态设置标题绑定了显示状态设置了宽度用于弹出窗口进行用户的添加或编辑操作 -->
<!-- 编辑/添加用户的对话框组件根据 isEdit 变量来动态设置标题绑定了显示状态设置了宽度 -->
<el-dialog
:title="isEdit?'编辑用户':'添加用户'"
:visible.sync="dialogVisible"
width="40%">
<!-- 对话框内的表单绑定了 admin 数据对象设置了表单引用标签宽度和大小用于收集用户输入的添加/编辑用户相关信息 -->
<!-- 对话框内的表单绑定了 admin 数据对象设置了表单引用标签宽度和大小 -->
<el-form :model="admin"
ref="adminForm"
label-width="150px" size="small">
<!-- 表单项目标签为帐号输入框双向绑定 admin.username方便获取用户输入的帐号信息 -->
<!-- 表单项目标签为帐号输入框双向绑定 admin.username -->
<el-form-item label="帐号:">
<el-input v-model="admin.username" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为姓名输入框双向绑定 admin.nickName用于获取用户输入的姓名信息 -->
<!-- 表单项目标签为姓名输入框双向绑定 admin.nickName -->
<el-form-item label="姓名:">
<el-input v-model="admin.nickName" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为邮箱输入框双向绑定 admin.email用于获取用户输入的邮箱信息 -->
<!-- 表单项目标签为邮箱输入框双向绑定 admin.email -->
<el-form-item label="邮箱:">
<el-input v-model="admin.email" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为密码输入框双向绑定 admin.password设置了密码类型用于获取用户输入的密码信息且保证安全性 -->
<!-- 表单项目标签为密码输入框双向绑定 admin.password设置了密码类型 -->
<el-form-item label="密码:">
<el-input v-model="admin.password" type="password" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为备注输入框双向绑定 admin.note设置了文本域类型和行数方便用户输入多行的备注信息 -->
<!-- 表单项目标签为备注输入框双向绑定 admin.note设置了文本域类型和行数 -->
<el-form-item label="备注:">
<el-input v-model="admin.note"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为是否启用使用单选按钮组绑定 admin.status方便用户选择用户是否启用状态 -->
<!-- 表单项目标签为是否启用使用单选按钮组绑定 admin.status -->
<el-form-item label="是否启用:">
<el-radio-group v-model="admin.status">
<el-radio :label="1"></el-radio>
@ -160,18 +160,18 @@
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部的按钮区域通过插槽定义了取消和确定按钮分别绑定了对应的点击事件用于用户确认或取消添加/编辑操作 -->
<!-- 对话框底部的按钮区域通过插槽定义了取消和确定按钮分别绑定了对应的点击事件 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small"> </el-button>
</span>
</el-dialog>
<!-- 分配角色的对话框组件设置了标题绑定了显示状态和宽度用于弹出窗口进行角色分配操作 -->
<!-- 分配角色的对话框组件设置了标题绑定了显示状态和宽度 -->
<el-dialog
title="分配角色"
:visible.sync="allocDialogVisible"
width="30%">
<!-- 多选的下拉选择框绑定了 allocRoleIds 数据设置了占位符大小和宽度通过循环渲染选项方便用户选择多个要分配的角色 -->
<!-- 多选的下拉选择框绑定了 allocRoleIds 数据设置了占位符大小和宽度通过循环渲染选项 -->
<el-select v-model="allocRoleIds" multiple placeholder="请选择" size="small" style="width: 80%">
<el-option
v-for="item in allRoleList"
@ -180,7 +180,7 @@
:value="item.id">
</el-option>
</el-select>
<!-- 对话框底部的按钮区域通过插槽定义了取消和确定按钮分别绑定了对应的点击事件用于用户确认或取消角色分配操作 -->
<!-- 对话框底部的按钮区域通过插槽定义了取消和确定按钮分别绑定了对应的点击事件 -->
<span slot="footer" class="dialog-footer">
<el-button @click="allocDialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleAllocDialogConfirm()" size="small"> </el-button>
@ -188,21 +188,21 @@
</el-dialog>
</div>
</template>
<<script>
// @/api/login API
<script>
// @/api/login API
import {fetchList,createAdmin,updateAdmin,updateStatus,deleteAdmin,getRoleByAdmin,allocRole} from '@/api/login';
// @/api/role API
// @/api/role API
import {fetchAllRoleList} from '@/api/role';
// @/utils/date
// @/utils/date
import {formatDate} from '@/utils/date';
//
//
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
keyword: null
};
// id
// id
const defaultAdmin = {
id: null,
username: null,
@ -217,112 +217,82 @@ export default {
name: 'adminList',
data() {
return {
// defaultListQuery
// defaultListQuery
listQuery: Object.assign({}, defaultListQuery),
//
//
list: null,
//
//
total: null,
// true false
//
listLoading: false,
// /true false
// /
dialogVisible: false,
// defaultAdmin 使
// defaultAdmin
admin: Object.assign({}, defaultAdmin),
// true false
//
isEdit: false,
//
//
allocDialogVisible: false,
// ID ID便
allocRoleIds: [],
//
allRoleList: [],
// ID ID使
allocAdminId: null
// ID ID
allocRoleIds:[],
//
allRoleList:[],
// ID
allocAdminId:null
}
},
created() {
//
//
this.getList();
this.getAllRoleList();
},
filters: {
formatDateTime(time) {
// null 'N/A'
// null 'N/A'
if (time == null || time === '') {
return 'N/A';
}
// Date 便
// Date
let date = new Date(time);
// 使 formatDate 使'yyyy-MM-dd hh:mm:ss'
// 使 formatDate
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
// handleResetSearch
handleResetSearch() {
//
// 使 Object.assign defaultListQuery
// listQuery listQuery
// 便
//
this.listQuery = Object.assign({}, defaultListQuery);
},
// handleSearchList
handleSearchList() {
//
// pageNum 1
//
// getList
// 1
// 1
this.listQuery.pageNum = 1;
this.getList();
},
// handleSizeChange
handleSizeChange(val) {
// val
//
// pageNum 1
// pageSizeval
// getList
//
// 1
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// handleCurrentChange
handleCurrentChange(val) {
// val
// pageNumval
// getList
// 使
//
this.listQuery.pageNum = val;
this.getList();
},
// handleAdd
handleAdd() {
//
// /dialogVisible true使
// isEdit false
// admin Object.assign defaultAdmin admin
// 便
// /
this.dialogVisible = true;
this.isEdit = false;
this.admin = Object.assign({}, defaultAdmin);
this.admin = Object.assign({},defaultAdmin);
},
// handleStatusChange
handleStatusChange(index, row) {
// row
// ?
// warning
//
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//
// updateStatus API
// IDrow.id{status: row.status}
// $message !
// API ID
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
@ -330,9 +300,7 @@ export default {
});
});
}).catch(() => {
//
// $message
// getList
//
this.$message({
type: 'info',
message: '取消修改'
@ -340,20 +308,14 @@ export default {
this.getList();
});
},
// handleDelete
handleDelete(index, row) {
//
// ?
// warning
//
this.$confirm('是否要删除该用户?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//
// deleteAdmin API IDrow.id
// $message !
// getList 使
// API ID
deleteAdmin(row.id).then(response => {
this.$message({
type: 'success',
@ -363,79 +325,60 @@ export default {
});
});
},
// handleUpdate
handleUpdate(index, row) {
//
// /dialogVisible true使
// isEdit true
// admin Object.assign row admin
// 便
// /
this.dialogVisible = true;
this.isEdit = true;
this.admin = Object.assign({}, row);
this.admin = Object.assign({},row);
},
// handleDialogConfirm
handleDialogConfirm() {
// /
// ?
// warning
//
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// isEdit
//
if (this.isEdit) {
//
// updateAdmin API
// IDthis.admin.idthis.admin
// $message
// /dialogVisible false
// getList 使
updateAdmin(this.admin.id, this.admin).then(response => {
// API ID
// /
updateAdmin(this.admin.id,this.admin).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
});
this.dialogVisible = false;
this.dialogVisible =false;
this.getList();
})
} else {
//
// createAdmin API this.admin
// $message
// /dialogVisible false
// getList 使
// API
// /
createAdmin(this.admin).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible = false;
this.dialogVisible =false;
this.getList();
})
}
})
},
// handleAllocDialogConfirm
handleAllocDialogConfirm() {
//
// ?
// warning
handleAllocDialogConfirm(){
//
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// URLSearchParams URL
// URLSearchParams
let params = new URLSearchParams();
// ID append adminId this.allocAdminId ID
// ID
params.append("adminId", this.allocAdminId);
// ID roleIds this.allocRoleIds ID
// ID
params.append("roleIds", this.allocRoleIds);
// allocRole API params
// $message
// allocDialogVisible false
// API
//
allocRole(params).then(response => {
this.$message({
message: '分配成功!',
@ -445,59 +388,45 @@ export default {
})
})
},
// handleSelectRole
handleSelectRole(index, row) {
//
// ID row IDrow.id this.allocAdminId
// 便
handleSelectRole(index,row){
// ID
this.allocAdminId = row.id;
// allocDialogVisible true使
// 便
//
this.allocDialogVisible = true;
// getRoleListByAdmin IDrow.id
// 便
// ID
this.getRoleListByAdmin(row.id);
},
// getList
getList() {
//
// listLoading true
// fetchList API this.listQuery
// then
// listLoading false
// response.data.list list
// response.data.total total
//
this.listLoading = true;
// API
fetchList(this.listQuery).then(response => {
//
this.listLoading = false;
// list
this.list = response.data.list;
// total
this.total = response.data.total;
});
},
// getAllRoleList
getAllRoleList() {
//
// fetchAllRoleList API
// response.data allRoleList
// 使
// API
fetchAllRoleList().then(response => {
// allRoleList 使
this.allRoleList = response.data;
});
},
// getRoleListByAdmin
getRoleListByAdmin(adminId) {
//
// getRoleByAdmin API IDadminId
// response.data allocRoleList
// ID this.allocRoleIds
// allocRoleList null 0
// allocRoleList IDallocRoleList[i].id ID this.allocRoleIds
// 便使 ID
// API ID
getRoleByAdmin(adminId).then(response => {
//
let allocRoleList = response.data;
this.allocRoleIds = [];
if (allocRoleList != null && allocRoleList.length > 0) {
for (let i = 0; i < allocRoleList.length; i++) {
// ID
this.allocRoleIds=[];
//
if(allocRoleList!=null&&allocRoleList.length>0){
// ID ID
for(let i=0;i<allocRoleList.length;i++){
this.allocRoleIds.push(allocRoleList[i].id);
}
}
@ -506,7 +435,4 @@ export default {
}
}
</script>
<style>
/*
scoped 属性表示样式仅作用于当前组件内的元素避免样式冲突 */
</style>
<style></style>

@ -1,24 +1,14 @@
<template>
<!-- 使用 MenuDetail 组件通过绑定 :is-edit 属性为 false传递给 MenuDetail 组件当前处于添加非编辑状态的信息
这里 MenuDetail 组件应该是用于展示菜单详情相关表单等功能的自定义组件 -->
<template> 
<menu-detail :is-edit='false'></menu-detail>
</template>
<script>
// MenuDetail ./components/MenuDetail MenuDetail components
import MenuDetail from './components/MenuDetail';
export default {
name: 'addMenu',
// components aaa MenuDetail 使使
// Vue.js
components: { MenuDetail }
}
import MenuDetail from './components/MenuDetail'
export default {
name: 'addMenu',
components: { MenuDetail }
}
</script>
<style>
/* 当前样式部分为空,可在此处添加针对 addMenu 组件的样式规则,比如设置组件整体的布局、颜色、字体等样式相关属性 */
/* CSS resourceList
- 设置表格的样式如表头单元格的字体颜色边框样式等
- 对筛选区域操作按钮分页组件等元素的布局外观进行调整比如按钮的颜色大小间距等
- 定制对话框的样式像对话框的背景色边框按钮在对话框内的排版等
通过添加这些样式规则可以让页面的显示更加符合设计要求和美观性 */
</style>

@ -183,9 +183,4 @@ export default {
</script>
<style scoped>
/* scoped 属性表示样式仅作用于当前组件内的元素,避免样式冲突 */
/* CSS resourceList
- 设置表格的样式如表头单元格的字体颜色边框样式等
- 对筛选区域操作按钮分页组件等元素的布局外观进行调整比如按钮的颜色大小间距等
- 定制对话框的样式像对话框的背景色边框按钮在对话框内的排版等
通过添加这些样式规则可以让页面的显示更加符合设计要求和美观性 */
</style>

@ -1,13 +1,8 @@
<template>
<!-- 整体的应用容器 div作为整个页面功能模块的外层包裹元素用于限定页面内容的布局范围 -->
<div class="app-container">
<!-- 操作区域的卡片容器设置了阴影效果为无使其在页面上呈现出简洁扁平的视觉效果常用于放置一些操作按钮或相关提示信息 -->
<el-card class="operate-container" shadow="never">
<!-- el-icon-tickets 图标设置了顶部外边距为 5px通过添加一定的外边距来调整图标在容器内的垂直位置使其布局更加合理美观 -->
<i class="el-icon-tickets" style="margin-top: 5px"></i>
<!-- 数据列表文字提示设置了顶部外边距为 5px同样是为了在垂直方向上与图标及其他元素保持合适的间距清晰地向用户表明下方表格展示的是相关数据列表内容 -->
<span style="margin-top: 5px">数据列表</span>
<!-- 添加按钮设置了类名可能用于后续的样式定制或通过类名来进行特定的 JavaScript 操作识别点击时调用 handleAddMenu 方法该方法应定义在对应的 JavaScript 部分用于触发添加菜单相关的业务逻辑按钮大小为 mini通常这种较小尺寸的按钮在页面布局上更加紧凑适用于操作较为频繁但空间有限的区域 -->
<el-button
class="btn-add"
@click="handleAddMenu()"
@ -15,39 +10,26 @@
添加
</el-button>
</el-card>
<!-- 表格容器 div专门用于包裹展示数据的表格元素将表格与其他页面元素在布局上进行区分方便进行样式控制和整体页面结构的组织 -->
<div class="table-container">
<!-- el-table 组件用于展示数据表格这是一个基于 Element UI 等类似 UI 框架提供的表格组件用于以表格形式呈现数据
设置了引用名ref="menuTable"方便在 JavaScript 代码中通过 this.$refs.menuTable 来获取对该表格实例的引用进行一些额外的操作比如操作表格的滚动获取选中行等宽度style="width: 100%"使其能够自适应父容器的宽度占满所在的空间绑定的数据列表:data="list"意味着表格展示的数据来源于组件实例中的 list 属性 list 属性值变化时表格内容会相应更新加载状态绑定v-loading="listLoading"通过控制 listLoading 的值来决定是否显示加载动画比如在数据加载过程中显示加载提示加载完成后隐藏以及边框border用于显示表格的边框线使表格结构更清晰等属性 -->
<el-table ref="menuTable"
style="width: 100%"
:data="list"
v-loading="listLoading" border>
<!-- 表格列标签为编号设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 id 属性
这里定义了表格中的一列标签label用于在表头显示该列的名称宽度width="100"指定了该列在表格中的宽度居中对齐align="center"使列内的数据在水平方向上居中展示插槽作用域slot-scope="scope"则是一种机制允许在表格单元格中访问该行的数据对象scope.row此处通过双花括号插值表达式{{scope.row.id}}将对应行数据中的 id 属性值展示在该单元格内 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列标签为菜单名称内容居中对齐通过插槽作用域展示对应行数据的 title 属性功能与上述编号列类似只是展示的是对应行数据中的 title 属性值用于在表格中呈现菜单的名称信息 -->
<el-table-column label="菜单名称" align="center">
<template slot-scope="scope">{{scope.row.title}}</template>
</el-table-column>
<!-- 表格列标签为菜单级数设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 level 属性并使用 levelFilter 过滤器对数据进行格式化转换
除了基本的列定义属性外此处使用了一个过滤器levelFilter它会对要展示的 level 属性值进行处理按照一定的规则转换格式后再显示在表格单元格中例如可能将数字形式的级数转换为更友好的文字描述形式方便用户直观理解菜单的层级关系 -->
<el-table-column label="菜单级数" width="100" align="center">
<template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
</el-table-column>
<!-- 表格列标签为前端名称内容居中对齐通过插槽作用域展示对应行数据的 name 属性用于展示与菜单相关的前端显示名称等信息 -->
<el-table-column label="前端名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列标签为前端图标设置了宽度和内容居中对齐通过插槽作用域使用 svg-icon 组件展示对应行数据的 icon 属性对应的图标
此列用于在表格中展示菜单对应的前端图标借助 svg-icon 组件可能是自定义或基于 UI 框架扩展的组件根据每行数据中的 icon 属性来渲染相应的图标增强表格数据的可视化效果 -->
<el-table-column label="前端图标" width="100" align="center">
<template slot-scope="scope"><svg-icon :icon-class="scope.row.icon"></svg-icon></template>
</el-table-column>
<!-- 表格列标签为是否显示设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 hidden 属性并使用 el-switch 组件进行切换操作绑定了相关的事件和值
该列用于展示和控制菜单是否显示的状态通过 el-switch 组件实现了一个开关功能用户可以直接在表格中切换菜单的显示隐藏状态同时绑定了相关的事件@change="handleHiddenChange(scope.$index, scope.row)"当开关状态改变时会触发对应的 JavaScript 方法handleHiddenChange来处理状态更新等业务逻辑通过设置 active-value inactive-value 来确定开关打开和关闭时对应的数据值 -->
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-switch
@ -58,12 +40,9 @@
</el-switch>
</template>
</el-table-column>
<!-- 表格列标签为排序设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 sort 属性用于展示菜单在排序方面的相关属性值方便用户查看和了解菜单的排列顺序信息 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort }}</template>
</el-table-column>
<!-- 表格列标签为设置设置了宽度和内容居中对齐通过插槽作用域展示查看下级按钮按钮根据条件判断是否禁用通过 disableNextLevel 过滤器点击时调用 handleShowNextLevel 方法
此列添加了一个操作按钮查看下级按钮的禁用状态由 disableNextLevel 过滤器根据对应行数据的某些条件此处可能是菜单级数等情况来动态决定点击按钮时会触发 handleShowNextLevel 方法用于跳转到查看当前菜单下级菜单的相关页面或执行相应的业务逻辑 -->
<el-table-column label="设置" width="120" align="center">
<template slot-scope="scope">
<el-button
@ -74,8 +53,6 @@
</el-button>
</template>
</el-table-column>
<!-- 表格列标签为操作设置了宽度和内容居中对齐通过插槽作用域展示编辑和删除按钮分别点击时调用 handleUpdate handleDelete 方法
这是一个常见的操作列用于对每行数据进行编辑和删除操作通过定义两个按钮并分别绑定对应的 JavaScript 方法handleUpdate handleDelete当用户点击相应按钮时会触发对应的业务逻辑比如跳转到编辑页面或者弹出确认框进行删除操作等 -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
@ -92,10 +69,7 @@
</el-table-column>
</el-table>
</div>
<!-- 分页容器 div用于放置分页组件将分页功能相关的元素集中在一个区域便于在页面上进行布局和样式控制同时与表格等其他展示内容区分开来 -->
<div class="pagination-container">
<!-- el-pagination 分页组件设置了背景色相关页面切换事件绑定布局样式每页数量可选每页数量数组当前页以及总记录数等属性
这是一个常用的分页组件通过设置背景色background可以使其在页面上有更明显的视觉区分绑定页面切换事件如每页数量改变的 @size-change 和当前页改变的 @current-change 事件分别对应相应的 JavaScript 方法来重新加载数据指定布局样式layout来确定分页组件中各个元素的排列方式设置每页数量:page-size可选每页数量数组:page-sizes当前页:current-page.sync以及总记录数:total等属性来实现完整的分页功能根据总记录数和每页数量计算总页数并提供用户切换页面选择每页显示数量等操作功能 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -109,189 +83,114 @@
</div>
</div>
</template>
<script>
// @/api/menu API API
import {fetchList,deleteMenu,updateMenu,updateHidden} from '@/api/menu';
export default {
name: "menuList",
data() {
return {
//
list: null,
//
total: null,
// true true false
listLoading: true,
//
listQuery: {
pageNum: 1,
pageSize: 5
},
// ID 0 ID
parentId: 0
}
},
created() {
// ID ID created
this.resetParentId();
this.getList();
},
watch: {
$route(route) {
// ID URL watch
this.resetParentId();
this.getList();
}
},
methods: {
resetParentId() {
// 1 ID
// parentId ID ID
this.listQuery.pageNum = 1;
if (this.$route.query.parentId != null) {
// ID parentId ID
this.parentId = this.$route.query.parentId;
} else {
// ID 0
this.parentId = 0;
<script>
import {fetchList,deleteMenu,updateMenu,updateHidden} from '@/api/menu'
export default {
name: "menuList",
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
pageNum: 1,
pageSize: 5
},
parentId: 0
}
},
handleAddMenu() {
// /ums/addMenu 使 Vue Router Vue.js $router.push 便
this.$router.push('/ums/addMenu');
},
getList() {
//
this.listLoading = true;
// API ID ID Promise then
fetchList(this.parentId, this.listQuery).then(response => {
//
this.listLoading = false;
// list :data="list"
this.list = response.data.list;
// total
this.total = response.data.total;
});
},
// handleSizeChange
handleSizeChange(val) {
//
//
//
// listQuerypageNum 1
//
//
this.listQuery.pageNum = 1;
// listQuerypageSizeval
// val
// getList
// 1
//
created() {
this.resetParentId();
this.getList();
},
// handleCurrentChange
handleCurrentChange(val) {
//
// val
// listQuerypageNumval
// 便
// getList
// 使
this.listQuery.pageNum = val;
this.getList();
watch: {
$route(route) {
this.resetParentId();
this.getList();
}
},
// handleHiddenChange
handleHiddenChange(index, row) {
//
// el-switch
// index
// row
// updateHidden API
// ID row.id {hidden: row.hidden} hidden
// this.$message
// success绿
// 1000 1 使
updateHidden(row.id, {hidden: row.hidden}).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
methods: {
resetParentId(){
this.listQuery.pageNum = 1;
if (this.$route.query.parentId != null) {
this.parentId = this.$route.query.parentId;
} else {
this.parentId = 0;
}
},
handleAddMenu() {
this.$router.push('/ums/addMenu');
},
getList() {
this.listLoading = true;
fetchList(this.parentId, this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
});
},
// handleShowNextLevel
handleShowNextLevel(index, row) {
//
//
// 使 this.$router.push Vue Router
// /ums/menu ID parentId query
// /ums/menu
// 便
this.$router.push({path: '/ums/menu', query: {parentId: row.id}});
},
// handleUpdate
handleUpdate(index, row) {
//
//
// this.$router.push /ums/updateMenu ID id query
// /ums/updateMenu
// 便便
this.$router.push({path: '/ums/updateMenu', query: {id: row.id}});
},
// handleDelete
handleDelete(index, row) {
//
//
//
//
// warning
// then
// deleteMenu API ID row.id
// this.$message
// success 1000 1 便
// getList 使
this.$confirm('是否要删除该菜单', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteMenu(row.id).then(response => {
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleHiddenChange(index, row) {
updateHidden(row.id,{hidden:row.hidden}).then(response=>{
this.$message({
message: '删除成功',
message: '修改成功',
type: 'success',
duration: 1000
});
this.getList();
});
});
},
handleShowNextLevel(index, row) {
this.$router.push({path: '/ums/menu', query: {parentId: row.id}})
},
handleUpdate(index, row) {
this.$router.push({path:'/ums/updateMenu',query:{id:row.id}});
},
handleDelete(index, row) {
this.$confirm('是否要删除该菜单', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteMenu(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>
/*
scoped 属性表示样式仅作用于当前组件内的元素避免样式冲突 */
/* CSS resourceList
- 设置表格的样式如表头单元格的字体颜色边框样式等
- 对筛选区域操作按钮分页组件等元素的布局外观进行调整比如按钮的颜色大小间距等
- 定制对话框的样式像对话框的背景色边框按钮在对话框内的排版等
通过添加这些样式规则可以让页面的显示更加符合设计要求和美观性 */
</style>

@ -1,28 +1,14 @@
<template>
<!-- 使用 MenuDetail 组件并通过绑定 :is-edit 属性为 true MenuDetail 组件传递当前处于编辑状态的信息
MenuDetail 组件大概率是一个自定义组件用于展示和处理菜单详情相关的表单等内容在这里用于编辑菜单的场景 -->
<template> 
<menu-detail :is-edit='true'></menu-detail>
</template>
<script>
// ./components/ MenuDetail MenuDetail components
// 使
import MenuDetail from './components/MenuDetail';
export default {
name: 'updateMenu',
// components MenuDetail 使template使
// Vue.js MenuDetail
components: { MenuDetail }
}
import MenuDetail from './components/MenuDetail'
export default {
name: 'updateMenu',
components: { MenuDetail }
}
</script>
<style>
/* CSS updateMenu
来对组件的外观进行定制化显示 */
/* CSS resourceList
- 设置表格的样式如表头单元格的字体颜色边框样式等
- 对筛选区域操作按钮分页组件等元素的布局外观进行调整比如按钮的颜色大小间距等
- 定制对话框的样式像对话框的背景色边框按钮在对话框内的排版等
通过添加这些样式规则可以让页面的显示更加符合设计要求和美观性 */
</style>

@ -1,39 +1,27 @@
<template>
<!-- 整体的应用容器 div -->
<template> 
<div class="app-container">
<!-- 操作区域的卡片容器设置了阴影效果为无 -->
<el-card shadow="never" class="operate-container">
<!-- 图标元素使用了 el-icon-tickets 图标 -->
<i class="el-icon-tickets"></i>
<!-- 文字提示显示数据列表字样 -->
<span>数据列表</span>
<!-- 添加按钮设置了按钮大小为 mini添加了自定义类名 btn-add点击时调用 handleAdd 方法 -->
<el-button size="mini" class="btn-add" @click="handleAdd()"></el-button>
</el-card>
<!-- 表格容器 div用于放置展示数据的表格 -->
<div class="table-container">
<!-- el-table 组件用于展示数据列表设置了引用名绑定的数据表格宽度加载状态绑定以及边框等属性 -->
<el-table ref="resourceCategoryTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列标签为编号设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 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>
<!-- 表格列标签为创建时间内容居中对齐通过插槽作用域展示对应行数据的 createTime 属性并使用 formatDateTime 过滤器对时间进行格式化展示 -->
<el-table-column label="创建时间" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列标签为排序内容居中对齐通过插槽作用域展示对应行数据的 sort 属性 -->
<el-table-column label="排序" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 表格列标签为操作设置了宽度和内容居中对齐通过插槽作用域展示编辑和删除按钮分别点击时调用 handleUpdate handleDelete 方法 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -48,25 +36,20 @@
</el-table-column>
</el-table>
</div>
<!-- el-dialog 对话框组件设置了标题为添加分类绑定了显示状态设置了宽度 -->
<el-dialog
title="添加分类"
:visible.sync="dialogVisible"
width="40%">
<!-- 对话框内的表单绑定了 resourceCategory 数据对象设置了表单引用标签宽度和大小 -->
<el-form :model="resourceCategory"
ref="resourceCategoryForm"
label-width="150px" size="small">
<!-- 表单项目标签为名称输入框双向绑定 resourceCategory.name并设置了宽度 -->
<el-form-item label="名称:">
<el-input v-model="resourceCategory.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为排序输入框双向绑定 resourceCategory.sort并设置了宽度 -->
<el-form-item label="排序:">
<el-input v-model="resourceCategory.sort" style="width: 250px"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部的按钮区域通过插槽定义了取消和确定按钮分别绑定了对应的点击事件 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small"> </el-button>
@ -75,133 +58,99 @@
</div>
</template>
<script>
// @/api/resourceCategory API
import {listAllCate,createResourceCategory,updateResourceCategory,deleteResourceCategory} from '@/api/resourceCategory';
// @/utils/date
import {formatDate} from '@/utils/date';
// null 0
const defaultResourceCategory={
name:null,
sort:0
};
export default {
name: 'resourceCategoryList',
data() {
return {
// null API
list: null,
// false
listLoading: false,
// / false
dialogVisible:false,
// false
isEdit:false,
// defaultResourceCategory
resourceCategory:Object.assign({},defaultResourceCategory)
}
},
created() {
//
this.getList();
},
filters: {
formatDateTime(time) {
// 'N/A'
if (time == null || time === '') {
return 'N/A';
import {listAllCate,createResourceCategory,updateResourceCategory,deleteResourceCategory} from '@/api/resourceCategory';
import {formatDate} from '@/utils/date';
const defaultResourceCategory={
name:null,
sort:0
};
export default {
name: 'resourceCategoryList',
data() {
return {
list: null,
listLoading: false,
dialogVisible:false,
isEdit:false,
resourceCategory:Object.assign({},defaultResourceCategory)
}
// Date 便
let date = new Date(time);
// 使 formatDate
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
handleAdd() {
// /isEdit false resourceCategory
this.dialogVisible = true;
this.isEdit = false;
this.resourceCategory = Object.assign({},defaultResourceCategory);
},
handleUpdate(index,row){
// /isEdit true resourceCategory
this.dialogVisible = true;
this.isEdit = true;
this.resourceCategory = Object.assign({},row);
created() {
this.getList();
},
handleDelete(index,row){
//
this.$confirm('是否要删除该分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// API id
//
deleteResourceCategory(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
filters:{
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
handleDialogConfirm() {
// /
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// isEdit true
if (this.isEdit) {
// API id resourceCategory
//
updateResourceCategory(this.resourceCategory.id,this.resourceCategory).then(response => {
methods: {
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.resourceCategory = Object.assign({},defaultResourceCategory);
},
handleUpdate(index,row){
this.dialogVisible = true;
this.isEdit = true;
this.resourceCategory = Object.assign({},row);
},
handleDelete(index,row){
this.$confirm('是否要删除该分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteResourceCategory(row.id).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
type: 'success',
message: '删除成功!'
});
this.dialogVisible =false;
this.getList();
})
} else {
// API resourceCategory
//
createResourceCategory(this.resourceCategory).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
getList() {
//
this.listLoading = true;
// API API
listAllCate({}).then(response => {
//
this.listLoading = false;
// list
this.list = response.data;
});
});
});
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateResourceCategory(this.resourceCategory.id,this.resourceCategory).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createResourceCategory(this.resourceCategory).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
getList() {
this.listLoading = true;
listAllCate({}).then(response => {
this.listLoading = false;
this.list = response.data;
});
}
}
}
}
</script>
<style>
/* CSS resourceCategoryList
例如设置表格样式对话框样式按钮样式以及整体布局相关的样式等来美化组件的外观显示效果 */
/* CSS resourceList
- 设置表格的样式如表头单元格的字体颜色边框样式等
- 对筛选区域操作按钮分页组件等元素的布局外观进行调整比如按钮的颜色大小间距等
- 定制对话框的样式像对话框的背景色边框按钮在对话框内的排版等
通过添加这些样式规则可以让页面的显示更加符合设计要求和美观性 */
</style>

@ -1,14 +1,9 @@
<template>
<!-- 整体的应用容器 div用于包裹页面内的各个功能模块 -->
<template> 
<div class="app-container">
<!-- 筛选搜索区域的卡片容器设置了阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标元素使用了 el-icon-search 图标 -->
<i class="el-icon-search"></i>
<!-- 筛选搜索的文字提示 -->
<span>筛选搜索</span>
<!-- 查询搜索按钮设置了样式为右浮动按钮类型为主要primary点击时调用 handleSearchList 方法按钮大小为 small -->
<el-button
style="float:right"
type="primary"
@ -16,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮设置了样式为右浮动且距离右侧 15px点击时调用 handleResetSearch 方法按钮大小为 small -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,17 +19,13 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 内联表单绑定了 listQuery 数据对象表单大小为 small标签宽度为 140px用于设置筛选条件 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单项目标签为资源名称内部的输入框双向绑定 listQuery.nameKeyword设置了类名占位符以及可清空功能 -->
<el-form-item label="资源名称:">
<el-input v-model="listQuery.nameKeyword" class="input-width" placeholder="资源名称" clearable></el-input>
</el-form-item>
<!-- 表单项目标签为资源路径内部的输入框双向绑定 listQuery.urlKeyword设置了类名占位符以及可清空功能 -->
<el-form-item label="资源路径:">
<el-input v-model="listQuery.urlKeyword" class="input-width" placeholder="资源路径" clearable></el-input>
</el-form-item>
<!-- 表单项目标签为资源分类内部是一个下拉选择框双向绑定 listQuery.categoryId设置了占位符可清空以及类名通过循环渲染选项 -->
<el-form-item label="资源分类:">
<el-select v-model="listQuery.categoryId" placeholder="全部" clearable class="input-width">
<el-option v-for="item in categoryOptions"
@ -48,45 +38,32 @@
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片容器设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 图标元素使用了 el-icon-tickets 图标 -->
<i class="el-icon-tickets"></i>
<!-- 数据列表的文字提示 -->
<span>数据列表</span>
<!-- 添加按钮大小为 mini添加了自定义类名 btn-add点击时调用 handleAdd 方法设置了左侧外边距为 20px -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
<!-- 资源分类按钮大小为 mini添加了自定义类名 btn-add点击时调用 handleShowCategory 方法用于跳转到资源分类页面 -->
<el-button size="mini" class="btn-add" @click="handleShowCategory()"></el-button>
</el-card>
<!-- 表格容器 div用于放置展示资源数据的表格 -->
<div class="table-container">
<!-- el-table 组件用于展示资源数据列表设置了引用名绑定的数据表格宽度加载状态绑定以及边框等属性 -->
<el-table ref="resourceTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列标签为编号设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 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>
<!-- 表格列标签为资源路径内容居中对齐通过插槽作用域展示对应行数据的 url 属性 -->
<el-table-column label="资源路径" align="center">
<template slot-scope="scope">{{scope.row.url}}</template>
</el-table-column>
<!-- 表格列标签为描述内容居中对齐通过插槽作用域展示对应行数据的 description 属性 -->
<el-table-column label="描述" align="center">
<template slot-scope="scope">{{scope.row.description}}</template>
</el-table-column>
<!-- 表格列标签为添加时间设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 createTime 属性并使用 formatDateTime 过滤器对时间进行格式化展示 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列标签为操作设置了宽度和内容居中对齐通过插槽作用域展示编辑和删除按钮分别点击时调用 handleUpdate handleDelete 方法 -->
<el-table-column label="操作" width="140" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -102,9 +79,7 @@
</el-table-column>
</el-table>
</div>
<!-- 分页容器 div用于放置分页组件 -->
<div class="pagination-container">
<!-- el-pagination 分页组件设置了背景色相关页面切换事件绑定布局样式当前页每页数量可选每页数量数组以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -116,24 +91,19 @@
:total="total">
</el-pagination>
</div>
<!-- el-dialog 对话框组件根据 isEdit 变量动态设置标题为编辑资源添加资源绑定了显示状态设置了宽度 -->
<el-dialog
:title="isEdit?'编辑资源':'添加资源'"
:visible.sync="dialogVisible"
width="40%">
<!-- 对话框内的表单绑定了 resource 数据对象设置了表单引用标签宽度和大小 -->
<el-form :model="resource"
ref="resourceForm"
label-width="150px" size="small">
<!-- 表单项目标签为资源名称输入框双向绑定 resource.name并设置了宽度 -->
<el-form-item label="资源名称:">
<el-input v-model="resource.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为资源路径输入框双向绑定 resource.url并设置了宽度 -->
<el-form-item label="资源路径:">
<el-input v-model="resource.url" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为资源分类内部是一个下拉选择框双向绑定 resource.categoryId设置了占位符可清空以及宽度通过循环渲染选项 -->
<el-form-item label="资源分类:">
<el-select v-model="resource.categoryId" placeholder="全部" clearable style="width: 250px">
<el-option v-for="item in categoryOptions"
@ -143,7 +113,6 @@
</el-option>
</el-select>
</el-form-item>
<!-- 表单项目标签为描述输入框双向绑定 resource.description设置了文本域类型和行数以及宽度 -->
<el-form-item label="描述:">
<el-input v-model="resource.description"
type="textarea"
@ -151,7 +120,6 @@
style="width: 250px"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部的按钮区域通过插槽定义了取消和确定按钮分别绑定了对应的点击事件 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small"> </el-button>
@ -160,205 +128,146 @@
</div>
</template>
<script>
// @/api/resource API
import {fetchList,createResource,updateResource,deleteResource} from '@/api/resource';
// @/api/resourceCategory API
import {listAllCate} from '@/api/resourceCategory';
// @/utils/date
import {formatDate} from '@/utils/date';
import {fetchList,createResource,updateResource,deleteResource} from '@/api/resource';
import {listAllCate} from '@/api/resourceCategory';
import {formatDate} from '@/utils/date';
// ID
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
nameKeyword: null,
urlKeyword: null,
categoryId:null
};
// id ID
const defaultResource = {
id: null,
name: null,
url: null,
categoryId: null,
description:''
};
export default {
name: 'resourceList',
data() {
return {
// defaultListQuery
listQuery: Object.assign({}, defaultListQuery),
// null API
list: null,
// null
total: null,
// false
listLoading: false,
// / false
dialogVisible: false,
// defaultResource
resource: Object.assign({}, defaultResource),
// false
isEdit: false,
// label value
categoryOptions: [],
// ID null
defaultCategoryId: null
}
},
created() {
//
this.getList();
this.getCateList();
},
filters: {
formatDateTime(time) {
// 'N/A'
if (time == null || time === '') {
return 'N/A';
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
nameKeyword: null,
urlKeyword: null,
categoryId:null
};
const defaultResource = {
id: null,
name: null,
url: null,
categoryId: null,
description:''
};
export default {
name: 'resourceList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: false,
dialogVisible: false,
resource: Object.assign({}, defaultResource),
isEdit: false,
categoryOptions:[],
defaultCategoryId:null
}
// Date 便
let date = new Date(time);
// 使 formatDate
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
handleResetSearch() {
//
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
// 1
this.listQuery.pageNum = 1;
this.getList();
},
handleSizeChange(val) {
// 1
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
//
this.listQuery.pageNum = val;
created() {
this.getList();
this.getCateList();
},
handleAdd() {
// /isEdit false resource ID
this.dialogVisible = true;
this.isEdit = false;
this.resource = Object.assign({}, defaultResource);
this.resource.categoryId = this.defaultCategoryId;
},
handleDelete(index, row) {
//
this.$confirm('是否要删除该资源?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// API id
//
deleteResource(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
handleUpdate(index, row) {
// /isEdit true resource
this.dialogVisible = true;
this.isEdit = true;
this.resource = Object.assign({}, row);
filters: {
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
handleDialogConfirm() {
// /
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// isEdit true
if (this.isEdit) {
// API id resource
//
updateResource(this.resource.id, this.resource).then(response => {
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.resource = Object.assign({},defaultResource);
this.resource.categoryId = this.defaultCategoryId;
},
handleDelete(index, row) {
this.$confirm('是否要删除该资源?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteResource(row.id).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
type: 'success',
message: '删除成功!'
});
this.dialogVisible = false;
this.getList();
})
} else {
// API resource
//
createResource(this.resource).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible = false;
this.getList();
})
}
})
},
//
// '/ums/resourceCategory'
//
handleShowCategory() {
this.$router.push({path: '/ums/resourceCategory'})
},
//
// listLoading true
//
// fetchList API listQuery
// then listLoading false
// response list list
// total total
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
//
// listAllCate API Promise then
getCateList() {
listAllCate().then(response => {
// cateList 便
let cateList = response.data;
//
for (let i = 0; i < cateList.length; i++) {
// cate 便
let cate = cateList[i];
// label ID value categoryOptions
// categoryOptions UI 便
this.categoryOptions.push({label: cate.name, value: cate.id});
}
// ID defaultCategoryId
// ID 使使
this.defaultCategoryId = cateList[0].id;
})
});
});
},
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.resource = Object.assign({},row);
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateResource(this.resource.id,this.resource).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createResource(this.resource).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
handleShowCategory(){
this.$router.push({path: '/ums/resourceCategory'})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
getCateList(){
listAllCate().then(response=>{
let cateList = response.data;
for(let i=0;i<cateList.length;i++){
let cate = cateList[i];
this.categoryOptions.push({label:cate.name,value:cate.id});
}
this.defaultCategoryId=cateList[0].id;
})
}
}
}
}
</script>
<style>
/* CSS resourceList
- 设置表格的样式如表头单元格的字体颜色边框样式等
- 对筛选区域操作按钮分页组件等元素的布局外观进行调整比如按钮的颜色大小间距等
- 定制对话框的样式像对话框的背景色边框按钮在对话框内的排版等
通过添加这些样式规则可以让页面的显示更加符合设计要求和美观性 */
</style>
<style></style>

@ -1,8 +1,5 @@
<template>
<!-- 使用 el-card 组件创建一个表单容器卡片设置阴影效果为无 -->
<el-card class="form-container" shadow="never">
<!-- el-tree 组件用于展示树形结构的数据绑定了 menuTreeList 数据作为树的数据源 -->
<!-- 显示复选框默认展开所有节点设置节点的唯一标识键为 'id'添加了引用名 'tree'高亮当前选中节点并配置了节点属性映射 -->
<el-tree
:data="menuTreeList"
show-checkbox
@ -12,131 +9,93 @@
highlight-current
:props="defaultProps">
</el-tree>
<!-- 包含两个按钮的 div 容器设置了顶部外边距为 20px并使其内容居中对齐 -->
<div style="margin-top: 20px" align="center">
<!-- 保存按钮类型为主要primary点击时调用 handleSave 方法 -->
<el-button type="primary" @click="handleSave()"></el-button>
<!-- 清空按钮点击时调用 handleClear 方法 -->
<el-button @click="handleClear()"></el-button>
</div>
</el-card>
</template>
<script>
// @/api/menu API
import {fetchTreeList} from '@/api/menu';
// @/api/role API
import {listMenuByRole, allocMenu} from '@/api/role';
import {fetchTreeList} from '@/api/menu';
import {listMenuByRole,allocMenu} from '@/api/role';
export default {
name: "allocMenu",
data() {
return {
// API
menuTreeList: [],
// el-tree 'children' 'title'
defaultProps: {
children: 'children',
label: 'title'
},
// ID null
roleId: null
};
},
created() {
// ID roleId
this.roleId = this.$route.query.roleId;
//
this.treeList();
// ID
this.getRoleMenu(this.roleId);
},
methods: {
treeList() {
// API Promise menuTreeList el-tree
fetchTreeList().then(response => {
this.menuTreeList = response.data;
});
export default {
name: "allocMenu",
data() {
return {
menuTreeList: [],
defaultProps: {
children: 'children',
label: 'title'
},
roleId:null
};
},
getRoleMenu(roleId) {
// API ID Promise
listMenuByRole(roleId).then(response => {
// menuList 便
let menuList = response.data;
// ID
let checkedMenuIds = [];
//
if (menuList!= null && menuList.length > 0) {
for (let i = 0; i < menuList.length; i++) {
//
let menu = menuList[i];
// ID 0 ID ID
if (menu.parentId!== 0) {
checkedMenuIds.push(menu.id);
created() {
this.roleId = this.$route.query.roleId;
this.treeList();
this.getRoleMenu(this.roleId);
},
methods: {
treeList() {
fetchTreeList().then(response => {
this.menuTreeList = response.data;
});
},
getRoleMenu(roleId){
listMenuByRole(roleId).then(response=>{
let menuList = response.data;
let checkedMenuIds=[];
if(menuList!=null&&menuList.length>0){
for(let i=0;i<menuList.length;i++){
let menu = menuList[i];
if(menu.parentId!==0){
checkedMenuIds.push(menu.id);
}
}
}
}
// el-tree ref='tree' ID
this.$refs.tree.setCheckedKeys(checkedMenuIds);
});
},
handleSave() {
// el-tree
let checkedNodes = this.$refs.tree.getCheckedNodes();
// 使 Set ID ID
let checkedMenuIds = new Set();
//
if (checkedNodes!= null && checkedNodes.length > 0) {
for (let i = 0; i < checkedNodes.length; i++) {
//
let checkedNode = checkedNodes[i];
// ID Set
checkedMenuIds.add(checkedNode.id);
// ID 0 ID Set
if (checkedNode.parentId!== 0) {
checkedMenuIds.add(checkedNode.parentId);
this.$refs.tree.setCheckedKeys(checkedMenuIds);
});
},
handleSave() {
let checkedNodes = this.$refs.tree.getCheckedNodes();
let checkedMenuIds=new Set();
if(checkedNodes!=null&&checkedNodes.length>0){
for(let i=0;i<checkedNodes.length;i++){
let checkedNode = checkedNodes[i];
checkedMenuIds.add(checkedNode.id);
if(checkedNode.parentId!==0){
checkedMenuIds.add(checkedNode.parentId);
}
}
}
}
//
this.$confirm('是否分配菜单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// URLSearchParams
let params = new URLSearchParams();
// ID
params.append("roleId", this.roleId);
// ID Array.from
params.append("menuIds", Array.from(checkedMenuIds));
// API Promise
allocMenu(params).then(response => {
// success 1000
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
//
this.$router.back();
this.$confirm('是否分配菜单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
let params = new URLSearchParams();
params.append("roleId",this.roleId);
params.append("menuIds",Array.from(checkedMenuIds));
allocMenu(params).then(response => {
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
this.$router.back();
})
})
})
},
handleClear() {
// el-tree ID
this.$refs.tree.setCheckedKeys([]);
},
handleClear() {
this.$refs.tree.setCheckedKeys([]);
}
}
}
}
</script>
<style scoped>
/* CSS allocMenu
例如设置 el-tree 组件的样式像节点的字体颜色间距等以及按钮的样式包括按钮的大小颜色边框等
scoped 属性表示样式仅作用于当前组件内的元素避免样式冲突 */
/* CSS resourceList
- 设置表格的样式如表头单元格的字体颜色边框样式等
- 对筛选区域操作按钮分页组件等元素的布局外观进行调整比如按钮的颜色大小间距等
- 定制对话框的样式像对话框的背景色边框按钮在对话框内的排版等
通过添加这些样式规则可以让页面的显示更加符合设计要求和美观性 */
</style>

@ -1,303 +1,187 @@
<template>
<!-- 使用 el-card 组件创建一个表单容器卡片设置阴影效果为无 -->
<el-card class="form-container" shadow="never">
<!-- 使用 v-for 指令循环遍历 allResourceCate 数组中的每个元素cate同时传递索引index -->
<!-- 根据索引判断是否添加 'top-line' 类名第一个元素添加用于样式区分可能是添加顶部边框之类的效果并设置了唯一的 key -->
<div v-for="(cate,index) in allResourceCate" :class="index===0?'top-line':null" :key="'cate'+cate.id">
<!-- el-row 组件添加了 'table-layout' 类名用于样式布局设置了背景颜色 -->
<el-row class="table-layout" style="background: #F2F6FC;">
<!-- el-checkbox 复选框组件双向绑定 cate 对象的 checked 属性通过调用 isIndeterminate 方法设置不确定状态绑定 change 事件到 handleCheckAllChange 方法 -->
<!-- 复选框显示的文本为 cate 对象的 name 属性值 -->
<el-checkbox v-model="cate.checked"
:indeterminate="isIndeterminate(cate.id)"
@change="handleCheckAllChange(cate)">
{{cate.name}}
</el-checkbox>
</el-row>
<!-- 另一个 el-row 组件同样添加了 'table-layout' 类名用于样式布局 -->
<el-row class="table-layout">
<!-- 使用 v-for 指令循环遍历当前分类cate下的资源列表通过 getResourceByCate 方法获取每个资源对应一个 el-checkbox 组件 -->
<!-- 设置了 el-col 组件的占比为 8给每个复选框添加了上下内边距为 4px 的样式 -->
<el-col :span="8" v-for="resource in getResourceByCate(cate.id)" :key="resource.id" style="padding: 4px 0">
<!-- el-checkbox 复选框组件双向绑定 resource 对象的 checked 属性绑定 change 事件到 handleCheckChange 方法 -->
<!-- 复选框显示的文本为 resource 对象的 name 属性值 -->
<el-checkbox v-model="resource.checked" @change="handleCheckChange(resource)">
{{resource.name}}
</el-checkbox>
</el-col>
</el-row>
</div>
<!-- 包含两个按钮的 div 容器设置了顶部外边距为 20px并使其内容居中对齐 -->
<div style="margin-top: 20px" align="center">
<!-- 保存按钮类型为主要primary点击时调用 handleSave 方法 -->
<el-button type="primary" @click="handleSave()"></el-button>
<!-- 清空按钮点击时调用 handleClear 方法 -->
<el-button @click="handleClear()"></el-button>
</div>
</el-card>
</template>
<script>
// @/api/resource API
import {fetchAllResourceList} from '@/api/resource';
// @/api/resourceCategory API
import {listAllCate} from '@/api/resourceCategory';
// @/api/role API
import {allocResource, listResourceByRole} from '@/api/role';
import {fetchAllResourceList} from '@/api/resource';
import {listAllCate} from '@/api/resourceCategory';
import {allocResource,listResourceByRole} from '@/api/role';
export default {
name: "allocResource",
data() {
return {
// ID null
roleId: null,
// null API
allResource: null,
// null API
allResourceCate: null
};
},
created() {
// ID roleId
this.roleId = this.$route.query.roleId;
//
this.getAllResourceCateList();
},
methods: {
//
getAllResourceList() {
// API Promise
fetchAllResourceList().then(response => {
// allResource
this.allResource = response.data;
// checked false
for (let i = 0; i < this.allResource.length; i++) {
this.allResource[i].checked = false;
}
// ID
this.getResourceByRole(this.roleId);
});
export default {
name: "allocResource",
data() {
return {
roleId: null,
allResource: null,
allResourceCate: null
};
},
//
getAllResourceCateList() {
// API Promise
listAllCate().then(response => {
// allResourceCate
this.allResourceCate = response.data;
// checked false
for (let i = 0; i < this.allResourceCate.length; i++) {
this.allResourceCate[i].checked = false;
}
//
this.getAllResourceList();
});
},
// ID
getResourceByCate(categoryId) {
//
let cateResource = [];
// null
if (this.allResource == null) return null;
//
for (let i = 0; i < this.allResource.length; i++) {
//
let resource = this.allResource[i];
// ID ID
if (resource.categoryId === categoryId) {
cateResource.push(resource);
}
}
return cateResource;
created() {
this.roleId = this.$route.query.roleId;
this.getAllResourceCateList();
},
// ID
getResourceByRole(roleId) {
// API ID Promise
listResourceByRole(roleId).then(response => {
// allocResource 便
let allocResource = response.data;
// getResourceChecked
this.allResource.forEach(item => {
item.checked = this.getResourceChecked(item.id, allocResource);
methods: {
getAllResourceList() {
fetchAllResourceList().then(response => {
this.allResource = response.data;
for (let i = 0; i < this.allResource.length; i++) {
this.allResource[i].checked = false;
}
this.getResourceByRole(this.roleId);
});
// isAllChecked
this.allResourceCate.forEach(item => {
item.checked = this.isAllChecked(item.id);
},
getAllResourceCateList() {
listAllCate().then(response => {
this.allResourceCate = response.data;
for (let i = 0; i < this.allResourceCate.length; i++) {
this.allResourceCate[i].checked = false;
}
this.getAllResourceList();
});
//
this.$forceUpdate();
});
},
// ID
getResourceChecked(resourceId, allocResource) {
// false
if (allocResource == null || allocResource.length === 0) return false;
//
for (let i = 0; i < allocResource.length; i++) {
// ID true
if (allocResource[i].id === resourceId) {
return true;
}
}
return false;
},
//
isIndeterminate(categoryId) {
//
let cateResources = this.getResourceByCate(categoryId);
// false
if (cateResources == null) return false;
// 0
let checkedCount = 0;
//
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
},
getResourceByCate(categoryId) {
let cateResource = [];
if (this.allResource == null) return null;
for (let i = 0; i < this.allResource.length; i++) {
let resource = this.allResource[i];
if (resource.categoryId === categoryId) {
cateResource.push(resource);
}
}
}
// 0 true
return!(checkedCount === 0 || checkedCount === cateResources.length);
},
//
isAllChecked(categoryId) {
//
let cateResources = this.getResourceByCate(categoryId);
// false
if (cateResources == null) return false;
// 0
let checkedCount = 0;
//
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
return cateResource;
},
getResourceByRole(roleId){
listResourceByRole(roleId).then(response=>{
let allocResource = response.data;
this.allResource.forEach(item=>{
item.checked = this.getResourceChecked(item.id,allocResource);
});
this.allResourceCate.forEach(item=>{
item.checked = this.isAllChecked(item.id);
});
this.$forceUpdate();
});
},
getResourceChecked(resourceId,allocResource){
if(allocResource==null||allocResource.length===0) return false;
for(let i=0;i<allocResource.length;i++){
if(allocResource[i].id===resourceId){
return true;
}
}
}
// 0 false
if (checkedCount === 0) {
return false;
}
// true
return checkedCount === cateResources.length;
},
//
handleSave() {
// Set ID
let checkedResourceIds = new Set();
//
if (this.allResource!= null && this.allResource.length > 0) {
// checked true ID Set
this.allResource.forEach(item => {
if (item.checked) {
checkedResourceIds.add(item.id);
},
isIndeterminate(categoryId) {
let cateResources = this.getResourceByCate(categoryId);
if (cateResources == null) return false;
let checkedCount = 0;
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
}
return !(checkedCount === 0 || checkedCount === cateResources.length);
},
isAllChecked(categoryId) {
let cateResources = this.getResourceByCate(categoryId);
if (cateResources == null) return false;
let checkedCount = 0;
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
}
if(checkedCount===0){
return false;
}
return checkedCount === cateResources.length;
},
handleSave() {
this.$confirm('是否分配资源?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let checkedResourceIds = new Set();
if (this.allResource != null && this.allResource.length > 0) {
this.allResource.forEach(item => {
if (item.checked) {
checkedResourceIds.add(item.id);
}
});
}
let params = new URLSearchParams();
params.append("roleId", this.roleId);
params.append("resourceIds", Array.from(checkedResourceIds));
allocResource(params).then(response => {
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
this.$router.back();
})
})
},
handleClear() {
this.allResourceCate.forEach(item => {
item.checked = false;
});
}
// URLSearchParams
let params = new URLSearchParams();
// ID
params.append("roleId", this.roleId);
// ID Array.from
params.append("resourceIds", Array.from(checkedResourceIds));
// API Promise
allocResource(params).then(response => {
// success 1000
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
this.allResource.forEach(item => {
item.checked = false;
});
//
this.$router.back();
})
},
//
handleClear() {
// checked false
this.allResourceCate.forEach(item => {
item.checked = false;
});
// checked false
this.allResource.forEach(item => {
item.checked = false;
});
//
this.$forceUpdate();
},
// /
handleCheckAllChange(cate) {
//
let cateResources = this.getResourceByCate(cate.id);
//
for (let i = 0; i < cateResources.length; i++) {
cateResources[i].checked = cate.checked;
}
//
this.$forceUpdate();
},
//
handleCheckChange(resource) {
//
this.allResourceCate.forEach(item => {
if (item.id === resource.categoryId) {
//
item.checked = this.isAllChecked(resource.categoryId);
this.$forceUpdate();
},
handleCheckAllChange(cate) {
let cateResources = this.getResourceByCate(cate.id);
for (let i = 0; i < cateResources.length; i++) {
cateResources[i].checked = cate.checked;
}
});
//
this.$forceUpdate();
this.$forceUpdate();
},
handleCheckChange(resource) {
this.allResourceCate.forEach(item=>{
if(item.id===resource.categoryId){
item.checked = this.isAllChecked(resource.categoryId);
}
});
this.$forceUpdate();
}
}
}
}
</script>
<style scoped>
/* 定义了名为 'table-layout' 的类选择器样式规则,用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式,颜色为 #DCDFE6线条样式为实线宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式,与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式,与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则,用于给元素添加顶部边框,可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
</style><style scoped>
/* 定义了名为 'table-layout' 的类选择器样式规则,用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式,颜色为 #DCDFE6线条样式为实线宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式,与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式,与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则,用于给元素添加顶部边框,可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
</style><style scoped>
/* 定义了名为 'table-layout' 的类选择器样式规则,用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式,颜色为 #DCDFE6线条样式为实线宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式,与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式,与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
.table-layout {
padding: 20px;
border-left: 1px solid #DCDFE6;
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则,用于给元素添加顶部边框,可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
.top-line {
border-top: 1px solid #DCDFE6;
}
</style>

@ -1,14 +1,9 @@
<template>
<!-- 整体的应用容器 div用于包裹页面内的各个功能模块 -->
<template> 
<div class="app-container">
<!-- 筛选搜索区域的卡片容器设置了阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标元素使用了 el-icon-search 图标 -->
<i class="el-icon-search"></i>
<!-- 筛选搜索的文字提示 -->
<span>筛选搜索</span>
<!-- 查询搜索按钮设置了样式为右浮动按钮类型为主要primary点击时调用 handleSearchList 方法按钮大小为 small -->
<el-button
style="float:right"
type="primary"
@ -16,7 +11,6 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮设置了样式为右浮动且距离右侧 15px点击时调用 handleResetSearch 方法按钮大小为 small -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,52 +19,38 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 内联表单绑定了 listQuery 数据对象表单大小为 small标签宽度为 140px用于设置筛选条件 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单项目标签为输入搜索内部的输入框双向绑定 listQuery.keyword设置了类名占位符以及可清空功能 -->
<el-form-item label="输入搜索:">
<el-input v-model="listQuery.keyword" class="input-width" placeholder="角色名称" clearable></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片容器设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 图标元素使用了 el-icon-tickets 图标 -->
<i class="el-icon-tickets"></i>
<!-- 数据列表的文字提示 -->
<span>数据列表</span>
<!-- 添加按钮大小为 mini添加了自定义类名 btn-add点击时调用 handleAdd 方法设置了左侧外边距为 20px -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
</el-card>
<!-- 表格容器 div用于放置展示角色数据的表格 -->
<div class="table-container">
<!-- el-table 组件用于展示角色数据列表设置了引用名绑定的数据表格宽度加载状态绑定以及边框等属性 -->
<el-table ref="roleTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列标签为编号设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 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>
<!-- 表格列标签为描述内容居中对齐通过插槽作用域展示对应行数据的 description 属性 -->
<el-table-column label="描述" align="center">
<template slot-scope="scope">{{scope.row.description}}</template>
</el-table-column>
<!-- 表格列标签为用户数设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 adminCount 属性 -->
<el-table-column label="用户数" width="100" align="center">
<template slot-scope="scope">{{scope.row.adminCount}}</template>
</el-table-column>
<!-- 表格列标签为添加时间设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 createTime 属性并使用 formatDateTime 过滤器对时间进行格式化展示 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列标签为是否启用设置了宽度和内容居中对齐通过插槽作用域展示对应行数据的 status 属性并使用 el-switch 组件进行切换操作绑定了相关的事件和值 -->
<el-table-column label="是否启用" width="140" align="center">
<template slot-scope="scope">
<el-switch
@ -81,7 +61,6 @@
</el-switch>
</template>
</el-table-column>
<!-- 表格列标签为操作设置了宽度和内容居中对齐通过插槽作用域展示多个操作按钮包括分配菜单分配资源编辑和删除按钮分别绑定了对应的点击事件 -->
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<el-row>
@ -95,23 +74,21 @@
</el-button>
</el-row>
<el-row>
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页容器 div用于放置分页组件 -->
<div class="pagination-container">
<!-- el-pagination 分页组件设置了背景色相关页面切换事件绑定布局样式当前页每页数量可选每页数量数组以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -123,27 +100,22 @@
:total="total">
</el-pagination>
</div>
<!-- el-dialog 对话框组件根据 isEdit 变量动态设置标题为编辑角色添加角色绑定了显示状态设置了宽度 -->
<el-dialog
:title="isEdit?'编辑角色':'添加角色'"
:visible.sync="dialogVisible"
width="40%">
<!-- 对话框内的表单绑定了 role 数据对象设置了表单引用标签宽度和大小 -->
<el-form :model="role"
ref="roleForm"
label-width="150px" size="small">
<!-- 表单项目标签为角色名称输入框双向绑定 role.name并设置了宽度 -->
<el-form-item label="角色名称:">
<el-input v-model="role.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为描述输入框双向绑定 role.description设置了文本域类型和行数以及宽度 -->
<el-form-item label="描述:">
<el-input v-model="role.description"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目标签为是否启用内部是一个单选按钮组双向绑定 role.status用于选择角色是否启用的状态 -->
<el-form-item label="是否启用:">
<el-radio-group v-model="role.status">
<el-radio :label="1"></el-radio>
@ -151,7 +123,6 @@
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部的按钮区域通过插槽定义了取消和确定按钮分别绑定了对应的点击事件 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small"> </el-button>
@ -160,199 +131,156 @@
</div>
</template>
<script>
// '@/api/role'API
import {fetchList, createRole, updateRole, updateStatus, deleteRole} from '@/api/role';
// '@/utils/date'formatDate
import {formatDate} from '@/utils/date';
// 15null
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
// IDIDnull01
const defaultRole = {
id: null,
name: null,
description: null,
adminCount: 0,
status: 1
};
import {fetchList,createRole,updateRole,updateStatus,deleteRole} from '@/api/role';
import {formatDate} from '@/utils/date';
export default {
name: 'roleList',
data() {
return {
// Object.assigndefaultListQuery
listQuery: Object.assign({}, defaultListQuery),
// nullAPI
list: null,
// nullAPI
total: null,
// truefalsefalse
listLoading: false,
// truefalsefalse
dialogVisible: false,
// defaultRole
role: Object.assign({}, defaultRole),
// truefalsefalse
isEdit: false
}
},
//
created() {
this.getList();
},
filters: {
// time
formatDateTime(time) {
// null'N/A'
if (time == null || time === '') {
return 'N/A';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
const defaultRole = {
id: null,
name: null,
description: null,
adminCount: 0,
status: 1
};
export default {
name: 'roleList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: false,
dialogVisible: false,
role: Object.assign({}, defaultRole),
isEdit: false
}
// JavaScriptDate
let date = new Date(time);
// formatDate'yyyy-MM-dd hh:mm:ss'
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
//
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 1
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// 1val
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// val
handleCurrentChange(val) {
this.listQuery.pageNum = val;
created() {
this.getList();
},
//
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.role = Object.assign({}, defaultRole);
filters: {
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
//
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// updateStatusID
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
//
this.$message({
type: 'info',
message: '取消修改'
});
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
});
},
//
handleDelete(index, row) {
this.$confirm('是否要删除该角色?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = [];
// ID
ids.push(row.id);
let params = new URLSearchParams();
// IDURLSearchParamsAPI
params.append("ids", ids);
// deleteRole
deleteRole(params).then(response => {
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.role = Object.assign({},defaultRole);
},
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '删除成功!'
type: 'info',
message: '取消修改'
});
this.getList();
});
});
},
//
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.role = Object.assign({}, row);
},
//
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// updateRoleID
if (this.isEdit) {
updateRole(this.role.id, this.role).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
});
this.dialogVisible = false;
this.getList();
})
} else {
// createRole
createRole(this.role).then(response => {
},
handleDelete(index, row) {
this.$confirm('是否要删除该角色?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = [];
ids.push(row.id);
let params=new URLSearchParams();
params.append("ids",ids);
deleteRole(params).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
type: 'success',
message: '删除成功!'
});
this.dialogVisible = false;
this.getList();
})
}
})
},
// '/ums/allocMenu'ID
handleSelectMenu(index, row) {
this.$router.push({path: '/ums/allocMenu', query: {roleId: row.id}})
},
// '/ums/allocResource'ID
handleSelectResource(index, row) {
this.$router.push({path: '/ums/allocResource', query: {roleId: row.id}})
},
// fetchList
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
});
});
},
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.role = Object.assign({},row);
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateRole(this.role.id,this.role).then(response => {
this.$message({
message: '修改成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createRole(this.role).then(response => {
this.$message({
message: '添加成功!',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
handleSelectMenu(index,row){
this.$router.push({path:'/ums/allocMenu',query:{roleId:row.id}})
},
handleSelectResource(index,row){
this.$router.push({path:'/ums/allocResource',query:{roleId:row.id}})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
}
}
}
</script>
<style>
/* CSS updateMenu
来对组件的外观进行定制化显示 */
/* CSS resourceList
- 设置表格的样式如表头单元格的字体颜色边框样式等
- 对筛选区域操作按钮分页组件等元素的布局外观进行调整比如按钮的颜色大小间距等
- 定制对话框的样式像对话框的背景色边框按钮在对话框内的排版等
通过添加这些样式规则可以让页面的显示更加符合设计要求和美观性 */
</style>
<style></style>

Loading…
Cancel
Save