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

111

Browse Source
branch_lyj
Liuyujie 3 months ago
parent 8f7831acae
commit 2867462093
4 changed files with 277 additions and 195 deletions
Show Stats Download Patch File Download Diff File

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

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

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

@ -1,15 +1,19 @@
<template>  <template> 
<el-card class="form-container" shadow="never"> <el-card class="form-container" shadow="never">
<!-- 表单容器，使用Element UI的卡片组件 -->
<el-form :model="homeAdvertise" <el-form :model="homeAdvertise"
:rules="rules" :rules="rules"
ref="homeAdvertiseFrom" ref="homeAdvertiseFrom"
label-width="150px" label-width="150px"
size="small"> size="small">
<!-- 表单绑定数据模型和验证规则，引用名称为'homeAdvertiseFrom' -->
<el-form-item label="广告名称：" prop="name"> <el-form-item label="广告名称：" prop="name">
<el-input v-model="homeAdvertise.name" class="input-width"></el-input> <el-input v-model="homeAdvertise.name" class="input-width"></el-input>
<!-- 输入框绑定到homeAdvertise.name，用于输入广告名称 -->
</el-form-item> </el-form-item>
<el-form-item label="广告位置："> <el-form-item label="广告位置：">
<el-select v-model="homeAdvertise.type"> <el-select v-model="homeAdvertise.type">
<!-- 下拉选择框绑定到homeAdvertise.type，用于选择广告位置 -->
<el-option <el-option
v-for="type in typeOptions" v-for="type in typeOptions"
:key="type.value" :key="type.value"
@ -23,27 +27,33 @@
type="datetime" type="datetime"
placeholder="选择日期" placeholder="选择日期"
v-model="homeAdvertise.startTime"></el-date-picker> v-model="homeAdvertise.startTime"></el-date-picker>
<!-- 日期选择器绑定到homeAdvertise.startTime，用于选择开始时间 -->
</el-form-item> </el-form-item>
<el-form-item label="到期时间：" prop="endTime"> <el-form-item label="到期时间：" prop="endTime">
<el-date-picker <el-date-picker
type="datetime" type="datetime"
placeholder="选择日期" placeholder="选择日期"
v-model="homeAdvertise.endTime"></el-date-picker> v-model="homeAdvertise.endTime"></el-date-picker>
<!-- 日期选择器绑定到homeAdvertise.endTime，用于选择到期时间 -->
</el-form-item> </el-form-item>
<el-form-item label="上线/下线："> <el-form-item label="上线/下线：">
<el-radio-group v-model="homeAdvertise.status"> <el-radio-group v-model="homeAdvertise.status">
<!-- 单选按钮组绑定到homeAdvertise.status，用于选择广告状态（上线或下线） -->
<el-radio :label="0">下线</el-radio> <el-radio :label="0">下线</el-radio>
<el-radio :label="1">上线</el-radio> <el-radio :label="1">上线</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="广告图片："> <el-form-item label="广告图片：">
<single-upload v-model="homeAdvertise.pic"></single-upload> <single-upload v-model="homeAdvertise.pic"></single-upload>
<!-- 自定义上传组件绑定到homeAdvertise.pic，用于上传广告图片 -->
</el-form-item> </el-form-item>
<el-form-item label="排序："> <el-form-item label="排序：">
<el-input v-model="homeAdvertise.sort" class="input-width"></el-input> <el-input v-model="homeAdvertise.sort" class="input-width"></el-input>
<!-- 输入框绑定到homeAdvertise.sort，用于输入广告排序 -->
</el-form-item> </el-form-item>
<el-form-item label="广告链接：" prop="url"> <el-form-item label="广告链接：" prop="url">
<el-input v-model="homeAdvertise.url" class="input-width"></el-input> <el-input v-model="homeAdvertise.url" class="input-width"></el-input>
<!-- 输入框绑定到homeAdvertise.url，用于输入广告链接 -->
</el-form-item> </el-form-item>
<el-form-item label="广告备注："> <el-form-item label="广告备注：">
<el-input <el-input
@ -53,18 +63,21 @@
placeholder="请输入内容" placeholder="请输入内容"
v-model="homeAdvertise.note"> v-model="homeAdvertise.note">
</el-input> </el-input>
<!-- 文本域绑定到homeAdvertise.note，用于输入广告备注 -->
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit('homeAdvertiseFrom')">提交</el-button> <el-button type="primary" @click="onSubmit('homeAdvertiseFrom')">提交</el-button>
<!-- 提交按钮，点击时调用submitForm方法 -->
<el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')">重置</el-button> <el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')">重置</el-button>
<!-- 重置按钮，点击时调用resetForm方法 -->
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
</template> </template>
<script> <script>
import SingleUpload from '@/components/Upload/singleUpload' import SingleUpload from '@/components/Upload/singleUpload' // 导入单文件上传组件
import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise' import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise' // 导入API接口函数
const defaultTypeOptions = [ const defaultTypeOptions = [ // 默认广告位置选项
{ {
label: 'PC首页轮播', label: 'PC首页轮播',
value: 0 value: 0
@ -74,7 +87,7 @@
value: 1 value: 1
} }
]; ];
const defaultHomeAdvertise = { const defaultHomeAdvertise = { // 默认广告数据模型
name: null, name: null,
type: 1, type: 1,
pic: null, pic: null,
@ -86,18 +99,18 @@
sort: 0 sort: 0
}; };
export default { export default {
name: 'HomeAdvertiseDetail', name: 'HomeAdvertiseDetail', // 组件名称
components:{SingleUpload}, components:{SingleUpload}, // 注册子组件
props: { props: { // 接收父组件传递的isEdit属性，判断是否为编辑模式
isEdit: { isEdit: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
data() { data() { // 定义组件的数据模型和方法
return { return {
homeAdvertise: null, homeAdvertise: null, // 广告数据模型
rules: { rules: { // 表单验证规则
name: [ name: [
{required: true, message: '请输入广告名称', trigger: 'blur'}, {required: true, message: '请输入广告名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'} {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
@ -115,42 +128,42 @@
{required: true, message: '请选择广告图片', trigger: 'blur'} {required: true, message: '请选择广告图片', trigger: 'blur'}
] ]
}, },
typeOptions: Object.assign({}, defaultTypeOptions) typeOptions: Object.assign({}, defaultTypeOptions) // 广告位置选项，初始化为默认值
} }
}, },
created(){ created(){ // 生命周期钩子，组件创建时执行
if (this.isEdit) { if (this.isEdit) { // 如果是编辑模式，获取广告详情数据并赋值给homeAdvertise
getHomeAdvertise(this.$route.query.id).then(response => { getHomeAdvertise(this.$route.query.id).then(response => {
this.homeAdvertise = response.data; this.homeAdvertise = response.data;
}); });
}else{ }else{ // 如果不是编辑模式，初始化homeAdvertise为默认值
this.homeAdvertise = Object.assign({},defaultHomeAdvertise); this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
} }
}, },
methods: { methods: { // 定义组件的方法
onSubmit(formName) { onSubmit(formName) { // 提交表单的方法
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => { // 验证表单数据
if (valid) { if (valid) { // 如果验证通过，显示确认对话框并根据是否为编辑模式调用相应的API接口
this.$confirm('是否提交数据', '提示', { this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
if (this.isEdit) { if (this.isEdit) { // 编辑模式，调用更新广告信息的API接口
updateHomeAdvertise(this.$route.query.id, this.homeAdvertise).then(response => { updateHomeAdvertise(this.$route.query.id, this.homeAdvertise).then(response => {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields(); // 重置表单字段
this.$message({ this.$message({ // 显示成功消息提示
message: '修改成功', message: '修改成功',
type: 'success', type: 'success',
duration:1000 duration:1000
}); });
this.$router.back(); this.$router.back(); // 返回上一页
}); });
} else { } else { // 新建模式，调用创建广告信息的API接口
createHomeAdvertise(this.homeAdvertise).then(response => { createHomeAdvertise(this.homeAdvertise).then(response => {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields(); // 重置表单字段
this.homeAdvertise = Object.assign({},defaultHomeAdvertise); this.homeAdvertise = Object.assign({},defaultHomeAdvertise); // 重新初始化homeAdvertise为默认值
this.$message({ this.$message({ // 显示成功消息提示
message: '提交成功', message: '提交成功',
type: 'success', type: 'success',
duration:1000 duration:1000
@ -159,26 +172,26 @@
} }
}); });
} else { } else { // 如果验证不通过，显示错误消息提示
this.$message({ this.$message({
message: '验证失败', message: '验证失败',
type: 'error', type: 'error',
duration:1000 duration:1000
}); });
return false; return false; // 阻止表单提交
} }
}); });
}, },
resetForm(formName) { resetForm(formName) { // 重置表单的方法
this.$refs[formName].resetFields(); this.$refs[formName].resetFields(); // 重置表单字段
this.homeAdvertise = Object.assign({},defaultHomeAdvertise); this.homeAdvertise = Object.assign({},defaultHomeAdvertise); // 重新初始化homeAdvertise为默认值
} }
} }
} }
</script> </script>
<style scoped> <style scoped> // 定义组件的样式，scoped表示样式只作用于当前组件
.input-width { .input-width { // 定义输入框宽度样式类
width: 70%; width: 70%; // 设置输入框宽度为70%
} }
</style> </style>

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

@ -1,9 +1,13 @@
<template>  <template> 
<div class="app-container"> <div class="app-container">
<!-- 筛选搜索区域 -->
<el-card class="filter-container" shadow="never"> <el-card class="filter-container" shadow="never">
<div> <div>
<!-- 搜索图标 -->
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
<!-- 筛选搜索文本 -->
<span>筛选搜索</span> <span>筛选搜索</span>
<!-- 查询按钮 -->
<el-button <el-button
style="float:right" style="float:right"
type="primary" type="primary"
@ -11,6 +15,7 @@
size="small"> size="small">
查询搜索 查询搜索
</el-button> </el-button>
<!-- 重置按钮 -->
<el-button <el-button
style="float:right;margin-right: 15px" style="float:right;margin-right: 15px"
@click="handleResetSearch()" @click="handleResetSearch()"
@ -18,11 +23,14 @@
重置 重置
</el-button> </el-button>
</div> </div>
<!-- 表单布局，用于输入筛选条件 -->
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px"> <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 广告名称筛选项 -->
<el-form-item label="广告名称："> <el-form-item label="广告名称：">
<el-input v-model="listQuery.name" class="input-width" placeholder="广告名称"></el-input> <el-input v-model="listQuery.name" class="input-width" placeholder="广告名称"></el-input>
</el-form-item> </el-form-item>
<!-- 广告位置筛选项 -->
<el-form-item label="广告位置："> <el-form-item label="广告位置：">
<el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width"> <el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
<el-option v-for="item in typeOptions" <el-option v-for="item in typeOptions"
@ -32,6 +40,7 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 到期时间筛选项 -->
<el-form-item label="到期时间："> <el-form-item label="到期时间：">
<el-date-picker <el-date-picker
class="input-width" class="input-width"
@ -44,36 +53,48 @@
</el-form> </el-form>
</div> </div>
</el-card> </el-card>
<!-- 操作区域 -->
<el-card class="operate-container" shadow="never"> <el-card class="operate-container" shadow="never">
<!-- 操作图标 -->
<i class="el-icon-tickets"></i> <i class="el-icon-tickets"></i>
<!-- 数据列表文本 -->
<span>数据列表</span> <span>数据列表</span>
<!-- 添加广告按钮 -->
<el-button size="mini" class="btn-add" @click="handleAdd()">添加广告</el-button> <el-button size="mini" class="btn-add" @click="handleAdd()">添加广告</el-button>
</el-card> </el-card>
<!-- 表格展示区域 -->
<div class="table-container"> <div class="table-container">
<el-table ref="homeAdvertiseTable" <el-table ref="homeAdvertiseTable"
:data="list" :data="list"
style="width: 100%;" style="width: 100%;"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
v-loading="listLoading" border> v-loading="listLoading" border>
<!-- 选择框列 -->
<el-table-column type="selection" width="60" align="center"></el-table-column> <el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 编号列 -->
<el-table-column label="编号" width="120" align="center"> <el-table-column label="编号" width="120" align="center">
<template slot-scope="scope">{{scope.row.id}}</template> <template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column> </el-table-column>
<!-- 广告名称列 -->
<el-table-column label="广告名称" align="center"> <el-table-column label="广告名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template> <template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column> </el-table-column>
<!-- 广告位置列 -->
<el-table-column label="广告位置" width="120" align="center"> <el-table-column label="广告位置" width="120" align="center">
<template slot-scope="scope">{{scope.row.type | formatType}}</template> <template slot-scope="scope">{{scope.row.type | formatType}}</template>
</el-table-column> </el-table-column>
<!-- 广告图片列 -->
<el-table-column label="广告图片" width="120" align="center"> <el-table-column label="广告图片" width="120" align="center">
<template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template> <template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
</el-table-column> </el-table-column>
<!-- 时间列 -->
<el-table-column label="时间" width="220" align="center"> <el-table-column label="时间" width="220" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<p>开始时间：{{scope.row.startTime | formatTime}}</p> <p>开始时间：{{scope.row.startTime | formatTime}}</p>
<p>到期时间：{{scope.row.endTime | formatTime}}</p> <p>到期时间：{{scope.row.endTime | formatTime}}</p>
</template> </template>
</el-table-column> </el-table-column>
<!-- 上线/下线状态列 -->
<el-table-column label="上线/下线" width="120" align="center"> <el-table-column label="上线/下线" width="120" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
@ -84,18 +105,23 @@
</el-switch> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
<!-- 点击次数列 -->
<el-table-column label="点击次数" width="120" align="center"> <el-table-column label="点击次数" width="120" align="center">
<template slot-scope="scope">{{scope.row.clickCount}}</template> <template slot-scope="scope">{{scope.row.clickCount}}</template>
</el-table-column> </el-table-column>
<!-- 生成订单列 -->
<el-table-column label="生成订单" width="120" align="center"> <el-table-column label="生成订单" width="120" align="center">
<template slot-scope="scope">{{scope.row.orderCount}}</template> <template slot-scope="scope">{{scope.row.orderCount}}</template>
</el-table-column> </el-table-column>
<!-- 操作列 -->
<el-table-column label="操作" width="120" align="center"> <el-table-column label="操作" width="120" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 编辑按钮 -->
<el-button size="mini" <el-button size="mini"
type="text" type="text"
@click="handleUpdate(scope.$index, scope.row)">编辑 @click="handleUpdate(scope.$index, scope.row)">编辑
</el-button> </el-button>
<!-- 删除按钮 -->
<el-button size="mini" <el-button size="mini"
type="text" type="text"
@click="handleDelete(scope.$index, scope.row)">删除 @click="handleDelete(scope.$index, scope.row)">删除
@ -104,10 +130,13 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 这是一个包含批量操作和分页功能的容器 div -->
<div class="batch-operate-container"> <div class="batch-operate-container">
<!-- el-select 组件，用于选择批量操作的类型，设置了 small 尺寸，并使用 v-model 双向绑定数据到 operateType 变量，placeholder 用于显示默认提示文本 -->
<el-select <el-select
size="small" size="small"
v-model="operateType" placeholder="批量操作"> v-model="operateType" placeholder="批量操作">
<!-- 使用 v-for 循环遍历 operates 数组来生成 el-option 选项，每个选项的 key 根据 item.value 来设置，label 显示文本取自 item.label，value 值取自 item.value -->
<el-option <el-option
v-for="item in operates" v-for="item in operates"
:key="item.value" :key="item.value"
@ -115,6 +144,7 @@
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<!-- el-button 组件，是一个按钮，设置了左边距为 20 像素，添加了 search-button 类名，绑定了点击事件 handleBatchOperate()，按钮类型为 primary（通常是主要操作按钮的样式），尺寸为 small -->
<el-button <el-button
style="margin-left: 20px" style="margin-left: 20px"
class="search-button" class="search-button"
@ -124,6 +154,7 @@
确定 确定
</el-button> </el-button>
</div> </div>
<!-- 这是一个用于分页功能展示的容器 div -->
<div class="pagination-container"> <div class="pagination-container">
<el-pagination <el-pagination
background background
@ -139,16 +170,21 @@
</div> </div>
</template> </template>
<script> <script>
import {fetchList,updateStatus,deleteHomeAdvertise} from '@/api/homeAdvertise'; // 从'@/api/homeAdvertise'模块导入获取列表、更新状态、删除广告相关的函数
import {formatDate} from '@/utils/date'; import {fetchList, updateStatus, deleteHomeAdvertise} from '@/api/homeAdvertise';
const defaultListQuery = { // 从'@/utils/date'模块导入日期格式化函数
import {formatDate} from '@/utils/date';
// 默认的列表查询参数对象，包含页码、每页数量、名称、类型、结束时间等属性初始值
const defaultListQuery = {
pageNum: 1, pageNum: 1,
pageSize: 5, pageSize: 5,
name: null, name: null,
type: null, type: null,
endTime:null endTime: null
}; };
const defaultTypeOptions = [ // 默认的广告类型选项数组，包含PC首页轮播、APP首页轮播等类型及对应值
const defaultTypeOptions = [
{ {
label: 'PC首页轮播', label: 'PC首页轮播',
value: 0 value: 0
@ -157,39 +193,51 @@
label: 'APP首页轮播', label: 'APP首页轮播',
value: 1 value: 1
} }
]; ];
export default {
export default {
name: 'homeAdvertiseList', name: 'homeAdvertiseList',
data() { data() {
return { return {
// 当前列表查询参数，初始为默认值副本
listQuery: Object.assign({}, defaultListQuery), listQuery: Object.assign({}, defaultListQuery),
// 广告类型选项，初始为默认值副本
typeOptions: Object.assign({}, defaultTypeOptions), typeOptions: Object.assign({}, defaultTypeOptions),
// 广告列表数据，初始为null
list: null, list: null,
// 广告数据总条数，初始为null
total: null, total: null,
// 列表数据加载状态，初始为false
listLoading: false, listLoading: false,
// 多选选中的广告记录，初始为空数组
multipleSelection: [], multipleSelection: [],
// 批量操作选项，目前只有“删除”
operates: [ operates: [
{ {
label: "删除", label: "删除",
value: 0 value: 0
} }
], ],
// 当前选择的批量操作类型，初始为null
operateType: null operateType: null
} }
}, },
created() { created() {
// 组件创建时调用，获取广告列表数据
this.getList(); this.getList();
}, },
filters:{ filters: {
formatType(type){ // 格式化广告类型显示文本的过滤器
if(type===1){ formatType(type) {
if (type === 1) {
return 'APP首页轮播'; return 'APP首页轮播';
}else{ } else {
return 'PC首页轮播'; return 'PC首页轮播';
} }
}, },
formatTime(time){ // 格式化时间显示文本的过滤器
if(time==null||time===''){ formatTime(time) {
if (time == null || time === '') {
return 'N/A'; return 'N/A';
} }
let date = new Date(time); let date = new Date(time);
@ -197,32 +245,38 @@
}, },
}, },
methods: { methods: {
// 重置搜索条件的方法
handleResetSearch() { handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery); this.listQuery = Object.assign({}, defaultListQuery);
}, },
// 处理搜索列表的方法，重置页码后获取列表数据
handleSearchList() { handleSearchList() {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
this.getList(); this.getList();
}, },
handleSelectionChange(val){ // 处理多选选择改变的方法，更新多选选中的记录
handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
}, },
// 处理每页显示数量改变的方法，重置页码，更新每页数量后获取列表数据
handleSizeChange(val) { handleSizeChange(val) {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
this.listQuery.pageSize = val; this.listQuery.pageSize = val;
this.getList(); this.getList();
}, },
// 处理当前页码改变的方法，更新页码后获取列表数据
handleCurrentChange(val) { handleCurrentChange(val) {
this.listQuery.pageNum = val; this.listQuery.pageNum = val;
this.getList(); this.getList();
}, },
handleUpdateStatus(index,row){ // 处理更新广告状态的方法，确认后调用接口更新状态，成功则重新获取列表数据并提示
handleUpdateStatus(index, row) {
this.$confirm('是否要修改上线/下线状态?', '提示', { this.$confirm('是否要修改上线/下线状态?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
updateStatus(row.id,{status:row.status}).then(response=>{ updateStatus(row.id, {status: row.status}).then(response => {
this.getList(); this.getList();
this.$message({ this.$message({
type: 'success', type: 'success',
@ -237,10 +291,12 @@
this.getList(); this.getList();
}); });
}, },
handleDelete(index,row){ // 处理删除单个广告的方法，调用删除广告的接口
handleDelete(index, row) {
this.deleteHomeAdvertise(row.id); this.deleteHomeAdvertise(row.id);
}, },
handleBatchOperate(){ // 处理批量操作的方法，先判断是否有选中记录，有则根据操作类型执行相应操作
handleBatchOperate() {
if (this.multipleSelection < 1) { if (this.multipleSelection < 1) {
this.$message({ this.$message({
message: '请选择一条记录', message: '请选择一条记录',
@ -253,10 +309,10 @@
for (let i = 0; i < this.multipleSelection.length; i++) { for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id); ids.push(this.multipleSelection[i].id);
} }
if(this.operateType===0){ if (this.operateType === 0) {
//删除 // 删除
this.deleteHomeAdvertise(ids); this.deleteHomeAdvertise(ids);
}else { } else {
this.$message({ this.$message({
message: '请选择批量操作类型', message: '请选择批量操作类型',
type: 'warning', type: 'warning',
@ -264,12 +320,15 @@
}); });
} }
}, },
handleAdd(){ // 处理添加广告的方法，跳转到添加广告的路由页面
handleAdd() {
this.$router.push({path: '/sms/addAdvertise'}) this.$router.push({path: '/sms/addAdvertise'})
}, },
handleUpdate(index,row){ // 处理更新广告的方法，跳转到更新广告的路由页面并传递广告id
handleUpdate(index, row) {
this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}}) this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
}, },
// 获取广告列表数据的方法，设置加载状态为true，获取成功后更新数据及加载状态
getList() { getList() {
this.listLoading = true; this.listLoading = true;
fetchList(this.listQuery).then(response => { fetchList(this.listQuery).then(response => {
@ -278,15 +337,16 @@
this.total = response.data.total; this.total = response.data.total;
}) })
}, },
deleteHomeAdvertise(ids){ // 删除广告的方法，确认后调用接口删除，成功则重新获取列表数据并提示
deleteHomeAdvertise(ids) {
this.$confirm('是否要删除该广告?', '提示', { this.$confirm('是否要删除该广告?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
let params=new URLSearchParams(); let params = new URLSearchParams();
params.append("ids",ids); params.append("ids", ids);
deleteHomeAdvertise(params).then(response=>{ deleteHomeAdvertise(params).then(response => {
this.getList(); this.getList();
this.$message({ this.$message({
type: 'success', type: 'success',
@ -296,12 +356,14 @@
}) })
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.input-width { <!-- 带有scoped属性的style标签，里面样式仅作用于当前组件 -->
.input-width {
<!-- 定义类选择器样式，设置宽度为203px -->
width: 203px; width: 203px;
} }
</style> </style>

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

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

Write Preview
Loading…
Cancel
Save