当前位置:网站首页>useCenterHook
useCenterHook
2022-04-23 06:50:00 【Time202051】
import { ref, reactive, computed } from ‘vue’;
import { useMenuStore } from ‘@/store/menu.js’;
import { useCenterStore } from ‘@/store/center.js’;
import { useFrameStore } from ‘@/store/frame.js’;
import { useRightNavStore } from ‘@/store/pinias.js’;
import uuid from ‘uuid/v1’;
export function useCenterHook() {
const state = reactive({
pageData: [], // All data of cloud configuration component
compsList: [], // The component of the current page rendering
bodyVueMap: new Map(), // Namely compsList All components in , Include components in container , Easy to find
nowPage: null, // Current page
echartMap: new Map(),
});
const setPageData = data => {
if (!data) return;
state.pageData = data;
};
const editPageData = (type, args) => {
switch (type) {
case ‘ADD’:
addPageSuccess(args);
break;
case ‘EDIT’: // No need
break;
case ‘DEL’:
delPageSuccess(args);
break;
case ‘GROUP’:
groupPageData();
break;
}
};
const addPageSuccess = args => {
const { id, type, comptsData } = args;
let pageObjt;
if (comptsData) {
pageObjt = comptsData;
} else {
pageObjt = {
id,
type,
pageCompts: [], // Single page : List of storage components , Multi page : Store every Tab A list of pages and their components
};
// Under the current page class
const menu = useMenuStore();
const temp = menu.pageList.find(item => item.id == id);
const { isShowMenuPage, themeProDialog } = temp;
if (type === 'opage') {
pageObjt = Object.assign({}, pageObjt, {
bgUrl: {},
table: [],
logicGroup: [],
isWinPage: isShowMenuPage,
themePro: themeProDialog,
});
} else {
// There is a default page
pageObjt.pageCompts.push({
id: uuid().replace(/-/g, ''),
name: ' Default page ',
bgUrl: {},
table: [],
logicGroup: [],
components: [],
});
}
}
state.pageData.push(pageObjt);
};
const delPageSuccess = id => {
const index = state.pageData.findIndex(item => item.id == id);
if (index != -1) {
state.pageData.splice(index, 1);
}
const menu = useMenuStore();
// What is deleted is the current page
if (menu.pageId == id) {
// Clear selected id
menu.setCurrentPageListItem(null);
}
};
const groupPageData = () => {
if (!state.nowPage) return;
const { type } = state.nowPage;
if (type == 'mpage') {
const center = useCenterStore();
const tempIndex = state.nowPage.pageCompts.findIndex(item => item.id == center.nowTabId);
if (tempIndex == -1) return;
state.nowPage.pageCompts[tempIndex].components = state.compsList;
} else if (type == 'opage') {
state.nowPage.pageCompts = state.compsList;
}
};
// Parameter page id And paginated tabId
const setCompsList = (pageId, nowTabId) => {
const tempI = state.pageData.findIndex(e => e.id == pageId);
if (tempI == -1) return;
const page = state.pageData[tempI];
if (!page) return;
if (page && page.pageCompts && page.pageCompts[0] && page.pageCompts[0].components) {
// Multi page
const tempIndex = page.pageCompts.findIndex(item => item.id == nowTabId);
if (tempIndex != -1) {
state.compsList = page.pageCompts[tempIndex].components;
}
} else {
// Single page
state.compsList = page.pageCompts || [];
}
// Sort compsList
sortZindex(state.compsList);
setBodyVueMap(state.compsList);
};
// Section zindex Reset
const intervalZindex = (data,startIndex,endIndex) => {
}
// Traversal reset zindex
const resetZindex = (data, startIndex) => {
data.forEach(item => {
startIndex--;
item.vueData[`${item.model}_${item.type}`].gZindex = startIndex;
if (item.type == 'group') {
item.vueData[`${item.model}_${item.type}`].children.forEach(e => {
startIndex--;
e.vueData[`${e.model}_${e.type}`].gZindex = startIndex;
});
}
});
};
// Sort
const sortZindex = data => {
console.log(' Initial components ', data);
data.sort((o1, o2) => {
let z1 = o1.vueData[`${o1.model}_${o1.type}`].gZindex;
let z2 = o2.vueData[`${o2.model}_${o2.type}`].gZindex;
console.log(' Sort ', o1, o2);
return z2 - z1;
});
};
// Roof placement , Bottom setting
const polesPositions = type => {
const rightNav = useRightNavStore();
const centerHook = useCenter();
const { state } = useCenter();
let i = type == 'zhiding' ? 1 : -1;
let l = type == 'zhiding' ? 0 : state.compsList.length - 1;
const tempEle = state.compsList[l];
const maxGZindx = state.compsList[l].vueData[`${tempEle.model}_${tempEle.type}`].gZindex;
const GZindxResult = maxGZindx > 0 ? maxGZindx + i : 0;
const tempItem = rightNav.layerCurrentItem;
rightNav.layerCurrentItem.vueData[`${tempItem.model}_${tempItem.type}`].gZindex = GZindxResult;
console.log(555, GZindxResult);
if (type == 'zhiding') {
centerHook.zindexBottomHandler(state.compsList, rightNav.layerChecked);
}
if (type == 'zhidi') {
centerHook.zindexTopHandler(state.compsList, rightNav.layerChecked);
}
};
// Bottom logic
const zindexBottomHandler = (data, id) => {
const tempI = data.findIndex(item => item.id == id);
if (tempI == -1) return;
zIndexBottom(data, tempI, data.length);
};
// Top logic
const zindexTopHandler = (data, id) => {
const tempI = data.findIndex(item => item.id == id);
if (tempI == -1) return;
zIndexTop(data, tempI, data.length);
};
// Bottom setting
const zIndexBottom = (arr, index, length) => {
if (index != 0) {
// First, judge how many positions the current element needs to move up , Move the bottom to the first position of the array
let moveNum = index - 0;
// The number of times the loop needs to be moved up one by one
for (var i = 0; i < moveNum; i++) {
swapArray(arr, index, index - 1);
index--;
}
}
};
// Roof placement
const zIndexTop = (arr, index, length) => {
if (index + 1 != length) {
// First, judge how many positions the current element needs to move up , Move the bottom to the first position of the array
let moveNum = length - 1 - index;
// The number of times the loop needs to be moved up one by one
for (var i = 0; i < moveNum; i++) {
swapArray(arr, index, index + 1);
index++;
}
}
};
const swapArray = (arr, index1, index2) => {
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
};
// Add components to the canvas
// item Current component type In order to determine whether it is a container , id It's a container id
const addCompsList = (item, hitCtn) => {
if (!item) return;
if (hitCtn && hitCtn.type == 'ctner') {
// Containers
addCtnrComps(hitCtn.id, item, hitCtn);
} else {
// state.compsList.push(item);
state.compsList.unshift(item);
}
};
// Add components to the inside of the container
const addCtnrComps = (id, data, hitCtn) => {
const tempI = state.compsList.findIndex(item => item.id == id);
if (tempI == -1 && state.compsList[tempI].ctnerId == 'ctner') return;
const compItem = state.compsList[tempI];
if (compItem.tabList) {
// Yes tabList
compItem.tabList.forEach((item, index) => {
if (item.id == data.tabID) {
item.components.push(data);
}
});
} else {
const { vueData, type, model } = hitCtn;
const { id, label } = vueData[`${model}_${type}`].nowTab;
const obj = {
components: [data],
id,
label,
};
compItem.tabList = [obj];
}
};
// Delete component
const delCompsList = (item, type, i) => {
if (Object.prototype.toString.call(item) != '[object object]') {
let index = state.compsList.findIndex(items => items.id === item);
if (index == -1) return;
state.compsList.splice(index, 1);
} else {
if (type == 'ctner') {
// Containers
let index = state.compsList.findIndex(items => items.id === item.depenID);
let tab = state.compsList[index].tabList.find(tab => tab.id === item.tabID);
tab.components.splice(i, 1);
} else {
let index = state.compsList.findIndex(items => items.id === item.id);
if (index == -1) return;
state.compsList.splice(index, 1);
}
}
};
const setBodyVueMap = data => {
if (Array.isArray(data)) {
// Array ( When initializing )
state.bodyVueMap.clear();
data.forEach(item => {
const { id, model, tabList, type, vueData } = item;
const prop = `${model}_${type}`;
state.bodyVueMap.set(id, item);
if (tabList && tabList.length) {
// Containers
vueData[prop].tabList = tabList;
vueData[prop].nowTab = tabList[0];
tabList.forEach(e => {
e.components.forEach(a => {
a.depenID = item.id; // Containers id
a.tabID = e.id; // Containers tabId
state.bodyVueMap.set(a.id, a);
});
});
}
});
}
if (Object.prototype.toString.call(data) == '[object Object]') {
// object ( When adding manually )
// Prevent duplication map And it won't repeat
if (state.bodyVueMap.get(data.id)) return;
state.bodyVueMap.set(data.id, data);
}
};
// Of all page component data , Namely pageData Of map Format
const allCompsMap = computed(() => {
const result = new Map();
state.pageData.forEach(item => {
result.set(item.id, item);
});
return result;
});
const setNowPage = data => {
state.nowPage = data;
};
const addComNowPage = data => {
state.nowPage.pageCompts.push({ ...data });
};
// initialization tabMenu data
const initTabs = type => {
const menu = useMenuStore();
const center = useCenterStore();
const pageId = menu.pageId;
const dataItem = allCompsMap.value.get(pageId); // Current item
if (type == 'mpage') {
// Multi page
const tabId = dataItem.pageCompts[0].id;
center.nowTabId = dataItem.pageCompts[0].id;
center.setPageTabs(dataItem.pageCompts);
setCompsList(pageId, tabId);
} else {
center.nowTabId = null;
center.setPageTabs([]);
setCompsList(pageId);
}
};
// Switch page logic
const changePage = newPage => {
if (!newPage || !newPage.id) return;
const menu = useMenuStore();
const id = newPage.id;
editPageData('GROUP');
initTabs(newPage.type);
setNowPage(allCompsMap.value.get(id)); // Current page data
};
// When initializing the page
const initPage = () => {
const menu = useMenuStore();
const pageId = menu.pageId;
const dataItem = allCompsMap.value.get(pageId); // Current item
setNowPage(dataItem);
initTabs(dataItem.type);
initPageData();
};
// Some data when initializing the page
const initPageData = () => {
console.log('initPageData');
};
// Add components to the page ( Contains the components ) hitCtn Container data
const addPageCompt = (compt, hitCtn) => {
addCompsList(compt, hitCtn); // Internal finish bodyVueMap Logic
};
return {
state,
setPageData,
setCompsList,
setBodyVueMap,
allCompsMap,
setNowPage,
addComNowPage,
changePage,
initPage,
editPageData,
delCompsList,
addCompsList,
addPageCompt,
sortZindex,
zindexBottomHandler,
zindexTopHandler,
zIndexBottom,
polesPositions,
resetZindex,
};
}
export const useCenter = (() => {
let centerHook;
return () => {
if (!centerHook) {
centerHook = useCenterHook();
return centerHook;
} else {
return centerHook;
}
};
})();
版权声明
本文为[Time202051]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230551593991.html
边栏推荐
猜你喜欢
el-table添加序号
VHDL arbitrary frequency divider (50% duty cycle)
Principle and characteristic analysis of triode
.Net Core 下使用 Quartz —— 【4】作业和触发器之作业属性和异常
Overview of node file system and buffer
Node的文件系统及Buffer概述
小程序学习笔记(一)
JS的解析与执行过程
FOC single resistance sampling position loop control servo motor
Detailed explanation and application of PN junction and diode principle
随机推荐
js根据名字将数组对象中名字相同的项组成一个相同的数组
邮箱字符串判断
ASP.NET CORE 配置选项(上篇)
颜色字符串转换
Analysis of fixed point PID code of FOC motor Library
低代码开发平台整理
ASP.NET CORE在类库项目中读取配置文件
C# Dapper 基本使用 增删改查事务等
ES6新增方法
自用学习笔记-connectingString配置
Unity3D对象池的理解与小例子
Redux overview
.Net Core 下使用 Quartz —— 【2】作业和触发器之初步了解作业
el-cascader和el-select点击别处让下拉框消失
Promise(一)
各进制数之间的互相转换
.Net Core3.1 使用 RazorEngine.NetCore 制作实体生成器 (MVC网页版)
leetcode刷题之整数加一
微信小程序之改变数组中某值,对象中某值的方法
WebSocket(基础)