SPU: 新增完善活动优先级拖拽排序

This commit is contained in:
puhui999 2023-10-20 16:36:50 +08:00
parent 01d78429cc
commit 1e8945de63
4 changed files with 68 additions and 11 deletions

2
.env
View File

@ -11,7 +11,7 @@ VITE_OPEN=true
VITE_APP_TENANT_ENABLE=true
# 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true
VITE_APP_CAPTCHA_ENABLE=false
# 百度统计
VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc

View File

@ -58,6 +58,7 @@
"pinia": "^2.1.6",
"qrcode": "^1.5.3",
"qs": "^6.11.2",
"sortablejs": "^1.15.0",
"steady-xml": "^0.1.0",
"url": "^0.11.3",
"video.js": "^7.21.5",
@ -82,10 +83,11 @@
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.5.2",
"@types/qs": "^6.9.8",
"@types/sortablejs": "^1.15.4",
"@typescript-eslint/eslint-plugin": "^6.7.2",
"@typescript-eslint/parser": "^6.7.2",
"@unocss/transformer-variant-group": "^0.56.1",
"@unocss/eslint-config": "^0.56.1",
"@unocss/transformer-variant-group": "^0.56.1",
"@vitejs/plugin-legacy": "^4.1.1",
"@vitejs/plugin-vue": "^4.3.4",
"@vitejs/plugin-vue-jsx": "^3.0.2",

View File

@ -0,0 +1,59 @@
<template>
<div ref="elTagWrappingRef">
<template v-if="activityOrders && activityOrders.length > 0">
<el-tag
v-for="activityType in activityOrders"
:key="activityType"
:type="promotionTypes.find((item) => item.value === activityType)?.colorType"
class="mr-[10px]"
>
{{ promotionTypes.find((item) => item.value === activityType)?.label }}
</el-tag>
</template>
<template v-else>
<el-tag
v-for="type in promotionTypes"
:key="type.value as number"
:type="type.colorType"
class="mr-[10px]"
>
{{ type.label }}
</el-tag>
</template>
</div>
</template>
<script lang="ts" setup>
import Sortable from 'sortablejs'
import type { DictDataType } from '@/utils/dict'
defineOptions({ name: 'ActivityOrdersSort' })
const props = defineProps<{
promotionTypes: DictDataType[]
activityOrders: number[]
}>()
const emit = defineEmits<{
(e: 'update:activityOrders', v: number[])
}>()
const elTagWrappingRef = ref() // elTag Ref
const initSortable = () => {
new Sortable(elTagWrappingRef.value, {
swapThreshold: 1,
animation: 150,
onEnd: (el) => {
const innerText = el.to.innerText
//
const activityOrder = innerText.split('\n')
//
const sortedActivityOrder = activityOrder.map((activityName) => {
return props.promotionTypes.find((item) => item.label === activityName)?.value
})
emit('update:activityOrders', sortedActivityOrder as number[])
}
})
}
onMounted(async () => {
await nextTick()
initSortable()
})
</script>

View File

@ -41,16 +41,11 @@
</el-form-item>
</el-col>
<el-col :span="24">
<!-- TODO @puhui999tag展示暂时不考虑排序支持拖动排序 -->
<el-form-item label="活动优先级">
<el-tag
v-for="type in promotionTypes"
:key="type.value as number"
:type="type.colorType"
class="mr-[10px]"
>
{{ type.label }}
</el-tag>
<ActivityOrdersSort
v-model:activity-orders="formData.activityOrders"
:promotion-types="promotionTypes"
/>
</el-form-item>
</el-col>
<el-col :span="24">
@ -115,6 +110,7 @@ import { copyValueToTarget } from '@/utils'
import { otherSettingsSchema } from './spu.data'
import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
import CouponSelect from './CouponSelect.vue'
import ActivityOrdersSort from './ActivityOrdersSort.vue'
defineOptions({ name: 'OtherSettingsForm' })