123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <template>
- <!-- 搜索工作栏 -->
- <ContentWrap>
- <Search :schema="allSchemas.searchSchema" @reset="setSearchParams" @search="setSearchParams">
- <!-- 新增等操作按钮 -->
- <template #actionMore>
- <el-button
- v-hasPermi="['promotion:seckill-config:create']"
- plain
- type="primary"
- @click="openForm('create')"
- >
- <Icon class="mr-5px" icon="ep:plus" />
- 新增
- </el-button>
- </template>
- </Search>
- </ContentWrap>
- <!-- 列表 -->
- <ContentWrap>
- <Table
- v-model:currentPage="tableObject.currentPage"
- v-model:pageSize="tableObject.pageSize"
- :columns="allSchemas.tableColumns"
- :data="tableObject.tableList"
- :loading="tableObject.loading"
- :pagination="{
- total: tableObject.total
- }"
- >
- <template #picUrl="{ row }">
- <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
- </template>
- <template #status="{ row }">
- <el-switch
- v-model="row.status"
- :active-value="0"
- :inactive-value="1"
- @change="handleStatusChange(row)"
- />
- </template>
- <template #action="{ row }">
- <el-button
- v-hasPermi="['promotion:seckill-config:update']"
- link
- type="primary"
- @click="openForm('update', row.id)"
- >
- 编辑
- </el-button>
- <el-button
- v-hasPermi="['promotion:seckill-config:delete']"
- link
- type="danger"
- @click="handleDelete(row.id)"
- >
- 删除
- </el-button>
- </template>
- </Table>
- </ContentWrap>
- <!-- 表单弹窗:添加/修改 -->
- <SeckillConfigForm ref="formRef" @success="getList" />
- </template>
- <script lang="ts" name="PromotionSeckillConfig" setup>
- import { allSchemas } from './seckillConfig.data'
- import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
- import SeckillConfigForm from './SeckillConfigForm.vue'
- import { createImageViewer } from '@/components/ImageViewer'
- import { CommonStatusEnum } from '@/utils/constants'
- const message = useMessage() // 消息弹窗
- // tableObject:表格的属性对象,可获得分页大小、条数等属性
- // tableMethods:表格的操作对象,可进行获得分页、删除记录等操作
- // 详细可见:https://doc.iocoder.cn/vue3/crud-schema/
- const { tableObject, tableMethods } = useTable({
- getListApi: SeckillConfigApi.getSeckillConfigPage, // 分页接口
- delListApi: SeckillConfigApi.deleteSeckillConfig // 删除接口
- })
- // 获得表格的各种操作
- const { getList, setSearchParams } = tableMethods
- /** 商品图预览 */
- const imagePreview = (imgUrl: string) => {
- createImageViewer({
- urlList: [imgUrl]
- })
- }
- /** 添加/修改操作 */
- const formRef = ref()
- const openForm = (type: string, id?: number) => {
- formRef.value.open(type, id)
- }
- /** 删除按钮操作 */
- const handleDelete = (id: number) => {
- tableMethods.delList(id, false)
- }
- /** 修改用户状态 */
- const handleStatusChange = async (row: SeckillConfigApi.SeckillConfigVO) => {
- try {
- // 修改状态的二次确认
- const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
- await message.confirm('确认要"' + text + '""' + row.name + '?')
- // 发起修改状态
- await SeckillConfigApi.updateSeckillConfigStatus(row.id, row.status)
- // 刷新列表
- await getList()
- } catch {
- // 取消后,进行恢复按钮
- row.status =
- row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
- }
- }
- /** 初始化 **/
- onMounted(() => {
- getList()
- })
- </script>
|