Skip to content

Commit 20a9780

Browse files
YunaiVYunaiV
committed
【修复】商城：秒杀时段点击编辑报错
1 parent f75e8d1 commit 20a9780

File tree

4 files changed

+280
-231
lines changed

4 files changed

+280
-231
lines changed

‎src/api/mall/promotion/seckill/seckillConfig.ts

Lines changed: 43 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,48 @@
11
import request from '@/config/axios'
22

3+
// 秒杀时段 VO
34
export interface SeckillConfigVO {
4-
id: number
5-
name: string
6-
startTime: string
7-
endTime: string
8-
sliderPicUrls: string[]
9-
status: number
10-
}
11-
12-
// 查询秒杀时段配置列表
13-
export const getSeckillConfigPage = async (params) => {
14-
return await request.get({ url: '/promotion/seckill-config/page', params })
15-
}
16-
17-
// 查询秒杀时段配置详情
18-
export const getSeckillConfig = async (id: number) => {
19-
return await request.get({ url: '/promotion/seckill-config/get?id=' + id })
20-
}
21-
22-
// 获得所有开启状态的秒杀时段精简列表
23-
export const getSimpleSeckillConfigList = async () => {
24-
return await request.get({ url: '/promotion/seckill-config/list-all-simple' })
25-
}
26-
27-
// 新增秒杀时段配置
28-
export const createSeckillConfig = async (data: SeckillConfigVO) => {
29-
return await request.post({ url: '/promotion/seckill-config/create', data })
30-
}
31-
32-
// 修改秒杀时段配置
33-
export const updateSeckillConfig = async (data: SeckillConfigVO) => {
34-
return await request.put({ url: '/promotion/seckill-config/update', data })
35-
}
36-
37-
// 修改时段配置状态
38-
export const updateSeckillConfigStatus = (id: number, status: number) => {
39-
const data = {
40-
id,
41-
status
5+
id: number // 编号
6+
name: string // 秒杀时段名称
7+
startTime: string // 开始时间点
8+
endTime: string // 结束时间点
9+
sliderPicUrls: string[] // 秒杀轮播图
10+
status: number // 活动状态
11+
}
12+
13+
// 秒杀时段 API
14+
export const SeckillConfigApi = {
15+
// 查询秒杀时段分页
16+
getSeckillConfigPage: async (params: any) => {
17+
return await request.get({ url: `/promotion/seckill-config/page`, params })
18+
},
19+
20+
// 查询秒杀时段详情
21+
getSeckillConfig: async (id: number) => {
22+
return await request.get({ url: `/promotion/seckill-config/get?id=` + id })
23+
},
24+
25+
// 新增秒杀时段
26+
createSeckillConfig: async (data: SeckillConfigVO) => {
27+
return await request.post({ url: `/promotion/seckill-config/create`, data })
28+
},
29+
30+
// 修改秒杀时段
31+
updateSeckillConfig: async (data: SeckillConfigVO) => {
32+
return await request.put({ url: `/promotion/seckill-config/update`, data })
33+
},
34+
35+
// 删除秒杀时段
36+
deleteSeckillConfig: async (id: number) => {
37+
return await request.delete({ url: `/promotion/seckill-config/delete?id=` + id })
38+
},
39+
40+
// 修改时段配置状态
41+
updateSeckillConfigStatus: async (id: number, status: number) => {
42+
const data = {
43+
id,
44+
status
45+
}
46+
return request.put({ url: '/promotion/seckill-config/update-status', data: data })
4247
}
43-
return request.put({ url: '/promotion/seckill-config/update-status', data: data })
44-
}
45-
46-
// 删除秒杀时段配置
47-
export const deleteSeckillConfig = async (id: number) => {
48-
return await request.delete({ url: '/promotion/seckill-config/delete?id=' + id })
4948
}

‎src/views/mall/promotion/seckill/config/SeckillConfigForm.vue

Lines changed: 79 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,57 @@
11
<template>
2-
<Dialog v-model="dialogVisible" :title="dialogTitle">
3-
<Form ref="formRef" v-loading="formLoading" :rules="rules" :schema="allSchemas.formSchema" />
2+
<Dialog :title="dialogTitle" v-model="dialogVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="120px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="秒杀时段名称" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入秒杀时段名称" />
12+
</el-form-item>
13+
<el-form-item label="开始时间点" prop="startTime">
14+
<el-time-picker
15+
v-model="formData.startTime"
16+
value-format="HH:mm:ss"
17+
placeholder="选择开始时间点"
18+
/>
19+
</el-form-item>
20+
<el-form-item label="结束时间点" prop="endTime">
21+
<el-time-picker
22+
v-model="formData.endTime"
23+
value-format="HH:mm:ss"
24+
placeholder="选择结束时间点"
25+
/>
26+
</el-form-item>
27+
<el-form-item label="秒杀轮播图" prop="sliderPicUrls">
28+
<UploadImgs v-model="formData.sliderPicUrls" placeholder="请输入秒杀轮播图" />
29+
</el-form-item>
30+
<el-form-item label="活动状态" prop="status">
31+
<el-radio-group v-model="formData.status">
32+
<el-radio
33+
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
34+
:key="dict.value"
35+
:label="dict.value"
36+
>
37+
{{ dict.label }}
38+
</el-radio>
39+
</el-radio-group>
40+
</el-form-item>
41+
</el-form>
442
<template #footer>
5-
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
43+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
644
<el-button @click="dialogVisible = false">取 消</el-button>
745
</template>
846
</Dialog>
947
</template>
10-
<script lang="ts" name="SeckillConfigForm" setup>
11-
import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
12-
import { allSchemas, rules } from './seckillConfig.data'
48+
<script setup lang="ts">
49+
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
50+
import { SeckillConfigApi, SeckillConfigVO } from '@/api/mall/promotion/seckill/seckillConfig.ts'
51+
import { CommonStatusEnum } from '@/utils/constants'
52+
53+
/** 秒杀时段 表单 */
54+
defineOptions({ name: 'SeckillConfigForm' })
1355
1456
const { t } = useI18n() // 国际化
1557
const message = useMessage() // 消息弹窗
@@ -18,22 +60,33 @@ const dialogVisible = ref(false) // 弹窗的是否展示
1860
const dialogTitle = ref('') // 弹窗的标题
1961
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
2062
const formType = ref('') // 表单的类型：create - 新增；update - 修改
63+
const formData = ref({
64+
id: undefined,
65+
name: undefined,
66+
startTime: undefined,
67+
endTime: undefined,
68+
sliderPicUrls: undefined,
69+
status: undefined
70+
})
71+
const formRules = reactive({
72+
name: [{ required: true, message: '秒杀时段名称不能为空', trigger: 'blur' }],
73+
startTime: [{ required: true, message: '开始时间点不能为空', trigger: 'blur' }],
74+
endTime: [{ required: true, message: '结束时间点不能为空', trigger: 'blur' }],
75+
status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }]
76+
})
2177
const formRef = ref() // 表单 Ref
2278
2379
/** 打开弹窗 */
2480
const open = async (type: string, id?: number) => {
2581
dialogVisible.value = true
2682
dialogTitle.value = t('action.' + type)
2783
formType.value = type
84+
resetForm()
2885
// 修改时，设置数据
2986
if (id) {
3087
formLoading.value = true
3188
try {
32-
const data = await SeckillConfigApi.getSeckillConfig(id)
33-
data.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
34-
url: item
35-
}))
36-
formRef.value.setValues(data)
89+
formData.value = await SeckillConfigApi.getSeckillConfig(id)
3790
} finally {
3891
formLoading.value = false
3992
}
@@ -45,24 +98,11 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
4598
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
4699
const submitForm = async () => {
47100
// 校验表单
48-
if (!formRef) return
49-
const valid = await formRef.value.getElFormRef().validate()
50-
if (!valid) return
101+
await formRef.value.validate()
51102
// 提交请求
52103
formLoading.value = true
53104
try {
54-
// 处理轮播图列表
55-
const sliderPicUrls = []
56-
formRef.value.formModel.sliderPicUrls.forEach((item) => {
57-
// 如果是前端选的图
58-
typeof item === 'object' ? sliderPicUrls.push(item.url) : sliderPicUrls.push(item)
59-
})
60-
61-
// 真正提交
62-
const data = {
63-
...formRef.value.formModel,
64-
sliderPicUrls
65-
} as SeckillConfigApi.SeckillConfigVO
105+
const data = formData.value as unknown as SeckillConfigVO
66106
if (formType.value === 'create') {
67107
await SeckillConfigApi.createSeckillConfig(data)
68108
message.success(t('common.createSuccess'))
@@ -77,4 +117,17 @@ const submitForm = async () => {
77117
formLoading.value = false
78118
}
79119
}
120+
121+
/** 重置表单 */
122+
const resetForm = () => {
123+
formData.value = {
124+
id: undefined,
125+
name: undefined,
126+
startTime: undefined,
127+
endTime: undefined,
128+
sliderPicUrls: [],
129+
status: CommonStatusEnum.ENABLE
130+
}
131+
formRef.value?.resetFields()
132+
}
80133
</script>

0 commit comments

Comments
 (0)