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