可视化装修能拖拽排序

admin/src/views/decoration/component/add-nav.vue

@@ -1,13 +1,10 @@
 <template>
     <div>
         <div>
-            <del-wrap
+            <draggable class="draggable" v-model="navLists" animation="300">
-                class="max-w-[400px]"
+                <template v-slot:item="{ element: item, index }">
-                v-for="(item, index) in modelValue"
+                    <del-wrap class="max-w-[400px]" :key="index" @close="handleDelete(index)">
-                :key="index"
+                        <div class="bg-fill-light flex items-center w-full p-4 mb-4 cursor-move">
-                @close="handleDelete(index)"
-            >
-                <div class="bg-fill-light flex items-center w-full p-4 mb-4">
                             <material-picker
                                 v-model="item.image"
                                 upload-class="bg-body"
@@ -32,6 +29,8 @@
                             </div>
                         </div>
                     </del-wrap>
+                </template>
+            </draggable>
         </div>
         <div>
             <el-button type="primary" @click="handleAdd">添加</el-button>
@@ -41,7 +40,7 @@
 <script lang="ts" setup>
 import feedback from '@/utils/feedback'
 import type { PropType } from 'vue'
-
+import Draggable from 'vuedraggable'
 const props = defineProps({
     modelValue: {
         type: Array as PropType<any[]>,
@@ -57,9 +56,19 @@ const props = defineProps({
     }
 })
 
+const emit = defineEmits(['update:modelValue'])
+const navLists = computed({
+    get() {
+        return props.modelValue
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+
 const handleAdd = () => {
     if (props.modelValue?.length < props.max) {
-        props.modelValue.push({
+        navLists.value.push({
             image: '',
             name: '导航名称',
             link: {}
@@ -72,7 +81,7 @@ const handleDelete = (index: number) => {
     if (props.modelValue?.length <= props.min) {
         return feedback.msgError(`最少保留${props.min}个`)
     }
-    props.modelValue.splice(index, 1)
+    navLists.value.splice(index, 1)
 }
 </script>
 

admin/src/views/decoration/component/widgets/banner/attr.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <el-form label-width="70px">
-            <el-form-item label="是否启用">
+            <el-form-item label="是否启用" v-if="type == 'mobile'">
                 <el-radio-group v-model="content.enabled">
                     <el-radio :label="1">开启</el-radio>
                     <el-radio :label="0">停用</el-radio>
@@ -10,13 +10,16 @@
             <el-form-item label="图片设置">
                 <div class="flex-1">
                     <div class="form-tips">最多添加5张，建议图片尺寸：750px*340px</div>
+                    <draggable class="draggable" v-model="content.data" animation="300">
+                        <template v-slot:item="{ element: item, index }">
                             <del-wrap
-                        v-for="(item, index) in content.data"
                                 :key="index"
                                 @close="handleDelete(index)"
                                 class="max-w-[400px]"
                             >
-                        <div class="bg-fill-light flex items-center w-full p-4 mt-4">
+                                <div
+                                    class="bg-fill-light flex items-center w-full p-4 mt-4 cursor-move"
+                                >
                                     <material-picker
                                         v-model="item.image"
                                         upload-class="bg-body"
@@ -24,14 +27,26 @@
                                     />
                                     <div class="ml-3 flex-1">
                                         <el-form-item label="图片名称">
-                                    <el-input v-model="item.name" placeholder="请输入名称" />
+                                            <el-input
+                                                v-model="item.name"
+                                                placeholder="请输入名称"
+                                            />
                                         </el-form-item>
                                         <el-form-item class="mt-[18px]" label="图片链接">
-                                    <link-picker v-model="item.link" />
+                                            <link-picker
+                                                v-if="type == 'mobile'"
+                                                v-model="item.link"
+                                            />
+                                            <el-input
+                                                placeholder="请输入链接"
+                                                v-model="item.link.path"
+                                            />
                                         </el-form-item>
                                     </div>
                                 </div>
                             </del-wrap>
+                        </template>
+                    </draggable>
                 </div>
             </el-form-item>
             <el-form-item v-if="content.data?.length < limit">
@@ -44,6 +59,7 @@
 import feedback from '@/utils/feedback'
 import type { PropType } from 'vue'
 import type options from './options'
+import Draggable from 'vuedraggable'
 const limit = 5
 type OptionsType = ReturnType<typeof options>
 const props = defineProps({
@@ -54,6 +70,10 @@ const props = defineProps({
     styles: {
         type: Object as PropType<OptionsType['styles']>,
         default: () => ({})
+    },
+    type: {
+        type: String as PropType<'mobile' | 'pc'>,
+        default: 'mobile'
     }
 })
 

admin/src/views/decoration/component/widgets/user-banner/attr.vue

@@ -10,13 +10,16 @@
             <el-form-item label="图片设置">
                 <div class="flex-1">
                     <div class="form-tips">最多添加5张，建议图片尺寸：750px*200px</div>
+                    <draggable class="draggable" v-model="content.data" animation="300">
+                        <template v-slot:item="{ element: item, index }">
                             <del-wrap
-                        v-for="(item, index) in content.data"
                                 :key="index"
                                 @close="handleDelete(index)"
                                 class="max-w-[400px]"
                             >
-                        <div class="bg-fill-light flex items-center w-full p-4 mt-4">
+                                <div
+                                    class="bg-fill-light flex items-center w-full p-4 mt-4 cursor-move"
+                                >
                                     <material-picker
                                         v-model="item.image"
                                         upload-class="bg-body"
@@ -24,7 +27,10 @@
                                     />
                                     <div class="ml-3 flex-1">
                                         <el-form-item label="图片名称">
-                                    <el-input v-model="item.name" placeholder="请输入名称" />
+                                            <el-input
+                                                v-model="item.name"
+                                                placeholder="请输入名称"
+                                            />
                                         </el-form-item>
                                         <el-form-item class="mt-[18px]" label="图片链接">
                                             <link-picker v-model="item.link" />
@@ -32,6 +38,8 @@
                                     </div>
                                 </div>
                             </del-wrap>
+                        </template>
+                    </draggable>
                 </div>
             </el-form-item>
             <el-form-item v-if="content.data?.length < limit">
@@ -44,6 +52,7 @@
 import feedback from '@/utils/feedback'
 import type { PropType } from 'vue'
 import type options from './options'
+import Draggable from 'vuedraggable'
 const limit = 5
 type OptionsType = ReturnType<typeof options>
 const props = defineProps({