- 
-
,
- node
- );
+ if(state){
+ return createPortal(
+ {props.children}
-
+
+
,
+ node
+ );
+ }else{
+ return null
+ }
+
+
}
\ No newline at end of file
diff --git a/src/store/defaultStore.js b/src/store/defaultStore.js
index df87ea3..b686b3d 100644
--- a/src/store/defaultStore.js
+++ b/src/store/defaultStore.js
@@ -46,6 +46,12 @@ class DefaultStore {
styleTimeout = null;
// 输入内容
inputValue = null;
+ // 模板列表
+ templateList = null;
+ // 模板状态
+ templateAddModalState = false;
+ // 模板内容
+ templateContainer = null;
constructor() {
@@ -63,6 +69,9 @@ class DefaultStore {
styleReal: observable,
styleTimeout: observable,
inputValue:observable,
+ templateList:observable,
+ templateAddModalState: observable,
+ templateContainer: observable,
containerList: computed,
@@ -74,7 +83,12 @@ class DefaultStore {
getContainerList: action,
createConatiner: action,
updateContainer: action,
- deleteContainer: action
+ deleteContainer: action,
+ getTemplateList: action,
+ setInputValue: action,
+ setTemplateAddModalState: action,
+ setTemplateContainer:action,
+ createTemplateConatiner: action,
});
}
@@ -113,6 +127,13 @@ class DefaultStore {
setInputValue(value) {
this.inputValue = value
}
+ // 设置添加模板状态
+ setTemplateAddModalState(state){
+ this.templateAddModalState = state
+ }
+ setTemplateContainer(container){
+ this.templateContainer = container
+ }
// 获取内容列表
async getContainerList(menuId) {
@@ -127,16 +148,35 @@ class DefaultStore {
})
})
}
-
+ // 获取模板
+ async getTemplateList(){
+ const data = await api.getContainerList({menuId:0})
+ runInAction(() => {
+ const templateList = data.data.data
+ const newTemplateList = templateList.map(item => {
+ item.body = JSON.parse(item.body);
+ item.config = JSON.parse(item.config)
+ return item
+ })
+ this.templateList = newTemplateList
+ })
+ }
+ // 创建容器
async createConatiner(data) {
const response = await api.createContainer(data)
this.getContainerList(this.menuId)
}
-
+ // 创建模板
+ async createTemplateConatiner(data) {
+ const response = await api.createContainer(data)
+ this.getTemplateList()
+ }
+ // 更新容器
async updateContainer(data) {
const response = await api.updateContainer(data)
this.getContainerList(this.menuId)
}
+ // 删除重启
async deleteContainer(data) {
const response = await api.deleteContainer(data)
this.getContainerList(this.menuId)
diff --git a/src/tools/index.js b/src/tools/index.js
index 177ead7..5d6b728 100644
--- a/src/tools/index.js
+++ b/src/tools/index.js
@@ -73,7 +73,16 @@ export function deleteTargetNode(id, node){
}
}
}
-
+// 修改元素的id
+export function changgElementId(container){
+ container.map(item => {
+ if(item.childElement){
+ changgElementId(item.childElement)
+ }
+ item.id = Math.random()
+ })
+}
+// 获取文件MD5
export function getMD5(file) {
return new Promise((resolve, reject) => {
let fileReader = new FileReader()
diff --git a/src/view/EditPageNew/index.jsx b/src/view/EditPageNew/index.jsx
index b4880bc..7070c9b 100644
--- a/src/view/EditPageNew/index.jsx
+++ b/src/view/EditPageNew/index.jsx
@@ -1,6 +1,6 @@
import {useState, useEffect} from 'react';
import {defaultStore} from '@/store/index';
-import {getTargetElement, getTargetNode, deleteTargetNode, NE} from "@/tools/index.js";
+import {getTargetElement, getTargetNode, deleteTargetNode, changgElementId, NE} from "@/tools/index.js";
import DirectoryStructureTree from "@/components/DirectoryStructureTree/index.jsx";
import Modal from '@/components/Modal';
import Button from "@/components/Button/index.jsx";
@@ -10,6 +10,7 @@ import StyleControl from "@/components/StyleControl/index.jsx";
import Editor from "@/components/Editor/index.jsx";
import css from './index.module.scss'
+import atomcss from '@/components/Atom/index.module.scss'
import svgLolipop from '@/assets/lolipop.svg'
import svgHelp from '@/assets/help.svg'
import svgArrow from '@/assets/arrow.svg'
@@ -40,9 +41,18 @@ export default function EditPageNew() {
// 属性页标签位置
const [attrLabelPosition, setAttrLabelPosition] = useState(0);
+ // 模板添加
+
+ const [templateAddModalState, setTemplateAddModalState] = useState(false)
+ const [templateName, setTemplateName] = useState('')
+ // 模板内容
+ const [templateList, setTemplateList] = useState([])
+
+
useEffect(() => {
console.log('生命周期开始，发送请求！')
defaultStore.getContainerList(10)
+ defaultStore.getTemplateList()
}, [0])
// 获取容器列表
useEffect(() => {
@@ -72,37 +82,8 @@ export default function EditPageNew() {
const handleNewElementChange = autorun(() => {
// 判断子元素是否为空
if (!defaultStore.newElementIdentify) return;
- // 判断是否允许添加子元素
- // 判断是否有选中元素
- if (!nowElement) {
- alert('未选中元素，无法添加。')
- defaultStore.setNewElementIdentify(null);
- return;
- }
- // 判断元素是否支持添加Element子元素
- if (nowElement.config.childrenType != 'element') {
- alert('此元素不支持添加子元素。');
- defaultStore.setNewElementIdentify(null);
- return;
- }
- // 判断是否能容纳新元素
- if (nowElement.config.childrenLength == 1 && nowElement.childElement.length != 0) {
- alert('此元素无法容纳更多元素');
- defaultStore.setNewElementIdentify(null);
- return;
- }
- const newElement = getTargetElement(defaultStore.newElementIdentify, new NE())
- newElement.id = Math.random()
- nowElement.childElement.push(newElement);
- setNowElement(nowElement)
- setNowContent({...nowContent})
- for (let i in nowContentList) {
- if (nowContentList[i].id == nowContent.id) {
- nowContentList[i] = nowContent;
- break
- }
- }
- setNowContentList({...nowContentList})
+ const newElement = getTargetElement(defaultStore.newElementIdentify, new NE());
+ addAtom(newElement)
defaultStore.setNewElementIdentify(null);
})
return () => {
@@ -186,12 +167,99 @@ export default function EditPageNew() {
a()
}
}, [nowContent, nowContentList, nowElement])
+ // 添加模板
+ useEffect(() => {
+ const a = autorun(() => {
+ if(defaultStore.templateAddModalState){
+ setTemplateAddModalState(true)
+ }
+ })
+ return () => {
+ a()
+ }
+ }, [defaultStore.templateAddModalState])
+ // 模板刷新
+ useEffect(() => {
+ const a = autorun(() => {
+ if(defaultStore.templateList){
+ if(defaultStore.templateList != templateList){
+ setTemplateList(defaultStore.templateList)
+ console.log('SETT', defaultStore.templateList)
+ }
+ }
+ })
+ return () => {
+ a()
+ }
+ }, [defaultStore.templateList])
// 关闭大纲添加的页面
function closeThumbnailModal() {
setNewThumbnailName('')
setAddThumbnailState(false)
}
+ // 关闭添加模板
+ function closeTemplate(){
+ defaultStore.setTemplateAddModalState(false)
+ defaultStore.setTemplateContainer(null)
+ setTemplateAddModalState(false)
+ setTemplateName('')
+ }
+ // 添加模板
+ function addTemplate(){
+ const name = templateName;
+ const container = defaultStore.templateContainer
+ console.log(name, container)
+ const data = {
+ name: name,
+ menuId: 0,
+ config: JSON.stringify({}),
+ rank: defaultStore.templateList.length,
+ body: JSON.stringify(container)
+ }
+ defaultStore.createTemplateConatiner(data)
+ closeTemplate()
+ }
+ // 增加模板元素
+ function handleAddTemplate(item){
+ const newTemplateElement = JSON.parse(JSON.stringify(item.body))
+ changgElementId([newTemplateElement])
+ addAtom(newTemplateElement)
+ }
+ // 添加元素
+ function addAtom(newElement){
+ // 判断是否允许添加子元素
+ // 判断是否有选中元素
+ if (!nowElement) {
+ alert('未选中元素，无法添加。')
+ defaultStore.setNewElementIdentify(null);
+ return;
+ }
+ // 判断元素是否支持添加Element子元素
+ if (nowElement.config.childrenType != 'element') {
+ alert('此元素不支持添加子元素。');
+ defaultStore.setNewElementIdentify(null);
+ return;
+ }
+ // 判断是否能容纳新元素
+ if (nowElement.config.childrenLength == 1 && nowElement.childElement.length != 0) {
+ alert('此元素无法容纳更多元素');
+ defaultStore.setNewElementIdentify(null);
+ return;
+ }
+
+ newElement.id = Math.random()
+ nowElement.childElement.push(newElement);
+ setNowElement(nowElement)
+ setNowContent({...nowContent})
+ for (let i in nowContentList) {
+ if (nowContentList[i].id == nowContent.id) {
+ nowContentList[i] = nowContent;
+ break
+ }
+ }
+ setNowContentList({...nowContentList})
+ }
// 确认添加新的大纲元素
function addThumbnail() {
@@ -221,6 +289,7 @@ export default function EditPageNew() {
body: JSON.stringify(nowContentList[item.id]),
name:item.name
}
+ console.log(data)
defaultStore.updateContainer(data)
}
@@ -330,6 +399,20 @@ export default function EditPageNew() {
{props.children}
+