From 1e8945de63f398fd2284843c5a70283b3ea18bf6 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 20 Oct 2023 16:36:50 +0800
Subject: [PATCH] =?UTF-8?q?SPU:=20=E6=96=B0=E5=A2=9E=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E4=BC=98=E5=85=88=E7=BA=A7=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |  2 +-
 package.json                                  |  4 +-
 .../product/spu/form/ActivityOrdersSort.vue   | 59 +++++++++++++++++++
 .../product/spu/form/OtherSettingsForm.vue    | 14 ++---
 4 files changed, 68 insertions(+), 11 deletions(-)
 create mode 100644 src/views/mall/product/spu/form/ActivityOrdersSort.vue

diff --git a/.env b/.env
index 3c5303b5..c079b153 100644
--- a/.env
+++ b/.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
diff --git a/package.json b/package.json
index 22334907..5bbf4fd8 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/mall/product/spu/form/ActivityOrdersSort.vue b/src/views/mall/product/spu/form/ActivityOrdersSort.vue
new file mode 100644
index 00000000..eb524860
--- /dev/null
+++ b/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>
diff --git a/src/views/mall/product/spu/form/OtherSettingsForm.vue b/src/views/mall/product/spu/form/OtherSettingsForm.vue
index d7217cfe..24498860 100644
--- a/src/views/mall/product/spu/form/OtherSettingsForm.vue
+++ b/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' })