commit message

manager/src/views/lili-floor-renovation/renovation.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="renovation">
+        <!-- 左侧模块列表 -->
+        <div class="model-list">
+            <div class="classification-title">基础模块</div>
+            <draggable tag="ul" :list="modelData" 
+              v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
+              @end="handleMoveEnd"
+              @start="handleMoveStart"
+              :move="handleMove"
+            >
+                <li v-for="(model, index) in modelData" :key="index" class="model-item">
+                    <Icon :type="model.icon" />
+                    <span>{{model.name}}</span>
+                </li>
+            </draggable>
+        </div>
+        <!-- 中间展示模块 -->
+        <div class="show-content">
+            <model-form  ref="modelForm" :data="modelForm"></model-form>
+        </div>
+        <!-- 保存按钮 -->
+        <div class="btn-bar"><Button type="primary" @click="saveTemplate">保存模板</Button> <Button @click="resetTemplate">还原模板</Button></div>
+    </div>
+</template>
+<script>
+import { modelData } from './modelConfig';
+import Draggable from "vuedraggable";
+import ModelForm from './modelForm.vue';
+import * as API_floor from '@/api/other.js';
+export default {
+    components:{
+        Draggable, ModelForm
+    },
+    mounted(){
+        this.getTemplateItem(this.$route.query.id)
+    },
+    data() {
+        return {
+            modelData, // 可选模块数据
+            modelForm:{list:[]} // 模板数据
+        }
+    },
+    methods:{
+        saveTemplate(){ // 保存模板
+            this.modelForm.list.unshift(this.$refs.modelForm.navList)
+            this.modelForm.list.unshift(this.$refs.modelForm.topAdvert)
+            const modelForm = JSON.stringify(this.modelForm)
+            const data = {
+                id:this.$route.query.id,
+                pageData:modelForm,
+            }
+            API_floor.updateHome(this.$route.query.id, data).then(res=> {
+                if(res.code === 200) {
+                    this.$Message.success('保存模板成功');
+                } else {
+                    this.$Message.error(res.message)
+                }
+            })
+        },
+        resetTemplate(){ // 还原模板
+            this.getTemplateItem(this.$route.query.id)
+        },
+        getTemplateItem(id){ // 获取模板数据
+            API_floor.getHomeData(id).then(res => {
+                if (res.code === 200) {
+                    let pageData = res.result.pageData;
+                    if(pageData) {
+                        pageData = JSON.parse(pageData);
+                        if (pageData.list[0].type === 'topAdvert') { // topAdvert 为顶部广告 navList为导航栏
+                            this.$refs.modelForm.topAdvert = pageData.list[0];
+                            this.$refs.modelForm.navList = pageData.list[1];
+                            pageData.list.splice(0,2)
+                            this.modelForm = pageData;
+                        } else {
+                            this.modelForm = {list:[]}
+                        }
+                        
+                    } else {
+                        this.modelForm = {list:[]}
+                    }
+                }
+                
+                // this.$refs.modelForm.topAdvert = {};
+                // this.$refs.modelForm.navList = {}
+            })
+        }
+        
+    },
+    watch: {
+        modelForm: {
+            deep: true,
+            handler: function (val) {
+                console.log(val)
+            }
+        } 
+    }
+}
+</script>
+<style lang="scss" scoped>
+.renovation{
+    position: relative;
+    display: flex;
+}
+.model-list{
+    width: 120px;
+    height:auto;
+    padding: 10px;
+    background: #fff;
+    margin-top: 60px;
+    position: fixed;
+    z-index: 100;
+    box-shadow: 1px 1px 10px #999;
+    .classification-title{
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+    }
+    .model-item{
+        width: 100px;
+        height: 30px;
+        background: #eee;
+        margin-top: 10px;
+        line-height: 30px;
+        text-align: center;
+        color: #999;
+        &:hover{
+            border: 1px dashed #409EFF;
+            color: #409EFF;
+            cursor: move;
+        }
+    }
+    .ghost::after{
+        border:none;
+        height: 0;
+        content: '';
+    }
+}
+.show-content{
+    margin-left: 150px;
+    margin-top: 60px;
+}
+.ghost{
+    background: #fff;
+    height: 30px;
+    position: relative;
+    &::after{
+        content: '松开鼠标添加模块';
+        position: absolute;
+        background: #fff;
+        border: 1px dashed #409EFF;
+        color: #409EFF;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+        text-align: center;
+        line-height: 50px;
+    }
+}
+.btn-bar{
+    position: fixed;
+    width: 100%;
+    background:#fff;
+    height: 50px;
+    padding: 10px;
+    box-shadow: 1px 1px 10px #999;
+    z-index: 99;
+    top: 100px;
+}
+
+</style>