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

3 #3

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

27
sms/advertise/add.vue
Unescape View File

@ -0,0 +1,27 @@
<template>
<home-advertise-detail :isEdit="false"></home-advertise-detail>
</template>
<script>
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
export default {
name: 'addHomeAdvertise',
components: { HomeAdvertiseDetail }
}
</script>
<style></style>
#abc
<template>
<!-- 使用HomeAdvertiseDetail组件，并传递isEdit属性为false -->
<home-advertise-detail :isEdit="false"></home-advertise-detail>
</template>
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail' // 导入HomeAdvertiseDetail组件
export default {
name: 'addHomeAdvertise', // 定义当前组件的名称为addHomeAdvertise
components: { HomeAdvertiseDetail } // 注册HomeAdvertiseDetail组件
}
<style></style> <!-- 空的样式标签 -->

421
sms/advertise/components/HomeAdvertiseDetail.vue
Unescape View File

@ -0,0 +1,421 @@
<template>
<el-card class="form-container" shadow="never">
<el-form :model="homeAdvertise"
:rules="rules"
ref="homeAdvertiseFrom"
label-width="150px"
size="small">
<el-form-item label="广告名称：" prop="name">
<el-input v-model="homeAdvertise.name" class="input-width"></el-input>
</el-form-item>
<el-form-item label="广告位置：">
<el-select v-model="homeAdvertise.type">
<el-option
v-for="type in typeOptions"
:key="type.value"
:label="type.label"
:value="type.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="开始时间：" prop="startTime">
<el-date-picker
type="datetime"
placeholder="选择日期"
v-model="homeAdvertise.startTime"></el-date-picker>
</el-form-item>
<el-form-item label="到期时间：" prop="endTime">
<el-date-picker
type="datetime"
placeholder="选择日期"
v-model="homeAdvertise.endTime"></el-date-picker>
</el-form-item>
<el-form-item label="上线/下线：">
<el-radio-group v-model="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>
</el-form-item>
<el-form-item label="排序：">
<el-input v-model="homeAdvertise.sort" class="input-width"></el-input>
</el-form-item>
<el-form-item label="广告链接：" prop="url">
<el-input v-model="homeAdvertise.url" class="input-width"></el-input>
</el-form-item>
<el-form-item label="广告备注：">
<el-input
class="input-width"
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="homeAdvertise.note">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('homeAdvertiseFrom')">提交</el-button>
<el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
import SingleUpload from '@/components/Upload/singleUpload'
import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise'
const defaultTypeOptions = [
{
label: 'PC首页轮播',
value: 0
},
{
label: 'APP首页轮播',
value: 1
}
];
const defaultHomeAdvertise = {
name: null,
type: 1,
pic: null,
startTime: null,
endTime: null,
status: 0,
url: null,
note: null,
sort: 0
};
export default {
name: 'HomeAdvertiseDetail',
components:{SingleUpload},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
homeAdvertise: null,
rules: {
name: [
{required: true, message: '请输入广告名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
url: [
{required: true, message: '请输入广告链接', trigger: 'blur'}
],
startTime: [
{required: true, message: '请选择开始时间', trigger: 'blur'}
],
endTime: [
{required: true, message: '请选择到期时间', trigger: 'blur'}
],
pic: [
{required: true, message: '请选择广告图片', trigger: 'blur'}
]
},
typeOptions: Object.assign({}, defaultTypeOptions)
}
},
created(){
if (this.isEdit) {
getHomeAdvertise(this.$route.query.id).then(response => {
this.homeAdvertise = response.data;
});
}else{
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
}
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateHomeAdvertise(this.$route.query.id, this.homeAdvertise).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration:1000
});
this.$router.back();
});
} else {
createHomeAdvertise(this.homeAdvertise).then(response => {
this.$refs[formName].resetFields();
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
this.$message({
message: '提交成功',
type: 'success',
duration:1000
});
});
}
});
} else {
this.$message({
message: '验证失败',
type: 'error',
duration:1000
});
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
}
}
}
</script>
<style scoped>
.input-width {
width: 70%;
}
</style>
#abc
<template>
<!-- 使用el-card组件创建一个卡片式的容器，设置其类名为form-container，并且阴影效果为never（即无阴影） -->
<el-card class="form-container" shadow="never">
<!-- 使用el-form组件创建表单，绑定数据模型为homeAdvertise，设置表单验证规则为rules，
给表单设置ref属性用于后续在JavaScript中获取表单实例，标签宽度为150px，表单尺寸为small -->
<el-form :model="homeAdvertise"
:rules="rules"
ref="homeAdvertiseFrom"
label-width="150px"
size="small">
<!-- el-form-item用于定义表单中的每一项，这里的标签显示为“广告名称：”，并通过prop属性关联对应的验证规则 -->
<el-form-item label="广告名称：" prop="name">
<!-- el-input组件用于输入文本，通过v-model双向绑定数据到homeAdvertise对象的name属性，设置类名为input-width -->
<el-input v-model="homeAdvertise.name" class="input-width"></el-input>
</el-form-item>
<!-- 另一个el-form-item，标签显示为“广告位置：” -->
<el-form-item label="广告位置：">
<!-- el-select组件用于创建下拉选择框，通过v-model双向绑定数据到homeAdvertise对象的type属性 -->
<el-select v-model="homeAdvertise.type">
<!-- 通过v-for循环遍历typeOptions数组来生成el-option选项，每个选项的key、label、value分别对应相应的属性值 -->
<el-option
v-for="type in typeOptions"
:key="type.value"
:label="type.label"
:value="type.value">
</el-option>
</el-select>
</el-form-item>
<!-- el-form-item用于“开始时间”这一项，标签显示为“开始时间：”，并通过prop关联对应的验证规则 -->
<el-form-item label="开始时间：" prop="startTime">
<!-- el-date-picker组件用于选择日期和时间，类型设置为datetime（即日期时间选择器），
占位文本为“选择日期”，通过v-model双向绑定数据到homeAdvertise对象的startTime属性 -->
<el-date-picker
type="datetime"
placeholder="选择日期"
v-model="homeAdvertise.startTime"></el-date-picker>
</el-form-item>
<!-- 类似的，这是“到期时间”对应的el-form-item -->
<el-form-item label="到期时间：" prop="endTime">
<!-- el-date-picker用于选择到期时间，同样是日期时间选择器，绑定到homeAdvertise对象的endTime属性 -->
<el-date-picker
type="datetime"
placeholder="选择日期"
v-model="homeAdvertise.endTime"></el-date-picker>
</el-form-item>
<!-- el-form-item用于“上线/下线”这一项 -->
<el-form-item label="上线/下线：">
<!-- el-radio-group组件用于创建单选按钮组，通过v-model双向绑定数据到homeAdvertise对象的status属性 -->
<el-radio-group v-model="homeAdvertise.status">
<!-- 定义一个单选按钮，标签为“下线”，值为0 -->
<el-radio :label="0">下线</el-radio>
<!-- 定义另一个单选按钮，标签为“上线”，值为1 -->
<el-radio :label="1">上线</el-radio>
</el-radio-group>
</el-form-item>
<!-- “广告图片”对应的el-form-item -->
<el-form-item label="广告图片：">
<!-- 引入了一个名为single-upload的自定义组件，通过v-model双向绑定数据到homeAdvertise对象的pic属性 -->
<single-upload v-model="homeAdvertise.pic"></single-upload>
</el-form-item>
<!-- “排序”对应的el-form-item -->
<el-form-item label="排序：">
<!-- el-input组件用于输入排序相关的数值，绑定到homeAdvertise对象的sort属性，设置类名为input-width -->
<el-input v-model="homeAdvertise.sort" class="input-width"></el-input>
</el-form-item>
<!-- “广告链接”对应的el-form-item，通过prop关联对应的验证规则 -->
<el-form-item label="广告链接：" prop="url">
<!-- el-input组件用于输入广告链接文本，绑定到homeAdvertise对象的url属性，设置类名为input-width -->
<el-input v-model="homeAdvertise.url" class="input-width"></el-input>
</el-form-item>
<!-- “广告备注”对应的el-form-item -->
<el-form-item label="广告备注：">
<!-- el-input组件用于输入多行文本（设置为textarea类型），设置行数为5，占位文本为“请输入内容”，
绑定到homeAdvertise对象的note属性 -->
<el-input
class="input-width"
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="homeAdvertise.note">
</el-input>
</el-form-item>
<!-- 一个普通的el-form-item，用于放置按钮等操作元素 -->
<el-form-item>
<!-- el-button组件，按钮类型为primary（主要按钮样式），点击时调用onSubmit方法并传入'homeAdvertiseFrom'参数 -->
<el-button type="primary" @click="onSubmit('homeAdvertiseFrom')">提交</el-button>
<!-- 条件渲染的el-button，当!isEdit为真（即处于非编辑状态）时显示，点击时调用resetForm方法并传入'homeAdvertiseFrom'参数 -->
<el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
// 引入名为SingleUpload的自定义组件，路径为'@/components/Upload/singleUpload'
import SingleUpload from '@/components/Upload/singleUpload'
// 从'@/api/homeAdvertise'模块中引入createHomeAdvertise、getHomeAdvertise、updateHomeAdvertise这几个函数
import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise'
// 定义默认的广告位置选项数组，包含两个对象，分别表示不同的广告位置及其对应的值
const defaultTypeOptions = [
{
label: 'PC首页轮播',
value: 0
},
{
label: 'APP首页轮播',
value: 1
}
];
// 定义默认的homeAdvertise对象，设置各个属性的初始值，如名称、类型、图片、时间等属性的默认值
const defaultHomeAdvertise = {
name: null,
type: 1,
pic: null,
startTime: null,
endTime: null,
status: 0,
url: null,
note: null,
sort: 0
};
export default {
name: 'HomeAdvertiseDetail',
components:{SingleUpload},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
// 用于存储广告相关信息的对象，初始值会根据是否编辑来确定
homeAdvertise: null,
rules: {
name: [
// 对广告名称的验证规则，设置为必填项，当失去焦点时触发验证，提示消息为“请输入广告名称”
{required: true, message: '请输入广告名称', trigger: 'blur'},
// 广告名称长度限制在2到140个字符之间，触发验证条件同样是失去焦点
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
url: [
// 广告链接为必填项，失去焦点时触发验证，提示“请输入广告链接”
{required: true, message: '请输入广告链接', trigger: 'blur'}
],
startTime: [
// 开始时间为必填项，失去焦点时触发验证，提示“请选择开始时间”
{required: true, message: '请选择开始时间', trigger: 'blur'}
],
endTime: [
// 到期时间为必填项，失去焦点时触发验证，提示“请选择到期时间”
{required: true, message: '请选择到期时间', trigger: 'blur'}
],
pic: [
// 广告图片为必填项，失去焦点时触发验证，提示“请选择广告图片”
{required: true, message: '请选择广告图片', trigger: 'blur'}
]
},
typeOptions: Object.assign({}, defaultTypeOptions)
}
},
created(){
// 判断是否处于编辑状态
if (this.isEdit) {
// 如果是编辑状态，调用getHomeAdvertise函数获取广告信息，传入路由查询参数中的id，
// 获取成功后将返回的数据赋值给homeAdvertise对象
getHomeAdvertise(this.$route.query.id).then(response => {
this.homeAdvertise = response.data;
});
}else{
// 如果不是编辑状态，将默认的homeAdvertise对象赋值给当前的homeAdvertise对象，用于初始化表单数据
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
}
},
methods: {
onSubmit(formName) {
// 调用表单实例的validate方法进行表单验证，传入一个回调函数，该函数接收验证结果valid作为参数
this.$refs[formName].validate((valid) => {
if (valid) {
// 如果验证通过，弹出确认框询问是否提交数据，设置确认按钮文本、取消按钮文本以及提示框类型
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
// 如果处于编辑状态，调用updateHomeAdvertise函数更新广告信息，传入路由查询参数中的id以及当前的homeAdvertise对象数据，
// 更新成功后重置表单字段，显示成功提示消息，并返回上一页
updateHomeAdvertise(this.$route.query.id, this.homeAdvertise).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration:1000
});
this.$router.back();
});
} else {
// 如果不是编辑状态，调用createHomeAdvertise函数创建新的广告信息，传入当前的homeAdvertise对象数据，
// 创建成功后重置表单字段，将homeAdvertise对象重置为默认值，显示成功提示消息
createHomeAdvertise(this.homeAdvertise).then(response => {
this.$refs[formName].resetFields();
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
this.$message({
message: '提交成功',
type: 'success',
duration:1000
});
});
}
});
} else {
// 如果验证失败，显示错误提示消息
this.$message({
message: '验证失败',
type: 'error',
duration:1000
});
return false;
}
});
},
resetForm(formName) {
// 调用表单实例的resetFields方法重置表单字段，同时将homeAdvertise对象重置为默认值
this.$refs[formName].resetFields();
this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
}
}
}
</script>
<style scoped>
/* 定义类名为input-width的样式，设置宽度为70% */
.input-width {
width: 70%;
}
</style>

637
sms/advertise/index.vue
Unescape View File

