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

src/views/mall/product/spu/form/ActivityOrdersSort.vue

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

src/views/mall/product/spu/form/OtherSettingsForm.vue

@@ -41,16 +41,11 @@
         </el-form-item>
       </el-col>
       <el-col :span="24">
-        <!--   TODO @puhui999：tag展示暂时不考虑排序；支持拖动排序 -->
         <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' })