py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request '合并' (#5) from branch_lyj into main

Browse Source
pull/6/head
py4fbma29 7 months ago
parent 7fea894a2f 8e314e8961
commit 648ef08f1f
18 changed files with 2867 additions and 1913 deletions
Show Stats Download Patch File Download Diff File

4
src/views/layout/components/AppMain.vue
Unescape View File

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

17
src/views/sms/advertise/add.vue
Unescape View File

@ -1,13 +1,18 @@
<template> 
<template>
<!-- 使用HomeAdvertiseDetail组件，并传递一个名为isEdit的prop，值为false -->
<home-advertise-detail :isEdit="false"></home-advertise-detail>
</template>
<script>
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
export default {
// 导入HomeAdvertiseDetail组件
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
// 定义当前组件的默认导出对象
export default {
// 设置当前组件的名称为addHomeAdvertise
name: 'addHomeAdvertise',
// 注册局部组件，使其在模板中可用
components: { HomeAdvertiseDetail }
}
}
</script>
<style></style>
<style></style>

81
src/views/sms/advertise/components/HomeAdvertiseDetail.vue
Unescape View File

@ -1,15 +1,19 @@
<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"
@ -23,27 +27,33 @@
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
@ -53,18 +63,21 @@
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'
const defaultTypeOptions = [
import SingleUpload from '@/components/Upload/singleUpload' // 导入单文件上传组件
import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise' // 导入API接口函数
const defaultTypeOptions = [ // 默认广告位置选项
{
label: 'PC首页轮播',
value: 0
@ -74,7 +87,7 @@
value: 1
}
];
const defaultHomeAdvertise = {
const defaultHomeAdvertise = { // 默认广告数据模型
name: null,
type: 1,
pic: null,
@ -86,18 +99,18 @@
sort: 0
};
export default {
name: 'HomeAdvertiseDetail',
components:{SingleUpload},
props: {
name: 'HomeAdvertiseDetail', // 组件名称
components:{SingleUpload}, // 注册子组件
props: { // 接收父组件传递的isEdit属性，判断是否为编辑模式
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'}
@ -115,42 +128,42 @@
{required: true, message: '请选择广告图片', trigger: 'blur'}
]
},
typeOptions: Object.assign({}, defaultTypeOptions)
typeOptions: Object.assign({}, defaultTypeOptions) // 广告位置选项，初始化为默认值
}
},
created(){
if (this.isEdit) {
created(){ // 生命周期钩子，组件创建时执行
if (this.isEdit) { // 如果是编辑模式，获取广告详情数据并赋值给homeAdvertise
getHomeAdvertise(this.$route.query.id).then(response => {
this.homeAdvertise = response.data;
});
}else{
}else{ // 如果不是编辑模式，初始化homeAdvertise为默认值
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
}
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
methods: { // 定义组件的方法
onSubmit(formName) { // 提交表单的方法
this.$refs[formName].validate((valid) => { // 验证表单数据
if (valid) { // 如果验证通过，显示确认对话框并根据是否为编辑模式调用相应的API接口
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
if (this.isEdit) { // 编辑模式，调用更新广告信息的API接口
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 {
} else { // 新建模式，调用创建广告信息的API接口。
createHomeAdvertise(this.homeAdvertise).then(response => {
this.$refs[formName].resetFields();
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
this.$message({
this.$refs[formName].resetFields(); // 重置表单字段
this.homeAdvertise = Object.assign({},defaultHomeAdvertise); // 重新初始化homeAdvertise为默认值
this.$message({ // 显示成功消息提示
message: '提交成功',
type: 'success',
duration:1000
@ -159,26 +172,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);
resetForm(formName) { // 重置表单的方法
this.$refs[formName].resetFields(); // 重置表单字段
this.homeAdvertise = Object.assign({},defaultHomeAdvertise); // 重新初始化homeAdvertise为默认值
}
}
}
</script>
<style scoped>
.input-width {
width: 70%;
<style scoped> // 定义组件的样式，scoped表示样式只作用于当前组件
.input-width { // 定义输入框宽度样式类
width: 70%; // 设置输入框宽度为70%
}
</style>

124
src/views/sms/advertise/index.vue
Unescape View File

@ -1,9 +1,13 @@
<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"
@ -11,6 +15,7 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -18,11 +23,14 @@
重置
</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"
@ -32,6 +40,7 @@
</el-option>
</el-select>
</el-form-item>
<!-- 到期时间筛选项 -->
<el-form-item label="到期时间：">
<el-date-picker
class="input-width"
@ -44,36 +53,48 @@
</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
@ -84,18 +105,23 @@
</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)">删除
@ -104,10 +130,13 @@
</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.label，value 值取自 item.value -->
<el-option
v-for="item in operates"
:key="item.value"
@ -115,6 +144,7 @@
:value="item.value">
</el-option>
</el-select>
<!-- el-button 组件，是一个按钮，设置了左边距为 20 像素，添加了 search-button 类名，绑定了点击事件 handleBatchOperate()，按钮类型为 primary（通常是主要操作按钮的样式），尺寸为 small -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -124,6 +154,7 @@
确定
</el-button>
</div>
<!-- 这是一个用于分页功能展示的容器 div -->
<div class="pagination-container">
<el-pagination
background
@ -139,16 +170,21 @@
</div>
</template>
<script>
import {fetchList,updateStatus,deleteHomeAdvertise} from '@/api/homeAdvertise';
import {formatDate} from '@/utils/date';
const defaultListQuery = {
// 从'@/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
};
const defaultTypeOptions = [
endTime: null
};
// 默认的广告类型选项数组，包含PC首页轮播、APP首页轮播等类型及对应值
const defaultTypeOptions = [
{
label: 'PC首页轮播',
value: 0
@ -157,39 +193,51 @@
label: 'APP首页轮播',
value: 1
}
];
export default {
];
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){
filters: {
// 格式化广告类型显示文本的过滤器
formatType(type) {
if (type === 1) {
return 'APP首页轮播';
}else{
} else {
return 'PC首页轮播';
}
},
formatTime(time){
if(time==null||time===''){
// 格式化时间显示文本的过滤器
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
@ -197,32 +245,38 @@
},
},
methods: {
// 重置搜索条件的方法
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 处理搜索列表的方法，重置页码后获取列表数据
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
// 处理多选选择改变的方法，更新多选选中的记录
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){
// 处理更新广告状态的方法，确认后调用接口更新状态，成功则重新获取列表数据并提示
handleUpdateStatus(index, row) {
this.$confirm('是否要修改上线/下线状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id,{status:row.status}).then(response=>{
updateStatus(row.id, {status: row.status}).then(response => {
this.getList();
this.$message({
type: 'success',
@ -237,10 +291,12 @@
this.getList();
});
},
handleDelete(index,row){
// 处理删除单个广告的方法，调用删除广告的接口
handleDelete(index, row) {
this.deleteHomeAdvertise(row.id);
},
handleBatchOperate(){
// 处理批量操作的方法，先判断是否有选中记录，有则根据操作类型执行相应操作
handleBatchOperate() {
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
@ -253,10 +309,10 @@
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if(this.operateType===0){
//删除
if (this.operateType === 0) {
// 删除
this.deleteHomeAdvertise(ids);
}else {
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
@ -264,12 +320,15 @@
});
}
},
handleAdd(){
// 处理添加广告的方法，跳转到添加广告的路由页面
handleAdd() {
this.$router.push({path: '/sms/addAdvertise'})
},
handleUpdate(index,row){
// 处理更新广告的方法，跳转到更新广告的路由页面并传递广告id
handleUpdate(index, row) {
this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
},
// 获取广告列表数据的方法，设置加载状态为true，获取成功后更新数据及加载状态
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
@ -278,15 +337,16 @@
this.total = response.data.total;
})
},
deleteHomeAdvertise(ids){
// 删除广告的方法，确认后调用接口删除，成功则重新获取列表数据并提示
deleteHomeAdvertise(ids) {
this.$confirm('是否要删除该广告?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHomeAdvertise(params).then(response=>{
let params = new URLSearchParams();
params.append("ids", ids);
deleteHomeAdvertise(params).then(response => {
this.getList();
this.$message({
type: 'success',
@ -296,12 +356,14 @@
})
}
}
}
}
</script>
<style scoped>
.input-width {
<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件 -->
.input-width {
<!-- 定义类选择器样式，设置宽度为203px -->
width: 203px;
}
}
</style>

12
src/views/sms/advertise/update.vue
Unescape View File

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

47
src/views/sms/brand/index.vue
Unescape View File

@ -1,9 +1,14 @@
<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"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 用于重置筛选条件的按钮，绑定对应点击事件，设置样式等属性 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,12 +25,18 @@
</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"
@ -35,24 +47,32 @@
</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
@ -63,12 +83,15 @@
</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"
@ -83,10 +106,13 @@
</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"
@ -94,6 +120,7 @@
:value="item.value">
</el-option>
</el-select>
<!-- 触发批量操作的按钮，设置样式、类型等属性，绑定点击事件 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -103,7 +130,9 @@
确定
</el-button>
</div>
<!-- 分页组件的容器 -->
<div class="pagination-container">
<!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -115,19 +144,26 @@
: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>
@ -135,7 +171,9 @@
</template>
</el-table-column>
</el-table>
<!-- 对话框内的分页组件容器 -->
<div class="pagination-container">
<!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@ -149,21 +187,28 @@
</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-dialog>

15
src/views/sms/coupon/add.vue
Unescape View File

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

170
src/views/sms/coupon/components/CouponDetail.vue
Unescape View File

@ -1,12 +1,16 @@
<template> 
<template>
<!-- el-card组件作为表单的容器，设置了类名和无阴影效果 -->
<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"
@ -15,11 +19,14 @@
</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"
@ -28,33 +35,40 @@
</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>
@ -62,21 +76,27 @@
<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"
@ -87,7 +107,9 @@
</el-table-column>
</el-table>
</el-form-item>
<!-- 当可使用商品类型为指定商品时显示的内容，包含商品选择框、添加按钮和展示关联商品关系的表格 -->
<el-form-item v-show="coupon.useType===2">
<!-- el-select商品选择框，设置了可过滤、远程搜索等属性 -->
<el-select
v-model="selectProduct"
filterable
@ -96,6 +118,7 @@
placeholder="商品名称/商品货号"
:remote-method="searchProductMethod"
:loading="selectProductLoading">
<!-- 通过v-for循环生成商品选项 -->
<el-option
v-for="item in selectProductOptions"
:key="item.productId"
@ -105,17 +128,22 @@
<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"
@ -126,6 +154,7 @@
</el-table-column>
</el-table>
</el-form-item>
<!-- 备注的表单项，用el-input输入框输入备注内容，设置了类名、类型为文本域等属性 -->
<el-form-item label="备注：">
<el-input
class="input-width"
@ -135,18 +164,26 @@
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>
import {createCoupon,getCoupon,updateCoupon} from '@/api/coupon';
import {fetchSimpleList as fetchProductList} from '@/api/product';
import {fetchListWithChildren} from '@/api/productCate'
const defaultCoupon = {
// 从'@/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,
@ -160,8 +197,9 @@
publishCount: null,
productRelationList: [],
productCategoryRelationList: []
};
const defaultTypeOptions = [
};
// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
@ -178,8 +216,9 @@
label: '注册赠券',
value: 3
}
];
const defaultPlatformOptions = [
];
// 默认的适用平台选项数组，包含全平台、移动平台、PC平台等及对应值
const defaultPlatformOptions = [
{
label: '全平台',
value: 0
@ -192,9 +231,11 @@
label: 'PC平台',
value: 2
}
];
export default {
];
export default {
name: 'CouponDetail',
// 定义组件接收的属性，这里有isEdit属性，类型为布尔值，默认是false
props: {
isEdit: {
type: Boolean,
@ -203,40 +244,52 @@
},
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'}
{type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
],
amount: [
{type: 'number',required: true,message: '面值只能是数值，0.01-10000，限2位小数',trigger: 'blur'}
{type: 'number', required: true, message: '面值只能是数值，0.01-10000，限2位小数', trigger: 'blur'}
],
minPoint: [
{type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
{type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
]
},
selectProduct:null,
// 选中的商品，初始为null
selectProduct: null,
// 商品选择框加载状态，初始为false
selectProductLoading: false,
selectProductOptions:[],
// 商品选项列表，初始为空数组
selectProductOptions: [],
// 选中的商品分类，初始为null
selectProductCate: null,
// 商品分类选项列表，初始为空数组
productCateOptions: []
}
},
created(){
if(this.isEdit){
getCoupon(this.$route.query.id).then(response=>{
this.coupon=response.data;
created() {
// 如果是编辑状态，调用获取优惠券函数获取数据并赋值给coupon
if (this.isEdit) {
getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
});
}
// 调用获取商品分类列表的函数
this.getProductCateList();
},
methods:{
methods: {
// 提交表单的方法，先进行表单验证，验证通过后弹出确认框，根据是否编辑状态调用相应的创建或更新函数，成功后有相应提示和路由操作
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
@ -245,23 +298,23 @@
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.isEdit){
updateCoupon(this.$route.query.id,this.coupon).then(response=>{
if (this.isEdit) {
updateCoupon(this.$route.query.id, this.coupon).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration:1000
duration: 1000
});
this.$router.back();
});
}else{
createCoupon(this.coupon).then(response=>{
} else {
createCoupon(this.coupon).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '提交成功',
type: 'success',
duration:1000
duration: 1000
});
this.$router.back();
});
@ -271,34 +324,37 @@
this.$message({
message: '验证失败',
type: 'error',
duration:1000
duration: 1000
});
return false;
}
});
},
// 重置表单的方法，重置表单字段并恢复coupon为默认值
resetForm(formName) {
this.$refs[formName].resetFields();
this.coupon = Object.assign({},defaultCoupon);
this.coupon = Object.assign({}, defaultCoupon);
},
searchProductMethod(query){
if (query !== '') {
// 商品搜索方法，根据输入的查询条件去获取商品列表数据并更新商品选项列表
searchProductMethod(query) {
if (query!== '') {
this.loading = true;
fetchProductList({keyword:query}).then(response=>{
this.loading=false;
fetchProductList({keyword: query}).then(response => {
this.loading = false;
let productList = response.data;
this.selectProductOptions = [];
for(let i=0;i<productList.length;i++){
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.selectProductOptions.push({productId: item.id, productName: item.name, productSn: item.productSn});
}
});
} else {
this.selectProductOptions = [];
}
},
handleAddProductRelation(){
if(this.selectProduct===null){
// 添加商品关联的方法，判断是否选择了商品，选择了则添加到商品关联列表，并清空选中商品
handleAddProductRelation() {
if (this.selectProduct === null) {
this.$message({
message: '请先选择商品',
type: 'warning'
@ -306,13 +362,15 @@
return
}
this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
this.selectProduct=null;
this.selectProduct = null;
},
handleDeleteProductRelation(index,row){
this.coupon.productRelationList.splice(index,1);
// 删除商品关联的方法，根据索引从商品关联列表中删除对应项
handleDeleteProductRelation(index, row) {
this.coupon.productRelationList.splice(index, 1);
},
handleAddProductCategoryRelation(){
if(this.selectProductCate===null||this.selectProductCate.length===0){
// 添加商品分类关联的方法，判断是否选择了商品分类，选择了则添加到分类关联列表，并清空选中分类
handleAddProductCategoryRelation() {
if (this.selectProductCate === null || this.selectProductCate.length === 0) {
this.$message({
message: '请先选择商品分类',
type: 'warning'
@ -320,26 +378,29 @@
return
}
this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
this.selectProductCate=[];
this.selectProductCate = [];
},
handleDeleteProductCateRelation(index,row){
this.coupon.productCategoryRelationList.splice(index,1);
// 删除商品分类关联的方法，根据索引从分类关联列表中删除对应项
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){
// 根据商品id获取商品对象的方法，遍历商品选项列表查找对应id的商品并返回
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) {
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});
}
@ -348,7 +409,8 @@
}
});
},
getProductCateByIds(ids){
// 根据商品分类id获取分类对象的方法，通过遍历分类选项列表查找对应id的分类信息并返回
getProductCateByIds(ids) {
let name;
let parentName;
for (let i = 0; i < this.productCateOptions.length; i++) {
@ -364,12 +426,14 @@
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
}
}
}
}
</script>
<style scoped>
.input-width {
<!-- 带有scoped属性的style标签，意味着里面定义的样式仅作用于当前组件内的元素 -->
.input-width {
<!-- 定义了一个类选择器样式，作用是将应用该类的元素宽度设置为其父元素宽度的60% -->
width: 60%;
}
}
</style>

166
src/views/sms/coupon/history.vue
Unescape View File

@ -1,45 +1,79 @@
<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 :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列组件，设置占4格宽度，显示已使用数量 -->
<el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col>
<!-- el-col列组件，设置占4格宽度，通过计算显示未使用数量 -->
<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"
@ -47,6 +81,7 @@
size="small">
查询搜索
</el-button>
<!-- 用于重置筛选条件的按钮，绑定点击事件，设置样式等属性 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -55,8 +90,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-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
<el-option v-for="item in useTypeOptions"
:key="item.value"
@ -65,41 +103,54 @@
</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"
@ -114,11 +165,15 @@
</div>
</template>
<script>
import {formatDate} from '@/utils/date';
import {getCoupon} from '@/api/coupon';
import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
// 从'@/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';
const defaultTypeOptions = [
// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
@ -135,15 +190,17 @@
label: '注册赠券',
value: 3
}
];
const defaultListQuery = {
];
// 默认的列表查询参数对象，包含页码、每页数量、使用状态等初始值
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
useStatus: null,
orderSn: null,
couponId: null
};
const defaultUseTypeOptions= [
};
// 默认的使用类型选项数组，包含未使用、已使用、已过期等状态及对应值
const defaultUseTypeOptions = [
{
label: "未使用",
value: 0
@ -156,27 +213,38 @@
label: "已过期",
value: 2
}
];
export default {
];
export default {
name: 'couponHistoryList',
data() {
return {
// 优惠券相关数据，初始为空对象
coupon: {},
// 当前列表查询参数，初始为默认值副本
listQuery: Object.assign({}, defaultListQuery),
useTypeOptions:Object.assign({},defaultUseTypeOptions),
list:null,
total:null,
listLoading:false
// 使用类型选项，初始为默认值副本
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;
});
this.listQuery.couponId=this.$route.query.id;
// 设置列表查询参数中的优惠券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) {
@ -185,6 +253,7 @@
}
return '';
},
// 根据值格式化可使用商品类型显示文本的过滤器
formatUseType(useType) {
if (useType === 0) {
return '全场通用';
@ -194,6 +263,7 @@
return '指定商品';
}
},
// 根据值格式化平台类型显示文本的过滤器
formatPlatform(platform) {
if (platform === 1) {
return '移动平台';
@ -203,6 +273,7 @@
return '全平台';
}
},
// 格式化日期的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的日期
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
@ -210,6 +281,7 @@
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
// 根据结束时间判断并格式化状态显示文本的过滤器，对比当前时间判断是否过期
formatStatus(endTime) {
let now = new Date().getTime();
if (endTime > now) {
@ -218,13 +290,15 @@
return '已过期';
}
},
// 根据值格式化领取方式显示文本的过滤器
formatGetType(type) {
if(type===1){
if (type === 1) {
return '主动获取';
}else{
} else {
return '后台赠送';
}
},
// 根据值格式化优惠券历史记录使用类型显示文本的过滤器
formatCouponHistoryUseType(useType) {
if (useType === 0) {
return '未使用';
@ -234,6 +308,7 @@
return '已过期';
}
},
// 格式化时间的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的时间
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
@ -243,51 +318,58 @@
},
},
methods: {
getList(){
this.listLoading=true;
fetchCouponHistoryList(this.listQuery).then(response=>{
this.listLoading=false;
this.list=response.data.list;
this.total=response.data.total;
// 获取优惠券历史记录列表的方法，设置加载状态为true，获取成功后更新数据及加载状态
getList() {
this.listLoading = true;
fetchCouponHistoryList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
// 重置搜索条件的方法，恢复为默认查询参数并设置优惠券id
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
this.listQuery.couponId=this.$route.query.id;
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的样式，设置宽度、外边距使其水平居中 -->
.app-container {
width: 80%;
margin: 20px auto;
}
.filter-container {
}
<!-- 定义类名为filter-container的样式，设置上边距 -->
.filter-container {
margin-top: 20px;
}
.table-layout {
}
<!-- 定义类名为table-layout的样式，设置上边距、左边框、上边框 -->
.table-layout {
margin-top: 20px;
border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6;
}
.table-cell {
}
<!-- 定义类名为table-cell的样式，设置高度、行高、边框、内边距、字体大小、颜色、文本对齐、溢出处理等属性 -->
.table-cell {
height: 60px;
line-height: 40px;
border-right: 1px solid #DCDFE6;
@ -297,9 +379,9 @@
color: #606266;
text-align: center;
overflow: hidden;
}
.table-cell-title {
}
<!-- 定义类名为table-cell-title的样式，设置边框、内边距、背景色、文本对齐、字体大小、颜色等属性 -->
.table-cell-title {
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
@ -307,7 +389,7 @@
text-align: center;
font-size: 14px;
color: #303133;
}
}
</style>

143
src/views/sms/coupon/index.vue
Unescape View File

@ -1,9 +1,14 @@
<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"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 用于重置筛选条件的按钮，绑定点击事件，设置样式等属性 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,12 +25,18 @@
</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"
@ -35,54 +47,72 @@
</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>
@ -90,7 +120,9 @@
</el-table-column>
</el-table>
</div>
<!-- 分页组件的容器 -->
<div class="pagination-container">
<!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -105,15 +137,20 @@
</div>
</template>
<script>
import {fetchList,deleteCoupon} from '@/api/coupon';
import {formatDate} from '@/utils/date';
const defaultListQuery = {
// 从'@/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=[
};
// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
@ -130,102 +167,124 @@
label: '注册赠券',
value: 3
}
];
export default {
name:'couponList',
];
export default {
name: 'couponList',
data() {
return {
listQuery:Object.assign({},defaultListQuery),
typeOptions:Object.assign({},defaultTypeOptions),
list:null,
total:null,
listLoading:false,
multipleSelection:[]
// 当前列表查询参数，初始为默认值副本
listQuery: Object.assign({}, defaultListQuery),
// 优惠券类型选项，初始为默认值副本
typeOptions: Object.assign({}, defaultTypeOptions),
// 优惠券列表数据，初始为null
list: null,
// 数据总条数，初始为null
total: null,
// 列表数据加载状态，初始为false
listLoading: false,
// 多选选中的记录，初始为空数组
multipleSelection: []
}
},
created(){
created() {
// 组件创建时调用，用于获取优惠券列表数据
this.getList();
},
filters:{
formatType(type){
for(let i=0;i<defaultTypeOptions.length;i++){
if(type===defaultTypeOptions[i].value){
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){
// 根据值格式化可使用商品类型显示文本的过滤器
formatUseType(useType) {
if (useType === 0) {
return '全场通用';
}else if(useType===1){
} else if (useType === 1) {
return '指定分类';
}else{
} else {
return '指定商品';
}
},
formatPlatform(platform){
if(platform===1){
// 根据值格式化适用平台显示文本的过滤器
formatPlatform(platform) {
if (platform === 1) {
return '移动平台';
}else if(platform===2){
} else if (platform === 2) {
return 'PC平台';
}else{
} else {
return '全平台';
}
},
formatDate(time){
if(time==null||time===''){
// 格式化日期的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的日期
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
formatStatus(endTime){
// 根据结束时间判断并格式化优惠券状态显示文本的过滤器，对比当前时间判断是否过期
formatStatus(endTime) {
let now = new Date().getTime();
let endDate = new Date(endTime);
if(endDate>now){
if (endDate > now) {
return '未过期'
}else{
} else {
return '已过期';
}
}
},
methods:{
methods: {
// 重置搜索条件的方法，恢复为默认查询参数
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 处理搜索列表的方法，重置页码后调用获取列表的方法
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
// 处理多选选择改变的方法，更新多选选中的记录
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(){
// 处理添加操作的方法，通过路由跳转至添加优惠券的页面
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}})
},
// 处理删除操作的方法，弹出确认框，确认后调用删除函数，成功后提示并重新获取列表数据
handleDelete(index, row) {
this.$confirm('是否进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteCoupon(row.id).then(response=>{
deleteCoupon(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
@ -234,18 +293,20 @@
});
})
},
getList(){
this.listLoading=true;
fetchList(this.listQuery).then(response=>{
// 获取优惠券列表数据的方法，设置加载状态为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;
}

15
src/views/sms/coupon/update.vue
Unescape View File

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

142
src/views/sms/flash/index.vue
Unescape View File

@ -1,9 +1,14 @@
<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"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 用于触发重置筛选条件操作的按钮，设置了按钮样式、与右侧有一定间距，绑定了点击事件“handleResetSearch” -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,42 +25,75 @@
</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">{{scope.row.id}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中的“id”字段内容 -->
{{scope.row.id}}
</template>
</el-table-column>
<!-- 显示活动标题的表格列，内容居中对齐 -->
<el-table-column label="活动标题" align="center">
<template slot-scope="scope">{{scope.row.title}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中的“title”字段内容 -->
{{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"
@ -63,17 +102,21 @@
</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)">删除
@ -82,7 +125,10 @@
</el-table-column>
</el-table>
</div>
<!-- 分页组件的容器 -->
<div class="pagination-container">
<!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -94,16 +140,22 @@
: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"
@ -111,6 +163,7 @@
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<!-- 对应“结束时间”选择框的表单项，同样使用了日期选择器组件 -->
<el-form-item label="结束时间：">
<el-date-picker
v-model="flashPromotion.endDate"
@ -118,98 +171,136 @@
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-dialog>
</div>
</template>
<script>
import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
import {formatDate} from '@/utils/date';
// 从'@/api/flash'模块中导入用于获取列表、更新状态、删除、创建以及更新闪购活动相关的函数
import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
// 从'@/utils/date'模块中导入用于日期格式化的函数formatDate
import {formatDate} from '@/utils/date';
const defaultListQuery = {
// 默认的列表查询参数对象，包含页码、每页数量以及用于搜索的关键词等初始值，用于初始化列表查询相关设置
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
const defaultFlashPromotion = {
};
// 默认的闪购活动对象，包含活动的编号、标题、开始时间、结束时间以及状态等初始值，用于初始化闪购活动相关数据
const defaultFlashPromotion = {
id: null,
title: null,
startDate: null,
endDate: null,
status: 0
};
export default {
};
export default {
name: 'flashPromotionList',
data() {
return {
// 当前的列表查询参数，初始化为defaultListQuery的副本，用于在组件中存储和操作实际的查询条件
listQuery: Object.assign({}, defaultListQuery),
// 存储获取到的闪购活动列表数据，初始为null，后续会通过接口获取并赋值
list: null,
// 数据总条数，初始为null，同样会在获取数据后更新具体的值
total: null,
// 列表数据加载状态，初始为false，在获取数据过程中会设置为true表示正在加载
listLoading: false,
// 控制添加/编辑活动对话框的显示与隐藏，初始为false即默认隐藏对话框
dialogVisible: false,
// 当前闪购活动的数据对象，初始化为defaultFlashPromotion的副本，在添加或编辑操作时会更新其值
flashPromotion: Object.assign({}, defaultFlashPromotion),
// 标记当前操作是编辑（true）还是添加（false）状态，初始为false
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()) {
}
// 判断当前时间是否大于活动结束时间，如果是则表示活动已结束
else if (nowDate.getTime() > endDate.getTime()) {
return '活动已结束';
} else {
}
// 如果上述条件都不满足，则表示活动还未开始
else {
return '活动未开始';
}
},
// 过滤器函数，用于对传入的时间数据进行格式化处理，如果时间为空则返回 '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;
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);
this.flashPromotion = Object.assign({}, defaultFlashPromotion);
},
// 处理查看秒杀时间段列表的方法，通过路由跳转到指定的 '/sms/flashSession' 路径对应的页面，通常用于展示相关时间段信息
handleShowSessionList() {
this.$router.push({path: '/sms/flashSession'})
},
// 处理活动状态改变的方法，弹出确认框询问是否要修改状态，确认后调用更新状态的接口函数，根据返回结果显示相应提示信息，取消则显示取消修改提示并重新获取列表数据
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
@ -230,6 +321,7 @@
this.getList();
});
},
// 处理删除活动的方法，弹出确认框询问是否要删除活动，确认后调用删除活动的接口函数，成功删除后显示提示信息，并重新获取列表数据以更新页面展示
handleDelete(index, row) {
this.$confirm('是否要删除该活动?', '提示', {
confirmButtonText: '确定',
@ -245,11 +337,13 @@
});
});
},
// 处理编辑活动的方法，将对话框显示状态设置为true，标记当前操作为编辑状态，然后将闪购活动数据对象赋值为传入的要编辑的活动行数据，方便在对话框中展示并修改数据
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.flashPromotion = Object.assign({},row);
this.flashPromotion = Object.assign({}, row);
},
// 处理对话框确认操作的方法，弹出确认框询问是否要确认当前操作（添加或编辑），确认后根据当前是编辑还是添加状态，分别调用对应的接口函数（更新或创建），操作成功后显示相应提示信息，关闭对话框并重新获取列表数据以更新页面展示
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
@ -257,12 +351,12 @@
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateFlash(this.flashPromotion.id,this.flashPromotion).then(response => {
updateFlash(this.flashPromotion.id, this.flashPromotion).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.dialogVisible = false;
this.getList();
})
} else {
@ -271,15 +365,17 @@
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.dialogVisible = false;
this.getList();
})
}
})
},
handleSelectSession(index,row){
this.$router.push({path:'/sms/selectSession',query:{flashPromotionId:row.id}})
// 处理设置商品的方法，通过路由跳转到指定的 '/sms/selectSession' 路径对应的页面，并传递当前闪购活动的id作为查询参数，通常用于后续设置该活动相关商品等操作
handleSelectSession(index, row) {
this.$router.push({path: '/sms/selectSession', query: {flashPromotionId: row.id}})
},
// 获取闪购活动列表数据的方法，先将列表数据加载状态设置为true，表示正在获取数据，然后调用导入的获取列表数据的接口函数，获取成功后更新列表数据和总条数，并将加载状态设置为false
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
@ -289,7 +385,7 @@
});
}
}
}
}
</script>
<style></style>

283
src/views/sms/flash/productRelationList.vue
Unescape View File

@ -1,52 +1,95 @@
<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">{{scope.row.id}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中的“id”字段内容 -->
{{scope.row.id}}
</template>
</el-table-column>
<!-- 显示商品名称的表格列，内容居中对齐，显示的是每行数据中关联商品对象里的“name”字段 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.product.name}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中关联商品对象里的“name”字段内容 -->
{{scope.row.product.name}}
</template>
</el-table-column>
<!-- 显示货号的表格列，设置了宽度和对齐方式，展示格式为“NO.”加上商品的货号 -->
<el-table-column label="货号" width="140" align="center">
<template slot-scope="scope">NO.{{scope.row.product.productSn}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中关联商品对象里的“productSn”字段内容 -->
NO.{{scope.row.product.productSn}}
</template>
</el-table-column>
<!-- 显示商品价格的表格列，设置了宽度和对齐方式，展示格式为“￥”加上商品价格 -->
<el-table-column label="商品价格" width="100" align="center">
<template slot-scope="scope">￥{{scope.row.product.price}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中关联商品对象里的“price”字段内容 -->
￥{{scope.row.product.price}}
</template>
</el-table-column>
<!-- 显示剩余数量的表格列，设置了宽度和对齐方式，直接显示商品的剩余数量 -->
<el-table-column label="剩余数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.product.stock}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中关联商品对象里的“stock”字段内容 -->
{{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">{{scope.row.flashPromotionCount}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中的“flashPromotionCount”字段内容 -->
{{scope.row.flashPromotionCount}}
</template>
</el-table-column>
<!-- 显示限购数量的表格列，设置了宽度和对齐方式，直接显示商品的限购数量 -->
<el-table-column label="限购数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.flashPromotionLimit}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中的“flashPromotionLimit”字段内容 -->
{{scope.row.flashPromotionLimit}}
</template>
</el-table-column>
<!-- 显示排序的表格列，设置了宽度和对齐方式，直接显示商品的排序值 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中的“sort”字段内容 -->
{{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)">删除
@ -55,7 +98,10 @@
</el-table-column>
</el-table>
</div>
<!-- 分页组件的容器，用于对商品数据列表进行分页操作 -->
<div class="pagination-container">
<!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -67,27 +113,47 @@
: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">{{scope.row.name}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，显示对应行数据中的“name”字段内容 -->
{{scope.row.name}}
</template>
</el-table-column>
<!-- 显示货号的表格列，设置了宽度和对齐方式，展示格式为“NO.”加上商品的货号 -->
<el-table-column label="货号" width="160" align="center">
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中的“productSn”字段内容 -->
NO.{{scope.row.productSn}}
</template>
</el-table-column>
<!-- 显示价格的表格列，设置了宽度和对齐方式，展示格式为“￥”加上商品价格 -->
<el-table-column label="价格" width="120" align="center">
<template slot-scope="scope">￥{{scope.row.price}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中的“price”字段内容 -->
￥{{scope.row.price}}
</template>
</el-table-column>
</el-table>
<!-- 分页组件的容器，用于对对话框内的商品列表进行分页操作 -->
<div class="pagination-container">
<!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@ -99,213 +165,266 @@
: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”，设置了表单引用、标签宽度和尺寸等属性 -->
<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-dialog>
</div>
</template>
<script>
import {fetchList,createFlashProductRelation,deleteFlashProductRelation,updateFlashProductRelation} from '@/api/flashProductRelation';
import {fetchList as fetchProductList} from '@/api/product';
const defaultListQuery = {
// 从'@/api/flashProductRelation'模块中导入用于获取列表、创建、删除以及更新秒杀商品关联关系相关的函数
import {fetchList, createFlashProductRelation, deleteFlashProductRelation, updateFlashProductRelation} from '@/api/flashProductRelation';
// 从'@/api/product'模块中导入用于获取商品列表的函数，并将其别名为'fetchProductList'
import {fetchList as fetchProductList} from '@/api/product';
// 默认的列表查询参数对象，包含页码、每页数量、闪购活动ID以及闪购活动场次ID等初始值，用于初始化列表查询相关设置
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
flashPromotionId: null,
flashPromotionSessionId: null
};
export default {
name:'flashPromotionProductRelationList',
};
export default {
name: 'flashPromotionProductRelationList',
data() {
return {
// 当前的列表查询参数，初始化为defaultListQuery的副本，用于在组件中存储和操作实际的查询条件
listQuery: Object.assign({}, defaultListQuery),
// 存储获取到的秒杀商品关联关系列表数据，初始为null，后续会通过接口获取并赋值
list: null,
// 数据总条数，初始为null，同样会在获取数据后更新具体的值
total: null,
// 列表数据加载状态，初始为false，在获取数据过程中会设置为true表示正在加载
listLoading: false,
// 控制添加/编辑等相关主对话框的显示与隐藏，初始为false即默认隐藏对话框
dialogVisible: false,
selectDialogVisible:false,
dialogData:{
// 控制选择商品对话框的显示与隐藏，初始为false即默认隐藏该对话框
selectDialogVisible: false,
// 用于存储选择商品对话框相关的数据，包括商品列表、数据总条数、多选选中的数据以及查询参数等
dialogData: {
list: null,
total: null,
multipleSelection:[],
listQuery:{
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
editDialogVisible:false,
flashProductRelation:{
product:{}
// 控制编辑秒杀商品信息对话框的显示与隐藏，初始为false即默认隐藏该对话框
editDialogVisible: false,
// 用于存储当前正在编辑的秒杀商品关联关系数据，初始包含一个空的商品对象，后续会赋值为实际要编辑的数据
flashProductRelation: {
product: {}
}
}
},
created(){
this.listQuery.flashPromotionId=this.$route.query.flashPromotionId;
this.listQuery.flashPromotionSessionId=this.$route.query.flashPromotionSessionId;
created() {
// 从路由查询参数中获取闪购活动ID，并赋值给列表查询参数中的对应字段，用于后续查询与该闪购活动相关的商品关联关系数据
this.listQuery.flashPromotionId = this.$route.query.flashPromotionId;
// 从路由查询参数中获取闪购活动场次ID，并赋值给列表查询参数中的对应字段，同样用于精准查询相关数据
this.listQuery.flashPromotionSessionId = this.$route.query.flashPromotionSessionId;
// 在组件创建完成后，立即调用获取秒杀商品关联关系列表数据的方法，用于初始化页面数据展示
this.getList();
},
methods:{
methods: {
// 处理每页显示数量改变的方法
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageNum = 1; //先将页码重置为1，然后更新列表查询参数中的每页显示数量
this.listQuery.pageSize = val;
this.getList();
this.getList(); //再调用获取列表数据的方法，以按照新的每页数量获取数据
},
// 处理当前页码改变的方法，更新列表查询参数中的当前页码
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
this.getList(); //然后调用获取列表数据的方法，以获取对应页码的数据进行展示
},
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
// 处理添加商品操作的方法
handleSelectProduct() {
this.selectDialogVisible = true; //将选择商品对话框的显示状态设置为true
this.getDialogList(); //然后调用获取选择商品对话框列表数据的方法，准备展示商品列表供选择
},
handleUpdate(index,row){
this.editDialogVisible = true;
this.flashProductRelation = Object.assign({},row);
// 处理编辑商品操作的方法
handleUpdate(index, row) {
this.editDialogVisible = true; //将编辑秒杀商品信息对话框的显示状态设置为true
this.flashProductRelation = Object.assign({}, row); //然后将当前要编辑的商品关联关系数据赋值为传入的要编辑的行数据，方便在对话框中展示并修改数据
},
handleDelete(index,row){
// 处理删除商品操作的方法，弹出确认框询问是否要删除商品
handleDelete(index, row) {
this.$confirm('是否要删除该商品?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).then(() => { //确认后调用删除商品关联关系的接口函数
deleteFlashProductRelation(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
this.getList(); //成功删除后显示提示信息，并重新获取列表数据以更新页面展示
});
});
},
handleSelectSearch(){
this.getDialogList();
// 处理选择商品对话框内搜索操作的方法
handleSelectSearch() {
this.getDialogList(); //调用获取选择商品对话框列表数据的方法，根据输入的关键词重新获取商品列表进行展示
},
// 处理选择商品对话框内每页显示数量改变的方法
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
this.dialogData.listQuery.pageNum = 1; //先将页码重置为1
this.dialogData.listQuery.pageSize = val; //然后更新对话框数据中查询参数的每页显示数量
this.getDialogList(); //再调用获取选择商品对话框列表数据的方法，以按照新的每页数量获取商品数据
},
// 处理选择商品对话框内当前页码改变的方法
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
this.dialogData.listQuery.pageNum = val; //更新对话框数据中查询参数的当前页码
this.getDialogList(); //然后调用获取选择商品对话框列表数据的方法，以获取对应页码的商品数据进行展示
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
// 处理选择商品对话框内多选选择改变的方法
handleDialogSelectionChange(val) {
this.dialogData.multipleSelection = val; //将对话框数据中多选选中的数据更新为传入的选择结果，用于记录用户在对话框内选中的商品
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
// 处理选择商品对话框确认操作的方法
handleSelectDialogConfirm() {
if (this.dialogData.multipleSelection.length < 1) { //首先判断是否至少选择了一条记录
this.$message({
message: '请选择一条记录',
message: '请选择一条记录', //如果没有则弹出提示信息要求选择；
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = [];
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
productId: this.dialogData.multipleSelection[i].id,
flashPromotionId: this.listQuery.flashPromotionId,
flashPromotionSessionId: this.listQuery.flashPromotionSessionId
});
}
this.$confirm('使用要进行添加操作?', '提示', {
this.$confirm('是否要进行添加操作?', '提示', { //弹出确认框询问是否要进行添加操作
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createFlashProductRelation(selectProducts).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
}).then(() => { //确认后调用创建秒杀商品关联关系的接口函数
createFlashProductRelation(selectProducts).then(response => {
this.selectDialogVisible = false;
this.dialogData.multipleSelection = [];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
message: '添加成功!' //成功添加后进行一系列后续操作，如关闭对话框、清空选中记录、重新获取列表数据并显示添加成功提示信息
});
});
});
},
handleEditDialogConfirm(){
this.$confirm('是否要确认?', '提示', {
// 处理编辑秒杀商品信息对话框确认操作的方法
handleEditDialogConfirm() {
this.$confirm('是否要确认?', '提示', { //弹出确认框询问是否要确认编辑操作
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateFlashProductRelation(this.flashProductRelation.id,this.flashProductRelation).then(response => {
}).then(() => { //确认后调用更新秒杀商品关联关系的接口函数，关闭对话框并重新获取列表数据以更新页面展示
updateFlashProductRelation(this.flashProductRelation.id, this.flashProductRelation).then(response => {
this.$message({
message: '修改成功！',
message: '修改成功！', //操作成功后显示相应提示信息
type: 'success'
});
this.editDialogVisible =false;
this.editDialogVisible = false;
this.getList();
})
})
},
// 获取秒杀商品关联关系列表数据的方法
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
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;
// 获取选择商品对话框列表数据的方法，用于在对话框内展示商品信息
getDialogList() {
fetchProductList(this.dialogData.listQuery).then(response => { //调用导入的获取商品列表的接口函数
this.dialogData.list = response.data.list; //获取成功后更新对话框数据中的商品列表和总条数
this.dialogData.total = response.data.total;
})
}
}
}
}
</script>
<style scoped>
.operate-container{
<!-- 使用带有“scoped”属性的“style”标签，表示这里定义的样式仅作用于当前组件内的元素，避免样式污染其他组件 -->
<!-- 定义类名为“operate-container”的样式规则 -->
.operate-container{
<!-- 设置该类所应用元素的上外边距为0，用于控制其与上方元素的间距 -->
margin-top: 0;
}
.input-width{
}
<!-- 定义类名为“input-width”的样式规则 -->
.input-width{
<!-- 设置该类所应用元素的宽度为200px，通常可用于像输入框等需要统一宽度设置的表单元素 -->
width: 200px;
}
}
</style>

85
src/views/sms/flash/selectSessionList.vue
Unescape View File

@ -1,31 +1,60 @@
<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">{{scope.row.id}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"id"字段内容，即展示每一行数据的编号 -->
{{scope.row.id}}
</template>
</el-table-column>
<!-- el-table-column组件，用于定义表格中的列，此列用于展示秒杀时间段名称信息，内容在单元格中居中对齐 -->
<el-table-column label="秒杀时间段名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"name"字段内容，即展示每一行数据对应的秒杀时间段的名称 -->
{{scope.row.name}}
</template>
</el-table-column>
<!-- el-table-column组件，用于定义表格中的列，此列用于展示每日开始时间信息，内容在单元格中居中对齐，使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
<el-table-column label="每日开始时间" align="center">
<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"startTime"字段（时间类型数据）进行格式化处理后展示 -->
{{scope.row.startTime | formatTime}}
</template>
</el-table-column>
<!-- el-table-column组件，用于定义表格中的列，此列用于展示每日结束时间信息，内容在单元格中居中对齐，同样使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
<el-table-column label="每日结束时间" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"endTime"字段（时间类型数据）进行格式化处理后展示 -->
{{scope.row.endTime | formatTime}}
</template>
</el-table-column>
<!-- el-table-column组件，用于定义表格中的列，此列用于展示商品数量信息，内容在单元格中居中对齐，直接展示对应行数据中的"productCount"字段内容，即显示每个秒杀时间段对应的商品数量 -->
<el-table-column label="商品数量" align="center">
<template slot-scope="scope">{{scope.row.productCount}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"productCount"字段内容，即展示每一行数据对应的商品数量 -->
{{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)">商品列表
@ -37,47 +66,67 @@
</div>
</template>
<script>
import {fetchSelectList} from '@/api/flashSession';
import {formatDate} from '@/utils/date';
export default {
// 从'@/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,
// 表示列表数据的加载状态，初始值为false，当开始获取数据时会设置为true，数据获取完成后再设回false，用于控制页面上加载动画等相关显示
listLoading: false
}
},
created() {
// 在组件创建完成后，立即调用获取列表数据的方法，用于初始化页面展示所需的数据
this.getList();
},
filters:{
filters: {
// 定义一个名为formatTime的过滤器函数，用于对传入的时间数据进行格式化处理
formatTime(time) {
// 判断传入的时间数据是否为空（null或者空字符串），如果是则返回 'N/A' 作为默认显示内容
if (time == null || time === '') {
return 'N/A';
}
// 将传入的时间数据转换为JavaScript的Date对象，以便后续使用相关方法进行格式化操作
let date = new Date(time);
// 调用导入的formatDate函数，按照 'hh:mm:ss' 的格式对Date对象表示的时间进行格式化，并返回格式化后的结果
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}})
// 处理展示关联关系的方法，通常用于当用户点击页面上对应的操作按钮（比如查看关联商品列表之类的操作）时触发
handleShowRelation(index, row) {
// 使用Vue Router进行页面路由跳转，跳转到 '/sms/flashProductRelation' 路径对应的页面
this.$router.push({path: '/sms/flashProductRelation', query: {
flashPromotionId: this.$route.query.flashPromotionId, flashPromotionSessionId: row.id}}) //同时传递两个查询参数，一个是从当前路由查询参数中获取的闪购活动ID（flashPromotionId），另一个是当前行数据中对应的闪购时段ID（flashPromotionSessionId），可能用于在目标页面根据这两个ID来展示相关的商品关联关系等信息
},
// 获取列表数据的方法，用于向服务器请求并获取相关的数据列表（比如闪购时段列表等）
getList() {
// 将列表数据加载状态设置为true，表示开始获取数据，此时页面上可以根据这个状态显示加载动画等提示信息
this.listLoading = true;
fetchSelectList({flashPromotionId:this.$route.query.flashPromotionId}).then(response => {
// 调用导入的fetchSelectList函数，传递一个包含闪购活动ID的对象作为参数（从当前路由查询参数中获取闪购活动ID），向服务器发起请求获取数据，请求成功后执行then回调函数
fetchSelectList({flashPromotionId: this.$route.query.flashPromotionId}).then(response => {
// 将列表数据加载状态设置为false，表示数据获取完成，停止页面上的加载动画等相关显示
this.listLoading = false;
// 将获取到的响应数据中的列表数据部分赋值给组件的list属性，以便在页面模板中进行展示等操作
this.list = response.data;
});
}
}
}
}
</script>
<style scoped>
.operate-container {
margin-top: 0;
}
<!-- “scoped”属性表示该样式作用范围仅限于当前组件内的元素，避免样式影响到其他组件中的同名元素，起到样式隔离的作用 -->
.operate-container {
<!-- 这是一个CSS样式规则，针对类名为“operate-container”的元素进行样式设置 -->
<!-- “margin-top”属性用于设置元素的上外边距，这里将其值设置为“0”，意味着该元素距离上方相邻元素的间距为0，可用于精准控制元素在页面中的垂直布局位置 -->
margin-top: 0;
}
</style>

171
src/views/sms/flash/sessionList.vue
Unescape View File

@ -1,29 +1,55 @@
<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">{{scope.row.id}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内（通过slot-scope获取到对应行的数据对象），通过插值表达式显示对应行数据中的"id"字段内容，即展示每一行数据的编号 -->
{{scope.row.id}}
</template>
</el-table-column>
<!-- el-table-column组件，用于定义表格中的列，此列用于展示秒杀时间段名称信息，内容在单元格中居中对齐，直接展示对应行数据中的"name"字段内容，用于显示每个秒杀时间段对应的名称 -->
<el-table-column label="秒杀时间段名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"name"字段内容，即展示每一行数据对应的秒杀时间段的名称 -->
{{scope.row.name}}
</template>
</el-table-column>
<!-- el-table-column组件，用于定义表格中的列，此列用于展示每日开始时间信息，内容在单元格中居中对齐，使用了名为"formatTime"的过滤器（应该是在组件的filters选项中定义的，用于对时间数据进行格式化处理）对时间数据进行格式化后再展示 -->
<el-table-column label="每日开始时间" align="center">
<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"startTime"字段（时间类型数据）进行格式化处理后展示 -->
{{scope.row.startTime | formatTime}}
</template>
</el-table-column>
<!-- el-table-column组件，用于定义表格中的列，此列用于展示每日结束时间信息，内容在单元格中居中对齐，同样使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
<el-table-column label="每日结束时间" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
<template slot-scope="scope">
<!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"endTime"字段（时间类型数据）进行格式化处理后展示 -->
{{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"
@ -32,12 +58,15 @@
</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)">删除
@ -46,82 +75,115 @@
</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-dialog>
</div>
</template>
<script>
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 {
// 从'@/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,
// 表示列表数据的加载状态，初始值为false，当开始获取数据时会设置为true，数据获取完成后再设回false，可用于在页面上显示加载动画等提示用户数据正在加载中
listLoading: false,
dialogVisible:false,
isEdit:false,
flashSession:Object.assign({},defaultFlashSession)
// 控制弹出对话框（如添加/编辑时间段的对话框）的显示与隐藏，初始值为false，表示对话框默认是隐藏状态
dialogVisible: false,
// 标记当前操作是编辑（true）还是添加（false）状态，初始值为false，用于区分不同的操作场景，以便执行相应的逻辑处理
isEdit: false,
// 当前秒杀时间段的数据对象，初始化为defaultFlashSession的副本，在进行添加或编辑操作时会更新其属性值，用于存储和传递相关时间段的具体信息
flashSession: Object.assign({}, defaultFlashSession)
}
},
created() {
// 在组件创建完成后，立即调用获取列表数据的方法，用于初始化页面展示所需的秒杀时间段列表数据，使得页面加载完成后能及时显示相关信息
this.getList();
},
filters:{
filters: {
// 定义一个名为formatTime的过滤器函数，用于对传入的时间数据进行格式化处理，方便在页面上按照特定格式展示时间信息
formatTime(time) {
// 判断传入的时间数据是否为空（null或者空字符串），如果是则返回 'N/A' 作为默认显示内容，表示时间数据无效或暂无数据
if (time == null || time === '') {
return 'N/A';
}
// 将传入的时间数据转换为JavaScript的Date对象，以便后续使用formatDate函数进行格式化操作，Date对象可以方便地提取和处理时间相关的各个部分（如小时、分钟、秒等）
let date = new Date(time);
// 调用导入的formatDate函数，按照 'hh:mm:ss' 的格式对Date对象表示的时间进行格式化，例如将时间格式化为类似 "12:30:00" 的形式，并返回格式化后的结果用于页面展示
return formatDate(date, 'hh:mm:ss')
}
},
methods: {
// 处理添加操作的方法
handleAdd() {
this.dialogVisible = true;
this.dialogVisible = true; //将对话框显示状态设置为true，表示弹出添加时间段的对话框，把操作标记为添加（非编辑）状态
this.isEdit = false;
this.flashSession = Object.assign({},defaultFlashSession);
this.flashSession = Object.assign({}, defaultFlashSession); //同时将当前秒杀时间段的数据对象重置为默认值，准备让用户输入新的时间段信息进行添加操作
},
handleStatusChange(index,row){
this.$confirm('是否要修改该状态?', '提示', {
// 处理状态改变的方法，当用户在页面上操作（比如通过开关切换时间段的启用/禁用状态）改变了某个时间段的状态时触发。
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', { //首先弹出确认框询问用户是否要修改该状态
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
@ -129,80 +191,87 @@
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
message: '修改成功!' //确认修改后调用更新状态的接口函数，并根据接口返回结果显示相应的提示信息（成功则提示修改成功）
});
});
}).catch(() => {
}).catch(() => { //如果用户取消修改，则显示取消修改的提示信息
this.$message({
type: 'info',
message: '取消修改'
});
this.getList();
this.getList(); //并重新调用获取列表数据的方法刷新页面数据展示
});
},
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);
// 处理编辑操作的方法，当用户点击编辑某个时间段的按钮时触发.
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);
},
handleDelete(index,row){
this.$confirm('是否要删除该时间段?', '提示', {
// 处理删除操作的方法，当用户点击删除某个时间段的按钮时触发.
handleDelete(index, row) {
this.$confirm('是否要删除该时间段?', '提示', { //弹出确认框询问用户是否要删除该时间段
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).then(() => { //确认删除后调用删除时间段的接口函数
deleteSession(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
message: '删除成功!' //成功删除后显示提示信息告知用户删除成功
});
this.getList();
this.getList(); //并重新调用获取列表数据的方法刷新页面，使页面展示的数据列表更新为最新状态（已删除相应时间段后的列表）
});
});
},
// 处理对话框确认操作的方法，当用户在添加或编辑时间段的对话框中点击确定按钮时触发.
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
this.$confirm('是否要确认?', '提示', { //首先弹出确认框再次询问用户是否要确认当前操作（添加或编辑），确认后根据当前是编辑还是添加状态
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).then(() => { //分别调用对应的接口函数（更新或创建）来与后端交互完成相应操作
if (this.isEdit) {
updateSession(this.flashSession.id,this.flashSession).then(response => {
updateSession(this.flashSession.id, this.flashSession).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.dialogVisible = false;
this.getList();
})
} else {
createSession(this.flashSession).then(response => {
this.$message({
message: '添加成功！',
message: '添加成功！', //操作成功后显示相应的提示信息告知用户操作成功
type: 'success'
});
this.dialogVisible =false;
this.getList();
this.dialogVisible = false;
this.getList(); //关闭对话框并重新调用获取列表数据的方法刷新页面展示，以反映最新的数据变化情况
})
}
})
},
// 获取列表数据的方法，用于向服务器请求并获取秒杀时间段的列表数据。
getList() {
this.listLoading = true;
fetchList({}).then(response => {
this.listLoading = false;
this.list = response.data;
this.listLoading = true; //首先将列表数据加载状态设置为true，表示开始获取数据，此时页面上可以根据这个状态显示加载动画等提示信息
fetchList({}).then(response => { //然后调用导入的fetchList函数（不传参数，可能是获取全部时间段数据）向服务器发起请求
this.listLoading = false; //并将加载状态设置为false，表示数据获取完成，停止页面上的加载动画等相关显示
this.list = response.data; //请求成功后将获取到的响应数据中的列表数据部分赋值给组件的list属性
});
}
}
}
}
</script>
<style scoped>
.operate-container {
margin-top: 0;
}
<!-- “scoped”属性表示当前这个style标签内定义的样式作用范围仅限于当前组件内部，避免样式影响到其他组件中同名的类或元素，起到样式隔离的作用，使得样式管理更加清晰和模块化 -->
.operate-container {
<!-- 这是一个CSS选择器，用于选中页面中所有应用了“operate-container”类名的元素，接下来在花括号内定义的样式规则就会应用到这些被选中的元素上 -->
<!-- “margin-top”是CSS的一个属性，用于设置元素的上外边距，也就是该元素距离其上方相邻元素的间隔距离。这里将其值设置为“0”，意味着应用了“operate-container”类名的元素，其上外边距为0像素，能精准控制这类元素在页面垂直方向上的布局位置，使其更贴合设计需求 -->
margin-top: 0;
}
</style>

228
src/views/sms/hot/index.vue
Unescape View File

@ -1,9 +1,14 @@
<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"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮，设置了样式为右浮动、右外边距为15px、点击时触发handleResetSearch方法、按钮大小为小 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,12 +25,18 @@
</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"
@ -35,24 +47,34 @@
</el-form>
</div>
</el-card>
<!-- 操作相关的卡片容器，设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 图标 -->
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 显示“数据列表”文字 -->
<i>数据列表</i>
<!-- 选择商品按钮，设置了按钮大小为迷你、点击时触发handleSelectProduct方法 -->
<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
@ -63,12 +85,15 @@
</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"
@ -83,10 +108,13 @@
</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"
@ -94,6 +122,7 @@
:value="item.value">
</el-option>
</el-select>
<!-- 确定按钮，设置了左外边距为20px、样式类、点击时触发handleBatchOperate方法、类型为主要按钮、大小为小 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -103,7 +132,9 @@
确定
</el-button>
</div>
<!-- 分页容器 -->
<div class="pagination-container">
<!-- el-pagination分页组件，设置了背景色、页面尺寸改变时触发handleSizeChange方法、当前页改变时触发handleCurrentChange方法、布局样式、绑定了当前页、每页显示数量、可选的每页显示数量列表以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -115,27 +146,35 @@
: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"
@ -149,37 +188,49 @@
</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>
import {fetchList,updateRecommendStatus,deleteHotProduct,createHotProduct,updateHotProductSort} from '@/api/hotProduct';
import {fetchList as fetchProductList} from '@/api/product';
// 从'@/api/hotProduct'模块中导入多个函数，这些函数可能用于获取热门产品列表、更新推荐状态、删除热门产品、创建热门产品、更新热门产品排序等操作
import {fetchList, updateRecommendStatus, deleteHotProduct, createHotProduct, updateHotProductSort} from '@/api/hotProduct';
// 从'@/api/product'模块中导入fetchList函数，并将其重命名为fetchProductList，可能用于获取产品列表相关操作
import {fetchList as fetchProductList} from '@/api/product';
const defaultListQuery = {
// 定义默认的列表查询参数对象，包含当前页码、每页数量、商品名称、推荐状态等初始值
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
};
// 定义默认的推荐状态选项数组，每个选项包含显示的标签和对应的值，用于下拉选择等场景
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
@ -188,17 +239,27 @@
label: '推荐中',
value: 1
}
];
export default {
];
// 导出一个Vue组件配置对象，定义了组件的相关属性、方法等
export default {
// 组件的名称
name: 'hotProductList',
data() {
return {
// 列表查询参数，初始化为defaultListQuery的副本，用于存储当前的查询条件
listQuery: Object.assign({}, defaultListQuery),
// 推荐状态选项，初始化为defaultRecommendOptions的副本，用于下拉选择框展示可选的推荐状态
recommendOptions: Object.assign({}, defaultRecommendOptions),
// 存储列表数据，初始为null，后续会赋值为实际获取到的列表内容
list: null,
// 总记录数，初始为null，用于分页相关功能显示总共有多少条记录
total: null,
// 列表加载状态，用于显示加载动画等提示，true表示正在加载，false表示加载完成
listLoading: false,
// 存储多选的记录，用于批量操作等场景，存放选中的行数据
multipleSelection: [],
// 定义批量操作的选项数组，每个选项包含显示的标签和对应的值，用于下拉选择批量要执行的操作类型
operates: [
{
label: "设为推荐",
@ -213,61 +274,76 @@
value: 2
}
],
// 存储当前选择的批量操作类型，初始为null，根据用户在下拉框的选择进行赋值
operateType: null,
selectDialogVisible:false,
dialogData:{
// 选择商品对话框的显示状态，false表示隐藏，true表示显示，用于控制对话框的显示隐藏
selectDialogVisible: false,
// 选择商品对话框相关的数据对象，包含列表数据、总记录数、多选记录以及列表查询参数等
dialogData: {
list: null,
total: null,
multipleSelection:[],
listQuery:{
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
// 设置排序对话框的显示状态，控制其显示隐藏
sortDialogVisible: false,
// 设置排序对话框相关的数据对象，包含排序值和对应的记录id等，用于设置排序操作时的数据传递
sortDialogData: {sort: 0, id: null}
}
},
// 在组件创建时调用的生命周期钩子函数，这里调用了获取列表数据的方法
created() {
this.getList();
},
filters:{
formatRecommendStatus(status){
if(status===1){
// 定义过滤器，用于格式化推荐状态的值，将数字状态转换为对应的文字描述（例如1转换为“推荐中”）
filters: {
formatRecommendStatus(status) {
if (status === 1) {
return '推荐中';
}else{
} else {
return '未推荐';
}
}
},
methods: {
// 处理重置搜索的方法，将列表查询参数重置为默认值
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 处理查询搜索的方法，先将当前页码设置为1，然后调用获取列表数据的方法来重新获取符合条件的数据
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
// 处理表格行选择变化的方法，将多选的记录更新为当前选择的行数据
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 处理每页显示数量变化的方法，先将当前页码重置为1，然后更新每页显示数量，并调用获取列表数据的方法重新获取数据
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);
// 处理推荐状态开关变化的方法，调用更新推荐状态的方法，传入对应记录的id和新的推荐状态值来更新推荐状态
handleRecommendStatusStatusChange(index, row) {
this.updateRecommendStatusStatus(row.id, row.recommendStatus);
},
handleDelete(index,row){
// 处理删除操作的方法，调用删除产品的方法，传入要删除记录的id来执行删除操作
handleDelete(index, row) {
this.deleteProduct(row.id);
},
handleBatchOperate(){
// 处理批量操作的方法
handleBatchOperate() {
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
@ -276,47 +352,53 @@
});
return;
}
let ids = [];
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);
this.updateRecommendStatusStatus(ids, 1);
} else if (this.operateType === 1) {
//取消推荐
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
this.updateRecommendStatusStatus(ids, 0);
} else if (this.operateType === 2) {
//删除
this.deleteProduct(ids);
}else {
this.$message({
} else {
this.$message({ //首先判断是否有选中的记录，如果没有则提示用户选择记录；然后根据选择的批量操作类型
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
handleSelectProduct(){
this.selectDialogVisible=true;
// 处理选择商品的方法，将选择商品对话框设置为显示状态，并调用获取对话框列表数据的方法来加载商品数据
handleSelectProduct() {
this.selectDialogVisible = true;
this.getDialogList();
},
handleSelectSearch(){
// 处理在选择商品对话框中搜索的方法，调用获取对话框列表数据的方法来根据输入的关键词重新加载商品数据
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){
// 处理选择商品对话框中行选择变化的方法，将对话框中多选的记录更新为当前选择的行数据
handleDialogSelectionChange(val) {
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
// 处理选择商品对话框中确定按钮点击的方法，首先判断是否有选中的记录，如果没有则提示用户选择记录；然后将选中的商品数据整理成特定格式，弹出确认框
handleSelectDialogConfirm() {
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
@ -328,18 +410,18 @@
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
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=[];
}).then(() => { //用户确认后调用创建热门产品的方法来添加选中的商品，添加成功后进行相关的界面更新和提示操作
createHotProduct(selectProducts).then(response => {
this.selectDialogVisible = false;
this.dialogData.multipleSelection = [];
this.getList();
this.$message({
type: 'success',
@ -348,19 +430,21 @@
});
});
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
// 处理编辑排序的方法，将设置排序对话框设置为显示状态
handleEditSort(index, row) {
this.sortDialogVisible = true;
this.sortDialogData.sort = row.sort; //并将当前记录的排序值和id赋值给对话框相关的数据对象，用于在对话框中显示和后续更新操作
this.sortDialogData.id = row.id;
},
handleUpdateSort(){
// 处理更新排序的方法
handleUpdateSort() { //弹出确认框询问用户是否确认修改排序，用户确认后调用更新热门产品排序的方法，传入相关数据进行排序更新
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateHotProductSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
}).then(() => { //更新成功后进行对话框隐藏、重新获取列表数据以及提示操作
updateHotProductSort(this.sortDialogData).then(response => {
this.sortDialogVisible = false;
this.getList();
this.$message({
type: 'success',
@ -369,62 +453,66 @@
});
})
},
// 获取列表数据的方法，先将列表加载状态设置为正在加载
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
fetchList(this.listQuery).then(response => { //然后调用fetchList函数传入列表查询参数获取数据
this.listLoading = false;
this.list = response.data.list;
this.list = response.data.list; //获取成功后更新列表数据、总记录数，并将列表加载状态设置为加载完成
this.total = response.data.total;
})
},
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', {
// 更新推荐状态的方法
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=>{
let params = new URLSearchParams(); //用户确认后将传入的记录id和新的推荐状态值整理成URLSearchParams格式
params.append("ids", ids);
params.append("recommendStatus", status);
updateRecommendStatus(params).then(response => { //调用updateRecommendStatus函数进行推荐状态更新
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
message: '修改成功!' //更新成功后重新获取列表数据并提示操作成功；
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
message: '已取消操作!' //如果用户取消操作，也会重新获取列表数据并提示已取消操作
});
this.getList();
});
},
deleteProduct(ids){
this.$confirm('是否要删除该推荐?', '提示', {
// 删除产品的方法
deleteProduct(ids) {
this.$confirm('是否要删除该推荐?', '提示', { //弹出确认框询问用户是否确认删除
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHotProduct(params).then(response=>{
let params = new URLSearchParams(); //用户确认后将传入的记录id整理成URLSearchParams格式
params.append("ids", ids);
deleteHotProduct(params).then(response => { //调用deleteHotProduct函数进行产品删除操作
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
message: '删除成功!' //删除成功后重新获取列表数据并提示删除成功
});
});
})
},
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
// 获取选择商品对话框列表数据的方法
getDialogList() {
fetchProductList(this.dialogData.listQuery).then(response => { //调用fetchProductList函数传入对话框的列表查询参数获取商品数据
this.dialogData.list = response.data.list; //获取成功后更新对话框列表数据和总记录数
this.dialogData.total = response.data.total;
})
}
}
}
}
</script>
<style></style>

161
src/views/sms/new/index.vue
Unescape View File

@ -1,9 +1,14 @@
<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"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮，点击触发handleResetSearch方法，按钮样式为小型，与查询搜索按钮有一定间隔 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,12 +25,18 @@
</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">
<!-- 循环生成下拉选项，每个选项的key、label、value根据recommendOptions中的数据来设置 -->
<el-option v-for="item in recommendOptions"
:key="item.value"
:label="item.label"
@ -35,26 +47,37 @@
</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"
@ -63,18 +86,23 @@
</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)">删除
@ -83,10 +111,13 @@
</el-table-column>
</el-table>
</div>
<!-- 批量操作容器 -->
<div class="batch-operate-container">
<!-- 下拉选择框，用于选择批量操作类型，双向绑定operateType，设置了占位提示文字 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 循环生成下拉选项，每个选项的key、label、value根据operates中的数据来设置 -->
<el-option
v-for="item in operates"
:key="item.value"
@ -94,6 +125,7 @@
:value="item.value">
</el-option>
</el-select>
<!-- 确定按钮，点击触发handleBatchOperate方法，按钮样式为小型、主色调，与下拉选择框有一定间隔 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -103,7 +135,9 @@
确定
</el-button>
</div>
<!-- 分页容器 -->
<div class="pagination-container">
<!-- el-pagination分页组件，设置了背景色，监听页面尺寸改变和当前页改变事件，配置了布局、页面尺寸、可选页面尺寸列表、当前页、总数据量等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -115,27 +149,36 @@
: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"
@ -149,37 +192,49 @@
</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>
import {fetchList,updateRecommendStatus,deleteNewProduct,createNewProduct,updateNewProductSort} from '@/api/newProduct';
import {fetchList as fetchProductList} from '@/api/product';
// 从'@/api/newProduct'模块中导入多个函数，用于获取列表、更新推荐状态、删除新产品、创建新产品、更新新产品排序等操作
import {fetchList,updateRecommendStatus,deleteNewProduct,createNewProduct,updateNewProductSort} from '@/api/newProduct';
// 从'@/api/product'模块中导入名为fetchList的函数，并将其重命名为fetchProductList，用于获取产品列表相关操作
import {fetchList as fetchProductList} from '@/api/product';
const defaultListQuery = {
// 定义默认的列表查询参数对象，包含当前页码、每页数量、商品名称、推荐状态等初始值
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
};
// 定义默认的推荐状态选项数组，每个选项包含显示的标签（如'未推荐'）和对应的值（如0）
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
@ -188,17 +243,25 @@
label: '推荐中',
value: 1
}
];
export default {
];
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: "设为推荐",
@ -213,28 +276,40 @@
value: 2
}
],
// 用于存储当前选择的批量操作类型，初始为null，用户选择后更新
operateType: null,
// 控制选择商品对话框是否可见的布尔值，初始为false，点击相关按钮等操作可改变其值
selectDialogVisible:false,
dialogData:{
// 对话框中展示的列表数据，初始为null，获取后更新
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){
if(status===1){ //根据传入的状态值（1或0）返回对应的文字描述（'推荐中'或'未推荐'）
return '推荐中';
}else{
return '未推荐';
@ -242,31 +317,39 @@
}
},
methods: {
// 处理重置搜索的方法，将列表查询参数重置为默认值（即复制defaultListQuery的内容）
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 处理查询搜索的方法，先将列表查询参数的当前页码重置为1，然后调用getList方法获取最新列表数据
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// 处理表格行选择变化的方法，将用户选择的行数据更新到multipleSelection数组中
handleSelectionChange(val){
this.multipleSelection = val;
},
// 处理页面尺寸改变的方法，当用户切换每页显示数量时，先将当前页码重置为1，再更新列表查询参数中的每页数量，并调用getList方法获取新的数据
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理当前页码改变的方法，当用户切换页码时，更新列表查询参数中的当前页码，并调用getList方法获取对应页码的数据
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// 处理推荐状态改变的方法，调用updateRecommendStatusStatus方法，传入对应行的id和推荐状态值，来更新推荐状态
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
// 处理删除操作的方法，调用deleteProduct方法，传入要删除的产品id，执行删除操作
handleDelete(index,row){
this.deleteProduct(row.id);
},
// 处理批量操作的方法，首先判断用户是否至少选择了一条记录，如果没有则弹出提示并返回
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
@ -276,7 +359,7 @@
});
return;
}
let ids = [];
let ids = []; //然后根据用户选择的批量操作类型（设为推荐、取消推荐、删除等）执行相应的操作逻辑，如调用对应的更新或删除方法，并传递相应的参数
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
@ -297,25 +380,31 @@
});
}
},
// 处理选择商品操作的方法，将选择商品对话框设置为可见，并调用getDialogList方法获取对话框内要展示的列表数据
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
},
// 处理在选择商品对话框内进行搜索的方法，调用getDialogList方法获取符合搜索条件的列表数据
handleSelectSearch(){
this.getDialogList();
},
// 处理选择商品对话框内页面尺寸改变的方法，当用户切换每页显示数量时，先将对话框内列表的当前页码重置为1，再更新对话框列表查询参数中的每页数量，并调用getDialogList方法获取新的数据
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({
@ -325,7 +414,7 @@
});
return;
}
let selectProducts = [];
let selectProducts = []; //然后将用户选择的商品信息整理成数组格式，弹出确认框询问是否添加
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId:this.dialogData.multipleSelection[i].id,
@ -337,10 +426,10 @@
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createNewProduct(selectProducts).then(response=>{
createNewProduct(selectProducts).then(response=>{ //用户确认后调用createNewProduct方法创建新产品，创建成功后关闭对话框、清空选择记录
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.getList(); //并重新获取列表数据，同时弹出成功提示
this.$message({
type: 'success',
message: '添加成功!'
@ -348,20 +437,22 @@
});
});
},
// 处理编辑排序操作的方法，将设置排序对话框设置为可见
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
this.sortDialogData.id=row.id; //并将对应行的当前排序值和id赋值给对话框的数据对象，方便后续修改操作
},
// 处理更新排序的方法
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', {
this.$confirm('是否要修改排序?', '提示', { //弹出确认框询问是否修改排序
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateNewProductSort(this.sortDialogData).then(response=>{
updateNewProductSort(this.sortDialogData).then(response=>{ //用户确认后调用updateNewProductSort方法传入排序对话框的数据对象进行排序更新，更新成功后关闭对话框
this.sortDialogVisible=false;
this.getList();
this.getList(); //重新获取列表数据，同时弹出成功提示
this.$message({
type: 'success',
message: '删除成功!'
@ -369,48 +460,51 @@
});
})
},
// 获取列表数据的方法
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
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('是否要修改推荐状态?', '提示', {
this.$confirm('是否要修改推荐状态?', '提示', { //弹出确认框询问是否修改推荐状态
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
let params=new URLSearchParams(); //用户确认后将传入的产品id（或多个id组成的数组）和推荐状态值封装成URLSearchParams格式
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{
this.getList();
updateRecommendStatus(params).then(response=>{ //调用updateRecommendStatus方法进行状态更新
this.getList(); //更新成功后重新获取列表数据，并弹出成功提示；
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
this.$message({ //如果用户取消操作，也会重新获取列表数据并弹出相应提示
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
// 删除产品的方法
deleteProduct(ids){
this.$confirm('是否要删除该推荐?', '提示', {
this.$confirm('是否要删除该推荐?', '提示', { //弹出确认框询问是否删除
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
let params=new URLSearchParams(); //用户确认后将传入的产品id（或多个id组成的数组）封装成URLSearchParams格式
params.append("ids",ids);
deleteNewProduct(params).then(response=>{
this.getList();
deleteNewProduct(params).then(response=>{ //调用deleteNewProduct方法执行删除操作
this.getList(); //删除成功后重新获取列表数据，并弹出成功提示
this.$message({
type: 'success',
message: '删除成功!'
@ -418,13 +512,14 @@
});
})
},
// 获取选择商品对话框内列表数据的方法
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
fetchProductList(this.dialogData.listQuery).then(response=>{ //调用fetchProductList方法传入对话框的列表查询参数获取数据
this.dialogData.list=response.data.list; //获取成功后更新对话框内的列表数据和总条数
this.dialogData.total=response.data.total;
})
}
}
}
}
</script>
<style></style>

246
src/views/sms/subject/index.vue
Unescape View File

@ -1,9 +1,14 @@
<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"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- el-button按钮组件，样式设置为右浮动且距离右边距15px，点击时调用handleResetSearch方法，按钮大小为"small"，用于重置相关操作 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,12 +25,18 @@
</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"
@ -35,24 +47,34 @@
</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
@ -63,12 +85,15 @@
</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"
@ -83,10 +108,13 @@
</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"
@ -94,6 +122,7 @@
:value="item.value">
</el-option>
</el-select>
<!-- el-button按钮组件，距离左边距20px，样式类名为"search-button"，点击时调用handleBatchOperate方法，按钮类型为"primary"（主要按钮样式），按钮尺寸为"small"，用于确定批量操作 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -103,7 +132,9 @@
确定
</el-button>
</div>
<!-- 作为分页区域的容器 -->
<div class="pagination-container">
<!-- el-pagination分页组件，设置背景色，监听页面尺寸变化和当前页变化事件，设置分页布局样式，绑定每页显示数量、可选的每页显示数量数组、当前页码以及总数据量等相关属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -115,27 +146,35 @@
: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"
@ -149,38 +188,50 @@
</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>
import {fetchList,updateRecommendStatus,deleteHomeSubject,createHomeSubject,updateHomeSubjectSort} from '@/api/homeSubject';
import {fetchList as fetchSubjectList} from '@/api/subject';
import {formatDate} from '@/utils/date';
// 从'@/api/homeSubject'模块中导入多个函数，用于获取列表、更新推荐状态、删除主题、创建主题以及更新主题排序等操作
import {fetchList,updateRecommendStatus,deleteHomeSubject,createHomeSubject,updateHomeSubjectSort} from '@/api/homeSubject';
// 从'@/api/subject'模块中导入fetchList函数，并将其重命名为fetchSubjectList，用于获取相关主题列表
import {fetchList as fetchSubjectList} from '@/api/subject';
// 从'@/utils/date'模块中导入formatDate函数，用于格式化日期
import {formatDate} from '@/utils/date';
const defaultListQuery = {
// 定义默认的列表查询参数对象，包含页码、每页数量、专题名称、推荐状态等初始值
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
subjectName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
};
// 定义默认的推荐状态选项数组，每个元素包含显示标签和对应的值，用于下拉选择等场景
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
@ -189,17 +240,25 @@
label: '推荐中',
value: 1
}
];
export default {
];
export default {
name: 'homeSubjectList',
data() {
return {
// 用于存储当前列表查询的参数，初始化为defaultListQuery的副本，方便后续修改和重置
listQuery: Object.assign({}, defaultListQuery),
// 存储推荐状态的选项列表，初始化为defaultRecommendOptions的副本
recommendOptions: Object.assign({}, defaultRecommendOptions),
// 用于存储获取到的列表数据，初始值为null，后续会赋值为实际数据
list: null,
// 用于存储列表数据的总条数，初始值为null，获取数据后更新
total: null,
// 用于标识列表数据是否正在加载的布尔值，true表示正在加载，初始为false
listLoading: false,
// 存储当前多选的记录数据，初始为空数组，在表格行多选操作时更新
multipleSelection: [],
// 定义批量操作的选项数组，每个元素包含操作的显示标签和对应的值，如设为推荐、取消推荐、删除等
operates: [
{
label: "设为推荐",
@ -214,35 +273,43 @@
value: 2
}
],
// 用于存储当前选择的批量操作类型，初始值为null，用户选择后更新
operateType: null,
selectDialogVisible:false,
dialogData:{
// 控制选择专题对话框是否显示的布尔值，初始为false，点击相关按钮时设置为true来显示对话框
selectDialogVisible: false,
// 存储对话框相关的数据对象，包含列表数据、总条数、多选记录以及列表查询参数等
dialogData: {
list: null,
total: null,
multipleSelection:[],
listQuery:{
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
// 控制设置排序对话框是否显示的布尔值，初始为false，点击相关按钮时设置为true来显示对话框
sortDialogVisible: false,
// 存储设置排序对话框相关的数据对象，包含排序值和对应的记录id等
sortDialogData: { sort: 0, id: null }
}
},
created() {
// 在组件创建时调用getList方法，用于获取初始的列表数据
this.getList();
},
filters:{
formatRecommendStatus(status){
if(status===1){
filters: {
// 过滤器函数，用于格式化推荐状态值，将数字状态转换为对应的文字描述（1转换为"推荐中"，其他为"未推荐"）
formatRecommendStatus(status) {
if (status === 1) {
return '推荐中';
}else{
} else {
return '未推荐';
}
},
formatTime(time){
if(time==null||time===''){
// 过滤器函数，用于格式化时间数据，如果时间为空则返回"N/A"，否则按照指定格式进行格式化
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
@ -250,33 +317,42 @@
},
},
methods: {
// 处理重置搜索的方法，将列表查询参数重置为默认值（defaultListQuery的副本）
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 处理查询搜索的方法，先将页码重置为1，然后调用getList方法获取符合查询条件的列表数据
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
// 处理表格行选择变化的方法，更新multipleSelection数组，使其存储当前选中的行数据
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 处理每页显示数量变化的方法，重置页码为1，更新每页显示数量为传入的值，然后调用getList方法重新获取列表数据
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理当前页码变化的方法，更新列表查询参数中的页码为传入的值，然后调用getList方法获取对应页码的数据
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
// 处理推荐状态开关变化的方法，调用updateRecommendStatusStatus方法，传入当前行的id和推荐状态值，用于更新推荐状态
handleRecommendStatusStatusChange(index, row) {
this.updateRecommendStatusStatus(row.id, row.recommendStatus);
},
handleDelete(index,row){
// 处理删除操作的方法，调用deleteSubject方法，传入要删除记录的id，用于删除对应的主题数据
handleDelete(index, row) {
this.deleteSubject(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
// 处理批量操作的方法
// 调用相应的方法处理选中的记录；如果未选择操作类型则提示用户选择类型
handleBatchOperate() {
if (this.multipleSelection < 1) { //首先判断是否选择了记录，如果没有则提示用户选择；
this.$message({
message: '请选择一条记录',
type: 'warning',
@ -284,20 +360,20 @@
});
return;
}
let ids = [];
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);
this.updateRecommendStatusStatus(ids, 1);
} else if (this.operateType === 1) {
//取消推荐
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
this.updateRecommendStatusStatus(ids, 0);
} else if (this.operateType === 2) {
//删除
this.deleteSubject(ids);
}else {
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
@ -305,27 +381,33 @@
});
}
},
handleSelectSubject(){
this.selectDialogVisible=true;
this.dialogData.listQuery.keyword=null;
this.getDialogList();
// 处理选择专题操作的方法，将选择专题对话框设置为显示状态，清空对话框中的搜索关键词
handleSelectSubject() {
this.selectDialogVisible = true;
this.dialogData.listQuery.keyword = null;
this.getDialogList();//然后调用getDialogList方法获取对话框中的列表数据
},
handleSelectSearch(){
this.getDialogList();
// 处理对话框内搜索操作的方法
handleSelectSearch() {
this.getDialogList(); //调用getDialogList方法获取符合搜索条件的对话框中的列表数据
},
// 处理对话框内每页显示数量变化的方法
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageNum = 1; //重置对话框列表查询参数中的页码为1，更新每页显示数量为传入的值
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
this.getDialogList(); //然后调用getDialogList方法重新获取列表数据
},
// 处理对话框内当前页码变化的方法，更新对话框列表查询参数中的页码为传入的值
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
this.getDialogList(); //然后调用getDialogList方法获取对应页码的数据
},
handleDialogSelectionChange(val){
// 处理对话框内行选择变化的方法，更新对话框中存储多选记录的数组，使其存储当前选中的行数据
handleDialogSelectionChange(val) {
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
// 处理对话框确认操作的方法，首先判断是否选择了记录，如果没有则提示用户选择；然后将选中的记录整理成特定格式的数组，
handleSelectDialogConfirm() {
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
@ -337,8 +419,8 @@
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
subjectId: this.dialogData.multipleSelection[i].id,
subjectName: this.dialogData.multipleSelection[i].title
});
}
this.$confirm('使用要进行添加操作?', '提示', {
@ -346,9 +428,9 @@
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createHomeSubject(selectSubjects).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
createHomeSubject(selectSubjects).then(response => { //// 弹出确认框让用户确认添加操作，确认后调用createHomeSubject方法创建主题数据，操作成功后关闭对话框、清空多选记录并更新列表数据，同时显示成功提示信息
this.selectDialogVisible = false;
this.dialogData.multipleSelection = [];
this.getList();
this.$message({
type: 'success',
@ -357,83 +439,89 @@
});
});
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
// 处理编辑排序操作的方法，将设置排序对话框设置为显示状态
handleEditSort(index, row) {
this.sortDialogVisible = true;
this.sortDialogData.sort = row.sort;
this.sortDialogData.id = row.id; //将当前行的排序值和id赋值给对话框对应的数据对象，用于展示和后续更新操作
},
handleUpdateSort(){
// 处理更新排序的方法，弹出确认框让用户确认修改排序操作
handleUpdateSort() {
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateHomeSubjectSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
updateHomeSubjectSort(this.sortDialogData).then(response => { //确认后调用updateHomeSubjectSort方法更新排序数据
this.sortDialogVisible = false;
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
message: '删除成功!' //确认后调用updateHomeSubjectSort方法更新排序数据
});
});
})
},
// 获取列表数据的方法
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
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('是否要修改推荐状态?', '提示', {
// 更新推荐状态的方法
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=>{
let params = new URLSearchParams(); //确认后构建URLSear的chParams对象传递要更新记录id和目标推荐状态值
params.append("ids", ids);
params.append("finalRecommendStatus", status);
updateRecommendStatus(params).then(response => { //// 调用updateRecommendStatus函数进行更新操作
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
message: '修改成功!' //操作成功后更新列表数据并显示成功提示信息；
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
message: '已取消操作!' //如果取消操作则显示已取消操作的提示信息并更新列表数据
});
this.getList();
});
},
deleteSubject(ids){
this.$confirm('是否要删除该推荐?', '提示', {
// 删除主题的方法
deleteSubject(ids) {
this.$confirm('是否要删除该推荐?', '提示', { //弹出确认框让用户确认是否删除主题数据
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHomeSubject(params).then(response=>{
let params = new URLSearchParams(); //确认后构建URLSearchParams对象传递要删除的记录id
params.append("ids", ids);
deleteHomeSubject(params).then(response => { //// 调用deleteHomeSubject函数进行删除操作
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
message: '删除成功!' //操作成功后更新列表数据并显示成功提示信息
});
});
})
},
getDialogList(){
fetchSubjectList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
// 获取对话框列表数据的方法
getDialogList() {
fetchSubjectList(this.dialogData.listQuery).then(response => { //调用fetchSubjectList函数，传入对话框的列表查询参数
this.dialogData.list = response.data.list; //获取成功后更新对话框中的列表数据和总条数
this.dialogData.total = response.data.total;
})
}
}
}
}
</script>
<style></style>

Write Preview
Loading…
Cancel
Save