@ -0,0 +1,637 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="广告名称：">
<el-input v-model="listQuery.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"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="到期时间：">
<el-date-picker
class="input-width"
v-model="listQuery.endTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-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
@change="handleUpdateStatus(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<el-table-column label="点击次数" width="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)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {fetchList,updateStatus,deleteHomeAdvertise} from '@/api/homeAdvertise';
import {formatDate} from '@/utils/date';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
name: null,
type: null,
endTime:null
};
const defaultTypeOptions = [
{
label: 'PC首页轮播',
value: 0
},
{
label: 'APP首页轮播',
value: 1
}
];
export default {
name: 'homeAdvertiseList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
typeOptions: Object.assign({}, defaultTypeOptions),
list: null,
total: null,
listLoading: false,
multipleSelection: [],
operates: [
{
label: "删除",
value: 0
}
],
operateType: null
}
},
created() {
this.getList();
},
filters:{
formatType(type){
if(type===1){
return 'APP首页轮播';
}else{
return 'PC首页轮播';
}
},
formatTime(time){
if(time==null||time===''){
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleUpdateStatus(index,row){
this.$confirm('是否要修改上线/下线状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id,{status:row.status}).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
handleDelete(index,row){
this.deleteHomeAdvertise(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if(this.operateType===0){
//删除
this.deleteHomeAdvertise(ids);
}else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
handleAdd(){
this.$router.push({path: '/sms/addAdvertise'})
},
handleUpdate(index,row){
this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
deleteHomeAdvertise(ids){
this.$confirm('是否要删除该广告?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHomeAdvertise(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
}
}
}
</script>
<style scoped>
.input-width {
width: 203px;
}
</style>
#abc
<template>
<!-- 定义一个Vue组件的模板部分，根元素是一个class为app-container的div -->
<div class="app-container">
<!-- 使用Element UI的el-card组件创建一个筛选搜索的容器，设置阴影效果为never -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用Element UI的图标组件，展示搜索图标 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索的文字说明 -->
<span>筛选搜索</span>
<!-- 使用Element UI的按钮组件，设置样式为右浮动，类型为主要按钮，绑定点击事件handleSearchList，按钮大小为small，用于查询搜索操作 -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 使用Element UI的按钮组件，设置样式为右浮动且距右侧15px，绑定点击事件handleResetSearch，按钮大小为small，用于重置操作 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 使用Element UI的表单组件，设置为行内表单，绑定数据模型为listQuery，表单尺寸为small，标签宽度为140px -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单中的一个表单项，用于输入广告名称，绑定v-model到listQuery.name，设置输入框样式类为input-width，并设置占位文本 -->
<el-form-item label="广告名称：">
<el-input v-model="listQuery.name" class="input-width" placeholder="广告名称"></el-input>
</el-form-item>
<!-- 表单中的一个表单项，用于选择广告位置，绑定v-model到listQuery.type，设置占位文本为全部，可清空，样式类为input-width -->
<el-form-item label="广告位置：">
<el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
<!-- 循环遍历typeOptions数组生成下拉选项，每个选项根据对应的item设置key、label和value属性 -->
<el-option v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 表单中的一个表单项，用于选择到期时间，绑定v-model到listQuery.endTime，设置日期格式为yyyy-MM-dd，类型为日期选择器，设置占位文本 -->
<el-form-item label="到期时间：">
<el-date-picker
class="input-width"
v-model="listQuery.endTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 使用Element UI的el-card组件创建一个操作相关的容器，设置阴影效果为never -->
<el-card class="operate-container" shadow="never">
<!-- 使用Element UI的图标组件，展示票务图标 -->
<i class="el-icon-tickets"></i>
<!-- 显示数据列表的文字说明 -->
<span>数据列表</span>
<!-- 使用Element UI的按钮组件，设置按钮大小为mini，样式类为btn-add，绑定点击事件handleAdd，用于添加广告操作 -->
<el-button size="mini" class="btn-add" @click="handleAdd()">添加广告</el-button>
</el-card>
<!-- 定义一个用于放置表格的容器div -->
<div class="table-container">
<!-- 使用Element UI的el-table组件展示数据表格，绑定数据为list，设置宽度为100%，监听选择改变事件handleSelectionChange，根据listLoading控制加载状态，设置表格边框 -->
<el-table ref="homeAdvertiseTable"
: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>
<!-- 定义一个广告名称列，内容居中对齐，通过插槽作用域展示对应行数据的name属性 -->
<el-table-column label="广告名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 定义一个广告位置列，设置宽度为120px，内容居中对齐，通过插槽作用域展示经过formatType过滤器处理后的对应行数据的type属性 -->
<el-table-column label="广告位置" width="120" align="center">
<template slot-scope="scope">{{scope.row.type | formatType}}</template>
</el-table-column>
<!-- 定义一个广告图片列，设置宽度为120px，内容居中对齐，通过插槽作用域展示对应行数据的pic属性对应的图片，设置图片高度为80px -->
<el-table-column label="广告图片" width="120" align="center">
<template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
</el-table-column>
<!-- 定义一个时间列，设置宽度为220px，内容居中对齐，通过插槽作用域展示对应行数据的开始时间和到期时间，经过formatTime过滤器处理 -->
<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>
<!-- 定义一个上线/下线列，设置宽度为120px，内容居中对齐，通过插槽作用域使用el-switch组件来切换对应行数据的status属性，绑定相关的事件和属性值 -->
<el-table-column label="上线/下线" width="120" align="center">
<template slot-scope="scope">
<el-switch
@change="handleUpdateStatus(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<!-- 定义一个点击次数列，设置宽度为120px，内容居中对齐，通过插槽作用域展示对应行数据的clickCount属性 -->
<el-table-column label="点击次数" width="120" align="center">
<template slot-scope="scope">{{scope.row.clickCount}}</template>
</el-table-column>
<!-- 定义一个生成订单列，设置宽度为120px，内容居中对齐，通过插槽作用域展示对应行数据的orderCount属性 -->
<el-table-column label="生成订单" width="120" align="center">
<template slot-scope="scope">{{scope.row.orderCount}}</template>
</el-table-column>
<!-- 定义一个操作列，设置宽度为120px，内容居中对齐，通过插槽作用域使用按钮组件实现编辑和删除操作，绑定对应的点击事件 -->
<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)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 定义一个用于批量操作的容器div -->
<div class="batch-operate-container">
<!-- 使用Element UI的el-select组件创建一个下拉选择框，绑定v-model到operateType，设置占位文本为批量操作 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 循环遍历operates数组生成下拉选项，每个选项根据对应的item设置key、label和value属性 -->
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 使用Element UI的按钮组件，设置距左侧20px的样式，样式类为search-button，绑定点击事件handleBatchOperate，类型为主要按钮，按钮大小为small，用于确定批量操作 -->
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- 定义一个用于放置分页组件的容器div -->
<div class="pagination-container">
<!-- 使用Element UI的el-pagination组件实现分页功能，设置背景色，监听页面尺寸改变事件handleSizeChange、当前页改变事件handleCurrentChange，设置相关的布局、页面尺寸、可选页面尺寸、当前页、总数据量等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 从@/api/homeAdvertise模块中导入fetchList、updateStatus、deleteHomeAdvertise函数，用于获取列表、更新状态、删除广告等操作
import {fetchList, updateStatus, deleteHomeAdvertise} from '@/api/homeAdvertise';
// 从@/utils/date模块中导入formatDate函数，用于格式化日期
import {formatDate} from '@/utils/date';
// 定义默认的列表查询参数对象，包含页码、每页数量、广告名称、广告类型、到期时间等初始值
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
name: null,
type: null,
endTime: null
};
// 定义默认的广告类型选项数组，每个元素包含label（显示文本）和value（对应的值）属性，用于下拉选择广告位置
const defaultTypeOptions = [
{
label: 'PC首页轮播',
value: 0
},
{
label: 'APP首页轮播',
value: 1
}
];
export default {
name: 'homeAdvertiseList',
data() {
return {
// 列表查询参数，初始化为defaultListQuery的副本，用于存储当前的查询条件
listQuery: Object.assign({}, defaultListQuery),
// 广告类型选项，初始化为defaultTypeOptions的副本，用于下拉选择广告位置
typeOptions: Object.assign({}, defaultTypeOptions),
// 存储获取到的广告列表数据
list: null,
// 存储总数据量，用于分页组件显示总条数等
total: null,
// 用于控制表格数据加载时的加载状态显示
listLoading: false,
// 存储多选的行数据，用于批量操作等场景
multipleSelection: [],
// 定义批量操作的选项数组，目前只有一个删除操作选项，每个元素包含label和value属性
operates: [
{
label: "删除",
value: 0
}
],
// 存储当前选择的批量操作类型
operateType: null
}
},
created() {
// 在组件创建时调用getList方法获取广告列表数据
this.getList();
},
filters: {
// 定义一个名为formatType的过滤器，用于将数字类型的广告位置值转换为对应的文字描述
formatType(type) {
if (type === 1) {
return 'APP首页轮播';
} else {
return 'PC首页轮播';
}
},
// 定义一个名为formatTime的过滤器，用于将时间数据格式化为指定的字符串格式，如果时间为空则返回'N/A'
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
// 重置搜索条件的方法，将listQuery重置为默认的查询参数
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();
},
// 处理修改上线/下线状态的方法，弹出确认框询问是否修改，根据用户确认或取消操作进行相应处理，成功修改后重新获取广告列表数据并显示提示信息
handleUpdateStatus(index, row) {
this.$confirm('是否要修改上线/下线状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
// 处理删除单条广告的方法，调用deleteHomeAdvertise方法传入广告id进行删除操作
handleDelete(index, row) {
this.deleteHomeAdvertise(row.id);
},
// 处理批量操作的方法，先判断是否有选中的记录，如果没有则提示用户选择记录；如果选择了批量操作类型为删除，则调用deleteHomeAdvertise方法传入选中记录的id数组进行删除操作，否则提示用户选择批量操作类型
handleBatchOperate() {
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//删除
this.deleteHomeAdvertise(ids);
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
// 处理添加广告的方法，通过路由跳转至添加广告的页面（路径为/sms/addAdvertise）
handleAdd() {
this.$router.push({path: '/sms/addAdvertise'})
},
// 处理编辑广告的方法，通过路由跳转至编辑广告的页面（路径为/sms/updateAdvertise），并传递广告id作为查询参数

32
sms/advertise/update.vue
Unescape View File

@ -0,0 +1,32 @@
<template> 
<home-advertise-detail :isEdit="true"></home-advertise-detail>
</template>
<script>
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
export default {
name: 'updateHomeAdvertise',
components: { HomeAdvertiseDetail }
}
</script>
<style></style>
#abc
<template>
<!-- 在当前模板中使用名为`home-advertise-detail`的自定义组件，
并通过`:isEdit="true"`的方式向该组件传递一个名为`isEdit`的属性，值为`true`，
意味着当前是处于编辑状态（可能用于控制组件内部不同的展示或操作逻辑） -->
<home-advertise-detail :isEdit="true"></home-advertise-detail>
</template>
<script>
// 引入`./components/HomeAdvertiseDetail`路径下定义的`HomeAdvertiseDetail`组件，
// 这使得该组件可以在当前模块中被使用
import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
export default {
name: 'updateHomeAdvertise',
// 在`components`对象中注册`HomeAdvertiseDetail`组件，
// 这样在模板（template）部分就可以直接使用该组件标签来调用组件实例了
components: { HomeAdvertiseDetail }
}
</script>
<style></style>

651
sms/brand/index.vue
Unescape View File

@ -0,0 +1,651 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="品牌名称：">
<el-input v-model="listQuery.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"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleSelectBrand()">选择品牌</el-button>
</el-card>
<div class="table-container">
<el-table ref="homeBrandTable"
:data="list"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading" border>
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column label="编号" width="120" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="品牌名称" align="center">
<template slot-scope="scope">{{scope.row.brandName}}</template>
</el-table-column>
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
</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"
type="text"
@click="handleEditSort(scope.$index, scope.row)">设置排序
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<el-dialog title="选择品牌" :visible.sync="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>
评价：<span class="color-main">{{scope.row.productCommentCount}}</span>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
background
@size-change="handleDialogSizeChange"
@current-change="handleDialogCurrentChange"
layout="prev, pager, next"
:current-page.sync="dialogData.listQuery.pageNum"
:page-size="dialogData.listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="dialogData.total">
</el-pagination>
</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>
</div>
</template>
<script>
import {fetchList,updateRecommendStatus,deleteHomeBrand,createHomeBrand,updateHomeBrandSort} from '@/api/homeBrand';
import {fetchList as fetchBrandList} from '@/api/brand';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
brandName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'homeBrandList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
recommendOptions: Object.assign({}, defaultRecommendOptions),
list: null,
total: null,
listLoading: false,
multipleSelection: [],
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
operateType: null,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
showStatus:1,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
}
},
created() {
this.getList();
},
filters:{
formatRecommendStatus(status){
if(status===1){
return '推荐中';
}else{
return '未推荐';
}
}
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
handleDelete(index,row){
this.deleteBrand(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//设为推荐
this.updateRecommendStatusStatus(ids,1);
} else if (this.operateType === 1) {
//取消推荐
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
//删除
this.deleteBrand(ids);
}else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
return;
}
},
handleSelectBrand(){
this.selectDialogVisible=true;
this.getDialogList();
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectBrands = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectBrands.push({
brandId:this.dialogData.multipleSelection[i].id,
brandName:this.dialogData.multipleSelection[i].name
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createHomeBrand(selectBrands).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
},
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateHomeBrandSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
deleteBrand(ids){
this.$confirm('是否要删除该推荐?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHomeBrand(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删成功!'
});
});
})
},
getDialogList(){
fetchBrandList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
</script>
<style></style>
#abc
<template>
<!-- 页面的根容器，使用了app-container类名 -->
<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"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 重置按钮，设置了样式、点击事件以及尺寸，点击后调用handleResetSearch方法 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</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.brandName，设置了类名和占位符 -->
<el-input v-model="listQuery.brandName" 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数据来生成每个选项 -->
<el-option v-for="item in recommendOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 操作相关的卡片容器，设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 选择品牌按钮，设置了尺寸和点击事件，点击后调用handleSelectBrand方法 -->
<el-button size="mini" class="btn-add" @click="handleSelectBrand()">选择品牌</el-button>
</el-card>
<!-- 表格容器 -->
<div class="table-container">
<!-- el-table组件，用于展示数据列表，绑定了数据、设置了宽度、选择改变事件、加载状态以及边框 -->
<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>
<!-- 编号列，设置了宽度和对齐方式，通过插槽作用域展示对应行的id数据 -->
<el-table-column label="编号" width="120" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 品牌名称列，设置了对齐方式，通过插槽作用域展示对应行的brandName数据 -->
<el-table-column label="品牌名称" align="center">
<template slot-scope="scope">{{scope.row.brandName}}</template>
</el-table-column>
<!-- 是否推荐列，设置了宽度和对齐方式，通过插槽作用域展示开关组件来切换推荐状态，绑定了相应的事件和数据 -->
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
</template>
</el-table-column>
<!-- 排序列，设置了宽度和对齐方式，通过插槽作用域展示对应行的sort数据 -->
<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"
type="text"
@click="handleEditSort(scope.$index, scope.row)">设置排序
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 批量操作容器 -->
<div class="batch-operate-container">
<!-- 下拉选择框，用于选择批量操作类型，双向绑定operateType -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 循环生成下拉选项，根据operates数据来生成每个选项 -->
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 确定按钮，设置了样式、点击事件、类型以及尺寸，点击后调用handleBatchOperate方法 -->
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- 分页容器 -->
<div class="pagination-container">
<!-- el-pagination组件，用于分页功能，绑定了相关的事件、设置了布局、每页显示数量、可选的每页显示数量范围、当前页码以及总数据量等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<!-- 选择品牌的对话框组件，设置了标题、显示状态绑定以及宽度 -->
<el-dialog title="选择品牌" :visible.sync="selectDialogVisible" width="40%">
<!-- 输入框，用于在对话框中搜索品牌，双向绑定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 :data="dialogData.list"
@selection-change="handleDialogSelectionChange" border>
<!-- 选择列，设置了宽度和对齐方式 -->
<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>
<!-- 相关列，设置了宽度和对齐方式，通过插槽作用域展示商品数量和评价数量等相关信息 -->
<el-table-column label="相关" width="220" align="center">
<template slot-scope="scope">
商品：<span class="color-main">{{scope.row.productCount}}</span>
评价：<span class="color-main">{{scope.row.productCommentCount}}</span>
</template>
</el-table-column>
</el-table>
<!-- 对话框中的分页容器 -->
<div class="pagination-container">
<!-- el-pagination组件，用于对话框内的分页功能，绑定了相关的事件、设置了布局、当前页码、每页显示数量以及总数据量等属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@current-change="handleDialogCurrentChange"
layout="prev, pager, next"
:current-page.sync="dialogData.listQuery.pageNum"
:page-size="dialogData.listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="dialogData.total">
</el-pagination>
</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">
<!-- 排序的表单项，输入框双向绑定sortDialogData.sort，设置了宽度 -->
<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>
<!-- 确定按钮，设置了尺寸、类型和点击事件，点击后调用handleUpdateSort方法 -->
<el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script></script>

29
sms/coupon/add.vue
Unescape View File

@ -0,0 +1,29 @@
<template> 
<coupon-detail :isEdit="false"></coupon-detail>
</template>
<script>
import CouponDetail from './components/CouponDetail'
export default {
name: 'addCoupon',
components: { CouponDetail }
}
</script>
<style scoped>
</style>
#abc
<template>
<!-- 使用CouponDetail组件来展示添加优惠券的相关界面，通过属性绑定将isEdit设置为false，表示当前处于添加优惠券（非编辑）的状态 -->
<coupon-detail :isEdit="false"></coupon-detail>
</template>
<script>
// 从相对路径下的./components/CouponDetail文件中导入CouponDetail组件，这里假设CouponDetail是一个自定义的Vue组件，用于构建优惠券相关的表单等功能模块
import CouponDetail from './components/CouponDetail'
export default {
name: 'addCoupon',
// 在组件的components选项中注册CouponDetail组件，这样在当前组件的模板（template）中就可以使用<coupon-detail>标签来调用该组件了
components: { CouponDetail }
}
</script>

810
sms/coupon/components/CouponDetail.vue
Unescape View File

@ -0,0 +1,810 @@
<template> 
<el-card class="form-container" shadow="never">
<el-form :model="coupon"
:rules="rules"
ref="couponFrom"
label-width="150px"
size="small">
<el-form-item label="优惠券类型：">
<el-select v-model="coupon.type">
<el-option
v-for="type in typeOptions"
:key="type.value"
:label="type.label"
:value="type.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="优惠券名称：" prop="name">
<el-input v-model="coupon.name" class="input-width"></el-input>
</el-form-item>
<el-form-item label="适用平台：">
<el-select v-model="coupon.platform">
<el-option
v-for="item in platformOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="总发行量：" prop="publishCount">
<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
</el-form-item>
<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-form-item label="每人限领：">
<el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
<template slot="append">张</template>
</el-input>
</el-form-item>
<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-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-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-form-item label="可使用商品：">
<el-radio-group v-model="coupon.useType">
<el-radio-button :label="0">全场通用</el-radio-button>
<el-radio-button :label="1">指定分类</el-radio-button>
<el-radio-button :label="2">指定商品</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-show="coupon.useType===1">
<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"
type="text"
@click="handleDeleteProductCateRelation(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item v-show="coupon.useType===2">
<el-select
v-model="selectProduct"
filterable
remote
reserve-keyword
placeholder="商品名称/商品货号"
:remote-method="searchProductMethod"
:loading="selectProductLoading">
<el-option
v-for="item in selectProductOptions"
:key="item.productId"
:label="item.productName"
:value="item.productId">
<span style="float: left">{{ item.productName }}</span>
<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"
type="text"
@click="handleDeleteProductRelation(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="备注：">
<el-input
class="input-width"
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="coupon.note">
</el-input>
</el-form-item>
<el-form-item>
<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 = {
type: 0,
name: null,
platform: 0,
amount: null,
perLimit: 1,
minPoint: null,
startTime: null,
endTime: null,
useType: 0,
note: null,
publishCount: null,
productRelationList: [],
productCategoryRelationList: []
};
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
const defaultPlatformOptions = [
{
label: '全平台',
value: 0
},
{
label: '移动平台',
value: 1
},
{
label: 'PC平台',
value: 2
}
];
export default {
name: 'CouponDetail',
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
coupon: Object.assign({}, defaultCoupon),
typeOptions: Object.assign({}, defaultTypeOptions),
platformOptions: Object.assign({}, defaultPlatformOptions),
rules: {
name: [
{required: true, message: '请输入优惠券名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
publishCount: [
{type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
],
amount: [
{type: 'number',required: true,message: '面值只能是数值，0.01-10000，限2位小数',trigger: 'blur'}
],
minPoint: [
{type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
]
},
selectProduct:null,
selectProductLoading: false,
selectProductOptions:[],
selectProductCate: null,
productCateOptions: []
}
},
created(){
if(this.isEdit){
getCoupon(this.$route.query.id).then(response=>{
this.coupon=response.data;
});
}
this.getProductCateList();
},
methods:{
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.isEdit){
updateCoupon(this.$route.query.id,this.coupon).then(response=>{
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration:1000
});
this.$router.back();
});
}else{
createCoupon(this.coupon).then(response=>{
this.$refs[formName].resetFields();
this.$message({
message: '提交成功',
type: 'success',
duration:1000
});
this.$router.back();
});
}
});
} else {
this.$message({
message: '验证失败',
type: 'error',
duration:1000
});
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.coupon = Object.assign({},defaultCoupon);
},
searchProductMethod(query){
if (query !== '') {
this.loading = true;
fetchProductList({keyword:query}).then(response=>{
this.loading=false;
let productList = response.data;
this.selectProductOptions = [];
for(let i=0;i<productList.length;i++){
let item = productList[i];
this.selectProductOptions.push({productId:item.id,productName:item.name,productSn:item.productSn});
}
});
} else {
this.selectProductOptions = [];
}
},
handleAddProductRelation(){
if(this.selectProduct===null){
this.$message({
message: '请先选择商品',
type: 'warning'
});
return
}
this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
this.selectProduct=null;
},
handleDeleteProductRelation(index,row){
this.coupon.productRelationList.splice(index,1);
},
handleAddProductCategoryRelation(){
if(this.selectProductCate===null||this.selectProductCate.length===0){
this.$message({
message: '请先选择商品分类',
type: 'warning'
});
return
}
this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
this.selectProductCate=[];
},
handleDeleteProductCateRelation(index,row){
this.coupon.productCategoryRelationList.splice(index,1);
},
getProductById(id){
for(let i=0;i<this.selectProductOptions.length;i++){
if(id===this.selectProductOptions[i].productId){
return this.selectProductOptions[i];
}
}
return null;
},
getProductCateList() {
fetchListWithChildren().then(response => {
let list = response.data;
this.productCateOptions = [];
for (let i = 0; i < list.length; i++) {
let children = [];
if (list[i].children != null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id});
}
}
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
}
});
},
getProductCateByIds(ids){
let name;
let parentName;
for (let i = 0; i < this.productCateOptions.length; i++) {
if (this.productCateOptions[i].value === ids[0]) {
parentName = this.productCateOptions[i].label;
for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
if (this.productCateOptions[i].children[j].value === ids[1]) {
name = this.productCateOptions[i].children[j].label;
}
}
}
}
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
}
}
}
</script>
<style scoped>
.input-width {
width: 60%;
}
</style>
#abc
<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-form-item label="优惠券类型：">
<!-- el-select组件用于选择优惠券类型，双向绑定v-model到coupon.type -->
<el-select v-model="coupon.type">
<!-- 遍历typeOptions数组生成el-option选项，每个选项的键、标签、值分别对应相应属性 -->
<el-option
v-for="type in typeOptions"
:key="type.value"
:label="type.label"
:value="type.value">
</el-option>
</el-select>
</el-form-item>
<!-- 优惠券名称输入的表单项，设置了验证属性prop -->
<el-form-item label="优惠券名称：" prop="name">
<!-- el-input组件用于输入优惠券名称，双向绑定v-model到coupon.name -->
<el-input v-model="coupon.name" class="input-width"></el-input>
</el-form-item>
<!-- 适用平台选择的表单项 -->
<el-form-item label="适用平台：">
<el-select v-model="coupon.platform">
<el-option
v-for="item in platformOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 总发行量输入的表单项，设置了验证属性prop，限制只能输入正整数 -->
<el-form-item label="总发行量：" prop="publishCount">
<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
</el-form-item>
<!-- 面额输入的表单项，设置了验证属性prop，限制只能输入数值且保留2位小数 -->
<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-form-item label="每人限领：">
<el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
<template slot="append">张</template>
</el-input>
</el-form-item>
<!-- 使用门槛输入的表单项，设置了验证属性prop，限制只能输入正整数 -->
<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>
<!-- 领取日期选择的表单项，设置了验证属性prop -->
<el-form-item label="领取日期：" prop="enableTime">
<!-- el-date-picker组件用于选择日期，类型为date，双向绑定v-model到coupon.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-radio-button组件实现单选 -->
<el-form-item label="可使用商品：">
<el-radio-group v-model="coupon.useType">
<el-radio-button :label="0">全场通用</el-radio-button>
<el-radio-button :label="1">指定分类</el-radio-button>
<el-radio-button :label="2">指定商品</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 当选择指定分类（coupon.useType === 1）时显示的表单项 -->
<el-form-item v-show="coupon.useType===1">
<!-- el-cascader组件用于选择分类，支持清空、占位提示等功能，双向绑定v-model到selectProductCate -->
<el-cascader
clearable
placeholder="请选择分类名称"
v-model="selectProductCate"
:options="productCateOptions">
</el-cascader>
<!-- 点击按钮触发handleAddProductCategoryRelation方法添加分类关系 -->
<el-button @click="handleAddProductCategoryRelation()">添加</el-button>
<!-- el-table组件用于展示已添加的分类关系列表 -->
<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">
<!-- 点击按钮触发handleDeleteProductCateRelation方法删除对应分类关系 -->
<el-button size="mini"
type="text"
@click="handleDeleteProductCateRelation(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 当选择指定商品（coupon.useType === 2）时显示的表单项 -->
<el-form-item v-show="coupon.useType===2">
<!-- el-select组件用于选择商品，支持过滤、远程搜索、保留关键字等功能，双向绑定v-model到selectProduct -->
<el-select
v-model="selectProduct"
filterable
remote
reserve-keyword
placeholder="商品名称/商品货号"
:remote-method="searchProductMethod"
:loading="selectProductLoading">
<el-option
v-for="item in selectProductOptions"
:key="item.productId"
:label="item.productName"
:value="item.productId">
<span style="float: left">{{ item.productName }}</span>
<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"
type="text"
@click="handleDeleteProductRelation(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 备注输入的表单项，使用textarea类型的el-input组件 -->
<el-form-item label="备注：">
<el-input
class="input-width"
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="coupon.note">
</el-input>
</el-form-item>
<!-- 提交和重置按钮的表单项 -->
<el-form-item>
<!-- 点击提交按钮触发onSubmit方法提交表单数据 -->
<el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
<!-- 当不是编辑状态（!isEdit）时，点击重置按钮触发resetForm方法重置表单 -->
<el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
// 从'@/api/coupon'模块中导入创建优惠券（createCoupon）、获取优惠券（getCoupon）、更新优惠券（updateCoupon）的相关函数，用于与后端进行优惠券相关数据的交互操作
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, // 优惠券类型，初始值为0，具体类型对应关系可参考typeOptions中的定义
name: null, // 优惠券名称，初始为空，等待用户输入
platform: 0, // 适用平台类型，初始值为0，对应关系参考platformOptions中的定义
amount: null, // 优惠券面值，初始为空，需用户输入符合规则的数值
perLimit: 1, // 每人限领数量，初始设为1
minPoint: null, // 使用门槛金额，初始为空，需用户输入正整数
startTime: null, // 优惠券开始时间，初始为空，待设置具体时间
endTime: null, // 优惠券结束时间，初始为空，待设置具体时间
useType: 0, // 可使用商品类型，初始值为0，具体含义由业务逻辑决定
note: null, // 优惠券备注信息，初始为空
publishCount: null, // 发行量，初始为空，需输入正整数
productRelationList: [], // 关联的商品列表，初始为空数组，用于存储与优惠券相关联的具体商品信息
productCategoryRelationList: [] // 关联的商品分类列表，初始为空数组，用于存储与优惠券相关联的商品分类信息
};
// 定义默认的优惠券类型选项数组，每个选项包含标签（label）和值（value）属性，用于在界面上展示优惠券类型选择项以及与后端数据交互时进行对应转换
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
// 定义默认的适用平台选项数组，同样每个选项有标签和值属性，用于展示适用平台的选择项以及数据转换，比如选择全平台、移动平台或PC平台等情况
const defaultPlatformOptions = [
{
label: '全平台',
value: 0
},
{
label: '移动平台',
value: 1
},
{
label: 'PC平台',
value: 2
}
];
export default {
name: 'CouponDetail',
props: {
// 定义一个名为isEdit的属性，用于接收父组件传递的值，类型为布尔值，默认值为false，表示是否处于编辑优惠券的状态，父组件可通过绑定该属性来控制当前组件的操作模式（编辑或新增）
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
// 优惠券对象，初始化为defaultCoupon的副本，方便后续在组件内对优惠券各属性进行操作和修改，同时保持默认值的初始化状态
coupon: Object.assign({}, defaultCoupon),
// 优惠券类型选项数组，初始化为defaultTypeOptions的副本，用于在界面上展示可供选择的优惠券类型
typeOptions: Object.assign({}, defaultTypeOptions),
// 适用平台选项数组，初始化为defaultPlatformOptions的副本，用于展示适用平台的选择项
platformOptions: Object.assign({}, defaultPlatformOptions),
// 定义表单验证规则对象，针对优惠券的不同属性设置相应的验证要求，如必填、长度限制、数据类型等，用于在用户提交表单时进行数据合法性检查
rules: {
name: [
{required: true, message: '请输入优惠券名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
publishCount: [
{type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
],
amount: [
{type: 'number', required: true, message: '面值只能是数值，0.01-10000，限2位小数', trigger: 'blur'}
],
minPoint: [
{type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
]
},
// 用于存储当前选中的商品信息，初始为null，在选择商品操作时进行赋值，方便后续关联商品到优惠券
selectProduct: null,
// 用于标识获取商品列表时是否正在加载数据的布尔值，初始为false，在发起获取商品列表请求时设为true，加载完成后设回false，可用于控制页面加载提示效果
selectProductLoading: false,
// 用于存储可选择的商品选项列表，初始为空数组，通过调用接口获取商品数据后进行填充，展示给用户以供选择关联到优惠券
selectProductOptions: [],
// 用于存储当前选中的商品分类信息，初始为null，在选择商品分类操作时赋值，用于关联商品分类到优惠券
selectProductCate: null,
// 用于存储商品分类选项列表，初始为空数组，获取商品分类数据后填充，用于在界面上展示供用户选择
productCateOptions: []
}
},
created() {
// 在组件创建完成后，根据isEdit属性的值来决定是否获取优惠券详细信息，如果处于编辑状态（isEdit为true），则通过调用getCoupon函数，传入从路由参数中获取的优惠券ID（this.$route.query.id），从后端获取该优惠券的详细信息并赋值给coupon对象
if (this.isEdit) {
getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
});
}
// 调用getProductCateList方法，用于获取商品分类列表数据，填充productCateOptions数组，以便在界面上展示商品分类供用户选择关联到优惠券
this.getProductCateList();
},
methods: {
// 处理表单提交的方法，接收一个表单名称参数（formName），用于验证指定表单内的数据是否合法，验证通过后弹出确认框询问用户是否提交数据，在用户确认提交后，根据isEdit属性判断是编辑还是新增操作，分别调用对应的更新或创建优惠券的函数与后端交互
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
// 如果是编辑操作，调用updateCoupon函数，传入优惠券ID（从路由参数获取）和当前修改后的coupon对象数据，向后端发起更新优惠券的请求，请求成功后重置表单字段、显示成功提示消息，并返回上一页（可能是列表页等）
updateCoupon(this.$route.query.id, this.coupon).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
this.$router.back();
});
} else {
// 如果是新增操作，调用createCoupon函数，传入当前的coupon对象数据，向后端发起创建优惠券的请求，成功后同样重置表单、显示成功提示消息并返回上一页
createCoupon(this.coupon).then(response => {
this.$refs[formName].resetFields();
this.$message({
message: '提交成功',
type: 'success',
duration: 1000
});
this.$router.back();
});
}
});
} else {
// 如果表单验证不通过，显示验证失败的提示消息，并返回false，阻止后续提交操作继续执行
this.$message({
message: '验证失败',
type: 'error',
duration: 1000
});
return false;
}
});
},
// 重置表单的方法，接收一个表单名称参数（formName），通过调用表单的resetFields方法来重置表单内的所有字段为初始值，同时将coupon对象也重置为defaultCoupon的副本，恢复到初始状态
resetForm(formName) {
this.$refs[formName].resetFields();
this.coupon = Object.assign({}, defaultCoupon);
},
// 搜索商品的方法，接收一个查询关键字参数（query），当关键字不为空时，设置加载状态为true，调用fetchProductList函数传入关键字发起获取商品列表的请求，在请求成功后更新加载状态为false，并处理返回的商品数据，将其转换为符合要求的格式填充到selectProductOptions数组中，以便在界面上展示供用户选择；如果关键字为空，则直接清空selectProductOptions数组
searchProductMethod(query) {
if (query!== '') {
this.loading = true;
fetchProductList({keyword: query}).then(response => {
this.loading = false;
let productList = response.data;
this.selectProductOptions = [];
for (let i = 0; i < productList.length; i++) {
let item = productList[i];
this.selectProductOptions.push({productId: item.id, productName: item.name, productSn: item.productSn});
}
});
} else {
this.selectProductOptions = [];
}
},
// 处理添加商品关联的方法，首先判断是否已经选择了商品（selectProduct是否为null），如果未选择则显示警告提示消息并直接返回，不进行后续操作；若已选择商品，则将该商品信息通过getProductById方法获取后添加到coupon对象的productRelationList数组中，然后将selectProduct重置为null，表示已完成添加操作
handleAddProductRelation() {
if (this.selectProduct === null) {
this.$message({
message: '请先选择商品',
type: 'warning'
});
return;
}
this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
this.selectProduct = null;
},
// 处理删除商品关联的方法，接收要删除的商品在productRelationList数组中的索引（index）和对应的商品行数据（row），通过数组的splice方法从productRelationList数组中删除指定索引位置的元素，实现删除与优惠券关联的商品记录的功能
handleDeleteProductRelation(index, row) {
this.coupon.productRelationList.splice(index, 1);
},
// 处理添加商品分类关联的方法，首先判断是否已经选择了商品分类（selectProductCate是否为null或长度为0），若未选择则显示警告提示消息并返回，不进行后续操作；若已选择，则通过getProductCateByIds方法获取商品分类信息并添加到coupon对象的productCategoryRelationList数组中，然后将selectProductCate重置为空数组，表示添加操作完成
handleAddProductCategoryRelation() {
if (this.selectProductCate === null || this.selectProductCate.length === 0) {
this.$message({
message: '请先选择商品分类',
type: 'warning'
});
return;
}
this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
this.selectProductCate = [];
},
// 处理删除商品分类关联的方法，与处理删除商品关联的方法类似，接收要删除的商品分类在productCategoryRelationList数组中的索引（index）和对应的数据（row），通过splice方法从该数组中删除指定元素，实现删除与优惠券关联的商品分类记录的功能
handleDeleteProductCateRelation(index, row) {
this.coupon.productCategoryRelationList.splice(index, 1);
},
// 根据商品ID获取商品信息的方法，遍历selectProductOptions数组，查找与传入的商品ID匹配的元素并返回，如果未找到则返回null，主要用于在关联商品操作中根据选择的商品ID获取对应的完整商品信息
getProductById(id) {
for (let i = 0; i < this.selectProductOptions.length; i++) {
if (id === this.selectProductOptions[i].productId) {
return this.selectProductOptions[i];
}
}
return null;
},
// 获取商品分类列表的方法，调用fetchListWithChildren函数从后端获取带有子级的商品分类列表数据，在获取成功后遍历处理返回的数据，将其转换为符合要求的格式（包含标签、值以及子分类等信息）填充到productCateOptions数组中，用于在界面上展示商品分类树状结构供用户选择关联到优惠券
getProductCateList() {
fetchListWithChildren().then(response => {
let list = response.data;
this.productCateOptions = [];
for (let i = 0; i < list.length; i++) {
let children = [];
if (list[i].children!= null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id});
}
}
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
}
});
},
// 根据商品分类ID数组获取商品分类详细信息的方法，通过遍历productCateOptions数组以及其内部的子分类信息，查找与传入的商品分类ID数组匹配的元素，获取对应的商品分类名称、父分类名称等信息，并将其封装成一个对象返回，用于在关联商品分类操作中获取完整的分类信息
getProductCateByIds(ids) {
let name;
let parentName;
for (let i = 0; i < this.productCateOptions.length; i++) {
if (this.productCateOptions[i].value === ids[0]) {
parentName = this.productCateOptions[i].label;
for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
if (this.productCateOptions[i].children[j].value === ids[1]) {
name = this.productCateOptions[i].children[j].label;
}
}
}
}
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
}
}
}
</script>

642
sms/coupon/history.vue
Unescape View File

