Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
phsl
/
admin
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
4870231b
authored
Sep 05, 2024
by
卢越
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
【代码优化】代码格式化
parent
40fe63a3
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
145 additions
and
114 deletions
+145
-114
src/api/mall/promotion/combination/combinationActivity.ts
+8
-8
src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
+9
-9
src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
+33
-30
src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
+28
-28
src/components/DiyEditor/index.vue
+5
-1
src/views/mall/promotion/combination/components/CombinationShowcase.vue
+24
-13
src/views/mall/promotion/combination/components/CombinationTableSelect.vue
+38
-25
No files found.
src/api/mall/promotion/combination/combinationActivity.ts
View file @
4870231b
import
request
from
'@/config/axios'
import
{
Sku
,
Spu
}
from
'@/api/mall/product/spu'
import
{
Sku
,
Spu
}
from
'@/api/mall/product/spu'
export
interface
CombinationActivityVO
{
id
?:
number
...
...
@@ -40,35 +40,35 @@ export interface SpuExtension extends Spu {
// 查询拼团活动列表
export
const
getCombinationActivityPage
=
async
(
params
)
=>
{
return
await
request
.
get
({
url
:
'/promotion/combination-activity/page'
,
params
})
return
await
request
.
get
({
url
:
'/promotion/combination-activity/page'
,
params
})
}
// 查询拼团活动详情
export
const
getCombinationActivity
=
async
(
id
:
number
)
=>
{
return
await
request
.
get
({
url
:
'/promotion/combination-activity/get?id='
+
id
})
return
await
request
.
get
({
url
:
'/promotion/combination-activity/get?id='
+
id
})
}
// 查询拼团活动详情列表
export
const
getCombinationActivityDetailList
=
(
ids
:
number
[])
=>
{
return
request
.
get
({
url
:
`/promotion/combination-activity/detail-list?ids=
${
ids
}
`
})
return
request
.
get
({
url
:
`/promotion/combination-activity/detail-list?ids=
${
ids
}
`
})
}
// 新增拼团活动
export
const
createCombinationActivity
=
async
(
data
:
CombinationActivityVO
)
=>
{
return
await
request
.
post
({
url
:
'/promotion/combination-activity/create'
,
data
})
return
await
request
.
post
({
url
:
'/promotion/combination-activity/create'
,
data
})
}
// 修改拼团活动
export
const
updateCombinationActivity
=
async
(
data
:
CombinationActivityVO
)
=>
{
return
await
request
.
put
({
url
:
'/promotion/combination-activity/update'
,
data
})
return
await
request
.
put
({
url
:
'/promotion/combination-activity/update'
,
data
})
}
// 关闭拼团活动
export
const
closeCombinationActivity
=
async
(
id
:
number
)
=>
{
return
await
request
.
put
({
url
:
'/promotion/combination-activity/close?id='
+
id
})
return
await
request
.
put
({
url
:
'/promotion/combination-activity/close?id='
+
id
})
}
// 删除拼团活动
export
const
deleteCombinationActivity
=
async
(
id
:
number
)
=>
{
return
await
request
.
delete
({
url
:
'/promotion/combination-activity/delete?id='
+
id
})
return
await
request
.
delete
({
url
:
'/promotion/combination-activity/delete?id='
+
id
})
}
src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
View file @
4870231b
import
{
ComponentStyle
,
DiyComponent
}
from
'@/components/DiyEditor/util'
import
{
ComponentStyle
,
DiyComponent
}
from
'@/components/DiyEditor/util'
/** 拼团属性 */
export
interface
PromotionCombinationProperty
{
// 布局类型:单列 | 三列
layoutType
:
'oneColBigImg'
|
'oneColSmallImg'
|
'twoCol'
;
layoutType
:
'oneColBigImg'
|
'oneColSmallImg'
|
'twoCol'
// 商品字段
fields
:
{
// 商品名称
...
...
@@ -67,14 +67,14 @@ export const component = {
property
:
{
layoutType
:
'oneColBigImg'
,
fields
:
{
name
:
{
show
:
true
,
color
:
'#000'
},
introduction
:
{
show
:
true
,
color
:
'#999'
},
price
:
{
show
:
true
,
color
:
'#ff3000'
},
marketPrice
:
{
show
:
true
,
color
:
'#c4c4c4'
},
salesCount
:
{
show
:
true
,
color
:
'#c4c4c4'
},
stock
:
{
show
:
false
,
color
:
'#c4c4c4'
}
name
:
{
show
:
true
,
color
:
'#000'
},
introduction
:
{
show
:
true
,
color
:
'#999'
},
price
:
{
show
:
true
,
color
:
'#ff3000'
},
marketPrice
:
{
show
:
true
,
color
:
'#c4c4c4'
},
salesCount
:
{
show
:
true
,
color
:
'#c4c4c4'
},
stock
:
{
show
:
false
,
color
:
'#c4c4c4'
}
},
badge
:
{
show
:
false
,
imgUrl
:
''
},
badge
:
{
show
:
false
,
imgUrl
:
''
},
btnBuy
:
{
type
:
'text'
,
text
:
'去拼团'
,
...
...
src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
View file @
4870231b
...
...
@@ -15,7 +15,7 @@
>
<!-- 角标 -->
<div
v-if=
"property.badge.show"
class=
"absolute left-0 top-0 z-1 items-center justify-center"
>
<el-image
fit=
"cover"
:src=
"property.badge.imgUrl"
class=
"h-26px w-38px"
/>
<el-image
fit=
"cover"
:src=
"property.badge.imgUrl"
class=
"h-26px w-38px"
/>
</div>
<!-- 商品封面图 -->
<div
...
...
@@ -27,7 +27,7 @@
}
]"
>
<el-image
fit=
"cover"
class=
"h-full w-full"
:src=
"spu.picUrl"
/>
<el-image
fit=
"cover"
class=
"h-full w-full"
:src=
"spu.picUrl"
/>
</div>
<div
:class=
"[
...
...
@@ -115,67 +115,70 @@
</div>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
PromotionCombinationProperty
}
from
'./config'
import
{
PromotionCombinationProperty
}
from
'./config'
import
*
as
ProductSpuApi
from
'@/api/mall/product/spu'
import
*
as
CombinationActivityApi
from
'@/api/mall/promotion/combination/combinationActivity'
import
{
fenToYuan
}
from
"@/utils"
;
import
{
fenToYuan
}
from
'@/utils'
/** 拼团卡片 */
defineOptions
({
name
:
'PromotionCombination'
})
defineOptions
({
name
:
'PromotionCombination'
})
// 定义属性
const
props
=
defineProps
<
{
property
:
PromotionCombinationProperty
}
>
()
;
const
props
=
defineProps
<
{
property
:
PromotionCombinationProperty
}
>
()
// 商品列表
const
spuList
=
ref
<
ProductSpuApi
.
Spu
[]
>
([])
;
const
spuIdList
=
ref
<
number
[]
>
([])
;
const
combinationActivityList
=
ref
<
CombinationActivityApi
.
CombinationActivityVO
[]
>
([])
;
const
spuList
=
ref
<
ProductSpuApi
.
Spu
[]
>
([])
const
spuIdList
=
ref
<
number
[]
>
([])
const
combinationActivityList
=
ref
<
CombinationActivityApi
.
CombinationActivityVO
[]
>
([])
watch
(
()
=>
props
.
property
.
activityIds
,
async
()
=>
{
try
{
// 新添加的拼团组件,是没有活动ID的
const
activityIds
=
props
.
property
.
activityIds
;
const
activityIds
=
props
.
property
.
activityIds
// 检查活动ID的有效性
if
(
Array
.
isArray
(
activityIds
)
&&
activityIds
.
length
>
0
&&
activityIds
.
every
(
item
=>
item
!=
null
))
{
if
(
Array
.
isArray
(
activityIds
)
&&
activityIds
.
length
>
0
&&
activityIds
.
every
((
item
)
=>
item
!=
null
)
)
{
// 获取拼团活动详情列表
combinationActivityList
.
value
=
await
CombinationActivityApi
.
getCombinationActivityDetailList
(
activityIds
);
combinationActivityList
.
value
=
await
CombinationActivityApi
.
getCombinationActivityDetailList
(
activityIds
)
// 清空之前的数据,防止有重复
spuIdList
.
value
=
[];
spuList
.
value
=
[];
spuIdList
.
value
=
[]
spuList
.
value
=
[]
// 生成有效的 spuId 列表
spuIdList
.
value
=
combinationActivityList
.
value
.
map
(
activity
=>
activity
.
spuId
)
.
filter
((
spuId
):
spuId
is
number
=>
typeof
spuId
===
'number'
);
.
map
((
activity
)
=>
activity
.
spuId
)
.
filter
((
spuId
):
spuId
is
number
=>
typeof
spuId
===
'number'
)
// 如果存在有效的 spuId,调用 API 获取详细信息
if
(
spuIdList
.
value
.
length
>
0
)
{
spuList
.
value
=
await
ProductSpuApi
.
getSpuDetailList
(
spuIdList
.
value
);
spuList
.
value
=
await
ProductSpuApi
.
getSpuDetailList
(
spuIdList
.
value
)
}
else
{
console
.
warn
(
'没有用于获取详细信息的有效 spuId。'
);
console
.
warn
(
'没有用于获取详细信息的有效 spuId。'
)
}
// 更新 SPU 的最低价格
combinationActivityList
.
value
.
forEach
(
activity
=>
{
activity
.
products
.
forEach
(
product
=>
{
const
spu
=
spuList
.
value
.
find
(
spu
=>
spu
.
id
===
product
.
spuId
);
combinationActivityList
.
value
.
forEach
((
activity
)
=>
{
activity
.
products
.
forEach
((
product
)
=>
{
const
spu
=
spuList
.
value
.
find
((
spu
)
=>
spu
.
id
===
product
.
spuId
)
if
(
spu
)
{
spu
.
price
=
Math
.
min
(
product
.
combinationPrice
||
Infinity
,
spu
.
price
||
Infinity
);
spu
.
price
=
Math
.
min
(
product
.
combinationPrice
||
Infinity
,
spu
.
price
||
Infinity
)
}
});
});
})
})
}
}
catch
(
error
)
{
console
.
error
(
'获取拼团活动细节或 SPU 细节时出错:'
,
error
);
console
.
error
(
'获取拼团活动细节或 SPU 细节时出错:'
,
error
)
}
},
{
immediate
:
true
,
deep
:
true
}
);
)
/**
* 计算商品的间距
...
...
@@ -189,7 +192,7 @@ const calculateSpace = (index: number) => {
// 第一行没有上边距
const
marginTop
=
index
<
columns
?
'0'
:
props
.
property
.
space
+
'px'
return
{
marginLeft
,
marginTop
}
return
{
marginLeft
,
marginTop
}
}
// 容器
...
...
@@ -201,7 +204,7 @@ const calculateWidth = () => {
if
(
props
.
property
.
layoutType
===
'twoCol'
)
{
width
=
`
${(
containerRef
.
value
.
offsetWidth
-
props
.
property
.
space
)
/
2
}
px`
}
return
{
width
}
return
{
width
}
}
</
script
>
...
...
src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
View file @
4870231b
...
...
@@ -2,24 +2,24 @@
<ComponentContainerProperty
v-model=
"formData.style"
>
<el-form
label-width=
"80px"
:model=
"formData"
>
<el-card
header=
"拼团活动"
class=
"property-group"
shadow=
"never"
>
<CombinationShowcase
v-model=
"formData.activityIds"
/>
<CombinationShowcase
v-model=
"formData.activityIds"
/>
</el-card>
<el-card
header=
"商品样式"
class=
"property-group"
shadow=
"never"
>
<el-form-item
label=
"布局"
prop=
"type"
>
<el-radio-group
v-model=
"formData.layoutType"
>
<el-tooltip
class=
"item"
content=
"单列大图"
placement=
"bottom"
>
<el-radio-button
value=
"oneColBigImg"
>
<Icon
icon=
"fluent:text-column-one-24-filled"
/>
<Icon
icon=
"fluent:text-column-one-24-filled"
/>
</el-radio-button>
</el-tooltip>
<el-tooltip
class=
"item"
content=
"单列小图"
placement=
"bottom"
>
<el-radio-button
value=
"oneColSmallImg"
>
<Icon
icon=
"fluent:text-column-two-left-24-filled"
/>
<Icon
icon=
"fluent:text-column-two-left-24-filled"
/>
</el-radio-button>
</el-tooltip>
<el-tooltip
class=
"item"
content=
"双列"
placement=
"bottom"
>
<el-radio-button
value=
"twoCol"
>
<Icon
icon=
"fluent:text-column-two-24-filled"
/>
<Icon
icon=
"fluent:text-column-two-24-filled"
/>
</el-radio-button>
</el-tooltip>
<!--
<el-tooltip
class=
"item"
content=
"三列"
placement=
"bottom"
>
...
...
@@ -31,44 +31,44 @@
</el-form-item>
<el-form-item
label=
"商品名称"
prop=
"fields.name.show"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.name.color"
/>
<el-checkbox
v-model=
"formData.fields.name.show"
/>
<ColorInput
v-model=
"formData.fields.name.color"
/>
<el-checkbox
v-model=
"formData.fields.name.show"
/>
</div>
</el-form-item>
<el-form-item
label=
"商品简介"
prop=
"fields.introduction.show"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.introduction.color"
/>
<el-checkbox
v-model=
"formData.fields.introduction.show"
/>
<ColorInput
v-model=
"formData.fields.introduction.color"
/>
<el-checkbox
v-model=
"formData.fields.introduction.show"
/>
</div>
</el-form-item>
<el-form-item
label=
"商品价格"
prop=
"fields.price.show"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.price.color"
/>
<el-checkbox
v-model=
"formData.fields.price.show"
/>
<ColorInput
v-model=
"formData.fields.price.color"
/>
<el-checkbox
v-model=
"formData.fields.price.show"
/>
</div>
</el-form-item>
<el-form-item
label=
"市场价"
prop=
"fields.marketPrice.show"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.marketPrice.color"
/>
<el-checkbox
v-model=
"formData.fields.marketPrice.show"
/>
<ColorInput
v-model=
"formData.fields.marketPrice.color"
/>
<el-checkbox
v-model=
"formData.fields.marketPrice.show"
/>
</div>
</el-form-item>
<el-form-item
label=
"商品销量"
prop=
"fields.salesCount.show"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.salesCount.color"
/>
<el-checkbox
v-model=
"formData.fields.salesCount.show"
/>
<ColorInput
v-model=
"formData.fields.salesCount.color"
/>
<el-checkbox
v-model=
"formData.fields.salesCount.show"
/>
</div>
</el-form-item>
<el-form-item
label=
"商品库存"
prop=
"fields.stock.show"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.stock.color"
/>
<el-checkbox
v-model=
"formData.fields.stock.show"
/>
<ColorInput
v-model=
"formData.fields.stock.color"
/>
<el-checkbox
v-model=
"formData.fields.stock.show"
/>
</div>
</el-form-item>
</el-card>
<el-card
header=
"角标"
class=
"property-group"
shadow=
"never"
>
<el-form-item
label=
"角标"
prop=
"badge.show"
>
<el-switch
v-model=
"formData.badge.show"
/>
<el-switch
v-model=
"formData.badge.show"
/>
</el-form-item>
<el-form-item
label=
"角标"
prop=
"badge.imgUrl"
v-if=
"formData.badge.show"
>
<UploadImg
v-model=
"formData.badge.imgUrl"
height=
"44px"
width=
"72px"
>
...
...
@@ -85,13 +85,13 @@
</el-form-item>
<
template
v-if=
"formData.btnBuy.type === 'text'"
>
<el-form-item
label=
"按钮文字"
prop=
"btnBuy.text"
>
<el-input
v-model=
"formData.btnBuy.text"
/>
<el-input
v-model=
"formData.btnBuy.text"
/>
</el-form-item>
<el-form-item
label=
"左侧背景"
prop=
"btnBuy.bgBeginColor"
>
<ColorInput
v-model=
"formData.btnBuy.bgBeginColor"
/>
<ColorInput
v-model=
"formData.btnBuy.bgBeginColor"
/>
</el-form-item>
<el-form-item
label=
"右侧背景"
prop=
"btnBuy.bgEndColor"
>
<ColorInput
v-model=
"formData.btnBuy.bgEndColor"
/>
<ColorInput
v-model=
"formData.btnBuy.bgEndColor"
/>
</el-form-item>
</
template
>
<
template
v-else
>
...
...
@@ -139,26 +139,26 @@
</template>
<
script
setup
lang=
"ts"
>
import
{
PromotionCombinationProperty
}
from
'./config'
import
{
usePropertyForm
}
from
'@/components/DiyEditor/util'
import
{
PromotionCombinationProperty
}
from
'./config'
import
{
usePropertyForm
}
from
'@/components/DiyEditor/util'
import
*
as
CombinationActivityApi
from
'@/api/mall/promotion/combination/combinationActivity'
import
{
CommonStatusEnum
}
from
'@/utils/constants'
import
CombinationShowcase
from
"@/views/mall/promotion/combination/components/CombinationShowcase.vue"
;
import
{
CommonStatusEnum
}
from
'@/utils/constants'
import
CombinationShowcase
from
'@/views/mall/promotion/combination/components/CombinationShowcase.vue'
// 拼团属性面板
defineOptions
({
name
:
'PromotionCombinationProperty'
})
defineOptions
({
name
:
'PromotionCombinationProperty'
})
const
props
=
defineProps
<
{
modelValue
:
PromotionCombinationProperty
}
>
()
const
emit
=
defineEmits
([
'update:modelValue'
])
const
{
formData
}
=
usePropertyForm
(
props
.
modelValue
,
emit
)
const
{
formData
}
=
usePropertyForm
(
props
.
modelValue
,
emit
)
// 活动列表
const
activityList
=
ref
<
CombinationActivityApi
.
CombinationActivityVO
[]
>
([])
onMounted
(
async
()
=>
{
const
{
list
}
=
await
CombinationActivityApi
.
getCombinationActivityPage
({
const
{
list
}
=
await
CombinationActivityApi
.
getCombinationActivityPage
({
status
:
CommonStatusEnum
.
ENABLE
})
activityList
.
value
=
list
console
.
log
(
"formDa"
,
props
);
console
.
log
(
'formDa'
,
props
)
})
</
script
>
...
...
src/components/DiyEditor/index.vue
View file @
4870231b
...
...
@@ -153,7 +153,11 @@
>
<!--这里的 key 使用时间戳是为了保证每次点击组件都进行刷新-->
<component
:key=
"selectedComponent?.uid || selectedComponent?.id + new Date().getTime() || new Date().getTime().toString()"
:key=
"
selectedComponent?.uid ||
selectedComponent?.id + new Date().getTime() ||
new Date().getTime().toString()
"
:is=
"selectedComponent?.id + 'Property'"
v-model=
"selectedComponent.property"
/>
...
...
src/views/mall/promotion/combination/components/CombinationShowcase.vue
View file @
4870231b
...
...
@@ -3,10 +3,11 @@
<div
v-for=
"(combinationActivity, index) in Activitys"
:key=
"combinationActivity.id"
class=
"select-box spu-pic"
>
class=
"select-box spu-pic"
>
<el-tooltip
:content=
"combinationActivity.name"
>
<div
class=
"relative h-full w-full"
>
<el-image
:src=
"combinationActivity.picUrl"
class=
"h-full w-full"
/>
<el-image
:src=
"combinationActivity.picUrl"
class=
"h-full w-full"
/>
<Icon
v-show=
"!disabled"
class=
"del-icon"
...
...
@@ -18,24 +19,27 @@
</div>
<el-tooltip
content=
"选择活动"
v-if=
"canAdd"
>
<div
class=
"select-box"
@
click=
"openCombinationActivityTableSelect"
>
<Icon
icon=
"ep:plus"
/>
<Icon
icon=
"ep:plus"
/>
</div>
</el-tooltip>
</div>
<!-- 拼团活动选择对话框(表格形式) -->
<CombinationTableSelect
ref=
"combinationActivityTableSelectRef"
:multiple=
"limit != 1"
@
change=
"handleActivitySelected"
/>
<CombinationTableSelect
ref=
"combinationActivityTableSelectRef"
:multiple=
"limit != 1"
@
change=
"handleActivitySelected"
/>
</
template
>
<
script
lang=
"ts"
setup
>
import
*
as
CombinationActivityApi
from
'@/api/mall/promotion/combination/combinationActivity'
import
{
propTypes
}
from
'@/utils/propTypes'
import
{
oneOfType
}
from
'vue-types'
import
{
isArray
}
from
'@/utils/is'
import
CombinationTableSelect
from
"@/views/mall/promotion/combination/components/CombinationTableSelect.vue"
;
import
{
propTypes
}
from
'@/utils/propTypes'
import
{
oneOfType
}
from
'vue-types'
import
{
isArray
}
from
'@/utils/is'
import
CombinationTableSelect
from
'@/views/mall/promotion/combination/components/CombinationTableSelect.vue'
// 活动橱窗,一般用于装修时使用
// 提供功能:展示活动列表、添加活动、删除活动
defineOptions
({
name
:
'CombinationShowcase'
})
defineOptions
({
name
:
'CombinationShowcase'
})
const
props
=
defineProps
({
modelValue
:
oneOfType
<
number
|
Array
<
number
>>
([
Number
,
Array
]).
isRequired
,
...
...
@@ -73,11 +77,14 @@ watch(
return
}
// 只有活动发生变化之后,才会查询活动
if
(
Activitys
.
value
.
length
===
0
||
Activitys
.
value
.
some
((
combinationActivity
)
=>
!
ids
.
includes
(
combinationActivity
.
id
!
)))
{
if
(
Activitys
.
value
.
length
===
0
||
Activitys
.
value
.
some
((
combinationActivity
)
=>
!
ids
.
includes
(
combinationActivity
.
id
!
))
)
{
Activitys
.
value
=
await
CombinationActivityApi
.
getCombinationActivityDetailList
(
ids
)
}
},
{
immediate
:
true
}
{
immediate
:
true
}
)
/** 活动表格选择对话框 */
...
...
@@ -91,7 +98,11 @@ const openCombinationActivityTableSelect = () => {
* 选择活动后触发
* @param activityVOs 选中的活动列表
*/
const
handleActivitySelected
=
(
activityVOs
:
CombinationActivityApi
.
CombinationActivityVO
|
CombinationActivityApi
.
CombinationActivityVO
[])
=>
{
const
handleActivitySelected
=
(
activityVOs
:
|
CombinationActivityApi
.
CombinationActivityVO
|
CombinationActivityApi
.
CombinationActivityVO
[]
)
=>
{
Activitys
.
value
=
isArray
(
activityVOs
)
?
activityVOs
:
[
activityVOs
]
emitActivityChange
()
}
...
...
src/views/mall/promotion/combination/components/CombinationTableSelect.vue
View file @
4870231b
...
...
@@ -35,11 +35,11 @@
</el-form-item>
<el-form-item>
<el-button
@
click=
"handleQuery"
>
<Icon
class=
"mr-5px"
icon=
"ep:search"
/>
<Icon
class=
"mr-5px"
icon=
"ep:search"
/>
搜索
</el-button>
<el-button
@
click=
"resetQuery"
>
<Icon
class=
"mr-5px"
icon=
"ep:refresh"
/>
<Icon
class=
"mr-5px"
icon=
"ep:refresh"
/>
重置
</el-button>
</el-form-item>
...
...
@@ -64,14 +64,18 @@
<!-- 2. 单选模式 -->
<el-table-column
label=
"#"
width=
"55"
v-else
>
<
template
#
default=
"{ row }"
>
<el-radio
:value=
"row.id"
v-model=
"selectedActivityId"
@
change=
"handleSingleSelected(row)"
>
<el-radio
:value=
"row.id"
v-model=
"selectedActivityId"
@
change=
"handleSingleSelected(row)"
>
<!-- 空格不能省略,是为了让单选框不显示label,如果不指定label不会有选中的效果 -->
</el-radio>
</
template
>
</el-table-column>
<el-table-column
label=
"活动编号"
prop=
"id"
min-width=
"80"
/>
<el-table-column
label=
"活动名称"
prop=
"name"
min-width=
"140"
/>
<el-table-column
label=
"活动编号"
prop=
"id"
min-width=
"80"
/>
<el-table-column
label=
"活动名称"
prop=
"name"
min-width=
"140"
/>
<el-table-column
label=
"活动时间"
min-width=
"210"
>
<
template
#
default=
"scope"
>
{{
formatDate
(
scope
.
row
.
startTime
,
'YYYY-MM-DD'
)
}}
...
...
@@ -88,7 +92,7 @@
/>
</
template
>
</el-table-column>
<el-table-column
label=
"商品标题"
prop=
"spuName"
min-width=
"300"
/>
<el-table-column
label=
"商品标题"
prop=
"spuName"
min-width=
"300"
/>
<el-table-column
label=
"原价"
prop=
"marketPrice"
...
...
@@ -100,12 +104,12 @@
{{
formatCombinationPrice
(
scope
.
row
.
products
)
}}
</
template
>
</el-table-column>
<el-table-column
label=
"开团组数"
prop=
"groupCount"
min-width=
"100"
/>
<el-table-column
label=
"成团组数"
prop=
"groupSuccessCount"
min-width=
"100"
/>
<el-table-column
label=
"购买次数"
prop=
"recordCount"
min-width=
"100"
/>
<el-table-column
label=
"开团组数"
prop=
"groupCount"
min-width=
"100"
/>
<el-table-column
label=
"成团组数"
prop=
"groupSuccessCount"
min-width=
"100"
/>
<el-table-column
label=
"购买次数"
prop=
"recordCount"
min-width=
"100"
/>
<el-table-column
label=
"活动状态"
align=
"center"
prop=
"status"
min-width=
"100"
>
<
template
#
default=
"scope"
>
<dict-tag
:type=
"DICT_TYPE.COMMON_STATUS"
:value=
"scope.row.status"
/>
<dict-tag
:type=
"DICT_TYPE.COMMON_STATUS"
:value=
"scope.row.status"
/>
</
template
>
</el-table-column>
<el-table-column
...
...
@@ -132,16 +136,16 @@
</template>
<
script
lang=
"ts"
setup
>
import
{
handleTree
}
from
'@/utils/tree'
import
{
handleTree
}
from
'@/utils/tree'
import
*
as
ProductCategoryApi
from
'@/api/mall/product/category'
import
{
propTypes
}
from
'@/utils/propTypes'
import
{
CHANGE_EVENT
}
from
'element-plus'
import
*
as
CombinationActivityApi
from
"@/api/mall/promotion/combination/combinationActivity"
;
import
{
fenToYuanFormat
}
from
"@/utils/formatter"
;
import
{
DICT_TYPE
,
getIntDictOptions
}
from
"@/utils/dict"
;
import
{
dateFormatter
,
formatDate
}
from
"@/utils/formatTime"
;
import
{
fenToYuan
}
from
"@/utils"
;
import
{
propTypes
}
from
'@/utils/propTypes'
import
{
CHANGE_EVENT
}
from
'element-plus'
import
*
as
CombinationActivityApi
from
'@/api/mall/promotion/combination/combinationActivity'
import
{
fenToYuanFormat
}
from
'@/utils/formatter'
import
{
DICT_TYPE
,
getIntDictOptions
}
from
'@/utils/dict'
import
{
dateFormatter
,
formatDate
}
from
'@/utils/formatTime'
import
{
fenToYuan
}
from
'@/utils'
type
CombinationActivityVO
=
Required
<
CombinationActivityApi
.
CombinationActivityVO
>
...
...
@@ -156,7 +160,7 @@ type CombinationActivityVO = Required<CombinationActivityApi.CombinationActivity
* 2.3 点击右下角的确定按钮时,结束选择,关闭对话框
* 2.4 再次打开时,保持选中状态
*/
defineOptions
({
name
:
'CombinationTableSelect'
})
defineOptions
({
name
:
'CombinationTableSelect'
})
defineProps
({
// 多选模式
...
...
@@ -190,14 +194,16 @@ const open = (CombinationList?: CombinationActivityVO[]) => {
// 处理已选中
if
(
CombinationList
&&
CombinationList
.
length
>
0
)
{
checkedActivitys
.
value
=
[...
CombinationList
]
checkedStatus
.
value
=
Object
.
fromEntries
(
CombinationList
.
map
((
activityVO
)
=>
[
activityVO
.
id
,
true
]))
checkedStatus
.
value
=
Object
.
fromEntries
(
CombinationList
.
map
((
activityVO
)
=>
[
activityVO
.
id
,
true
])
)
}
dialogVisible
.
value
=
true
resetQuery
()
}
// 提供 open 方法,用于打开弹窗
defineExpose
({
open
})
defineExpose
({
open
})
/** 查询列表 */
const
getList
=
async
()
=>
{
...
...
@@ -208,7 +214,8 @@ const getList = async () => {
total
.
value
=
data
.
total
// checkbox绑定undefined会有问题,需要给一个bool值
list
.
value
.
forEach
(
(
activityVO
)
=>
(
checkedStatus
.
value
[
activityVO
.
id
]
=
checkedStatus
.
value
[
activityVO
.
id
]
||
false
)
(
activityVO
)
=>
(
checkedStatus
.
value
[
activityVO
.
id
]
=
checkedStatus
.
value
[
activityVO
.
id
]
||
false
)
)
// 计算全选框状态
calculateIsCheckAll
()
...
...
@@ -289,7 +296,11 @@ const handleCheckAll = (checked: boolean) => {
* @param combinationActivity 活动
* @param isCalcCheckAll 是否计算全选
*/
const
handleCheckOne
=
(
checked
:
boolean
,
combinationActivity
:
CombinationActivityVO
,
isCalcCheckAll
:
boolean
)
=>
{
const
handleCheckOne
=
(
checked
:
boolean
,
combinationActivity
:
CombinationActivityVO
,
isCalcCheckAll
:
boolean
)
=>
{
if
(
checked
)
{
checkedActivitys
.
value
.
push
(
combinationActivity
)
checkedStatus
.
value
[
combinationActivity
.
id
]
=
true
...
...
@@ -309,13 +320,15 @@ const handleCheckOne = (checked: boolean, combinationActivity: CombinationActivi
}
// 查找活动在已选中活动列表中的索引
const
findCheckedIndex
=
(
activityVO
:
CombinationActivityVO
)
=>
checkedActivitys
.
value
.
findIndex
((
item
)
=>
item
.
id
===
activityVO
.
id
)
const
findCheckedIndex
=
(
activityVO
:
CombinationActivityVO
)
=>
checkedActivitys
.
value
.
findIndex
((
item
)
=>
item
.
id
===
activityVO
.
id
)
// 计算全选框状态
const
calculateIsCheckAll
=
()
=>
{
isCheckAll
.
value
=
list
.
value
.
every
((
activityVO
)
=>
checkedStatus
.
value
[
activityVO
.
id
])
// 计算中间状态:不是全部选中 && 任意一个选中
isIndeterminate
.
value
=
!
isCheckAll
.
value
&&
list
.
value
.
some
((
activityVO
)
=>
checkedStatus
.
value
[
activityVO
.
id
])
isIndeterminate
.
value
=
!
isCheckAll
.
value
&&
list
.
value
.
some
((
activityVO
)
=>
checkedStatus
.
value
[
activityVO
.
id
])
}
// 分类列表
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment