index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <!-- 搜索工作栏 -->
  3. <ContentWrap>
  4. <Search :schema="allSchemas.searchSchema" @reset="setSearchParams" @search="setSearchParams">
  5. <!-- 新增等操作按钮 -->
  6. <template #actionMore>
  7. <el-button
  8. v-hasPermi="['promotion:seckill-config:create']"
  9. plain
  10. type="primary"
  11. @click="openForm('create')"
  12. >
  13. <Icon class="mr-5px" icon="ep:plus" />
  14. 新增
  15. </el-button>
  16. </template>
  17. </Search>
  18. </ContentWrap>
  19. <!-- 列表 -->
  20. <ContentWrap>
  21. <Table
  22. v-model:currentPage="tableObject.currentPage"
  23. v-model:pageSize="tableObject.pageSize"
  24. :columns="allSchemas.tableColumns"
  25. :data="tableObject.tableList"
  26. :loading="tableObject.loading"
  27. :pagination="{
  28. total: tableObject.total
  29. }"
  30. >
  31. <template #picUrl="{ row }">
  32. <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
  33. </template>
  34. <template #status="{ row }">
  35. <el-switch
  36. v-model="row.status"
  37. :active-value="0"
  38. :inactive-value="1"
  39. @change="handleStatusChange(row)"
  40. />
  41. </template>
  42. <template #action="{ row }">
  43. <el-button
  44. v-hasPermi="['promotion:seckill-config:update']"
  45. link
  46. type="primary"
  47. @click="openForm('update', row.id)"
  48. >
  49. 编辑
  50. </el-button>
  51. <el-button
  52. v-hasPermi="['promotion:seckill-config:delete']"
  53. link
  54. type="danger"
  55. @click="handleDelete(row.id)"
  56. >
  57. 删除
  58. </el-button>
  59. </template>
  60. </Table>
  61. </ContentWrap>
  62. <!-- 表单弹窗:添加/修改 -->
  63. <SeckillConfigForm ref="formRef" @success="getList" />
  64. </template>
  65. <script lang="ts" name="PromotionSeckillConfig" setup>
  66. import { allSchemas } from './seckillConfig.data'
  67. import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
  68. import SeckillConfigForm from './SeckillConfigForm.vue'
  69. import { createImageViewer } from '@/components/ImageViewer'
  70. import { CommonStatusEnum } from '@/utils/constants'
  71. const message = useMessage() // 消息弹窗
  72. // tableObject:表格的属性对象,可获得分页大小、条数等属性
  73. // tableMethods:表格的操作对象,可进行获得分页、删除记录等操作
  74. // 详细可见:https://doc.iocoder.cn/vue3/crud-schema/
  75. const { tableObject, tableMethods } = useTable({
  76. getListApi: SeckillConfigApi.getSeckillConfigPage, // 分页接口
  77. delListApi: SeckillConfigApi.deleteSeckillConfig // 删除接口
  78. })
  79. // 获得表格的各种操作
  80. const { getList, setSearchParams } = tableMethods
  81. /** 商品图预览 */
  82. const imagePreview = (imgUrl: string) => {
  83. createImageViewer({
  84. urlList: [imgUrl]
  85. })
  86. }
  87. /** 添加/修改操作 */
  88. const formRef = ref()
  89. const openForm = (type: string, id?: number) => {
  90. formRef.value.open(type, id)
  91. }
  92. /** 删除按钮操作 */
  93. const handleDelete = (id: number) => {
  94. tableMethods.delList(id, false)
  95. }
  96. /** 修改用户状态 */
  97. const handleStatusChange = async (row: SeckillConfigApi.SeckillConfigVO) => {
  98. try {
  99. // 修改状态的二次确认
  100. const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
  101. await message.confirm('确认要"' + text + '""' + row.name + '?')
  102. // 发起修改状态
  103. await SeckillConfigApi.updateSeckillConfigStatus(row.id, row.status)
  104. // 刷新列表
  105. await getList()
  106. } catch {
  107. // 取消后,进行恢复按钮
  108. row.status =
  109. row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
  110. }
  111. }
  112. /** 初始化 **/
  113. onMounted(() => {
  114. getList()
  115. })
  116. </script>