@ -0,0 +1,642 @@
<template> 
<div class="app-container">
<div class="table-layout">
<el-row>
<el-col :span="4" class="table-cell-title">名称</el-col>
<el-col :span="4" class="table-cell-title">优惠券类型</el-col>
<el-col :span="4" class="table-cell-title">可使用商品</el-col>
<el-col :span="4" class="table-cell-title">使用门槛</el-col>
<el-col :span="4" class="table-cell-title">面值</el-col>
<el-col :span="4" class="table-cell-title">状态</el-col>
</el-row>
<el-row>
<el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
<el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col>
<el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col>
<el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
</el-row>
<el-row>
<el-col :span="4" class="table-cell-title">有效期</el-col>
<el-col :span="4" class="table-cell-title">总发行量</el-col>
<el-col :span="4" class="table-cell-title">已领取</el-col>
<el-col :span="4" class="table-cell-title">待领取</el-col>
<el-col :span="4" class="table-cell-title">已使用</el-col>
<el-col :span="4" class="table-cell-title">未使用</el-col>
</el-row>
<el-row>
<el-col :span="4" class="table-cell" style="font-size: 13px">
{{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}}
</el-col>
<el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
<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 :span="4" class="table-cell">{{coupon.useCount}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col>
</el-row>
</div>
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="使用状态：">
<el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
<el-option v-for="item in useTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</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"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {formatDate} from '@/utils/date';
import {getCoupon} from '@/api/coupon';
import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
useStatus: null,
orderSn: null,
couponId: null
};
const defaultUseTypeOptions= [
{
label: "未使用",
value: 0
},
{
label: "已使用",
value: 1
},
{
label: "已过期",
value: 2
}
];
export default {
name: 'couponHistoryList',
data() {
return {
coupon: {},
listQuery: Object.assign({}, defaultListQuery),
useTypeOptions:Object.assign({},defaultUseTypeOptions),
list:null,
total:null,
listLoading:false
}
},
created() {
getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
});
this.listQuery.couponId=this.$route.query.id;
this.getList();
},
filters: {
formatType(type) {
for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) {
return defaultTypeOptions[i].label;
}
}
return '';
},
formatUseType(useType) {
if (useType === 0) {
return '全场通用';
} else if (useType === 1) {
return '指定分类';
} else {
return '指定商品';
}
},
formatPlatform(platform) {
if (platform === 1) {
return '移动平台';
} else if (platform === 2) {
return 'PC平台';
} else {
return '全平台';
}
},
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
formatStatus(endTime) {
let now = new Date().getTime();
if (endTime > now) {
return '未过期'
} else {
return '已过期';
}
},
formatGetType(type) {
if(type===1){
return '主动获取';
}else{
return '后台赠送';
}
},
formatCouponHistoryUseType(useType) {
if (useType === 0) {
return '未使用';
} else if (useType === 1) {
return '已使用';
} else {
return '已过期';
}
},
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
getList(){
this.listLoading=true;
fetchCouponHistoryList(this.listQuery).then(response=>{
this.listLoading=false;
this.list=response.data.list;
this.total=response.data.total;
});
},
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
this.listQuery.couponId=this.$route.query.id;
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
}
}
}
</script>
<style scoped>
.app-container {
width: 80%;
margin: 20px auto;
}
.filter-container {
margin-top: 20px;
}
.table-layout {
margin-top: 20px;
border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6;
}
.table-cell {
height: 60px;
line-height: 40px;
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
font-size: 14px;
color: #606266;
text-align: center;
overflow: hidden;
}
.table-cell-title {
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
background: #F2F6FC;
text-align: center;
font-size: 14px;
color: #303133;
}
</style>
#abc
<template>
<!-- 创建一个类名为app-container的div作为整个页面的容器，用于布局和包裹内部的各个模块 -->
<div class="app-container">
<!-- 创建一个用于展示优惠券相关信息表格布局的div -->
<div class="table-layout">
<!-- 使用el-row组件创建行，el-col组件用于在行内划分列，这里定义了一行展示优惠券不同属性的标题列 -->
<el-row>
<el-col :span="4" class="table-cell-title">名称</el-col>
<el-col :span="4" class="table-cell-title">优惠券类型</el-col>
<el-col :span="4" class="table-cell-title">可使用商品</el-col>
<el-col :span="4" class="table-cell-title">使用门槛</el-col>
<el-col :span="4" class="table-cell-title">面值</el-col>
<el-col :span="4" class="table-cell-title">状态</el-col>
</el-row>
<!-- 又一行el-row，用于展示具体优惠券的各项属性值，通过双花括号插值表达式绑定对应的数据，部分属性使用了过滤器（如 | formatType等）来格式化显示内容 -->
<el-row>
<el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
<el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col>
<el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col>
<el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
</el-row>
<!-- 再次创建一行el-row，用于展示优惠券其他属性的标题列 -->
<el-row>
<el-col :span="4" class="table-cell-title">有效期</el-col>
<el-col :span="4" class="table-cell-title">总发行量</el-col>
<el-col :span="4" class="table-cell-title">已领取</el-col>
<el-col :span="4" class="table-cell-title">待领取</el-col>
<el-col :span="4" class="table-cell-title">已使用</el-col>
<el-col :span="4" class="table-cell-title">未使用</el-col>
</el-row>
<!-- 对应上一行标题列的具体属性值展示行，通过计算表达式等方式来展示相应的数据，如计算待领取数量等 -->
<el-row>
<el-col :span="4" class="table-cell" style="font-size: 13px">
{{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}}
</el-col>
<el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
<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 :span="4" class="table-cell">{{coupon.useCount}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.useCount}}</el-col>
</el-row>
</div>
<!-- 使用el-card组件创建一个筛选搜索的容器，设置阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用一个图标元素（这里假设是element-ui的图标类）表示搜索图标 -->
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<!-- 点击按钮触发handleSearchList方法进行查询搜索操作，按钮设置为主要样式（primary）、小尺寸（small）并靠右浮动（float:right） -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 点击按钮触发handleResetSearch方法重置筛选搜索条件，按钮靠右浮动且设置了右边距（margin-right: 15px）、小尺寸（small） -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 创建一个内联表单（inline为true），绑定数据模型为listQuery，设置表单尺寸为小（small），标签宽度为140px -->
<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"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 表单中“订单编号”输入的表单项，通过v-model双向绑定数据到listQuery.orderSn -->
<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 -->
<div class="table-container">
<!-- 使用el-table组件展示优惠券历史记录数据，绑定数据来源为list，设置宽度为100%，通过v-loading指令绑定加载状态为listLoading，显示表格边框 -->
<el-table ref="couponHistoryTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 定义表格列“优惠码”，设置宽度为160px，内容居中对齐 -->
<el-table-column label="优惠码" width="160" align="center">
<template slot-scope="scope">{{scope.row.couponCode}}</template>
</el-table-column>
<!-- 定义表格列“领取会员”，宽度为140px，内容居中对齐 -->
<el-table-column label="领取会员" width="140" align="center">
<template slot-scope="scope">{{scope.row.memberNickname}}</template>
</el-table-column>
<!-- 定义表格列“领取方式”，宽度为100px，内容居中对齐，使用了formatGetType过滤器格式化显示内容 -->
<el-table-column label="领取方式" width="100" align="center">
<template slot-scope="scope">{{scope.row.getType | formatGetType}}</template>
</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>
<!-- 定义表格列“当前状态”，宽度为140px，内容居中对齐，使用了formatCouponHistoryUseType过滤器格式化显示内容 -->
<el-table-column label="当前状态" width="140" align="center">
<template slot-scope="scope">{{scope.row.useStatus | formatCouponHistoryUseType}}</template>
</el-table-column>
<!-- 定义表格列“使用时间”，宽度为160px，内容居中对齐，使用了formatTime过滤器格式化显示内容 -->
<el-table-column label="使用时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.useTime | formatTime}}</template>
</el-table-column>
<!-- 定义表格列“订单编号”，内容居中对齐，当值为null时显示N/A -->
<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 -->
<div class="pagination-container">
<!-- 使用el-pagination组件实现分页功能，设置背景色（background），绑定页面尺寸改变（size-change）和当前页改变（current-change）的事件处理方法，配置分页布局、当前页、每页数量、可选页面尺寸列表以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5, 10, 15]"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 从'@/utils/date'文件中导入formatDate函数，用于对日期数据进行格式化处理，使其以特定的格式展示在页面上。
import {formatDate} from '@/utils/date';
// 从'@/api/coupon'模块中导入getCoupon函数，用于从后端获取优惠券的相关信息。
import {getCoupon} from '@/api/coupon';
// 从'@/api/couponHistory'模块中导入fetchList函数，并将其重命名为fetchCouponHistoryList，用于获取优惠券历史记录列表数据，与后端进行交互获取相应信息。
import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
// 定义默认的优惠券类型选项数组，每个元素包含label（展示名称）和value（对应的值）属性，用于在界面上展示优惠券类型的选择项以及在数据处理中进行类型转换等操作。
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
// 定义默认的列表查询参数对象，包含页码、每页数量以及一些筛选条件相关的属性初始值，用于构建查询优惠券历史记录列表的条件。
const defaultListQuery = {
pageNum: 1, // 初始页码设为1，表示默认从第一页开始获取数据。
pageSize: 10, // 每页显示的记录数量初始设置为10条。
useStatus: null, // 优惠券使用状态，初始为空，可根据具体业务需求设置筛选条件。
orderSn: null, // 订单编号相关筛选条件，初始为空，用于更精准的查询。
couponId: null // 优惠券ID，初始为空，后续会根据路由参数进行赋值，用于查询特定优惠券的历史记录。
};
// 定义默认的优惠券使用类型选项数组，同样包含label和value属性，用于展示优惠券使用状态的不同选项以及相应的数据转换操作。
const defaultUseTypeOptions = [
{
label: "未使用",
value: 0
},
{
label: "已使用",
value: 1
},
{
label: "已过期",
value: 2
}
];
export default {
name: 'couponHistoryList',
data() {
return {
// 用于存储当前查看的优惠券详细信息，初始为空对象，在获取到对应优惠券数据后进行填充。
coupon: {},
// 列表查询参数对象，通过Object.assign初始化为defaultListQuery的副本，方便后续根据用户操作动态改变查询条件，同时确保初始状态符合默认设置。
listQuery: Object.assign({}, defaultListQuery),
// 优惠券使用类型选项数组，初始化为defaultUseTypeOptions的副本，用于在界面上展示可供选择的优惠券使用状态选项。
useTypeOptions: Object.assign({}, defaultUseTypeOptions),
// 用于存储获取到的优惠券历史记录列表数据，初始为null，等待通过调用接口获取数据后进行赋值。
list: null,
// 用于存储符合当前查询条件的优惠券历史记录总条数，初始为null，同样在获取数据后更新相应的值。
total: null,
// 用于标识当前是否正在加载数据（例如正在获取优惠券历史记录列表数据时）的布尔值，初始设为false，在发起获取数据请求时设为true，数据获取完成后再设回false，可用于控制页面加载提示效果等。
listLoading: false
}
},
created() {
// 在组件创建完成后，首先调用getCoupon函数，传入从路由参数（this.$route.query.id）中获取的优惠券ID，从后端获取该优惠券的详细信息，并将获取到的数据赋值给coupon对象，以便后续展示或关联使用。
getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data;
});
// 将列表查询参数中的couponId属性设置为从路由参数获取的优惠券ID，确保后续查询优惠券历史记录时是针对当前查看的优惠券进行的。
this.listQuery.couponId = this.$route.query.id;
// 调用getList方法，用于从后端获取符合当前查询条件的优惠券历史记录列表数据，完成页面的初始数据加载。
this.getList();
},
filters: {
// 过滤器函数formatType，用于根据传入的优惠券类型值（type），在defaultTypeOptions数组中查找对应的标签并返回，若未找到匹配的值，则返回空字符串。主要用于将后端存储的优惠券类型值转换为在界面上友好展示的文本形式。
formatType(type) {
for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) {
return defaultTypeOptions[i].label;
}
}
return '';
},
// 过滤器函数formatUseType，根据传入的可使用商品类型值（useType）返回对应的文本描述，例如传入0返回“全场通用”等，用于将特定的数值类型转换为直观的文本展示，方便用户理解优惠券可使用商品的范围情况。
formatUseType(useType) {
if (useType === 0) {
return '全场通用';
} else if (useType === 1) {
return '指定分类';
} else {
return '指定商品';
}
},
// 过滤器函数formatPlatform，根据传入的平台值（platform）返回对应的平台名称描述，如传入1返回“移动平台”等，用于将表示平台的数值转换为具体的平台名称文本展示，告知用户优惠券适用的平台信息。
formatPlatform(platform) {
if (platform === 1) {
return '移动平台';
} else if (platform === 2) {
return 'PC平台';
} else {
return '全平台';
}
},
// 过滤器函数formatDate，用于格式化日期数据展示，如果传入的时间为空或null则返回'N/A'，否则调用从外部导入的formatDate函数将时间转换为指定格式（'yyyy-MM-dd'）的字符串进行展示，使日期数据在界面上以统一且易读的格式呈现。
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
// 过滤器函数formatStatus，根据传入的结束时间（endTime）与当前时间（通过new Date().getTime()获取当前时间戳）对比来判断优惠券是否过期，若结束时间大于当前时间则返回“未过期”，否则返回“已过期”，用于展示优惠券的过期状态信息。
formatStatus(endTime) {
let now = new Date().getTime();
if (endTime > now) {
return '未过期'
} else {
return '已过期';
}
},
// 过滤器函数formatGetType，根据传入的类型值（type）判断并返回对应的获取方式文本描述，若type为1返回“主动获取”，否则返回“后台赠送”，用于展示优惠券的获取来源方式相关信息。
formatGetType(type) {
if (type === 1) {
return '主动获取';
} else {
return '后台赠送';
}
},
// 过滤器函数formatCouponHistoryUseType，根据传入的优惠券历史记录使用类型值（useType）返回对应的文本描述，如传入0返回“未使用”等，用于将历史记录中表示使用状态的数值转换为直观的文本展示，方便查看优惠券历史使用情况。
formatCouponHistoryUseType(useType) {
if (useType === 0) {
return '未使用';
} else if (useType === 1) {
return '已使用';
} else {
return '已过期';
}
},
// 过滤器函数formatTime，和formatDate类似，用于格式化时间数据展示，不过这里转换的格式为'yyyy-MM-dd hh:mm:ss'，如果传入的时间为空或null则返回'N/A'，用于将时间数据以更精确的格式展示在界面上，可能用于展示如订单时间等更详细的时间信息。
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
// 获取优惠券历史记录列表数据的方法，首先将listLoading设为true，表示开始加载数据，可用于在页面上显示加载提示效果（如加载动画等），然后调用fetchCouponHistoryList函数传入当前的列表查询参数（listQuery）向后端发起获取优惠券历史记录列表数据的请求，在请求成功的回调函数中，将listLoading设回false表示数据加载完成，同时将获取到的优惠券历史记录列表数据赋值给list属性，将总条数赋值给total属性，用于在页面上展示相应的数据和分页信息。
getList() {
this.listLoading = true;
fetchCouponHistoryList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
// 重置筛选搜索条件的方法，将列表查询参数恢复为默认值（通过Object.assign重新初始化为defaultListQuery的副本），同时确保couponId属性依然保持为当前从路由参数获取的值，方便用户重新进行无筛选条件的查询或者清除之前设置的筛选条件，针对当前查看的优惠券来查询历史记录。
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
this.listQuery.couponId = this.$route.query.id;
},
// 处理查询搜索按钮点击事件的方法（假设页面上有对应的查询搜索按钮），先将列表查询参数中的页码重置为1，然后调用getList方法，根据当前设置的查询条件（包含可能已设置的useStatus等）重新从后端获取优惠券历史记录列表数据，实现根据新条件查询历史记录的功能。
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// 处理页面尺寸改变事件的方法（例如用户选择每页显示不同数量的记录时触发），先将页码重置为1，接着更新列表查询参数中的每页数量为新传入的值（val），最后调用getList方法重新获取符合新条件的优惠券历史记录列表数据，以适应页面展示不同数量记录的需求。
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理当前页改变事件的方法（例如用户点击分页组件切换到不同页码时触发），更新列表查询参数中的页码为新传入的值（val），然后调用getList方法获取对应页码的优惠券历史记录列表数据，实现分页查看历史记录的功能。
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
}
}
}
</script>

545
sms/coupon/index.vue
Unescape View File

@ -0,0 +1,545 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="优惠券名称：">
<el-input v-model="listQuery.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"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleAdd()">添加</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>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {fetchList,deleteCoupon} from '@/api/coupon';
import {formatDate} from '@/utils/date';
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
name: null,
type: null
};
const defaultTypeOptions=[
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
export default {
name:'couponList',
data() {
return {
listQuery:Object.assign({},defaultListQuery),
typeOptions:Object.assign({},defaultTypeOptions),
list:null,
total:null,
listLoading:false,
multipleSelection:[]
}
},
created(){
this.getList();
},
filters:{
formatType(type){
for(let i=0;i<defaultTypeOptions.length;i++){
if(type===defaultTypeOptions[i].value){
return defaultTypeOptions[i].label;
}
}
return '';
},
formatUseType(useType){
if(useType===0){
return '全场通用';
}else if(useType===1){
return '指定分类';
}else{
return '指定商品';
}
},
formatPlatform(platform){
if(platform===1){
return '移动平台';
}else if(platform===2){
return 'PC平台';
}else{
return '全平台';
}
},
formatDate(time){
if(time==null||time===''){
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
},
formatStatus(endTime){
let now = new Date().getTime();
let endDate = new Date(endTime);
if(endDate>now){
return '未过期'
}else{
return '已过期';
}
}
},
methods:{
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd(){
this.$router.push({path: '/sms/addCoupon'})
},
handleView(index, row) {
this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
},
handleUpdate(index, row) {
this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
},
handleDelete(index, row) {
this.$confirm('是否进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteCoupon(row.id).then(response=>{
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
})
},
getList(){
this.listLoading=true;
fetchList(this.listQuery).then(response=>{
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
}
}
</script>
<style scoped>
.input-width {
width: 203px;
}
</style>
#abc
<template>
<!-- 创建一个类名为app-container的div作为整个页面的外层容器，用于整体布局 -->
<div class="app-container">
<!-- 使用el-card组件创建一个筛选搜索的容器，设置阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用element-ui的图标元素（el-icon-search）表示搜索图标 -->
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<!-- el-button组件用于创建查询搜索按钮，设置按钮靠右浮动（float:right），样式为主要按钮（type="primary"），尺寸为小（size="small"），点击按钮触发handleSearchList方法 -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- el-button组件用于创建重置按钮，设置按钮靠右浮动且右边距为15px（float:right; margin-right: 15px），尺寸为小（size="small"），点击按钮触发handleResetSearch方法 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 创建一个内联表单（:inline="true"），绑定数据模型为listQuery，设置表单尺寸为小（size="small"），标签宽度为140px -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单中“优惠券名称”输入的表单项，通过v-model双向绑定数据到listQuery.name，设置输入框宽度样式类为input-width，添加占位提示文本 -->
<el-form-item label="优惠券名称：">
<el-input v-model="listQuery.name" class="input-width" placeholder="优惠券名称"></el-input>
</el-form-item>
<!-- 表单中“优惠券类型”选择的表单项，通过v-model双向绑定数据到listQuery.type，设置占位提示文本为“全部”，支持清空选择（clearable），输入框宽度样式类为input-width -->
<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"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 使用el-card组件创建一个操作相关的容器，设置阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 使用element-ui的图标元素（el-icon-tickets）表示相关图标 -->
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- el-button组件用于创建添加按钮，设置按钮尺寸为迷你（size="mini"），样式类为btn-add，点击按钮触发handleAdd方法 -->
<el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
</el-card>
<!-- 创建一个用于展示优惠券数据表格的容器div -->
<div class="table-container">
<!-- 使用el-table组件展示优惠券数据列表，绑定数据来源为list，设置宽度为100%，监听行选择改变事件（@selection-change）并绑定handleSelectionChange方法，通过v-loading指令绑定加载状态为listLoading，显示表格边框 -->
<el-table ref="couponTable"
:data="list"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading" border>
<!-- 定义一个选择列（type="selection"），用于多选操作，宽度为60px，内容居中对齐 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 定义表格列“编号”，宽度为100px，内容居中对齐，通过插槽（slot-scope）展示对应行数据中的id属性 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 定义表格列“优惠劵名称”，内容居中对齐，通过插槽展示对应行数据中的name属性 -->
<el-table-column label="优惠劵名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 定义表格列“优惠券类型”，宽度为100px，内容居中对齐，通过双花括号插值表达式绑定对应行数据中的type属性，并使用formatType过滤器格式化显示内容 -->
<el-table-column label="优惠券类型" width="100" align="center">
<template slot-scope="scope">{{scope.row.type | formatType}}</template>
</el-table-column>
<!-- 定义表格列“可使用商品”，宽度为100px，内容居中对齐，通过双花括号插值表达式绑定对应行数据中的useType属性，并使用formatUseType过滤器格式化显示内容 -->
<el-table-column label="可使用商品" width="100" align="center">
<template slot-scope="scope">{{scope.row.useType | formatUseType}}</template>
</el-table-column>
<!-- 定义表格列“使用门槛”，宽度为140px，内容居中对齐，通过插槽展示使用门槛相关文本，格式为“满XX元可用”，其中XX为对应行数据中的minPoint属性值 -->
<el-table-column label="使用门槛" width="140" align="center">
<template slot-scope="scope">满{{scope.row.minPoint}}元可用</template>
</el-table-column>
<!-- 定义表格列“面值”，宽度为100px，内容居中对齐，通过插槽展示对应行数据中的amount属性值，并添加“元”字作为后缀 -->
<el-table-column label="面值" width="100" align="center">
<template slot-scope="scope">{{scope.row.amount}}元</template>
</el-table-column>
<!-- 定义表格列“适用平台”，宽度为100px，内容居中对齐，通过双花括号插值表达式绑定对应行数据中的platform属性，并使用formatPlatform过滤器格式化显示内容 -->
<el-table-column label="适用平台" width="100" align="center">
<template slot-scope="scope">{{scope.row.platform | formatPlatform}}</template>
</el-table-column>
<!-- 定义表格列“有效期”，宽度为180px，内容居中对齐，通过双花括号插值表达式分别绑定对应行数据中的startTime和endTime属性，并使用formatDate过滤器格式化显示日期内容，中间用“至”字连接 -->
<el-table-column label="有效期" width="180" align="center">
<template slot-scope="scope">{{scope.row.startTime|formatDate}}至{{scope.row.endTime|formatDate}}</template>
</el-table-column>
<!-- 定义表格列“状态”，宽度为100px，内容居中对齐，通过双花括号插值表达式绑定对应行数据中的endTime属性，并使用formatStatus过滤器根据日期判断并格式化显示优惠券状态 -->
<el-table-column label="状态" width="100" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatStatus}}</template>
</el-table-column>
<!-- 定义表格列“操作”，宽度为180px，内容居中对齐，通过插槽在单元格内放置多个按钮，分别点击按钮触发对应的操作方法（handleView、handleUpdate、handleDelete） -->
<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>
</template>
</el-table-column>
</el-table>
</div>
<!-- 创建一个用于放置分页组件的容器div -->
<div class="pagination-container">
<!-- 使用el-pagination组件实现分页功能，设置背景色（background），绑定页面尺寸改变（size-change）和当前页改变（current-change）的事件处理方法，配置分页布局、当前页、每页数量、可选页面尺寸列表以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5, 10, 15]"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 从@/api/coupon模块中导入获取优惠券列表（fetchList）和删除优惠券（deleteCoupon）的相关函数
import {fetchList, deleteCoupon} from '@/api/coupon';
// 从@/utils/date文件中导入formatDate函数，用于格式化日期数据展示
import {formatDate} from '@/utils/date';
// 定义默认的列表查询参数对象，包含页码、每页数量、优惠券名称、优惠券类型等属性的初始值，用于构建查询优惠券列表的条件
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
name: null,
type: null
};
// 定义默认的优惠券类型选项数组，每个选项包含标签和值属性，用于在优惠券类型选择组件中展示选项以及在格式化显示时进行对应转换
const defaultTypeOptions = [
{
label: '全场赠券',
value: 0
},
{
label: '会员赠券',
value: 1
},
{
label: '购物赠券',
value: 2
},
{
label: '注册赠券',
value: 3
}
];
export default
name: 'couponList',
data() {
return {
// 列表查询参数对象，初始化为defaultListQuery的副本，用于动态构建查询条件
listQuery: Object.assign({}, defaultListQuery),
// 优惠券类型选项数组，初始化为defaultTypeOptions的副本，用于在相关选择组件中展示选项
typeOptions: Object.assign({}, defaultTypeOptions),
// 用于存储获取到的优惠券列表数据
list: null,
// 用于存储符合查询条件的优惠券总条数
total: null,
// 用于标识当前是否正在加载数据（如获取列表数据时）的布尔值，控制页面加载提示效果
listLoading: false,
// 用于存储用户在表格中多选的行数据，通过监听表格的selection-change事件来更新
multipleSelection: []
}
},
created() {
// 在组件创建时，调用getList方法获取优惠券列表数据
this.getList();
},
filters: {
// 过滤器函数formatType，用于根据传入的优惠券类型值（type），在defaultTypeOptions数组中查找对应的标签并返回，若未找到则返回空字符串，主要用于格式化优惠券类型数据的展示
formatType(type) {
for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) {
return defaultTypeOptions[i].label;
}
}
return '';
},
// 过滤器函数formatUseType，根据传入的可使用商品类型值（useType）返回对应的文本描述，用于格式化可使用商品类型数据展示
formatUseType(useType) {
if (useType === 0) {
return '全场通用';
} else if (useType === 1) {
return '指定分类';
} else {
return '指定商品';
}
},
// 过滤器函数formatPlatform，根据传入的平台值（platform）返回对应的平台名称描述，用于格式化适用平台数据展示
formatPlatform(platform) {
if (platform === 1) {
return '移动平台';
} else if (platform === 2) {
return 'PC平台';
} else {
return '全平台';
}
},
// 过滤器函数formatDate，用于格式化日期数据展示，如果传入的时间为空或null则返回N/A，否则调用formatDate函数（从外部导入的那个）将时间转换为指定格式（'yyyy-MM-dd'）的字符串进行展示
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) {
return '未过期'
} else {
return '已过期';
}
}
},
methods:
// 重置筛选搜索条件的方法，将列表查询参数重置为默认值（defaultListQuery的副本）
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 执行查询搜索操作的方法，先将页码重置为1，然后调用getList方法重新获取符合条件的优惠券列表数据
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// 处理表格行选择改变事件的方法，将用户选择的行数据赋值给multipleSelection数组，方便后续进行批量操作等逻辑处理
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 处理页面尺寸改变事件的方法，先将页码重置为1，更新列表查询参数中的每页数量为新的值（val），然后调用getList方法重新获取优惠券列表数据
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理当前页改变事件的方法，更新列表查询参数中的页码为新的值（val），然后调用getList方法重新获取优惠券列表数据
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// 处理添加按钮点击事件的方法，通过路由跳转（$router.push）到添加优惠券的页面（'/sms/addCoupon'）
handleAdd() {
this.$router.push({path: '/sms/addCoupon'})
},
// 处理查看按钮点击事件的方法，通过路由跳转（$router.push）到优惠券历史记录页面（'/sms/couponHistory'），并传递当前行对应的优惠券ID（row.id）作为查询参数
handleView(index, row) {
this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
},
// 处理编辑按钮点击事件的方法，通过路由跳转（$router.push）到编辑优惠券的页面（'/sms/updateCoupon'），并传递当前行对应的优惠券ID（row.id）作为查询参数
handleUpdate(index, row) {
this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
},
// 处理删除按钮点击事件的方法，先弹出确认框（$confirm）询问是否进行删除操作，在用户确认后调用deleteCoupon函数删除指定ID（row.id）的优惠券，删除成功后显示提示消息（$message）并调用getList方法重新获取优惠券列表数据
handleDelete(index, row) {
this.$confirm('是否进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteCoupon(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
})
},
// 获取优惠券列表数据的方法

