index.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <ContentWrap>
  3. <!-- 搜索工作栏 -->
  4. <el-form
  5. class="-mb-15px"
  6. :model="queryParams"
  7. ref="queryFormRef"
  8. :inline="true"
  9. label-width="68px"
  10. >
  11. <el-form-item label="活动名称" prop="name">
  12. <el-input
  13. v-model="queryParams.name"
  14. placeholder="请输入活动名称"
  15. clearable
  16. @keyup.enter="handleQuery"
  17. class="!w-240px"
  18. />
  19. </el-form-item>
  20. <el-form-item label="活动状态" prop="status">
  21. <el-select
  22. v-model="queryParams.status"
  23. placeholder="请选择活动状态"
  24. clearable
  25. class="!w-240px"
  26. >
  27. <el-option
  28. v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
  29. :key="dict.value"
  30. :label="dict.label"
  31. :value="dict.value"
  32. />
  33. </el-select>
  34. </el-form-item>
  35. <el-form-item>
  36. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  37. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  38. <el-button
  39. type="primary"
  40. plain
  41. @click="openForm('create')"
  42. v-hasPermi="['promotion:combination-activity:create']"
  43. >
  44. <Icon icon="ep:plus" class="mr-5px" /> 新增
  45. </el-button>
  46. </el-form-item>
  47. </el-form>
  48. </ContentWrap>
  49. <!-- 列表 -->
  50. <ContentWrap>
  51. <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
  52. <el-table-column label="活动编号" prop="id" min-width="80" />
  53. <el-table-column label="活动名称" prop="name" min-width="140" />
  54. <el-table-column label="活动时间" min-width="210">
  55. <template #default="scope">
  56. {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
  57. ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="商品图片" prop="spuName" min-width="80">
  61. <template #default="scope">
  62. <el-image
  63. :src="scope.row.picUrl"
  64. class="h-40px w-40px"
  65. :preview-src-list="[scope.row.picUrl]"
  66. preview-teleported
  67. />
  68. </template>
  69. </el-table-column>
  70. <el-table-column label="商品标题" prop="spuName" min-width="300" />
  71. <el-table-column
  72. label="原价"
  73. prop="marketPrice"
  74. min-width="100"
  75. :formatter="fenToYuanFormat"
  76. />
  77. <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
  78. <template #default="scope">
  79. {{ formatCombinationPrice(scope.row.products) }}
  80. </template>
  81. </el-table-column>
  82. <el-table-column label="开团组数" prop="groupCount" min-width="100" />
  83. <el-table-column label="成团组数" prop="groupSuccessCount" min-width="100" />
  84. <el-table-column label="购买次数" prop="recordCount" min-width="100" />
  85. <el-table-column label="活动状态" align="center" prop="status" min-width="100">
  86. <template #default="scope">
  87. <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
  88. </template>
  89. </el-table-column>
  90. <el-table-column
  91. label="创建时间"
  92. align="center"
  93. prop="createTime"
  94. :formatter="dateFormatter"
  95. width="180px"
  96. />
  97. <el-table-column label="操作" align="center" width="150px" fixed="right">
  98. <template #default="scope">
  99. <el-button
  100. link
  101. type="primary"
  102. @click="openForm('update', scope.row.id)"
  103. v-hasPermi="['promotion:combination-activity:update']"
  104. >
  105. 编辑
  106. </el-button>
  107. <el-button
  108. link
  109. type="danger"
  110. @click="handleClose(scope.row.id)"
  111. v-if="scope.row.status === 0"
  112. v-hasPermi="['promotion:combination-activity:close']"
  113. >
  114. 关闭
  115. </el-button>
  116. <el-button
  117. link
  118. type="danger"
  119. @click="handleDelete(scope.row.id)"
  120. v-else
  121. v-hasPermi="['promotion:combination-activity:delete']"
  122. >
  123. 删除
  124. </el-button>
  125. </template>
  126. </el-table-column>
  127. </el-table>
  128. <!-- 分页 -->
  129. <Pagination
  130. :total="total"
  131. v-model:page="queryParams.pageNo"
  132. v-model:limit="queryParams.pageSize"
  133. @pagination="getList"
  134. />
  135. </ContentWrap>
  136. <!-- 表单弹窗:添加/修改 -->
  137. <CombinationActivityForm ref="formRef" @success="getList" />
  138. </template>
  139. <script setup lang="ts">
  140. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  141. import { dateFormatter } from '@/utils/formatTime'
  142. import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
  143. import CombinationActivityForm from './CombinationActivityForm.vue'
  144. import { formatDate } from '@/utils/formatTime'
  145. import { fenToYuanFormat } from '@/utils/formatter'
  146. import { fenToYuan } from '@/utils'
  147. defineOptions({ name: 'PromotionBargainActivity' })
  148. const message = useMessage() // 消息弹窗
  149. const { t } = useI18n() // 国际化
  150. const loading = ref(true) // 列表的加载中
  151. const total = ref(0) // 列表的总页数
  152. const list = ref([]) // 列表的数据
  153. const queryParams = reactive({
  154. pageNo: 1,
  155. pageSize: 10,
  156. name: null,
  157. status: null
  158. })
  159. const queryFormRef = ref() // 搜索的表单
  160. const exportLoading = ref(false) // 导出的加载中
  161. /** 查询列表 */
  162. const getList = async () => {
  163. loading.value = true
  164. try {
  165. const data = await CombinationActivityApi.getCombinationActivityPage(queryParams)
  166. list.value = data.list
  167. total.value = data.total
  168. } finally {
  169. loading.value = false
  170. }
  171. }
  172. /** 搜索按钮操作 */
  173. const handleQuery = () => {
  174. queryParams.pageNo = 1
  175. getList()
  176. }
  177. /** 重置按钮操作 */
  178. const resetQuery = () => {
  179. queryFormRef.value.resetFields()
  180. handleQuery()
  181. }
  182. /** 添加/修改操作 */
  183. const formRef = ref()
  184. const openForm = (type: string, id?: number) => {
  185. formRef.value.open(type, id)
  186. }
  187. // TODO 非繁人:这里要改下
  188. /** 关闭按钮操作 */
  189. const handleClose = async (id: number) => {
  190. try {
  191. // 关闭的二次确认
  192. await message.confirm('确认关闭该秒杀活动吗?')
  193. // 发起关闭
  194. await CombinationActivityApi.closeCombinationActivity(id)
  195. message.success('关闭成功')
  196. // 刷新列表
  197. await getList()
  198. } catch {}
  199. }
  200. /** 删除按钮操作 */
  201. const handleDelete = async (id: number) => {
  202. try {
  203. // 删除的二次确认
  204. await message.delConfirm()
  205. // 发起删除
  206. await CombinationActivityApi.deleteCombinationActivity(id)
  207. message.success(t('common.delSuccess'))
  208. // 刷新列表
  209. await getList()
  210. } catch {}
  211. }
  212. const formatCombinationPrice = (products) => {
  213. const combinationPrice = Math.min(...products.map((item) => item.combinationPrice))
  214. return `¥${fenToYuan(combinationPrice)}`
  215. }
  216. /** 初始化 **/
  217. onMounted(async () => {
  218. await getList()
  219. })
  220. </script>