@中文描述:门户设计页多语言 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:门户设计页多语言 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent b2c1e98 commit c56936b07caa8c761e4098760ec8a49443552a35 20278 authored on 6 Apr 2023

Showing 4 changed files

Ignore Space Show notes View project/hivuiMain/router.js
// import Vue from 'vue' // import VueRouter from 'vue-router' import Layout from './views/layout/index.vue' //import Home from './views/Home.vue' import Design from './views/design/index.vue' import store from './store/index' // Vue.use(VueRouter) const router =new VueRouter({ //mode: 'history', mode: 'hash', // base: import.meta.env.VITE_BASE_URL, routes: [ { path: '/', name: 'home', meta: {}, component: Layout },{ path: '/design', name: 'design', meta: { title: Vue.prototype.$t('hivuiMain_des_title')}, component: Design },{ path: '/taskCenter', name: 'taskCenter', meta: {}, component: () => import( './views/taskCenter.vue') },{ path: '/About', name: 'About', meta: {}, component: () => import( './views/About.vue') }, { path: '/test', name: 'testApi', meta: {}, component: () => import( './views/test/index.vue') }, /* { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. // webpackChunkName: "about" component: () => import( './views/About.vue') }, / { path: '', name: 'home', meta: {}, component: Layout }, ] }) export default router; // import Vue from 'vue' // import VueRouter from 'vue-router' import Layout from './views/layout/index.vue' //import Home from './views/Home.vue' import Design from './views/design/index.vue' import store from './store/index' // Vue.use(VueRouter) const router =new VueRouter({ //mode: 'history', mode: 'hash', // base: import.meta.env.VITE_BASE_URL, routes: [ { path: '/', name: 'home', meta: {}, component: Layout },{ path: '/design', name: 'design', meta: { title: '门户自定义'}, component: Design },{ path: '/taskCenter', name: 'taskCenter', meta: {}, component: () => import( './views/taskCenter.vue') },{ path: '/About', name: 'About', meta: {}, component: () => import( './views/About.vue') }, { path: '/test', name: 'testApi', meta: {}, component: () => import( './views/test/index.vue') }, /* { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. // webpackChunkName: "about" component: () => import( './views/About.vue') }, / { path: '', name: 'home', meta: {}, component: Layout }, ] }) export default router;

Ignore Space Show notes View

project/hivuiMain/router.js

// import Vue from 'vue'
// import VueRouter from 'vue-router'
import Layout from './views/layout/index.vue'
//import Home from './views/Home.vue'
import Design from './views/design/index.vue'
import store from './store/index'

// Vue.use(VueRouter)

const router =new VueRouter({
  //mode: 'history',
  mode: 'hash',
  // base: import.meta.env.VITE_BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {},
      component: Layout
    },{
      path: '/design',
      name: 'design',
      meta: { title: Vue.prototype.$t('hivuiMain_des_title')},
      component: Design
    },{
      path: '/taskCenter',
      name: 'taskCenter',
      meta: {},
      component: () => import( './views/taskCenter.vue')
    },{
      path: '/About',
      name: 'About',
      meta: {},
      component: () => import( './views/About.vue')
    },
    {
      path: '/test',
      name: 'testApi',
      meta: {},
      component: () => import( './views/test/index.vue')
    },
    /*
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // webpackChunkName: "about" 
      component: () => import( './views/About.vue')
    },
    */ 
    {
      path: '*',
      name: 'home',
      meta: {},
      component: Layout
    },
  ]
}) 
export default router;

// Vue.use(VueRouter)

const router =new VueRouter({
  //mode: 'history',
  mode: 'hash',
  // base: import.meta.env.VITE_BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {},
      component: Layout
    },{
      path: '/design',
      name: 'design',
      meta: { title: '门户自定义'},
      component: Design
    },{
      path: '/taskCenter',
      name: 'taskCenter',
      meta: {},
      component: () => import( './views/taskCenter.vue')
    },{
      path: '/About',
      name: 'About',
      meta: {},
      component: () => import( './views/About.vue')
    },
    {
      path: '/test',
      name: 'testApi',
      meta: {},
      component: () => import( './views/test/index.vue')
    },
    /*
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // webpackChunkName: "about" 
      component: () => import( './views/About.vue')
    },
    */ 
    {
      path: '*',
      name: 'home',
      meta: {},
      component: Layout
    },
  ]
}) 
export default router;