29
sms/coupon/update.vue
Unescape View File

@ -0,0 +1,29 @@
<template> 
<coupon-detail :isEdit="true"></coupon-detail>
</template>
<script>
import CouponDetail from './components/CouponDetail'
export default {
name: 'updateCoupon',
components: { CouponDetail }
}
</script>
<style scoped>
</style>
#abc
<template>
<!-- 使用CouponDetail组件来展示编辑优惠券的相关界面，通过属性绑定将isEdit设置为true，表示当前处于编辑优惠券的状态 -->
<coupon-detail :isEdit="true"></coupon-detail>
</template>
<script>
// 从相对路径下的./components/CouponDetail文件中导入CouponDetail组件，这里假设CouponDetail是一个自定义的Vue组件，用于构建优惠券相关的表单等功能模块，在编辑优惠券场景下也会复用该组件相关的功能
import CouponDetail from './components/CouponDetail'
export default {
name: 'updateCoupon',
// 在组件的components选项中注册CouponDetail组件，这样在当前组件的模板（template）中就可以使用<coupon-detail>标签来调用该组件了，方便复用已有的组件逻辑来实现编辑优惠券的页面展示和交互功能
components: { CouponDetail }
}
</script>

655
sms/flash/index.vue
Unescape View File

@ -0,0 +1,655 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="活动名称：">
<el-input v-model="listQuery.keyword" class="input-width" placeholder="活动名称" clearable></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加活动</el-button>
<el-button size="mini" class="btn-add" @click="handleShowSessionList()">秒杀时间段列表</el-button>
</el-card>
<div class="table-container">
<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>
</el-table-column>
<el-table-column label="活动标题" align="center">
<template slot-scope="scope">{{scope.row.title}}</template>
</el-table-column>
<el-table-column label="活动状态" width="140" align="center">
<template slot-scope="scope">{{scope.row |formatActiveStatus}}</template>
</el-table-column>
<el-table-column label="开始时间" width="140" align="center">
<template slot-scope="scope">{{scope.row.startDate | formatDate}}</template>
</el-table-column>
<el-table-column label="结束时间" width="140" align="center">
<template slot-scope="scope">{{scope.row.endDate | formatDate}}</template>
</el-table-column>
<el-table-column label="上线/下线" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleSelectSession(scope.$index, scope.row)">设置商品
</el-button>
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
<el-dialog
title="添加活动"
:visible.sync="dialogVisible"
width="40%">
<el-form :model="flashPromotion"
ref="flashPromotionForm"
label-width="150px" size="small">
<el-form-item label="活动标题：">
<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"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间：">
<el-date-picker
v-model="flashPromotion.endDate"
type="date"
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>
<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';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
const defaultFlashPromotion = {
id: null,
title: null,
startDate: null,
endDate: null,
status: 0
};
export default {
name: 'flashPromotionList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: false,
dialogVisible: false,
flashPromotion: Object.assign({}, defaultFlashPromotion),
isEdit: false
}
},
created() {
this.getList();
},
filters: {
formatActiveStatus(row) {
let nowDate = new Date();
let startDate = new Date(row.startDate);
let endDate = new Date(row.endDate);
if (nowDate.getTime() >= startDate.getTime() && nowDate.getTime() <= endDate.getTime()) {
return '活动进行中';
} else if (nowDate.getTime() > endDate.getTime()) {
return '活动已结束';
} else {
return '活动未开始';
}
},
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
}
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.flashPromotion = Object.assign({},defaultFlashPromotion);
},
handleShowSessionList() {
this.$router.push({path: '/sms/flashSession'})
},
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消修改'
});
this.getList();
});
},
handleDelete(index, row) {
this.$confirm('是否要删除该活动?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFlash(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.flashPromotion = Object.assign({},row);
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateFlash(this.flashPromotion.id,this.flashPromotion).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createFlash(this.flashPromotion).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
handleSelectSession(index,row){
this.$router.push({path:'/sms/selectSession',query:{flashPromotionId:row.id}})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
}
}
</script>
<style></style>
#abc
<template>
<!-- 创建一个类名为 `app-container` 的 `div` 元素，作为整个页面的容器，用于布局和包裹内部的各个模块 -->
<div class="app-container">
<!-- 使用 `el-card` 组件创建一个筛选搜索的容器，设置阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 使用 `el-icon-search` 图标表示搜索图标 -->
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<!-- 创建一个查询搜索按钮，设置按钮靠右浮动，样式为主要按钮（`type="primary"`），尺寸为小（`size="small"`），点击按钮时触发 `handleSearchList` 方法 -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 创建一个重置按钮，设置按钮靠右浮动且右边距为 `15px`，尺寸为小（`size="small"`），点击按钮时触发 `handleResetSearch` 方法 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 创建一个内联表单（`:inline="true"`），绑定数据模型为 `listQuery`，设置表单尺寸为小（`size="small"`），标签宽度为 `140px` -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单中“活动名称”输入的表单项，通过 `v-model` 双向绑定数据到 `listQuery.keyword`，设置输入框宽度样式类为 `input-width`，添加占位提示文本，支持清空输入框内容（`clearable`） -->
<el-form-item label="活动名称：">
<el-input v-model="listQuery.keyword" class="input-width" placeholder="活动名称" clearable></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 使用 `el-card` 组件创建一个操作相关的容器，设置阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 使用 `el-icon-tickets` 图标表示相关图标 -->
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 创建一个添加活动的按钮，设置按钮尺寸为迷你（`size="mini"`），样式类为 `btn-add`，点击按钮时触发 `handleAdd` 方法，设置左边距为 `20px` -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加活动</el-button>
<!-- 创建一个查看秒杀时间段列表的按钮，设置按钮尺寸为迷你（`size="mini"`），样式类为 `btn-add`，点击按钮时触发 `handleShowSessionList` 方法 -->
<el-button size="mini" class="btn-add" @click="handleShowSessionList()">秒杀时间段列表</el-button>
</el-card>
<!-- 创建一个用于展示活动数据表格的容器 `div` -->
<div class="table-container">
<!-- 使用 `el-table` 组件展示活动数据列表，绑定数据来源为 `list`，设置宽度为 `100%`，通过 `v-loading` 指令绑定加载状态为 `listLoading`，显示表格边框 -->
<el-table ref="flashTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 定义一个选择列（`type="selection"`），用于多选操作，宽度为 `60px`，内容居中对齐 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 定义表格列“编号”，宽度为 `100px`，内容居中对齐，通过插槽（`slot-scope`）展示对应行数据中的 `id` 属性 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 定义表格列“活动标题”，内容居中对齐，通过插槽展示对应行数据中的 `title` 属性 -->
<el-table-column label="活动标题" align="center">
<template slot-scope="scope">{{scope.row.title}}</template>
</el-table-column>
<!-- 定义表格列“活动状态”，宽度为 `140px`，内容居中对齐，通过双花括号插值表达式绑定对应行数据，并使用 `formatActiveStatus` 过滤器根据时间判断并格式化显示活动状态 -->
<el-table-column label="活动状态" width="140" align="center">
<template slot-scope="scope">{{scope.row |formatActiveStatus}}</template>
</el-table-column>
<!-- 定义表格列“开始时间”，宽度为 `140px`，内容居中对齐，通过双花括号插值表达式绑定对应行数据中的 `startDate` 属性，并使用 `formatDate` 过滤器格式化显示日期内容 -->
<el-table-column label="开始时间" width="140" align="center">
<template slot-scope="scope">{{scope.row.startDate | formatDate}}</template>
</el-table-column>
<!-- 定义表格列“结束时间”，宽度为 `140px`，内容居中对齐，通过双花括号插值表达式绑定对应行数据中的 `endDate` 属性，并使用 `formatDate` 过滤器格式化显示日期内容 -->
<el-table-column label="结束时间" width="140" align="center">
<template slot-scope="scope">{{scope.row.endDate | formatDate}}</template>
</el-table-column>
<!-- 定义表格列“上线/下线”，宽度为 `200px`，内容居中对齐，在单元格内使用 `el-switch` 组件实现开关功能，绑定 `change` 事件到 `handleStatusChange` 方法，设置开关的激活值和未激活值，双向绑定数据到对应行数据的 `status` 属性 -->
<el-table-column label="上线/下线" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<!-- 定义表格列“操作”，宽度为 `180px`，内容居中对齐，通过插槽在单元格内放置多个按钮，分别点击按钮触发对应的操作方法（`handleSelectSession`、`handleUpdate`、`handleDelete`） -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleSelectSession(scope.$index, scope.row)">设置商品
</el-button>
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 创建一个用于放置分页组件的容器 `div` -->
<div class="pagination-container">
<!-- 使用 `el-pagination` 组件实现分页功能，设置背景色（`background`），绑定页面尺寸改变（`size-change`）和当前页改变（`current-change`）的事件处理方法，配置分页布局、当前页、每页数量、可选页面尺寸列表以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5, 10, 15]"
:total="total">
</el-pagination>
</div>
<!-- 使用 `el-dialog` 组件创建一个对话框，用于添加或编辑活动的相关操作，绑定对话框的显示状态为 `dialogVisible`，设置标题为“添加活动”，宽度为页面宽度的 `40%` -->
<el-dialog
title="添加活动"
:visible.sync="dialogVisible"
width="40%">
<!-- 在对话框内创建一个表单，绑定数据模型为 `flashPromotion`，设置表单引用为 `flashPromotionForm`，标签宽度为 `150px`，尺寸为小（`size="small"`） -->
<el-form :model="flashPromotion"
ref="flashPromotionForm"
label-width="150px" size="small">
<!-- 表单中“活动标题”输入的表单项，通过 `v-model` 双向绑定数据到 `flashPromotion.title`，设置输入框宽度为 `250px` -->
<el-form-item label="活动标题：">
<el-input v-model="flashPromotion.title" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单中“开始时间”选择的表单项，使用 `el-date-picker` 组件选择日期，双向绑定数据到 `flashPromotion.startDate`，设置类型为 `date`，添加占位提示文本 -->
<el-form-item label="开始时间：">
<el-date-picker
v-model="flashPromotion.startDate"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<!-- 表单中“结束时间”选择的表单项，使用 `el-date-picker` 组件选择日期，双向绑定数据到 `flashPromotion.endDate`，设置类型为 `date`，添加占位提示文本 -->
<el-form-item label="结束时间：">
<el-date-picker
v-model="flashPromotion.endDate"
type="date"
placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<!-- 表单中“上线/下线”选择的表单项，使用 `el-radio-group` 组件实现单选功能，双向绑定数据到 `flashPromotion.status` -->
<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>
<!-- 在对话框的底部插槽（`slot="footer"`）内添加两个按钮，分别用于取消和确定操作，点击取消按钮隐藏对话框，点击确定按钮触发 `handleDialogConfirm` 方法 -->
<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>
// 从'@/api/flash'模块中导入多个与活动管理相关的函数，分别用于获取活动列表、更新活动状态、删除活动、创建活动以及更新活动信息
import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
// 从'@/utils/date'文件中导入formatDate函数，用于对日期数据进行格式化处理，以便在页面上合适地展示日期格式
import {formatDate} from '@/utils/date';
// 定义默认的列表查询参数对象，用于初始化查询活动列表时的相关参数
const defaultListQuery = {
pageNum: 1, // 初始页码设置为1，表示默认从第一页开始获取数据
pageSize: 5, // 每页显示的记录数量初始设置为5条
keyword: null // 用于搜索活动名称的关键字，初始为空，代表不进行特定名称搜索
};
// 定义默认的活动对象数据结构，用于初始化添加或编辑活动时的相关数据字段
const defaultFlashPromotion = {
id: null, // 活动的唯一标识符，初始为null，在创建新活动时会由后端生成或后续编辑时获取对应的值
title: null, // 活动标题，初始为空，等待用户输入
startDate: null, // 活动开始时间，初始为空，需要通过日期选择组件选择具体时间
endDate: null, // 活动结束时间，初始为空，同样需通过日期选择组件选择
status: 0 // 活动状态，初始设为0，可能代表下线等初始状态，具体含义由业务逻辑决定
};
export default {
name: 'flashPromotionList',
data() {
return {
// 列表查询参数对象，通过Object.assign将其初始化为defaultListQuery的副本，后续可根据用户操作动态改变查询条件
listQuery: Object.assign({}, defaultListQuery),
// 用于存储从后端获取到的活动列表数据，初始为null，等待通过调用接口获取数据后填充
list: null,
// 用于存储符合当前查询条件的活动总条数，初始为null，同样在获取数据后更新相应的值
total: null,
// 用于标识当前是否正在加载数据（例如正在获取活动列表数据时），布尔值，初始设为false，在发起获取数据请求时设为true，数据获取完成后再设回false，可用于控制页面加载提示效果等
listLoading: false,
// 用于控制添加/编辑活动对话框的显示与隐藏，布尔类型，初始为false表示对话框默认不显示，在相应操作触发时设为true来显示对话框
dialogVisible: false,
// 用于存储当前正在操作（添加或编辑）的活动数据对象，初始化为defaultFlashPromotion的副本，方便在表单中进行数据绑定和操作，后续根据实际情况更新相应字段的值
flashPromotion: Object.assign({}, defaultFlashPromotion),
// 用于标识当前是编辑状态（true）还是添加状态（false）的布尔值，初始设为false，表示默认处于添加活动的操作场景，根据用户点击编辑或添加按钮来相应改变该值
isEdit: false
}
},
created() {
// 在组件创建完成后，立即调用getList方法，用于从后端获取活动列表数据，完成页面的初始数据加载
this.getList();
},
filters: {
// 过滤器函数formatActiveStatus，用于根据活动的开始时间、结束时间与当前时间的比较，来格式化显示活动的状态
formatActiveStatus(row) {
let nowDate = new Date(); // 获取当前系统时间
let startDate = new Date(row.startDate); // 将活动开始时间转换为Date对象，方便后续比较
let endDate = new Date(row.endDate); // 将活动结束时间转换为Date对象
// 判断当前时间是否在活动开始时间和结束时间之间，如果是，则活动处于进行中状态
if (nowDate.getTime() >= startDate.getTime() && nowDate.getTime() <= endDate.getTime()) {
return '活动进行中';
}
// 如果当前时间大于活动结束时间，说明活动已结束
else if (nowDate.getTime() > endDate.getTime()) {
return '活动已结束';
}
// 否则，活动尚未开始
else {
return '活动未开始';
}
},
// 过滤器函数formatDate，用于对日期数据进行格式化处理，如果传入的时间为空或null，则返回'N/A'表示无可用日期数据，否则调用外部导入的formatDate函数将时间格式化为'yyyy-MM-dd'的字符串形式返回
formatDate(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
}
},
methods: {
// 重置筛选搜索条件的方法，将列表查询参数恢复为默认值，即重新初始化为defaultListQuery的副本，方便用户重新进行无筛选条件的查询或者清除之前设置的筛选条件
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// 处理查询搜索按钮点击事件的方法，先将列表查询参数中的页码重置为1，然后调用getList方法，根据当前设置的查询条件（包含可能已设置的keyword等）重新从后端获取活动列表数据
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// 处理页面尺寸改变事件的方法（例如用户选择每页显示不同数量的记录时触发），先将页码重置为1，接着更新列表查询参数中的每页数量为新传入的值（val），最后调用getList方法重新获取符合新条件的活动列表数据
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理当前页改变事件的方法（例如用户点击分页组件切换到不同页码时触发），更新列表查询参数中的页码为新传入的值（val），然后调用getList方法获取对应页码的活动列表数据
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// 处理添加活动按钮点击事件的方法，将dialogVisible设为true，使添加活动的对话框显示出来，同时将isEdit设为false，表明当前处于添加新活动的操作场景，并且把flashPromotion数据重置为defaultFlashPromotion的副本，清空之前可能存在的临时数据，准备新的添加操作
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.flashPromotion = Object.assign({},defaultFlashPromotion);
},
// 处理查看秒杀时间段列表按钮点击事件的方法，通过Vue Router的push方法进行路由跳转，跳转到'/sms/flashSession'路径对应的页面，可能用于展示与该活动相关的秒杀时间段信息
handleShowSessionList() {
this.$router.push({path: '/sms/flashSession'})
},
// 处理活动状态改变事件的方法（例如用户操作上线/下线开关改变活动状态时触发），首先弹出确认框询问用户是否要修改该状态，在用户确认后，调用updateStatus函数，传入活动的id以及包含新状态的对象，向后端发起更新活动状态的请求，若请求成功则显示修改成功的提示消息；如果用户取消操作，则显示取消修改的提示消息，并重新调用getList方法刷新活动列表数据，以确保页面数据的一致性
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消修改'
});
this.getList();
});
},
// 处理删除活动按钮点击事件的方法，弹出确认框询问用户是否要删除该活动，在用户确认后，调用deleteFlash函数传入活动的id向后端发起删除活动的请求，若请求成功则显示删除成功的提示消息，并调用getList方法重新获取活动列表数据，刷新页面展示的活动信息
handleDelete(index, row) {
this.$confirm('是否要删除该活动?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFlash(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
// 处理编辑活动按钮点击事件的方法，将dialogVisible设为true，使编辑活动的对话框显示出来，同时将isEdit设为true，表明当前处于编辑已有活动的操作场景，并且把flashPromotion数据通过Object.assign复制为当前行对应的活动数据（row），以便在对话框的表单中展示原活动数据供用户编辑
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.flashPromotion = Object.assign({},row);
},
// 处理添加/编辑活动对话框中确定按钮点击事件的方法，首先弹出确认框询问用户是否要确认操作，在用户确认后，根据isEdit的值判断当前是编辑还是添加操作，如果是编辑操作，则调用updateFlash函数传入活动的id和当前编辑后的flashPromotion数据向后端发起更新活动信息的请求，若请求成功则显示修改成功的提示消息，关闭对话框并重新调用getList方法刷新页面数据；如果是添加操作，则调用createFlash函数传入flashPromotion数据向后端发起创建新活动的请求，同样在请求成功后显示添加成功的提示消息，关闭对话框并刷新页面数据
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateFlash(this.flashPromotion.id,this.flashPromotion).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createFlash(this.flashPromotion).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
// 处理设置商品按钮点击事件的方法（可能用于为活动关联相关商品等操作），通过Vue Router的push方法进行路由跳转，跳转到'/sms/selectSession'路径对应的页面，并传递当前活动的id作为查询参数（query），以便在对应页面获取并使用该活动的相关信息进行后续操作
handleSelectSession(index,row){
this.$router.push({path:'/sms/selectSession',query:{flashPromotionId:row.id}})
},
// 获取活动列表数据的方法，首先将listLoading设为true，表示开始加载数据，可用于在页面上显示加载提示效果（如加载动画等），然后调用fetchList函数传入当前的列表查询参数（listQuery）向后端发起获取活动列表数据的请求，在请求成功的回调函数中，将listLoading设回false表示数据加载完成，同时将获取到的活动列表数据赋值给list属性，将总条数赋值给total属性，用于在页面上展示相应的数据和分页信息
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
}
}
</script>
<style></style>

682
sms/flash/productRelationList.vue
Unescape View File

