feat

package.json

@@ -50,6 +50,7 @@
     "@tarojs/taro": "3.6.25",
     "@zjxpcyc/js_event": "^1.0.0",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
+    "classnames": "^2.5.1",
     "echarts": "^5.4.1",
     "echarts-for-weixin": "^1.0.2",
     "gcoord": "^1.0.6",

src/app.config.js

@@ -28,6 +28,7 @@ export default defineAppConfig({
     "pages/feedback/issuelist/index",
     "pages/user/list/index",
     "pages/user/add/index",
+    "pages/test/index",
   ],
   subpackages: [
     {

src/components/OrgTree/index.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { Popup, Button, Cell, Icon } from '@antmjs/vantui';
+import { ScrollView, View } from '@tarojs/components';
+import { getSysOrg } from '@/services/sysorg';
+import VABC from '@/components/VABC';
+import Tree from '@/components/Tree';
+import { arr2Tree } from '@/utils/array';
+
+const wrapperStyle = {
+  width: '90vw',
+  height: '100vh',
+  paddingBottom: 'env(safe-area-inset-bottom)',
+}
+
+export default function OrgTree(props) {
+  const { show, onCancel, onChange } = props;
+
+  const [dict, setDict] = React.useState([]);
+  const [checked, setChecked] = React.useState();
+  
+  const onSubmit = () => {
+    if (!checked) return;
+    onChange(checked?.orgId, checked)
+  }
+
+  const onCheck = (e, it) => {
+    // e.stopPropagation();
+    // e.preventDefault();
+    setChecked(it);
+  }
+  
+  React.useEffect(() => {
+    getSysOrg({pageSize: 500, isResponsible: 1, parentId: props.parentId }).then(res => {
+      const [treeData] = arr2Tree(res.records || [], 'orgPId', 'orgId');
+      console.log('-------treeData-------', treeData)
+      setDict(treeData);
+    })
+  }, [props.parentId]);
+
+  return (
+    <Popup position="right" show={show} onClose={onCancel} >
+      <VABC
+        footer={(
+          <View style={{ padding: '8px 2em' }}>
+            <Button block type="primary" disabled={!checked} onClick={onSubmit}>确定</Button>
+          </View>
+        )}
+        style={wrapperStyle}
+      >
+        <ScrollView scrollY style={{ height: '100%' }}>
+          <Tree
+            data={dict}
+            renderTitle={(it) => (
+              <Cell
+                title={it.name}
+                value={(
+                  <View>
+                    { checked?.orgId == it.orgId ? <Icon name="success" color="#1A7565" /> : <View style={{ width: '100%', minHeight: '10px' }} /> }
+                  </View>
+                )}
+                renderIcon={it.children?.length > 0 ? <Icon name="arrow" /> : <View style={{ minWidth: '16px' }} />}
+                onClick={e => onCheck(e, it)}
+              />
+            )}
+          />
+        </ScrollView>
+      </VABC>
+    </Popup>
+  );
+}

src/components/Tree/TreeItem.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import cls from './style.module.less';
+
+export default function TreeItem(props) {
+  const { data, expanded, onClick, onToggle, renderTitle, onHeight } = props;
+  const ctt = React.useMemo(() => `ctt-${Math.random().toString(36).substring(2, 7)}`, []);
+  const [current, setCurrent] = React.useState(-1);
+  const [height, setHeight] = React.useState(0);
+  const expandedRef = React.useRef(false);
+  expandedRef.current = expanded;
+
+  const style = {
+    maxHeight: expanded ? `${height + 10}px` : '0px',
+  }
+  
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const checked = !expandedRef.current;
+    onToggle && onToggle(checked);
+    onClick && onClick(data);
+    onHeight && onHeight();
+  }
+
+  const handleChildToggle = (e, inx) => {
+    setCurrent(e ? inx : -1);
+  }
+
+  const calcHeight = React.useCallback(() => {
+    Taro.nextTick(() => {
+      Taro.createSelectorQuery()
+      .select(`.${ctt}`)
+      .boundingClientRect(res => {
+        // console.log('-----rect------', ctt, res?.height)
+        setHeight(res?.height || 0);
+      })
+      .exec();
+    })
+  }, []);
+
+  React.useEffect(() => {
+    calcHeight();
+  }, []);
+
+  return (
+    <View className={classNames(cls.item, {[cls.expanded]: expanded})} onClick={handleToggle}>
+      {/* <View className={cls.toggle} onClick={handleToggle}></View> */}
+      {renderTitle ? renderTitle(data) : null}
+      {
+        data?.children?.length > 0 && (
+          <View class={classNames(cls.children)} style={style}>
+            <View className={ctt}>
+            {
+              data.children.map((it, inx) => (
+                <TreeItem
+                  key={inx}
+                  data={it}
+                  expanded={current == inx}
+                  onClick={onClick}
+                  onToggle={(e) => handleChildToggle(e, inx)}
+                  onHeight={onHeight || calcHeight}
+                  renderTitle={renderTitle}
+                />
+              ))
+            }
+            </View>
+          </View>
+        )
+      }
+    </View>
+  );
+}

src/components/Tree/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import TreeItem from './TreeItem';
+import cls from './style.module.less';
+
+export default function Tree(props) {
+  const { data, renderTitle, onClick } = props;
+  const [current, setCurrent] = React.useState(0);
+  
+  return (
+    <View class={classNames(cls.tree, cls.box)}>
+      {
+        data.map((it, inx) => (
+          <TreeItem
+            key={inx}
+            data={it}
+            expanded={current == inx}
+            onToggle={(x) => setCurrent(x ? inx : -1)}
+            onClick={onClick}
+            renderTitle={renderTitle}
+          />
+        ))
+      }
+    </View>
+  );
+}

src/components/Tree/style.module.less

@@ -0,0 +1,58 @@
+.tree {
+  list-style-type: none;
+  padding: 0;
+}
+
+.tree .item {
+  position: relative;
+  margin-left: 20px;
+  cursor: pointer;
+}
+
+.toggle {
+  display: inline-block;
+  cursor: pointer;
+  min-width: 1em;
+  min-height: 1em;
+  background-color: red;
+}
+
+.children {
+  display: block;
+}
+
+/* 初始状态下的连接线 */
+.tree .item:before {
+  // content: "";
+  // position: absolute;
+  // top: 0;
+  // left: -20px;
+  // width: 15px;
+  // border-left: 1px solid #ccc;
+  // height: 100%;
+}
+
+/* 添加子级的连接线 */
+.tree .item > .children:before {
+  // content: "";
+  // position: absolute;
+  // top: 0;
+  // left: -17px;
+  // border-top: 1px solid #ccc;
+  // width: 10px;
+  // height: 15px;
+  // transform: rotate(90deg);
+  // transform-origin: bottom left;
+}
+
+/* 展开时的子级列表 */
+.tree .children {
+  overflow: hidden;
+  max-height: 0;
+  transition: all .3s ease-in-out;
+}
+
+/* 使用JavaScript动态添加的展开/收缩样式 */
+.tree .expanded > .children {
+  max-height: 400px;
+}

src/pages/issue/components/Issue/index.jsx

@@ -4,7 +4,8 @@ import { Textarea, View } from "@tarojs/components";
 import { Field, Cell, CellGroup } from "@antmjs/vantui";
 import LocType from "@/components/LocType";
 import IssueType from "@/components/IssueType";
-import OrgPicker from "@/components/OrgPicker";
+// import OrgPicker from "@/components/OrgPicker";
+import OrgTree from "@/components/OrgTree";
 import DatePicker from "@/components/DatePicker";
 import Map from "@/components/map";
 import Uploader from "@/components/Uploader/index";
@@ -102,8 +103,8 @@ export default (props) => {
   };
 
   const setFieldChange = (field, value) => {
-    console.log("field->>>>>>>>>>>>>>>>",field)
-    console.log("value->>>>>>>>>>>>>>>>",value)
+    // console.log("field->>>>>>>>>>>>>>>>",field)
+    // console.log("value->>>>>>>>>>>>>>>>",value)
     const data = {
       ...fmRef.current,
       [field]: value,
@@ -166,7 +167,7 @@ export default (props) => {
         onChange={onIssueTypeChange}
       />
 
-      <OrgPicker
+      <OrgTree
         show={showOrgPicker}
         value={formData.orgName}
         onCancel={() => setShowOrgPicker(false)}

src/pages/org/issue/detail/components/Assigned.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
 import { Button, Dialog } from '@antmjs/vantui';
-import OrgPicker from "@/components/OrgPicker";
+// import OrgPicker from "@/components/OrgPicker";
+import OrgTree from "@/components/OrgTree";
 import { postIssueAssignedAgain, putTaIssue, copyTaIssue } from '@/services/taissue';
 import { warn } from '@/utils/message';
 
@@ -62,7 +63,7 @@ export default (props) => {
   return (
     <View style={{ marginTop: '20px', display: 'flex' }}>
       <Dialog id={dialogId} />
-      <OrgPicker
+      <OrgTree
         parentId={issue.orgId}
         show={showOrgPicker}
         value={formDataRef.current?.orgName}

src/pages/test/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '测试'
+})

src/pages/test/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { Button } from '@tarojs/components';
+import OrgTree from '@/components/OrgTree';
+
+export default function Test(props) {
+
+  const [show, setShow] = React.useState(false);
+  
+  return (
+    <>
+    <Button onClick={() => setShow(true)}>
+      ABNCD
+    </Button>
+    <OrgTree show={show} onCancel={() => setShow(false)} onChange={console.log} />
+    </>
+  );
+}

src/subpkg1/pages/components/orgStat/index.jsx

@@ -4,7 +4,8 @@ import { View } from '@tarojs/components';
 import { CellGroup, Cell, Popup } from '@antmjs/vantui';
 import Card from '@/components/Card';
 import Chart, { getLinearGradient } from '@/subpkg1/components/chart';
-import OrgPicker from '@/components/OrgPicker';
+// import OrgPicker from '@/components/OrgPicker';
+import OrgTree from '@/components/OrgTree';
 import { getIssueOrg } from '@/services/stat';
 
 export default (props) => {
@@ -74,7 +75,7 @@ export default (props) => {
     <Card>
       <Cell title="交办统计" isLink value={valStr} onClick={() => setShow(true)} />
       <Chart option={option} style={{ height: '30vh'}} />
-      <OrgPicker show={show} onChange={onOrgChange} onClose={onCancel} />
+      <OrgTree show={show} onChange={onOrgChange} onClose={onCancel} />
     </Card>
   )
 }

src/utils/array.js

@@ -0,0 +1,64 @@
+/**
+ * 数组 转 Tree
+ * @param {*} arr
+ * @param {*} parent
+ * @param {*} key
+ * @returns
+ */
+export function arr2Tree(arr = [], parent = "parentId", key = "key") {
+  // 转换为字典
+  const dict = arr.reduce((acc, item) => {
+    return {
+      ...acc,
+      [item[key]]: {
+        ...item,
+        children: [],
+      },
+    };
+  }, {});
+
+  // // 查找顶级结点
+  // const getRootNode = (node) => {
+  //   const found = arr.filter((x) => node[parentId] === x[key])[0];
+
+  //   return !found ? dict[node[key]] : getRootNode(found);
+  // };
+
+  // 挂载父子节点
+  const tree = [];
+  for (let item of arr) {
+    const it = dict[item[key]];
+    const parentNodeId = it[parent];
+    const parentNode = dict[parentNodeId];
+
+    if (!parentNode) {
+      tree.push(it);
+    } else {
+      dict[parentNodeId].children.push(it);
+    }
+  }
+  return [tree, dict];
+}
+
+/**
+ * 深度展平数组
+ * @param {*} arr
+ * @returns
+ */
+export function flatten(arr = []) {
+  return arr.reduce((acc, it) => {
+    const list = Array.isArray(it) ? flatten(it) : it;
+    return acc.concat(list);
+  }, []);
+}
+
+/**
+ * 深度数组去重
+ * @param {*} arr
+ */
+export function uniq(arr = []) {
+  const list = flatten(arr);
+  return list.reduce((acc, it) => {
+    return acc.indexOf(it) > -1 ? acc : acc.concat(it);
+  }, []);
+}

yarn.lock

@@ -4396,6 +4396,11 @@ classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
   resolved "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
+classnames@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-css@^4.2.1, clean-css@^4.2.3:
   version "4.2.4"
   resolved "https://registry.npmmirror.com/clean-css/-/clean-css-4.2.4.tgz"