Update App.js

knmanage/src/App.js

@@ -1,10 +1,8 @@
-import logo from './logo.svg';
 import './App.css';
-import init, { greet } from "knmodel";
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 
-
-var d = {
+// 默认规则数据
+window.d = {
   field: '就诊卡号11',
   required: 1,
   chiled: [
@@ -72,18 +70,48 @@ var d = {
   ],
 };
 
-function App() {
+// 这里主要用于同步全局对象
+function updateData(index = "", name, value) {
+  console.log(index,name,value);
+  let idxs = index.split("-");
+  let dStr = "";
+  let i = 0;
+  while (true) {
+    let idx = idxs.shift()
+    if (typeof idx == "undefined") {
+      break
+    }
+    if (idx == 0 && i == 0) {
+      dStr = "window.d"
+    }
+    if (idx == 0 && i > 0) {
+      dStr += `.chiled[${idx}]`;
+    }
+    i++;
+  }
 
-  const [data, setData] = useState(d);
+  if (typeof value == "number") {
+    dStr += `.${name}=${value}`;
+  } else if (typeof value == "string") {
+    dStr += `.${name}="${value}"`;
+  } else if (typeof value == "object") {
+    let s = JSON.stringify(value);
+    dStr += `.${name}= JSON.parse(\`${s}\`)`;
+  }
 
-  useEffect(() => {
-    init().then(() => {
-      // greet("Hello Tianya");
-    })
-  }, [])
+  console.log(window.d);
+  console.log(dStr);
+
+  eval(dStr);
+}
+
+function App() {
+
+  const [data, setData] = useState(window.d);
 
   function TreeNode(props) {
-    console.log(props);
+    console.log("xx");
+    // 这里需要把属性分离出状态
     const [idHash, setIdHash] = useState(new Date().getTime() + Math.round(Math.random() * 10000))
     const [nodeField, setNodeField] = useState(props.data.field)
     const [nodeRequired, setNodeRequired] = useState(props.data.required)
@@ -91,8 +119,8 @@ function App() {
 
     // 这里只有子集变化了才更新
     const listItems = useMemo(() => {
-      return nodeChiled.map((item) =>
-        <TreeNode data={item}></TreeNode>
+      return nodeChiled.map((item, i) =>
+        <TreeNode data={item} index={props.index + "-" + i} key={i}></TreeNode>
       )
     }, [nodeChiled])
 
@@ -100,14 +128,30 @@ function App() {
     function handleOnClick() {
       if (nodeRequired == 0) {
         setNodeRequired(1)
+        updateData(props.index, "required", 1);
       } else {
         setNodeRequired(0)
+        updateData(props.index, "required", 0);
       }
     }
 
+    // 增加子节点
+    function handleOnAdd() {
+      let newItem = {
+        field: '未命名',
+        required: 1,
+        chiled: [
+        ]
+      };
+
+      let newNodeChiled = nodeChiled.concat(newItem);
+      setNodeChiled(newNodeChiled);
+      updateData(props.index, "chiled", newNodeChiled);
+    }
+
     return (
       <div id={idHash} style={{ marginLeft: "30px" }}>
-        <h2>{nodeField}<a onClick={handleOnClick}>[{nodeRequired}]</a></h2>
+        <h2>{nodeField}<a onClick={handleOnClick}>[{nodeRequired}]</a> <a style={{ color: "blue", cursor: "pointer" }} onClick={handleOnAdd}>+</a></h2>
         <div>{listItems}</div>
       </div>
     );
@@ -117,7 +161,7 @@ function App() {
     <div className="App">
       <h1>Node</h1>
       <hr></hr>
-      <TreeNode data={data}></TreeNode>
+      <TreeNode data={data} index={"0"}></TreeNode>
     </div>
   );
 }