SeckillActivityForm.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
  3. <Form
  4. ref="formRef"
  5. v-loading="formLoading"
  6. :isCol="true"
  7. :rules="rules"
  8. :schema="allSchemas.formSchema"
  9. >
  10. <!-- 先选择 -->
  11. <template #spuId>
  12. <el-button @click="spuSelectRef.open()">选择商品</el-button>
  13. <SpuAndSkuList
  14. ref="spuAndSkuListRef"
  15. :rule-config="ruleConfig"
  16. :spu-list="spuList"
  17. :spu-property-list-p="spuPropertyList"
  18. >
  19. <el-table-column align="center" label="秒杀库存" min-width="168">
  20. <template #default="{ row: sku }">
  21. <el-input-number v-model="sku.productConfig.stock" :min="0" class="w-100%" />
  22. </template>
  23. </el-table-column>
  24. <el-table-column align="center" label="秒杀价格(元)" min-width="168">
  25. <template #default="{ row: sku }">
  26. <el-input-number
  27. v-model="sku.productConfig.seckillPrice"
  28. :min="0"
  29. :precision="2"
  30. :step="0.1"
  31. class="w-100%"
  32. />
  33. </template>
  34. </el-table-column>
  35. </SpuAndSkuList>
  36. </template>
  37. </Form>
  38. <template #footer>
  39. <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
  40. <el-button @click="dialogVisible = false">取 消</el-button>
  41. </template>
  42. </Dialog>
  43. <SpuSelect ref="spuSelectRef" :isSelectSku="true" @confirm="selectSpu" />
  44. </template>
  45. <script lang="ts" setup>
  46. import { SpuAndSkuList, SpuProperty, SpuSelect } from '../../components'
  47. import { allSchemas, rules } from './seckillActivity.data'
  48. import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
  49. import { SeckillProductVO } from '@/api/mall/promotion/seckill/seckillActivity'
  50. import * as ProductSpuApi from '@/api/mall/product/spu'
  51. import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
  52. import { convertToInteger, formatToFraction } from '@/utils'
  53. defineOptions({ name: 'PromotionSeckillActivityForm' })
  54. const { t } = useI18n() // 国际化
  55. const message = useMessage() // 消息弹窗
  56. const dialogVisible = ref(false) // 弹窗的是否展示
  57. const dialogTitle = ref('') // 弹窗的标题
  58. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  59. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  60. const formRef = ref() // 表单 Ref
  61. // ================= 商品选择相关 =================
  62. const spuSelectRef = ref() // 商品和属性选择 Ref
  63. const spuAndSkuListRef = ref() // sku 秒杀配置组件Ref
  64. const ruleConfig: RuleConfig[] = [
  65. {
  66. name: 'productConfig.stock',
  67. rule: (arg) => arg > 1,
  68. message: '商品秒杀库存必须大于 1 !!!'
  69. },
  70. {
  71. name: 'productConfig.seckillPrice',
  72. rule: (arg) => arg > 0.01,
  73. message: '商品秒杀价格必须大于 0.01 !!!'
  74. }
  75. ]
  76. const spuList = ref<SeckillActivityApi.SpuExtension[]>([]) // 选择的 spu
  77. const spuPropertyList = ref<SpuProperty<SeckillActivityApi.SpuExtension>[]>([])
  78. const selectSpu = (spuId: number, skuIds: number[]) => {
  79. formRef.value.setValues({ spuId })
  80. getSpuDetails(spuId, skuIds)
  81. }
  82. /**
  83. * 获取 SPU 详情
  84. * @param spuIds
  85. */
  86. const getSpuDetails = async (
  87. spuId: number,
  88. skuIds: number[] | undefined,
  89. products?: SeckillProductVO[]
  90. ) => {
  91. const spuProperties: SpuProperty<SeckillActivityApi.SpuExtension>[] = []
  92. const res = (await ProductSpuApi.getSpuDetailList([spuId])) as SeckillActivityApi.SpuExtension[]
  93. if (res.length == 0) {
  94. return
  95. }
  96. spuList.value = []
  97. // 因为只能选择一个
  98. const spu = res[0]
  99. const selectSkus =
  100. typeof skuIds === 'undefined' ? spu?.skus : spu?.skus?.filter((sku) => skuIds.includes(sku.id!))
  101. selectSkus?.forEach((sku) => {
  102. let config: SeckillActivityApi.SeckillProductVO = {
  103. skuId: sku.id!,
  104. stock: 0,
  105. seckillPrice: 0
  106. }
  107. if (typeof products !== 'undefined') {
  108. const product = products.find((item) => item.skuId === sku.id)
  109. if (product) {
  110. // 元转分
  111. product.seckillPrice = formatToFraction(product.seckillPrice)
  112. }
  113. config = product || config
  114. }
  115. sku.productConfig = config
  116. })
  117. spu.skus = selectSkus as SeckillActivityApi.SkuExtension[]
  118. spuProperties.push({
  119. spuId: spu.id!,
  120. spuDetail: spu,
  121. propertyList: getPropertyList(spu)
  122. })
  123. spuList.value.push(spu)
  124. spuPropertyList.value = spuProperties
  125. }
  126. // ================= end =================
  127. /** 打开弹窗 */
  128. const open = async (type: string, id?: number) => {
  129. dialogVisible.value = true
  130. dialogTitle.value = t('action.' + type)
  131. formType.value = type
  132. await resetForm()
  133. // 修改时,设置数据
  134. if (id) {
  135. formLoading.value = true
  136. try {
  137. const data = (await SeckillActivityApi.getSeckillActivity(
  138. id
  139. )) as SeckillActivityApi.SeckillActivityVO
  140. await getSpuDetails(
  141. data.spuId!,
  142. data.products?.map((sku) => sku.skuId),
  143. data.products
  144. )
  145. formRef.value.setValues(data)
  146. } finally {
  147. formLoading.value = false
  148. }
  149. }
  150. }
  151. defineExpose({ open }) // 提供 open 方法,用于打开弹窗
  152. /** 重置表单 */
  153. const resetForm = async () => {
  154. spuList.value = []
  155. spuPropertyList.value = []
  156. await nextTick()
  157. formRef.value.getElFormRef().resetFields()
  158. }
  159. /** 提交表单 */
  160. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  161. const submitForm = async () => {
  162. // 校验表单
  163. if (!formRef) return
  164. const valid = await formRef.value.getElFormRef().validate()
  165. if (!valid) return
  166. // 提交请求
  167. formLoading.value = true
  168. try {
  169. const data = formRef.value.formModel as SeckillActivityApi.SeckillActivityVO
  170. const products = spuAndSkuListRef.value.getSkuConfigs('productConfig')
  171. products.forEach((item: SeckillProductVO) => {
  172. // 秒杀价格元转分
  173. item.seckillPrice = convertToInteger(item.seckillPrice)
  174. })
  175. // 获取秒杀商品配置
  176. data.products = products
  177. if (formType.value === 'create') {
  178. await SeckillActivityApi.createSeckillActivity(data)
  179. message.success(t('common.createSuccess'))
  180. } else {
  181. await SeckillActivityApi.updateSeckillActivity(data)
  182. message.success(t('common.updateSuccess'))
  183. }
  184. dialogVisible.value = false
  185. // 发送操作成功的事件
  186. emit('success')
  187. } finally {
  188. formLoading.value = false
  189. }
  190. }
  191. </script>
  192. <style lang="scss" scoped>
  193. .demo-table-expand {
  194. padding-left: 42px;
  195. :deep(.el-form-item__label) {
  196. width: 82px;
  197. font-weight: bold;
  198. color: #99a9bf;
  199. }
  200. }
  201. </style>