|
|
@@ -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>
|
puhui999