@ -0,0 +1,682 @@
<template> 
<div class="app-container">
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleSelectProduct()" style="margin-left: 20px">添加</el-button>
</el-card>
<div class="table-container">
<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>
</el-table-column>
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.product.name}}</template>
</el-table-column>
<el-table-column label="货号" width="140" align="center">
<template slot-scope="scope">NO.{{scope.row.product.productSn}}</template>
</el-table-column>
<el-table-column label="商品价格" width="100" align="center">
<template slot-scope="scope">￥{{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>
</el-table-column>
<el-table-column label="秒杀价格" width="100" align="center">
<template slot-scope="scope">
<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>
</el-table-column>
<el-table-column label="限购数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.flashPromotionLimit}}</template>
</el-table-column>
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="total">
</el-pagination>
</div>
<el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
<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="160" align="center">
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column>
<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
background
@size-change="handleDialogSizeChange"
@current-change="handleDialogCurrentChange"
layout="prev, pager, next"
:current-page.sync="dialogData.listQuery.pageNum"
:page-size="dialogData.listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="dialogData.total">
</el-pagination>
</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="editDialogVisible"
width="40%">
<el-form :model="flashProductRelation"
ref="flashProductRelationForm"
label-width="150px" size="small">
<el-form-item label="商品名称：">
<span>{{flashProductRelation.product.name}}</span>
</el-form-item>
<el-form-item label="货号：">
<span>NO.{{flashProductRelation.product.productSn}}</span>
</el-form-item>
<el-form-item label="商品价格：">
<span>￥{{flashProductRelation.product.price}}</span>
</el-form-item>
<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>
<el-form-item label="秒杀数量：">
<el-input v-model="flashProductRelation.flashPromotionCount" class="input-width"></el-input>
</el-form-item>
<el-form-item label="限购数量：">
<el-input v-model="flashProductRelation.flashPromotionLimit" class="input-width"></el-input>
</el-form-item>
<el-form-item label="排序：">
<el-input v-model="flashProductRelation.sort" class="input-width"></el-input>
</el-form-item>
</el-form>
<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 = {
pageNum: 1,
pageSize: 5,
flashPromotionId: null,
flashPromotionSessionId: null
};
export default {
name:'flashPromotionProductRelationList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: false,
dialogVisible: false,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
pageNum: 1,
pageSize: 5
}
},
editDialogVisible:false,
flashProductRelation:{
product:{}
}
}
},
created(){
this.listQuery.flashPromotionId=this.$route.query.flashPromotionId;
this.listQuery.flashPromotionSessionId=this.$route.query.flashPromotionSessionId;
this.getList();
},
methods:{
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
},
handleUpdate(index,row){
this.editDialogVisible = true;
this.flashProductRelation = Object.assign({},row);
},
handleDelete(index,row){
this.$confirm('是否要删除该商品?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFlashProductRelation(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId:this.dialogData.multipleSelection[i].id,
flashPromotionId:this.listQuery.flashPromotionId,
flashPromotionSessionId:this.listQuery.flashPromotionSessionId
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createFlashProductRelation(selectProducts).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
},
handleEditDialogConfirm(){
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateFlashProductRelation(this.flashProductRelation.id,this.flashProductRelation).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.editDialogVisible =false;
this.getList();
})
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
</script>
<style scoped>
.operate-container{
margin-top: 0;
}
.input-width{
width: 200px;
}
</style>
#abc
<template>
<!-- 创建一个类名为 `app-container` 的 `div` 元素，作为整个页面的容器，用于布局和包裹内部的各个模块 -->
<div class="app-container">
<!-- 使用 `el-card` 组件创建一个操作相关的容器，设置阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 使用 `el-icon-tickets` 图标表示相关图标 -->
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 创建一个添加按钮，设置按钮尺寸为迷你（`size="mini"`），样式类为 `btn-add`，点击按钮时触发 `handleSelectProduct` 方法，设置左边距为 `20px` -->
<el-button size="mini" class="btn-add" @click="handleSelectProduct()" style="margin-left: 20px">添加</el-button>
</el-card>
<!-- 创建一个用于展示商品相关数据表格的容器 `div` -->
<div class="table-container">
<!-- 使用 `el-table` 组件展示商品数据列表，绑定数据来源为 `list`，设置宽度为 `100%`，通过 `v-loading` 指令绑定加载状态为 `listLoading`，显示表格边框 -->
<el-table ref="productRelationTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 定义表格列“编号”，宽度为 `100px`，内容居中对齐，通过插槽（`slot-scope`）展示对应行数据中的 `id` 属性 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 定义表格列“商品名称”，内容居中对齐，通过插槽展示对应行数据中 `product` 对象的 `name` 属性 -->
<el-table-column label="商品名称" align="center">
<template slot-scope="scope">{{scope.row.product.name}}</template>
</el-table-column>
<!-- 定义表格列“货号”，宽度为 `140px`，内容居中对齐，通过插槽展示对应行数据中 `product` 对象的 `productSn` 属性，并添加前缀 `NO.` -->
<el-table-column label="货号" width="140" align="center">
<template slot-scope="scope">NO.{{scope.row.product.productSn}}</template>
</el-table-column>
<!-- 定义表格列“商品价格”，宽度为 `100px`，内容居中对齐，通过插槽展示对应行数据中 `product` 对象的 `price` 属性，并添加前缀 `￥` -->
<el-table-column label="商品价格" width="100" align="center">
<template slot-scope="scope">￥{{scope.row.product.price}}</template>
</el-table-column>
<!-- 定义表格列“剩余数量”，宽度为 `100px`，内容居中对齐，通过插槽展示对应行数据中 `product` 对象的 `stock` 属性 -->
<el-table-column label="剩余数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.product.stock}}</template>
</el-table-column>
<!-- 定义表格列“秒杀价格”，宽度为 `100px`，内容居中对齐，通过 `v-if` 指令判断对应行数据中 `flashPromotionPrice` 属性是否不为 `null`，如果是则展示该价格，并添加前缀 `￥` -->
<el-table-column label="秒杀价格" width="100" align="center">
<template slot-scope="scope">
<p v-if="scope.row.flashPromotionPrice!==null">
￥{{scope.row.flashPromotionPrice}}
</p>
</template>
</el-table-column>
<!-- 定义表格列“秒杀数量”，宽度为 `100px`，内容居中对齐，通过插槽展示对应行数据中的 `flashPromotionCount` 属性 -->
<el-table-column label="秒杀数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.flashPromotionCount}}</template>
</el-table-column>
<!-- 定义表格列“限购数量”，宽度为 `100px`，内容居中对齐，通过插槽展示对应行数据中的 `flashPromotionLimit` 属性 -->
<el-table-column label="限购数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.flashPromotionLimit}}</template>
</el-table-column>
<!-- 定义表格列“排序”，宽度为 `100px`，内容居中对齐，通过插槽展示对应行数据中的 `sort` 属性 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 定义表格列“操作”，宽度为 `100px`，内容居中对齐，通过插槽在单元格内放置多个按钮，分别点击按钮触发对应的操作方法（`handleUpdate`、`handleDelete`） -->
<el-table-column label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 创建一个用于放置分页组件的容器 `div` -->
<div class="pagination-container">
<!-- 使用 `el-pagination` 组件实现分页功能，设置背景色（`background`），绑定页面尺寸改变（`size-change`）和当前页改变（`current-change`）的事件处理方法，配置分页布局、当前页、每页数量、可选页面尺寸列表以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5, 10, 15]"
:total="total">
</el-pagination>
</div>
<!-- 使用 `el-dialog` 组件创建一个对话框，用于选择商品的相关操作，绑定对话框的显示状态为 `selectDialogVisible`，设置标题为“选择商品”，宽度为页面宽度的 `50%` -->
<el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
<!-- 创建一个输入框，双向绑定数据到 `dialogData.listQuery.keyword`，设置宽度为 `250px`，下外边距为 `20px`，尺寸为小（`size="small"`），添加占位提示文本，在输入框右侧添加一个搜索图标按钮，点击按钮触发 `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>
<!-- 使用 `el-table` 组件在对话框内展示可选择的商品列表，绑定数据来源为 `dialogData.list`，绑定选择改变事件到 `handleDialogSelectionChange` 方法，显示表格边框 -->
<el-table :data="dialogData.list"
@selection-change="handleDialogSelectionChange" border>
<!-- 定义一个选择列（`type="selection"`），用于多选操作，宽度为 `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`，用于对选择商品的列表进行分页操作 -->
<div class="pagination-container">
<!-- 使用 `el-pagination` 组件实现分页功能，设置背景色（`background`），绑定页面尺寸改变（`size-change`）和当前页改变（`current-change`）的事件处理方法，配置分页布局、当前页、每页数量、可选页面尺寸列表以及总记录数等属性，这里的相关属性绑定到 `dialogData` 中的对应分页参数 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@current-change="handleDialogCurrentChange"
layout="prev, pager, next"
:current-page.sync="dialogData.listQuery.pageNum"
:page-size="dialogData.listQuery.pageSize"
:page-sizes="[5, 10, 15]"
:total="dialogData.total">
</el-pagination>
</div>
<!-- 清除浮动，确保后续元素布局不受影响 -->
<div style="clear: both;"></div>
<!-- 在对话框的底部插槽（`slot="footer"`）内添加两个按钮，分别用于取消和确定操作，点击取消按钮隐藏对话框，点击确定按钮触发 `handleSelectDialogConfirm` 方法 -->
<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` 组件创建一个对话框，用于编辑秒杀商品信息的相关操作，绑定对话框的显示状态为 `editDialogVisible`，设置标题为“编辑秒杀商品信息”，宽度为页面宽度的 `40%` -->
<el-dialog title="编辑秒杀商品信息"
:visible.sync="editDialogVisible"
width="40%">
<!-- 在对话框内创建一个表单，绑定数据模型为 `flashProductRelation`，设置表单引用为 `flashProductRelationForm`，标签宽度为 `150px`，尺寸为小（`size="small"`） -->
<el-form :model="flashProductRelation"
ref="flashProductRelationForm"
label-width="150px" size="small">
<!-- 表单中“商品名称”显示的表单项，通过 `span` 标签展示对应 `flashProductRelation` 中 `product` 对象的 `name` 属性，此处为只读展示，不进行输入操作 -->
<el-form-item label="商品名称：">
<span>{{flashProductRelation.product.name}}</span>
</el-form-item>
<!-- 表单中“货号”显示的表单项，通过 `span` 标签展示对应 `flashProductRelation` 中 `product` 对象的 `productSn` 属性，添加前缀 `NO.`，同样为只读展示 -->
<el-form-item label="货号：">
<span>NO.{{flashProductRelation.product.productSn}}</span>
</el-form-item>
<!-- 表单中“商品价格”显示的表单项，通过 `span` 标签展示对应 `flashProductRelation` 中 `product` 对象的 `price` 属性，添加前缀 `￥`，也是只读展示 -->
<el-form-item label="商品价格：">
<span>￥{{flashProductRelation.product.price}}</span>
</el-form-item>
<!-- 表单中“秒杀价格”输入的表单项，通过 `el-input` 组件双向绑定数据到 `flashProductRelation.flashPromotionPrice`，设置输入框宽度样式类为 `input-width`，并在输入框前添加前缀 `￥` -->
<el-form-item label="秒杀价格：">
<el-input v-model="flashProductRelation.flashPromotionPrice" class="input-width">
<template slot="prepend">￥</template>
</el-input>
</el-form-item>
<!-- 表单中“剩余数量”显示的表单项，通过 `span` 标签展示对应 `flashProductRelation` 中 `product` 对象的 `stock` 属性，为只读展示 -->
<el-form-item label="剩余数量：">
<span>{{flashProductRelation.product.stock}}</span>
</el-form-item>
<!-- 表单中“秒杀数量”输入的表单项，通过 `el-input` 组件双向绑定数据到 `flashProductRelation.flashPromotionCount`，设置输入框宽度样式类为 `input-width` -->
<el-form-item label="秒杀数量：">
<el-input v-model="flashProductRelation.flashPromotionCount" class="input-width"></el-input>
</el-form-item>
<!-- 表单中“限购数量”输入的表单项，通过 `el-input` 组件双向绑定数据到 `flashProductRelation.flashPromotionLimit`，设置输入框宽度样式类为 `input-width` -->
<el-form-item label="限购数量：">
<el-input v-model="flashProductRelation.flashPromotionLimit" class="input-width"></el-input>
</el-form-item>
<!-- 表单中“排序”输入的表单项，通过 `el-input` 组件双向绑定数据到 `flashProductRelation.sort`，设置输入框宽度样式类为 `input-width` -->
<el-form-item label="排序：">
<el-input v-model="flashProductRelation.sort" class="input-width"></el-input>
</el-form-item>
</el-form>
<!-- 在对话框的底部插槽（`slot="footer"`）内添加两个按钮，分别用于取消和确定操作，点击取消按钮隐藏对话框，点击确定按钮触发 `handleEditDialogConfirm` 方法 -->
<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>
// 从'@/api/flashProductRelation'模块中导入多个函数，分别用于获取商品关系列表（fetchList）、创建商品关系（createFlashProductRelation）、删除商品关系（deleteFlashProductRelation）以及更新商品关系（updateFlashProductRelation），这些函数将用于与后端API进行交互，实现对商品关系数据的增删改查操作。
import {fetchList, createFlashProductRelation, deleteFlashProductRelation, updateFlashProductRelation} from '@/api/flashProductRelation';
// 从'@/api/product'模块中导入获取商品列表的函数，并将其重命名为fetchProductList，用于获取商品相关信息，例如在选择商品等操作时获取商品数据列表展示给用户。
import {fetchList as fetchProductList} from '@/api/product';
// 定义默认的列表查询参数对象，用于初始化查询商品关系列表时的相关参数，包含了页码、每页数量以及与秒杀活动、秒杀时段相关的ID等属性，初始值设定如下：
const defaultListQuery = {
pageNum: 1, // 表示初始查询时默认从第一页开始获取商品关系列表数据。
pageSize: 5, // 设定每页显示的商品关系记录数量初始为5条。
flashPromotionId: null, // 秒杀活动的ID，初始设为null，后续会根据路由参数等方式来赋予具体的值，用于关联特定的秒杀活动来查询对应的商品关系。
flashPromotionSessionId: null // 秒杀时段的ID，同样初始为null，用于更精准地筛选与特定秒杀时段相关的商品关系数据。
};
export default {
name: 'flashPromotionProductRelationList',
data() {
return {
// 列表查询参数对象，通过Object.assign将其初始化为defaultListQuery的副本，这样后续可以根据用户的操作（如切换页码、改变每页数量等）动态地改变查询条件，而不会影响到原始的默认参数设置。
listQuery: Object.assign({}, defaultListQuery),
// 用于存储从后端获取到的商品关系列表数据，初始值设为null，在调用相应的获取数据函数（如getList方法）并成功获取到数据后，会将数据赋值给该变量，用于在页面上展示商品关系列表信息。
list: null,
// 用于存储符合当前查询条件的商品关系总条数，初始为null，在获取数据的过程中，会根据后端返回的结果更新该值，常用于分页功能中显示总共有多少条记录等情况。
total: null,
// 用于标识当前是否正在加载数据（比如正在从后端获取商品关系列表数据时）的布尔值，初始设为false，在发起获取数据请求前将其设为true，数据获取完成后再设回false，可配合页面上的加载提示组件等，告知用户当前数据加载状态。
listLoading: false,
// 对话框的显示状态（具体用途未明确，可能是用于其他相关操作的对话框），初始设为false，表示默认不显示该对话框，当需要显示时通过相应方法改变其值为true。
dialogVisible: false,
// 选择商品对话框的显示状态，初始为false，用于控制选择商品的对话框是否显示在页面上，当点击相关按钮（如“添加”按钮触发handleSelectProduct方法）时会将其设为true来显示对话框。
selectDialogVisible: false,
// 用于存储与选择商品对话框相关的数据，包括商品列表数据（初始为null，通过调用接口获取后填充）、总条数（同样初始为null后更新）、多选的选中项列表（初始为空数组，用户在对话框中进行多选操作时更新）以及对话框内的列表查询参数（初始设定包含页码、每页数量和搜索关键字等默认值）。
dialogData: {
list: null,
total: null,
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
// 编辑对话框的显示状态，初始为false，用于控制编辑商品相关信息的对话框是否显示，当点击编辑操作按钮（如handleUpdate方法触发）时会将其设为true来展示编辑对话框。
editDialogVisible: false,
// 用于存储正在编辑的商品关系相关数据，其中product属性初始为一个空对象，在编辑操作时会将对应的商品数据填充进来，方便在编辑对话框中展示和修改相应的商品关系信息。
flashProductRelation: {
product: {}
}
}
},
created() {
// 在组件创建完成后，立即从路由参数（this.$route.query）中获取flashPromotionId和flashPromotionSessionId的值，并分别赋值给listQuery对象中的对应属性，确保后续查询商品关系列表时是基于当前路由所对应的秒杀活动和秒杀时段来进行的。
this.listQuery.flashPromotionId = this.$route.query.flashPromotionId;
this.listQuery.flashPromotionSessionId = this.$route.query.flashPromotionSessionId;
// 调用getList方法，用于从后端获取符合当前查询条件（已经设置好的listQuery参数）的商品关系列表数据，完成页面的初始数据加载，使得页面能够展示出相应的商品关系信息。
this.getList();
},
methods: {
// 处理页面尺寸改变事件的方法（例如用户在分页组件中选择每页显示不同数量的记录时触发），先将列表查询参数中的页码重置为1，然后更新每页数量为传入的新值（val），最后调用getList方法，根据更新后的查询条件重新从后端获取商品关系列表数据，以实现分页数据的动态加载和展示。
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// 处理当前页改变事件的方法（比如用户点击分页组件切换到不同页码时触发），直接将列表查询参数中的页码更新为传入的新值（val），随后调用getList方法获取对应页码的商品关系列表数据，确保分页功能正常切换显示不同页码的数据。
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// 处理添加商品操作的方法，点击“添加”按钮（假设页面上有对应的按钮绑定了该方法）时触发，将选择商品对话框的显示状态（selectDialogVisible）设为true，使其显示在页面上，然后调用getDialogList方法，用于获取可选择的商品列表数据并填充到对话框内的列表中，方便用户选择要添加的商品。
handleSelectProduct() {
this.selectDialogVisible = true;
this.getDialogList();
},
// 处理编辑商品操作的方法，接收当前行的索引（index）和该行对应的商品关系数据（row）作为参数，将编辑对话框的显示状态（editDialogVisible）设为true，使其显示出来，同时通过Object.assign将传入的row数据复制到flashProductRelation对象中，这样编辑对话框就能展示出当前要编辑的商品关系的原始数据，方便用户进行修改操作。
handleUpdate(index, row) {
this.editDialogVisible = true;
this.flashProductRelation = Object.assign({}, row);
},
// 处理删除商品操作的方法，接收当前行的索引（index）和该行对应的商品关系数据（row）作为参数，首先弹出一个确认框，询问用户是否要删除该商品，在用户点击“确定”按钮确认删除后，调用deleteFlashProductRelation函数，传入要删除的商品关系的ID（row.id），向后端发起删除商品关系的请求，若请求成功，则显示删除成功的提示消息，并调用getList方法重新获取商品关系列表数据，刷新页面展示的商品关系信息，确保数据的实时更新。
handleDelete(index, row) {
this.$confirm('是否要删除该商品?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFlashProductRelation(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
// 处理在选择商品对话框中搜索商品的方法，点击搜索按钮（假设对话框内有对应的按钮绑定了该方法）时触发，调用getDialogList方法，根据当前在对话框内设置的查询条件（存储在dialogData.listQuery中，比如搜索关键字等）重新获取商品列表数据，更新对话框内展示的可选择商品列表，实现根据关键字搜索商品的功能。
handleSelectSearch() {
this.getDialogList();
},
// 处理选择商品对话框中页面尺寸改变事件的方法，和前面的handleSizeChange类似，但这里是针对选择商品对话框内的分页操作，先将对话框数据中的列表查询参数的页码重置为1，再更新每页数量为传入的新值（val），最后调用getDialogList方法，根据更新后的查询条件重新获取商品列表数据，用于对话框内分页展示不同数量的商品供用户选择。
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
// 处理选择商品对话框中当前页改变事件的方法，同样类似前面的handleCurrentChange方法，不过是用于选择商品对话框内的分页切换，将对话框数据中的列表查询参数的页码更新为传入的新值（val），然后调用getDialogList方法获取对应页码的商品列表数据，保证对话框内分页功能正常显示不同页码的商品列表。
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
// 处理选择商品对话框中多选操作时选择项改变的事件，接收多选的选中项数据（val）作为参数，将其赋值给dialogData对象中的multipleSelection属性，用于记录用户在对话框内多选的商品项，方便后续根据选中的商品进行添加等操作。
handleDialogSelectionChange(val) {
this.dialogData.multipleSelection = val;
},
// 处理选择商品对话框中点击“确定”按钮的操作方法，首先判断用户是否选择了至少一条记录（如果dialogData.multipleSelection的长度小于1则表示未选择），若未选择则弹出警告提示消息，告知用户需要选择一条记录，并直接返回，不进行后续操作；若用户有选择商品记录，则遍历多选的选中项列表，根据每条选中项的商品ID以及当前的秒杀活动ID（this.listQuery.flashPromotionId）和秒杀时段ID（this.listQuery.flashPromotionSessionId）构建一个新的商品关系对象数组（selectProducts），然后弹出确认框询问用户是否要进行添加操作，在用户确认后，调用createFlashProductRelation函数，传入构建好的selectProducts数组，向后端发起添加商品关系的请求，若请求成功，则隐藏选择商品对话框，清空多选的选中项列表，重新调用getList方法获取更新后的商品关系列表数据，并显示添加成功的提示消息，实现将选中的商品添加到当前秒杀活动和秒杀时段对应的商品关系列表中的功能。
handleSelectDialogConfirm() {
if (this.dialogData.multipleSelection.length < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId: this.dialogData.multipleSelection[i].id,
flashPromotionId: this.listQuery.flashPromotionId,
flashPromotionSessionId: this.listQuery.flashPromotionSessionId
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createFlashProductRelation(selectProducts).then(response => {
this.selectDialogVisible = false;
this.dialogData.multipleSelection = [];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
},
// 处理编辑商品对话框中点击“确定”按钮的操作方法，首先弹出确认框询问用户是否要确认修改操作，在用户点击“确定”按钮确认后，调用updateFlashProductRelation函数，传入当前正在编辑的商品关系的ID（this.flashProductRelation.id）和整个flashProductRelation对象（包含修改后的各属性值），向后端发起更新商品关系的请求，若请求成功，则显示修改成功的提示消息，隐藏编辑对话框，并调用getList方法重新获取商品关系列表数据，刷新页面展示的商品关系信息，使得修改后的内容能及时在页面上体现出来。
handleEditDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateFlashProductRelation(this.flashProductRelation.id, this.flashProductRelation).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.editDialogVisible = false;
this.getList();
});
});
},
// 获取商品关系列表数据的方法，首先将listLoading设为true，表示开始加载数据，可用于在页面上显示加载提示效果（如加载动画等），然后调用fetchList函数，传入当前的列表查询参数（listQuery）向后端发起获取商品关系列表数据的请求，在请求成功的回调函数中，将listLoading设回false表示数据加载完成，同时将获取到的商品关系列表数据赋值给list属性，将总条数赋值给total属性，用于在页面上展示相应的数据和分页信息，实现商品关系列表数据的获取和展示功能。
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
// 获取选择商品对话框内商品列表数据的方法，调用fetchProductList函数，传入对话框数据中的列表查询参数（dialogData.listQuery，包含了搜索关键字、页码、每页数量等信息）向后端发起获取商品列表数据的请求，在请求成功后，将获取到的商品列表数据赋值给dialogData对象的list属性，将总条数赋值给dialogData对象的total属性，用于在选择商品对话框内展示可选择的商品列表以及分页相关信息，方便用户选择商品进行后续操作。
getDialogList() {
fetchProductList(this.dialogData.listQuery).then(response => {
this.dialogData.list = response.data.list;
this.dialogData.total = response.data.total;
});
}
}
}
</script>

181
sms/flash/selectSessionList.vue
Unescape View File

@ -0,0 +1,181 @@
<template> 
<div class="app-container">
<el-card shadow="never" class="operate-container">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
</el-card>
<div class="table-container">
<el-table ref="selectSessionTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="秒杀时间段名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="每日开始时间" align="center">
<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
</el-table-column>
<el-table-column label="每日结束时间" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
</el-table-column>
<el-table-column label="商品数量" align="center">
<template slot-scope="scope">{{scope.row.productCount}}</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleShowRelation(scope.$index, scope.row)">商品列表
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {fetchSelectList} from '@/api/flashSession';
import {formatDate} from '@/utils/date';
export default {
name: 'selectSessionList',
data() {
return {
list: null,
listLoading: false
}
},
created() {
this.getList();
},
filters:{
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'hh:mm:ss')
}
},
methods: {
handleShowRelation(index,row){
this.$router.push({path:'/sms/flashProductRelation',query:{
flashPromotionId:this.$route.query.flashPromotionId, flashPromotionSessionId:row.id}})
},
getList() {
this.listLoading = true;
fetchSelectList({flashPromotionId:this.$route.query.flashPromotionId}).then(response => {
this.listLoading = false;
this.list = response.data;
});
}
}
}
</script>
<style scoped>
.operate-container {
margin-top: 0;
}
</style>
#abc
<template>
<!-- 创建一个类名为 `app-container` 的 `div` 元素，作为整个页面的容器，用于包裹内部的各个模块，实现页面的整体布局 -->
<div class="app-container">
<!-- 使用 `el-card` 组件创建一个操作相关的容器，设置阴影效果为无，样式类为 `operate-container`，可能用于展示页面的标题等操作相关元素 -->
<el-card shadow="never" class="operate-container">
<!-- 使用 `el-icon-tickets` 图标来展示一个特定的图标，具体图标样式由对应图标库定义，可能用于示意与当前数据列表相关的某种含义，比如表示票务、列表相关的操作等 -->
<i class="el-icon-tickets"></i>
<span>数据列表</span>
</el-card>
<!-- 创建一个用于展示表格数据的容器 `div`，类名为 `table-container`，用于将表格与其他元素在布局上进行区分 -->
<div class="table-container">
<!-- 使用 `el-table` 组件来展示数据列表，通过 `ref` 属性为表格设置一个引用名称 `selectSessionTable`，方便在 JavaScript 代码中通过 `$refs` 来获取该表格实例，绑定数据来源为 `list`，设置宽度为 `100%`，通过 `v-loading` 指令绑定加载状态为 `listLoading`，用于在数据加载时显示加载提示（例如加载动画等），并显示表格边框 -->
<el-table ref="selectSessionTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 定义表格的列，标签为“编号”，宽度设置为 `100px`，内容在单元格内居中对齐，通过插槽（`slot-scope`）获取对应行数据中的 `id` 属性值，并展示在单元格内 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 定义表格的列，标签为“秒杀时间段名称”，内容在单元格内居中对齐，通过插槽获取对应行数据中的 `name` 属性值，并展示在单元格内，用于展示秒杀时间段的名称信息 -->
<el-table-column label="秒杀时间段名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 定义表格的列，标签为“每日开始时间”，内容在单元格内居中对齐，通过插槽获取对应行数据中的 `startTime` 属性值，并使用名为 `formatTime` 的过滤器（在 Vue 的 `filters` 选项中定义）对时间数据进行格式化处理后展示在单元格内，将时间转换为更易读的格式 -->
<el-table-column label="每日开始时间" align="center">
<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
</el-table-column>
<!-- 定义表格的列，标签为“每日结束时间”，内容在单元格内居中对齐，通过插槽获取对应行数据中的 `endTime` 属性值，并同样使用 `formatTime` 过滤器对时间数据进行格式化处理后展示在单元格内 -->
<el-table-column label="每日结束时间" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
</el-table-column>
<!-- 定义表格的列，标签为“商品数量”，内容在单元格内居中对齐，通过插槽获取对应行数据中的 `productCount` 属性值，并展示在单元格内，用于展示与秒杀时间段相关的商品数量信息 -->
<el-table-column label="商品数量" align="center">
<template slot-scope="scope">{{scope.row.productCount}}</template>
</el-table-column>
<!-- 定义表格的列，标签为“操作”，内容在单元格内居中对齐，通过插槽在单元格内放置一个按钮，按钮尺寸为迷你（`size="mini"`），类型为文本按钮（`type="text"`），点击按钮时触发 `handleShowRelation` 方法，并传入当前行的索引（`scope.$index`）和对应行的数据（`scope.row`），此处按钮文本为“商品列表”，可能用于跳转到展示与该秒杀时间段相关商品列表的页面 -->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleShowRelation(scope.$index, scope.row)">商品列表
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
// 从 `@/api/flashSession` 模块中导入 `fetchSelectList` 函数，该函数用于从后端 API 获取与秒杀时段相关的选择列表数据，比如获取特定秒杀活动下的秒杀时间段列表信息，与后端进行数据交互操作。
import {fetchSelectList} from '@/api/flashSession';
// 从 `@/utils/date` 文件中导入 `formatDate` 函数，用于对日期或时间数据进行格式化处理，使其以特定的格式展示在页面上，方便用户查看和理解时间相关信息。
import {formatDate} from '@/utils/date';
export default {
name: 'selectSessionList',
data() {
return {
// 用于存储从后端获取到的秒杀时间段相关的数据列表，初始值为 `null`，在调用 `getList` 方法并成功获取数据后，会将获取到的数据赋值给该变量，以便在页面的表格中进行展示。
list: null,
// 用于标识当前是否正在加载数据（例如正在从后端获取秒杀时间段列表数据时）的布尔值，初始设为 `false`，在发起获取数据请求前将其设为 `true`，数据获取完成后再设回 `false`，可以结合页面上的加载提示组件等，向用户展示当前数据的加载状态。
listLoading: false
}
},
created() {
// 在组件创建完成后，立即调用 `getList` 方法，用于从后端获取符合条件的秒杀时间段列表数据，完成页面的初始数据加载，使得页面能够展示出相应的秒杀时间段相关信息。
this.getList();
},
filters: {
// 定义一个名为 `formatTime` 的过滤器函数，用于对时间数据进行格式化处理。如果传入的时间值为空（`null`）或者为空字符串（`''`），则直接返回 `N/A`，表示无可用时间数据；否则，将传入的时间值转换为 `Date` 对象，然后调用外部导入的 `formatDate` 函数，将时间格式化为 `hh:mm:ss` 的格式（小时:分钟:秒），并返回格式化后的时间字符串，用于在页面上统一展示时间数据的格式，使其更清晰易读。
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'hh:mm:ss')
}
},
methods: {
// 处理点击“商品列表”按钮的操作方法，接收当前行的索引（`index`）和对应行的数据（`row`）作为参数。通过 `this.$router.push` 进行路由跳转，跳转到路径为 `/sms/flashProductRelation` 的页面，并传递查询参数（`query`），参数中包含当前页面路由获取的 `flashPromotionId`（可能是当前秒杀活动的 ID）以及当前点击行对应的秒杀时间段的 `ID`（`row.id`），用于在跳转到的目标页面获取并展示与该秒杀活动及时间段相关的商品关系列表等信息，实现页面间的数据传递和跳转功能。
handleShowRelation(index, row) {
this.$router.push({path: '/sms/flashProductRelation', query: {
flashPromotionId: this.$route.query.flashPromotionId, flashPromotionSessionId: row.id
}});
},
// 获取秒杀时间段列表数据的方法，首先将 `listLoading` 设为 `true`，表示开始加载数据，可用于在页面上显示加载提示效果（如加载动画等），然后调用 `fetchSelectList` 函数，传入一个包含 `flashPromotionId` 的对象作为参数（`flashPromotionId` 的值从当前路由的查询参数中获取），向后端发起获取秒杀时间段列表数据的请求，在请求成功的回调函数中，将 `listLoading` 设回 `false` 表示数据加载完成，同时将获取到的秒杀时间段列表数据赋值给 `list` 属性，用于在页面上展示相应的数据，实现数据的获取和展示功能。
getList() {
this.listLoading = true;
fetchSelectList({flashPromotionId: this.$route.query.flashPromotionId}).then(response => {
this.listLoading = false;
this.list = response.data;
});
}
}
}
</script>

