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

Author: puhui999

.env

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

package.json

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

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' })