Ignore Space Show notes View project/hivuiMain/views/design/columnsSelect.vue
<template> <Dialog ref="cmp-dd" :title="dialogTitle" :width="650" :height="465"> <div class="pl-design-row pl-row transfer-tip"> <div class="pl-design-col pl-col-11"> <div class="pl-field"> <div class="pl-field-lb">{{$t("hivuiMain_des_setHeight")}}</div> <div class="pl-field-val"> <input class="pl-field-text" type="text" v-model="panelHeight" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" /> </div> </div> </div> <div class="pl-design-col pl-col-2"></div> <div class="pl-design-col pl-col-11">    <i class="move iconfont icon-moveSort2"></i>{{$t("hivuiMain_des_dragOrderFlag")}} <!-- <i class="del iconfont icon-close"></i>删除标识 --> </div> </div> <div class="pl-design-row pl-row transfer-box"> <div class="pl-design-col pl-col-11"> <v-jstree ref="cmp-tree" :data="columns" show-checkbox multiple allow-batch collapse text-field-name="name" @item-click="itemClick"></v-jstree> </div> <!-- <div class="pl-design-col pl-col-11"> <div class="transfer-item" v-for="(item,index) in columns" @click="item.checked=!item.checked"> <i class="iconfont" :class="item.checked?'icon-checkbox':'icon-checkbox-empty'"></i> <span>{{item.title}}</span> </div> </div> --> <div class="pl-design-col pl-col-2"> <div><i class="iconfont icon-arrow-right-circle" @click="handleMoveRight"></i></div> <div><i class="iconfont icon-arrow-left-circle" @click="handleMoveLeft"></i></div> <div><i class="iconfont icon-arrow-rightMore-circle" @click="handleMoveAllRight"></i></div> <div><i class="iconfont icon-arrow-leftMore-circle" @click="handleMoveAllLeft"></i></div> </div> <div class="pl-design-col pl-col-11" ref="dom-selected"> <div class="transfer-item" v-for="(item,index) in selectList" :resId="item.resId"> <i class="move iconfont icon-moveSort2"></i> <i class="iconfont" :class="item.selected?'icon-checkbox':'icon-checkbox-empty'" @click="item.selected=!item.selected" ></i> <span @click="item.selected=!item.selected">{{item.name}}</span> <!-- <i class="del iconfont icon-close"></i> --> </div> </div> </div> <template slot="footer"> <button class="pl-btn pl-btn-round" @click="handleCancel">{{$t("hivuiMain_des_cancel")}}</button> <button v-if="!isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">{{$t("hivuiMain_des_ok")}}</button> <button v-if="isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleEdit">{{$t("hivuiMain_des_ok")}}</button> </template> </Dialog> </template> <script> import findIndex from 'lodash/findIndex'; import cloneDeep from 'lodash/cloneDeep'; import VJstree from 'vue-jstree' import Dialog from "@main/components/dialog"; import Sortable from 'sortablejs'; import {strFormat} from '@main/utils/index'; export default { props:['portalPanel'], components:{ Dialog,VJstree }, data(){ return { columns:[], defHeight:300, panelHeight:300,//面板高度 selectList:[],//存放选中的栏目列表 Sortable:null,//拖拽对象 /** * 提取字段 / fields:['resId','resKey','resUrl','parentId','type','isShow','name','selected'] } }, computed:{ // columns(){ // let data = cloneDeep(this.$store.getters.portalColumns); // return data; // }, isEdit(){ return !!this.portalPanel; }, dialogTitle(){ let title=''; if(this.portalPanel){ let paths = this.portalPanel.paths; title = strFormat("editSerialRowLayout",paths[0]+1,paths[1]+1,paths[2]+1); }else{ title = this.$t("hivuiMain_des_addColunms") } return title; } }, mounted(){ let me=this; me.Sortable&&me.Sortable.destroy(); me.$nextTick(r=>{ me.Sortable = new Sortable(me.$refs['dom-selected'], { group: "transfer-item", handle: '.move', // handle's class animation: 150, onEnd(evt){ // let itemEl = evt.item, // list = [...me.selectList]; // list[evt.oldIndex] = list.splice(evt.newIndex, 1, list[evt.oldIndex])[0]; // me.$set(me,'selectList',list); // console.log(me.selectList); } }) }); if(me.$store.getters.portalColumns.length==0){ me.$store.dispatch('portal/loadColumns').then((res)=>{ me.columns = cloneDeep(me.$store.getters.portalColumns); }); }else{ me.columns = cloneDeep(me.$store.getters.portalColumns); } }, beforeDestroy(){ this.Sortable&&this.Sortable.destroy(); }, methods:{ resetForm(){ let me=this; me.panelHeight = me.defHeight; me.Sortable=null; me.$set(me,'selectList',[]); }, setForm(data){ console.log("portal->columnsSelect.vue :" ,data); let me=this,columns = []; data.columns.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); tplObj.selected=false; columns.push(tplObj); }); me.panelHeight = data.height\|\|me.defHeight; me.$set(me,'selectList',columns); }, show(){ this.$refs['cmp-dd'].show(); this.$nextTick(()=>{ this.resetTreeSeleted(); }) }, hide(){ this.$refs['cmp-dd'].hide(); }, /* * 因为拖动后排序，所以要重新获取 / getSelectList(){ let me=this,arr=[]; let els = me.$refs['dom-selected'].children; for(let i=0,l=els.length;i<l;i++){ let resId = els[i].getAttribute('resId'); for(let n=0,k=me.selectList.length;n<k;n++){ if(me.selectList[n].resId==resId){ arr[i] = me.selectList.splice(n,1)[0]; break; } } } return arr; }, handleCancel(){ let me=this; me.$set(me,'selectList',[]); me.hide() }, handleOk(){ let me=this,data=[]; let list = me.getSelectList(); list.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); data.push(tplObj); }); let h = parseFloat(me.panelHeight); h = isNaN(h)?me.defHeight:h; me.$emit('onOk',data,h); me.resetForm(); me.hide(); }, handleEdit(){ let me=this,columns=[],newData={...this.portalPanel}; let list = me.getSelectList(); list.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); columns.push(tplObj); }); let h = parseFloat(me.panelHeight); h = isNaN(h)?me.defHeight:h; Object.assign(newData,{columns,height:h}); console.log("portal->columnsSelect.vue -> onUpdate:" ,newData); me.$emit('onUpdate',newData); me.resetForm(); me.hide(); }, resetTreeSeleted(){ let me=this,$tree = me.$refs['cmp-tree'],data=$tree.data; me.setNodesChecks(data,false); }, setNodesChecks(nodes,checked){ let dd = (nodes)=>{ nodes.map(item=>{ item.selected=checked; item.children&&dd(item.children); }); } dd(nodes); }, getTreeLeafs(){ let data=[]; let $tree = this.$refs['cmp-tree'],nodes=$tree.data; let dd = (nodes)=>{ nodes.map(item=>{ if(item.children.length==0){ item.selectList=false; data.push(item); } item.children&&dd(item.children); }); } dd(nodes); return data; }, getTreeChecked(){ let data=[]; let $tree = this.$refs['cmp-tree'],nodes=$tree.data; let dd = (nodes)=>{ nodes.map(item=>{ if(item.selected&&(!item.children\|\|item.children.length==0)){ data.push(item); } item.children&&dd(item.children); }); } dd(nodes); return data; }, handleMoveLeft(){ let me = this,chks=[],unChks = []; me.selectList.map((item,index)=>{ if(item.selected){ chks.push(item); }else{ unChks.push(item) } }); me.$set(me,'selectList',unChks); me.resetTreeSeleted(); }, handleMoveAllLeft(){ let me=this; me.$set(me,'selectList',[]); me.resetTreeSeleted(); }, handleMoveRight(){ let me=this, chks = me.getTreeChecked(), oldSelds = me.selectList, newSelds = []; chks.map(item=>{ let tplObj = {},hasItem = findIndex(oldSelds,o=>{ return o.resId == item.resId; }); if(hasItem==-1){ me.fields.map(key=>{ tplObj[key] = item[key]; }); tplObj.selected = false; newSelds.push(tplObj); } }); chks.length&&me.$set(me,'selectList',[...newSelds,...oldSelds]); me.resetTreeSeleted(); }, handleMoveAllRight(){ let me = this; me.$set(me,'selectList',me.getTreeLeafs()); me.resetTreeSeleted(); }, itemClick (node, item, e) { return; let index = findIndex(this.selectList,o =>o.id == node.id); if(index==-1){ if(node.model.selected){ this.selectList.push({ id:node.model.id, pid:node.model.pid, title:node.model.title, href:node.model.resUrl, loadType:node.model.loadType\|\|'iframe' }); }else{ this.selectList.splice(index,1); } }else{ this.selectList.splice(index,node.model.selected?0:1); } } } } </script> <style lang="less" scoped> .transfer-tip{ padding-bottom:5px; color:#999; } .transfer-box { >.pl-col-11{ border: 1px #ddd solid; height: 300px; padding:5px; overflow: auto; box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.05); } >.pl-col-2{ text-align: center; padding-top: 70px; .iconfont{ display: block; font-size:24px; color:#999; cursor: pointer; margin-bottom: 15px; &:hover{ color:#0066cc; } } } .transfer-item{ padding:5px; &:hover{ color:#0066cc; background: #efefef; } >.iconfont{ margin-right:5px; } >.move{ cursor: move; } >.del{ float:right; cursor: pointer; } } } </style> <template> <Dialog ref="cmp-dd" :title="dialogTitle" :width="650" :height="465"> <div class="pl-design-row pl-row transfer-tip"> <div class="pl-design-col pl-col-11"> <div class="pl-field"> <div class="pl-field-lb">{{"设置高度"}}</div> <div class="pl-field-val"> <input class="pl-field-text" type="text" v-model="panelHeight" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" /> </div> </div> </div> <div class="pl-design-col pl-col-2"></div> <div class="pl-design-col pl-col-11">    <i class="move iconfont icon-moveSort2"></i>{{"拖动排序标识"}} <!-- <i class="del iconfont icon-close"></i>删除标识 --> </div> </div> <div class="pl-design-row pl-row transfer-box"> <div class="pl-design-col pl-col-11"> <v-jstree ref="cmp-tree" :data="columns" show-checkbox multiple allow-batch collapse text-field-name="name" @item-click="itemClick"></v-jstree> </div> <!-- <div class="pl-design-col pl-col-11"> <div class="transfer-item" v-for="(item,index) in columns" @click="item.checked=!item.checked"> <i class="iconfont" :class="item.checked?'icon-checkbox':'icon-checkbox-empty'"></i> <span>{{item.title}}</span> </div> </div> --> <div class="pl-design-col pl-col-2"> <div><i class="iconfont icon-arrow-right-circle" @click="handleMoveRight"></i></div> <div><i class="iconfont icon-arrow-left-circle" @click="handleMoveLeft"></i></div> <div><i class="iconfont icon-arrow-rightMore-circle" @click="handleMoveAllRight"></i></div> <div><i class="iconfont icon-arrow-leftMore-circle" @click="handleMoveAllLeft"></i></div> </div> <div class="pl-design-col pl-col-11" ref="dom-selected"> <div class="transfer-item" v-for="(item,index) in selectList" :resId="item.resId"> <i class="move iconfont icon-moveSort2"></i> <i class="iconfont" :class="item.selected?'icon-checkbox':'icon-checkbox-empty'" @click="item.selected=!item.selected" ></i> <span @click="item.selected=!item.selected">{{item.name}}</span> <!-- <i class="del iconfont icon-close"></i> --> </div> </div> </div> <template slot="footer"> <button class="pl-btn pl-btn-round" @click="handleCancel">{{"取消"}}</button> <button v-if="!isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">{{"确定"}}</button> <button v-if="isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleEdit">{{"确定"}}</button> </template> </Dialog> </template> <script> import findIndex from 'lodash/findIndex'; import cloneDeep from 'lodash/cloneDeep'; import VJstree from 'vue-jstree' import Dialog from "@main/components/dialog"; import Sortable from 'sortablejs'; import {strFormat} from '@main/utils/index'; export default { props:['portalPanel'], components:{ Dialog,VJstree }, data(){ return { columns:[], defHeight:300, panelHeight:300,//面板高度 selectList:[],//存放选中的栏目列表 Sortable:null,//拖拽对象 /* * 提取字段 / fields:['resId','resKey','resUrl','parentId','type','isShow','name','selected'] } }, computed:{ // columns(){ // let data = cloneDeep(this.$store.getters.portalColumns); // return data; // }, isEdit(){ return !!this.portalPanel; }, dialogTitle(){ let title=''; if(this.portalPanel){ let paths = this.portalPanel.paths; title = strFormat("editSerialRowLayout",paths[0]+1,paths[1]+1,paths[2]+1); }else{ title = "添加门户栏目" } return title; } }, mounted(){ let me=this; me.Sortable&&me.Sortable.destroy(); me.$nextTick(r=>{ me.Sortable = new Sortable(me.$refs['dom-selected'], { group: "transfer-item", handle: '.move', // handle's class animation: 150, onEnd(evt){ // let itemEl = evt.item, // list = [...me.selectList]; // list[evt.oldIndex] = list.splice(evt.newIndex, 1, list[evt.oldIndex])[0]; // me.$set(me,'selectList',list); // console.log(me.selectList); } }) }); if(me.$store.getters.portalColumns.length==0){ me.$store.dispatch('portal/loadColumns').then((res)=>{ me.columns = cloneDeep(me.$store.getters.portalColumns); }); }else{ me.columns = cloneDeep(me.$store.getters.portalColumns); } }, beforeDestroy(){ this.Sortable&&this.Sortable.destroy(); }, methods:{ resetForm(){ let me=this; me.panelHeight = me.defHeight; me.Sortable=null; me.$set(me,'selectList',[]); }, setForm(data){ console.log("portal->columnsSelect.vue :" ,data); let me=this,columns = []; data.columns.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); tplObj.selected=false; columns.push(tplObj); }); me.panelHeight = data.height\|\|me.defHeight; me.$set(me,'selectList',columns); }, show(){ this.$refs['cmp-dd'].show(); this.$nextTick(()=>{ this.resetTreeSeleted(); }) }, hide(){ this.$refs['cmp-dd'].hide(); }, /* * 因为拖动后排序，所以要重新获取 */ getSelectList(){ let me=this,arr=[]; let els = me.$refs['dom-selected'].children; for(let i=0,l=els.length;i<l;i++){ let resId = els[i].getAttribute('resId'); for(let n=0,k=me.selectList.length;n<k;n++){ if(me.selectList[n].resId==resId){ arr[i] = me.selectList.splice(n,1)[0]; break; } } } return arr; }, handleCancel(){ let me=this; me.$set(me,'selectList',[]); me.hide() }, handleOk(){ let me=this,data=[]; let list = me.getSelectList(); list.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); data.push(tplObj); }); let h = parseFloat(me.panelHeight); h = isNaN(h)?me.defHeight:h; me.$emit('onOk',data,h); me.resetForm(); me.hide(); }, handleEdit(){ let me=this,columns=[],newData={...this.portalPanel}; let list = me.getSelectList(); list.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); columns.push(tplObj); }); let h = parseFloat(me.panelHeight); h = isNaN(h)?me.defHeight:h; Object.assign(newData,{columns,height:h}); console.log("portal->columnsSelect.vue -> onUpdate:" ,newData); me.$emit('onUpdate',newData); me.resetForm(); me.hide(); }, resetTreeSeleted(){ let me=this,$tree = me.$refs['cmp-tree'],data=$tree.data; me.setNodesChecks(data,false); }, setNodesChecks(nodes,checked){ let dd = (nodes)=>{ nodes.map(item=>{ item.selected=checked; item.children&&dd(item.children); }); } dd(nodes); }, getTreeLeafs(){ let data=[]; let $tree = this.$refs['cmp-tree'],nodes=$tree.data; let dd = (nodes)=>{ nodes.map(item=>{ if(item.children.length==0){ item.selectList=false; data.push(item); } item.children&&dd(item.children); }); } dd(nodes); return data; }, getTreeChecked(){ let data=[]; let $tree = this.$refs['cmp-tree'],nodes=$tree.data; let dd = (nodes)=>{ nodes.map(item=>{ if(item.selected&&(!item.children\|\|item.children.length==0)){ data.push(item); } item.children&&dd(item.children); }); } dd(nodes); return data; }, handleMoveLeft(){ let me = this,chks=[],unChks = []; me.selectList.map((item,index)=>{ if(item.selected){ chks.push(item); }else{ unChks.push(item) } }); me.$set(me,'selectList',unChks); me.resetTreeSeleted(); }, handleMoveAllLeft(){ let me=this; me.$set(me,'selectList',[]); me.resetTreeSeleted(); }, handleMoveRight(){ let me=this, chks = me.getTreeChecked(), oldSelds = me.selectList, newSelds = []; chks.map(item=>{ let tplObj = {},hasItem = findIndex(oldSelds,o=>{ return o.resId == item.resId; }); if(hasItem==-1){ me.fields.map(key=>{ tplObj[key] = item[key]; }); tplObj.selected = false; newSelds.push(tplObj); } }); chks.length&&me.$set(me,'selectList',[...newSelds,...oldSelds]); me.resetTreeSeleted(); }, handleMoveAllRight(){ let me = this; me.$set(me,'selectList',me.getTreeLeafs()); me.resetTreeSeleted(); }, itemClick (node, item, e) { return; let index = findIndex(this.selectList,o =>o.id == node.id); if(index==-1){ if(node.model.selected){ this.selectList.push({ id:node.model.id, pid:node.model.pid, title:node.model.title, href:node.model.resUrl, loadType:node.model.loadType\|\|'iframe' }); }else{ this.selectList.splice(index,1); } }else{ this.selectList.splice(index,node.model.selected?0:1); } } } } </script> <style lang="less" scoped> .transfer-tip{ padding-bottom:5px; color:#999; } .transfer-box { >.pl-col-11{ border: 1px #ddd solid; height: 300px; padding:5px; overflow: auto; box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.05); } >.pl-col-2{ text-align: center; padding-top: 70px; .iconfont{ display: block; font-size:24px; color:#999; cursor: pointer; margin-bottom: 15px; &:hover{ color:#0066cc; } } } .transfer-item{ padding:5px; &:hover{ color:#0066cc; background: #efefef; } >.iconfont{ margin-right:5px; } >.move{ cursor: move; } >.del{ float:right; cursor: pointer; } } } </style>

Ignore Space Show notes View

project/hivuiMain/views/design/columnsSelect.vue

<template>
    <Dialog ref="cmp-dd" :title="dialogTitle" :width="650" :height="465">
        <div class="pl-design-row pl-row transfer-tip">
            <div class="pl-design-col pl-col-11">                
                <div class="pl-field">
                    <div class="pl-field-lb">{{$t("hivuiMain_des_setHeight")}}</div>
                    <div class="pl-field-val">
                        <input class="pl-field-text" type="text" v-model="panelHeight"
                        onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                        />
                    </div>
                </div>
            </div>
            <div class="pl-design-col pl-col-2"></div>
            <div class="pl-design-col pl-col-11">
                &nbsp;&nbsp;
                <i class="move iconfont icon-moveSort2"></i>{{$t("hivuiMain_des_dragOrderFlag")}}
                
            </div>
        </div>
        <div class="pl-design-row pl-row transfer-box">            
            <div class="pl-design-col pl-col-11">
                <v-jstree ref="cmp-tree"
                :data="columns" show-checkbox multiple allow-batch collapse
                text-field-name="name"
                @item-click="itemClick"></v-jstree>
            </div>
            
            <div class="pl-design-col pl-col-2">
                <div><i class="iconfont icon-arrow-right-circle" @click="handleMoveRight"></i></div>
                <div><i class="iconfont icon-arrow-left-circle" @click="handleMoveLeft"></i></div>
                <div><i class="iconfont icon-arrow-rightMore-circle" @click="handleMoveAllRight"></i></div>
                <div><i class="iconfont icon-arrow-leftMore-circle" @click="handleMoveAllLeft"></i></div>
            </div>
            <div class="pl-design-col pl-col-11" ref="dom-selected">
                <div class="transfer-item" v-for="(item,index) in selectList" :resId="item.resId">
                    <i class="move iconfont icon-moveSort2"></i>
                    <i class="iconfont" :class="item.selected?'icon-checkbox':'icon-checkbox-empty'"
                         @click="item.selected=!item.selected"
                    ></i>
                    <span @click="item.selected=!item.selected">{{item.name}}</span>
                    
                </div>
            </div>
        </div>
        <template slot="footer">            
            <button class="pl-btn pl-btn-round" @click="handleCancel">{{$t("hivuiMain_des_cancel")}}</button>
            <button v-if="!isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">{{$t("hivuiMain_des_ok")}}</button>
            <button v-if="isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleEdit">{{$t("hivuiMain_des_ok")}}</button>
        </template>
    </Dialog>
</template>
<script>
import findIndex from 'lodash/findIndex';
import cloneDeep from 'lodash/cloneDeep';

import VJstree from 'vue-jstree'
import Dialog from "@main/components/dialog";
import Sortable from 'sortablejs';
import {strFormat} from '@main/utils/index';

export default {
    props:['portalPanel'],
    components:{
        Dialog,VJstree
    },
    data(){
        return {
            columns:[],
            defHeight:300,
            panelHeight:300,//面板高度
            selectList:[],//存放选中的栏目列表
            Sortable:null,//拖拽对象
            /**
             * 提取字段
             */
            fields:['resId','resKey','resUrl','parentId','type','isShow','name','selected']
        }
    },
    computed:{
        // columns(){
        //     let data = cloneDeep(this.$store.getters.portalColumns);
        //     return data;
        // },
        isEdit(){
            return !!this.portalPanel;
        },
        dialogTitle(){
            let title='';
            if(this.portalPanel){
                let paths =  this.portalPanel.paths;
                title = strFormat("editSerialRowLayout",paths[0]+1,paths[1]+1,paths[2]+1);
            }else{                
                title = this.$t("hivuiMain_des_addColunms")
            }
            return title;
        }
    },
    mounted(){
        let me=this;
        me.Sortable&&me.Sortable.destroy();
        me.$nextTick(r=>{
            me.Sortable = new Sortable(me.$refs['dom-selected'], {
                group: "transfer-item",
                handle: '.move', // handle's class
                animation: 150,
                onEnd(evt){
                    // let itemEl = evt.item,
                    //     list = [...me.selectList];
                    // list[evt.oldIndex] = list.splice(evt.newIndex, 1, list[evt.oldIndex])[0];
                    // me.$set(me,'selectList',list);
                    // console.log(me.selectList);
                }
            })
        });
        if(me.$store.getters.portalColumns.length==0){
            me.$store.dispatch('portal/loadColumns').then((res)=>{
                me.columns = cloneDeep(me.$store.getters.portalColumns);
            });
        }else{
            me.columns = cloneDeep(me.$store.getters.portalColumns);
        }
    },
    beforeDestroy(){
        this.Sortable&&this.Sortable.destroy();
    },
    methods:{ 
        resetForm(){
            let me=this;
            me.panelHeight = me.defHeight;
            me.Sortable=null;
            me.$set(me,'selectList',[]);
        },
        setForm(data){
            console.log("portal->columnsSelect.vue :" ,data);
            let me=this,columns = [];
            data.columns.map(item=>{
                let tplObj={};
                me.fields.map(key=>{
                    tplObj[key] = item[key];
                });
                tplObj.selected=false;
                columns.push(tplObj);
            });
            me.panelHeight = data.height||me.defHeight;
            me.$set(me,'selectList',columns);
            
        },
        show(){
            this.$refs['cmp-dd'].show();
            this.$nextTick(()=>{
                this.resetTreeSeleted();
            })
        },
        hide(){
            this.$refs['cmp-dd'].hide();
        }, 
        /**
         * 因为拖动后排序，所以要重新获取
         */
        getSelectList(){
            let me=this,arr=[];
            let els = me.$refs['dom-selected'].children;
            for(let i=0,l=els.length;i<l;i++){
                let resId = els[i].getAttribute('resId');
                for(let n=0,k=me.selectList.length;n<k;n++){
                    if(me.selectList[n].resId==resId){
                        arr[i] = me.selectList.splice(n,1)[0];
                        break;
                    }
                }
            }
            return arr;
        },
        handleCancel(){
            let me=this;
            me.$set(me,'selectList',[]);
            me.hide()
        },
        handleOk(){
            let me=this,data=[]; 
            let list = me.getSelectList();
            list.map(item=>{
                let tplObj={};
                me.fields.map(key=>{
                    tplObj[key] = item[key];
                });
                data.push(tplObj);
            });
            let h =  parseFloat(me.panelHeight);
            h = isNaN(h)?me.defHeight:h;
            me.$emit('onOk',data,h);
            me.resetForm();
            me.hide();
        },
        handleEdit(){
            let me=this,columns=[],newData={...this.portalPanel};
            let list = me.getSelectList();
            list.map(item=>{
                let tplObj={};
                me.fields.map(key=>{
                    tplObj[key] = item[key];
                });
                columns.push(tplObj);
            });

<template>
    <Dialog ref="cmp-dd" :title="dialogTitle" :width="650" :height="465">
        <div class="pl-design-row pl-row transfer-tip">
            <div class="pl-design-col pl-col-11">                
                <div class="pl-field">
                    <div class="pl-field-lb">{{"设置高度"}}</div>
                    <div class="pl-field-val">
                        <input class="pl-field-text" type="text" v-model="panelHeight"
                        onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                        />
                    </div>
                </div>
            </div>
            <div class="pl-design-col pl-col-2"></div>
            <div class="pl-design-col pl-col-11">
                &nbsp;&nbsp;
                <i class="move iconfont icon-moveSort2"></i>{{"拖动排序标识"}}
                
            </div>
        </div>
        <div class="pl-design-row pl-row transfer-box">            
            <div class="pl-design-col pl-col-11">
                <v-jstree ref="cmp-tree"
                :data="columns" show-checkbox multiple allow-batch collapse
                text-field-name="name"
                @item-click="itemClick"></v-jstree>
            </div>
            
            <div class="pl-design-col pl-col-2">
                <div><i class="iconfont icon-arrow-right-circle" @click="handleMoveRight"></i></div>
                <div><i class="iconfont icon-arrow-left-circle" @click="handleMoveLeft"></i></div>
                <div><i class="iconfont icon-arrow-rightMore-circle" @click="handleMoveAllRight"></i></div>
                <div><i class="iconfont icon-arrow-leftMore-circle" @click="handleMoveAllLeft"></i></div>
            </div>
            <div class="pl-design-col pl-col-11" ref="dom-selected">
                <div class="transfer-item" v-for="(item,index) in selectList" :resId="item.resId">
                    <i class="move iconfont icon-moveSort2"></i>
                    <i class="iconfont" :class="item.selected?'icon-checkbox':'icon-checkbox-empty'"
                         @click="item.selected=!item.selected"
                    ></i>
                    <span @click="item.selected=!item.selected">{{item.name}}</span>
                    
                </div>
            </div>
        </div>
        <template slot="footer">            
            <button class="pl-btn pl-btn-round" @click="handleCancel">{{"取消"}}</button>
            <button v-if="!isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">{{"确定"}}</button>
            <button v-if="isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleEdit">{{"确定"}}</button>
        </template>
    </Dialog>
</template>
<script>
import findIndex from 'lodash/findIndex';
import cloneDeep from 'lodash/cloneDeep';

import VJstree from 'vue-jstree'
import Dialog from "@main/components/dialog";
import Sortable from 'sortablejs';
import {strFormat} from '@main/utils/index';

export default {
    props:['portalPanel'],
    components:{
        Dialog,VJstree
    },
    data(){
        return {
            columns:[],
            defHeight:300,
            panelHeight:300,//面板高度
            selectList:[],//存放选中的栏目列表
            Sortable:null,//拖拽对象
            /**
             * 提取字段
             */
            fields:['resId','resKey','resUrl','parentId','type','isShow','name','selected']
        }
    },
    computed:{
        // columns(){
        //     let data = cloneDeep(this.$store.getters.portalColumns);
        //     return data;
        // },
        isEdit(){
            return !!this.portalPanel;
        },
        dialogTitle(){
            let title='';
            if(this.portalPanel){
                let paths =  this.portalPanel.paths;
                title = strFormat("editSerialRowLayout",paths[0]+1,paths[1]+1,paths[2]+1);
            }else{                
                title = "添加门户栏目"
            }
            return title;
        }
    },
    mounted(){
        let me=this;
        me.Sortable&&me.Sortable.destroy();
        me.$nextTick(r=>{
            me.Sortable = new Sortable(me.$refs['dom-selected'], {
                group: "transfer-item",
                handle: '.move', // handle's class
                animation: 150,
                onEnd(evt){
                    // let itemEl = evt.item,
                    //     list = [...me.selectList];
                    // list[evt.oldIndex] = list.splice(evt.newIndex, 1, list[evt.oldIndex])[0];
                    // me.$set(me,'selectList',list);
                    // console.log(me.selectList);
                }
            })
        });
        if(me.$store.getters.portalColumns.length==0){
            me.$store.dispatch('portal/loadColumns').then((res)=>{
                me.columns = cloneDeep(me.$store.getters.portalColumns);
            });
        }else{
            me.columns = cloneDeep(me.$store.getters.portalColumns);
        }
    },
    beforeDestroy(){
        this.Sortable&&this.Sortable.destroy();
    },
    methods:{ 
        resetForm(){
            let me=this;
            me.panelHeight = me.defHeight;
            me.Sortable=null;
            me.$set(me,'selectList',[]);
        },
        setForm(data){
            console.log("portal->columnsSelect.vue :" ,data);
            let me=this,columns = [];
            data.columns.map(item=>{
                let tplObj={};
                me.fields.map(key=>{
                    tplObj[key] = item[key];
                });
                tplObj.selected=false;
                columns.push(tplObj);
            });
            me.panelHeight = data.height||me.defHeight;
            me.$set(me,'selectList',columns);
            
        },
        show(){
            this.$refs['cmp-dd'].show();
            this.$nextTick(()=>{
                this.resetTreeSeleted();
            })
        },
        hide(){
            this.$refs['cmp-dd'].hide();
        }, 
        /**
         * 因为拖动后排序，所以要重新获取
         */
        getSelectList(){
            let me=this,arr=[];
            let els = me.$refs['dom-selected'].children;
            for(let i=0,l=els.length;i<l;i++){
                let resId = els[i].getAttribute('resId');
                for(let n=0,k=me.selectList.length;n<k;n++){
                    if(me.selectList[n].resId==resId){
                        arr[i] = me.selectList.splice(n,1)[0];
                        break;
                    }
                }
            }
            return arr;
        },
        handleCancel(){
            let me=this;
            me.$set(me,'selectList',[]);
            me.hide()
        },
        handleOk(){
            let me=this,data=[]; 
            let list = me.getSelectList();
            list.map(item=>{
                let tplObj={};
                me.fields.map(key=>{
                    tplObj[key] = item[key];
                });
                data.push(tplObj);
            });
            let h =  parseFloat(me.panelHeight);
            h = isNaN(h)?me.defHeight:h;
            me.$emit('onOk',data,h);
            me.resetForm();
            me.hide();
        },
        handleEdit(){
            let me=this,columns=[],newData={...this.portalPanel};
            let list = me.getSelectList();
            list.map(item=>{
                let tplObj={};
                me.fields.map(key=>{
                    tplObj[key] = item[key];
                });
                columns.push(tplObj);
            });

Ignore Space Show notes View project/hivuiMain/views/design/index.vue
<template> <div class="pl-design"> <div class="pl-design-head"> <div class="pl-fr tool"> <!-- <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleAddColumn">添加栏目</button> --> <!-- <button class="pl-btn pl-btn-round pl-btn-primary" @click="hackResetPortal=!hackResetPortal">恢复默认</button> --> <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleSave">{{$t("hivuiMain_des_save")}}</button> </div> <div class="pl-fl"></div> </div> <div class="pl-design-main"> <div class="pl-design-area" ref="dom-designArea"> <template v-if="hackResetPortal"> <Portal :ref="'cmp-desPortal'+index" :cols="item.layoutCols" :index="index" :key="index" v-for="(item,index) in layoutRows" @onDel="onDelPortal"></Portal> </template> </div> <!-- <Portal v-show="choosLayout" :cols="choosLayout" ref="dom-clonePortal"></Portal> --> </div> <div class="pl-design-aside"> <div class="pl-design-aside-head"> {{$t("hivuiMain_des_columnLayout")}} </div> <div class="pl-design-aside-body"> <div class="pl-design-aside-tabs" v-if="false"> <button class="pl-btn pl-btn-round pl-btn-primary">{{$t("hivuiMain_des_selectTemplate")}}</button> <button class="pl-btn pl-btn-round">{{$t("hivuiMain_des_addSingleLine")}}</button> </div> <div class="pl-design-aside-msg"> {{$t("hivuiMain_des_demoLayoutTip")}} </div> <div> <div class="pl-design-layoutDemo" ref="dom-layoutDome"> <div class="preview"> <input type="hidden" value="24"/> <div class="name"> {{$t("hivuiMain_des_row24")}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-24">24</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="12 12"/> <div class="name"> {{$t("hivuiMain_des_rowAvg2")}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-12">12</div> <div class="pl-design-col pl-col-12">12</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="8 16"/> <div class="name"> {{$t("hivuiMain_des_row8_16")}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-8">8</div> <div class="pl-design-col pl-col-16">16</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="16 8"/> <div class="name"> {{$t("hivuiMain_des_row8_16")}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-16">16</div> <div class="pl-design-col pl-col-8">8</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="8 8 8"/> <div class="name"> {{$t("hivuiMain_des_rowAvg3")}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-8">8</div> <div class="pl-design-col pl-col-8">8</div> <div class="pl-design-col pl-col-8">8</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="6 6 6 6"/> <div class="name"> {{$t("hivuiMain_des_rowAvg4")}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-6">6</div> <div class="pl-design-col pl-col-6">6</div> <div class="pl-design-col pl-col-6">6</div> <div class="pl-design-col pl-col-6">6</div> </div> </div> </div> <div class="pl-design-aside-msg"> {{$t("hivuiMain_des_customLayoutTip")}} </div> <div class="preview"> <div class="name"> {{$t("hivuiMain_des_custom")}} </div> <div class="view"> <input type="text" value="" :placeholder="$t('hivuiMain_des_spaceSeparate')"/> </div> </div> </div> </div> </div> </div> <Dialog ref="cmp-dd" :width="600"></Dialog> </div> </template> <script> import Dialog from "@main/components/dialog"; import Portal from "./portal"; import Sortable from 'sortablejs'; export default { components: { Dialog,Portal }, provide(){ let me=this; return { addPanel(position,data){ me.addPanel(position,data) }, editPanel(data){ me.editPanel(data) }, delPanel(data){ me.delPanel(data) }, getPanels(index){ return me.getRowPanels(index); }, updatePanelPosition(ops){ me.updatePanelPosition(ops) } } }, data(){ return { hackResetPortal:true,//ui补丁，用于拖拽强制重新渲染 layoutRows:this.$store.getters.portalList, choosLayout:null, SortableList:[] } }, watch:{ layoutRows(newVal,oldVal){ //强制刷新子组件portal this.resetPortal(); } }, mounted() { let me =this; me.$store.dispatch('portal/loadList').then(data=>{ me.layoutRows = data; });//工作台门户列表 new Sortable(this.$refs["dom-designArea"], { group: "portal-layout", handle: '.pl-design-portal-head', // handle's class animation: 150, onMove(evt, originalEvent) { return evt.to==evt.from; }, onEnd(evt){ let rows=[...me.layoutRows]; console.log('dom-designArea : ',me.layoutRows); rows[evt.oldIndex] = rows.splice(evt.newIndex, 1, rows[evt.oldIndex])[0]; me.$set(me,'layoutRows',rows); me.resetPortal(); me.$store.dispatch('portal/setList',rows); } }); new Sortable(this.$refs["dom-layoutDome"], { sort:false, chosenClass:"ghostClass", filter: ".pl-design-aside-msg", group: { name: 'portal-layout', pull: 'clone' // To clone: set pull to 'clone' }, animation: 150, // Element dragging ended onEnd: function (evt) { var itemEl = evt.item; // dragged HTMLElement if(evt.to!=evt.from) { let cols = itemEl.querySelector('input').value.split(' '); if(cols.length&&cols[0]!=""){ let hasInt = true,tmpArr = [...me.layoutRows]; console.log('dom-layoutDome : ',me.layoutRows); cols = cols.map((item,i)=>{ if(isNaN(parseInt(item))){ hasInt = false; } return item1 }); if(!hasInt) return;//如果自定义列不是整数 let portal = me.makePortalItem(cols,evt.newIndex); me.layoutRows.splice(evt.newIndex,0,portal); } itemEl.remove(); } me.choosLayout = null; }, onMove: function (evt, originalEvent) { if(evt.to==evt.from) return false; // Example: https://jsbin.com/nawahef/edit?js,output let cols = evt.dragged.querySelector('input').value.split(' '); let hasInt = true; cols = cols.map((item,i)=>{ if(isNaN(parseInt(item))){ hasInt = false; } return item1 }); if(cols.length&&hasInt) { me.choosLayout = cols; }else{ // return false; } }, }); }, methods: { getRowPanels(index){ return this.layoutRows[index].panels; }, updatePanelPosition(ops){ let me=this; let oldPanel = me.layoutRows[ops.oldRowIndex].panels[ops.oldColIndex].splice(ops.oldPanelIndex,1); let taget = me.layoutRows[ops.newRowIndex].panels[ops.newColIndex]; oldPanel[0].paths=[ops.newRowIndex,ops.newColIndex,ops.newPanelIndex]; taget.splice(ops.newPanelIndex,0,oldPanel[0]); me.resetPortal(); this.$store.dispatch('portal/setList',me.layoutRows); }, /** * 创建一个门户版块 / addPanel(position,data){ let rowIndex = position[0], colIndex=position[1], layoutRows = this.layoutRows, tagetPanels = layoutRows[rowIndex].panels[colIndex]; data.paths=[rowIndex,colIndex,tagetPanels.length] tagetPanels.push(data); // console.log('创建一个门户版块:',layoutRows); this.$set(this,'layoutRows',layoutRows); this.$store.dispatch('portal/setList',layoutRows); }, /* * 创建一个门户版块 / editPanel(data){ let layoutRows = this.layoutRows; let paths = data.paths; let rowIndex=paths[0],colIndex=paths[1],index=paths[2]; layoutRows[rowIndex].panels[colIndex].splice(index,1,data); this.$set(this,'layoutRows',layoutRows); this.$store.dispatch('portal/setList',layoutRows); }, delPanel(data){ let layoutRows = this.layoutRows; let paths = data.paths; let rowIndex=paths[0],colIndex=paths[1],index=paths[2]; layoutRows[rowIndex].panels[colIndex].splice(index,1); this.$set(this,'layoutRows',layoutRows); this.$store.dispatch('portal/setList',layoutRows); }, /* * vue 是vnode 节点，性能上最大化利用节点 * 因此，当行布局增加时，插入布局的地方是原来的旧节点，影响新局结构 * 然后布局的增加，只会在最后一个子组件进行创建，原来的是复用的 * 这样拖拽功能就留下之前布局的痕迹在，新的布局上 / resetPortal(){ this.hackResetPortal= false; this.$nextTick(() => { this.hackResetPortal= true; }); }, /* * 创建一个门户行 / makePortalItem(cols,rowIndex){ let me=this; let rowPanel = { layoutCols:cols,//布局列数、所占大小 panels:[]//当前行的所有门户面板,以下标对应列中，每个面板有多个栏目 }; cols.map((col,index)=>{ / demo : 模拟默认一个栏目 / // rowPanel.panels[index]=[{title:`栏目组 ${rowIndex}-${index}`}];//初始化对应列中的面板列表，面板中有多个栏目 rowPanel.panels[index]=[]; }); return rowPanel; }, handleAddColumn() { this.$refs["cmp-dd"].setContent('<h1></h1>'); this.$refs["cmp-dd"].show(); }, handleSave(){ let me =this; let portalList = me.$store.getters.portalList; let l = me.$message.loading({ message: me.$t("hivuiMain_des_saving"), position: 'center', hasMask: true }) me.$store.dispatch('portal/savePortal',portalList).then(r=>{ l.close(); me.$message.success(me.$t("hivuiMain_des_saveSuc")); }).catch(r=>{ l.close(); me.$message.error(me.$t("hivuiMain_des_saveError")); }); }, onDelPortal(index){ this.layoutRows.splice(index,1); } } }; </script> <template> <div class="pl-design"> <div class="pl-design-head"> <div class="pl-fr tool"> <!-- <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleAddColumn">添加栏目</button> --> <!-- <button class="pl-btn pl-btn-round pl-btn-primary" @click="hackResetPortal=!hackResetPortal">恢复默认</button> --> <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleSave">{{"保存"}}</button> </div> <div class="pl-fl"></div> </div> <div class="pl-design-main"> <div class="pl-design-area" ref="dom-designArea"> <template v-if="hackResetPortal"> <Portal :ref="'cmp-desPortal'+index" :cols="item.layoutCols" :index="index" :key="index" v-for="(item,index) in layoutRows" @onDel="onDelPortal"></Portal> </template> </div> <!-- <Portal v-show="choosLayout" :cols="choosLayout" ref="dom-clonePortal"></Portal> --> </div> <div class="pl-design-aside"> <div class="pl-design-aside-head"> {{"栏目布局"}} </div> <div class="pl-design-aside-body"> <div class="pl-design-aside-tabs" v-if="false"> <button class="pl-btn pl-btn-round pl-btn-primary">{{"选择模板"}}</button> <button class="pl-btn pl-btn-round">{{"添加单行"}}</button> </div> <div class="pl-design-aside-msg"> {{"选择以下模板，拖拽添加至内容区"}} </div> <div> <div class="pl-design-layoutDemo" ref="dom-layoutDome"> <div class="preview"> <input type="hidden" value="24"/> <div class="name"> {{"一行一栏"}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-24">24</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="12 12"/> <div class="name"> {{"两栏均分"}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-12">12</div> <div class="pl-design-col pl-col-12">12</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="8 16"/> <div class="name"> {{"一行两栏"}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-8">8</div> <div class="pl-design-col pl-col-16">16</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="16 8"/> <div class="name"> {{"一行两栏"}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-16">16</div> <div class="pl-design-col pl-col-8">8</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="8 8 8"/> <div class="name"> {{"三栏均分"}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-8">8</div> <div class="pl-design-col pl-col-8">8</div> <div class="pl-design-col pl-col-8">8</div> </div> </div> </div> <div class="preview"> <input type="hidden" value="6 6 6 6"/> <div class="name"> {{"一行四栏"}} </div> <div class="view"> <div class="pl-design-row pl-row"> <div class="pl-design-col pl-col-6">6</div> <div class="pl-design-col pl-col-6">6</div> <div class="pl-design-col pl-col-6">6</div> <div class="pl-design-col pl-col-6">6</div> </div> </div> </div> <div class="pl-design-aside-msg"> {{"自定义分栏数值，数字总和须为24，以空格分隔，点击任意位置确认"}} </div> <div class="preview"> <div class="name"> {{"自定义"}} </div> <div class="view"> <input type="text" value="" :placeholder="'数值以[空格]隔开'"/> </div> </div> </div> </div> </div> </div> <Dialog ref="cmp-dd" :width="600"></Dialog> </div> </template> <script> import Dialog from "@main/components/dialog"; import Portal from "./portal"; import Sortable from 'sortablejs'; export default { components: { Dialog,Portal }, provide(){ let me=this; return { addPanel(position,data){ me.addPanel(position,data) }, editPanel(data){ me.editPanel(data) }, delPanel(data){ me.delPanel(data) }, getPanels(index){ return me.getRowPanels(index); }, updatePanelPosition(ops){ me.updatePanelPosition(ops) } } }, data(){ return { hackResetPortal:true,//ui补丁，用于拖拽强制重新渲染 layoutRows:this.$store.getters.portalList, choosLayout:null, SortableList:[] } }, watch:{ layoutRows(newVal,oldVal){ //强制刷新子组件portal this.resetPortal(); } }, mounted() { let me =this; me.$store.dispatch('portal/loadList').then(data=>{ me.layoutRows = data; });//工作台门户列表 new Sortable(this.$refs["dom-designArea"], { group: "portal-layout", handle: '.pl-design-portal-head', // handle's class animation: 150, onMove(evt, originalEvent) { return evt.to==evt.from; }, onEnd(evt){ let rows=[...me.layoutRows]; console.log('dom-designArea : ',me.layoutRows); rows[evt.oldIndex] = rows.splice(evt.newIndex, 1, rows[evt.oldIndex])[0]; me.$set(me,'layoutRows',rows); me.resetPortal(); me.$store.dispatch('portal/setList',rows); } }); new Sortable(this.$refs["dom-layoutDome"], { sort:false, chosenClass:"ghostClass", filter: ".pl-design-aside-msg", group: { name: 'portal-layout', pull: 'clone' // To clone: set pull to 'clone' }, animation: 150, // Element dragging ended onEnd: function (evt) { var itemEl = evt.item; // dragged HTMLElement if(evt.to!=evt.from) { let cols = itemEl.querySelector('input').value.split(' '); if(cols.length&&cols[0]!=""){ let hasInt = true,tmpArr = [...me.layoutRows]; console.log('dom-layoutDome : ',me.layoutRows); cols = cols.map((item,i)=>{ if(isNaN(parseInt(item))){ hasInt = false; } return item1 }); if(!hasInt) return;//如果自定义列不是整数 let portal = me.makePortalItem(cols,evt.newIndex); me.layoutRows.splice(evt.newIndex,0,portal); } itemEl.remove(); } me.choosLayout = null; }, onMove: function (evt, originalEvent) { if(evt.to==evt.from) return false; // Example: https://jsbin.com/nawahef/edit?js,output let cols = evt.dragged.querySelector('input').value.split(' '); let hasInt = true; cols = cols.map((item,i)=>{ if(isNaN(parseInt(item))){ hasInt = false; } return item1 }); if(cols.length&&hasInt) { me.choosLayout = cols; }else{ // return false; } }, }); }, methods: { getRowPanels(index){ return this.layoutRows[index].panels; }, updatePanelPosition(ops){ let me=this; let oldPanel = me.layoutRows[ops.oldRowIndex].panels[ops.oldColIndex].splice(ops.oldPanelIndex,1); let taget = me.layoutRows[ops.newRowIndex].panels[ops.newColIndex]; oldPanel[0].paths=[ops.newRowIndex,ops.newColIndex,ops.newPanelIndex]; taget.splice(ops.newPanelIndex,0,oldPanel[0]); me.resetPortal(); this.$store.dispatch('portal/setList',me.layoutRows); }, /* * 创建一个门户版块 / addPanel(position,data){ let rowIndex = position[0], colIndex=position[1], layoutRows = this.layoutRows, tagetPanels = layoutRows[rowIndex].panels[colIndex]; data.paths=[rowIndex,colIndex,tagetPanels.length] tagetPanels.push(data); // console.log('创建一个门户版块:',layoutRows); this.$set(this,'layoutRows',layoutRows); this.$store.dispatch('portal/setList',layoutRows); }, /* * 创建一个门户版块 / editPanel(data){ let layoutRows = this.layoutRows; let paths = data.paths; let rowIndex=paths[0],colIndex=paths[1],index=paths[2]; layoutRows[rowIndex].panels[colIndex].splice(index,1,data); this.$set(this,'layoutRows',layoutRows); this.$store.dispatch('portal/setList',layoutRows); }, delPanel(data){ let layoutRows = this.layoutRows; let paths = data.paths; let rowIndex=paths[0],colIndex=paths[1],index=paths[2]; layoutRows[rowIndex].panels[colIndex].splice(index,1); this.$set(this,'layoutRows',layoutRows); this.$store.dispatch('portal/setList',layoutRows); }, /* * vue 是vnode 节点，性能上最大化利用节点 * 因此，当行布局增加时，插入布局的地方是原来的旧节点，影响新局结构 * 然后布局的增加，只会在最后一个子组件进行创建，原来的是复用的 * 这样拖拽功能就留下之前布局的痕迹在，新的布局上 / resetPortal(){ this.hackResetPortal= false; this.$nextTick(() => { this.hackResetPortal= true; }); }, /* * 创建一个门户行 / makePortalItem(cols,rowIndex){ let me=this; let rowPanel = { layoutCols:cols,//布局列数、所占大小 panels:[]//当前行的所有门户面板,以下标对应列中，每个面板有多个栏目 }; cols.map((col,index)=>{ / demo : 模拟默认一个栏目 */ // rowPanel.panels[index]=[{title:`栏目组 ${rowIndex}-${index}`}];//初始化对应列中的面板列表，面板中有多个栏目 rowPanel.panels[index]=[]; }); return rowPanel; }, handleAddColumn() { this.$refs["cmp-dd"].setContent('<h1></h1>'); this.$refs["cmp-dd"].show(); }, handleSave(){ let me =this; let portalList = me.$store.getters.portalList; let l = me.$message.loading({ message: "保存中...", position: 'center', hasMask: true }) me.$store.dispatch('portal/savePortal',portalList).then(r=>{ l.close(); me.$message.success('保存成功！'); }).catch(r=>{ l.close(); me.$message.error('保存出错！'); }); }, onDelPortal(index){ this.layoutRows.splice(index,1); } } }; </script>

Ignore Space Show notes View

project/hivuiMain/views/design/index.vue

<template>
    <div class="pl-design">
        <div class="pl-design-head">
            <div class="pl-fr tool">
                
                
                <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleSave">{{$t("hivuiMain_des_save")}}</button>
            </div>
            <div class="pl-fl"></div>
        </div>
        <div class="pl-design-main">
            <div class="pl-design-area" ref="dom-designArea">
                <template v-if="hackResetPortal">
                    <Portal :ref="'cmp-desPortal'+index" :cols="item.layoutCols" :index="index" :key="index" v-for="(item,index) in layoutRows" @onDel="onDelPortal"></Portal>                     
                </template>                
            </div>
            
        </div>
        <div class="pl-design-aside">
            <div class="pl-design-aside-head">
                {{$t("hivuiMain_des_columnLayout")}}
            </div>
            <div class="pl-design-aside-body">
                <div class="pl-design-aside-tabs" v-if="false">
                    <button class="pl-btn pl-btn-round pl-btn-primary">{{$t("hivuiMain_des_selectTemplate")}}</button>
                    <button class="pl-btn pl-btn-round">{{$t("hivuiMain_des_addSingleLine")}}</button>
                </div>
                <div class="pl-design-aside-msg">
                    *{{$t("hivuiMain_des_demoLayoutTip")}}
                </div>
                <div>
                    <div class="pl-design-layoutDemo" ref="dom-layoutDome">
                        <div class="preview">
                            <input type="hidden" value="24"/>
                            <div class="name">
                                {{$t("hivuiMain_des_row24")}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-24">24</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="12 12"/>
                            <div class="name">
                                {{$t("hivuiMain_des_rowAvg2")}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-12">12</div>
                                    <div class="pl-design-col pl-col-12">12</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="8 16"/>
                            <div class="name">
                                {{$t("hivuiMain_des_row8_16")}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-8">8</div>
                                    <div class="pl-design-col pl-col-16">16</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="16 8"/>
                            <div class="name">
                                {{$t("hivuiMain_des_row8_16")}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-16">16</div>
                                    <div class="pl-design-col pl-col-8">8</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="8 8 8"/>
                            <div class="name">
                                {{$t("hivuiMain_des_rowAvg3")}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-8">8</div>
                                    <div class="pl-design-col pl-col-8">8</div>
                                    <div class="pl-design-col pl-col-8">8</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="6 6 6 6"/>
                            <div class="name">
                                {{$t("hivuiMain_des_rowAvg4")}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-6">6</div>
                                    <div class="pl-design-col pl-col-6">6</div>
                                    <div class="pl-design-col pl-col-6">6</div>
                                    <div class="pl-design-col pl-col-6">6</div>
                                </div>
                            </div>
                        </div>
                        <div class="pl-design-aside-msg">
                        *{{$t("hivuiMain_des_customLayoutTip")}}
                        </div>
                        <div class="preview">
                            <div class="name">
                                {{$t("hivuiMain_des_custom")}}
                            </div>
                            <div class="view">
                                <input type="text" value="" :placeholder="$t('hivuiMain_des_spaceSeparate')"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <Dialog ref="cmp-dd" :width="600"></Dialog>
    </div>
</template>
<script> 
import Dialog from "@main/components/dialog";
import Portal from "./portal";
import Sortable from 'sortablejs';
export default {
    components: {
        Dialog,Portal
    },
    provide(){
        let me=this;
        return {
            addPanel(position,data){
                me.addPanel(position,data)
            },
            editPanel(data){
                me.editPanel(data)
            },
            delPanel(data){
                me.delPanel(data)
            },
            getPanels(index){
                return me.getRowPanels(index);
            },
            updatePanelPosition(ops){
                me.updatePanelPosition(ops)
            }
        }
    },
    data(){
        return {
            hackResetPortal:true,//ui补丁，用于拖拽强制重新渲染
            layoutRows:this.$store.getters.portalList,
            choosLayout:null,
            SortableList:[]
        }
    },
    watch:{
        layoutRows(newVal,oldVal){
            //强制刷新子组件portal
            this.resetPortal();
        }
    },
    mounted() {           
        let me =this;
        me.$store.dispatch('portal/loadList').then(data=>{
            me.layoutRows = data;
        });//工作台门户列表
        
        new Sortable(this.$refs["dom-designArea"], {
            group: "portal-layout",
            handle: '.pl-design-portal-head', // handle's class
            animation: 150,
            onMove(evt, originalEvent) {
                return evt.to==evt.from;
            },
            onEnd(evt){
                let rows=[...me.layoutRows];
                console.log('dom-designArea : ',me.layoutRows);
                rows[evt.oldIndex] = rows.splice(evt.newIndex, 1, rows[evt.oldIndex])[0];
                me.$set(me,'layoutRows',rows);
                me.resetPortal();
                me.$store.dispatch('portal/setList',rows);
            }
        });
        new Sortable(this.$refs["dom-layoutDome"], {
            sort:false,
            chosenClass:"ghostClass",
            filter: ".pl-design-aside-msg", 
            group: {
                name: 'portal-layout',
                pull: 'clone' // To clone: set pull to 'clone'
            },
            animation: 150,
            // Element dragging ended
            onEnd: function (evt) {
                var itemEl = evt.item;  // dragged HTMLElement
                if(evt.to!=evt.from) 
                {
                    let cols = itemEl.querySelector('input').value.split(' ');
                    if(cols.length&&cols[0]!=""){
                        let hasInt = true,tmpArr = [...me.layoutRows];
                        console.log('dom-layoutDome : ',me.layoutRows);
                        cols = cols.map((item,i)=>{
                            if(isNaN(parseInt(item))){
                                hasInt = false;
                            }
                            return item*1
                        });
                        if(!hasInt) return;//如果自定义列不是整数
                        let portal = me.makePortalItem(cols,evt.newIndex);
                        me.layoutRows.splice(evt.newIndex,0,portal);

}
                    itemEl.remove();                    
                }
                me.choosLayout = null;
            },
            onMove: function (evt, originalEvent) {                
                if(evt.to==evt.from) return false;
                // Example: https://jsbin.com/nawahef/edit?js,output
                let cols = evt.dragged.querySelector('input').value.split(' ');
                let hasInt = true;
                    cols = cols.map((item,i)=>{
                        if(isNaN(parseInt(item))){
                            hasInt = false;
                        }
                        return item*1
                    });
                if(cols.length&&hasInt) {
                    me.choosLayout = cols;
                }else{
                    // return false;
                }
            },
        });
    },
    methods: {
        getRowPanels(index){
            return this.layoutRows[index].panels;
        },
        updatePanelPosition(ops){
            let me=this;
            let oldPanel = me.layoutRows[ops.oldRowIndex].panels[ops.oldColIndex].splice(ops.oldPanelIndex,1);
            let taget = me.layoutRows[ops.newRowIndex].panels[ops.newColIndex];
            oldPanel[0].paths=[ops.newRowIndex,ops.newColIndex,ops.newPanelIndex];
            taget.splice(ops.newPanelIndex,0,oldPanel[0]);
            me.resetPortal();
            this.$store.dispatch('portal/setList',me.layoutRows);
        },
        /**
         * 创建一个门户版块
         */
        addPanel(position,data){
            let rowIndex = position[0],
                colIndex=position[1],
                layoutRows = this.layoutRows,
                tagetPanels = layoutRows[rowIndex].panels[colIndex];
            data.paths=[rowIndex,colIndex,tagetPanels.length]
            tagetPanels.push(data);
            // console.log('创建一个门户版块:',layoutRows);
            this.$set(this,'layoutRows',layoutRows);
            this.$store.dispatch('portal/setList',layoutRows);
        },
        /**
         * 创建一个门户版块
         */
        editPanel(data){
            let layoutRows = this.layoutRows;
            let paths = data.paths;
            let rowIndex=paths[0],colIndex=paths[1],index=paths[2];
            layoutRows[rowIndex].panels[colIndex].splice(index,1,data);
            this.$set(this,'layoutRows',layoutRows);
            this.$store.dispatch('portal/setList',layoutRows);
        },
        delPanel(data){
            let layoutRows = this.layoutRows;
            let paths = data.paths;
            let rowIndex=paths[0],colIndex=paths[1],index=paths[2];
            layoutRows[rowIndex].panels[colIndex].splice(index,1);
            this.$set(this,'layoutRows',layoutRows);
            this.$store.dispatch('portal/setList',layoutRows);
        },
        /**
         * vue 是vnode 节点，性能上最大化利用节点
         * 因此，当行布局增加时，插入布局的地方是原来的旧节点，影响新局结构
         * 然后 布局的增加，只会在最后一个子组件进行创建，原来的是复用的
         * 这样 拖拽功能就留下之前布局的痕迹在，新的布局上
         */
        resetPortal(){
            this.hackResetPortal= false;
            this.$nextTick(() => {
                this.hackResetPortal= true;
            });
        },
        /**
         * 创建一个门户行
         */
        makePortalItem(cols,rowIndex){
            let me=this; 
            let rowPanel = {
                layoutCols:cols,//布局列数、所占大小
                panels:[]//当前行的所有门户面板,以下标对应列中，每个面板有多个栏目
            };
            cols.map((col,index)=>{                
                /* 
                    demo : 
                    模拟默认一个栏目
                */
                // rowPanel.panels[index]=[{title:`栏目组 ${rowIndex}-${index}`}];//初始化对应列中的 面板列表，面板中有多个栏目
                rowPanel.panels[index]=[];
            });
            
            return rowPanel;
        },
        handleAddColumn() {
            this.$refs["cmp-dd"].setContent('<h1></h1>');
            this.$refs["cmp-dd"].show();
        },
        handleSave(){
            let me =this;
            let portalList = me.$store.getters.portalList; 
            let l = me.$message.loading({
                message: me.$t("hivuiMain_des_saving"),
                position: 'center',
                hasMask: true
            })
            me.$store.dispatch('portal/savePortal',portalList).then(r=>{
                 l.close();
                me.$message.success(me.$t("hivuiMain_des_saveSuc"));
            }).catch(r=>{
                l.close();
                me.$message.error(me.$t("hivuiMain_des_saveError"));
            });
        },
        onDelPortal(index){
            this.layoutRows.splice(index,1);
        }
    }
};
</script>

<template>
    <div class="pl-design">
        <div class="pl-design-head">
            <div class="pl-fr tool">
                
                
                <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleSave">{{"保存"}}</button>
            </div>
            <div class="pl-fl"></div>
        </div>
        <div class="pl-design-main">
            <div class="pl-design-area" ref="dom-designArea">
                <template v-if="hackResetPortal">
                    <Portal :ref="'cmp-desPortal'+index" :cols="item.layoutCols" :index="index" :key="index" v-for="(item,index) in layoutRows" @onDel="onDelPortal"></Portal>                     
                </template>                
            </div>
            
        </div>
        <div class="pl-design-aside">
            <div class="pl-design-aside-head">
                {{"栏目布局"}}
            </div>
            <div class="pl-design-aside-body">
                <div class="pl-design-aside-tabs" v-if="false">
                    <button class="pl-btn pl-btn-round pl-btn-primary">{{"选择模板"}}</button>
                    <button class="pl-btn pl-btn-round">{{"添加单行"}}</button>
                </div>
                <div class="pl-design-aside-msg">
                    *{{"选择以下模板，拖拽添加至内容区"}}
                </div>
                <div>
                    <div class="pl-design-layoutDemo" ref="dom-layoutDome">
                        <div class="preview">
                            <input type="hidden" value="24"/>
                            <div class="name">
                                {{"一行一栏"}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-24">24</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="12 12"/>
                            <div class="name">
                                {{"两栏均分"}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-12">12</div>
                                    <div class="pl-design-col pl-col-12">12</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="8 16"/>
                            <div class="name">
                                {{"一行两栏"}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-8">8</div>
                                    <div class="pl-design-col pl-col-16">16</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="16 8"/>
                            <div class="name">
                                {{"一行两栏"}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-16">16</div>
                                    <div class="pl-design-col pl-col-8">8</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="8 8 8"/>
                            <div class="name">
                                {{"三栏均分"}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-8">8</div>
                                    <div class="pl-design-col pl-col-8">8</div>
                                    <div class="pl-design-col pl-col-8">8</div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <input type="hidden" value="6 6 6 6"/>
                            <div class="name">
                                {{"一行四栏"}}
                            </div>
                            <div class="view">
                                <div class="pl-design-row pl-row">
                                    <div class="pl-design-col pl-col-6">6</div>
                                    <div class="pl-design-col pl-col-6">6</div>
                                    <div class="pl-design-col pl-col-6">6</div>
                                    <div class="pl-design-col pl-col-6">6</div>
                                </div>
                            </div>
                        </div>
                        <div class="pl-design-aside-msg">
                        *{{"自定义分栏数值，数字总和须为24，以空格分隔，点击任意位置确认"}}
                        </div>
                        <div class="preview">
                            <div class="name">
                                {{"自定义"}}
                            </div>
                            <div class="view">
                                <input type="text" value="" :placeholder="'数值以[空格]隔开'"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <Dialog ref="cmp-dd" :width="600"></Dialog>
    </div>
</template>
<script> 
import Dialog from "@main/components/dialog";
import Portal from "./portal";
import Sortable from 'sortablejs';
export default {
    components: {
        Dialog,Portal
    },
    provide(){
        let me=this;
        return {
            addPanel(position,data){
                me.addPanel(position,data)
            },
            editPanel(data){
                me.editPanel(data)
            },
            delPanel(data){
                me.delPanel(data)
            },
            getPanels(index){
                return me.getRowPanels(index);
            },
            updatePanelPosition(ops){
                me.updatePanelPosition(ops)
            }
        }
    },
    data(){
        return {
            hackResetPortal:true,//ui补丁，用于拖拽强制重新渲染
            layoutRows:this.$store.getters.portalList,
            choosLayout:null,
            SortableList:[]
        }
    },
    watch:{
        layoutRows(newVal,oldVal){
            //强制刷新子组件portal
            this.resetPortal();
        }
    },
    mounted() {           
        let me =this;
        me.$store.dispatch('portal/loadList').then(data=>{
            me.layoutRows = data;
        });//工作台门户列表
        
        new Sortable(this.$refs["dom-designArea"], {
            group: "portal-layout",
            handle: '.pl-design-portal-head', // handle's class
            animation: 150,
            onMove(evt, originalEvent) {
                return evt.to==evt.from;
            },
            onEnd(evt){
                let rows=[...me.layoutRows];
                console.log('dom-designArea : ',me.layoutRows);
                rows[evt.oldIndex] = rows.splice(evt.newIndex, 1, rows[evt.oldIndex])[0];
                me.$set(me,'layoutRows',rows);
                me.resetPortal();
                me.$store.dispatch('portal/setList',rows);
            }
        });
        new Sortable(this.$refs["dom-layoutDome"], {
            sort:false,
            chosenClass:"ghostClass",
            filter: ".pl-design-aside-msg", 
            group: {
                name: 'portal-layout',
                pull: 'clone' // To clone: set pull to 'clone'
            },
            animation: 150,
            // Element dragging ended
            onEnd: function (evt) {
                var itemEl = evt.item;  // dragged HTMLElement
                if(evt.to!=evt.from) 
                {
                    let cols = itemEl.querySelector('input').value.split(' ');
                    if(cols.length&&cols[0]!=""){
                        let hasInt = true,tmpArr = [...me.layoutRows];
                        console.log('dom-layoutDome : ',me.layoutRows);
                        cols = cols.map((item,i)=>{
                            if(isNaN(parseInt(item))){
                                hasInt = false;
                            }
                            return item*1
                        });
                        if(!hasInt) return;//如果自定义列不是整数
                        let portal = me.makePortalItem(cols,evt.newIndex);
                        me.layoutRows.splice(evt.newIndex,0,portal);

}
                    itemEl.remove();                    
                }
                me.choosLayout = null;
            },
            onMove: function (evt, originalEvent) {                
                if(evt.to==evt.from) return false;
                // Example: https://jsbin.com/nawahef/edit?js,output
                let cols = evt.dragged.querySelector('input').value.split(' ');
                let hasInt = true;
                    cols = cols.map((item,i)=>{
                        if(isNaN(parseInt(item))){
                            hasInt = false;
                        }
                        return item*1
                    });
                if(cols.length&&hasInt) {
                    me.choosLayout = cols;
                }else{
                    // return false;
                }
            },
        });
    },
    methods: {
        getRowPanels(index){
            return this.layoutRows[index].panels;
        },
        updatePanelPosition(ops){
            let me=this;
            let oldPanel = me.layoutRows[ops.oldRowIndex].panels[ops.oldColIndex].splice(ops.oldPanelIndex,1);
            let taget = me.layoutRows[ops.newRowIndex].panels[ops.newColIndex];
            oldPanel[0].paths=[ops.newRowIndex,ops.newColIndex,ops.newPanelIndex];
            taget.splice(ops.newPanelIndex,0,oldPanel[0]);
            me.resetPortal();
            this.$store.dispatch('portal/setList',me.layoutRows);
        },
        /**
         * 创建一个门户版块
         */
        addPanel(position,data){
            let rowIndex = position[0],
                colIndex=position[1],
                layoutRows = this.layoutRows,
                tagetPanels = layoutRows[rowIndex].panels[colIndex];
            data.paths=[rowIndex,colIndex,tagetPanels.length]
            tagetPanels.push(data);
            // console.log('创建一个门户版块:',layoutRows);
            this.$set(this,'layoutRows',layoutRows);
            this.$store.dispatch('portal/setList',layoutRows);
        },
        /**
         * 创建一个门户版块
         */
        editPanel(data){
            let layoutRows = this.layoutRows;
            let paths = data.paths;
            let rowIndex=paths[0],colIndex=paths[1],index=paths[2];
            layoutRows[rowIndex].panels[colIndex].splice(index,1,data);
            this.$set(this,'layoutRows',layoutRows);
            this.$store.dispatch('portal/setList',layoutRows);
        },
        delPanel(data){
            let layoutRows = this.layoutRows;
            let paths = data.paths;
            let rowIndex=paths[0],colIndex=paths[1],index=paths[2];
            layoutRows[rowIndex].panels[colIndex].splice(index,1);
            this.$set(this,'layoutRows',layoutRows);
            this.$store.dispatch('portal/setList',layoutRows);
        },
        /**
         * vue 是vnode 节点，性能上最大化利用节点
         * 因此，当行布局增加时，插入布局的地方是原来的旧节点，影响新局结构
         * 然后 布局的增加，只会在最后一个子组件进行创建，原来的是复用的
         * 这样 拖拽功能就留下之前布局的痕迹在，新的布局上
         */
        resetPortal(){
            this.hackResetPortal= false;
            this.$nextTick(() => {
                this.hackResetPortal= true;
            });
        },
        /**
         * 创建一个门户行
         */
        makePortalItem(cols,rowIndex){
            let me=this; 
            let rowPanel = {
                layoutCols:cols,//布局列数、所占大小
                panels:[]//当前行的所有门户面板,以下标对应列中，每个面板有多个栏目
            };
            cols.map((col,index)=>{                
                /* 
                    demo : 
                    模拟默认一个栏目
                */
                // rowPanel.panels[index]=[{title:`栏目组 ${rowIndex}-${index}`}];//初始化对应列中的 面板列表，面板中有多个栏目
                rowPanel.panels[index]=[];
            });
            
            return rowPanel;
        },
        handleAddColumn() {
            this.$refs["cmp-dd"].setContent('<h1></h1>');
            this.$refs["cmp-dd"].show();
        },
        handleSave(){
            let me =this;
            let portalList = me.$store.getters.portalList; 
            let l = me.$message.loading({
                message: "保存中...",
                position: 'center',
                hasMask: true
            })
            me.$store.dispatch('portal/savePortal',portalList).then(r=>{
                 l.close();
                me.$message.success('保存成功！');
            }).catch(r=>{
                l.close();
                me.$message.error('保存出错！');
            });
        },
        onDelPortal(index){
            this.layoutRows.splice(index,1);
        }
    }
};
</script>

Ignore Space Show notes View project/hivuiMain/views/design/portal.vue
<template> <div class="pl-design-portal"> <div class="pl-design-portal-head"> {{index+1 \| theRowLang($lang)}} <div class="pl-design-portal-tool"><i class="btn iconfont icon-delete" @click="handleDelPortal"></i></div> </div> <div class="pl-design-portal-body"> <PRow class="pl-design-row" :index="index"> <PCol v-for="(item,colIndex) in cols" :key="colIndex" :span="item" class="pl-design-col"> <div class="pl-design-col-inner" :index="colIndex"> <div v-if="panelsList[colIndex].length==0" class="nullData">{{$t("hivuiMain_des_dragInArea")}}</div> <div class="pl-portal-panel" v-for="(item1,index1) in panelsList[colIndex]" :key="index1"> <div class="pl-portal-panel-head"> <div class="tool"> <i class="iconfont icon-edit" @click="handleEidtColumns(item1,index,colIndex)"></i> <i class="iconfont icon-delete" @click="handleDelColumns(item1,index,colIndex)"></i> </div> <div class="tabs"> <ul> <li v-for="(item2,index2) in item1.columns" @click="handleTabClick">{{item2.name}}</li> </ul> </div> </div> </div> </div> <div class="pl-design-portal-add"> <div class="oper" @click="handleAddPortal(index,colIndex)"> <i class="iconfont icon-add"></i> <span> {{$t("hivuiMain_des_addColunms")}}{{item}}</span> </div> </div> </PCol> </PRow> </div> <ColumnsSelectDialog ref="cmp-columnsDD" :portalPanel="curPortalPanel" @onOk="onAddColumns" @onUpdate="onUpdateColumns"></ColumnsSelectDialog> </div> </template> <script> import Dialog from "@main/components/dialog"; import {PRow,PCol} from "@main/components/grid"; import ColumnsSelectDialog from "./columnsSelect"; import Sortable from 'sortablejs'; import {strFormat} from '@main/utils/index'; export default { components:{ Dialog,PRow,PCol,ColumnsSelectDialog }, inject: ['addPanel','editPanel','delPanel','getPanels','updatePanelPosition'], props:{ cols:{ type:Array, default:[24] }, index:{ type:Number } }, filters:{ theRowLang(value,$lang){ let formatStr = this.$t("hivuiMain_des_serialRowLayout"); let rex = new RegExp("\\{0\\}", "g"); return strFormat(formatStr,value); } }, data(){ let panelsList = this.getPanels(this.index); return { curPosition:[],//当前行、列位置 SortableList:[],//拖拽对象列表 curPortalPanel:null,//当前门户面板块 panelsList:panelsList,//面板列表 panelsItemEdit:false } }, mounted(){ this.createSortable(); }, beforeDestroy(){ this.removeAllSortable(); }, methods:{ removeAllSortable(){ let me=this; me.SortableList.map(item=>{ item.destroy(); }); me.$set(me,'SortableList',[]); }, /** * 创建门户面板块的拖拽 / createSortable(){ let me=this; let list = me.$el.getElementsByClassName('pl-design-col-inner'); let items = [...list]; items.map(item => { let obj= new Sortable(item, { group: "portal-Sortable", handle: '.pl-portal-panel-head', // handle's class animation: 150, onUpdate(evt) { console.log(' protal createSortable onUpdate'); }, onEnd(evt){ let oldRowIndex = me.index; let newRowIndex = evt.to.parentNode.parentNode.getAttribute('index'); let oldIndex = evt.from.getAttribute('index'); let newIndex = evt.to.getAttribute('index') ; console.log(`原是第${oldRowIndex}个布局中,第${oldIndex}列第${evt.oldIndex}个，移动到第${newRowIndex}个布局中,第${newIndex}列第${evt.newIndex}个`); //数据要更新 me.updatePanelPosition({ oldRowIndex:oldRowIndex, oldColIndex:oldIndex, oldPanelIndex:evt.oldIndex, newRowIndex:newRowIndex, newColIndex:newIndex, newPanelIndex:evt.newIndex, }); } }); me.SortableList.push(obj); }); // console.info('createSortable:',this.cols,me.SortableList) }, /* * 删除整行布局 / handleDelPortal(){ this.$emit('onDel',this.index); }, /* * 弹出栏目选择对话框 / handleAddPortal(row,col){ this.curPosition= [row,col]; this.curPortalPanel = null; this.$refs["cmp-columnsDD"].show(); }, handleEidtColumns(data,row,col){ this.curPosition= [row,col]; this.curPortalPanel = data; this.$refs["cmp-columnsDD"].setForm(data); this.$refs["cmp-columnsDD"].show(); }, handleDelColumns(data){ this.delPanel(data); }, /* * 添加指定列下的栏目门户面板 / onAddColumns(data=[],panelHeight=300){ if(data.length==0)return; this.addPanel(this.curPosition,{ height:panelHeight, columns:data }); // console.info('onColumnsSelected',data); }, onUpdateColumns(data={}){ this.editPanel(data); }, handleTabClick(evt){ let el = evt.target; let lis = el.parentNode.querySelectorAll('li'); lis.forEach(item=>{ item.className=''; }); el.className = 'seld' } } } </script> <template> <div class="pl-design-portal"> <div class="pl-design-portal-head"> {{index+1 \| theRowLang($lang)}} <div class="pl-design-portal-tool"><i class="btn iconfont icon-delete" @click="handleDelPortal"></i></div> </div> <div class="pl-design-portal-body"> <PRow class="pl-design-row" :index="index"> <PCol v-for="(item,colIndex) in cols" :key="colIndex" :span="item" class="pl-design-col"> <div class="pl-design-col-inner" :index="colIndex"> <div v-if="panelsList[colIndex].length==0" class="nullData">{{"拖入此区"}}</div> <div class="pl-portal-panel" v-for="(item1,index1) in panelsList[colIndex]" :key="index1"> <div class="pl-portal-panel-head"> <div class="tool"> <i class="iconfont icon-edit" @click="handleEidtColumns(item1,index,colIndex)"></i> <i class="iconfont icon-delete" @click="handleDelColumns(item1,index,colIndex)"></i> </div> <div class="tabs"> <ul> <li v-for="(item2,index2) in item1.columns" @click="handleTabClick">{{item2.name}}</li> </ul> </div> </div> </div> </div> <div class="pl-design-portal-add"> <div class="oper" @click="handleAddPortal(index,colIndex)"> <i class="iconfont icon-add"></i> <span> {{"添加门户栏目"}}{{item}}</span> </div> </div> </PCol> </PRow> </div> <ColumnsSelectDialog ref="cmp-columnsDD" :portalPanel="curPortalPanel" @onOk="onAddColumns" @onUpdate="onUpdateColumns"></ColumnsSelectDialog> </div> </template> <script> import Dialog from "@main/components/dialog"; import {PRow,PCol} from "@main/components/grid"; import ColumnsSelectDialog from "./columnsSelect"; import Sortable from 'sortablejs'; import {strFormat} from '@main/utils/index'; export default { components:{ Dialog,PRow,PCol,ColumnsSelectDialog }, inject: ['addPanel','editPanel','delPanel','getPanels','updatePanelPosition'], props:{ cols:{ type:Array, default:[24] }, index:{ type:Number } }, filters:{ theRowLang(value,$lang){ let formatStr = "第{0}行布局"; let rex = new RegExp("\\{0\\}", "g"); return strFormat(formatStr,value); } }, data(){ let panelsList = this.getPanels(this.index); return { curPosition:[],//当前行、列位置 SortableList:[],//拖拽对象列表 curPortalPanel:null,//当前门户面板块 panelsList:panelsList,//面板列表 panelsItemEdit:false } }, mounted(){ this.createSortable(); }, beforeDestroy(){ this.removeAllSortable(); }, methods:{ removeAllSortable(){ let me=this; me.SortableList.map(item=>{ item.destroy(); }); me.$set(me,'SortableList',[]); }, /* * 创建门户面板块的拖拽 / createSortable(){ let me=this; let list = me.$el.getElementsByClassName('pl-design-col-inner'); let items = [...list]; items.map(item => { let obj= new Sortable(item, { group: "portal-Sortable", handle: '.pl-portal-panel-head', // handle's class animation: 150, onUpdate(evt) { console.log(' protal createSortable onUpdate'); }, onEnd(evt){ let oldRowIndex = me.index; let newRowIndex = evt.to.parentNode.parentNode.getAttribute('index'); let oldIndex = evt.from.getAttribute('index'); let newIndex = evt.to.getAttribute('index') ; console.log(`原是第${oldRowIndex}个布局中,第${oldIndex}列第${evt.oldIndex}个，移动到第${newRowIndex}个布局中,第${newIndex}列第${evt.newIndex}个`); //数据要更新 me.updatePanelPosition({ oldRowIndex:oldRowIndex, oldColIndex:oldIndex, oldPanelIndex:evt.oldIndex, newRowIndex:newRowIndex, newColIndex:newIndex, newPanelIndex:evt.newIndex, }); } }); me.SortableList.push(obj); }); // console.info('createSortable:',this.cols,me.SortableList) }, /* * 删除整行布局 / handleDelPortal(){ this.$emit('onDel',this.index); }, /* * 弹出栏目选择对话框 / handleAddPortal(row,col){ this.curPosition= [row,col]; this.curPortalPanel = null; this.$refs["cmp-columnsDD"].show(); }, handleEidtColumns(data,row,col){ this.curPosition= [row,col]; this.curPortalPanel = data; this.$refs["cmp-columnsDD"].setForm(data); this.$refs["cmp-columnsDD"].show(); }, handleDelColumns(data){ this.delPanel(data); }, /* * 添加指定列下的栏目门户面板 */ onAddColumns(data=[],panelHeight=300){ if(data.length==0)return; this.addPanel(this.curPosition,{ height:panelHeight, columns:data }); // console.info('onColumnsSelected',data); }, onUpdateColumns(data={}){ this.editPanel(data); }, handleTabClick(evt){ let el = evt.target; let lis = el.parentNode.querySelectorAll('li'); lis.forEach(item=>{ item.className=''; }); el.className = 'seld' } } } </script>

Ignore Space Show notes View

project/hivuiMain/views/design/portal.vue

<template>
    <div class="pl-design-portal">
        <div class="pl-design-portal-head">
            {{index+1 | theRowLang($lang)}}
            <div class="pl-design-portal-tool"><i class="btn iconfont icon-delete" @click="handleDelPortal"></i></div>
        </div>
        <div class="pl-design-portal-body">
            <PRow class="pl-design-row" :index="index">
                <PCol v-for="(item,colIndex) in cols" :key="colIndex" :span="item" class="pl-design-col">
                    <div class="pl-design-col-inner" :index="colIndex">
                        <div v-if="panelsList[colIndex].length==0" class="nullData">{{$t("hivuiMain_des_dragInArea")}}</div>
                        <div class="pl-portal-panel" v-for="(item1,index1) in panelsList[colIndex]" :key="index1">
                            <div class="pl-portal-panel-head">
                                <div class="tool">
                                    <i class="iconfont icon-edit" @click="handleEidtColumns(item1,index,colIndex)"></i>
                                    <i class="iconfont icon-delete" @click="handleDelColumns(item1,index,colIndex)"></i>
                                </div>
                                <div class="tabs">
                                    <ul>
                                        <li v-for="(item2,index2) in item1.columns" @click="handleTabClick">{{item2.name}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>                    
                    <div class="pl-design-portal-add">
                        <div class="oper" @click="handleAddPortal(index,colIndex)">
                            <i class="iconfont icon-add"></i>
                            <span> {{$t("hivuiMain_des_addColunms")}}{{item}}</span>
                        </div>
                    </div>
                </PCol> 
            </PRow>
        </div>        
        <ColumnsSelectDialog ref="cmp-columnsDD" 
        :portalPanel="curPortalPanel"
        @onOk="onAddColumns" @onUpdate="onUpdateColumns"></ColumnsSelectDialog>
    </div>
</template>
<script>
import Dialog from "@main/components/dialog";
import {PRow,PCol} from "@main/components/grid";
import ColumnsSelectDialog from "./columnsSelect";
import Sortable from 'sortablejs';
import {strFormat} from '@main/utils/index';
export default {
    components:{
        Dialog,PRow,PCol,ColumnsSelectDialog
    },
    inject: ['addPanel','editPanel','delPanel','getPanels','updatePanelPosition'],
    props:{
        cols:{
            type:Array,
            default:[24]
        },
        index:{
            type:Number
        }
    },
    filters:{
        theRowLang(value,$lang){
            let formatStr = this.$t("hivuiMain_des_serialRowLayout");
            let rex = new RegExp("\\{0\\}", "g");            
            return strFormat(formatStr,value);
        }
    },
    data(){ 
        let panelsList = this.getPanels(this.index);
        return { 
            curPosition:[],//当前行、列 位置 
            SortableList:[],//拖拽对象列表
            curPortalPanel:null,//当前门户面板块
            panelsList:panelsList,//面板列表
            panelsItemEdit:false
        }
    },
    mounted(){
        this.createSortable();
    },
    beforeDestroy(){
        this.removeAllSortable();
    },
    methods:{
        removeAllSortable(){
            let me=this;
            me.SortableList.map(item=>{
                item.destroy();
            });
            me.$set(me,'SortableList',[]);
        },
        /**
         * 创建门户面板块的拖拽
         */
        createSortable(){
            let me=this;
            let list = me.$el.getElementsByClassName('pl-design-col-inner');
            let items = [...list];
            items.map(item => {
                let obj= new Sortable(item, {
                    group: "portal-Sortable",
                    handle: '.pl-portal-panel-head', // handle's class
                    animation: 150,
                    onUpdate(evt) { 
                        console.log(' protal createSortable onUpdate');
                    },
                    onEnd(evt){
                        let oldRowIndex = me.index;
                        let newRowIndex = evt.to.parentNode.parentNode.getAttribute('index');
                        let oldIndex = evt.from.getAttribute('index');
                        let newIndex = evt.to.getAttribute('index') ;
                        
                        console.log(`原是第${oldRowIndex}个布局中,第${oldIndex}列第${evt.oldIndex}个，移动到第${newRowIndex}个布局中,第${newIndex}列第${evt.newIndex}个`);
                        //数据要更新
                        me.updatePanelPosition({ 
                            oldRowIndex:oldRowIndex,
                            oldColIndex:oldIndex,
                            oldPanelIndex:evt.oldIndex,
                            newRowIndex:newRowIndex,
                            newColIndex:newIndex,
                            newPanelIndex:evt.newIndex,
                        });
                    }
                }); 
                me.SortableList.push(obj);
            });
            // console.info('createSortable:',this.cols,me.SortableList)
        },
        /**
         * 删除整行布局
         */
        handleDelPortal(){
            this.$emit('onDel',this.index);
        },
        /**
         * 弹出栏目选择对话框
         */
        handleAddPortal(row,col){
            this.curPosition= [row,col];
            this.curPortalPanel = null;
            this.$refs["cmp-columnsDD"].show();
        },
        handleEidtColumns(data,row,col){
            this.curPosition= [row,col];
            this.curPortalPanel = data;
            this.$refs["cmp-columnsDD"].setForm(data);
            this.$refs["cmp-columnsDD"].show();
        },
        handleDelColumns(data){
            this.delPanel(data);
        },
        /**
         * 添加指定列下的栏目门户面板
         */
        onAddColumns(data=[],panelHeight=300){
            if(data.length==0)return;
            this.addPanel(this.curPosition,{
                height:panelHeight,
                columns:data
            });
            // console.info('onColumnsSelected',data);
        },
        onUpdateColumns(data={}){
            this.editPanel(data);
        },
        handleTabClick(evt){
            let el = evt.target;
            let lis = el.parentNode.querySelectorAll('li');
            lis.forEach(item=>{
                item.className='';
            });
            el.className = 'seld'
        }
    }
}
</script>

<template>
    <div class="pl-design-portal">
        <div class="pl-design-portal-head">
            {{index+1 | theRowLang($lang)}}
            <div class="pl-design-portal-tool"><i class="btn iconfont icon-delete" @click="handleDelPortal"></i></div>
        </div>
        <div class="pl-design-portal-body">
            <PRow class="pl-design-row" :index="index">
                <PCol v-for="(item,colIndex) in cols" :key="colIndex" :span="item" class="pl-design-col">
                    <div class="pl-design-col-inner" :index="colIndex">
                        <div v-if="panelsList[colIndex].length==0" class="nullData">{{"拖入此区"}}</div>
                        <div class="pl-portal-panel" v-for="(item1,index1) in panelsList[colIndex]" :key="index1">
                            <div class="pl-portal-panel-head">
                                <div class="tool">
                                    <i class="iconfont icon-edit" @click="handleEidtColumns(item1,index,colIndex)"></i>
                                    <i class="iconfont icon-delete" @click="handleDelColumns(item1,index,colIndex)"></i>
                                </div>
                                <div class="tabs">
                                    <ul>
                                        <li v-for="(item2,index2) in item1.columns" @click="handleTabClick">{{item2.name}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>                    
                    <div class="pl-design-portal-add">
                        <div class="oper" @click="handleAddPortal(index,colIndex)">
                            <i class="iconfont icon-add"></i>
                            <span> {{"添加门户栏目"}}{{item}}</span>
                        </div>
                    </div>
                </PCol> 
            </PRow>
        </div>        
        <ColumnsSelectDialog ref="cmp-columnsDD" 
        :portalPanel="curPortalPanel"
        @onOk="onAddColumns" @onUpdate="onUpdateColumns"></ColumnsSelectDialog>
    </div>
</template>
<script>
import Dialog from "@main/components/dialog";
import {PRow,PCol} from "@main/components/grid";
import ColumnsSelectDialog from "./columnsSelect";
import Sortable from 'sortablejs';
import {strFormat} from '@main/utils/index';
export default {
    components:{
        Dialog,PRow,PCol,ColumnsSelectDialog
    },
    inject: ['addPanel','editPanel','delPanel','getPanels','updatePanelPosition'],
    props:{
        cols:{
            type:Array,
            default:[24]
        },
        index:{
            type:Number
        }
    },
    filters:{
        theRowLang(value,$lang){
            let formatStr = "第{0}行布局";
            let rex = new RegExp("\\{0\\}", "g");            
            return strFormat(formatStr,value);
        }
    },
    data(){ 
        let panelsList = this.getPanels(this.index);
        return { 
            curPosition:[],//当前行、列 位置 
            SortableList:[],//拖拽对象列表
            curPortalPanel:null,//当前门户面板块
            panelsList:panelsList,//面板列表
            panelsItemEdit:false
        }
    },
    mounted(){
        this.createSortable();
    },
    beforeDestroy(){
        this.removeAllSortable();
    },
    methods:{
        removeAllSortable(){
            let me=this;
            me.SortableList.map(item=>{
                item.destroy();
            });
            me.$set(me,'SortableList',[]);
        },
        /**
         * 创建门户面板块的拖拽
         */
        createSortable(){
            let me=this;
            let list = me.$el.getElementsByClassName('pl-design-col-inner');
            let items = [...list];
            items.map(item => {
                let obj= new Sortable(item, {
                    group: "portal-Sortable",
                    handle: '.pl-portal-panel-head', // handle's class
                    animation: 150,
                    onUpdate(evt) { 
                        console.log(' protal createSortable onUpdate');
                    },
                    onEnd(evt){
                        let oldRowIndex = me.index;
                        let newRowIndex = evt.to.parentNode.parentNode.getAttribute('index');
                        let oldIndex = evt.from.getAttribute('index');
                        let newIndex = evt.to.getAttribute('index') ;
                        
                        console.log(`原是第${oldRowIndex}个布局中,第${oldIndex}列第${evt.oldIndex}个，移动到第${newRowIndex}个布局中,第${newIndex}列第${evt.newIndex}个`);
                        //数据要更新
                        me.updatePanelPosition({ 
                            oldRowIndex:oldRowIndex,
                            oldColIndex:oldIndex,
                            oldPanelIndex:evt.oldIndex,
                            newRowIndex:newRowIndex,
                            newColIndex:newIndex,
                            newPanelIndex:evt.newIndex,
                        });
                    }
                }); 
                me.SortableList.push(obj);
            });
            // console.info('createSortable:',this.cols,me.SortableList)
        },
        /**
         * 删除整行布局
         */
        handleDelPortal(){
            this.$emit('onDel',this.index);
        },
        /**
         * 弹出栏目选择对话框
         */
        handleAddPortal(row,col){
            this.curPosition= [row,col];
            this.curPortalPanel = null;
            this.$refs["cmp-columnsDD"].show();
        },
        handleEidtColumns(data,row,col){
            this.curPosition= [row,col];
            this.curPortalPanel = data;
            this.$refs["cmp-columnsDD"].setForm(data);
            this.$refs["cmp-columnsDD"].show();
        },
        handleDelColumns(data){
            this.delPanel(data);
        },
        /**
         * 添加指定列下的栏目门户面板
         */
        onAddColumns(data=[],panelHeight=300){
            if(data.length==0)return;
            this.addPanel(this.curPosition,{
                height:panelHeight,
                columns:data
            });
            // console.info('onColumnsSelected',data);
        },
        onUpdateColumns(data={}){
            this.editPanel(data);
        },
        handleTabClick(evt){
            let el = evt.target;
            let lis = el.parentNode.querySelectorAll('li');
            lis.forEach(item=>{
                item.className='';
            });
            el.className = 'seld'
        }
    }
}
</script>

Show line notes below