feat: tree list

.eslintrc.json

@@ -19,7 +19,8 @@
   "plugins": ["react", "@typescript-eslint", "react-hooks", "prettier"],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
+    "react/display-name":"off",
+    "react-hooks/exhaustive-deps":"off",
     "prettier/prettier": [
       "error",
       {
@@ -49,6 +50,9 @@
     "import/no-unresolved": "off",
     "no-console": "off",
     "import/extensions": "off",
-    "no-nested-ternary": "off"
+    "no-nested-ternary": "off",
+    "array-callback-return":"off",
+    "no-shadow":"off",
+    "no-inner-declarations":"off"
   }
 }

src/components/hooks/useTable/index.jsx

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react'
+/* eslint-disable no-shadow */
+import React, { useState, useEffect } from 'react'
 
 const useTable = (props) => {
   const { dataInterface, implemented = true, isPagination = true, paths = ['data'], payload = {} } = props
@@ -8,7 +9,7 @@ const useTable = (props) => {
   const [page, setPage] = useState(payload.pageNum || 1)
   const [pageSize, setPageSize] = useState(10)
   const [cachePayload, setCachePayload] = useState({ ...payload })
-  const [loading, setLoading] = useState(dataInterface ? false : true)
+  const [loading, setLoading] = useState(!dataInterface)
 
   const onChange = (page, pageSize) => {
     setPage(page)
@@ -33,6 +34,7 @@ const useTable = (props) => {
         setPageSize(pageSize)
         try {
           let data = JSON.parse(JSON.stringify(resp))
+          // eslint-disable-next-line no-underscore-dangle
           let _path = [...paths]
           while (_path.length) {
             data = data[_path[0]]
@@ -76,24 +78,25 @@ const useTable = (props) => {
   }
 
   useEffect(() => {
-    if (!!implemented) {
+    if (implemented) {
       resetTable()
       setCachePayload({ ...payload })
       getTableList(dataInterface, { ...payload })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(payload), dataInterface, implemented])
 
   return {
     tableConfig: {
-      loading: loading,
+      loading,
       dataSource: [...dataSource],
       pagination: isPagination
         ? {
-            total: total,
+            total,
             size: 'default',
             current: page,
-            pageSize: pageSize,
-            onChange: onChange,
+            pageSize,
+            onChange,
             onShowSizeChange: onChange,
             showQuickJumper: true,
             showSizeChanger: true,

src/components/stateful/CheckableTags/index.jsx

@@ -0,0 +1,85 @@
+/* eslint-disable react/display-name */
+import React, { useState, forwardRef, useImperativeHandle } from 'react'
+import { Tag } from 'antd'
+import styles from './index.module.less'
+
+const { CheckableTag } = Tag
+
+const CheckableTags = forwardRef((props, ref) => {
+  const { dataSource, onChange, checkedKeys, defaultCheckedKeys, single = false } = props
+
+  const [selectedTags, setSelectedTags] = useState(checkedKeys || defaultCheckedKeys || {})
+
+  const handleChange = (tag, checked, key) => {
+    let nextSelectedTags
+    if (single) {
+      nextSelectedTags = checked ? tag : undefined
+    } else {
+      nextSelectedTags = checked
+        ? [...(selectedTags[key] || []), tag]
+        : (selectedTags[key] || []).filter((t) => t !== tag)
+    }
+    const allSelectedTags = { ...selectedTags, [key]: nextSelectedTags }
+
+    setSelectedTags(allSelectedTags)
+    onChange({ key, checked, checkedKeys: allSelectedTags, tagValue: tag })
+  }
+
+  useImperativeHandle(ref, () => ({
+    setSelectedTags,
+    handleChange,
+  }))
+  return (
+    <div className={styles.checkableTags}>
+      {dataSource.map((item) => (
+        <div key={item.key} style={{ marginBottom: 16 }}>
+          <span className={styles.title}>{item.title}:</span>
+          <div className={styles.checkableTag}>
+            {item.data.map((tag) => (
+              <CheckableTag
+                key={tag.key}
+                checked={single ? selectedTags[item.key] === tag.key : (selectedTags[item.key] || []).includes(tag.key)}
+                onChange={(checked) => handleChange(tag.key, checked, item.key)}
+              >
+                {tag.name}
+              </CheckableTag>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+})
+
+// 数据格式
+/* const dataSource = [
+  {
+    title: "表单类型",
+    key: "assetType",
+    data: [
+      {
+        name: "问卷调查",
+        key: "1",
+      },
+      {
+        name: "数据填报",
+        key: "2",
+      },
+    ],
+  },
+  {
+    title: "存疑类型",
+    key: "clueType",
+    data: [
+      {
+        name: "问卷调查",
+        key: "1",
+      },
+      {
+        name: "数据填报",
+        key: "2",
+      },
+    ],
+  },
+]; */
+export default CheckableTags

src/components/stateful/CheckableTags/index.module.less

@@ -0,0 +1,11 @@
+.checkableTags {
+  padding-left: 25px;
+  .checkableTag {
+    display: inline-block;
+    width: calc(~'100% - 68px');
+  }
+  .title {
+    margin-right: 8px;
+    vertical-align: top;
+  }
+}