From abbd23e332cbb69bb455d6930ac21e46ff8f6dd1 Mon Sep 17 00:00:00 2001
From: xinjie <>
Date: Tue, 15 Nov 2022 14:46:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E8=A3=85=E4=BF=AE?=
 =?UTF-8?q?=E8=83=BD=E6=8B=96=E6=8B=BD=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/decoration/component/add-nav.vue    | 73 +++++++++++--------
 .../component/widgets/banner/attr.vue         | 66 +++++++++++------
 .../component/widgets/user-banner/attr.vue    | 53 ++++++++------
 3 files changed, 115 insertions(+), 77 deletions(-)

diff --git a/admin/src/views/decoration/component/add-nav.vue b/admin/src/views/decoration/component/add-nav.vue
index b01d037a..485b90e9 100644
--- a/admin/src/views/decoration/component/add-nav.vue
+++ b/admin/src/views/decoration/component/add-nav.vue
@@ -1,37 +1,36 @@
 <template>
     <div>
         <div>
-            <del-wrap
-                class="max-w-[400px]"
-                v-for="(item, index) in modelValue"
-                :key="index"
-                @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"
-                        size="60px"
-                        exclude-domain
-                    >
-                        <template #upload>
-                            <div class="upload-btn w-[60px] h-[60px]">
-                                <icon name="el-icon-Plus" :size="20" />
+            <draggable class="draggable" v-model="navLists" animation="300">
+                <template v-slot:item="{ element: item, index }">
+                    <del-wrap class="max-w-[400px]" :key="index" @close="handleDelete(index)">
+                        <div class="bg-fill-light flex items-center w-full p-4 mb-4 cursor-move">
+                            <material-picker
+                                v-model="item.image"
+                                upload-class="bg-body"
+                                size="60px"
+                                exclude-domain
+                            >
+                                <template #upload>
+                                    <div class="upload-btn w-[60px] h-[60px]">
+                                        <icon name="el-icon-Plus" :size="20" />
+                                    </div>
+                                </template>
+                            </material-picker>
+                            <div class="ml-3 flex-1">
+                                <div class="flex">
+                                    <span class="text-tx-regular flex-none mr-3">名称</span>
+                                    <el-input v-model="item.name" placeholder="请输入名称" />
+                                </div>
+                                <div class="flex mt-[18px]">
+                                    <span class="text-tx-regular flex-none mr-3">链接</span>
+                                    <link-picker v-model="item.link" />
+                                </div>
                             </div>
-                        </template>
-                    </material-picker>
-                    <div class="ml-3 flex-1">
-                        <div class="flex">
-                            <span class="text-tx-regular flex-none mr-3">名称</span>
-                            <el-input v-model="item.name" placeholder="请输入名称" />
                         </div>
-                        <div class="flex mt-[18px]">
-                            <span class="text-tx-regular flex-none mr-3">链接</span>
-                            <link-picker v-model="item.link" />
-                        </div>
-                    </div>
-                </div>
-            </del-wrap>
+                    </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>
 
diff --git a/admin/src/views/decoration/component/widgets/banner/attr.vue b/admin/src/views/decoration/component/widgets/banner/attr.vue
index 3d5beb9a..60472418 100644
--- a/admin/src/views/decoration/component/widgets/banner/attr.vue
+++ b/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,28 +10,43 @@
             <el-form-item label="图片设置">
                 <div class="flex-1">
                     <div class="form-tips">最多添加5张，建议图片尺寸：750px*340px</div>
-                    <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">
-                            <material-picker
-                                v-model="item.image"
-                                upload-class="bg-body"
-                                exclude-domain
-                            />
-                            <div class="ml-3 flex-1">
-                                <el-form-item label="图片名称">
-                                    <el-input v-model="item.name" placeholder="请输入名称" />
-                                </el-form-item>
-                                <el-form-item class="mt-[18px]" label="图片链接">
-                                    <link-picker v-model="item.link" />
-                                </el-form-item>
-                            </div>
-                        </div>
-                    </del-wrap>
+                    <draggable class="draggable" v-model="content.data" animation="300">
+                        <template v-slot:item="{ element: item, index }">
+                            <del-wrap
+                                :key="index"
+                                @close="handleDelete(index)"
+                                class="max-w-[400px]"
+                            >
+                                <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"
+                                        exclude-domain
+                                    />
+                                    <div class="ml-3 flex-1">
+                                        <el-form-item label="图片名称">
+                                            <el-input
+                                                v-model="item.name"
+                                                placeholder="请输入名称"
+                                            />
+                                        </el-form-item>
+                                        <el-form-item class="mt-[18px]" label="图片链接">
+                                            <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'
     }
 })
 
diff --git a/admin/src/views/decoration/component/widgets/user-banner/attr.vue b/admin/src/views/decoration/component/widgets/user-banner/attr.vue
index 73263d7f..660fcd6c 100644
--- a/admin/src/views/decoration/component/widgets/user-banner/attr.vue
+++ b/admin/src/views/decoration/component/widgets/user-banner/attr.vue
@@ -10,28 +10,36 @@
             <el-form-item label="图片设置">
                 <div class="flex-1">
                     <div class="form-tips">最多添加5张，建议图片尺寸：750px*200px</div>
-                    <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">
-                            <material-picker
-                                v-model="item.image"
-                                upload-class="bg-body"
-                                exclude-domain
-                            />
-                            <div class="ml-3 flex-1">
-                                <el-form-item label="图片名称">
-                                    <el-input v-model="item.name" placeholder="请输入名称" />
-                                </el-form-item>
-                                <el-form-item class="mt-[18px]" label="图片链接">
-                                    <link-picker v-model="item.link" />
-                                </el-form-item>
-                            </div>
-                        </div>
-                    </del-wrap>
+                    <draggable class="draggable" v-model="content.data" animation="300">
+                        <template v-slot:item="{ element: item, index }">
+                            <del-wrap
+                                :key="index"
+                                @close="handleDelete(index)"
+                                class="max-w-[400px]"
+                            >
+                                <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"
+                                        exclude-domain
+                                    />
+                                    <div class="ml-3 flex-1">
+                                        <el-form-item label="图片名称">
+                                            <el-input
+                                                v-model="item.name"
+                                                placeholder="请输入名称"
+                                            />
+                                        </el-form-item>
+                                        <el-form-item class="mt-[18px]" label="图片链接">
+                                            <link-picker v-model="item.link" />
+                                        </el-form-item>
+                                    </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({