476
sms/flash/sessionList.vue
Unescape View File

@ -0,0 +1,476 @@
<template> 
<div class="app-container">
<el-card shadow="never" class="operate-container">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
</el-card>
<div class="table-container">
<el-table ref="flashSessionTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<el-table-column label="秒杀时间段名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="每日开始时间" align="center">
<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
</el-table-column>
<el-table-column label="每日结束时间" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
</el-table-column>
<el-table-column label="启用" align="center">
<template slot-scope="scope">
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
title="添加时间段"
:visible.sync="dialogVisible"
width="40%">
<el-form :model="flashSession"
ref="flashSessionForm"
label-width="150px" size="small">
<el-form-item label="秒杀时间段名称：">
<el-input v-model="flashSession.name" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="每日开始时间：">
<el-time-picker
v-model="flashSession.startTime"
placeholder="请选择时间">
</el-time-picker>
</el-form-item>
<el-form-item label="每日结束时间：">
<el-time-picker
v-model="flashSession.endTime"
placeholder="请选择时间">
</el-time-picker>
</el-form-item>
<el-form-item label="是否启用">
<el-radio-group v-model="flashSession.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">不启用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</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 {
name: 'flashPromotionSessionList',
data() {
return {
list: null,
listLoading: false,
dialogVisible:false,
isEdit:false,
flashSession:Object.assign({},defaultFlashSession)
}
},
created() {
this.getList();
},
filters:{
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'hh:mm:ss')
}
},
methods: {
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.flashSession = Object.assign({},defaultFlashSession);
},
handleStatusChange(index,row){
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消修改'
});
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);
},
handleDelete(index,row){
this.$confirm('是否要删除该时间段?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteSession(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateSession(this.flashSession.id,this.flashSession).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createSession(this.flashSession).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
getList() {
this.listLoading = true;
fetchList({}).then(response => {
this.listLoading = false;
this.list = response.data;
});
}
}
}
</script>
<style scoped>
.operate-container {
margin-top: 0;
}
</style>
#abc
<template>
<!-- 创建一个类名为 `app-container` 的 `div` 元素，作为整个页面内容的外层容器，用于组织和布局页面内的各个组件和元素 -->
<div class="app-container">
<!-- 使用 `el-card` 组件创建一个操作相关的容器，设置阴影效果为 `never`（即无阴影），并添加 `operate-container` 样式类，该容器可能用于展示页面的一些操作按钮及标题等内容 -->
<el-card shadow="never" class="operate-container">
<!-- 使用 `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>
<!-- 创建一个类名为 `table-container` 的 `div` 元素，用于包裹下面的 `el-table` 组件，起到对表格进行布局划分的作用，使其在页面上与其他元素区分开来 -->
<div class="table-container">
<!-- 使用 `el-table` 组件来展示秒杀时间段相关的数据列表，通过 `ref` 属性为表格设置一个引用名称 `flashSessionTable`，方便在 JavaScript 代码中通过 `$refs` 来获取该表格实例，绑定数据来源为 `list`（该数据会在 JavaScript 代码中获取并赋值），设置表格宽度为 `100%`，通过 `v-loading` 指令绑定加载状态为 `listLoading`，用于在数据加载过程中显示加载提示（例如加载动画等），同时显示表格边框 -->
<el-table ref="flashSessionTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 定义表格的一列，设置列标签为“编号”，宽度为 `100px`，内容在单元格内居中对齐，通过 `slot-scope` 插槽获取对应行数据中的 `id` 属性值，并展示在该单元格内，用于展示每个秒杀时间段的唯一编号 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 定义表格的一列，设置列标签为“秒杀时间段名称”，内容在单元格内居中对齐，通过 `slot-scope` 插槽获取对应行数据中的 `name` 属性值，并展示在该单元格内，用于展示每个秒杀时间段的自定义名称 -->
<el-table-column label="秒杀时间段名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 定义表格的一列，设置列标签为“每日开始时间”，内容在单元格内居中对齐，通过 `slot-scope` 插槽获取对应行数据中的 `startTime` 属性值，并使用名为 `formatTime` 的过滤器（在 Vue 的 `filters` 选项中定义）对时间数据进行格式化处理后展示在该单元格内，将时间转换为更易读的格式（如 `hh:mm:ss`） -->
<el-table-column label="每日开始时间" align="center">
<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
</el-table-column>
<!-- 定义表格的一列，设置列标签为“每日结束时间”，内容在单元格内居中对齐，通过 `slot-scope` 插槽获取对应行数据中的 `endTime` 属性值，并同样使用 `formatTime` 过滤器对时间数据进行格式化处理后展示在该单元格内 -->
<el-table-column label="每日结束时间" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
</el-table-column>
<!-- 定义表格的一列，设置列标签为“启用”，内容在单元格内居中对齐，在该单元格内放置一个 `el-switch` 开关组件，用于切换秒杀时间段的启用状态。开关组件绑定 `change` 事件到 `handleStatusChange` 方法，传入当前行的索引（`scope.$index`）和对应行的数据（`scope.row`），设置 `active-value`（开启时的值）为 `1`，`inactive-value`（关闭时的值）为 `0`，并通过 `v-model` 双向绑定到对应行数据中的 `status` 属性，实现状态的可视化切换与数据绑定 -->
<el-table-column label="启用" align="center">
<template slot-scope="scope">
<el-switch
@change="handleStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
<!-- 定义表格的一列，设置列标签为“操作”，宽度为 `180px`，内容在单元格内居中对齐，通过 `slot-scope` 插槽在单元格内放置两个按钮，分别用于编辑和删除对应的秒杀时间段。编辑按钮点击时触发 `handleUpdate` 方法，传入当前行的索引和对应行的数据；删除按钮点击时触发 `handleDelete` 方法，同样传入相应参数，用于执行对应的数据操作 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 使用 `el-dialog` 组件创建一个对话框，用于添加或编辑秒杀时间段的相关操作，设置对话框标题为“添加时间段”，绑定对话框的显示状态为 `dialogVisible`（通过 `:visible.sync` 实现双向绑定，在 JavaScript 代码中改变该变量值可控制对话框的显示与隐藏），设置对话框宽度为页面宽度的 `40%` -->
<el-dialog
title="添加时间段"
:visible.sync="dialogVisible"
width="40%">
<!-- 在对话框内创建一个 `el-form` 表单组件，用于收集用户输入的秒杀时间段相关信息，绑定数据模型为 `flashSession`（该数据对象在 JavaScript 代码中定义和操作），设置表单引用为 `flashSessionForm`，标签宽度为 `150px`，表单尺寸为 `small`（小型） -->
<el-form :model="flashSession"
ref="flashSessionForm"
label-width="150px" size="small">
<!-- 创建一个表单项目（`el-form-item`），设置标签为“秒杀时间段名称：”，在该项目内放置一个 `el-input` 输入框组件，通过 `v-model` 双向绑定输入框的值到 `flashSession` 对象的 `name` 属性，设置输入框宽度为 `250px`，用于用户输入秒杀时间段的名称 -->
<el-form-item label="秒杀时间段名称：">
<el-input v-model="flashSession.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 创建一个表单项目，设置标签为“每日开始时间：”，在该项目内放置一个 `el-time-picker` 时间选择器组件，通过 `v-model` 双向绑定时间选择器选择的值到 `flashSession` 对象的 `startTime` 属性，设置占位提示文本为“请选择时间”，用于用户选择秒杀时间段的每日开始时间 -->
<el-form-item label="每日开始时间：">
<el-time-picker
v-model="flashSession.startTime"
placeholder="请选择时间">
</el-time-picker>
</el-form-item>
<!-- 创建一个表单项目，设置标签为“每日结束时间：”，在该项目内放置一个 `el-time-picker` 时间选择器组件，通过 `v-model` 双向绑定时间选择器选择的值到 `flashSession` 对象的 `endTime` 属性，设置占位提示文本为“请选择时间”，用于用户选择秒杀时间段的每日结束时间 -->
<el-form-item label="每日结束时间：">
<el-time-picker
v-model="flashSession.endTime"
placeholder="请选择时间">
</el-time-picker>
</el-form-item>
<!-- 创建一个表单项目，设置标签为“是否启用”，在该项目内放置一个 `el-radio-group` 单选框组组件，通过 `v-model` 双向绑定单选框组的值到 `flashSession` 对象的 `status` 属性，用于用户选择该秒杀时间段是否启用，单选框组内包含两个 `el-radio` 单选框，分别对应启用（`label` 值为 `1`）和不启用（`label` 值为 `0`）两种状态 -->
<el-form-item label="是否启用">
<el-radio-group v-model="flashSession.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">不启用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 在对话框的底部插槽（`slot="footer"`）内添加两个按钮，分别用于取消和确定操作。取消按钮点击时将 `dialogVisible` 设置为 `false`，隐藏对话框；确定按钮点击时触发 `handleDialogConfirm` 方法，用于执行添加或编辑操作并根据操作结果处理后续逻辑 -->
<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>
// 从'@/api/flashSession'模块中导入多个函数，用于与后端 API 进行交互，实现对秒杀时间段相关数据的不同操作。
// fetchList 函数用于获取秒杀时间段的列表数据，从后端查询并返回相应的数据信息。
// updateStatus 函数用于更新某个秒杀时间段的状态，比如启用或禁用状态的变更，需要传入相应的参数与后端交互来完成状态更新操作。
// deleteSession 函数用于删除指定的秒杀时间段，通过传入对应的 ID 等必要信息告知后端要删除的数据记录。
// createSession 函数用于向后端提交新的秒杀时间段数据，创建一个新的秒杀时间段记录，需传入包含相关属性的对象。
// updateSession 函数用于更新已存在的秒杀时间段的详细信息，同样要传入相应的标识（如 ID）以及更新后的完整数据对象与后端进行交互。
import {fetchList, updateStatus, deleteSession, createSession, updateSession} from '@/api/flashSession';
// 从'@/utils/date'文件中导入formatDate函数，该函数主要用于对日期或时间格式的数据进行格式化处理，使其以特定的、更易读的格式呈现，方便在页面上展示给用户查看。
import {formatDate} from '@/utils/date';
// 定义一个名为defaultFlashSession的对象，作为秒杀时间段数据的默认初始值模板。
// 其中name属性初始化为null，表示秒杀时间段名称初始时为空，等待用户输入或赋值；
// startTime属性初始化为null，用于存放每日开始时间，同样初始无值；
// endTime属性初始化为null，代表每日结束时间，初始也为空；
// status属性初始化为0，可能表示默认状态为禁用或未启用等情况，具体含义取决于业务逻辑，0是初始设定的一个表示状态的值。
const defaultFlashSession = {
name: null,
startTime: null,
endTime: null,
status: 0
};
export default {
name: 'flashPromotionSessionList',
data() {
return {
// list属性用于存储从后端获取到的所有秒杀时间段的数据列表，初始值设为null，后续在调用getList方法获取到数据后，会将实际数据赋值给它，以用于在页面的表格等组件中展示相应信息。
list: null,
// listLoading属性是一个布尔值，用于标识当前是否正在从后端加载秒杀时间段的数据，初始设为false，表示未处于加载状态，当发起获取数据请求时将其设为true，数据加载完成后再设回false，可结合页面上的加载提示元素（如加载动画）向用户展示数据加载情况。
listLoading: false,
// dialogVisible属性也是布尔值，用于控制页面上添加/编辑秒杀时间段的对话框是否显示，初始设为false，意味着对话框默认是隐藏的，当需要弹出对话框进行相关操作时，通过相应方法将其值改为true来显示对话框。
dialogVisible: false,
// isEdit属性同样是布尔值，用于区分当前操作是编辑已有的秒杀时间段（设为true）还是新建添加一个秒杀时间段（设为false），初始设为false，在相应操作触发时改变其值，便于后续在处理保存等逻辑时采取不同的行为。
isEdit: false,
// flashSession属性是一个对象，用于存储当前正在操作（添加或编辑）的秒杀时间段的数据信息，初始通过Object.assign将其赋值为defaultFlashSession的副本，保证每次操作开始时都有一个符合默认设定的初始数据状态，在操作过程中会根据用户输入或其他逻辑更新其内部的属性值，最终将其作为与后端交互的数据对象传递给相应的 API 函数。
flashSession: Object.assign({}, defaultFlashSession)
}
},
created() {
// 在组件创建完成后，立即调用getList方法，该方法用于向后端请求获取秒杀时间段的列表数据，实现页面初次加载时展示已有秒杀时间段信息的功能，确保页面能及时显示相应的数据内容。
this.getList();
},
filters: {
// 定义一个名为formatTime的过滤器函数，用于对时间数据进行格式化处理，使其以特定格式展示在页面上。
// 如果传入的时间参数time为null或者是空字符串，表示没有有效的时间数据，此时直接返回'N/A'字符串，表示该时间数据不可用或者未设置。
// 若传入的time有值，则先将其转换为JavaScript的Date对象，然后调用外部导入的formatDate函数，将该时间按照'hh:mm:ss'（小时:分钟:秒）的格式进行格式化，并返回格式化后的结果，这样在页面中展示时间数据时能更加规范和易读。
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'hh:mm:ss')
}
},
methods: {
// handleAdd方法用于处理点击“添加”按钮的操作逻辑。
// 首先将dialogVisible属性设为true，使得添加/编辑秒杀时间段的对话框显示出来，让用户可以输入新的秒杀时间段相关信息。
// 接着将isEdit属性设为false，明确当前操作是添加新记录的行为，而非编辑已有记录。
// 最后通过Object.assign将flashSession重新初始化为defaultFlashSession的副本，清空之前可能遗留的临时数据，为用户输入新的秒杀时间段信息做好准备，确保数据的初始状态符合默认设定。
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.flashSession = Object.assign({}, defaultFlashSession);
},
// handleStatusChange方法用于处理秒杀时间段启用状态改变的操作，接收当前行的索引index和对应行的数据对象row作为参数。
// 先弹出一个确认框，提示用户“是否要修改该状态?”，并提供“确定”和“取消”按钮供用户选择，确认框的类型设置为'warning'（警告类型，通常以醒目的样式显示）。
// 当用户点击“确定”按钮时，调用updateStatus函数，传入要修改状态的秒杀时间段的唯一标识row.id以及包含新状态值的对象{status: row.status}，向后端发起更新状态的请求，若后端处理成功返回相应响应，则在页面上显示“修改成功!”的提示消息，告知用户操作成功。
// 如果用户点击“取消”按钮，即捕获到catch中的情况，会在页面上显示“取消修改”的提示消息，然后调用getList方法重新获取最新的秒杀时间段列表数据，用于刷新页面展示的内容，确保页面显示的数据与后端实际数据保持一致。
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消修改'
});
this.getList();
});
},
// handleUpdate方法用于处理点击“编辑”按钮的操作逻辑，接收当前行的索引index和对应行的数据对象row作为参数。
// 首先将dialogVisible属性设为true，使添加/编辑对话框显示出来，方便用户对已有的秒杀时间段数据进行修改。
// 然后把isEdit属性设为true，表明当前是编辑操作，与添加操作进行区分，后续在保存等逻辑处理时会依据此属性来决定调用更新还是创建的 API 函数。
// 接着通过Object.assign将row对象的数据复制到flashSession对象中，这样对话框中就能展示出当前要编辑的秒杀时间段的原始数据内容，方便用户基于已有数据进行修改调整。
// 最后将flashSession对象中的startTime和endTime属性重新赋值为对应的Date对象，这可能是为了后续在处理时间相关逻辑（如与后端交互时的时间格式要求、时间比较等）时更加方便和准确，确保时间数据的格式符合预期。
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.flashSession = Object.assign({}, row);
this.flashSession.startTime = new Date(row.startTime);
this.flashSession.endTime = new Date(row.endTime);
},
// handleDelete方法用于处理点击“删除”按钮的操作逻辑，接收当前行的索引index和对应行的数据对象row作为参数。
// 会先弹出一个确认框，询问用户“是否要删除该时间段?”，同样提供“确定”和“取消”按钮以及设置确认框类型为'warning'，提醒用户谨慎操作。
// 当用户点击“确定”按钮确认删除时，调用deleteSession函数，传入要删除的秒杀时间段的唯一标识row.id，向后端发起删除该记录的请求，若后端操作成功并返回响应，则在页面上显示“删除成功!”的提示消息，告知用户删除操作已完成，随后调用getList方法重新获取最新的秒杀时间段列表数据，刷新页面展示内容，将已删除的记录从页面中移除。
handleDelete(index, row) {
this.$confirm('是否要删除该时间段?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteSession(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
// handleDialogConfirm方法用于处理在添加/编辑对话框中点击“确定”按钮的操作逻辑。
// 先弹出一个确认框，询问用户“是否要确认?”，设置相应的按钮文本和确认框类型为'warning'，再次提醒用户确认操作。
// 当用户点击“确定”按钮确认后，通过判断isEdit属性的值来决定执行不同的操作逻辑：
// 如果isEdit为true，表示当前是编辑操作，那么调用updateSession函数，传入当前正在编辑的秒杀时间段的唯一标识flashSession.id以及整个flashSession对象（包含了用户修改后的所有数据信息），向后端发起更新该秒杀时间段数据的请求，若后端更新成功返回响应，则在页面上显示“修改成功！”的提示消息，告知用户编辑操作成功，接着将dialogVisible属性设为false，隐藏对话框，最后调用getList方法重新获取最新的秒杀时间段列表数据，刷新页面展示内容，使修改后的数据能及时呈现出来。
// 如果isEdit为false，则表示当前是添加操作，调用createSession函数，传入flashSession对象（包含用户输入的新秒杀时间段的各项数据），向后端发起创建新记录的请求，若后端创建成功返回响应，则在页面上显示“添加成功！”的提示消息，告知用户添加操作成功，同样将dialogVisible属性设为false，隐藏对话框，并调用getList方法获取最新数据来刷新页面展示。
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateSession(this.flashSession.id, this.flashSession).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible = false;
this.getList();
})
} else {
createSession(this.flashSession).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible = false;
this.getList();
})
}
})
},
// getList方法用于从后端获取秒杀时间段的列表数据。
// 首先将listLoading属性设为true，表示开始向后端请求数据，进入数据加载状态，此时页面上可结合此状态显示相应的加载提示（如加载动画等），告知用户正在获取数据。
// 然后调用fetchList函数，传入一个空对象作为参数（可能根据实际后端接口需求，后续可以在此传入更多筛选等条件来获取特定的数据子集），向后端发起获取秒杀时间段列表数据的请求，当后端成功返回响应后，在回调函数中将listLoading属性设回false，表示数据加载完成，同时将获取到的响应数据中的列表部分（response.data）赋值给list属性，使得页面能够基于此数据进行展示，比如在表格中展示各个秒杀时间段的详细信息等。
getList() {
this.listLoading = true;
fetchList({}).then(response => {
this.listLoading = false;
this.list = response.data;
});
}
}
}
</script>

839
sms/hot/index.vue
Unescape View File

@ -0,0 +1,839 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="商品名称：">
<el-input v-model="listQuery.productName" 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"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleSelectProduct()">选择商品</el-button>
</el-card>
<div class="table-container">
<el-table ref="newProductTable"
: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.productName}}</template>
</el-table-column>
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
</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"
type="text"
@click="handleEditSort(scope.$index, scope.row)">设置排序
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
<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="160" align="center">
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column>
<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
background
@size-change="handleDialogSizeChange"
@current-change="handleDialogCurrentChange"
layout="prev, pager, next"
:current-page.sync="dialogData.listQuery.pageNum"
:page-size="dialogData.listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="dialogData.total">
</el-pagination>
</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>
</div>
</template>
<script>
import {fetchList,updateRecommendStatus,deleteHotProduct,createHotProduct,updateHotProductSort} from '@/api/hotProduct';
import {fetchList as fetchProductList} from '@/api/product';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'hotProductList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
recommendOptions: Object.assign({}, defaultRecommendOptions),
list: null,
total: null,
listLoading: false,
multipleSelection: [],
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
operateType: null,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
}
},
created() {
this.getList();
},
filters:{
formatRecommendStatus(status){
if(status===1){
return '推荐中';
}else{
return '未推荐';
}
}
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
handleDelete(index,row){
this.deleteProduct(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//设为推荐
this.updateRecommendStatusStatus(ids,1);
} else if (this.operateType === 1) {
//取消推荐
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
//删除
this.deleteProduct(ids);
}else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId:this.dialogData.multipleSelection[i].id,
productName:this.dialogData.multipleSelection[i].name
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createHotProduct(selectProducts).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
},
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateHotProductSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
deleteProduct(ids){
this.$confirm('是否要删除该推荐?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHotProduct(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
</script>
<style></style>
#abc
<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"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<!-- 重置按钮，同样右浮动且设置了右边距，点击时触发 `handleResetSearch` 方法，用于将筛选条件重置为默认状态，按钮尺寸为小型 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 内联表单，用于收集筛选条件，绑定的数据模型为 `listQuery`，表单尺寸为小型，标签宽度设置为140px -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 商品名称筛选的表单项目，包含一个输入框，通过 `v-model` 双向绑定输入框的值到 `listQuery` 中的 `productName` 属性，输入框设置了特定样式类（可能用于控制宽度等样式），并带有提示文本 -->
<el-form-item label="商品名称：">
<el-input v-model="listQuery.productName" class="input-width" placeholder="商品名称"></el-input>
</el-form-item>
<!-- 推荐状态筛选的表单项目，包含一个下拉选择框，通过 `v-model` 双向绑定选择框的值到 `listQuery` 中的 `recommendStatus` 属性，可清除已选选项，设置了占位文本与样式类，下拉选项通过循环 `recommendOptions` 数组动态生成 -->
<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"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 操作相关的卡片容器，同样无阴影效果，内部包含一些与数据列表操作相关的元素，比如选择商品按钮 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 选择商品按钮，尺寸为迷你型，点击时触发 `handleSelectProduct` 方法，用于打开选择商品的对话框 -->
<el-button size="mini" class="btn-add" @click="handleSelectProduct()">选择商品</el-button>
</el-card>
<!-- 表格容器，用于包裹展示数据列表的表格，使其在布局上与其他元素区分开来 -->
<div class="table-container">
<!-- 商品相关的数据列表表格，设置了引用名称方便在JavaScript中获取实例，绑定了数据来源为 `list`，宽度为100%，监听行选择变化事件、加载状态，并且显示表格边框 -->
<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>
<!-- 编号列，通过插槽获取对应行数据中的 `id` 属性值展示在单元格内，宽度为120px，内容居中对齐 -->
<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>
<!-- 是否推荐列，包含一个开关组件，用于切换商品的推荐状态，绑定了状态改变事件、设置了开关的开启和关闭对应的值，并且双向绑定到对应行数据中的 `recommendStatus` 属性 -->
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
</template>
</el-table-column>
<!-- 排序列，通过插槽获取对应行数据中的 `sort` 属性值展示在单元格内，宽度为160px，内容居中对齐 -->
<el-table-column label="排序" width="160" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 状态列，通过插槽获取对应行数据中的 `recommendStatus` 属性值，使用名为 `formatRecommendStatus` 的过滤器对其进行格式化处理后展示在单元格内，宽度为160px，内容居中对齐 -->
<el-table-column label="状态" width="160" align="center">
<template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
</el-table-column>
<!-- 操作列，在单元格内放置了两个文本按钮，分别用于设置排序（点击触发 `handleEditSort` 方法）和删除商品（点击触发 `handleDelete` 方法），宽度为180px，内容居中对齐 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
type="text"
@click="handleEditSort(scope.$index, scope.row)">设置排序
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 批量操作相关的容器，内部放置用于选择批量操作类型的下拉框以及执行操作的按钮 -->
<div class="batch-operate-container">
<!-- 批量操作类型的下拉选择框，尺寸为小型，双向绑定选择的值到 `operateType` 属性，带有占位提示文本，下拉选项通过循环 `operates` 数组生成 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 执行批量操作的确定按钮，设置了左边距，添加了特定样式类，按钮类型为主要操作类型，尺寸为小型，点击时触发 `handleBatchOperate` 方法 -->
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- 分页容器，用于放置分页组件，实现数据列表的分页展示功能 -->
<div class="pagination-container">
<!-- 分页组件，设置了背景色使其更突出，绑定了每页显示数量改变和当前页码改变的事件处理方法，配置了分页布局包含多种功能按钮，绑定了每页显示数量、可选择的每页显示数量数组、当前页码以及总条数等相关属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<!-- 选择商品的对话框组件，设置了标题、双向绑定显示状态以及宽度，用于展示可选择的商品列表等相关操作 -->
<el-dialog title="选择商品" :visible.sync="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>
<!-- 展示可选择商品数据列表的表格，绑定了数据来源，监听行选择变化事件，并且显示表格边框 -->
<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>
<!-- 货号列，通过插槽获取对应行数据中的 `productSn` 属性值，以特定格式（添加 "NO." 前缀）展示在单元格内，宽度为160px，内容居中对齐 -->
<el-table-column label="货号" width="160" align="center">
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column>
<!-- 价格列，通过插槽获取对应行数据中的 `price` 属性值，以特定格式（添加 "￥" 前缀）展示在单元格内，宽度为120px，内容居中对齐 -->
<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
background
@size-change="handleDialogSizeChange"
@current-change="handleDialogCurrentChange"
layout="prev, pager, next"
:current-page.sync="dialogData.listQuery.pageNum"
:page-size="dialogData.listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="dialogData.total">
</el-pagination>
</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`，标签宽度为150px -->
<el-form :model="sortDialogData"
label-width="150px">
<!-- 排序值的表单项目，包含一个输入框，通过 `v-model` 双向绑定输入框的值到 `sortDialogData` 中的 `sort` 属性，输入框设置了宽度 -->
<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>
<!-- 确定按钮，点击时触发 `handleUpdateSort` 方法，尺寸为小型，按钮类型为主要操作类型 -->
<el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// 从 '@/api/hotProduct' 模块中导入多个函数，这些函数用于与后端 API 进行交互，实现对热门商品（hotProduct）相关数据的不同操作。
// fetchList 函数用于获取热门商品列表数据，根据传入的查询参数（如筛选条件等）从后端获取相应的热门商品数据列表。
// updateRecommendStatus 函数用于更新热门商品的推荐状态，需要传入相关参数告知后端要更新哪些商品以及更新后的推荐状态值。
// deleteHotProduct 函数用于删除指定的热门商品记录，通过传入对应的商品标识（如 ID 列表等）告知后端要删除的数据。
// createHotProduct 函数用于向热门商品列表中添加新的商品记录，需传入包含新商品相关信息的对象，与后端交互完成添加操作。
// updateHotProductSort 函数用于更新热门商品的排序信息，传入相应的参数（如包含商品 ID 和新排序值的对象）来实现排序的修改操作。
import {fetchList, updateRecommendStatus, deleteHotProduct, createHotProduct, updateHotProductSort} from '@/api/hotProduct';
// 从 '@/api/product' 模块中导入名为 fetchList 的函数，并将其重命名为 fetchProductList，该函数用于获取普通商品列表数据，可能用于在选择商品等相关操作中获取可供选择的商品信息。
import {fetchList as fetchProductList} from '@/api/product';
// 定义一个名为 defaultListQuery 的对象，用于设置默认的查询参数，作为获取热门商品列表时的初始查询条件。
// pageNum 属性初始值设为 1，表示默认查询第一页的数据。
// pageSize 属性初始值设为 5，代表每页默认显示 5 条商品记录。
// productName 属性初始设为 null，意味着初始时没有按商品名称进行筛选的条件，等待用户输入具体名称来筛选商品。
// recommendStatus 属性初始设为 null，同样表示初始时没有按推荐状态进行筛选的条件，后续可根据用户选择来设置相应的推荐状态筛选条件。
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
// 定义一个名为 defaultRecommendOptions 的数组，数组内包含多个对象，用于设置商品推荐状态的可选选项，每个对象包含 label（显示给用户的文本）和 value（实际对应的值）两个属性。
// 这里定义了两种推荐状态选项，分别是“未推荐”对应值为 0，“推荐中”对应值为 1，用于下拉选择框等组件展示给用户选择商品的推荐状态筛选条件。
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'hotProductList',
data() {
return {
// listQuery 属性用于存储当前的查询参数，初始通过 Object.assign 将其赋值为 defaultListQuery 的副本，确保每次操作开始时查询参数有默认的初始状态，后续会根据用户在页面上的操作（如筛选、翻页等）动态更新其属性值，用于向后端请求获取符合条件的热门商品列表数据。
listQuery: Object.assign({}, defaultListQuery),
// recommendOptions 属性用于存储商品推荐状态的可选选项，同样初始赋值为 defaultRecommendOptions 的副本，为下拉选择框等组件提供默认的推荐状态选项数据，保证数据的独立性和初始状态的一致性。
recommendOptions: Object.assign({}, defaultRecommendOptions),
// list 属性用于存储从后端获取到的热门商品数据列表，初始值设为 null，在调用 getList 方法并成功获取数据后，会将获取到的实际数据赋值给它，以便在页面的表格等组件中展示相应的热门商品信息。
list: null,
// total 属性用于存储热门商品数据的总条数，初始设为 null，在获取数据成功后会将后端返回的总条数赋值给它，可用于分页组件等地方展示总共有多少条热门商品记录，方便用户了解数据规模。
total: null,
// listLoading 属性是一个布尔值，用于标识当前是否正在从后端加载热门商品的数据，初始设为 false，表示未处于加载状态，当发起获取数据请求时将其设为 true，数据加载完成后再设回 false，可结合页面上的加载提示元素（如加载动画）向用户展示数据加载情况。
listLoading: false,
// multipleSelection 属性用于存储用户在页面表格中多选的热门商品记录数据，初始值为空数组，每当表格中的行选择状态发生变化（如用户勾选或取消勾选行）时，会更新该数组的值，方便后续进行批量操作等基于多选记录的处理逻辑。
multipleSelection: [],
// operates 属性是一个数组，数组内包含多个对象，用于定义可进行的批量操作类型及对应的显示文本和实际值，每个对象的 label 属性为显示给用户的操作名称（如“设为推荐”“取消推荐”“删除”），value 属性为对应的操作类型标识值（分别为 0、1、2），用于下拉选择框等组件展示给用户选择批量操作类型，进而根据用户选择执行相应的批量操作逻辑。
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
// operateType 属性用于存储用户当前选择的批量操作类型，初始值设为 null，等待用户在页面上通过下拉选择框选择具体的批量操作类型后，将对应的 value 值赋值给它，以便后续在执行批量操作的方法中根据该值判断要执行的具体操作逻辑。
operateType: null,
// selectDialogVisible 属性是一个布尔值，用于控制选择商品对话框的显示状态，初始设为 false，表示对话框默认是隐藏的，当需要打开对话框进行选择商品相关操作时（如点击“选择商品”按钮），会将其值改为 true，使其显示出来。
selectDialogVisible: false,
// dialogData 属性是一个对象，用于存储与选择商品对话框相关的数据信息，包括对话框内展示的商品列表、总条数、用户在对话框表格中多选的记录以及查询参数等。
dialogData: {
list: null,
total: null,
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
// sortDialogVisible 属性是一个布尔值，用于控制设置排序对话框的显示状态，初始设为 false，意味着对话框默认隐藏，当用户点击相关操作按钮（如“设置排序”按钮）时，会将其值改为 true，使对话框显示出来，方便用户输入排序相关信息。
sortDialogVisible: false,
// sortDialogData 属性是一个对象，用于存储设置排序对话框内相关的数据信息，初始包含 sort（排序值，初始设为 0）和 id（商品 ID，初始设为 null）两个属性，在打开对话框时会根据要设置排序的具体商品信息更新其值，最终将该对象作为参数传递给后端更新排序的函数，完成排序修改操作。
sortDialogData: {sort: 0, id: null}
}
},
created() {
// 在组件创建完成后，立即调用 getList 方法，该方法用于向后端请求获取热门商品列表数据，实现页面初次加载时展示已有热门商品信息的功能，确保页面能及时显示相应的数据内容。
this.getList();
},
filters: {
// 定义一个名为 formatRecommendStatus 的过滤器函数，用于对商品推荐状态的数据进行格式化处理，使其以更易读的文本形式展示在页面上。
// 如果传入的 status 参数值为 1，表示商品处于推荐中状态，此时函数返回“推荐中”文本；如果 status 值不为 1（即其他情况，这里主要指 0，表示未推荐状态），则返回“未推荐”文本，通过这个过滤器可以将后端返回的推荐状态数值转换为直观易懂的文字描述展示给用户。
formatRecommendStatus(status) {
if (status === 1) {
return '推荐中';
} else {
return '未推荐';
}
}
},
methods: {
// handleResetSearch 方法用于处理重置筛选条件的操作，通过将 listQuery 属性重新赋值为 defaultListQuery 的副本，将所有筛选条件恢复到初始默认状态，方便用户重新进行筛选操作，清除之前设置的各种筛选条件（如商品名称、推荐状态等）。
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// handleSearchList 方法用于处理点击“查询搜索”按钮的操作逻辑。
// 首先将 listQuery 对象中的 pageNum 属性设为 1，即重置为查询第一页的数据，然后调用 getList 方法，根据更新后的查询参数（可能包含用户之前设置的其他筛选条件等）向后端发起获取热门商品列表数据的请求，用于重新获取符合当前筛选条件的热门商品信息，实现根据用户筛选条件查询数据的功能。
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// handleSelectionChange 方法用于处理页面表格中行选择状态改变的事件，接收一个参数 val，该参数传递的是当前表格中被选中行的数据（或相关信息），将其赋值给 multipleSelection 属性，使得 multipleSelection 数组始终保持与用户在表格中的实际选择情况一致，方便后续基于多选记录进行批量操作等逻辑处理。
handleSelectionChange(val) {
this.multipleSelection = val;
},
// handleSizeChange 方法用于处理分页组件中每页显示数量改变的事件，接收一个参数 val，该参数表示用户选择的新的每页显示数量。
// 首先将 listQuery 对象中的 pageNum 属性设为 1，即重置为查询第一页的数据，然后将 listQuery 对象的 pageSize 属性更新为传入的 val 值，最后调用 getList 方法，根据更新后的查询参数（包含新的每页显示数量和可能存在的其他筛选条件等）向后端发起获取热门商品列表数据的请求，用于重新获取按照新的每页显示数量分页后的热门商品信息，实现分页功能中每页显示数量改变时的数据更新操作。
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// handleCurrentChange 方法用于处理分页组件中当前页码改变的事件，接收一个参数 val，该参数表示用户选择的新的当前页码。
// 将 listQuery 对象中的 pageNum 属性更新为传入的 val 值，然后调用 getList 方法，根据更新后的查询参数（包含新的当前页码和可能存在的其他筛选条件等）向后端发起获取热门商品列表数据的请求，用于重新获取对应页码的数据内容，实现分页功能中切换页码时的数据更新操作。
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// handleRecommendStatusStatusChange 方法用于处理商品推荐状态开关改变的操作，接收当前行的索引 index 和对应行的数据对象 row 作为参数，调用 updateRecommendStatusStatus 方法，并传入当前商品的 ID（row.id）以及当前商品新的推荐状态值（row.recommendStatus），用于向后端发起更新该商品推荐状态的请求，实现商品推荐状态的实时修改功能。
handleRecommendStatusStatusChange(index, row) {
this.updateRecommendStatusStatus(row.id, row.recommendStatus);
},
// handleDelete 方法用于处理点击“删除”按钮的操作逻辑，接收当前行的索引 index 和对应行的数据对象 row 作为参数，调用 deleteProduct 方法，并传入要删除商品的 ID（row.id），用于向后端发起删除该商品记录的请求，实现删除单个商品记录的功能。
handleDelete(index, row) {
this.deleteProduct(row.id);
},
// handleBatchOperate 方法用于处理批量操作的逻辑，当用户在页面上选择了批量操作类型并点击“确定”按钮时触发该方法。
// 首先判断 multipleSelection 数组的长度是否小于 1，如果是，表示用户没有选择任何要进行批量操作的商品记录，此时会弹出一个提示消息，告知用户“请选择一条记录”，提示类型为 warning（警告类型，样式上会比较醒目），持续时间为 1000 毫秒（1 秒），然后直接返回，不执行后续操作。
// 如果用户选择了商品记录（multipleSelection 数组有元素），则通过循环将 multipleSelection 数组中每个元素的 id 属性值提取出来，存入 ids 数组中，用于后续根据选择的批量操作类型对这些商品进行相应的批量操作。
// 接着通过判断 operateType 属性的值来确定要执行的具体批量操作：
// 如果 operateType 值为 0，表示用户选择的是“设为推荐”操作，调用 updateRecommendStatusStatus 方法，传入 ids 数组（包含要操作的商品 ID）和值为 1（代表推荐状态为推荐中）的参数，向后端发起将这些商品设为推荐状态的请求。
// 如果 operateType 值为 1，表示用户选择的是“取消推荐”操作，调用 updateRecommendStatusStatus 方法，传入 ids 数组和值为 0（代表推荐状态为未推荐）的参数，向后端发起将这些商品取消推荐状态的请求。
// 如果 operateType 值为 2，表示用户选择的是“删除”操作，调用 deleteProduct 方法，传入 ids 数组，向后端发起删除这些商品记录的请求。
// 如果 operateType 不是上述 0、1、2 中的任何值，表示用户没有选择正确的批量操作类型，此时会弹出提示消息，告知用户“请选择批量操作类型”，提示类型为 warning，持续时间为 1000 毫秒。
handleBatchOperate() {
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//设为推荐
this.updateRecommendStatusStatus(ids, 1);
} else if (this.operateType === 1) {
//取消推荐
this.updateRecommendStatusStatus(ids, 0);
} else if (this.operateType === 2) {
//删除
this.updateRecommendStatusStatus(ids, 2);
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
// handleSelectProduct 方法用于处理点击“选择商品”按钮的操作逻辑，将 selectDialogVisible 属性设为 true，使选择商品的对话框显示出来，方便用户进行选择商品的操作，同时调用 getDialogList 方法，用于获取并展示对话框内可供选择的商品列表数据，确保对话框打开时能正确显示商品信息。
handleSelectProduct() {
this.selectDialogVisible = true;
this.getDialogList();
},
// handleSelectSearch 方法用于处理在选择商品对话框内点击搜索按钮的操作逻辑，调用 getDialogList 方法，根据用户在对话框输入框中输入的搜索关键字等查询条件（存储在 dialogData.listQuery.keyword 等属性中）向后端发起获取商品列表数据的请求，用于更新并展示符合搜索条件的商品列表信息，实现对话框内的搜索功能。
handleSelectSearch() {
this.getDialogList();
},
// handleDialogSizeChange 方法用于处理选择商品对话框内分页组件中每页显示数量改变的事件，接收一个参数 val，该参数表示用户选择的新的每页显示数量。
// 首先将 dialogData.listQuery 对象中的 pageNum 属性设为 1，即重置为查询第一页的数据，然后将 dialogData.listQuery 对象的 pageSize 属性更新为传入的 val 值，最后调用 getDialogList 方法，根据更新后的查询参数（包含新的每页显示数量和可能存在的其他筛选条件等）向后端发起获取商品列表数据的请求，用于重新获取按照新的每页显示数量分页后的商品信息，实现对话框内分页功能中每页显示数量改变时的数据更新操作。
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
// handleDialogCurrentChange 方法用于处理选择商品对话框内分页组件中当前页码改变的事件，接收一个参数 val，该参数表示用户选择的新的当前页码。
// 将 dialogData.listQuery 对象中的 pageNum 属性更新为传入的 val 值，然后调用 getDialogList 方法，根据更新后的查询参数（包含新的当前页码和可能存在的其他筛选条件等）向后端发起获取商品列表数据的请求，用于重新获取对应页码的数据内容，实现对话框内分页功能中切换页码时的数据更新操作。

620
sms/new/index.vue
Unescape View File

@ -0,0 +1,620 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="商品名称：">
<el-input v-model="listQuery.productName" 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"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleSelectProduct()">选择商品</el-button>
</el-card>
<div class="table-container">
<el-table ref="newProductTable"
: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.productName}}</template>
</el-table-column>
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
</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"
type="text"
@click="handleEditSort(scope.$index, scope.row)">设置排序
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
<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="160" align="center">
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
</el-table-column>
<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
background
@size-change="handleDialogSizeChange"
@current-change="handleDialogCurrentChange"
layout="prev, pager, next"
:current-page.sync="dialogData.listQuery.pageNum"
:page-size="dialogData.listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="dialogData.total">
</el-pagination>
</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>
</div>
</template>
<script>
import {fetchList,updateRecommendStatus,deleteNewProduct,createNewProduct,updateNewProductSort} from '@/api/newProduct';
import {fetchList as fetchProductList} from '@/api/product';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'newProductList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
recommendOptions: Object.assign({}, defaultRecommendOptions),
list: null,
total: null,
listLoading: false,
multipleSelection: [],
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
operateType: null,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
}
},
created() {
this.getList();
},
filters:{
formatRecommendStatus(status){
if(status===1){
return '推荐中';
}else{
return '未推荐';
}
}
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
handleDelete(index,row){
this.deleteProduct(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//设为推荐
this.updateRecommendStatusStatus(ids,1);
} else if (this.operateType === 1) {
//取消推荐
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
//删除
this.deleteProduct(ids);
}else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
handleSelectProduct(){
this.selectDialogVisible=true;
this.getDialogList();
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectProducts = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectProducts.push({
productId:this.dialogData.multipleSelection[i].id,
productName:this.dialogData.multipleSelection[i].name
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createNewProduct(selectProducts).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
},
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateNewProductSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
deleteProduct(ids){
this.$confirm('是否要删除该推荐?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteNewProduct(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getDialogList(){
fetchProductList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
</script>
<style></style>
#abc
<script>
// 从 '@/api/newProduct' 模块中导入多个函数，这些函数用于与后端 API 进行交互，实现对新产品（newProduct）相关数据的不同操作。
// fetchList 函数用于获取新产品列表数据，它接收查询参数（例如筛选条件等），并从后端获取符合条件的新产品数据列表。
// updateRecommendStatus 函数用于更新新产品的推荐状态，需要传入相关参数告知后端要更新哪些产品的推荐状态以及更新后的具体状态值。
// deleteNewProduct 函数用于删除指定的新产品记录，通过传入对应的产品标识（如产品 ID 列表等）告知后端要删除的数据内容。
// createNewProduct 函数用于向新产品列表中添加新的产品记录，需要传入包含新商品相关信息的对象，与后端交互完成添加操作。
// updateNewProductSort 函数用于更新新产品的排序信息，传入相应的参数（如包含产品 ID 和新排序值的对象）来告知后端需要修改的产品及其新的排序情况，从而实现排序的更新操作。
import {fetchList, updateRecommendStatus, deleteNewProduct, createNewProduct, updateNewProductSort} from '@/api/newProduct';
// 从 '@/api/product' 模块中导入名为 fetchList 的函数，并将其重命名为 fetchProductList。这个函数同样用于获取产品列表数据，不过可能是用于获取更通用的产品信息，例如在选择商品等相关操作中，获取可供选择添加的产品信息等场景下使用。
import {fetchList as fetchProductList} from '@/api/product';
// 定义一个名为 defaultListQuery 的对象，用于设置获取新产品列表时的默认查询参数。
// pageNum 属性初始值设为 1，表示默认获取第一页的数据，方便初次加载或者重置分页时使用。
// pageSize 属性初始值设为 5，代表每页默认显示 5 条新产品记录，确定了每页数据量的初始设置。
// productName 属性初始设为 null，意味着一开始没有按照产品名称进行筛选的条件，后续可根据用户在界面输入的具体名称来进行相应筛选。
// recommendStatus 属性初始设为 null，同样表示初始状态下没有按推荐状态进行筛选的条件，等待用户通过界面选择具体推荐状态来进行筛选操作。
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
productName: null,
recommendStatus: null
};
// 定义一个名为 defaultRecommendOptions 的数组，用于设置产品推荐状态的可选选项。
// 数组中的每个元素都是一个对象，包含 label（展示给用户看的文本描述）和 value（实际对应的值，用于在程序中进行判断和传递给后端等操作）两个属性。
// 这里定义了两种推荐状态选项，一种是 "未推荐"，对应 value 值为 0；另一种是 "推荐中"，对应 value 值为 1。这些选项可用于界面上的下拉选择框等组件，让用户方便地选择产品的推荐状态作为筛选条件。
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default
name: 'newProductList',
data() {
return {
// listQuery 属性用于存储当前的查询参数，初始通过 Object.assign 将其赋值为 defaultListQuery 的副本，确保每次操作开始时查询参数有默认的初始状态，后续会根据用户在页面上的操作（如筛选、翻页等）动态更新其属性值，然后传递给 fetchList 函数等去获取符合条件的新产品列表数据。
listQuery: Object.assign({}, defaultListQuery),
// recommendOptions 属性用于存储产品推荐状态的可选选项，同样初始赋值为 defaultRecommendOptions 的副本，为界面上的下拉选择框等组件提供默认的推荐状态选项数据，保证数据的独立性和初始状态的一致性，便于在不同操作中都能正确获取和使用这些选项。
recommendOptions: Object.assign({}, defaultRecommendOptions),
// list 属性用于存储从后端获取到的新产品数据列表，初始值设为 null，在调用 getList 方法并成功获取数据后，会将获取到的实际数据赋值给它，以便后续在页面的表格等组件中展示相应的新产品信息。
list: null,
// total 属性用于存储新产品数据的总条数，初始设为 null，在获取数据成功后会将后端返回的总条数赋值给它，可用于分页组件等地方展示总共有多少条新产品记录，方便用户了解数据的整体规模以及进行分页操作时参考。
total: null,
// listLoading 属性是一个布尔值，用于标识当前是否正在从后端加载新产品的数据，初始设为 false，表示未处于加载状态，当发起获取数据请求时（如调用 getList 方法等）将其设为 true，数据加载完成后再设回 false，结合页面上的相关元素（如加载动画等）可以向用户展示数据加载的情况。
listLoading: false,
// multipleSelection 属性用于存储用户在页面表格中多选的新产品记录数据，初始值为空数组，每当表格中的行选择状态发生变化（如用户勾选或取消勾选行）时，会更新该数组的值，方便后续进行批量操作等基于多选记录的处理逻辑。
multipleSelection: [],
// operates 属性是一个数组，数组内包含多个对象，用于定义可进行的批量操作类型及对应的显示文本和实际值，每个对象的 label 属性为显示给用户的操作名称（如“设为推荐”“取消推荐”“删除”），value 属性为对应的操作类型标识值（分别为 0、1、2），用于下拉选择框等组件展示给用户选择批量操作类型，进而根据用户选择执行相应的批量操作逻辑。
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
// operateType 属性用于存储用户当前选择的批量操作类型，初始值设为 null，等待用户在页面上通过下拉选择框选择具体的批量操作类型后，将对应的 value 值赋值给它，以便后续在执行批量操作的方法（handleBatchOperate）中根据该值判断要执行的具体操作逻辑。
operateType: null,
// selectDialogVisible 属性是一个布尔值，用于控制选择商品对话框的显示状态，初始设为 false，表示对话框默认是隐藏的，当需要打开对话框进行选择商品相关操作时（如点击“选择商品”按钮），会将其值改为 true，使其显示出来，方便用户进行选择商品的操作。
selectDialogVisible: false,
// dialogData 属性是一个对象，用于存储与选择商品对话框相关的数据信息，包括对话框内展示的商品列表、总条数、用户在对话框表格中多选的记录以及查询参数等。各个子属性分别用于不同的目的，例如 list 用于存储获取到的商品列表数据，初始为 null；total 用于存储总条数，初始为 null；multipleSelection 用于存储在对话框中多选的商品记录，初始为空数组；listQuery 又是一个对象，用于存储对话框内的查询参数，如 keyword（搜索关键字）、pageNum（页码）、pageSize（每页显示数量）等，初始都有相应的默认值。
dialogData: {
list: null,
total: null,
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
// sortDialogVisible 属性是一个布尔值，用于控制设置排序对话框的显示状态，初始设为 false，意味着对话框默认隐藏，当用户点击相关操作按钮（如“设置排序”按钮）时，会将其值改为 true，使对话框显示出来，方便用户输入排序相关信息进行排序修改操作。
sortDialogVisible: false,
// sortDialogData 属性是一个对象，用于存储设置排序对话框内相关的数据信息，初始包含 sort（排序值，初始设为 0）和 id（产品 ID，初始设为 null）两个属性，在打开对话框时会根据要设置排序的具体产品信息更新其值，最终将该对象作为参数传递给 updateNewProductSort 函数，完成排序修改操作，告知后端要更新的产品及其新的排序值。
sortDialogData: {sort: 0, id: null}
}
},
created() {
// 在组件创建完成后，立即调用 getList 方法，该方法用于向后端请求获取新产品列表数据，实现页面初次加载时展示已有新产品信息的功能，确保页面能及时显示相应的数据内容，让用户能够看到初始的产品列表情况。
this.getList();
},
filters: {
// 定义一个名为 formatRecommendStatus 的过滤器函数，用于对产品推荐状态的数据进行格式化处理，使其以更易读的文本形式展示在页面上。
// 如果传入的 status 参数值为 1，表示产品处于推荐中状态，此时函数返回“推荐中”文本；如果 status 值不为 1（即其他情况，这里主要指 0，表示未推荐状态），则返回“未推荐”文本，通过这个过滤器可以将后端返回的推荐状态数值转换为直观易懂的文字描述展示给用户，提升用户界面的友好性。
formatRecommendStatus(status) {
if (status === 1) {
return '推荐中';
} else {
return '未推荐';
}
}
},
methods:
// handleResetSearch 方法用于处理重置筛选条件的操作，通过将 listQuery 属性重新赋值为 defaultListQuery 的副本，将所有筛选条件恢复到初始默认状态，方便用户重新进行筛选操作，清除之前设置的各种筛选条件（如产品名称、推荐状态等），使得下次查询可以基于初始条件进行。
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// handleSearchList 方法用于处理点击“查询搜索”按钮的操作逻辑。
// 首先将 listQuery 对象中的 pageNum 属性设为 1，即重置为查询第一页的数据，然后调用 getList 方法，根据更新后的查询参数（可能包含用户之前设置的其他筛选条件等）向后端发起获取新产品列表数据的请求，用于重新获取符合当前筛选条件的新产品信息，实现根据用户筛选条件查询数据的功能，方便用户获取最新的筛选结果。
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// handleSelectionChange 方法用于处理页面表格中行选择状态改变的事件，接收一个参数 val，该参数传递的是当前表格中被选中行的数据（或相关信息），将其赋值给 multipleSelection 属性，使得 multipleSelection 数组始终保持与用户在表格中的实际选择情况一致，方便后续进行批量操作等基于多选记录的处理逻辑，例如根据多选的记录执行批量删除、批量设置推荐状态等操作。
handleSelectionChange(val) {
this.multipleSelection = val;
},
// handleSizeChange 方法用于处理分页组件中每页显示数量改变的事件，接收一个参数 val，该参数表示用户选择的新的每页显示数量。
// 首先将 listQuery 对象中的 pageNum 属性设为 1，即重置为查询第一页的数据，然后将 listQuery 对象的 pageSize 属性更新为传入的 val 值，最后调用 getList 方法，根据更新后的查询参数（包含新的每页显示数量和可能存在的其他筛选条件等）向后端发起获取新产品列表数据的请求，用于重新获取按照新的每页显示数量分页后的新产品信息，实现分页功能中每页显示数量改变时的数据更新操作，确保页面展示的数据符合新的分页设置。
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// handleCurrentChange 方法用于处理分页组件中当前页码改变的事件，接收一个参数 val，该参数表示用户选择的新的当前页码。
// 将 listQuery 对象中的 pageNum 属性更新为传入的 val 值，然后调用 getList 方法，根据更新后的查询参数（包含新的当前页码和可能存在的其他筛选条件等）向后端发起获取新产品列表数据的请求，用于重新获取对应页码的数据内容，实现分页功能中切换页码时的数据更新操作，保证用户切换页码后能看到相应页码的数据信息。
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// handleRecommendStatusStatusChange 方法用于处理产品推荐状态开关改变的操作，接收当前行的索引 index 和对应行的数据对象 row 作为参数，调用 updateRecommendStatusStatus 方法，并传入当前产品的 ID（row.id）以及当前产品新的推荐状态值（row.recommendStatus），用于向后端发起更新该产品推荐状态的请求，实现产品推荐状态的实时修改功能，使得用户通过界面上的开关操作能及时更新产品的推荐状态信息在后端存储。
handleRecommendStatusStatusChange(index, row) {
this.updateRecommendStatusStatus(row.id, row.recommendStatus);
},
// handleDelete 方法用于处理点击“删除”按钮的操作逻辑，接收当前行的索引 index 和对应行的数据对象 row 作为参数，调用 deleteProduct 方法，并传入要删除产品的 ID（row.id），用于向后端发起删除该产品记录的请求，实现删除单个产品记录的功能，从产品列表中移除对应的产品信息。
handleDelete(index, row) {
this.deleteProduct(row.id);
},
// handleBatchOperate 方法用于处理批量操作的逻辑，当用户在页面上选择了批量操作类型并点击“确定”按钮时触发该方法。
// 首先判断 multipleSelection 数组的长度是否小于 1，如果是，表示用户没有选择任何要进行批量操作的产品记录，此时会弹出一个提示消息，告知用户“请选择一条记录”，提示类型为 warning（警告类型，样式上会比较醒目），持续时间为 1000 毫秒（1 秒），然后直接返回，不执行后续操作，避免因没有选择记录而导致错误操作。
// 如果用户选择了产品记录（multipleSelection 数组有元素），则通过循环将 multipleSelection 数组中每个元素的 id 属性值提取出来，存入 ids 数组中，用于后续根据选择的批量操作类型对这些产品进行相应的批量操作。
// 接着通过判断 operateType 属性的值来确定要执行的具体批量操作：
// 如果 operateType 值为 0，表示用户选择的是“设为推荐”操作，调用 updateRecommendStatusStatus 方法，传入 ids 数组（包含要操作的产品 ID）和值为 1（代表推荐状态为推荐中）的参数，向后端发起将这些产品设为推荐状态的请求。
// 如果 operateType 值为 1，表示用户选择的是“取消推荐”操作，调用 updateRecommendStatusStatus 方法，传入 ids 数组和值为 0（代表推荐状态为未推荐）的参数，向后端发起将这些产品取消推荐状态的请求。
// 如果 operateType 值为 2，表示用户选择的是“删除”操作，调用 deleteProduct 方法，传入 ids 数组，向后端发起删除这些产品记录的请求。
// 如果 operateType 不是上述 0、1、2 中的任何值，表示用户没有选择正确的批量操作类型，此时会弹出提示消息，告知用户“请选择批量操作类型”，提示类型为 warning，持续时间为 1000 毫秒，提示用户进行正确的操作选择。
handleBatchOperate() {
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//设为推荐
this.updateRecommendStatusStatus(ids, 1);
} else if (this.operateType === 1) {
//取消推荐
this.updateRecommendStatusStatus(ids, 0);
} else if (this.operateType === 2) {
//删除
this.updateRecommendStatusStatus(ids, 2);
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
// handleSelectProduct 方法用于处理点击“选择商品”按钮的操作逻辑，将 selectDialogVisible 属性设为 true，使选择商品的对话框显示出来，方便用户进行选择商品的操作，同时调用 getDialogList 方法，用于获取并展示对话框内可供选择的商品列表数据，确保对话框打开时能正确显示商品信息，让用户可以从中挑选需要的商品。
handleSelectProduct() {
this.selectDialogVisible = true;
this.getDialogList();
},
// handleSelectSearch 方法用于处理在选择商品对话框内点击搜索按钮的操作逻辑，调用 getDialogList 方法，根据用户在对话框输入框中输入的搜索关键字等查询条件（存储在 dialogData.listQuery.keyword 等属性中）向后端发起获取商品列表数据的请求，用于更新并展示符合搜索条件的商品列表信息，实现对话框内的搜索功能，方便用户在对话框中快速定位到想要选择的商品。
handleSelectSearch() {
this.getDialogList();
},

603
sms/subject/index.vue
Unescape View File

@ -0,0 +1,603 @@
<template> 
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="专题名称：">
<el-input v-model="listQuery.subjectName" 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"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button size="mini" class="btn-add" @click="handleSelectSubject()">选择专题</el-button>
</el-card>
<div class="table-container">
<el-table ref="newSubjectTable"
: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.subjectName}}</template>
</el-table-column>
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
</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"
type="text"
@click="handleEditSort(scope.$index, scope.row)">设置排序
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
<el-dialog title="选择专题" :visible.sync="selectDialogVisible" width="50%">
<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.title}}</template>
</el-table-column>
<el-table-column label="所属分类" width="160" align="center">
<template slot-scope="scope">{{scope.row.categoryName}}</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>
<div class="pagination-container">
<el-pagination
background
@size-change="handleDialogSizeChange"
@current-change="handleDialogCurrentChange"
layout="prev, pager, next"
:current-page.sync="dialogData.listQuery.pageNum"
:page-size="dialogData.listQuery.pageSize"
:page-sizes="[5,10,15]"
:total="dialogData.total">
</el-pagination>
</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>
</div>
</template>
<script>
import {fetchList,updateRecommendStatus,deleteHomeSubject,createHomeSubject,updateHomeSubjectSort} from '@/api/homeSubject';
import {fetchList as fetchSubjectList} from '@/api/subject';
import {formatDate} from '@/utils/date';
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
subjectName: null,
recommendStatus: null
};
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default {
name: 'homeSubjectList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
recommendOptions: Object.assign({}, defaultRecommendOptions),
list: null,
total: null,
listLoading: false,
multipleSelection: [],
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
operateType: null,
selectDialogVisible:false,
dialogData:{
list: null,
total: null,
multipleSelection:[],
listQuery:{
keyword: null,
pageNum: 1,
pageSize: 5
}
},
sortDialogVisible:false,
sortDialogData:{sort:0,id:null}
}
},
created() {
this.getList();
},
filters:{
formatRecommendStatus(status){
if(status===1){
return '推荐中';
}else{
return '未推荐';
}
},
formatTime(time){
if(time==null||time===''){
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val){
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleRecommendStatusStatusChange(index,row){
this.updateRecommendStatusStatus(row.id,row.recommendStatus);
},
handleDelete(index,row){
this.deleteSubject(row.id);
},
handleBatchOperate(){
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
if (this.operateType === 0) {
//设为推荐
this.updateRecommendStatusStatus(ids,1);
} else if (this.operateType === 1) {
//取消推荐
this.updateRecommendStatusStatus(ids,0);
} else if(this.operateType===2){
//删除
this.deleteSubject(ids);
}else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
}
},
handleSelectSubject(){
this.selectDialogVisible=true;
this.dialogData.listQuery.keyword=null;
this.getDialogList();
},
handleSelectSearch(){
this.getDialogList();
},
handleDialogSizeChange(val) {
this.dialogData.listQuery.pageNum = 1;
this.dialogData.listQuery.pageSize = val;
this.getDialogList();
},
handleDialogCurrentChange(val) {
this.dialogData.listQuery.pageNum = val;
this.getDialogList();
},
handleDialogSelectionChange(val){
this.dialogData.multipleSelection = val;
},
handleSelectDialogConfirm(){
if (this.dialogData.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let selectSubjects = [];
for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
selectSubjects.push({
subjectId:this.dialogData.multipleSelection[i].id,
subjectName:this.dialogData.multipleSelection[i].title
});
}
this.$confirm('使用要进行添加操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createHomeSubject(selectSubjects).then(response=>{
this.selectDialogVisible=false;
this.dialogData.multipleSelection=[];
this.getList();
this.$message({
type: 'success',
message: '添加成功!'
});
});
});
},
handleEditSort(index,row){
this.sortDialogVisible=true;
this.sortDialogData.sort=row.sort;
this.sortDialogData.id=row.id;
},
handleUpdateSort(){
this.$confirm('是否要修改排序?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateHomeSubjectSort(this.sortDialogData).then(response=>{
this.sortDialogVisible=false;
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
})
},
updateRecommendStatusStatus(ids,status){
this.$confirm('是否要修改推荐状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
params.append("recommendStatus",status);
updateRecommendStatus(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '修改成功!'
});
});
}).catch(() => {
this.$message({
type: 'success',
message: '已取消操作!'
});
this.getList();
});
},
deleteSubject(ids){
this.$confirm('是否要删除该推荐?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params=new URLSearchParams();
params.append("ids",ids);
deleteHomeSubject(params).then(response=>{
this.getList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
},
getDialogList(){
fetchSubjectList(this.dialogData.listQuery).then(response=>{
this.dialogData.list=response.data.list;
this.dialogData.total=response.data.total;
})
}
}
}
</script>
<style></style>
#abc
<script>
// 从 '@/api/homeSubject' 模块中导入多个函数，这些函数用于与后端 API 进行交互，实现对首页专题（homeSubject）相关数据的不同操作。
// fetchList 函数用于获取首页专题列表数据，接收相应的查询参数（例如筛选条件等），从后端获取符合条件的首页专题数据列表。
// updateRecommendStatus 函数用于更新首页专题的推荐状态，需要传入相关参数告知后端要更新哪些专题的推荐状态以及更新后的具体状态值。
// deleteHomeSubject 函数用于删除指定的首页专题记录，通过传入对应的专题标识（如专题 ID 列表等）告知后端要删除的数据内容。
// createHomeSubject 函数用于向首页专题列表中添加新的专题记录，需要传入包含新专题相关信息的对象，与后端交互完成添加操作。
// updateHomeSubjectSort 函数用于更新首页专题的排序信息，传入相应的参数（如包含专题 ID 和新排序值的对象）来告知后端需要修改的专题及其新的排序情况，从而实现排序的更新操作。
import {fetchList, updateRecommendStatus, deleteHomeSubject, createHomeSubject, updateHomeSubjectSort} from '@/api/homeSubject';
// 从 '@/api/subject' 模块中导入名为 fetchList 的函数，并将其重命名为 fetchSubjectList。这个函数同样用于获取专题列表数据，不过可能是用于获取更通用的专题信息，例如在选择专题等相关操作中，获取可供选择添加的专题信息等场景下使用。
import {fetchList as fetchSubjectList} from '@/api/subject';
// 从 '@/utils/date' 模块中导入 formatDate 函数，该函数可能用于对日期数据进行格式化处理，使其以特定的格式展示给用户，比如将日期对象格式化为 'yyyy-MM-dd hh:mm:ss' 这样的字符串格式。
import {formatDate} from '@/utils/date';
// 定义一个名为 defaultListQuery 的对象，用于设置获取首页专题列表时的默认查询参数。
// pageNum 属性初始值设为 1，表示默认获取第一页的数据，方便初次加载或者重置分页时使用。
// pageSize 属性初始值设为 5，代表每页默认显示 5 条首页专题记录，确定了每页数据量的初始设置。
// subjectName 属性初始设为 null，意味着一开始没有按照专题名称进行筛选的条件，后续可根据用户在界面输入的具体名称来进行相应筛选。
// recommendStatus 属性初始设为 null，同样表示初始状态下没有按推荐状态进行筛选的条件，等待用户通过界面选择具体推荐状态来进行筛选操作。
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
subjectName: null,
recommendStatus: null
};
// 定义一个名为 defaultRecommendOptions 的数组，用于设置首页专题推荐状态的可选选项。
// 数组中的每个元素都是一个对象，包含 label（展示给用户看的文本描述）和 value（实际对应的值，用于在程序中进行判断和传递给后端等操作）两个属性。
// 这里定义了两种推荐状态选项，一种是 "未推荐"，对应 value 值为 0；另一种是 "推荐中"，对应 value 值为 1。这些选项可用于界面上的下拉选择框等组件，让用户方便地选择专题的推荐状态作为筛选条件。
const defaultRecommendOptions = [
{
label: '未推荐',
value: 0
},
{
label: '推荐中',
value: 1
}
];
export default
name: 'homeSubjectList',
data() {
return {
// listQuery 属性用于存储当前的查询参数，初始通过 Object.assign 将其赋值为 defaultListQuery 的副本，确保每次操作开始时查询参数有默认的初始状态，后续会根据用户在页面上的操作（如筛选、翻页等）动态更新其属性值，然后传递给 fetchList 函数等去获取符合条件的首页专题列表数据。
listQuery: Object.assign({}, defaultListQuery),
// recommendOptions 属性用于存储首页专题推荐状态的可选选项，同样初始赋值为 defaultRecommendOptions 的副本，为界面上的下拉选择框等组件提供默认的推荐状态选项数据，保证数据的独立性和初始状态的一致性，便于在不同操作中都能正确获取和使用这些选项。
recommendOptions: Object.assign({}, defaultRecommendOptions),
// list 属性用于存储从后端获取到的首页专题数据列表，初始值设为 null，在调用 getList 方法并成功获取数据后，会将获取到的实际数据赋值给它，以便后续在页面的表格等组件中展示相应的首页专题信息。
list: null,
// total 属性用于存储首页专题数据的总条数，初始设为 null，在获取数据成功后会将后端返回的总条数赋值给它，可用于分页组件等地方展示总共有多少条首页专题记录，方便用户了解数据的整体规模以及进行分页操作时参考。
total: null,
// listLoading 属性是一个布尔值，用于标识当前是否正在从后端加载首页专题的数据，初始设为 false，表示未处于加载状态，当发起获取数据请求时（如调用 getList 方法等）将其设为 true，数据加载完成后再设回 false，结合页面上的相关元素（如加载动画等）可以向用户展示数据加载的情况。
listLoading: false,
// multipleSelection 属性用于存储用户在页面表格中多选的首页专题记录数据，初始值为空数组，每当表格中的行选择状态发生变化（如用户勾选或取消勾选行）时，会更新该数组的值，方便后续进行批量操作等基于多选记录的处理逻辑。
multipleSelection: [],
// operates 属性是一个数组，数组内包含多个对象，用于定义可进行的批量操作类型及对应的显示文本和实际值，每个对象的 label 属性为显示给用户的操作名称（如“设为推荐”“取消推荐”“删除”），value 属性为对应的操作类型标识值（分别为 0、1、2），用于下拉选择框等组件展示给用户选择批量操作类型，进而根据用户选择执行相应的批量操作逻辑。
operates: [
{
label: "设为推荐",
value: 0
},
{
label: "取消推荐",
value: 1
},
{
label: "删除",
value: 2
}
],
// operateType 属性用于存储用户当前选择的批量操作类型，初始值设为 null，等待用户在页面上通过下拉选择框选择具体的批量操作类型后，将对应的 value 值赋值给它，以便后续在执行批量操作的方法（handleBatchOperate）中根据该值判断要执行的具体操作逻辑。
operateType: null,
// selectDialogVisible 属性是一个布尔值，用于控制选择专题对话框的显示状态，初始设为 false，表示对话框默认是隐藏的，当需要打开对话框进行选择专题相关操作时（如点击“选择专题”按钮），会将其值改为 true，使其显示出来，方便用户进行选择专题的操作。
selectDialogVisible: false,
// dialogData 属性是一个对象，用于存储与选择专题对话框相关的数据信息，包括对话框内展示的专题列表、总条数、用户在对话框表格中多选的记录以及查询参数等。各个子属性分别用于不同的目的，例如 list 用于存储获取到的专题列表数据，初始为 null；total 用于存储总条数，初始为 null；multipleSelection 用于存储在对话框中多选的专题记录，初始为空数组；listQuery 又是一个对象，用于存储对话框内的查询参数，如 keyword（搜索关键字）、pageNum（页码）、pageSize（每页显示数量）等，初始都有相应的默认值。
dialogData: {
list: null,
total: null,
multipleSelection: [],
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 5
}
},
// sortDialogVisible 属性是一个布尔值，用于控制设置排序对话框的显示状态，初始设为 false，意味着对话框默认隐藏，当用户点击相关操作按钮（如“设置排序”按钮）时，会将其值改为 true，使对话框显示出来，方便用户输入排序相关信息进行排序修改操作。
sortDialogVisible: false,
// sortDialogData 属性是一个对象，用于存储设置排序对话框内相关的数据信息，初始包含 sort（排序值，初始设为 0）和 id（专题 ID，初始设为 null）两个属性，在打开对话框时会根据要设置排序的具体专题信息更新其值，最终将该对象作为参数传递给 updateHomeSubjectSort 函数，完成排序修改操作，告知后端要更新的专题及其新的排序值。
sortDialogData: {sort: 0, id: null}
}
},
created() {
// 在组件创建完成后，立即调用 getList 方法，该方法用于向后端请求获取首页专题列表数据，实现页面初次加载时展示已有首页专题信息的功能，确保页面能及时显示相应的数据内容，让用户能够看到初始的专题列表情况。
this.getList();
},
filters: {
// 定义一个名为 formatRecommendStatus 的过滤器函数，用于对首页专题推荐状态的数据进行格式化处理，使其以更易读的文本形式展示在页面上。
// 如果传入的 status 参数值为 1，表示专题处于推荐中状态，此时函数返回“推荐中”文本；如果 status 值不为 1（即其他情况，这里主要指 0，表示未推荐状态），则返回“未推荐”文本，通过这个过滤器可以将后端返回的推荐状态数值转换为直观易懂的文字描述展示给用户，提升用户界面的友好性。
formatRecommendStatus(status) {
if (status === 1) {
return '推荐中';
} else {
return '未推荐';
}
},
// 定义一个名为 formatTime 的过滤器函数，用于对时间数据进行格式化处理或者在时间数据为空时给出合适的显示文本。
// 如果传入的 time 参数为 null 或者空字符串，表示没有有效的时间数据，此时函数返回 'N/A'（表示不适用或无数据）。
// 如果 time 参数有值，则通过 new Date(time) 将其转换为日期对象，然后调用从外部导入的 formatDate 函数，将日期对象格式化为 'yyyy-MM-dd hh:mm:ss' 格式的字符串并返回，使得时间数据能以统一、易读的格式展示在页面上，比如在表格中展示专题的添加时间等场景下使用。
formatTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods:
// handleResetSearch 方法用于处理重置筛选条件的操作，通过将 listQuery 属性重新赋值为 defaultListQuery 的副本，将所有筛选条件恢复到初始默认状态，方便用户重新进行筛选操作，清除之前设置的各种筛选条件（如专题名称、推荐状态等），使得下次查询可以基于初始条件进行。
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
// handleSearchList 方法用于处理点击“查询搜索”按钮的操作逻辑。
// 首先将 listQuery 对象中的 pageNum 属性设为 1，即重置为查询第一页的数据，然后调用 getList 方法，根据更新后的查询参数（可能包含用户之前设置的其他筛选条件等）向后端发起获取首页专题列表数据的请求，用于重新获取符合当前筛选条件的首页专题信息，实现根据用户筛选条件查询数据的功能，方便用户获取最新的筛选结果。
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
// handleSelectionChange 方法用于处理页面表格中行选择状态改变的事件，接收一个参数 val，该参数传递的是当前表格中被选中行的数据（或相关信息），将其赋值给 multipleSelection 属性，使得 multipleSelection 数组始终保持与用户在表格中的实际选择情况一致，方便后续进行批量操作等基于多选记录的处理逻辑，例如根据多选的记录执行批量删除、批量设置推荐状态等操作。
handleSelectionChange(val) {
this.multipleSelection = val;
},
// handleSizeChange 方法用于处理分页组件中每页显示数量改变的事件，接收一个参数 val，该参数表示用户选择的新的每页显示数量。
// 首先将 listQuery 对象中的 pageNum 属性设为 1，即重置为查询第一页的数据，然后将 listQuery 对象的 pageSize 属性更新为传入的 val 值，最后调用 getList 方法，根据更新后的查询参数（包含新的每页显示数量和可能存在的其他筛选条件等）向后端发起获取首页专题列表数据的请求，用于重新获取按照新的每页显示数量分页后的首页专题信息，实现分页功能中每页显示数量改变时的数据更新操作，确保页面展示的数据符合新的分页设置。
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// handleCurrentChange 方法用于处理分页组件中当前页码改变的事件，接收一个参数 val，该参数表示用户选择的新的当前页码。
// 将 listQuery 对象中的 pageNum 属性更新为传入的 val 值，然后调用 getList 方法，根据更新后的查询参数（包含新的当前页码和可能存在的其他筛选条件等）向后端发起获取首页专题列表数据的请求，用于重新获取对应页码的数据内容，实现分页功能中切换页码时的数据更新操作，保证用户切换页码后能看到相应页码的数据信息。
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// handleRecommendStatusStatusChange 方法用于处理首页专题推荐状态开关改变的操作，接收当前行的索引 index 和对应行的数据对象 row 作为参数，调用 updateRecommendStatusStatus 方法，并传入当前专题的 ID（row.id）以及当前专题新的推荐状态值（row.recommendStatus），用于向后端发起更新该专题推荐状态的请求，实现专题推荐状态的实时修改功能，使得用户通过界面上的开关操作能及时更新专题的推荐状态信息在后端存储。
handleRecommendStatusStatusChange(index, row) {
this.updateRecommendStatusStatus(row.id, row.recommendStatus);
},
// handleDelete 方法用于处理点击“删除”按钮的操作逻辑，接收当前行的索引 index 和对应行的数据对象 row 作为参数，调用 deleteSubject 方法，并传入要删除专题的 ID（row.id），用于向后端发起删除该专题记录的请求，实现删除单个专题记录的功能，从专题列表中移除对应的专题信息。
handleDelete(index, row) {
this.deleteSubject(row.id);
},
// handleBatchOperate 方法用于处理批量操作的逻辑，当用户在页面上选择了批量操作类型并点击“确定”按钮时触发该方法。
// 首先判断 multipleSelection 数组的长度是否小于 1，如果是，表示用户没有选择任何要进行批量操作的首页专题记录，此时会弹出一个提示消息，告知用户“请选择一条记录”，提示类型为 warning（警告类型，样式上会比较醒目），持续时间为 1000 毫秒（1 秒），然后直接返回，不执行后续操作，避免因没有选择记录而导致错误操作。
// 如果用户选择了专题记录（multipleSelection 数组有元素），则通过循环将 multipleSelection 数组中每个元素的 id 属性值提取出来，存入 ids 数组中，用于后续根据选择的批量操作类型对这些专题进行相应的批量操作。
// 接着通过判断 operateType 属性的值来确定要执行的具体批量操作：
// 如果 operateType 值为 0，表示用户选择的是“设为推荐”操作，调用 updateRecommendStatusStatus 方法，传入 ids 数组（包含要操作的专题 ID）和值为 1（代表推荐状态为推荐中）的参数，向后端发起将这些专题设为推荐状态的请求。
// 如果 operateType 值为 1，表示用户选择的是“取消推荐”操作，调用 updateRecommendStatusStatus 方法，传入 ids 数组和值为 0（代表推荐状态为未推荐）的参数，向后端发起将这些专题取消推荐状态的请求。
// 如果 operateType 值为 2，表示用户选择的是“删除”操作，调用 deleteSubject 方法，传入 ids 数组，向后端发起删除这些专题记录的请求。
// 如果 operateType 不是上述 0、1、2 中的任何值，表示用户没有选择正确的批量操作类型，此时会弹出提示消息，告知用户“请选择批量操作类型”，提示类型为 warning，持续时间为 1000 毫秒，提示用户进行正确的操作选择。
Write Preview
Loading…
Cancel
Save