当前位置:网站首页>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
边栏推荐
猜你喜欢
随机推荐
邮箱字符串判断
数据可视化进一步学习
关于软件的空间占用,安装目录
ASP.NET CORE在类库项目中读取配置文件
手动实现call,apply,bind函数
js根据名字将数组对象中名字相同的项组成一个相同的数组
FOC single resistance sampling position loop control servo motor
input文件上传
var、let、const之间的区别
.Net Core 下使用 Quartz —— 【1】快速开始
深入理解控制反转和依赖注入
NodeJS 模块之间的使用
el-cascader和el-select点击别处让下拉框消失
js查找字符串中出现了三次的字符
数据可视化百度地图进一步优化
el-date-picker限制选择范围,从当前时间到两个月前
1-2 JSX语法规则
.NET类型转移
MOS tube characteristics and conduction process
使用jsonwebtoken生成访问密钥