| 提交 | 用户 | age | ||
| 6c848f | 1 | let GridLayout = VueGridLayout.GridLayout; |
| X | 2 | let GridItem = VueGridLayout.GridItem; |
| 3 | let draggable = vuedraggable; | |
| 4 | let mouseXY = {"x": null, "y": null}; | |
| 5 | let DragPos = {"x": null, "y": null, "w": 1, "h": 1, "i": null}; | |
| 6 | ||
| 7 | let layoutsData = []; // 总布局数据 | |
| 8 | let layoutsDataBackup = []; // 总布局数据备份 | |
| 9 | let currentLayoutData = {data:[]}; // 当前编辑的布局 | |
| 10 | // let currentLayoutDataBackup = {data:[]}; // 当前编辑的布局数据备份 | |
| 11 | let currentNavListData = []; // 当前编辑的导航列表数据 | |
| 12 | // let currentNavListDataBackup = []; // 当前编辑的导航列表数据备份 | |
| 13 | let currentLayoutVue = {}; // 当前编辑的 grid布局 vue实例 | |
| 14 | let currentTableVue = {}; // 当前编辑的表格布局 vue实例 | |
| 15 | let currentIsTable = false; // 当前编辑的布局是否是表格 | |
| 16 | let navListData = []; // 导航列表数据 | |
| 17 | let navListDataBackup = []; // 导航列表数据备份 | |
| 18 | let tabLayoutIndex = 0; // 当前tab的layoutIndex | |
| 19 | let tabsIndex = []; // 当前tab的tabsIndex | |
| 20 | let currentIndexGroup = {}; // 当前tab的index组 | |
| 21 | ||
| 22 | // let isOpenLayer = false; // 是否打开了编辑层 | |
| 23 | ||
| 24 | let getDataCallback = function () {}; | |
| 25 | let getDataCallback2 = function () {}; | |
| 26 | let getCurrentIsTableCallback = function () {}; | |
| 27 | let getCurrentLayoutDataCallback = function () {}; | |
| 28 | let getCurrentTableDataCallback = function () {}; | |
| 29 | ||
| 30 | let openLayerCallback = function () {}; | |
| 31 | let closeLayerCallback = function () {}; | |
| 32 | ||
| 33 | ||
| 34 | // 不能拖拽的grid，只能查看 | |
| 35 | let gridList = Vue.component("grid-disable", { | |
| 36 | ||
| 37 | template: ` | |
| 38 | <div class="content-block vue-component-container grid-readonly" > | |
| 39 | <div class="grid-content" > | |
| 40 | <grid-layout :layout.sync="myLayout" | |
| 41 | :col-num="6" | |
| 42 | :row-height="40" | |
| 43 | :is-draggable="false" | |
| 44 | :is-resizable="false" | |
| 45 | :vertical-compact="true" | |
| 46 | :use-css-transforms="true" | |
| 47 | > | |
| 48 | <grid-item :key="item.i" v-for="(item,index) in myLayout" v-show="item.visible" | |
| 49 | :x="item.x" | |
| 50 | :y="item.y" | |
| 51 | :w="item.w" | |
| 52 | :h="item.h" | |
| 53 | :i="item.i" | |
| 54 | > | |
| 55 | <div class="grid-item-container"> | |
| 56 | <span class="text text-no-wrap" :title="item.name">{{ item.name }}</span> | |
| 57 | <!-- <a class="text text-no-wrap clear-a" :title="item.name">{{ item.name }}</a>--> | |
| 58 | <div v-if="!item.isCheckbox" class="input-container text-no-wrap">{{item.value}}</div> | |
| 59 | <div v-else class="flex"> | |
| 60 | <input type="checkbox" :checked="item.value" disabled> | |
| 61 | </div> | |
| 62 | </div> | |
| 63 | </grid-item> | |
| 64 | </grid-layout> | |
| 65 | </div></div> | |
| 66 | `, | |
| 67 | components: { | |
| 68 | GridLayout, | |
| 69 | GridItem | |
| 70 | }, | |
| 71 | props:['gridData','layoutId'], | |
| 72 | data() { | |
| 73 | return { | |
| 74 | myLayout: this.gridData, | |
| 75 | }; | |
| 76 | }, | |
| 77 | mounted() { | |
| 78 | }, | |
| 79 | beforeDestroy() { | |
| 80 | }, | |
| 81 | methods: { | |
| 82 | ||
| 83 | } | |
| 84 | }); | |
| 85 | ||
| 86 | // 可拖拽的grid，可以编辑 | |
| 87 | let grid = Vue.component("grid", { | |
| 88 | ||
| 89 | template: ` | |
| 90 | <div class="content-block vue-component-container" @dragover="handleGridDragOverAndEnter" @dragenter="handleGridDragOverAndEnter"> | |
| 91 | <div class="grid-content" id="grid-edit-content"> | |
| 92 | <grid-layout ref="gridLayout" :layout.sync="myLayout" | |
| 93 | :col-num="6" | |
| 94 | :row-height="40" | |
| 95 | :is-draggable="true" | |
| 96 | :is-resizable="true" | |
| 97 | :vertical-compact="true" | |
| 98 | :use-css-transforms="true" | |
| 99 | class="drag-in-component" | |
| 100 | > | |
| 101 | <grid-item :key="item.i" v-for="(item,index) in myLayout" v-show="item.visible" | |
| 102 | :x="item.x" | |
| 103 | :y="item.y" | |
| 104 | :w="item.w" | |
| 105 | :h="item.h" | |
| 106 | :i="item.i" | |
| 107 | @move="moveEvent" | |
| 108 | > | |
| 109 | <div class="grid-item-container"> | |
| 110 | <!-- <a class="text text-no-wrap clear-a" :title="item.name">{{ item.name }}</a>--> | |
| 111 | <span class="text text-no-wrap" :title="item.name">{{ item.name }}</span> | |
| 112 | <div v-if="!item.isCheckbox" class="input-container text-no-wrap">{{item.value}}</div> | |
| 113 | <div v-else class="flex"> | |
| 114 | <input type="checkbox" :checked="item.value" disabled> | |
| 115 | </div> | |
| 116 | </div> | |
| 117 | <i @click="removeItem(index,item.i)" class="iconfont icon-guanbi"></i> | |
| 118 | </grid-item> | |
| 119 | </grid-layout> | |
| 120 | </div></div> | |
| 121 | `, | |
| 122 | components: { | |
| 123 | GridLayout, | |
| 124 | GridItem | |
| 125 | }, | |
| 126 | data() { | |
| 127 | return { | |
| 128 | myLayout: [], | |
| 129 | layoutId: '', | |
| 130 | }; | |
| 131 | }, | |
| 132 | mounted() { | |
| 133 | document.addEventListener("dragover", function (e) { | |
| 134 | mouseXY.x = e.clientX; | |
| 135 | mouseXY.y = e.clientY; | |
| 136 | }, false); | |
| 137 | currentLayoutVue = this; | |
| 138 | getCurrentLayoutDataCallback = (BackupData,indexGroup)=>{ | |
| 139 | // console.log('当前备份布局数据',BackupData,indexGroup); | |
| 140 | this.myLayout = BackupData.data; | |
| 141 | this.layoutId = BackupData.layoutId; | |
| 142 | if (indexGroup){ | |
| 143 | let currentLayoutData = layoutsData[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex]; | |
| 144 | // console.log('---layoutsData[tabLayoutIndex][tabsIndex][groupIndex]: ',currentLayoutData); | |
| 145 | currentLayoutData.data.map((item,index)=>{ | |
| 146 | if (BackupData.data[index] && item.i === BackupData.data[index].i){ | |
| 147 | let backup = BackupData.data[index] //JSON.parse(JSON.stringify(BackupData.data[index])) | |
| 148 | item.visible = backup.visible; | |
| 149 | item.showOnGrid = backup.showOnGrid; | |
| 150 | item.h = backup.h; | |
| 151 | item.w = backup.w; | |
| 152 | item.x = backup.x; | |
| 153 | item.y = backup.y; | |
| 154 | // let backup = JSON.parse(JSON.stringify(BackupData.data[index])); | |
| 155 | // console.log('<<<backup',backup); | |
| 156 | // currentLayoutData[index] = backup; | |
| 157 | } | |
| 158 | ||
| 159 | }); | |
| 160 | ||
| 161 | let currentNavListData = navListData[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex]; | |
| 162 | // console.log('---navListData[tabLayoutIndex][tabsIndex][groupIndex]: ',currentNavListData); | |
| 163 | let currentNavListDataBackup = JSON.parse(JSON.stringify(navListDataBackup[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex])); | |
| 164 | currentNavListData.groupData.map((item,index)=>{ | |
| 165 | // console.log('&&&',item,index); | |
| 166 | if (currentNavListDataBackup.groupData[index] && item.i === currentNavListDataBackup.groupData[index].i){ | |
| 167 | // console.log('<<<currentNavListDataBackup.groupData[index]',currentNavListDataBackup.groupData[index]); | |
| 168 | item.visible = currentNavListDataBackup.groupData[index].visible; | |
| 169 | item.showOnGrid = currentNavListDataBackup.groupData[index].showOnGrid; | |
| 170 | } | |
| 171 | ||
| 172 | }); | |
| 173 | ||
| 174 | } | |
| 175 | ||
| 176 | } | |
| 177 | ||
| 178 | }, | |
| 179 | beforeDestroy() { | |
| 180 | }, | |
| 181 | methods: { | |
| 182 | drag: function (e) { | |
| 183 | ||
| 184 | }, | |
| 185 | dragend: function (e) { | |
| 186 | ||
| 187 | }, | |
| 188 | handleGridDragOverAndEnter: function(e) { | |
| 189 | if (!e.dataTransfer) return; | |
| 190 | e.preventDefault(); | |
| 191 | e.dataTransfer.dropEffect = 'move'; | |
| 192 | }, | |
| 193 | removeItem: function (idx,id) { | |
| 194 | // console.log(idx,id); | |
| 195 | // console.log('removeItem',this.myLayout); | |
| 196 | var idArr = id.split('_'); | |
| 197 | var groupIndex = idArr[2].split(',')[1]; | |
| 198 | this.myLayout[idx].visible = 0; | |
| 199 | this.myLayout[idx].showOnGrid = 1; | |
| 200 | // console.log('------removeItem后 layoutsData ',layoutsData ); | |
| 201 | // console.log(document.querySelector(`.nav-node[data-id="${id}"]`)); | |
| 202 | navListData[idArr[0]][idArr[1]][groupIndex].groupData[idArr[3]].visible = 0; | |
| 203 | navListData[idArr[0]][idArr[1]][groupIndex].groupData[idArr[3]].showOnGrid = 1; | |
| 204 | // console.log('------removeItem后 navListData ',navListData ); | |
| 205 | // 根据dataset.id，显示隐藏对应的nav-node | |
| 206 | document.querySelector(`.nav-node[data-id="${id}"]`).className = "nav-node vue-grid" | |
| 207 | }, | |
| 208 | moveEvent: throttle(function (i, newX, newY) { | |
| 209 | // console.log(i, newX, newY); | |
| 210 | },60) | |
| 211 | } | |
| 212 | }); | |
| 213 | ||
| 214 | ||
| 215 | // 整个布局 | |
| 216 | Vue.component("tab-cards", { | |
| 217 | ||
| 218 | template: ` | |
| 219 | <div v-if="!isOpenLayer"> | |
| 220 | <!-- <div v-for="(layoutItem,layoutIndex) in layout" :key="layoutIndex">{{layout.length}}--{{layoutIndex}}</div>--> | |
| 221 | <div v-for="(layoutItem,layoutIndex) in layout" :key="layoutIndex"> | |
| 222 | <div class="layui-tab layui-tab-card" lay-filter="filter-tab" > | |
| 223 | <ul class="layui-tab-title" v-if="layoutItem.length>1"> | |
| 224 | <li :class="tabIndex===0?'layui-this':''" v-for="(tabItem,tabIndex) in layoutItem" :key="tabIndex" :data-tab-layout-index="layoutIndex">{{tabItem[0].name}}</li> | |
| 225 | </ul> | |
| 226 | <div class="layui-tab-content"> | |
| 227 | <div class="layui-tab-item " :class="tabIndex===0?'layui-show':''" v-for="(tabItem,tabIndex) in layoutItem" :key="tabIndex"> | |
| 228 | <!-- {{layoutIndex}}--> | |
| 229 | <div> | |
| 230 | ||
| 231 | </div> | |
| 232 | ||
| 233 | <div class="vue-component-div layui-tab-vue" v-if="!item.grid" v-for="(item,index) in tabItem" :key="index"> | |
| 234 | <!-- {{item.layoutIndex}}--{{item.layoutId}}--> | |
| 235 | <div class="text-right relative"><button class="edit-layout-btn margin-r-10 hover-pointer" @click="layoutEditClickEvent" :data-layout-id="item.layoutId" >编辑</button></div> | |
| 236 | <div class=""> | |
| 237 | <grid-disable :grid-data="item.data" :layout-id="item.layoutId" ></grid-disable> | |
| 238 | </div> | |
| 239 | </div> | |
| 240 | <div class="vue-component-div layui-tab-vue" :class="item.grid?'vue-table-component':''" v-if="item.grid" v-for="(item,index) in tabItem" :key="index"> | |
| 241 | <!-- {{item.layoutIndex}}--{{item.layoutId}}--> | |
| 242 | <div class="text-right relative"><button class="edit-layout-btn margin-r-10 hover-pointer" @click="layoutEditClickEvent" :data-layout-id="item.layoutId" >编辑</button></div> | |
| 243 | <div class="table vue-disable-table"><vue-disable-table :table-data="item.data" :layout-id="item.layoutId" ></vue-disable-table></div> | |
| 244 | ||
| 245 | </div> | |
| 246 | ||
| 247 | </div> | |
| 248 | </div> | |
| 249 | </div> | |
| 250 | </div> | |
| 251 | </div> | |
| 252 | `, | |
| 253 | components: { | |
| 254 | grid | |
| 255 | }, | |
| 256 | data() { | |
| 257 | return { | |
| 258 | layout: [], | |
| 259 | isOpenLayer: false, | |
| 260 | }; | |
| 261 | }, | |
| 262 | mounted() { | |
| 263 | // console.log('tab-cards mounted ==== this',this); | |
| 264 | // console.log('tab-cards mounted',this.layout); | |
| 265 | getDataCallback = (data) => { | |
| 266 | // this.layout = data; | |
| 267 | this.$set(this, 'layout', data) | |
| 268 | // console.log('tab-cards mounted ==== getDataCallback',data); | |
| 269 | // console.table(JSON.parse(JSON.stringify(data[0][0][1].data))); | |
| 270 | // setTimeout(()=>{this.$forceUpdate();},10) | |
| 271 | this.isOpenLayer = true; | |
| 272 | ||
| 273 | setTimeout(()=> { | |
| 274 | ||
| 275 | this.isOpenLayer = false; | |
| 276 | },0) | |
| 277 | console.log('tab-cards mounted ==== getDataCallback',data); | |
| 278 | initDriver(); | |
| 279 | }; | |
| 280 | }, | |
| 281 | beforeDestroy() { | |
| 282 | }, | |
| 283 | methods: { | |
| 284 | layoutEditClickEvent: function (e) { | |
| 285 | let layoutId = e.currentTarget.dataset.layoutId; | |
| 286 | // console.log('layoutEditClickEvent click',layoutId); | |
| 287 | // console.log('layoutEditClickEvent click',e.currentTarget.dataset); | |
| 288 | ||
| 289 | let indexArr = layoutId.split('_'); | |
| 290 | let tabLayoutIndex = indexArr[0]; | |
| 291 | let tabsIndex = indexArr[1]; | |
| 292 | let groupIndex = indexArr[2].split(',')[1]; | |
| 293 | currentIndexGroup = { | |
| 294 | tabLayoutIndex: tabLayoutIndex, | |
| 295 | tabsIndex: tabsIndex, | |
| 296 | groupIndex: groupIndex | |
| 297 | }; | |
| 298 | ||
| 299 | currentNavListData = navListData[tabLayoutIndex][tabsIndex][groupIndex]; | |
| 300 | ||
| 301 | currentLayoutData = layoutsData[tabLayoutIndex][tabsIndex][groupIndex]; | |
| 302 | ||
| 303 | ||
| 304 | layer.open({ | |
| 305 | type: 1, | |
| 306 | title: ['编辑', 'font-size: 18px;text-align:center;'], | |
| 307 | move: false, | |
| 308 | content: $('.layer-edit-content'), | |
| 309 | ||
| 310 | success: function(layero, index){ | |
| 311 | ||
| 312 | layer.full(index); // 最大化 | |
| 313 | // openLayerCallback(); | |
| 314 | ||
| 315 | currentIsTable = currentLayoutData.grid || false; | |
| 316 | getCurrentIsTableCallback(currentIsTable); | |
| 317 | if (currentIsTable){ | |
| 318 | // console.log('是表格布局',currentIsTable); | |
| 319 | getCurrentTableDataCallback(currentLayoutData,currentNavListData); | |
| 320 | } else { | |
| 321 | createNavListDom(currentNavListData); | |
| 322 | // console.log('是网格布局',currentIsTable); | |
| 323 | // console.log('currentLayoutVue.myLayout open layer',currentLayoutVue.myLayout); | |
| 324 | getCurrentLayoutDataCallback(currentLayoutData); | |
| 325 | } | |
| 326 | ||
| 327 | }, | |
| 328 | cancel: (index, layero) =>{ | |
| 329 | // closeLayerCallback(); | |
| 330 | layer.close(index); | |
| 331 | ||
| 332 | // console.log('layer close'); | |
| 333 | // dragToVueGridStart(); | |
| 334 | ||
| 335 | } | |
| 336 | }); | |
| 337 | ||
| 338 | } | |
| 339 | } | |
| 340 | }); | |
| 341 | ||
| 342 | ||
| 343 | // 表格相关 | |
| 344 | let vueDraggableTable = Vue.component("vue-draggable-table", { | |
| 345 | ||
| 346 | template: ` | |
| 347 | <div class="flex relative"> | |
| 348 | <div class="nav-list nav-list-table"> | |
| 349 | <ul class="group"> | |
| 350 | <li class="group-node active"> | |
| 351 | <div class="group-node-title"><span class="group-node-name">{{navData.groupName}}</span></div> | |
| 352 | </li> | |
| 353 | <draggable id="nav-draggable" v-model="navData" class="list-group" draggable=".drag-table-item" :sort="false" @end="onEndNav" @start="onStartNav" :group="{ name: 'table', pull: 'clone', put: false }"> | |
| 354 | <li class="nav-node vue-grid drag-table-item" v-for="item in navData.groupData" :data-value="item.value" :data-id="item.layoutId +'_'+ item.id" :data-layout-ul-id="navData.layoutId" :data-layout-li-id="item.layoutId" :data-grid-index="item.gridIndex" :data-layout-index="item.layoutIndex" :data-name="item.name" :data-visible="item.showOnGrid" v-show="!item.showOnGrid"> | |
| 355 | <div class="nav-node-content text-no-wrap "><span class="nav-node-name ">{{item.name}}</span></div> | |
| 356 | </li> | |
| 357 | </draggable> | |
| 358 | </ul> | |
| 359 | ||
| 360 | </div> | |
| 361 | <div class="layout-container grid-edit-layer"> | |
| 362 | <div class="layui-tab layui-tab-card" lay-filter="filter-tab" > | |
| 363 | <ul class="layui-tab-title"> | |
| 364 | <!-- <li class="layui-this">标题</li>--> | |
| 365 | </ul> | |
| 366 | <div class="layui-tab-content"> | |
| 367 | <div class="layui-tab-item layui-show"> | |
| 368 | <div class="flex flex-end"> | |
| 369 | <div> | |
| 6cce1f | 370 | <button class="btn-group" id="resetCurrentTable">重置</button><!--恢复初始 --> |
| 6c848f | 371 | </div> |
| X | 372 | </div> |
| 373 | <div class="vue-component-div drag-in-component drag-in-component-table flex"> | |
| 374 | <draggable id="table-left-draggable" class="flex-1" drag-class="sortable-drag" ghost-class="ghost" @end="onPutTableLeft" :group="groupL" > | |
| 375 | </draggable> | |
| 376 | <table class="table table-striped tableDiv vue-component-container " :class="tablesData.length<1?'drag-in-table':''" id="table-edit-content" > | |
| 377 | <thead class="thead-dark"> | |
| 378 | <draggable id="table-tr-draggable" v-model="tablesData" draggable=".drag-table-item" tag="tr" drag-class="sortable-drag" ghost-class="ghost" :component-data="getComponentData()" @end="onEndTable" @start="onStartTable" :group="{ name: 'table'}" > | |
| 379 | <th v-for="(header,index) in tablesData" v-if="header.showOnGrid" :key="header.name" class="col-th drag-table-item text-no-wrap" scope="col"> | |
| 380 | {{ header.name }} | |
| 381 | <!-- -- {{ index}}--> | |
| 382 | <i class="th-icon" @click="deleteTCol(header,index)"></i> | |
| 383 | </th> | |
| 384 | </draggable> | |
| 385 | </thead> | |
| 386 | <tbody> | |
| 387 | <tr > | |
| 388 | <td v-for="item in tablesData" class="text-no-wrap" :key="item.name" v-if="item.showOnGrid"> | |
| 389 | ||
| 390 | <span v-if="!item.isCheckbox">{{item.value}}</span> | |
| 391 | <span v-else class="flex flex-center"> | |
| 392 | <input type="checkbox" :checked="item.value" disabled> | |
| 393 | </span> | |
| 394 | </td> | |
| 395 | </tr> | |
| 396 | </tbody> | |
| 397 | </table> | |
| 398 | ||
| 399 | <draggable id="table-right-draggable" class="flex-1" drag-class="sortable-drag" ghost-class="ghost" @end="onPutTableRight" :group="groupR"> | |
| 400 | </draggable> | |
| 401 | </div> | |
| 402 | ||
| 403 | ||
| 404 | </div> | |
| 405 | </div> | |
| 406 | </div> | |
| 407 | </div> | |
| 408 | </div> | |
| 409 | `, | |
| 410 | components: { | |
| 411 | draggable | |
| 412 | }, | |
| 413 | data() { | |
| 414 | return { | |
| 415 | headers: [], | |
| 416 | tablesData: [], | |
| 417 | originTablesData: [], // 原始表格数据 | |
| 418 | navData: [], | |
| 419 | // dragging: true | |
| 420 | // ghostClass: "sortable-ghost", // drop placeholder的css类名 | |
| 421 | // chosenClass: "sortable-chosen", // 被选中项的css 类名 | |
| 422 | dragClass: "sortable-drag", // 正在被拖拽中的css类名 | |
| 423 | groupL:{ | |
| 424 | name: 'table', | |
| 425 | put: true | |
| 426 | }, | |
| 427 | groupR:{ | |
| 428 | name: 'table', | |
| 429 | put: true | |
| 430 | }, | |
| 431 | }; | |
| 432 | }, | |
| 433 | mounted() { | |
| 434 | ||
| 435 | currentTableVue = this; | |
| 436 | // console.log("%c加载table表格布局", "color: blue"); | |
| 437 | ||
| 438 | getCurrentTableDataCallback = (data,navData,indexGroup)=>{ | |
| 439 | this.originTablesData = data.data; | |
| 440 | this.tablesData = data.data.filter(item => item.showOnGrid); | |
| 441 | // this.tablesData = data.data; | |
| 442 | this.navData = navData; | |
| 443 | ||
| 444 | // console.log('getCurrentTableDataCallback this.originTablesData'); | |
| 445 | // console.table(JSON.parse(JSON.stringify(this.originTablesData))); | |
| 446 | // | |
| 447 | // console.log('getCurrentTableDataCallback this.tablesData'); | |
| 448 | // console.table(JSON.parse(JSON.stringify(this.tablesData))); | |
| 449 | ||
| 450 | if (indexGroup){ | |
| 451 | // console.log('getCurrentLayoutDataCallback',indexGroup,data); | |
| 452 | ||
| 453 | let currentLayoutData = layoutsData[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex]; | |
| 454 | // console.log('---layoutsData[tabLayoutIndex][tabsIndex][groupIndex]: ',currentLayoutData); | |
| 455 | currentLayoutData.data.map((item,index)=>{ | |
| 456 | ||
| 457 | data.data.map((item2,index2)=>{ | |
| 458 | if (item2.i === item.i){ | |
| 459 | item.showOnGrid = item2.showOnGrid; | |
| 460 | item.visible = item2.visible; | |
| 461 | item.h = item2.h; | |
| 462 | item.w = item2.w; | |
| 463 | item.x = item2.x; | |
| 464 | item.y = item2.y; | |
| 465 | } | |
| 466 | if (item.layoutId === item2.layoutId){ | |
| 467 | item.sort = index2; | |
| 468 | } else { | |
| 469 | if (item.sort === undefined){ | |
| 470 | item.sort = 9999; | |
| 471 | } | |
| 472 | } | |
| 473 | }) | |
| 474 | ||
| 475 | }); | |
| 476 | console.log(); | |
| 477 | ||
| 478 | currentLayoutData.data.sort((a,b)=>{ | |
| 479 | return a.sort - b.sort; | |
| 480 | }); | |
| 481 | ||
| 482 | ||
| 483 | ||
| 484 | let currentNavListData = navListData[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex]; | |
| 485 | let currentNavListDataBackup = JSON.parse(JSON.stringify(navListDataBackup[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex])) | |
| 486 | currentNavListData.groupData.map((item,index)=>{ | |
| 487 | if (currentNavListDataBackup.groupData[index] && item.i === currentNavListDataBackup.groupData[index].i){ | |
| 488 | item.showOnGrid = currentNavListDataBackup.groupData[index].showOnGrid; | |
| 489 | item.visible = currentNavListDataBackup.groupData[index].visible; | |
| 490 | } | |
| 491 | ||
| 492 | }); | |
| 493 | ||
| 494 | } | |
| 495 | ||
| 496 | ||
| 497 | } | |
| 498 | ||
| 499 | ||
| 500 | ||
| 501 | }, | |
| 502 | methods: { | |
| 503 | handleChange() { | |
| 504 | console.log('changed'); | |
| 505 | }, | |
| 506 | inputChanged(value) { | |
| 507 | this.activeNames = value; | |
| 508 | console.log('inputChanged'); | |
| 509 | }, | |
| 510 | getComponentData() { | |
| 511 | return { | |
| 512 | on: { | |
| 513 | change: this.handleChange, | |
| 514 | input: this.inputChanged | |
| 515 | }, | |
| 516 | attrs:{ | |
| 517 | wrap: true | |
| 518 | }, | |
| 519 | props: { | |
| 520 | value: this.activeNames | |
| 521 | } | |
| 522 | }; | |
| 523 | }, | |
| 524 | onStartNav(evt){}, | |
| 525 | onEndNav(evt){ | |
| 526 | let itemEl = evt.item; // dragged HTMLElement | |
| 527 | evt.to; // target list | |
| 528 | evt.from; // previous list | |
| 529 | let oldIndex = evt.oldIndex; // element's old index within old parent | |
| 530 | let newIndex = evt.newIndex; // element's new index within new parent | |
| 531 | evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements | |
| 532 | evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements | |
| 533 | evt.clone // the clone element | |
| 534 | evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving | |
| 535 | ||
| 536 | ||
| 537 | let idArr = ['table-left-draggable','table-tr-draggable','table-right-draggable']; | |
| 538 | if (idArr.indexOf(evt.to.id) > -1){ | |
| 539 | // 从navList拖到表格,当前拖拽item的showOnGrid设为1，添加到tablesData | |
| 540 | let currentNavItem = this.navData.groupData[oldIndex]; | |
| 541 | this.$set(currentNavItem, 'showOnGrid', 1); | |
| 542 | this.$set(currentNavItem, 'visible', 0); | |
| 543 | if (evt.to.id === 'table-left-draggable'){ | |
| 544 | this.tablesData.unshift(currentNavItem); | |
| 545 | } else if (evt.to.id === 'table-tr-draggable'){ | |
| 546 | this.tablesData.splice(newIndex,0,currentNavItem); | |
| 547 | } else if (evt.to.id === 'table-right-draggable'){ | |
| 548 | this.tablesData.push(currentNavItem); | |
| 549 | } | |
| 550 | // 原始表格数据中对应的showOnGrid设为1 | |
| 551 | this.originTablesData.map((item,index)=> { | |
| 552 | if (item.layoutId === currentNavItem.layoutId){ | |
| 553 | item.showOnGrid = 1; | |
| 554 | item.visible = 0; | |
| 555 | } | |
| 556 | }); | |
| 557 | this.sortOriginTableData(); | |
| 558 | } | |
| 559 | ||
| 560 | // console.log(this.tablesData); | |
| 561 | ||
| 562 | ||
| 563 | }, | |
| 564 | ||
| 565 | onPutTableLeft(){ | |
| 566 | console.log('onPutTableLeft'); | |
| 567 | }, | |
| 568 | onPutTableRight(){ | |
| 569 | console.log('onPutTableRight'); | |
| 570 | }, | |
| 571 | // // 开始拖拽的时候 | |
| 572 | onStartTable: function (/**Event*/evt) { | |
| 573 | // console.log(evt); // element index within parent | |
| 574 | this.$set(this.groupL, 'put', false); | |
| 575 | this.$set(this.groupR, 'put', false); | |
| 576 | }, | |
| 577 | onEndTable(evt){ | |
| 578 | // console.log('evt',evt); | |
| 579 | // console.log('onEndTable',this.tablesData); | |
| 580 | this.$set(this.groupL, 'put', true); | |
| 581 | this.$set(this.groupR, 'put', true); | |
| 582 | this.sortOriginTableData(); | |
| 583 | }, | |
| 584 | deleteTCol(header,index){ | |
| 585 | // navData不能使用index | |
| 586 | this.tablesData[index].showOnGrid = 0; | |
| 587 | this.tablesData[index].visible = 1; | |
| 588 | this.tablesData.splice(index,1); | |
| 589 | var idArr = header.i.split('_'); | |
| 590 | ||
| 591 | this.$set(this.navData.groupData[idArr[3]], 'showOnGrid', 0); | |
| 592 | this.$set(this.navData.groupData[idArr[3]], 'visible', 1); | |
| 593 | this.sortOriginTableData(); | |
| 594 | }, | |
| 595 | sortOriginTableData() { | |
| 596 | // 根据tablesData的顺序，在originTablesData基础上重新排序 | |
| 597 | // console.log('sortOriginTableData','this.tablesData'); | |
| 598 | // console.table(JSON.parse(JSON.stringify(this.tablesData))); | |
| 599 | // console.log('sortOriginTableData 开始','this.originTablesData...'); | |
| 600 | // console.table(JSON.parse(JSON.stringify(this.originTablesData))); | |
| 601 | this.tablesData.map((item,index)=>{ | |
| 602 | this.originTablesData.map((item2,index2)=>{ | |
| 603 | if (item.i === item2.i){ | |
| 604 | item2.sort = index; | |
| 605 | } else{ | |
| 606 | if (item2.sort === undefined){ | |
| 607 | item2.sort = 9999; | |
| 608 | } | |
| 609 | } | |
| 610 | }) | |
| 611 | }); | |
| 612 | this.originTablesData.sort((a,b)=>{ | |
| 613 | // console.log('sortOriginTableData 开始 a.sort ,b.sort',a.sort ,b.sort); | |
| 614 | return a.sort - b.sort; | |
| 615 | }); | |
| 616 | // console.log('sortTableData 完成'); | |
| 617 | // console.table(JSON.parse(JSON.stringify(this.originTablesData))); | |
| 618 | ||
| 619 | ||
| 620 | } | |
| 621 | } | |
| 622 | }) | |
| 623 | ||
| 624 | // 不能拖动的表格 | |
| 625 | let vueDisableTable = Vue.component("vue-disable-table", { | |
| 626 | ||
| 627 | template: `<table class="table table-striped tableDiv vue-component-container"> | |
| 628 | <thead class="thead-dark"> | |
| 629 | <th v-for="(header,index) in tablesData" v-if="header.showOnGrid" :key="header.name" class="col-th drag-table-item text-no-wrap" scope="col"> | |
| 630 | {{ header.name }} | |
| 631 | </th> | |
| 632 | </thead> | |
| 633 | <tbody> | |
| 634 | <tr > | |
| 635 | <td v-for="item in tablesData" class="text-no-wrap" :key="item.name" v-if="item.showOnGrid"> | |
| 636 | <span v-if="!item.isCheckbox">{{item.value}}</span> | |
| 637 | <span v-else class="flex flex-center"> | |
| 638 | <input type="checkbox" :checked="item.value" disabled> | |
| 639 | </span> | |
| 640 | </td> | |
| 641 | </tr> | |
| 642 | </tbody> | |
| 643 | </table>`, | |
| 644 | props:['tableData','layoutId'], | |
| 645 | data() { | |
| 646 | return { | |
| 647 | headers: [], | |
| 648 | tablesData: this.tableData, | |
| 649 | // dragging: true | |
| 650 | }; | |
| 651 | }, | |
| 652 | mounted() {}, | |
| 653 | methods: { | |
| 654 | ||
| 655 | } | |
| 656 | }) | |
| 657 | ||
| 658 | ||
| 659 | let vueComp = new Vue({ | |
| 660 | el: '#app', | |
| 661 | data: { list: [],currentIsTable,}, //isOpenLayer:false | |
| 662 | mounted() { | |
| 663 | ||
| 664 | getCurrentIsTableCallback = (data)=>{ | |
| 665 | this.currentIsTable = data; | |
| 666 | // console.log('getCurrentIsTableCallback',data); | |
| 667 | } | |
| 668 | ||
| 669 | }, | |
| 670 | watch: { | |
| 671 | isOpenLayer: function (ol,ne) { | |
| 672 | console.log('watch isOpenLayer',ol,ne); | |
| 673 | } | |
| 674 | }, | |
| 675 | methods:{ | |
| 676 | } | |
| 677 | }); | |
| 678 | ||
| 679 | ||
| 680 | ||
| 681 | ||
| 682 | function dragToVueGridStart(e) { | |
| 683 | let targetParentEl = document.getElementById('grid-edit-content'); | |
| 684 | let parentRect = targetParentEl.getBoundingClientRect(); | |
| 685 | let mouseInGrid = false; | |
| 686 | if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) { | |
| 687 | mouseInGrid = true; | |
| 688 | } | |
| 689 | if (mouseInGrid === true && (currentLayoutVue.myLayout.findIndex(item => item.i === 'drop')) === -1) { | |
| 690 | // targetParentEl.style = "cursor: move"; | |
| 691 | currentLayoutVue.myLayout.push({ | |
| 692 | x: (currentLayoutVue.myLayout.length * 2) % (currentLayoutVue.colNum || 12), | |
| 693 | y: currentLayoutVue.myLayout.length + (currentLayoutVue.colNum || 12), // puts it at the bottom | |
| 694 | w: 1, | |
| 695 | h: 1, | |
| 696 | i: 'drop', | |
| 697 | }); | |
| 698 | } | |
| 699 | let index = currentLayoutVue.myLayout.findIndex(item => item.i === 'drop'); | |
| 700 | if (index !== -1) { | |
| 701 | try { | |
| 702 | // console.log('currentLayoutVue.$refs.gridLayout.$children',currentLayoutVue.$refs.gridLayout.$children[currentLayoutVue.myLayout.length].$refs.item); | |
| 703 | currentLayoutVue.$refs.gridLayout.$children[currentLayoutVue.myLayout.length].$refs.item.style.display = "none"; | |
| 704 | } catch { | |
| 705 | } | |
| 706 | let el = currentLayoutVue.$refs.gridLayout.$children[index]; | |
| 707 | el.dragging = {"top": mouseXY.y - parentRect.top, "left": mouseXY.x - parentRect.left}; | |
| 708 | let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left); | |
| 709 | ||
| 710 | if (mouseInGrid === true) { | |
| 711 | // console.log('dragToVueGridStart mouseInGrid === true'); | |
| 712 | currentLayoutVue.$refs.gridLayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 1, 1); | |
| 713 | DragPos.i = String(index); | |
| 714 | DragPos.x = currentLayoutVue.myLayout[index].x; | |
| 715 | DragPos.y = currentLayoutVue.myLayout[index].y; | |
| 716 | // console.log('dragToVueGridStart mouseInGrid === true',currentLayoutVue.myLayout); | |
| 717 | } | |
| 718 | if (mouseInGrid === false) { | |
| 719 | // console.log('dragToVueGridStart mouseInGrid === false'); | |
| 720 | currentLayoutVue.$refs.gridLayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1); | |
| 721 | // currentLayoutVue.myLayout = currentLayoutVue.myLayout.filter(obj => obj.i !== 'drop'); | |
| 722 | currentLayoutVue.myLayout.splice(index,1) | |
| 723 | ||
| 724 | } | |
| 725 | } | |
| 726 | } | |
| 727 | ||
| 728 | ||
| 729 | function dragToVueGridEnd(el,dataset){ | |
| 730 | // console.log('dragToVueGridEnd el',dataset); | |
| 731 | // console.log(el); | |
| 732 | el.className = 'nav-node vue-grid'; | |
| 733 | let parentRect = document.getElementById('grid-edit-content').getBoundingClientRect(); | |
| 734 | let mouseInGrid = false; | |
| 735 | if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) { | |
| 736 | mouseInGrid = true; | |
| 737 | } | |
| 738 | if (mouseInGrid === true) { | |
| 739 | ||
| 740 | ||
| 741 | el.className = "nav-node vue-grid isHide"; | |
| 742 | let idArr = dataset.id.split('_') | |
| 743 | let groupIndex = idArr[2].split(',')[1]; | |
| 744 | navListData[idArr[0]][idArr[1]][groupIndex].groupData[idArr[3]].visible = 1; | |
| 745 | navListData[idArr[0]][idArr[1]][groupIndex].groupData[idArr[3]].showOnGrid = 0; | |
| 746 | currentLayoutVue.myLayout[idArr[3]].visible = 1; | |
| 747 | currentLayoutVue.myLayout[idArr[3]].showOnGrid = 0; | |
| 748 | currentLayoutVue.myLayout[idArr[3]].x = DragPos.x; | |
| 749 | currentLayoutVue.myLayout[idArr[3]].y = DragPos.y; | |
| 750 | currentLayoutVue.myLayout[idArr[3]].w = 1; | |
| 751 | currentLayoutVue.myLayout[idArr[3]].h = 1; | |
| 752 | ||
| 753 | // console.log('currentLayoutVue.myLayout',currentLayoutVue.myLayout); | |
| 754 | currentLayoutVue.$refs.gridLayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 1, 1); | |
| 755 | // currentLayoutVue.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block"; | |
| 756 | try { | |
| 757 | ||
| 758 | // currentLayoutVue.$refs.gridLayout.$children[currentLayoutVue.myLayout.length].$refs.item.style.display = "block"; | |
| 759 | } catch { | |
| 760 | } | |
| 761 | } | |
| 762 | // console.log($('.layui-layer .vue-grid-item.vue-grid-placeholder')); | |
| 763 | setTimeout(()=>{ | |
| 764 | ||
| 765 | ||
| 766 | $('.layui-layer .vue-grid-item.vue-grid-placeholder').hide(); | |
| 767 | let index = currentLayoutVue.myLayout.findIndex(item => item.i === 'drop'); | |
| 768 | if (index !== -1) { | |
| 769 | console.log(index) | |
| 770 | currentLayoutVue.myLayout.splice(index,1) | |
| 771 | } | |
| 772 | // console.log('dragToVueGridEnd -s',currentLayoutVue.myLayout); | |
| 773 | ||
| 774 | },60) | |
| 775 | ||
| 776 | // console.log('dragToVueGridEnd',currentLayoutVue.myLayout); | |
| 777 | ||
| 778 | } | |
| 779 | ||
| 780 | ||
| 781 | // tab 切换事件 | |
| 782 | function tabsChangeEvent(){ | |
| 783 | var element = layui.element; | |
| 784 | element.on('tab(filter-tab)', function(data){ | |
| 785 | console.log(data.index); // 得到当前 tab 项的所在下标 | |
| 786 | tabLayoutIndex = $(this).attr('data-tab-layout-index'); | |
| 787 | tabsIndex[tabLayoutIndex] = data.index; | |
| 788 | // console.log('tabLayoutIndex',tabLayoutIndex); | |
| 789 | // console.log('tabsIndex',tabsIndex); | |
| 790 | // console.log('layoutsData',layoutsData[tabLayoutIndex]); | |
| 791 | }); | |
| 792 | } | |
