SPU: 新增完善活动优先级拖拽排序
This commit is contained in:
parent
01d78429cc
commit
1e8945de63
2
.env
2
.env
@ -11,7 +11,7 @@ VITE_OPEN=true
|
|||||||
VITE_APP_TENANT_ENABLE=true
|
VITE_APP_TENANT_ENABLE=true
|
||||||
|
|
||||||
# 验证码的开关
|
# 验证码的开关
|
||||||
VITE_APP_CAPTCHA_ENABLE=true
|
VITE_APP_CAPTCHA_ENABLE=false
|
||||||
|
|
||||||
# 百度统计
|
# 百度统计
|
||||||
VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc
|
VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc
|
||||||
|
@ -58,6 +58,7 @@
|
|||||||
"pinia": "^2.1.6",
|
"pinia": "^2.1.6",
|
||||||
"qrcode": "^1.5.3",
|
"qrcode": "^1.5.3",
|
||||||
"qs": "^6.11.2",
|
"qs": "^6.11.2",
|
||||||
|
"sortablejs": "^1.15.0",
|
||||||
"steady-xml": "^0.1.0",
|
"steady-xml": "^0.1.0",
|
||||||
"url": "^0.11.3",
|
"url": "^0.11.3",
|
||||||
"video.js": "^7.21.5",
|
"video.js": "^7.21.5",
|
||||||
@ -82,10 +83,11 @@
|
|||||||
"@types/nprogress": "^0.2.0",
|
"@types/nprogress": "^0.2.0",
|
||||||
"@types/qrcode": "^1.5.2",
|
"@types/qrcode": "^1.5.2",
|
||||||
"@types/qs": "^6.9.8",
|
"@types/qs": "^6.9.8",
|
||||||
|
"@types/sortablejs": "^1.15.4",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||||
"@typescript-eslint/parser": "^6.7.2",
|
"@typescript-eslint/parser": "^6.7.2",
|
||||||
"@unocss/transformer-variant-group": "^0.56.1",
|
|
||||||
"@unocss/eslint-config": "^0.56.1",
|
"@unocss/eslint-config": "^0.56.1",
|
||||||
|
"@unocss/transformer-variant-group": "^0.56.1",
|
||||||
"@vitejs/plugin-legacy": "^4.1.1",
|
"@vitejs/plugin-legacy": "^4.1.1",
|
||||||
"@vitejs/plugin-vue": "^4.3.4",
|
"@vitejs/plugin-vue": "^4.3.4",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
||||||
|
59
src/views/mall/product/spu/form/ActivityOrdersSort.vue
Normal file
59
src/views/mall/product/spu/form/ActivityOrdersSort.vue
Normal 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>
|
@ -41,16 +41,11 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<!-- TODO @puhui999:tag展示暂时不考虑排序;支持拖动排序 -->
|
|
||||||
<el-form-item label="活动优先级">
|
<el-form-item label="活动优先级">
|
||||||
<el-tag
|
<ActivityOrdersSort
|
||||||
v-for="type in promotionTypes"
|
v-model:activity-orders="formData.activityOrders"
|
||||||
:key="type.value as number"
|
:promotion-types="promotionTypes"
|
||||||
:type="type.colorType"
|
/>
|
||||||
class="mr-[10px]"
|
|
||||||
>
|
|
||||||
{{ type.label }}
|
|
||||||
</el-tag>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
@ -115,6 +110,7 @@ import { copyValueToTarget } from '@/utils'
|
|||||||
import { otherSettingsSchema } from './spu.data'
|
import { otherSettingsSchema } from './spu.data'
|
||||||
import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
|
import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
|
||||||
import CouponSelect from './CouponSelect.vue'
|
import CouponSelect from './CouponSelect.vue'
|
||||||
|
import ActivityOrdersSort from './ActivityOrdersSort.vue'
|
||||||
|
|
||||||
defineOptions({ name: 'OtherSettingsForm' })
|
defineOptions({ name: 'OtherSettingsForm' })
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user