|
|
<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> |
