index.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <div class="app-container">
  3. <doc-alert title="功能开启" url="https://doc.iocoder.cn/mall/build/" />
  4. <!-- 操作工具栏 -->
  5. <el-row :gutter="10" class="mb8">
  6. <el-col :span="1.5">
  7. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
  8. v-hasPermi="['promotion:seckill-time:create']">新增秒杀时段</el-button>
  9. </el-col>
  10. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  11. </el-row>
  12. <!-- 列表 -->
  13. <el-table v-loading="loading" :data="list">
  14. <el-table-column label="秒杀时段名称" align="center" prop="name" />
  15. <el-table-column label="开始时间点" align="center" prop="startTime" width="180">
  16. <template v-slot="scope">
  17. <span>{{ scope.row.startTime }}</span>
  18. </template>
  19. </el-table-column>
  20. <el-table-column label="结束时间点" align="center" prop="endTime" width="180">
  21. <template v-slot="scope">
  22. <span>{{ scope.row.endTime }}</span>
  23. </template>
  24. </el-table-column>
  25. <el-table-column label="秒杀活动数量" align="center" prop="seckillActivityCount" />
  26. <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  27. <template v-slot="scope">
  28. <span>{{ parseTime(scope.row.createTime) }}</span>
  29. </template>
  30. </el-table-column>
  31. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  32. <template v-slot="scope">
  33. <el-button size="mini" type="text" icon="el-icon-view" @click="handleOpenSeckillActivity(scope.row)">
  34. 查看秒杀活动</el-button>
  35. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
  36. v-hasPermi="['promotion:seckill-time:update']">修改</el-button>
  37. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
  38. v-hasPermi="['promotion:seckill-time:delete']">删除</el-button>
  39. </template>
  40. </el-table-column>
  41. </el-table>
  42. <!-- 对话框(添加 / 修改) -->
  43. <el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body>
  44. <el-form ref="form" :model="form" :rules="rules" label-width="140px">
  45. <el-form-item label="秒杀场次名称" prop="name">
  46. <el-input v-model="form.name" placeholder="请输入秒杀时段名称" clearable />
  47. </el-form-item>
  48. <el-form-item label="秒杀时间段" prop="startAndEndTime">
  49. <el-time-picker is-range v-model="form.startAndEndTime" range-separator="至" start-placeholder="开始时间"
  50. end-placeholder="结束时间" placeholder="选择时间范围" value-format="HH:mm:ss">
  51. </el-time-picker>
  52. </el-form-item>
  53. </el-form>
  54. <div slot="footer" class="dialog-footer">
  55. <el-button type="primary" @click="submitForm">确 定</el-button>
  56. <el-button @click="cancel">取 消</el-button>
  57. </div>
  58. </el-dialog>
  59. </div>
  60. </template>
  61. <script>
  62. import {
  63. createSeckillConfig,
  64. deleteSeckillConfig,
  65. getSeckillConfig,
  66. getSeckillConfigList,
  67. updateSeckillConfig
  68. } from "@/api/mall/promotion/SeckillConfig";
  69. import router from "@/router";
  70. import {deepClone} from "@/utils";
  71. export default {
  72. name: "PromotionSeckillConfig",
  73. components: {},
  74. data() {
  75. return {
  76. // 遮罩层
  77. loading: true,
  78. // 导出遮罩层
  79. exportLoading: false,
  80. // 显示搜索条件
  81. showSearch: true,
  82. // 总条数
  83. // total: 0,
  84. // 秒杀时段列表
  85. list: [],
  86. // 弹出层标题
  87. title: "",
  88. // 是否显示弹出层
  89. open: false,
  90. // 表单参数
  91. form: {},
  92. // 表单校验
  93. rules: {
  94. name: [{ required: true, message: "秒杀时段名称不能为空", trigger: "blur" }],
  95. startAndEndTime: [{ required: true, message: "秒杀时间段不能为空", trigger: "blur" }],
  96. }
  97. };
  98. },
  99. created() {
  100. this.getList();
  101. },
  102. methods: {
  103. /** 查询列表 */
  104. getList() {
  105. this.loading = true;
  106. // 执行查询
  107. getSeckillConfigList().then(response => {
  108. this.list = response.data;
  109. this.loading = false;
  110. });
  111. },
  112. /** 取消按钮 */
  113. cancel() {
  114. this.open = false;
  115. this.reset();
  116. },
  117. /** 表单重置 */
  118. reset() {
  119. this.form = {
  120. id: undefined,
  121. name: undefined,
  122. startAndEndTime: undefined,
  123. startTime: undefined,
  124. endTime: undefined,
  125. };
  126. this.resetForm("form");
  127. },
  128. /** 搜索按钮操作 */
  129. handleQuery() {
  130. this.getList();
  131. },
  132. /** 重置按钮操作 */
  133. resetQuery() {
  134. this.resetForm("queryForm");
  135. this.handleQuery();
  136. },
  137. /**查看当前秒杀时段的秒杀活动 */
  138. handleOpenSeckillActivity(row) {
  139. router.push({ name: 'SeckillActivity', params: { timeId: row.id } })
  140. },
  141. /** 新增按钮操作 */
  142. handleAdd() {
  143. this.reset();
  144. this.open = true;
  145. this.title = "添加秒杀时段";
  146. },
  147. /** 修改按钮操作 */
  148. handleUpdate(row) {
  149. this.reset();
  150. const id = row.id;
  151. getSeckillConfig(id).then(response => {
  152. response.data.startAndEndTime = [response.data.startTime, response.data.endTime]
  153. this.form = response.data;
  154. this.open = true;
  155. this.title = "修改秒杀时段";
  156. });
  157. },
  158. /** 提交按钮 */
  159. submitForm() {
  160. this.$refs["form"].validate(valid => {
  161. console.log(valid, "是否通过");
  162. if (!valid) {
  163. return;
  164. }
  165. // 处理数据
  166. const data = deepClone(this.form);
  167. data.startTime = this.form.startAndEndTime[0];
  168. data.endTime = this.form.startAndEndTime[1];
  169. // 修改的提交
  170. if (this.form.id != null) {
  171. updateSeckillConfig(data).then(response => {
  172. this.$modal.msgSuccess("修改成功");
  173. this.open = false;
  174. this.getList();
  175. });
  176. return;
  177. }
  178. // 添加的提交
  179. createSeckillConfig(data).then(response => {
  180. this.$modal.msgSuccess("新增成功");
  181. this.open = false;
  182. this.getList();
  183. });
  184. });
  185. },
  186. /** 删除按钮操作 */
  187. handleDelete(row) {
  188. const id = row.id;
  189. this.$modal.confirm('是否确认删除秒杀时段编号为"' + id + '"的数据项?').then(function () {
  190. return deleteSeckillConfig(id);
  191. }).then(() => {
  192. this.getList();
  193. this.$modal.msgSuccess("删除成功");
  194. }).catch(() => { });
  195. },
  196. }
  197. };
  198. </script>