vue+element-ui 自定义装修前端解决方案，未完待续（下）

难点解决：
1、预览区拖动排序
找了比较多的插件，但是浏览器兼容上问题也是比较多。最终用了一下插件：
vue-smooth-dnd添加链接描述

// https://javascript.ctolib.com/kutlugsahin-vue-smooth-dnd.html#articleHeader15
import { Container, Draggable } from 'vue-smooth-dnd'
import { applyDrag, generateItems } from '@/utils/customHelper'

                          <Container group-name="1" 
                                     :get-child-payload="getChildPayload" 
                                     non-drag-area-selector=".not-drag-area"
                                     @drag-start="onDragStart"
                                     @drag-end="onDragEnd"
                                     @drop="onDrop('templateModulds', $event)">
                                    <Draggable v-for="(item , index) in templateModulds" 
                                               :key="item.id" 
                                               :id="item.id">
                                              <div class="draggable-item" 
                                                  :class="item.compActive ? 'active' : ''" 
                                                  @click="setModuleHandle(index)">
                                                  <keep-alive>
                                                    <component :is="getModulePreviewName(item.name)" 
                                                                ref="modulePreviewRef" 
                                                                :comKey="index"  
                                                                :datas="item.data">
                                                    </component>
                                                  </keep-alive>
                                                  <div class="item-mask"></div>
                                              </div>
                                    </Draggable>
                          </Container>

2、 点击保存时对所有表单校验
使用 Promise.all 校验多个表单