fangmingyue před 2 roky
revize
c49e4fbe04
100 změnil soubory, kde provedl 7874 přidání a 0 odebrání
  1. 24
    0
      .gitignore
  2. 15
    0
      index.html
  3. 8
    0
      jsconfig.json
  4. 2829
    0
      package-lock.json
  5. 36
    0
      package.json
  6. 7
    0
      public/config.js
  7. binární
      public/logo.png
  8. 110
    0
      public/particles/particles.json
  9. 9
    0
      public/particles/particles.min.js
  10. 1
    0
      public/qrcode.min.js
  11. 1
    0
      public/vite.svg
  12. 42
    0
      src/App.css
  13. 10
    0
      src/App.jsx
  14. 1
    0
      src/assets/react.svg
  15. 15
    0
      src/components/EditableTag/Tag.jsx
  16. 21
    0
      src/components/EditableTag/index.jsx
  17. 27
    0
      src/components/EditableTag/style.less
  18. 4
    0
      src/components/Money/float.js
  19. 30
    0
      src/components/Money/index.jsx
  20. 83
    0
      src/components/Page/Curd.jsx
  21. 93
    0
      src/components/Page/Edit.jsx
  22. 89
    0
      src/components/Page/List.jsx
  23. 24
    0
      src/components/Page/index.jsx
  24. 10
    0
      src/components/Upload/Upload.jsx
  25. 60
    0
      src/components/Upload/UploadImage.jsx
  26. 115
    0
      src/components/Upload/UploadImageList.jsx
  27. 94
    0
      src/components/Upload/UploadVideo.jsx
  28. 11
    0
      src/components/Upload/index.jsx
  29. 32
    0
      src/components/Upload/request.js
  30. 7
    0
      src/components/Upload/style.less
  31. 87
    0
      src/components/Wangeditor/index.jsx
  32. 81
    0
      src/components/chart/index.jsx
  33. 71
    0
      src/index.less
  34. 40
    0
      src/layouts/AuthLayout/Main.jsx
  35. 3
    0
      src/layouts/AuthLayout/RedirectLogin.jsx
  36. 72
    0
      src/layouts/AuthLayout/components/Background.jsx
  37. 31
    0
      src/layouts/AuthLayout/components/Container.jsx
  38. 15
    0
      src/layouts/AuthLayout/components/Footer.jsx
  39. 35
    0
      src/layouts/AuthLayout/components/Header/Exit.jsx
  40. 24
    0
      src/layouts/AuthLayout/components/Header/Title.jsx
  41. 122
    0
      src/layouts/AuthLayout/components/Header/User.jsx
  42. 28
    0
      src/layouts/AuthLayout/components/Header/index.jsx
  43. 19
    0
      src/layouts/AuthLayout/components/HtmlTitle.jsx
  44. 17
    0
      src/layouts/AuthLayout/components/Logo.jsx
  45. 32
    0
      src/layouts/AuthLayout/components/Menus.jsx
  46. 21
    0
      src/layouts/AuthLayout/components/PageTransition/index.jsx
  47. 21
    0
      src/layouts/AuthLayout/components/PageTransition/style.less
  48. 22
    0
      src/layouts/AuthLayout/components/SiderBar.jsx
  49. 33
    0
      src/layouts/AuthLayout/index.jsx
  50. 80
    0
      src/layouts/AuthLayout/style.less
  51. 28
    0
      src/layouts/AuthLayout/withLogin.jsx
  52. 16
    0
      src/main.jsx
  53. 29
    0
      src/pages/404/index.jsx
  54. 11
    0
      src/pages/login/Effect.jsx
  55. 54
    0
      src/pages/login/LoginForm.jsx
  56. 45
    0
      src/pages/login/LoginUse.jsx
  57. 159
    0
      src/pages/login/components/LoginQrCode.jsx
  58. 34
    0
      src/pages/login/foo.js
  59. 91
    0
      src/pages/login/index.jsx
  60. 77
    0
      src/pages/login/qrcode.less
  61. 109
    0
      src/pages/login/style.less
  62. 85
    0
      src/pages/org/components/Form.jsx
  63. 159
    0
      src/pages/org/index.jsx
  64. 117
    0
      src/pages/sample/curd.jsx
  65. 308
    0
      src/pages/sample/form/index.jsx
  66. 191
    0
      src/pages/sample/home/components/AreaChart.jsx
  67. 44
    0
      src/pages/sample/home/components/Banner.jsx
  68. 37
    0
      src/pages/sample/home/components/BarChart.jsx
  69. 112
    0
      src/pages/sample/home/components/PictorialBar.jsx
  70. 48
    0
      src/pages/sample/home/components/PieChart.jsx
  71. 48
    0
      src/pages/sample/home/components/RadarChart.jsx
  72. 41
    0
      src/pages/sample/home/index.jsx
  73. 96
    0
      src/pages/sample/table/index.jsx
  74. 127
    0
      src/pages/user/Account.jsx
  75. 141
    0
      src/pages/user/Edit.jsx
  76. 151
    0
      src/pages/user/index.jsx
  77. 18
    0
      src/routes/Router.jsx
  78. 37
    0
      src/routes/hooks/usePrompt.jsx
  79. 17
    0
      src/routes/hooks/useRoute.jsx
  80. 44
    0
      src/routes/menus.jsx
  81. 14
    0
      src/routes/permissions.js
  82. 118
    0
      src/routes/routes.jsx
  83. 22
    0
      src/routes/utils.js
  84. 19
    0
      src/services/login.js
  85. 10
    0
      src/services/sys_user.js
  86. 50
    0
      src/services/sysuser.js
  87. 14
    0
      src/store/index.js
  88. 20
    0
      src/store/models/system.js
  89. 39
    0
      src/store/models/user.js
  90. 11
    0
      src/theme.less
  91. 64
    0
      src/utils/array.js
  92. 8
    0
      src/utils/css.js
  93. 17
    0
      src/utils/download.js
  94. 5
    0
      src/utils/float.js
  95. 23
    0
      src/utils/form.js
  96. 13
    0
      src/utils/hooks/useBool.js
  97. 19
    0
      src/utils/observe.js
  98. 202
    0
      src/utils/request.js
  99. 70
    0
      src/utils/sso.js
  100. 0
    0
      src/utils/token.js

+ 24
- 0
.gitignore Zobrazit soubor

@@ -0,0 +1,24 @@
1
+# Logs
2
+logs
3
+*.log
4
+npm-debug.log*
5
+yarn-debug.log*
6
+yarn-error.log*
7
+pnpm-debug.log*
8
+lerna-debug.log*
9
+
10
+node_modules
11
+dist
12
+dist-ssr
13
+*.local
14
+
15
+# Editor directories and files
16
+.vscode/*
17
+!.vscode/extensions.json
18
+.idea
19
+.DS_Store
20
+*.suo
21
+*.ntvs*
22
+*.njsproj
23
+*.sln
24
+*.sw?

+ 15
- 0
index.html Zobrazit soubor

@@ -0,0 +1,15 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="UTF-8" />
5
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+    <script src="./config.js"></script>
8
+    <script src="./qrcode.min.js"></script>
9
+    <title>认证中心</title>
10
+  </head>
11
+  <body>
12
+    <div id="root"></div>
13
+    <script type="module" src="/src/main.jsx"></script>
14
+  </body>
15
+</html>

+ 8
- 0
jsconfig.json Zobrazit soubor

@@ -0,0 +1,8 @@
1
+{
2
+  "compilerOptions": {
3
+    "baseUrl": ".",
4
+    "paths": {
5
+      "@/*": ["./src/*"]
6
+    }
7
+  }
8
+}

+ 2829
- 0
package-lock.json
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 36
- 0
package.json Zobrazit soubor

@@ -0,0 +1,36 @@
1
+{
2
+  "name": "vite-project",
3
+  "private": true,
4
+  "version": "0.0.0",
5
+  "type": "module",
6
+  "scripts": {
7
+    "dev": "vite",
8
+    "build": "vite build",
9
+    "preview": "vite preview"
10
+  },
11
+  "dependencies": {
12
+    "@ant-design/icons": "^4.7.0",
13
+    "@ant-design/pro-components": "^2.3.13",
14
+    "@wangeditor/editor": "^5.1.23",
15
+    "@wangeditor/editor-for-react": "^1.0.6",
16
+    "@zjxpcyc/react-tiny-store": "^2.0.1",
17
+    "antd": "^4.23.4",
18
+    "axios": "^1.2.0",
19
+    "classnames": "^2.3.2",
20
+    "echarts": "^5.4.0",
21
+    "md5": "^2.3.0",
22
+    "react": "18.2.0",
23
+    "react-dom": "18.2.0",
24
+    "react-helmet": "^6.1.0",
25
+    "react-router-dom": "^6.4.2",
26
+    "react-transition-group": "^4.4.5"
27
+  },
28
+  "devDependencies": {
29
+    "@types/react": "18.0.27",
30
+    "@types/react-dom": "18.0.10",
31
+    "@vitejs/plugin-react": "^2.0.0",
32
+    "less": "^4.1.3",
33
+    "vite": "^3.0.0",
34
+    "vite-plugin-imp": "^2.2.0"
35
+  }
36
+}

+ 7
- 0
public/config.js Zobrazit soubor

@@ -0,0 +1,7 @@
1
+
2
+var SERVER_BASE = '';
3
+
4
+// 获取真实的上传文件地址
5
+function getRealPath(path) {
6
+  return path;
7
+}

binární
public/logo.png Zobrazit soubor


+ 110
- 0
public/particles/particles.json Zobrazit soubor

@@ -0,0 +1,110 @@
1
+{
2
+  "particles": {
3
+    "number": {
4
+      "value": 80,
5
+      "density": {
6
+        "enable": true,
7
+        "value_area": 800
8
+      }
9
+    },
10
+    "color": {
11
+      "value": "#1890ff"
12
+    },
13
+    "shape": {
14
+      "type": "circle",
15
+      "stroke": {
16
+        "width": 0,
17
+        "color": "#000000"
18
+      },
19
+      "polygon": {
20
+        "nb_sides": 5
21
+      },
22
+      "image": {
23
+        "src": "img/github.svg",
24
+        "width": 100,
25
+        "height": 100
26
+      }
27
+    },
28
+    "opacity": {
29
+      "value": 0.5,
30
+      "random": false,
31
+      "anim": {
32
+        "enable": false,
33
+        "speed": 1,
34
+        "opacity_min": 0.1,
35
+        "sync": false
36
+      }
37
+    },
38
+    "size": {
39
+      "value": 3,
40
+      "random": true,
41
+      "anim": {
42
+        "enable": false,
43
+        "speed": 40,
44
+        "size_min": 0.1,
45
+        "sync": false
46
+      }
47
+    },
48
+    "line_linked": {
49
+      "enable": true,
50
+      "distance": 150,
51
+      "color": "#1890ff",
52
+      "opacity": 0.4,
53
+      "width": 1
54
+    },
55
+    "move": {
56
+      "enable": true,
57
+      "speed": 2,
58
+      "direction": "none",
59
+      "random": false,
60
+      "straight": false,
61
+      "out_mode": "out",
62
+      "bounce": false,
63
+      "attract": {
64
+        "enable": false,
65
+        "rotateX": 600,
66
+        "rotateY": 1200
67
+      }
68
+    }
69
+  },
70
+  "interactivity": {
71
+    "detect_on": "canvas",
72
+    "events": {
73
+      "onhover": {
74
+        "enable": false,
75
+        "mode": "repulse"
76
+      },
77
+      "onclick": {
78
+        "enable": false,
79
+        "mode": "push"
80
+      },
81
+      "resize": true
82
+    },
83
+    "modes": {
84
+      "grab": {
85
+        "distance": 400,
86
+        "line_linked": {
87
+          "opacity": 1
88
+        }
89
+      },
90
+      "bubble": {
91
+        "distance": 400,
92
+        "size": 40,
93
+        "duration": 2,
94
+        "opacity": 8,
95
+        "speed": 3
96
+      },
97
+      "repulse": {
98
+        "distance": 200,
99
+        "duration": 0.4
100
+      },
101
+      "push": {
102
+        "particles_nb": 4
103
+      },
104
+      "remove": {
105
+        "particles_nb": 2
106
+      }
107
+    }
108
+  },
109
+  "retina_detect": true
110
+}

+ 9
- 0
public/particles/particles.min.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
public/qrcode.min.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
public/vite.svg Zobrazit soubor

@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

+ 42
- 0
src/App.css Zobrazit soubor

@@ -0,0 +1,42 @@
1
+#root {
2
+  max-width: 1280px;
3
+  margin: 0 auto;
4
+  padding: 2rem;
5
+  text-align: center;
6
+}
7
+
8
+.logo {
9
+  height: 6em;
10
+  padding: 1.5em;
11
+  will-change: filter;
12
+}
13
+.logo:hover {
14
+  filter: drop-shadow(0 0 2em #646cffaa);
15
+}
16
+.logo.react:hover {
17
+  filter: drop-shadow(0 0 2em #61dafbaa);
18
+}
19
+
20
+
21
+@keyframes logo-spin {
22
+  from {
23
+    transform: rotate(0deg);
24
+  }
25
+  to {
26
+    transform: rotate(360deg);
27
+  }
28
+}
29
+
30
+@media (prefers-reduced-motion: no-preference) {
31
+  a:nth-of-type(2) .logo {
32
+    animation: logo-spin infinite 20s linear;
33
+  }
34
+}
35
+
36
+.card {
37
+  padding: 2em;
38
+}
39
+
40
+.read-the-docs {
41
+  color: #888;
42
+}

+ 10
- 0
src/App.jsx Zobrazit soubor

@@ -0,0 +1,10 @@
1
+import { useState } from 'react'
2
+
3
+
4
+function App() {
5
+  const [count, setCount] = useState(0)
6
+
7
+  return null;
8
+}
9
+
10
+export default App

+ 1
- 0
src/assets/react.svg Zobrazit soubor

@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

+ 15
- 0
src/components/EditableTag/Tag.jsx Zobrazit soubor

@@ -0,0 +1,15 @@
1
+import React from 'react';
2
+import { Button } from 'antd';
3
+import { CloseOutlined } from '@ant-design/icons';
4
+import './style.less'
5
+
6
+export default (props) => {
7
+  const { size, type, onDelete, children } = props;
8
+
9
+  return (
10
+    <div className='tag-btn-group'>
11
+      <Button size={size} type={type}>{children}</Button>
12
+      <Button size={size} type="primary" icon={<CloseOutlined />} onClick={onDelete} />
13
+    </div>
14
+  )
15
+}

+ 21
- 0
src/components/EditableTag/index.jsx Zobrazit soubor

@@ -0,0 +1,21 @@
1
+import React from 'react';
2
+import { Button } from 'antd';
3
+import Tag from './Tag';
4
+import './style.less'
5
+
6
+export default (props) => {
7
+  const { size, type, list = [], onDelete, keyFuc, labelFunc } = props;
8
+
9
+  return (
10
+    <div className='editable-tag-box'>
11
+      {
12
+        list.map((item, index) => {
13
+          const key = keyFuc(item, index);
14
+          const label = labelFunc(item, index);
15
+
16
+          return <Tag key={key} size={size} type={type} onDelete={() => onDelete(item)}>{label}</Tag>
17
+        })
18
+      }
19
+    </div>
20
+  )
21
+}

+ 27
- 0
src/components/EditableTag/style.less Zobrazit soubor

@@ -0,0 +1,27 @@
1
+.tag-btn-group {
2
+  .ant-btn {
3
+    vertical-align: middle;
4
+  }
5
+
6
+  .ant-btn:first-child {
7
+    border-right: none;
8
+  }
9
+
10
+  .ant-btn:last-child {
11
+    // border-left: none;
12
+    border-top-left-radius: 0;
13
+    border-bottom-left-radius: 0;
14
+    margin-left: -1px;
15
+  }
16
+}
17
+
18
+.editable-tag-box {
19
+  display: flex;
20
+  flex-wrap: wrap;
21
+
22
+  .tag-btn-group {
23
+    flex: none;
24
+    box-sizing: border-box;
25
+    padding: 1em;
26
+  }
27
+}

+ 4
- 0
src/components/Money/float.js Zobrazit soubor

@@ -0,0 +1,4 @@
1
+const epsilonN = N => num => Math.round( num * N + Number.EPSILON ) / N;
2
+const epsilon2 = epsilonN(1e2);
3
+
4
+export default epsilon2;

+ 30
- 0
src/components/Money/index.jsx Zobrazit soubor

@@ -0,0 +1,30 @@
1
+import { InputNumber } from "antd"
2
+import { useEffect, useState } from "react"
3
+import epsilon2 from './float'
4
+
5
+export default (props) => {
6
+
7
+  const { value, onChange, ...leftProps } = props
8
+
9
+  const [money, setMoney] = useState(0)
10
+
11
+  useEffect(() => {
12
+    setMoney(epsilon2(value / 100))
13
+  }, [value])
14
+
15
+  const handleChange = (val) => {
16
+    onChange(epsilon2(val * 100))
17
+  }
18
+
19
+  return (
20
+    <InputNumber
21
+      min='0'
22
+      {...leftProps}
23
+      value={money}
24
+      onChange={handleChange}
25
+      precision={2}
26
+      formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
27
+      parser={value => value.replace(/\¥\s?|(,*)/g, '')}
28
+    />
29
+  )
30
+}

+ 83
- 0
src/components/Page/Curd.jsx Zobrazit soubor

@@ -0,0 +1,83 @@
1
+import React from 'react';
2
+import { DrawerForm } from '@ant-design/pro-components';
3
+import { Form } from 'antd';
4
+import List from './List';
5
+
6
+const drawerProps = {
7
+  destroyOnClose: true
8
+}
9
+export default (props) => {
10
+  const { rowKey, columns, request, formProps, renderFormItems, ...leftProps } = props;
11
+
12
+  const [form] = Form.useForm();
13
+  const listRef = React.useRef();
14
+  const rowRef = React.useRef();
15
+  const [open, setOpen] = React.useState(false);
16
+  
17
+  const onAdd = () => {
18
+    rowRef.current = undefined;
19
+    form.resetFields();
20
+    setOpen(true);
21
+  }
22
+
23
+  const onEdit = (row) => {
24
+    rowRef.current = row;
25
+    form.setFieldsValue(row);
26
+    setOpen(true);
27
+  }
28
+
29
+  const onDelete = (row) => {
30
+    rowRef.current = row;
31
+
32
+    listRef.current.showLoading('正在操作, 请稍候...');
33
+    request.del(row[rowKey]).then(() => {
34
+      listRef.current.hideLoading();
35
+      listRef.current.reload();
36
+    }).catch(() => {
37
+      listRef.current.hideLoading();
38
+    });
39
+  }
40
+
41
+  const onFinish = async (values) => {
42
+    if (rowRef.current) {
43
+      await request.update(rowRef.current[rowKey], {
44
+        ...rowRef.current,
45
+        ...values,
46
+      });
47
+    } else {
48
+      await request.save(values);
49
+    }
50
+    listRef.current.reload();
51
+
52
+    return true;
53
+  }
54
+
55
+  return (
56
+    <>
57
+      <List
58
+        ref={listRef}
59
+        rowKey={rowKey}
60
+        columns={columns}
61
+        request={request.list}
62
+        onAdd={onAdd}
63
+        onDelete={onDelete}
64
+        onEdit={onEdit}
65
+        {...leftProps}
66
+      />
67
+
68
+      <DrawerForm
69
+        submitTimeout={3000}
70
+        open={open}
71
+        form={form}
72
+        drawerProps={drawerProps}
73
+        onOpenChange={setOpen}
74
+        onFinish={onFinish}
75
+        {...formProps}
76
+      >
77
+        {
78
+          renderFormItems && renderFormItems()
79
+        }
80
+      </DrawerForm>
81
+    </>
82
+  )
83
+}

+ 93
- 0
src/components/Page/Edit.jsx Zobrazit soubor

@@ -0,0 +1,93 @@
1
+import React from 'react';
2
+import { Button, Card, Form } from 'antd';
3
+import { useSearchParams, useNavigate } from "react-router-dom";
4
+import useBool from '@/utils/hooks/useBool';
5
+import Page from './index';
6
+
7
+const FormItem = Form.Item;
8
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
9
+
10
+export default (props) => {
11
+  /**
12
+   * request 编辑或者新增接口
13
+   * dataFunc 将 form 表单数据转换为接口需要格式, 一般情况下不需要这个操作
14
+   * formDataFunc 将接口返回的值转换为 form 表单数据格式, 一般情况下不需要这个操作
15
+   * width form 表单宽度, 默认 800px
16
+   */
17
+  const { request, dataFunc, formDataFunc, width = '800px', onFinish, ...leftProps } = props;
18
+  const [loading, startLoading, stopLoading] = useBool();
19
+  const [form] = Form.useForm();
20
+  const navigate = useNavigate();
21
+
22
+  // 获取 id query 参数, 如果存在说明是编辑,而不是新增
23
+  const [params] = useSearchParams();
24
+  const id = params.get("id");
25
+  
26
+  const navBack = React.useCallback(() => {
27
+    const t = setTimeout(() => {
28
+      navigate(-1);
29
+      clearTimeout(t);
30
+    }, 600);
31
+  }, [navigate]);
32
+
33
+  // 表单提交
34
+  const onSubmit = (values) => {    
35
+    startLoading();
36
+    // 可能需要转换下格式
37
+    const data = dataFunc ? dataFunc(id, values) : values;
38
+    if (id) {
39
+      request.update(id, data).then((res) => {
40
+        stopLoading();
41
+        if (onFinish) {
42
+          onFinish(res);
43
+        } else {
44
+          navBack();
45
+        }
46
+      }).catch(stopLoading);
47
+    } else {
48
+      request.save(data)
49
+        .then((res) => {
50
+          stopLoading();
51
+          if (onFinish) {
52
+            onFinish(res);
53
+          } else {
54
+            navBack();
55
+          }
56
+        }).catch(stopLoading);
57
+    }
58
+  }
59
+
60
+  // 查询详情
61
+  React.useEffect(() => {
62
+    if (id && request) {
63
+      request.get(id).then(res => {
64
+        // 此处可能需要转换下数据格式
65
+        const formData = formDataFunc ? formDataFunc(res) : res;
66
+        form.setFieldsValue(formData);
67
+      })
68
+    }
69
+  }, [request, id]);
70
+
71
+  return (
72
+    <Page>
73
+      <Card bodyStyle={{padding: '48px 24px'}}>
74
+        <Form {...formItemLayout} form={form} onFinish={onSubmit} style={{width}} {...leftProps} >
75
+          {props.children}
76
+          <FormItem label=" " colon={false} style={{marginBottom: 0}}>
77
+            <Button type="default" onClick={() => navigate(-1)}>
78
+              取消
79
+            </Button>
80
+            <Button
81
+              type="primary"
82
+              htmlType="submit"
83
+              style={{ marginLeft: '4em' }}
84
+              loading={loading}
85
+            >
86
+              确认
87
+            </Button>
88
+          </FormItem>
89
+        </Form>
90
+      </Card>
91
+    </Page>
92
+  )
93
+}

+ 89
- 0
src/components/Page/List.jsx Zobrazit soubor

@@ -0,0 +1,89 @@
1
+import React from 'react';
2
+import { Button, Popconfirm, message } from 'antd';
3
+import { ProTable } from '@ant-design/pro-components';
4
+import { queryTable } from '@/utils/request';
5
+import Page from './index';
6
+
7
+export default React.forwardRef((props, ref) => {
8
+  /**
9
+   * request 与 ProTable 定义不同,这个只是普通的接口即可
10
+   */
11
+  const { request, rowKey, columns, onAdd, onDelete, onEdit, toolBarRender, columnOptionRender, ...leftProps } = props;
12
+  const actionRef = React.useRef();
13
+  const hideRef = React.useRef();
14
+
15
+  const api = React.useMemo(() => queryTable(request), [request]);
16
+
17
+  // 统一实现操作列
18
+  const cols = React.useMemo(() => [
19
+    ...columns,
20
+    {
21
+      title: '操作',
22
+      valueType: 'option',
23
+      key: 'option',
24
+      ellipsis: true,
25
+      render: (_, record) => [
26
+        (
27
+          onEdit && 
28
+          <Button style={{ padding: 0 }} type="link" key={1} onClick={() => onEdit(record) }>
29
+            编辑
30
+          </Button>
31
+        ),
32
+        (
33
+          onDelete &&
34
+          <Popconfirm
35
+            key={3}
36
+            title="您是否确认删除 ?"
37
+            onConfirm={() => onDelete(record)}
38
+            okText="确定"
39
+            cancelText="取消"
40
+          >
41
+            <Button style={{ padding: 0 }} type="link">
42
+              删除
43
+            </Button>
44
+          </Popconfirm>
45
+        ),
46
+        ...(columnOptionRender ? columnOptionRender(_, record) : []),
47
+      ].filter(Boolean),
48
+    },
49
+  ], [columns, onEdit, onDelete]);
50
+
51
+  React.useImperativeHandle(ref, () => {
52
+    const showLoading = msg => (hideRef.current = message.loading(msg || '操作中, 请稍候...'));
53
+    const hideLoading = () => hideRef.current && hideRef.current();
54
+    const reload = () => actionRef.current?.reload && actionRef.current.reload();
55
+
56
+    return {
57
+      showLoading,
58
+      hideLoading,
59
+      reload,
60
+      actionRef: actionRef,
61
+    }
62
+  }, []);
63
+
64
+  return (
65
+    <Page>
66
+      <ProTable
67
+        rowKey={rowKey}
68
+        columns={cols}
69
+        request={api}
70
+        cardBordered
71
+        actionRef={actionRef}
72
+        toolBarRender={() => [
73
+          (
74
+            onAdd && 
75
+            <Button
76
+              key="1"
77
+              type="primary"
78
+              onClick={onAdd}
79
+            >
80
+              新增
81
+            </Button>
82
+          ),
83
+          ...(toolBarRender ? toolBarRender() : []),
84
+        ].filter(Boolean)}
85
+        {...leftProps}
86
+      />
87
+    </Page>
88
+  )
89
+});

+ 24
- 0
src/components/Page/index.jsx Zobrazit soubor

@@ -0,0 +1,24 @@
1
+import React from 'react';
2
+import { Typography } from 'antd';
3
+import useRoute from '@/routes/hooks/useRoute';
4
+
5
+const pageStyle = {
6
+  margin: '0 24px 24px 24px',
7
+  // margin: '24px',
8
+  minHeight: 'calc(100% - 24px)',
9
+}
10
+const { Title } = Typography;
11
+
12
+export default (props) => {
13
+  console.log(props);
14
+  const { meta = {} } = useRoute() || {};
15
+  const style = meta.noLayout ? { height: '100%' } : pageStyle;
16
+  const title = props.title || meta.title;
17
+
18
+  return (
19
+    <div style={style}>
20
+      { title && !meta.noLayout && <Title level={3} style={{ paddingBottom: '12px', fontWeight: 400 }}>{ title }</Title> }
21
+      {props.children}
22
+    </div>
23
+  )
24
+}

+ 10
- 0
src/components/Upload/Upload.jsx Zobrazit soubor

@@ -0,0 +1,10 @@
1
+import { Upload } from 'antd';
2
+import { uploadFile } from './request'
3
+
4
+export default (props) => {
5
+  return (
6
+    <Upload {...props} customRequest={uploadFile} >
7
+      {props.children}
8
+    </Upload>
9
+  )
10
+}

+ 60
- 0
src/components/Upload/UploadImage.jsx Zobrazit soubor

@@ -0,0 +1,60 @@
1
+import React, { useState } from 'react';
2
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
3
+import Upload from './Upload';
4
+
5
+function beforeUpload(file) {
6
+  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'||file.type==='image/gif';
7
+  if (!isImage) {
8
+    message.error('请上传 JPG , PNG或GIF 图片!');
9
+  }
10
+  const isLt10M = file.size / 1024 / 1024 < 10;
11
+  if (!isLt10M) {
12
+    message.error('图片大小必须小于 10MB!');
13
+  }
14
+
15
+  return isImage && isLt10M;
16
+}
17
+
18
+const UploadButton = (props) => (
19
+  <div>
20
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
21
+    <div style={{ marginTop: 8 }}>上传</div>
22
+  </div>
23
+);
24
+
25
+export default (props) => {
26
+  const { value, onChange } = props;
27
+
28
+  const [loading, setLoading] = useState(false);
29
+
30
+  const handleChange = info => {
31
+    if (info.file.status === 'uploading') {
32
+      setLoading(true);
33
+      return;
34
+    }
35
+    if (info.file.status === 'error') {
36
+      setLoading(false);
37
+      return;
38
+    }
39
+
40
+    if (info.file.status === 'done') {
41
+      setLoading(false);
42
+      const { url, fileType } = info.file.response;
43
+      onChange(url);
44
+    }
45
+  };
46
+
47
+  const previewUrl = getRealPath ? getRealPath(value) : value;
48
+
49
+  return (
50
+    <Upload
51
+      listType="picture-card"
52
+      className="image-uploader"
53
+      showUploadList={false}
54
+      beforeUpload={beforeUpload}
55
+      onChange={handleChange}
56
+    >
57
+      {value ? <img src={previewUrl} alt="avatar" style={{ width: '100%', height: '100%' }} /> : <UploadButton loading={loading} />}
58
+    </Upload>
59
+  );
60
+}

+ 115
- 0
src/components/Upload/UploadImageList.jsx Zobrazit soubor

@@ -0,0 +1,115 @@
1
+
2
+import React, { useEffect, useState } from 'react';
3
+import { Modal } from 'antd'
4
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
5
+import Upload from './Upload';
6
+
7
+function beforeUpload(file) {
8
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/gif';
9
+  if (!isJpgOrPng) {
10
+    message.error('请上传 JPG,PNG 或 GIF 图片!');
11
+  }
12
+  const isLt10M = file.size / 1024 / 1024 < 10;
13
+  if (!isLt10M) {
14
+    message.error('图片大小必须小于 10MB!');
15
+  }
16
+
17
+  return isJpgOrPng && isLt10M;
18
+}
19
+
20
+const UploadButton = (props) => (
21
+  <div>
22
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
23
+    <div style={{ marginTop: 8 }}>上传</div>
24
+  </div>
25
+);
26
+
27
+export default (props) => {
28
+  const { value, onChange, input, output } = props;
29
+
30
+  const [loading, setLoading] = useState(false);
31
+  const [previewVisible, setPreviewVisible] = useState(false);
32
+  const [previewImage, setPreviewImage] = useState();
33
+  const [fileList, setFileList] = useState([]);
34
+
35
+  const handleChange = info => {
36
+    if (info.file.status === 'uploading') {
37
+      setLoading(true);
38
+      return;
39
+    }
40
+    if (info.file.status === 'error') {
41
+      setLoading(false);
42
+      return;
43
+    }
44
+
45
+    if (info.file.status === 'removed') {
46
+      toggleChange(info.fileList)
47
+    }
48
+  };
49
+
50
+  const handleSuccess = ({url}) => {
51
+    setLoading(false)
52
+    const inx = fileList?.length ? fileList.length + 1 : 1
53
+    const list = fileList.concat({
54
+      url,
55
+      uid: `new-${inx}`,
56
+      status: 'done'
57
+    })
58
+    toggleChange(list)
59
+  }
60
+
61
+  const toggleChange = (list) => {
62
+    if (output) {
63
+      onChange(list.map(x => output(x)))
64
+    } else {
65
+      onChange(list)
66
+    }
67
+  }
68
+
69
+  const handlePreview = (file) => {
70
+    setPreviewImage(file.url)
71
+    setPreviewVisible(true)
72
+  }
73
+
74
+  useEffect(() => {
75
+    if (input) {
76
+      const lst = (value || []).map((it) => {
77
+        const { uid, url } = input(it)
78
+        return {
79
+          uid,
80
+          url,
81
+          status: 'done',
82
+          raw: it,
83
+        }
84
+      })
85
+      setFileList(lst)
86
+    } else {
87
+      setFileList(value || [])
88
+    }
89
+  }, [value])
90
+
91
+  return (
92
+    <>
93
+      <Upload
94
+        listType="picture-card"
95
+        className="image-uploader"
96
+        fileList={fileList}
97
+        beforeUpload={beforeUpload}
98
+        onChange={handleChange}
99
+        onPreview={handlePreview}
100
+        onSuccess={handleSuccess}
101
+      >
102
+        <UploadButton loading={loading} />
103
+      </Upload>
104
+      <Modal
105
+        visible={previewVisible}
106
+        title="图片预览"
107
+        footer={null}
108
+        onCancel={() => setPreviewVisible(false)}
109
+      >
110
+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
111
+      </Modal>
112
+    </>
113
+  );
114
+}
115
+

+ 94
- 0
src/components/Upload/UploadVideo.jsx Zobrazit soubor

@@ -0,0 +1,94 @@
1
+import React, { useState, useRef, useEffect } from 'react';
2
+import { Button } from 'antd'
3
+import Upload from './Upload';
4
+// import { uplodeNoteImage } from '@/services/note';
5
+import styles from './style.less';
6
+
7
+function beforeUpload(file) {
8
+  const isMp4 = file.type === 'video/mp4';
9
+  if (!isMp4) {
10
+    message.error('请上传 MP4 视频!');
11
+  }
12
+
13
+  return isMp4;
14
+}
15
+
16
+export default (props) => {
17
+  //onPoster 改变主图事件   isScreenshot判断父组件是否需要截屏按钮
18
+  const { value, onChange, onPoster, isScreenshot } = props;
19
+  const [loading, setLoading] = useState(false);//上传按钮loading框
20
+  const [capturing, setCapturing] = useState(false);//截屏按钮loading框
21
+  const [video, setVideo] = useState()//当前上传的视频
22
+  const [isVideoReady, setIsVideoReady] = useState(false)//判断视频是否加载成功
23
+  
24
+  const canvasRef = useRef()
25
+  const videoRef = useRef()
26
+
27
+  useEffect(() => {
28
+    setVideo(value)//父组件的视频获取成功时改变当前页面的视频
29
+  }, [value])
30
+
31
+  const handleChange = info => {
32
+    if (info.file.status === 'uploading') {
33
+      setLoading(true);
34
+      return;
35
+    }
36
+    if (info.file.status === 'error') {
37
+      setLoading(false);
38
+      return;
39
+    }
40
+    if (info.file.status === 'done') {
41
+      onChange(info.file.response);
42
+      setLoading(false);
43
+    }
44
+  };
45
+
46
+  //开始截图
47
+  const handelScreenshot = () => {
48
+    const ctx = canvasRef.current.getContext("2d");  
49
+    ctx.drawImage(videoRef.current, 0, 0);    
50
+    const image = canvasRef.current.toDataURL("image/png", 0.9)
51
+    setCapturing(true)
52
+    // uplodeNoteImage({ base64: image }).then((res) => {
53
+    //   onPoster(res)
54
+    //   setCapturing(false)
55
+    // })
56
+  }
57
+
58
+  //视频加载成功事件
59
+  const handleVideoReady = (e) => {
60
+    setIsVideoReady(true)
61
+    canvasRef.current.width = e.target.videoWidth;
62
+    canvasRef.current.height = e.target.videoHeight;
63
+  }
64
+
65
+  return (
66
+    <div className={styles['video-uploader']}>
67
+      <Upload
68
+        className="image-uploader"
69
+        showUploadList={false}
70
+        beforeUpload={beforeUpload}
71
+        onChange={handleChange}
72
+      >
73
+        <div style={{ maxWidth: '1px', maxHeight: '1px', overflow: 'hidden' }}>
74
+          <canvas ref={canvasRef}></canvas>
75
+        </div>
76
+        <Button loading={loading}>
77
+          点击上传视频 (MP4)
78
+        </Button>
79
+
80
+      </Upload>
81
+      {
82
+        isScreenshot && (
83
+          // disabled={!isVideoReady} 当视频准备成功时截屏按钮可以点击  否则不能点击
84
+          <Button loading={capturing} style={{ marginLeft: '1em' }} onClick={handelScreenshot} disabled={!isVideoReady}>截屏</Button>
85
+        )
86
+      }
87
+      {
88
+        !!video && (
89
+          <video ref={videoRef} width="320" height='500' crossOrigin='anonymous' controls src={video} onCanPlay={handleVideoReady}></video>
90
+        )
91
+      }
92
+    </div>
93
+  );
94
+}

+ 11
- 0
src/components/Upload/index.jsx Zobrazit soubor

@@ -0,0 +1,11 @@
1
+import Upload from './Upload';
2
+import UploadImage from './UploadImage';
3
+import UploadImageList from './UploadImageList';
4
+import UploadVideo from './UploadVideo';
5
+
6
+export {
7
+  Upload,
8
+  UploadImage,
9
+  UploadImageList,
10
+  UploadVideo,
11
+}

+ 32
- 0
src/components/Upload/request.js Zobrazit soubor

@@ -0,0 +1,32 @@
1
+import request from '@/utils/request';
2
+
3
+const upload = (file, fileType = 'image') => {
4
+  const formData = new FormData();
5
+  formData.append("file", file);
6
+  formData.append("fileType", fileType);
7
+
8
+  return request('/api/admin/file', {
9
+    method: 'post',
10
+    data: formData,
11
+    headers: {
12
+      'Content-Type': 'multipart/form-data',
13
+    }
14
+  });
15
+}
16
+
17
+/**
18
+ * 上传文件
19
+ * @returns 
20
+ */
21
+export function uploadFile(params) {
22
+  const { file, onSuccess, onError } = params;
23
+  upload(file).then((res) => {
24
+    onSuccess(res, file)
25
+  }).catch((e) => {
26
+    onError(e)
27
+  });
28
+
29
+  return {
30
+    abort: () => {},
31
+  };
32
+}

+ 7
- 0
src/components/Upload/style.less Zobrazit soubor

@@ -0,0 +1,7 @@
1
+.video-uploader {
2
+  video {
3
+    margin-top: 2em;
4
+    width: 100%;
5
+    max-height: 360px;
6
+  }
7
+}

+ 87
- 0
src/components/Wangeditor/index.jsx Zobrazit soubor

@@ -0,0 +1,87 @@
1
+import React, { useState, useEffect } from "react";
2
+import "@wangeditor/editor/dist/css/style.css";
3
+import { Editor, Toolbar } from "@wangeditor/editor-for-react";
4
+
5
+// 工具栏配置参考
6
+// https://www.cnblogs.com/-roc/p/16400965.html
7
+
8
+const defaultStyle = {
9
+  border: "1px solid #ccc",
10
+  zIndex: 100,
11
+  marginTop: "15px"
12
+}
13
+
14
+function MyEditor(props) {
15
+
16
+  const style = React.useMemo(() => ({ ...defaultStyle, ...(props.style || {}) }), [props.style])
17
+
18
+  const {
19
+    value = "",
20
+    onChange = (e) => {
21
+      setHtml(e);
22
+    },
23
+    toolbarConfig = {
24
+      excludeKeys: ["group-image", "group-video"],
25
+    },
26
+    editorConfig = {
27
+      placeholder: "请输入内容...",
28
+    },
29
+    readonly = false,
30
+  } = props;
31
+  const [editor, setEditor] = useState(null); // 存储 editor 实例
32
+  const [html, setHtml] = useState("");
33
+ 
34
+  // 模拟 ajax 请求,异步设置 html
35
+  useEffect(() => {
36
+    setHtml(value || "");
37
+  }, [value]);
38
+
39
+  // 及时销毁 editor
40
+  useEffect(() => {
41
+    return () => {
42
+      if (editor == null) return;
43
+      editor.destroy();
44
+      setEditor(null);
45
+    };
46
+  }, [editor]);
47
+
48
+  function insertText() {
49
+    if (editor == null) return;
50
+    editor.insertText(" hello ");
51
+  }
52
+
53
+  function printHtml() {
54
+    if (editor == null) return;
55
+    console.log(editor.getHtml());
56
+  }
57
+
58
+  const handleChange = (editor) => {
59
+    const raw = editor.getHtml();
60
+    if (raw !== '<p><br></p>') {
61
+      onChange(raw)
62
+    }
63
+  }
64
+
65
+  return !readonly ? (
66
+    <div className={props.className} style={style}>
67
+      <Toolbar
68
+        editor={editor}
69
+        defaultConfig={toolbarConfig}
70
+        mode="default"
71
+        style={{ borderBottom: "1px solid #ccc" }}
72
+      />
73
+      <Editor
74
+        defaultConfig={editorConfig}
75
+        value={html}
76
+        onCreated={setEditor}
77
+        onChange={handleChange}
78
+        mode="default"
79
+        style={{ height: "500px" }}
80
+      />
81
+    </div>
82
+  ) : (
83
+    <div dangerouslySetInnerHTML={{ __html: value }}></div>
84
+  );
85
+}
86
+
87
+export default MyEditor;

+ 81
- 0
src/components/chart/index.jsx Zobrazit soubor

@@ -0,0 +1,81 @@
1
+import React, { useRef, useEffect } from 'react';
2
+
3
+// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
4
+import * as echarts from 'echarts/core';
5
+// 引入图表,图表后缀都为 Chart
6
+import {
7
+  BarChart,
8
+  PieChart,
9
+  LineChart,
10
+  GaugeChart,
11
+  RadarChart,
12
+  PictorialBarChart,
13
+} from 'echarts/charts';
14
+// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
15
+import {
16
+  TitleComponent,
17
+  TooltipComponent,
18
+  ToolboxComponent,
19
+  GridComponent,
20
+  DatasetComponent,
21
+  LegendComponent,
22
+  DataZoomComponent,
23
+  TransformComponent,
24
+  VisualMapComponent,
25
+} from 'echarts/components';
26
+// 标签自动布局,全局过渡动画等特性
27
+import { LabelLayout, UniversalTransition } from 'echarts/features';
28
+// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
29
+import { CanvasRenderer } from 'echarts/renderers';
30
+
31
+// 注册必须的组件
32
+echarts.use([
33
+  TitleComponent,
34
+  TooltipComponent,
35
+  ToolboxComponent,
36
+  GridComponent,
37
+  DatasetComponent,
38
+  LegendComponent,
39
+  DataZoomComponent,
40
+  TransformComponent,
41
+  VisualMapComponent,
42
+  BarChart,
43
+  PieChart,
44
+  LineChart,
45
+  GaugeChart,
46
+  RadarChart,
47
+  PictorialBarChart,
48
+  LabelLayout,
49
+  UniversalTransition,
50
+  CanvasRenderer
51
+]);
52
+
53
+export default (props) => {
54
+  const { className, style, option } = props;
55
+
56
+  const domRef = useRef();
57
+  const chartRef = useRef();
58
+
59
+  useEffect(() => {
60
+    if (!chartRef.current) {
61
+      chartRef.current = echarts.init(domRef.current);
62
+    }
63
+
64
+    const resize = () => {
65
+      const t = setTimeout(() => {
66
+        clearTimeout(t);
67
+        chartRef.current.resize();
68
+      }, 100);
69
+    };
70
+
71
+    chartRef.current.setOption(option);
72
+    resize();
73
+
74
+    window.addEventListener('resize', resize);    
75
+    return () => window.removeEventListener('resize', resize);
76
+  }, [option]);
77
+
78
+  return (
79
+    <div className={className} style={style} ref={domRef}></div>
80
+  )
81
+}

+ 71
- 0
src/index.less Zobrazit soubor

@@ -0,0 +1,71 @@
1
+@import './theme.less';
2
+
3
+html, body, #root {
4
+  width: 100%;
5
+  height: 100%;
6
+  margin: 0;
7
+}
8
+
9
+:root {
10
+  --theme-color: #fff;
11
+  --theme-front: #000;
12
+  --theme-main-bg: #f1f7fe; // #f0f2f5;
13
+  --header-height: 60px;
14
+  --siderbar-width: 240px;
15
+}
16
+
17
+.main-layout {
18
+  height: 100vh;
19
+  display: flex;
20
+  flex-direction: column;
21
+}
22
+
23
+.fixd-header {
24
+  width: 100%;
25
+  position: fixed;
26
+  top: 0;
27
+  height: var(--header-height);
28
+  line-height: var(--header-height);
29
+  z-index: 100;
30
+}
31
+
32
+.ant-layout-header {
33
+  line-height: var(--header-height);
34
+  z-index: 10;
35
+}
36
+
37
+.layout-sidebar {
38
+  width: var(--siderbar-width);
39
+  color: var(--theme-front);
40
+}
41
+
42
+.ant-card, .ant-pro-card {
43
+  border-radius: 8px !important;
44
+}
45
+
46
+
47
+// 兼容 360
48
+.ant-pro-sider-collapsed-button {
49
+  top: 18px;
50
+  right: -13px;
51
+}
52
+
53
+.ant-pro .ant-pro-layout .ant-pro-sider-logo {
54
+  padding: 16px;
55
+}
56
+
57
+.ant-pro .ant-pro-query-filter .ant-form-item {
58
+  margin: 0;
59
+}
60
+
61
+.ant-pro-page-container .ant-pro-page-container-warp-page-header ~ .ant-pro-grid-content .ant-pro-page-container-children-content {
62
+  margin: 8px 40px 40px 40px;
63
+}
64
+
65
+.ant-pro-table-list-toolbar-container {
66
+  padding: 16px 0;
67
+}
68
+
69
+.ant-pro-card .ant-pro-card-body {
70
+  padding: 16px 24px;
71
+}

+ 40
- 0
src/layouts/AuthLayout/Main.jsx Zobrazit soubor

@@ -0,0 +1,40 @@
1
+import React from "react";
2
+import { Layout } from "antd";
3
+import { useLocation, Outlet, useNavigate } from "react-router-dom";
4
+import { useModel } from "@/store";
5
+import useRoute from "@/routes/hooks/useRoute";
6
+import SiderBar from "./components/SiderBar";
7
+import Header from "./components/Header";
8
+import Container from "./components/Container";
9
+
10
+import "./style.less";
11
+
12
+export default (props) => {
13
+  const { theme } = useModel("system");
14
+  const { user, menus } = useModel("user");
15
+  const navigate = useNavigate();
16
+  const location = useLocation();
17
+  const { meta } = useRoute() || {};
18
+  const { noLayout = false, noSiderBar = false, noFooter = false } = meta || {};
19
+
20
+  // 非管理人员只能看到卡片
21
+  React.useEffect(() => {
22
+    if ("1" !== user?.orgId && "/appCenter" !== location.pathname) {
23
+      navigate("/appCenter", { replace: true });
24
+    }
25
+  }, [location.pathname, user?.orgId]);
26
+
27
+  return noLayout ? (
28
+    <Outlet />
29
+  ) : (
30
+    <Layout className={theme} style={{ height: "100vh" }}>
31
+      <Header theme={theme} user={user} />
32
+      <Layout style={{ height: "calc(100vh - var(--header-height))" }}>
33
+        {!noSiderBar && (
34
+          <SiderBar theme={theme} menus={menus} location={location} />
35
+        )}
36
+        <Container location={location} noFooter={noFooter} />
37
+      </Layout>
38
+    </Layout>
39
+  );
40
+};

+ 3
- 0
src/layouts/AuthLayout/RedirectLogin.jsx Zobrazit soubor

@@ -0,0 +1,3 @@
1
+import { Navigate } from "react-router-dom";
2
+
3
+export default () => <Navigate to="/login?back=true" />;

+ 72
- 0
src/layouts/AuthLayout/components/Background.jsx Zobrazit soubor

@@ -0,0 +1,72 @@
1
+import React from 'react'
2
+
3
+const wrapperStyle = {
4
+  width: '100%',
5
+  height: '100%',
6
+  position: 'absolute',
7
+  zIndex: 0,
8
+  top: 0,
9
+  left: 0,
10
+  overflow: 'hidden',
11
+}
12
+
13
+const colors = [
14
+  '#fff1f0',
15
+  '#fff2e8',
16
+  '#fff7e6',
17
+  '#fffbe6',
18
+  '#feffe6',
19
+  '#fcffe6',
20
+  '#f6ffed',
21
+  '#e6fffb',
22
+  '#e6f4ff',
23
+  '#f0f5ff',
24
+  '#f9f0ff',
25
+  '#fff0f6',
26
+]
27
+
28
+export default (props) => {
29
+  const ref = React.useRef();
30
+
31
+  const [color1, color2] = React.useMemo(() => {
32
+    const inx1 = Math.floor(Math.random() * colors.length);
33
+    const inx2 = Math.floor(Math.random() * colors.length);
34
+
35
+    return [colors[inx1], colors[inx2]];
36
+  }, []);
37
+
38
+  React.useEffect(() => {
39
+    const dom = ref.current;
40
+    const canvas = dom.firstElementChild;
41
+    canvas.width = dom.offsetWidth;
42
+    canvas.height = dom.offsetHeight;
43
+
44
+    const centerX = canvas.width / 2;
45
+    const centerY = canvas.height / 2;
46
+    const size = centerX / 3
47
+
48
+    const ctx = canvas.getContext("2d");
49
+    
50
+    ctx.filter = `blur(200px)`;
51
+
52
+    ctx.beginPath()
53
+    ctx.fillStyle = color1; // "#ffd8bf";
54
+    ctx.ellipse(centerX + 100, centerY + 80, size, size + Math.random() * 100, Math.PI / 4, 0, 2 * Math.PI);
55
+    ctx.fill();
56
+    ctx.closePath();
57
+
58
+    ctx.beginPath()
59
+    ctx.fillStyle = color2; // "#e6fffb";
60
+    ctx.ellipse(centerX + 400, centerY + 120, size, size + Math.random() * 100, Math.PI / 2, 0, 2 * Math.PI);
61
+    ctx.fill();
62
+    ctx.closePath();
63
+
64
+  }, []);
65
+
66
+  return (
67
+    <div ref={ref} style={wrapperStyle}>
68
+      <canvas>
69
+      </canvas>
70
+    </div>
71
+  )
72
+}

+ 31
- 0
src/layouts/AuthLayout/components/Container.jsx Zobrazit soubor

@@ -0,0 +1,31 @@
1
+import React from 'react';
2
+import { Layout } from 'antd';
3
+import { Outlet } from "react-router-dom";
4
+import PageTransition from './PageTransition';
5
+import Footer from './Footer';
6
+
7
+const { Content } = Layout;
8
+const marginSpace = 24;
9
+
10
+export default (props) => {
11
+  const { noFooter } = props;
12
+  const footerRef = React.useRef();
13
+  const [height, setHeight] = React.useState(`calc(100% - ${marginSpace * 2}px`);
14
+
15
+  React.useEffect(() => {
16
+    if (footerRef.current) {
17
+      setHeight(`calc(100% - ${footerRef.current.offsetHeight + marginSpace * 2}px)`);
18
+    }
19
+  }, [noFooter])
20
+
21
+  return (
22
+    <div className='layout-container'>
23
+      <Content style={{ minHeight: height, margin: `0 ${marginSpace}px`}}>
24
+        <PageTransition location={props.location}>
25
+          <Outlet />
26
+        </PageTransition>
27
+      </Content>
28
+      {!noFooter && <Footer ref={footerRef} />}
29
+    </div>
30
+  )
31
+}

+ 15
- 0
src/layouts/AuthLayout/components/Footer.jsx Zobrazit soubor

@@ -0,0 +1,15 @@
1
+import React from 'react';
2
+import { Layout } from 'antd';
3
+import { useModel } from '@/store';
4
+
5
+const { Footer } = Layout;
6
+
7
+const year = new Date().getFullYear();
8
+export default React.forwardRef((props, ref) => {
9
+  const { app } = useModel('system');
10
+  const copyRight = `${app.company || '南京云致'} @ ${year}`;
11
+
12
+  return (
13
+    <Footer ref={ref} style={{ textAlign: 'center', color: 'rgba(0,0,0, 0.3)' }}>{copyRight}</Footer>
14
+  )
15
+})

+ 35
- 0
src/layouts/AuthLayout/components/Header/Exit.jsx Zobrazit soubor

@@ -0,0 +1,35 @@
1
+import React from "react";
2
+import { useNavigate } from "react-router-dom";
3
+import { LogoutOutlined } from "@ant-design/icons";
4
+import { Button, Modal } from "antd";
5
+import { useModel } from "@/store";
6
+
7
+const { confirm } = Modal;
8
+
9
+export default (props) => {
10
+  const navigate = useNavigate();
11
+  const { setUser } = useModel("user");
12
+
13
+  const onExit = () => {
14
+    confirm({
15
+      title: "确认退出系统?",
16
+      onOk: () => {
17
+        // logout(); // 调用接口
18
+        localStorage.removeItem("token");
19
+        setUser();
20
+        navigate("/login?back=true");
21
+      },
22
+    });
23
+  };
24
+
25
+  return (
26
+    <Button
27
+      className="font"
28
+      type="text"
29
+      icon={<LogoutOutlined />}
30
+      onClick={onExit}
31
+    >
32
+      退出
33
+    </Button>
34
+  );
35
+};

+ 24
- 0
src/layouts/AuthLayout/components/Header/Title.jsx Zobrazit soubor

@@ -0,0 +1,24 @@
1
+
2
+import useRoute from '@/routes/hooks/useRoute';
3
+
4
+const titleStyle = {
5
+  margin: 0,
6
+}
7
+
8
+const spanStyle = {
9
+  display: 'inline-block',
10
+  width: '24px',
11
+  textAlign: 'center'
12
+}
13
+
14
+export default (props) => {
15
+  const route = useRoute();
16
+  const { title } = route && route.meta || {}
17
+
18
+  return (
19
+    <h5 style={titleStyle}>
20
+      { title && <span style={spanStyle}>&raquo;</span> }
21
+      { title && <span>{title}</span> }
22
+    </h5>
23
+  );
24
+}

+ 122
- 0
src/layouts/AuthLayout/components/Header/User.jsx Zobrazit soubor

@@ -0,0 +1,122 @@
1
+import React, {
2
+  useState,
3
+  forwardRef,
4
+  useRef,
5
+  useImperativeHandle,
6
+} from "react";
7
+import { Avatar, Dropdown } from "antd";
8
+import {
9
+  ModalForm,
10
+  ProFormText,
11
+  ProFormDependency,
12
+} from "@ant-design/pro-components";
13
+import md5 from "md5";
14
+import { changePassword } from "@/services/login";
15
+
16
+const DefaultAvatar = ({ color = "#1296db" }) => (
17
+  <svg
18
+    viewBox="0 0 1024 1024"
19
+    version="1.1"
20
+    xmlns="http://www.w3.org/2000/svg"
21
+    width="24"
22
+    height="24"
23
+  >
24
+    <path
25
+      d="M938.666667 883.2c0-8.533333 0-42.666667-21.333334-81.066667-12.8-25.6-34.133333-42.666667-59.733333-59.733333-29.866667-17.066667-68.266667-34.133333-115.2-42.666667-4.266667 0-34.133333-4.266667-59.733333-12.8-29.866667-8.533333-42.666667-12.8-46.933334-17.066666v-25.6c4.266667-55.466667 34.133333-85.333333 59.733334-110.933334 8.533333-8.533333 17.066667-17.066667 25.6-29.866666 29.866667-42.666667 34.133333-85.333333 34.133333-93.866667 0-8.533333 0-12.8-4.266667-21.333333s-8.533333-17.066667-12.8-21.333334c0-12.8 4.266667-25.6 4.266667-34.133333 0-21.333333 4.266667-55.466667-4.266667-89.6 0-4.266667 0-12.8-4.266666-21.333333-8.533333-25.6-17.066667-46.933333-34.133334-64-8.533333 0-68.266667-59.733333-230.4-72.533334H405.333333c-8.533333 0-17.066667 0-25.6 4.266667-29.866667 8.533333-34.133333 29.866667-38.4 38.4v25.6l-4.266666 4.266667c-4.266667 4.266667-46.933333 42.666667-51.2 93.866666-4.266667 34.133333-4.266667 85.333333 0 123.733334-4.266667 8.533333-12.8 17.066667-12.8 38.4 0 8.533333 4.266667 51.2 34.133333 89.6 8.533333 8.533333 12.8 17.066667 25.6 29.866666 25.6 29.866667 55.466667 59.733333 59.733333 110.933334v25.6c-8.533333 4.266667-21.333333 12.8-51.2 21.333333s-59.733333 12.8-64 12.8c-42.666667 8.533333-81.066667 21.333333-110.933333 38.4-25.6 17.066667-46.933333 38.4-59.733333 59.733333-21.333333 38.4-21.333333 72.533333-21.333334 81.066667v21.333333c0 17.066667 17.066667 34.133333 38.4 34.133334h776.533334c21.333333 0 38.4-17.066667 38.4-38.4v-17.066667z"
26
+      fill={color}
27
+    ></path>
28
+  </svg>
29
+);
30
+
31
+const ChangePassword = forwardRef((props, ref) => {
32
+  const { user } = props;
33
+
34
+  const [visible, setVisible] = useState(false);
35
+
36
+  const onFinish = async (values) => {
37
+    const data = {
38
+      originPassword: md5(values.password),
39
+      newPassword: md5(values.newPassword),
40
+    };
41
+
42
+    await changePassword(user.userId, data);
43
+
44
+    return true;
45
+  };
46
+
47
+  useImperativeHandle(ref, () => {
48
+    return {
49
+      show: () => setVisible(true),
50
+    };
51
+  });
52
+
53
+  return (
54
+    <ModalForm
55
+      title="修改密码"
56
+      width="480px"
57
+      open={visible}
58
+      onOpenChange={setVisible}
59
+      onFinish={onFinish}
60
+    >
61
+      <ProFormText.Password
62
+        label="原始密码"
63
+        name="password"
64
+        rules={[{ required: true, message: "请输入原始密码!" }]}
65
+      />
66
+      <ProFormText.Password
67
+        label="新密码"
68
+        name="newPassword"
69
+        rules={[{ required: true, message: "请输入新密码!" }]}
70
+      />
71
+
72
+      <ProFormDependency name={["newPassword"]}>
73
+        {({ newPassword }) => (
74
+          <ProFormText.Password
75
+            label="确认新密码"
76
+            name="newPassword2"
77
+            rules={[
78
+              { required: true, message: "请输入新密码!" },
79
+              () => ({
80
+                validator (_, value) {
81
+                  if (!value || value == newPassword) {
82
+                    return Promise.resolve();
83
+                  }
84
+
85
+                  return Promise.reject("两次输入密码不一致");
86
+                },
87
+              }),
88
+            ]}
89
+          />
90
+        )}
91
+      </ProFormDependency>
92
+    </ModalForm>
93
+  );
94
+});
95
+
96
+export default (props) => {
97
+  const items = [
98
+    {
99
+      key: "changePassword",
100
+      label: "修改密码",
101
+    },
102
+  ];
103
+
104
+  const passRef = useRef();
105
+  const { user = {} } = props;
106
+
107
+  const onClick = ({ key }) => {
108
+    if (key === "changePassword") {
109
+      passRef.current.show();
110
+    }
111
+  };
112
+
113
+  return (
114
+    <Dropdown menu={{ items, onClick }}>
115
+      <div className="user-info">
116
+        <Avatar size={24} src={user.avatar || <DefaultAvatar />} />
117
+        <span className="font">{user.name}</span>
118
+        <ChangePassword user={user} ref={passRef} />
119
+      </div>
120
+    </Dropdown>
121
+  );
122
+};

+ 28
- 0
src/layouts/AuthLayout/components/Header/index.jsx Zobrazit soubor

@@ -0,0 +1,28 @@
1
+import React, { useMemo } from 'react';
2
+import { Layout, Space } from 'antd';
3
+import classNames from 'classnames';
4
+import Title from './Title';
5
+import User from './User';
6
+import Exit from './Exit';
7
+import Logo from '../Logo';
8
+
9
+const { Header } = Layout;
10
+
11
+export default (props) => {
12
+  const { user } = props;
13
+
14
+  const className = useMemo(() => classNames({
15
+    'layout-header': true,
16
+    'light': props.theme === 'light',
17
+  }), [props.theme]);
18
+
19
+  return (
20
+    <Header className={className}>
21
+      <Logo />
22
+      <Space>
23
+        <User user={user} />
24
+        <Exit />
25
+      </Space>
26
+    </Header>
27
+  )
28
+}

+ 19
- 0
src/layouts/AuthLayout/components/HtmlTitle.jsx Zobrazit soubor

@@ -0,0 +1,19 @@
1
+
2
+import { Helmet } from "react-helmet";
3
+import { useModel } from '@/store';
4
+import useRoute from '@/routes/hooks/useRoute';
5
+
6
+export default (props) => {
7
+  const { app } = useModel('system');
8
+  const route = useRoute();
9
+  const { title } = route && route.meta || {}
10
+  
11
+  const titleTemplate = `%s - ${app.fullName}`;
12
+  const defaultTitle = app.fullName;
13
+
14
+  return (
15
+    <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle}>
16
+      <title>{title}</title>
17
+    </Helmet>
18
+  );
19
+}

+ 17
- 0
src/layouts/AuthLayout/components/Logo.jsx Zobrazit soubor

@@ -0,0 +1,17 @@
1
+import React from 'react';
2
+import { Typography } from 'antd';
3
+import { NavLink } from "react-router-dom";
4
+import { useModel } from '@/store';
5
+
6
+export default (props) => {
7
+  const { app } = useModel('system');
8
+
9
+  return (
10
+    // <NavLink className='logo'  to="/">
11
+    <div className="logo">
12
+      <img src="./logo.png" alt="" />
13
+      <h3>{app.shorName}</h3>
14
+    </div>
15
+    // </NavLink>
16
+  )
17
+}

+ 32
- 0
src/layouts/AuthLayout/components/Menus.jsx Zobrazit soubor

@@ -0,0 +1,32 @@
1
+import React from 'react';
2
+import { Menu } from 'antd';
3
+
4
+const menuStyle = { height: '100%' };
5
+
6
+export default (props) => {
7
+  const { theme, items, location } = props;
8
+
9
+  // const selectedKeys = React.useMemo(() => {
10
+  //   const parts = location.pathname.split('/').filter(Boolean);
11
+  //   const keys = parts.reduce((acc, it) => {
12
+  //     const parent = acc.pop();
13
+  //     const path = !parent ? `/${it}` : `${parent}/${it}`
14
+
15
+  //     return acc.concat([parent, path].filter(Boolean));
16
+  //   }, []);
17
+
18
+  //   return keys;
19
+  // }, [location.pathname]);
20
+
21
+  const selectedKeys = [location.pathname];
22
+
23
+  return (
24
+    <Menu
25
+      mode="inline"
26
+      style={menuStyle}
27
+      theme={theme}
28
+      items={items}
29
+      selectedKeys={selectedKeys}
30
+    />
31
+  )
32
+}

+ 21
- 0
src/layouts/AuthLayout/components/PageTransition/index.jsx Zobrazit soubor

@@ -0,0 +1,21 @@
1
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
2
+import './style.less';
3
+
4
+export default (props) => {
5
+  const { location } = props;
6
+  const currentURL = location.pathname + location.search;
7
+
8
+  return (
9
+    <TransitionGroup component={null}>
10
+      <CSSTransition
11
+        key={currentURL}
12
+        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
13
+        classNames="page-fade"
14
+      >
15
+        <div style={{ height: '100%' }}>
16
+          {props.children}
17
+        </div>
18
+      </CSSTransition>
19
+    </TransitionGroup>
20
+  );
21
+}

+ 21
- 0
src/layouts/AuthLayout/components/PageTransition/style.less Zobrazit soubor

@@ -0,0 +1,21 @@
1
+
2
+.page-fade-enter {
3
+  opacity: 0;
4
+  transform: translateY(10%);
5
+}
6
+.page-fade-enter-active {
7
+  opacity: 1;
8
+  transform: translateY(0%);
9
+}
10
+.page-fade-exit {
11
+  opacity: 0; // 1;
12
+  transform: translateY(0%);
13
+}
14
+.page-fade-exit-active {
15
+  opacity: 0;
16
+  transform: translateY(10%);
17
+}
18
+.page-fade-enter-active,
19
+.page-fade-exit-active {
20
+  transition: opacity 220ms, transform 220ms;
21
+}

+ 22
- 0
src/layouts/AuthLayout/components/SiderBar.jsx Zobrazit soubor

@@ -0,0 +1,22 @@
1
+import React, { useMemo } from 'react';
2
+import { Layout, Spin } from 'antd';
3
+import { getPropertyValue } from '@/utils/css';
4
+import Menus from './Menus';
5
+
6
+const { Sider } = Layout;
7
+
8
+
9
+export default (props) => {
10
+  const { theme, location, menus } = props;
11
+
12
+  const width = useMemo(() => {
13
+    return /\d+/.exec(getPropertyValue('--siderbar-width'))[0] - 0;
14
+  }, []);
15
+
16
+
17
+  return (
18
+    <Sider className='layout-sidebar' theme={theme} collapsible width={width}>
19
+      <Menus theme={theme} items={menus} location={location} />
20
+    </Sider>
21
+  );
22
+}

+ 33
- 0
src/layouts/AuthLayout/index.jsx Zobrazit soubor

@@ -0,0 +1,33 @@
1
+import React from "react";
2
+import { Spin } from "antd";
3
+import HtmlTitle from "./components/HtmlTitle";
4
+// import Main from './Main';
5
+import withLogin from "./withLogin";
6
+
7
+const Spinner = () => (
8
+  <div
9
+    style={{
10
+      width: "100%",
11
+      height: "100%",
12
+      display: "grid",
13
+      placeItems: "center",
14
+    }}
15
+  >
16
+    <Spin />
17
+  </div>
18
+);
19
+
20
+export default (props) => {
21
+  const RequireLogin = React.lazy(() => {
22
+    return withLogin(import("./Main"));
23
+  });
24
+
25
+  return (
26
+    <>
27
+      <HtmlTitle />
28
+      <React.Suspense fallback={<Spinner />}>
29
+        <RequireLogin />
30
+      </React.Suspense>
31
+    </>
32
+  );
33
+};

+ 80
- 0
src/layouts/AuthLayout/style.less Zobrazit soubor

@@ -0,0 +1,80 @@
1
+.layout-header {
2
+  height: var(--header-height);
3
+  box-sizing: border-box;
4
+  padding: 0;
5
+  display: flex;
6
+  align-items: center;
7
+  justify-content: space-between;
8
+  color: #fff;
9
+
10
+  &.light {
11
+    color: #000;
12
+  }
13
+
14
+  .header-content {
15
+    flex: 1;
16
+  }
17
+
18
+  .font {
19
+    color: inherit;
20
+    display: inline-block;
21
+  }
22
+
23
+  .user-info {
24
+    cursor: pointer;
25
+
26
+    .ant-avatar {
27
+      border: 1px solid rgba(255, 255, 255, 0.4);
28
+    }
29
+
30
+    span {
31
+      margin-left: 1em;
32
+    }
33
+  }
34
+
35
+  .sys-exit {
36
+    margin-right: 1em;
37
+  }
38
+}
39
+
40
+.logo {
41
+  height: var(--header-height);
42
+  display: flex;
43
+  align-items: center;
44
+  box-sizing: border-box;
45
+  padding-left: 1em;
46
+  color: inherit;
47
+
48
+  & > * {
49
+    color: inherit;
50
+    margin: 0;
51
+  }
52
+
53
+  h5 {
54
+    margin: 0;
55
+  }
56
+
57
+  img {
58
+    width: 28px;
59
+    vertical-align: middle;
60
+    margin-right: 1em;
61
+  }
62
+}
63
+
64
+.layout-container {
65
+  flex: 1;
66
+
67
+  overflow-y: auto;
68
+  scrollbar-width: none;
69
+  -ms-overflow-style: none;
70
+
71
+  &::--webkit-scrollbar {
72
+    display: none;
73
+  }
74
+
75
+  padding-top: 0; // 避免子元素的 margin 影响
76
+}
77
+
78
+.ant-menu-vertical {
79
+  border: none;
80
+}

+ 28
- 0
src/layouts/AuthLayout/withLogin.jsx Zobrazit soubor

@@ -0,0 +1,28 @@
1
+import React from "react";
2
+import store from "@/store";
3
+
4
+export default function withLogin(factory) {
5
+  return new Promise((resolve) => {
6
+    const { user, getCurrentUser } = store.getState("user");
7
+    const loged = user && (user.userId || user.id);
8
+
9
+    if (loged) {
10
+      resolve(factory);
11
+    } else {
12
+      let ticket = undefined;
13
+      const match = window.location?.href?.match(/ticket=([^?&/]*)/);
14
+      if (match?.length > 0) {
15
+        ticket = match[1];
16
+      }
17
+
18
+      getCurrentUser({ ticket: ticket })
19
+        .then(() => {
20
+          resolve(factory);
21
+        })
22
+        .catch((e) => {
23
+          console.error(e);
24
+          resolve(import("./RedirectLogin"));
25
+        });
26
+    }
27
+  });
28
+}

+ 16
- 0
src/main.jsx Zobrazit soubor

@@ -0,0 +1,16 @@
1
+import React from 'react';
2
+import ReactDOM from 'react-dom/client';
3
+import Background from './layouts/AuthLayout/components/Background';
4
+import Router from './routes/Router';
5
+import './index.less';
6
+import { Provider } from './store';
7
+import { initTokenIfExists } from './utils/sso';
8
+
9
+initTokenIfExists();
10
+
11
+ReactDOM.createRoot(document.getElementById('root')).render(
12
+  <Provider>
13
+    <Background />
14
+    <Router />
15
+  </Provider>
16
+);

+ 29
- 0
src/pages/404/index.jsx Zobrazit soubor

@@ -0,0 +1,29 @@
1
+import React from 'react';
2
+import { Button, Result } from 'antd';
3
+import { Helmet } from "react-helmet";
4
+import { NavLink } from "react-router-dom";
5
+import { useModel } from '@/store';
6
+
7
+const style = {
8
+  display: 'grid',
9
+  placeItems: 'center',
10
+  height: '100%'
11
+}
12
+
13
+export default (props) => {
14
+  const { app } = useModel('system');
15
+
16
+  return (
17
+    <div style={style}>
18
+      <Helmet>
19
+        <title>{app.fullName}</title>
20
+      </Helmet>
21
+      <Result
22
+        status="404"
23
+        title="404"
24
+        subTitle="页面不存在"
25
+        extra={<NavLink to="/" replace><Button type="primary">返回首页</Button></NavLink>}
26
+      />
27
+    </div>
28
+  )
29
+}

+ 11
- 0
src/pages/login/Effect.jsx Zobrazit soubor

@@ -0,0 +1,11 @@
1
+import React from "react";
2
+
3
+export default (props) => {
4
+  return (
5
+    <div className="login-effect-box">
6
+      <div className="login-effect">
7
+        <div className="login-effect-arc"></div>
8
+      </div>
9
+    </div>
10
+  );
11
+};

+ 54
- 0
src/pages/login/LoginForm.jsx Zobrazit soubor

@@ -0,0 +1,54 @@
1
+import React from "react";
2
+import md5 from "md5";
3
+import { Button, Form, Input } from "antd";
4
+import { login } from "@/services/login";
5
+
6
+export default (props) => {
7
+  const { onSuccess, mode, appid } = props;
8
+  const [form] = Form.useForm();
9
+  const [loading, setLoading] = React.useState(false);
10
+  const onFinish = (values) => {
11
+    const formData = new FormData();
12
+    formData.append("name", values.name);
13
+    formData.append("pwd", md5(values.pwd));
14
+    if (mode) {
15
+      formData.append("mode", mode);
16
+    }
17
+    formData.append("client", appid);
18
+
19
+    setLoading(true);
20
+    login(formData)
21
+      .then((res) => {
22
+        onSuccess(res);
23
+        setLoading(false);
24
+      })
25
+      .catch((err) => {
26
+        console.log('----err--', err);
27
+        setLoading(false);
28
+      });
29
+  };
30
+  return (
31
+    <Form form={form} layout="vertical" onFinish={onFinish}>
32
+      <Form.Item label="用户名" name="name" required>
33
+        <Input placeholder="请输入用户名" style={{ borderRadius: "4px" }} />
34
+      </Form.Item>
35
+      <Form.Item label="密 码" name="pwd" required>
36
+        <Input.Password
37
+          placeholder="请输入密码"
38
+          style={{ borderRadius: "4px" }}
39
+        />
40
+      </Form.Item>
41
+      <Form.Item>
42
+        <Button
43
+          type="primary"
44
+          size="large"
45
+          style={{ width: "100%", marginTop: "24px", borderRadius: "4px" }}
46
+          loading={loading}
47
+          htmlType="submit"
48
+        >
49
+          登录
50
+        </Button>
51
+      </Form.Item>
52
+    </Form>
53
+  );
54
+};

+ 45
- 0
src/pages/login/LoginUse.jsx Zobrazit soubor

@@ -0,0 +1,45 @@
1
+import React from "react";
2
+import { Button, Form, Input } from "antd";
3
+export default (props) => {
4
+  const { loading, checkLoginwx } = props;
5
+  console.log(loading);
6
+  const style = {
7
+    display: "flex",
8
+    justifyContent: "flex-end",
9
+    cursor: "pointer",
10
+    color: "#576b95",
11
+    position: "absolute",
12
+    top: "0",
13
+    right: "0",
14
+    height: "33px",
15
+    lineHeight: "33px",
16
+  };
17
+  return (
18
+    <>
19
+      <span style={style} onClick={checkLoginwx}>
20
+        使用二维码登录
21
+      </span>
22
+
23
+      <Form.Item label="用户名" name="name" required>
24
+        <Input placeholder="请输入用户名" style={{ borderRadius: "4px" }} />
25
+      </Form.Item>
26
+      <Form.Item label="密 码" name="pwd" required>
27
+        <Input.Password
28
+          placeholder="请输入密码"
29
+          style={{ borderRadius: "4px" }}
30
+        />
31
+      </Form.Item>
32
+      <Form.Item>
33
+        <Button
34
+          type="primary"
35
+          size="large"
36
+          style={{ width: "100%", marginTop: "24px", borderRadius: "4px" }}
37
+          loading={loading}
38
+          htmlType="submit"
39
+        >
40
+          登录
41
+        </Button>
42
+      </Form.Item>
43
+    </>
44
+  );
45
+};

+ 159
- 0
src/pages/login/components/LoginQrCode.jsx Zobrazit soubor

@@ -0,0 +1,159 @@
1
+import React from 'react';
2
+import { Button } from 'antd';
3
+import { qrCode, postQrCode } from "@/services/login";
4
+import QrCode from './QrCode';
5
+import SuccessIcon from './SuccessIcon';
6
+import styles from './qrcode.module.less';
7
+
8
+// 轮询
9
+const polling = (p, delay) => {
10
+  let t = null;
11
+  let cancelled = false;
12
+
13
+  const clearTicker = () => {
14
+    if (t) {
15
+      clearTimeout(t);
16
+      t = null;
17
+    }
18
+  }
19
+
20
+  const cancel = () => {
21
+    cancelled = true;
22
+    clearTimeout(t);
23
+  };
24
+
25
+  const fn = () => {
26
+    p().then((done) => {
27
+      clearTicker();
28
+
29
+      if (!done && !cancelled) {
30
+        t = setTimeout(fn, delay);
31
+      }
32
+    }).catch(() => {
33
+      clearTicker();
34
+    });
35
+  }
36
+
37
+  fn();
38
+
39
+  return cancel;
40
+};
41
+
42
+export default (props) => {
43
+  const { onSuccess, mode, appid } = props;
44
+
45
+  // 二维码是否初始化
46
+  const [qrInited, setQrInited] = React.useState(false);
47
+  // 是否扫码
48
+  const [scaned, setScaned] = React.useState(false);
49
+  // 二维码数据
50
+  const [qrData, setQrData] = React.useState();
51
+  // 是否发生错误
52
+  const [hasError, setHasError] = React.useState(false);
53
+  // 提示信息
54
+  const [tips, setTips] = React.useState();
55
+  // 停止轮询控制器
56
+  const pollingCancel = React.useRef();
57
+
58
+  // 重新开始
59
+  const onReset = () => {
60
+    // 停止轮询
61
+    if (pollingCancel.current) {
62
+      pollingCancel.current();
63
+    }
64
+
65
+    setQrInited(false);
66
+    setScaned(false);
67
+    setHasError(false);
68
+  }
69
+
70
+  // 校验二维码各种状态
71
+  const checkQrCode = React.useCallback((qrId, params) => {
72
+    return new Promise((resolve, reject) => {
73
+      postQrCode(qrId, params).then(res => {
74
+        // 带有 token 说明扫码登录成功
75
+        if (res.token) {
76
+          onSuccess(res);
77
+          resolve(true);
78
+          return;
79
+        } else {
80
+          // state 与 stateLabels 是对应关系
81
+          const { state } = res;
82
+          const stateLabels = [
83
+            '未扫码',
84
+            '扫码成功, 请确认登录',
85
+            '扫码确认',
86
+            '已取消',
87
+            '已删除',
88
+          ]
89
+
90
+          const isError = state > 2;
91
+          setScaned(state == 1);
92
+          setHasError(isError);
93
+          setTips(stateLabels[state]);
94
+
95
+          if (isError) {
96
+            reject();
97
+          } else {
98
+            resolve();
99
+          }
100
+        }
101
+      }).catch((err) => {
102
+        console.error(err);
103
+        setTips(err.data.msg || err.message || err);
104
+
105
+        setScaned(false);
106
+        setHasError(true);
107
+        reject();
108
+      });
109
+    });
110
+  }, []);
111
+
112
+  // 请求二维码
113
+  React.useEffect(() => {
114
+    if (!qrInited) {
115
+      qrCode({ client: appid || "authcenter" }).then(res => {
116
+        setQrData(res);
117
+        setQrInited(true);
118
+
119
+        // 开启轮询
120
+        const fn = () => checkQrCode(res.id, { mode });
121
+        pollingCancel.current = polling(fn, 1000);
122
+      })
123
+    }
124
+  }, [qrInited, mode]);
125
+
126
+  return (
127
+    <div className={styles['qr-form']}>
128
+      <div className={styles['qr-form-wrapper']}>
129
+
130
+        <div className={styles['qr-box']}>
131
+          <QrCode text={qrData?.qrCode} />
132
+        </div>
133
+
134
+        {
135
+          (scaned || hasError) && (
136
+            <div className={styles['status-box']}>
137
+              <div>
138
+                {
139
+                  scaned && !hasError && <SuccessIcon />
140
+                }
141
+                <div className={styles['status-tip']}>{tips}</div>
142
+                <Button type='link' onClick={onReset}>点击刷新</Button>
143
+              </div>
144
+            </div>
145
+          )
146
+        }
147
+
148
+      </div>
149
+
150
+      <div className={styles['tip-box']}>
151
+        {
152
+          qrInited && !hasError && (
153
+            <div>请使用行信扫码登录</div>
154
+          )
155
+        }
156
+      </div>
157
+    </div>
158
+  )
159
+}

+ 34
- 0
src/pages/login/foo.js Zobrazit soubor

@@ -0,0 +1,34 @@
1
+const { postQrCode } = require("@/services/login");
2
+
3
+const foo = (fp, delay) => {
4
+
5
+    let t = null;
6
+
7
+    const fn = () => {
8
+        fp().then(() => {
9
+            if (t) {
10
+                clearTimeout(t);
11
+            }
12
+
13
+            t = setTimeout(fn, delay);
14
+        }).catch(() => {
15
+            if (t) {
16
+                clearTimeout(t);
17
+            }
18
+        });
19
+    }
20
+}
21
+
22
+const fp = () => {
23
+    return new Promise((resovle, reject) => {
24
+        postQrCode().then(() => {
25
+            if (succes) {
26
+                resovle()
27
+            } else {
28
+                reject()
29
+            }
30
+        }).catch(() => {
31
+            reject()
32
+        });
33
+    });
34
+}

+ 91
- 0
src/pages/login/index.jsx Zobrazit soubor

@@ -0,0 +1,91 @@
1
+import React, { useEffect } from "react";
2
+import { Button } from "antd";
3
+import { Helmet } from "react-helmet";
4
+import { useNavigate, useSearchParams } from "react-router-dom";
5
+import { useModel } from "@/store";
6
+import LoginForm from "./LoginForm";
7
+import LoginEffect from "./Effect";
8
+import "./style.less";
9
+
10
+const year = new Date().getFullYear();
11
+
12
+export default (props) => {
13
+  const { app } = useModel("system");
14
+  const navigate = useNavigate();
15
+  const [searchParams] = useSearchParams();
16
+
17
+  const baseUrl = import.meta.env.BASE_URL;
18
+  const title = `欢迎使用${app.fullName}`;
19
+  const copyright = `${app.company} @ ${year}`;
20
+
21
+  useEffect(() => {
22
+    const oScript = document.createElement("script");
23
+    oScript.type = "text/javascript";
24
+    oScript.onload = () => {
25
+      particlesJS.load(
26
+        "particles-js",
27
+        `${baseUrl}particles/particles.json`,
28
+        function () {
29
+          console.log("callback - particles.js config loaded");
30
+        }
31
+      );
32
+    };
33
+    document.querySelector("head").appendChild(oScript);
34
+    oScript.src = `${baseUrl}particles/particles.min.js`;
35
+
36
+    return () => {
37
+      document.querySelector("head").removeChild(oScript);
38
+    };
39
+  }, []);
40
+
41
+  const onSuccess = ({ ticket }) => {
42
+    if (searchParams.get("redirect")) {
43
+      const redirect = decodeURIComponent(searchParams.get("redirect"));
44
+      let herf = "";
45
+      if (redirect.indexOf("#") === -1) {
46
+        herf = redirect + `#/?ticket=${ticket}`;
47
+      } else if (redirect.indexOf("?") > -1) {
48
+        herf = redirect + `ticket=${ticket}`;
49
+      } else {
50
+        herf = redirect + `?ticket=${ticket}`;
51
+      }
52
+      window.location.href = herf;
53
+    } else if (searchParams.get("back")) {
54
+      navigate(-1);
55
+    } else {
56
+      navigate("/");
57
+    }
58
+  };
59
+
60
+  return (
61
+    <div className="login-page">
62
+      <Helmet>
63
+        <title>{app.fullName}</title>
64
+      </Helmet>
65
+      <div id="particles-js"></div>
66
+      <div className="login-page-container">
67
+        <div className="login-card">
68
+          <div className="login-card-left">
69
+            <div className="login-form-box">
70
+              <div className="login-form">
71
+                <h2>
72
+                  <span>登录系统</span>
73
+                </h2>
74
+                <div className="login-subtitle">{title}</div>
75
+                <LoginForm
76
+                  mode={searchParams.get("mode")}
77
+                  appid={searchParams.get("appid")}
78
+                  onSuccess={onSuccess}
79
+                />
80
+              </div>
81
+            </div>
82
+            <div className="login-copyright">{copyright}</div>
83
+          </div>
84
+          <div className="login-card-right">
85
+            <LoginEffect />
86
+          </div>
87
+        </div>
88
+      </div>
89
+    </div>
90
+  );
91
+};

+ 77
- 0
src/pages/login/qrcode.less Zobrazit soubor

@@ -0,0 +1,77 @@
1
+ .pageQr{
2
+  position: relative;
3
+  width: 180px;
4
+  height: 180px;
5
+  margin: 0 auto;
6
+  // top: 50%;
7
+  .loginPage,.loginSvg{
8
+    display: table;
9
+      position: absolute;
10
+      top: 100%;
11
+      left: 40%;
12
+      text-align: center;
13
+      width: 180px;
14
+      height: 180px;
15
+      margin-left: -61px;
16
+      margin-top: -132px;
17
+      background-color: #fffffff5;
18
+      .loginLap{
19
+        display: table-cell;
20
+    vertical-align: middle;
21
+      }
22
+
23
+  }
24
+
25
+  .loginSvg{
26
+.ScanningCode{
27
+  display: block;
28
+  // cursor: pointer;
29
+}
30
+
31
+  }
32
+  .newCode{
33
+    position: absolute;
34
+    top: 100%;
35
+    right: 37%;
36
+    cursor: pointer;
37
+    color: #576b95;
38
+    text-decoration: none;
39
+  }
40
+  .qrcode{
41
+    width: 178px;
42
+    height: 150px;
43
+    margin: auto;
44
+    position: absolute;
45
+    top: 30%;
46
+    span{
47
+      display: block;
48
+      text-align: center; 
49
+      padding-top:10px ;
50
+    }
51
+    .qrBoder{
52
+      box-sizing: border-box;
53
+    border: 1px solid #e2e2e2;
54
+    width: 180px;
55
+    height: 180px;
56
+    text-align: -webkit-center;
57
+    img{
58
+      position: absolute;
59
+    top: 10%;
60
+    right: 6%;
61
+    }
62
+    }
63
+  }
64
+ }
65
+
66
+ .pageUse{
67
+  display: flex;
68
+  justify-content: flex-end;
69
+  cursor: pointer;
70
+  color: #576b95;
71
+  
72
+  position: absolute;
73
+  top: 0;
74
+  right: 0;
75
+  height: 33px;
76
+  line-height: 33px;
77
+}

+ 109
- 0
src/pages/login/style.less Zobrazit soubor

@@ -0,0 +1,109 @@
1
+
2
+.login-page {
3
+  height: 100%;
4
+  background: linear-gradient(#fff, #e6f7ff);
5
+
6
+  #particles-js {
7
+    position: absolute;
8
+    top: 0;
9
+    left: 0;
10
+    width: 100%;
11
+    height: 100%;
12
+  }
13
+
14
+  .login-page-container {
15
+    height: 100%;
16
+    display: grid;
17
+    place-items: center;
18
+    position: relative;
19
+    z-index: 10;
20
+  }
21
+
22
+  .login-card {
23
+    width: 900px;
24
+    height: 600px;
25
+    border-radius: 12px;
26
+    overflow: hidden;
27
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
28
+    
29
+    display: grid;
30
+    grid-template-columns: 1fr 1fr;
31
+  }
32
+
33
+  .login-card-left {
34
+    background: rgba(255, 255, 255, 0.6);
35
+    backdrop-filter: blur(4px);
36
+  }
37
+  .login-card-right {
38
+    background: rgba(239, 246, 250, .85);
39
+  }
40
+
41
+  .login-form-box {
42
+    height: 560px;
43
+    display: grid;
44
+    place-items: center;
45
+
46
+    .login-form {
47
+      min-width: 280px;
48
+      position: absolute;
49
+
50
+      & > h2 {
51
+        display: flex;
52
+        justify-content: space-between;
53
+        text-align: center;
54
+
55
+        & > span {
56
+          display: flex;
57
+          align-items: center;
58
+        }
59
+      }
60
+    }
61
+
62
+    .login-subtitle {
63
+      font-size: .9em;
64
+      color: #666;
65
+      margin-bottom: 24px;
66
+      letter-spacing: 2px;
67
+    }
68
+  }
69
+
70
+  .login-effect-box {
71
+    height: 100%;
72
+    display: grid;
73
+    place-items: center;
74
+
75
+    .login-effect {
76
+      width: 180px;
77
+      height: 180px;
78
+      position: relative;
79
+    }
80
+
81
+    .login-effect-arc {
82
+      width: 100%;
83
+      height: 100%;
84
+      border-radius: 50%;
85
+      background-color: #fa8c16;
86
+
87
+      &::after {
88
+        content: '';
89
+        width: 200%;
90
+        height: 100%;
91
+        top: 50%;
92
+        left: -50%;
93
+        position: absolute;
94
+        z-index: 10;
95
+        background-color: rgba(255, 255, 255, 0.001);
96
+        backdrop-filter: blur(16px);
97
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
98
+      }
99
+    }
100
+  }
101
+
102
+  .login-copyright {
103
+    font-size: 12px;
104
+    color: #666;
105
+    line-height: 40px;
106
+    padding-left: 20px;
107
+    box-sizing: border-box;
108
+  }
109
+}

+ 85
- 0
src/pages/org/components/Form.jsx Zobrazit soubor

@@ -0,0 +1,85 @@
1
+import React from "react";
2
+import { Button, Form, Input, Select } from "antd";
3
+import useBool from "@/utils/hooks/useBool";
4
+// import { postSysOrg, putSysOrg } from "@/services/sysorg";
5
+import { formItemLayout, tailFormItemLayout } from "@/utils/form";
6
+
7
+export default (props) => {
8
+  const { org, list, parentId, onChange } = props;
9
+
10
+  const [submiting, startSubmit, cancelSubmit] = useBool();
11
+  const [form] = Form.useForm();
12
+
13
+  const onFinish = (values) => {
14
+    startSubmit();
15
+    // if (org?.orgId) {
16
+    //   // 修改
17
+    //   putSysOrg(org.orgId, values)
18
+    //     .then((res) => {
19
+    //       cancelSubmit();
20
+    //       onChange(res);
21
+    //     })
22
+    //     .catch(() => {
23
+    //       cancelSubmit();
24
+    //     });
25
+    // } else {
26
+    //   // 新增
27
+    //   postSysOrg(values)
28
+    //     .then((res) => {
29
+    //       cancelSubmit();
30
+    //       onChange(res);
31
+    //     })
32
+    //     .catch(() => {
33
+    //       cancelSubmit();
34
+    //     });
35
+    // }
36
+  };
37
+
38
+  React.useEffect(() => {
39
+    console.log(list);
40
+    form.resetFields();
41
+    if (org) {
42
+      form.setFieldsValue(org);
43
+    } else {
44
+      form.setFieldValue("parentId", parentId);
45
+    }
46
+
47
+    console.log(org, parentId);
48
+  }, [org, parentId]);
49
+
50
+  return (
51
+    <Form
52
+      form={form}
53
+      {...formItemLayout}
54
+      style={{ maxWidth: "800px" }}
55
+      onFinish={onFinish}
56
+    >
57
+      <Form.Item
58
+        name="name"
59
+        label="机构名称"
60
+        rules={[{ required: true, message: "请填写机构名称" }]}
61
+      >
62
+        <Input />
63
+      </Form.Item>
64
+      <Form.Item name="parentId" label="上级单位">
65
+        <Select disabled={true}>
66
+          {(list || []).map((x) => (
67
+            <Select.Option key={x.orgId}>{x.name}</Select.Option>
68
+          ))}
69
+        </Select>
70
+      </Form.Item>
71
+
72
+      <Form.Item name="status" label="状态">
73
+        <Select style={{ width: "100%" }} placeholder="请选择状态">
74
+          <Select.Option value={0}>不正常</Select.Option>
75
+          <Select.Option value={1}>正常</Select.Option>
76
+        </Select>
77
+      </Form.Item>
78
+      <Form.Item {...tailFormItemLayout}>
79
+        <Button loading={submiting} type="primary" htmlType="submit">
80
+          保存
81
+        </Button>
82
+      </Form.Item>
83
+    </Form>
84
+  );
85
+};

+ 159
- 0
src/pages/org/index.jsx Zobrazit soubor

@@ -0,0 +1,159 @@
1
+import React from "react";
2
+import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
3
+import { Button, Card, Row, Col, Tree, Tooltip, Popconfirm, Spin } from "antd";
4
+import Page from "@/components/Page";
5
+// import { getSysOrg, deleteSysOrg } from "@/services/sysorg";
6
+import { arr2Tree } from "@/utils/array";
7
+import useBool from "@/utils/hooks/useBool";
8
+import Form from "./components/Form";
9
+import { useModel } from "@/store";
10
+
11
+export default (props) => {
12
+  const { user } = useModel("user");
13
+  console.log(user);
14
+  const [loading, startLoading, stopLoading] = useBool();
15
+  const [list, setList] = React.useState([]);
16
+  const [current, setCurrernt] = React.useState();
17
+  const [parentId, setParentId] = React.useState();
18
+
19
+  const [parentList, treeData] = React.useMemo(() => {
20
+    const plist = [{ orgId: "-1", name: "根节点" }].concat(list);
21
+    const [tree] = arr2Tree(
22
+      (list || []).map((x) => ({
23
+        title: x.name,
24
+        key: x.orgId,
25
+        parentId: x.parentId,
26
+        raw: x,
27
+      }))
28
+    );
29
+    return [plist, tree];
30
+  }, [list]);
31
+
32
+  const changeCurrent = (org) => {
33
+    setCurrernt(org);
34
+    setParentId(org?.orgPId || "-1");
35
+  };
36
+
37
+  const onSelect = (selectedKeys, e) => {
38
+    changeCurrent(e.node.raw);
39
+  };
40
+
41
+  const onClick = (org) => {
42
+    changeCurrent(org);
43
+  };
44
+
45
+  const onAdd = (parent = "-1", parentId = "-1") => {
46
+    setParentId(parent);
47
+    setCurrernt({ parentId });
48
+  };
49
+
50
+  const onDelete = (org) => {
51
+    // deleteSysOrg(org.orgId).then(() => {
52
+    //   queryList();
53
+    // });
54
+  };
55
+
56
+  const queryList = React.useCallback(() => {
57
+    startLoading();
58
+    // getSysOrg({ pageSize: 500 }).then((res) => {
59
+    //   setList(res.records || []);
60
+    //   stopLoading();
61
+    // });
62
+  }, []);
63
+
64
+  const onFormChange = () => {
65
+    // 重新查一次数据
66
+    queryList();
67
+  };
68
+
69
+  React.useEffect(() => {
70
+    queryList();
71
+  }, []);
72
+
73
+  return (
74
+    <Page>
75
+      <Row gutter={24}>
76
+        <Col span={8} style={{ overflow: "hidden" }}>
77
+          <Card
78
+            title="单位"
79
+            onSelect={onSelect}
80
+            extra={
81
+              user.orgId === "1" && (
82
+                <Button type="link" onClick={() => onAdd()}>
83
+                  新增
84
+                </Button>
85
+              )
86
+            }
87
+          >
88
+            <Spin spinning={loading}>
89
+              <Tree
90
+                blockNode
91
+                defaultExpandParent={true}
92
+                treeData={treeData}
93
+                // onSelect={onSelect}
94
+                titleRender={(node) => (
95
+                  <div
96
+                    style={{ display: "flex" }}
97
+                    onClick={(e) => e.stopPropagation()}
98
+                  >
99
+                    <div
100
+                      style={{
101
+                        lineHeight: "32px",
102
+                        flex: 1,
103
+                        width: 0,
104
+                      }}
105
+                      onClick={() => onClick(node.raw)}
106
+                    >
107
+                      <div
108
+                        style={{
109
+                          overflow: "hidden",
110
+                          whiteSpace: "nowrap",
111
+                          textOverflow: "ellipsis",
112
+                        }}
113
+                      >
114
+                        {node.title}
115
+                      </div>
116
+                    </div>
117
+                    <div style={{ width: "80px", flex: "none" }}>
118
+                      <Tooltip title="新增子节点">
119
+                        <Button
120
+                          type="link"
121
+                          icon={<PlusOutlined />}
122
+                          onClick={() => onAdd(node.raw.orgId)}
123
+                        ></Button>
124
+                      </Tooltip>
125
+                      <Tooltip title="删除节点">
126
+                        <Popconfirm
127
+                          title="确认进行删除操作?"
128
+                          onConfirm={() => onDelete(node.raw)}
129
+                        >
130
+                          <Button
131
+                            type="link"
132
+                            danger
133
+                            icon={<DeleteOutlined />}
134
+                          ></Button>
135
+                        </Popconfirm>
136
+                      </Tooltip>
137
+                    </div>
138
+                  </div>
139
+                )}
140
+              />
141
+            </Spin>
142
+          </Card>
143
+        </Col>
144
+        <Col span={16}>
145
+          {parentId && (
146
+            <Card>
147
+              <Form
148
+                org={current}
149
+                parentId={parentId}
150
+                list={parentList}
151
+                onChange={onFormChange}
152
+              />
153
+            </Card>
154
+          )}
155
+        </Col>
156
+      </Row>
157
+    </Page>
158
+  );
159
+};

+ 117
- 0
src/pages/sample/curd.jsx Zobrazit soubor

@@ -0,0 +1,117 @@
1
+import React from 'react';
2
+import Curd from '@/components/Page/Curd';
3
+import { Form, Input } from 'antd';
4
+
5
+export default (props) => {
6
+  const columns = [
7
+      {
8
+          dataIndex: 'index',
9
+          valueType: 'indexBorder',
10
+          width: 48,
11
+      },
12
+      {
13
+          title: '标题',
14
+          dataIndex: 'title',
15
+          copyable: true,
16
+          ellipsis: true,
17
+          tip: '标题过长会自动收缩',
18
+          formItemProps: {
19
+              rules: [
20
+                  {
21
+                      required: true,
22
+                      message: '此项为必填项',
23
+                  },
24
+              ],
25
+          },
26
+      },
27
+      {
28
+          disable: true,
29
+          title: '状态',
30
+          dataIndex: 'state',
31
+          filters: true,
32
+          onFilter: true,
33
+          ellipsis: true,
34
+          valueType: 'select',
35
+          valueEnum: {
36
+              all: { text: '超长'.repeat(50) },
37
+              open: {
38
+                  text: '未解决',
39
+                  status: 'Error',
40
+              },
41
+              closed: {
42
+                  text: '已解决',
43
+                  status: 'Success',
44
+                  disabled: true,
45
+              },
46
+              processing: {
47
+                  text: '解决中',
48
+                  status: 'Processing',
49
+              },
50
+          },
51
+      },
52
+      {
53
+          disable: true,
54
+          title: '标签',
55
+          dataIndex: 'labels',
56
+          search: false,
57
+          renderFormItem: (_, { defaultRender }) => {
58
+              return defaultRender(_);
59
+          },
60
+          render: (_, record) => (<Space>
61
+          {record.labels.map(({ name, color }) => (<Tag color={color} key={name}>
62
+              {name}
63
+              </Tag>))}
64
+          </Space>),
65
+      },
66
+      {
67
+          title: '创建时间',
68
+          key: 'showTime',
69
+          dataIndex: 'created_at',
70
+          valueType: 'date',
71
+          sorter: true,
72
+          hideInSearch: true,
73
+      },
74
+      {
75
+          title: '创建时间',
76
+          dataIndex: 'created_at',
77
+          valueType: 'dateRange',
78
+          hideInTable: true,
79
+          search: {
80
+              transform: (value) => {
81
+                  return {
82
+                      startTime: value[0],
83
+                      endTime: value[1],
84
+                  };
85
+              },
86
+          },
87
+      },
88
+  ];
89
+
90
+  return (
91
+    <Curd
92
+      columns={columns}
93
+      request={{
94
+        del: () => Promise.resolve(),
95
+        save: () => Promise.resolve(),
96
+        update: () => Promise.resolve(),
97
+        list: () => Promise.resolve({total: 0}),
98
+      }}
99
+      renderFormItems={() => (
100
+        <>
101
+          <Form.Item label="示例1" name="demo1">
102
+            <Input />
103
+          </Form.Item>
104
+          <Form.Item label="示例2" name="demo2">
105
+            <Input />
106
+          </Form.Item>
107
+          <Form.Item label="示例3" name="demo3">
108
+            <Input />
109
+          </Form.Item>
110
+          <Form.Item label="示例4" name="demo4">
111
+            <Input />
112
+          </Form.Item>
113
+        </>
114
+      )}
115
+    />
116
+  )
117
+}

+ 308
- 0
src/pages/sample/form/index.jsx Zobrazit soubor

@@ -0,0 +1,308 @@
1
+import {
2
+  AutoComplete,
3
+  Button,
4
+  Cascader,
5
+  Checkbox,
6
+  Col,
7
+  Form,
8
+  Input,
9
+  InputNumber,
10
+  Row,
11
+  Select,
12
+  Card,
13
+} from 'antd';
14
+import React, { useState } from 'react';
15
+import Edit from '@/components/Page/Edit';
16
+
17
+const { Option } = Select;
18
+const residences = [
19
+  {
20
+    value: 'zhejiang',
21
+    label: 'Zhejiang',
22
+    children: [
23
+      {
24
+        value: 'hangzhou',
25
+        label: 'Hangzhou',
26
+        children: [
27
+          {
28
+            value: 'xihu',
29
+            label: 'West Lake',
30
+          },
31
+        ],
32
+      },
33
+    ],
34
+  },
35
+  {
36
+    value: 'jiangsu',
37
+    label: 'Jiangsu',
38
+    children: [
39
+      {
40
+        value: 'nanjing',
41
+        label: 'Nanjing',
42
+        children: [
43
+          {
44
+            value: 'zhonghuamen',
45
+            label: 'Zhong Hua Men',
46
+          },
47
+        ],
48
+      },
49
+    ],
50
+  },
51
+];
52
+
53
+export default (props) => {
54
+  const prefixSelector = (
55
+    <Form.Item name="prefix" noStyle>
56
+      <Select
57
+        style={{
58
+          width: 70,
59
+        }}
60
+      >
61
+        <Option value="86">+86</Option>
62
+        <Option value="87">+87</Option>
63
+      </Select>
64
+    </Form.Item>
65
+  );
66
+  const suffixSelector = (
67
+    <Form.Item name="suffix" noStyle>
68
+      <Select
69
+        style={{
70
+          width: 70,
71
+        }}
72
+      >
73
+        <Option value="USD">$</Option>
74
+        <Option value="CNY">¥</Option>
75
+      </Select>
76
+    </Form.Item>
77
+  );
78
+  const [autoCompleteResult, setAutoCompleteResult] = useState([]);
79
+
80
+  const onWebsiteChange = (value) => {
81
+    if (!value) {
82
+      setAutoCompleteResult([]);
83
+    } else {
84
+      setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));
85
+    }
86
+  };
87
+
88
+  const websiteOptions = autoCompleteResult.map((website) => ({
89
+    label: website,
90
+    value: website,
91
+  }));
92
+  return (
93
+    <Edit width="1000px">
94
+      <Form.Item
95
+        name="email"
96
+        label="E-mail"
97
+        rules={[
98
+          {
99
+            type: 'email',
100
+            message: 'The input is not valid E-mail!',
101
+          },
102
+          {
103
+            required: true,
104
+            message: 'Please input your E-mail!',
105
+          },
106
+        ]}
107
+      >
108
+        <Input />
109
+      </Form.Item>
110
+
111
+      <Form.Item
112
+        name="password"
113
+        label="Password"
114
+        rules={[
115
+          {
116
+            required: true,
117
+            message: 'Please input your password!',
118
+          },
119
+        ]}
120
+        hasFeedback
121
+      >
122
+        <Input.Password />
123
+      </Form.Item>
124
+
125
+      <Form.Item
126
+        name="confirm"
127
+        label="Confirm Password"
128
+        dependencies={['password']}
129
+        hasFeedback
130
+        rules={[
131
+          {
132
+            required: true,
133
+            message: 'Please confirm your password!',
134
+          },
135
+          ({ getFieldValue }) => ({
136
+            validator(_, value) {
137
+              if (!value || getFieldValue('password') === value) {
138
+                return Promise.resolve();
139
+              }
140
+
141
+              return Promise.reject(new Error('The two passwords that you entered do not match!'));
142
+            },
143
+          }),
144
+        ]}
145
+      >
146
+        <Input.Password />
147
+      </Form.Item>
148
+
149
+      <Form.Item
150
+        name="nickname"
151
+        label="Nickname"
152
+        tooltip="What do you want others to call you?"
153
+        rules={[
154
+          {
155
+            required: true,
156
+            message: 'Please input your nickname!',
157
+            whitespace: true,
158
+          },
159
+        ]}
160
+      >
161
+        <Input />
162
+      </Form.Item>
163
+
164
+      <Form.Item
165
+        name="residence"
166
+        label="Habitual Residence"
167
+        rules={[
168
+          {
169
+            type: 'array',
170
+            required: true,
171
+            message: 'Please select your habitual residence!',
172
+          },
173
+        ]}
174
+      >
175
+        <Cascader options={residences} />
176
+      </Form.Item>
177
+
178
+      <Form.Item
179
+        name="phone"
180
+        label="Phone Number"
181
+        rules={[
182
+          {
183
+            required: true,
184
+            message: 'Please input your phone number!',
185
+          },
186
+        ]}
187
+      >
188
+        <Input
189
+          addonBefore={prefixSelector}
190
+          style={{
191
+            width: '100%',
192
+          }}
193
+        />
194
+      </Form.Item>
195
+
196
+      <Form.Item
197
+        name="donation"
198
+        label="Donation"
199
+        rules={[
200
+          {
201
+            required: true,
202
+            message: 'Please input donation amount!',
203
+          },
204
+        ]}
205
+      >
206
+        <InputNumber
207
+          addonAfter={suffixSelector}
208
+          style={{
209
+            width: '100%',
210
+          }}
211
+        />
212
+      </Form.Item>
213
+
214
+      <Form.Item
215
+        name="website"
216
+        label="Website"
217
+        rules={[
218
+          {
219
+            required: true,
220
+            message: 'Please input website!',
221
+          },
222
+        ]}
223
+      >
224
+        <AutoComplete options={websiteOptions} onChange={onWebsiteChange} placeholder="website">
225
+          <Input />
226
+        </AutoComplete>
227
+      </Form.Item>
228
+
229
+      <Form.Item
230
+        name="intro"
231
+        label="Intro"
232
+        rules={[
233
+          {
234
+            required: true,
235
+            message: 'Please input Intro',
236
+          },
237
+        ]}
238
+      >
239
+        <Input.TextArea showCount maxLength={100} />
240
+      </Form.Item>
241
+
242
+      <Form.Item
243
+        name="gender"
244
+        label="Gender"
245
+        rules={[
246
+          {
247
+            required: true,
248
+            message: 'Please select gender!',
249
+          },
250
+        ]}
251
+      >
252
+        <Select placeholder="select your gender">
253
+          <Option value="male">Male</Option>
254
+          <Option value="female">Female</Option>
255
+          <Option value="other">Other</Option>
256
+        </Select>
257
+      </Form.Item>
258
+
259
+      <Form.Item label="Captcha" extra="We must make sure that your are a human.">
260
+        <Row gutter={8}>
261
+          <Col span={12}>
262
+            <Form.Item
263
+              name="captcha"
264
+              noStyle
265
+              rules={[
266
+                {
267
+                  required: true,
268
+                  message: 'Please input the captcha you got!',
269
+                },
270
+              ]}
271
+            >
272
+              <Input />
273
+            </Form.Item>
274
+          </Col>
275
+          <Col span={12}>
276
+            <Button>Get captcha</Button>
277
+          </Col>
278
+        </Row>
279
+      </Form.Item>
280
+
281
+      <Form.Item
282
+        name="agreement"
283
+        valuePropName="checked"
284
+        rules={[
285
+          {
286
+            validator: (_, value) =>
287
+              value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
288
+          },
289
+        ]}
290
+        wrapperCol={{
291
+          xs: {
292
+            span: 24,
293
+            offset: 0,
294
+          },
295
+          sm: {
296
+            span: 16,
297
+            offset: 8,
298
+          },
299
+        }}
300
+      >
301
+        <Checkbox>
302
+          I have read the <a href="">agreement</a>
303
+        </Checkbox>
304
+      </Form.Item>
305
+    </Edit>
306
+  );
307
+};
308
+

+ 191
- 0
src/pages/sample/home/components/AreaChart.jsx Zobrazit soubor

@@ -0,0 +1,191 @@
1
+import React from 'react';
2
+import { Card } from 'antd';
3
+import * as echarts from 'echarts/core';
4
+import Chart from '@/components/chart';
5
+
6
+export default (props) => {
7
+  const option = {
8
+    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
9
+    // title: {
10
+    //   text: 'Gradient Stacked Area Chart'
11
+    // },
12
+    tooltip: {
13
+      trigger: 'axis',
14
+      axisPointer: {
15
+        type: 'cross',
16
+        label: {
17
+          backgroundColor: '#6a7985'
18
+        }
19
+      }
20
+    },
21
+    legend: {
22
+      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
23
+    },
24
+    grid: {
25
+      left: '3%',
26
+      right: '4%',
27
+      bottom: '3%',
28
+      containLabel: true
29
+    },
30
+    xAxis: [
31
+      {
32
+        type: 'category',
33
+        boundaryGap: false,
34
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
35
+      }
36
+    ],
37
+    yAxis: [
38
+      {
39
+        type: 'value'
40
+      }
41
+    ],
42
+    series: [
43
+      {
44
+        name: 'Line 1',
45
+        type: 'line',
46
+        stack: 'Total',
47
+        smooth: true,
48
+        lineStyle: {
49
+          width: 0
50
+        },
51
+        showSymbol: false,
52
+        areaStyle: {
53
+          opacity: 0.8,
54
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
55
+            {
56
+              offset: 0,
57
+              color: 'rgb(128, 255, 165)'
58
+            },
59
+            {
60
+              offset: 1,
61
+              color: 'rgb(1, 191, 236)'
62
+            }
63
+          ])
64
+        },
65
+        emphasis: {
66
+          focus: 'series'
67
+        },
68
+        data: [140, 232, 101, 264, 90, 340, 250]
69
+      },
70
+      {
71
+        name: 'Line 2',
72
+        type: 'line',
73
+        stack: 'Total',
74
+        smooth: true,
75
+        lineStyle: {
76
+          width: 0
77
+        },
78
+        showSymbol: false,
79
+        areaStyle: {
80
+          opacity: 0.8,
81
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
82
+            {
83
+              offset: 0,
84
+              color: 'rgb(0, 221, 255)'
85
+            },
86
+            {
87
+              offset: 1,
88
+              color: 'rgb(77, 119, 255)'
89
+            }
90
+          ])
91
+        },
92
+        emphasis: {
93
+          focus: 'series'
94
+        },
95
+        data: [120, 282, 111, 234, 220, 340, 310]
96
+      },
97
+      {
98
+        name: 'Line 3',
99
+        type: 'line',
100
+        stack: 'Total',
101
+        smooth: true,
102
+        lineStyle: {
103
+          width: 0
104
+        },
105
+        showSymbol: false,
106
+        areaStyle: {
107
+          opacity: 0.8,
108
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
109
+            {
110
+              offset: 0,
111
+              color: 'rgb(55, 162, 255)'
112
+            },
113
+            {
114
+              offset: 1,
115
+              color: 'rgb(116, 21, 219)'
116
+            }
117
+          ])
118
+        },
119
+        emphasis: {
120
+          focus: 'series'
121
+        },
122
+        data: [320, 132, 201, 334, 190, 130, 220]
123
+      },
124
+      {
125
+        name: 'Line 4',
126
+        type: 'line',
127
+        stack: 'Total',
128
+        smooth: true,
129
+        lineStyle: {
130
+          width: 0
131
+        },
132
+        showSymbol: false,
133
+        areaStyle: {
134
+          opacity: 0.8,
135
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
136
+            {
137
+              offset: 0,
138
+              color: 'rgb(255, 0, 135)'
139
+            },
140
+            {
141
+              offset: 1,
142
+              color: 'rgb(135, 0, 157)'
143
+            }
144
+          ])
145
+        },
146
+        emphasis: {
147
+          focus: 'series'
148
+        },
149
+        data: [220, 402, 231, 134, 190, 230, 120]
150
+      },
151
+      {
152
+        name: 'Line 5',
153
+        type: 'line',
154
+        stack: 'Total',
155
+        smooth: true,
156
+        lineStyle: {
157
+          width: 0
158
+        },
159
+        showSymbol: false,
160
+        label: {
161
+          show: true,
162
+          position: 'top'
163
+        },
164
+        areaStyle: {
165
+          opacity: 0.8,
166
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
167
+            {
168
+              offset: 0,
169
+              color: 'rgb(255, 191, 0)'
170
+            },
171
+            {
172
+              offset: 1,
173
+              color: 'rgb(224, 62, 76)'
174
+            }
175
+          ])
176
+        },
177
+        emphasis: {
178
+          focus: 'series'
179
+        },
180
+        data: [220, 302, 181, 234, 210, 290, 150]
181
+      }
182
+    ]
183
+  };
184
+  
185
+
186
+  return (
187
+    <Card title='Gradient Stacked Area Chart'>
188
+      <Chart option={option} style={props.style}></Chart>
189
+    </Card>
190
+  )
191
+}

+ 44
- 0
src/pages/sample/home/components/Banner.jsx Zobrazit soubor

@@ -0,0 +1,44 @@
1
+import React from 'react';
2
+import { Row, Col, Card, Statistic } from 'antd';
3
+import { ArrowDownOutlined, ArrowUpOutlined, LikeOutlined } from '@ant-design/icons';
4
+
5
+export default (props) => {
6
+  return (
7
+    <Row gutter={24}>
8
+      <Col span={6}>
9
+        <Card>
10
+          <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
11
+        </Card>
12
+      </Col>
13
+      <Col span={6}>
14
+        <Card>
15
+          <Statistic title="Unmerged" value={93} suffix="/ 100" />
16
+        </Card>
17
+      </Col>
18
+      <Col span={6}>
19
+        <Card>
20
+          <Statistic
21
+            title="Active"
22
+            value={11.28}
23
+            precision={2}
24
+            valueStyle={{ color: '#3f8600' }}
25
+            prefix={<ArrowUpOutlined />}
26
+            suffix="%"
27
+          />
28
+        </Card>
29
+      </Col>
30
+      <Col span={6}>
31
+        <Card>
32
+          <Statistic
33
+            title="Idle"
34
+            value={9.3}
35
+            precision={2}
36
+            valueStyle={{ color: '#cf1322' }}
37
+            prefix={<ArrowDownOutlined />}
38
+            suffix="%"
39
+          />
40
+        </Card>
41
+      </Col>
42
+    </Row>
43
+  )
44
+}

+ 37
- 0
src/pages/sample/home/components/BarChart.jsx Zobrazit soubor

@@ -0,0 +1,37 @@
1
+import React from 'react';
2
+import { Card } from 'antd';
3
+import Chart from '@/components/chart';
4
+
5
+export default (props) => {
6
+
7
+  const option = {
8
+    legend: {},
9
+    tooltip: {},
10
+    dataset: {
11
+      source: [
12
+        ['product', '2015', '2016', '2017'],
13
+        ['Matcha Latte', 43.3, 85.8, 93.7],
14
+        ['Milk Tea', 83.1, 73.4, 55.1],
15
+        ['Cheese Cocoa', 86.4, 65.2, 82.5],
16
+        ['Walnut Brownie', 72.4, 53.9, 39.1]
17
+      ]
18
+    },
19
+    xAxis: { type: 'category' },
20
+    yAxis: {},
21
+    grid: {
22
+      left: '3%',
23
+      right: '4%',
24
+      bottom: '3%',
25
+      containLabel: true
26
+    },
27
+    // Declare several bar series, each will be mapped
28
+    // to a column of dataset.source by default.
29
+    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
30
+  };
31
+
32
+  return (
33
+    <Card title='Bar Chart'>
34
+      <Chart option={option} style={props.style}></Chart>
35
+    </Card>
36
+  )
37
+}

+ 112
- 0
src/pages/sample/home/components/PictorialBar.jsx Zobrazit soubor

@@ -0,0 +1,112 @@
1
+import React from 'react';
2
+import { Card } from 'antd';
3
+import * as echarts from 'echarts/core';
4
+import Chart from '@/components/chart';
5
+
6
+
7
+export default (props) => {
8
+  let category = [];
9
+  let dottedBase = +new Date();
10
+  let lineData = [];
11
+  let barData = [];
12
+  for (let i = 0; i < 20; i++) {
13
+    let date = new Date((dottedBase += 3600 * 24 * 1000));
14
+    category.push(
15
+      [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
16
+    );
17
+    let b = Math.random() * 200;
18
+    let d = Math.random() * 200;
19
+    barData.push(b);
20
+    lineData.push(d + b);
21
+  }
22
+
23
+  const option = {
24
+    backgroundColor: '#0f375f',
25
+    tooltip: {
26
+      trigger: 'axis',
27
+      axisPointer: {
28
+        type: 'shadow'
29
+      }
30
+    },
31
+    legend: {
32
+      data: ['line', 'bar'],
33
+      textStyle: {
34
+        color: '#ccc'
35
+      }
36
+    },
37
+    xAxis: {
38
+      data: category,
39
+      axisLine: {
40
+        lineStyle: {
41
+          color: '#ccc'
42
+        }
43
+      }
44
+    },
45
+    yAxis: {
46
+      splitLine: { show: false },
47
+      axisLine: {
48
+        lineStyle: {
49
+          color: '#ccc'
50
+        }
51
+      }
52
+    },
53
+    series: [
54
+      {
55
+        name: 'line',
56
+        type: 'line',
57
+        smooth: true,
58
+        showAllSymbol: true,
59
+        symbol: 'emptyCircle',
60
+        symbolSize: 15,
61
+        data: lineData
62
+      },
63
+      {
64
+        name: 'bar',
65
+        type: 'bar',
66
+        barWidth: 10,
67
+        itemStyle: {
68
+          borderRadius: 5,
69
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
70
+            { offset: 0, color: '#14c8d4' },
71
+            { offset: 1, color: '#43eec6' }
72
+          ])
73
+        },
74
+        data: barData
75
+      },
76
+      {
77
+        name: 'line',
78
+        type: 'bar',
79
+        barGap: '-100%',
80
+        barWidth: 10,
81
+        itemStyle: {
82
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
83
+            { offset: 0, color: 'rgba(20,200,212,0.5)' },
84
+            { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
85
+            { offset: 1, color: 'rgba(20,200,212,0)' }
86
+          ])
87
+        },
88
+        z: -12,
89
+        data: lineData
90
+      },
91
+      {
92
+        name: 'dotted',
93
+        type: 'pictorialBar',
94
+        symbol: 'rect',
95
+        itemStyle: {
96
+          color: '#0f375f'
97
+        },
98
+        symbolRepeat: true,
99
+        symbolSize: [12, 4],
100
+        symbolMargin: 1,
101
+        z: -10,
102
+        data: lineData
103
+      }
104
+    ]
105
+  };
106
+
107
+  return (
108
+    <Card title='Pictorial Chart'>
109
+      <Chart option={option} style={props.style}></Chart>
110
+    </Card>
111
+  )
112
+}

+ 48
- 0
src/pages/sample/home/components/PieChart.jsx Zobrazit soubor

@@ -0,0 +1,48 @@
1
+import React from 'react';
2
+import { Card } from 'antd';
3
+import Chart from '@/components/chart';
4
+
5
+export default (props) => {
6
+
7
+  const option = {
8
+    // title: {
9
+    //   text: 'Referer of a Website',
10
+    //   subtext: 'Fake Data',
11
+    //   left: 'center'
12
+    // },
13
+    tooltip: {
14
+      trigger: 'item'
15
+    },
16
+    legend: {
17
+      orient: 'vertical',
18
+      left: 'left'
19
+    },
20
+    series: [
21
+      {
22
+        name: 'Access From',
23
+        type: 'pie',
24
+        radius: '50%',
25
+        data: [
26
+          { value: 1048, name: 'Search Engine' },
27
+          { value: 735, name: 'Direct' },
28
+          { value: 580, name: 'Email' },
29
+          { value: 484, name: 'Union Ads' },
30
+          { value: 300, name: 'Video Ads' }
31
+        ],
32
+        emphasis: {
33
+          itemStyle: {
34
+            shadowBlur: 10,
35
+            shadowOffsetX: 0,
36
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
37
+          }
38
+        }
39
+      }
40
+    ]
41
+  };
42
+
43
+  return (
44
+    <Card title='Basic Pie Chart'>
45
+      <Chart option={option} style={props.style}></Chart>
46
+    </Card>
47
+  )
48
+}

+ 48
- 0
src/pages/sample/home/components/RadarChart.jsx Zobrazit soubor

@@ -0,0 +1,48 @@
1
+import React from 'react';
2
+import { Card } from 'antd';
3
+import Chart from '@/components/chart';
4
+
5
+export default (props) => {
6
+
7
+  const option = {
8
+    // title: {
9
+    //   text: 'Basic Radar Chart'
10
+    // },
11
+    legend: {
12
+      data: ['Allocated Budget', 'Actual Spending']
13
+    },
14
+    radar: {
15
+      // shape: 'circle',
16
+      indicator: [
17
+        { name: 'Sales', max: 6500 },
18
+        { name: 'Administration', max: 16000 },
19
+        { name: 'Information Technology', max: 30000 },
20
+        { name: 'Customer Support', max: 38000 },
21
+        { name: 'Development', max: 52000 },
22
+        { name: 'Marketing', max: 25000 }
23
+      ]
24
+    },
25
+    series: [
26
+      {
27
+        name: 'Budget vs spending',
28
+        type: 'radar',
29
+        data: [
30
+          {
31
+            value: [4200, 3000, 20000, 35000, 50000, 18000],
32
+            name: 'Allocated Budget'
33
+          },
34
+          {
35
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
36
+            name: 'Actual Spending'
37
+          }
38
+        ]
39
+      }
40
+    ]
41
+  };
42
+
43
+  return (
44
+    <Card title='Basic Radar Chart'>
45
+      <Chart option={option} style={props.style}></Chart>
46
+    </Card>
47
+  )
48
+}

+ 41
- 0
src/pages/sample/home/index.jsx Zobrazit soubor

@@ -0,0 +1,41 @@
1
+import React from 'react';
2
+import { Row, Col, Card, Space, Statistic } from 'antd';
3
+import Page from '@/components/Page';
4
+import Banner from './components/Banner';
5
+import AreaChart from './components/AreaChart';
6
+import BarChart from './components/BarChart';
7
+import PictorialBar from './components/PictorialBar';
8
+import RadarChart from './components/RadarChart';
9
+import PieChart from './components/PieChart';
10
+
11
+export default (props) => {
12
+
13
+  const chartStyle = {
14
+    height: '360px',
15
+    width: '100%',
16
+  }
17
+
18
+  return (
19
+    <Page>
20
+      <Banner />
21
+
22
+      <Row gutter={24} style={{ marginTop: '24px' }}>
23
+        <Col span={16}>
24
+          <AreaChart style={chartStyle}/>
25
+        </Col>
26
+        <Col span={8}>
27
+          <RadarChart style={chartStyle}/>
28
+        </Col>
29
+      </Row>
30
+
31
+      <Row gutter={24} style={{ marginTop: '24px' }}>
32
+        <Col span={8}>
33
+          <PieChart style={chartStyle}/>
34
+        </Col>
35
+        <Col span={16}>
36
+          <BarChart style={chartStyle}/>
37
+        </Col>
38
+      </Row>
39
+    </Page>
40
+  )
41
+}

+ 96
- 0
src/pages/sample/table/index.jsx Zobrazit soubor

@@ -0,0 +1,96 @@
1
+
2
+import { Space, Tag } from 'antd';
3
+import List from '@/components/Page/List';
4
+
5
+export default () => {
6
+    const columns = [
7
+        {
8
+            dataIndex: 'index',
9
+            valueType: 'indexBorder',
10
+            width: 48,
11
+        },
12
+        {
13
+            title: '标题',
14
+            dataIndex: 'title',
15
+            copyable: true,
16
+            ellipsis: true,
17
+            tip: '标题过长会自动收缩',
18
+            formItemProps: {
19
+                rules: [
20
+                    {
21
+                        required: true,
22
+                        message: '此项为必填项',
23
+                    },
24
+                ],
25
+            },
26
+        },
27
+        {
28
+            disable: true,
29
+            title: '状态',
30
+            dataIndex: 'state',
31
+            filters: true,
32
+            onFilter: true,
33
+            ellipsis: true,
34
+            valueType: 'select',
35
+            valueEnum: {
36
+                all: { text: '超长'.repeat(50) },
37
+                open: {
38
+                    text: '未解决',
39
+                    status: 'Error',
40
+                },
41
+                closed: {
42
+                    text: '已解决',
43
+                    status: 'Success',
44
+                    disabled: true,
45
+                },
46
+                processing: {
47
+                    text: '解决中',
48
+                    status: 'Processing',
49
+                },
50
+            },
51
+        },
52
+        {
53
+            disable: true,
54
+            title: '标签',
55
+            dataIndex: 'labels',
56
+            search: false,
57
+            renderFormItem: (_, { defaultRender }) => {
58
+                return defaultRender(_);
59
+            },
60
+            render: (_, record) => (<Space>
61
+            {record.labels.map(({ name, color }) => (<Tag color={color} key={name}>
62
+                {name}
63
+                </Tag>))}
64
+            </Space>),
65
+        },
66
+        {
67
+            title: '创建时间',
68
+            key: 'showTime',
69
+            dataIndex: 'created_at',
70
+            valueType: 'date',
71
+            sorter: true,
72
+            hideInSearch: true,
73
+        },
74
+        {
75
+            title: '创建时间',
76
+            dataIndex: 'created_at',
77
+            valueType: 'dateRange',
78
+            hideInTable: true,
79
+            search: {
80
+                transform: (value) => {
81
+                    return {
82
+                        startTime: value[0],
83
+                        endTime: value[1],
84
+                    };
85
+                },
86
+            },
87
+        },
88
+    ];
89
+    
90
+    return (
91
+        <List
92
+            columns={columns}
93
+            request={() => Promise.resolve({ total: 0 })}
94
+        />
95
+    );
96
+};

+ 127
- 0
src/pages/user/Account.jsx Zobrazit soubor

@@ -0,0 +1,127 @@
1
+import React from "react";
2
+import { Modal, Form, Input, Button, Select } from "antd";
3
+import useBool from "@/utils/hooks/useBool";
4
+// import { postSysUser } from "@/services/sysuser";
5
+import md5 from "md5";
6
+
7
+const { Option } = Select;
8
+
9
+const formItemLayout = {
10
+  labelCol: {
11
+    xs: { span: 24 },
12
+    sm: { span: 8 },
13
+  },
14
+  wrapperCol: {
15
+    xs: { span: 24 },
16
+    sm: { span: 16 },
17
+  },
18
+};
19
+const tailFormItemLayout = {
20
+  wrapperCol: {
21
+    xs: {
22
+      span: 24,
23
+      offset: 0,
24
+    },
25
+    sm: {
26
+      span: 16,
27
+      offset: 8,
28
+    },
29
+  },
30
+};
31
+
32
+const defaultPass = "123456";
33
+
34
+export default (props) => {
35
+  const { user, onSuccess, onCancel, roleList = [], ...leftProps } = props;
36
+
37
+  const [loading, startLoading, cancelLoading] = useBool();
38
+  const [form] = Form.useForm();
39
+
40
+  const onFinish = (values) => {
41
+    const password = md5(defaultPass);
42
+    const rolesList = (values.rolesList || []).map((x) => ({ roleId: x }));
43
+    const data = {
44
+      ...user,
45
+      ...values,
46
+      password,
47
+
48
+      rolesList,
49
+      userId: user.userId,
50
+    };
51
+
52
+    startLoading();
53
+    // postSysUser(data)
54
+    //   .then((res) => {
55
+    //     onSuccess();
56
+    //     cancelLoading();
57
+    //   })
58
+    //   .catch(() => {
59
+    //     cancelLoading();
60
+    //   });
61
+  };
62
+
63
+  React.useEffect(() => {
64
+    if (user?.userId) {
65
+      form.setFieldsValue({
66
+        account: user.account || undefined,
67
+        rolesList: user.rolesList.map((x) => x.roleId),
68
+      });
69
+    }
70
+  }, [user, form]);
71
+
72
+  return (
73
+    <Modal
74
+      title="账号维护"
75
+      footer={null}
76
+      width={600}
77
+      onCancel={onCancel}
78
+      {...leftProps}
79
+    >
80
+      <Form
81
+        {...formItemLayout}
82
+        form={form}
83
+        scrollToFirstError
84
+        style={{ width: "480px" }}
85
+        onFinish={onFinish}
86
+      >
87
+        <Form.Item
88
+          name="account"
89
+          label="账号"
90
+          rules={[
91
+            {
92
+              required: true,
93
+              message: "请填写姓名",
94
+            },
95
+          ]}
96
+        >
97
+          <Input />
98
+        </Form.Item>
99
+        <Form.Item name="rolesList" label="角色">
100
+          <Select
101
+            mode="multiple"
102
+            allowClear
103
+            style={{ width: "100%" }}
104
+            placeholder="请选择角色"
105
+          >
106
+            {roleList.map((role) => (
107
+              <Option key={role.roleId}>{role.name}</Option>
108
+            ))}
109
+          </Select>
110
+        </Form.Item>
111
+        <Form.Item
112
+          label="密码"
113
+        >
114
+          <div>{`默认密码 ${defaultPass}`}</div>
115
+        </Form.Item>
116
+        <Form.Item {...tailFormItemLayout}>
117
+          <Button loading={loading} type="primary" htmlType="submit">
118
+            保存
119
+          </Button>
120
+          <Button style={{ marginLeft: "2em" }} onClick={onCancel}>
121
+            取消
122
+          </Button>
123
+        </Form.Item>
124
+      </Form>
125
+    </Modal>
126
+  );
127
+};

+ 141
- 0
src/pages/user/Edit.jsx Zobrazit soubor

@@ -0,0 +1,141 @@
1
+import React from "react";
2
+import { Button, Card, Form, Input } from "antd";
3
+import useBool from "@/utils/hooks/useBool";
4
+// import { getSysRole } from "@/services/sysrole";
5
+// import { postSysUser, getSysUserById, resetPwd } from "@/services/sysuser";
6
+import { useSearchParams, useNavigate } from "react-router-dom";
7
+import Page from "@/components/Page";
8
+import { formItemLayout, tailFormItemLayout } from "@/utils/form";
9
+import Account from "./Account";
10
+import md5 from "md5";
11
+
12
+export default (props) => {
13
+
14
+  const [loading, startLoading, cancelLoading] = useBool();
15
+  const [submiting, startSubmit, cancelSubmit] = useBool();
16
+  const [open, setShow, setHidden] = useBool(false);
17
+  const [roleList, setRoleList] = React.useState([]);
18
+  const [searchParams] = useSearchParams();
19
+  const [form] = Form.useForm();
20
+  const [user, setUser] = React.useState();
21
+  const navigate = useNavigate();
22
+
23
+  const id = searchParams.get("id");
24
+
25
+  const resetPassWord = () => {
26
+    // if (id) {
27
+    //   resetPwd(id, md5("123456")).then((res) => {});
28
+    // }
29
+  };
30
+
31
+  const onFinish = (values) => {
32
+    startSubmit();
33
+    // postSysUser({ ...values, userId: id })
34
+    //   .then((res) => {
35
+    //     cancelSubmit();
36
+    //     if (id) {
37
+    //       navigate(-1);
38
+    //     } else {
39
+    //       navigate(`/user/edit?id=${res.userId}`, { replace: true });
40
+    //     }
41
+    //   })
42
+    //   .catch(() => {
43
+    //     cancelSubmit();
44
+    //   });
45
+  };
46
+
47
+  // React.useEffect(() => {
48
+  //   getSysRole({ pageSize: 500 }).then((res) => setRoleList(res.records || []));
49
+  // }, []);
50
+
51
+  React.useEffect(() => {
52
+    if (id) {
53
+      startLoading();
54
+      // getSysUserById(id)
55
+      //   .then((res) => {
56
+      //     setUser(res);
57
+      //     form.setFieldsValue({
58
+      //       ...res,
59
+      //     });
60
+      //     cancelLoading();
61
+      //   })
62
+      //   .catch(() => {
63
+      //     cancelLoading();
64
+      //   });
65
+    } else {
66
+
67
+    }
68
+  }, [id]);
69
+
70
+  return (
71
+    <Page>
72
+      <Card loading={loading}>
73
+        <Form
74
+          onFinish={onFinish}
75
+          form={form}
76
+          {...formItemLayout}
77
+          scrollToFirstError
78
+          style={{ maxWidth: "1000px" }}
79
+        >
80
+          <Form.Item
81
+            name="name"
82
+            label="姓名"
83
+            rules={[
84
+              {
85
+                required: true,
86
+                message: "请填写姓名",
87
+              },
88
+            ]}
89
+          >
90
+            <Input placeholder="请输入姓名" />
91
+          </Form.Item>
92
+          <Form.Item name="phone" label="手机号">
93
+            <Input placeholder="请输入手机号" />
94
+          </Form.Item>
95
+          <Form.Item name="orgId" label="机构Id">
96
+            <Input placeholder="请输入" />
97
+          </Form.Item>
98
+          <Form.Item name="orgName" label="机构名称">
99
+            <Input placeholder="请输入" />
100
+          </Form.Item>
101
+
102
+          <Form.Item {...tailFormItemLayout}>
103
+            <Button loading={submiting} type="primary" htmlType="submit">
104
+              保存
105
+            </Button>
106
+            <Button style={{ marginLeft: "2em" }} onClick={() => navigate(-1)}>
107
+              返回
108
+            </Button>
109
+            {id && (
110
+              <Button
111
+                disabled={!id}
112
+                style={{ marginLeft: "2em" }}
113
+                onClick={setShow}
114
+              >
115
+                登录账户
116
+              </Button>
117
+            )}
118
+            {user?.account && (
119
+              <Button
120
+                key={2}
121
+                style={{ marginLeft: "2em" }}
122
+                onClick={() => {
123
+                  resetPassWord();
124
+                }}
125
+              >
126
+                重置密码
127
+              </Button>
128
+            )}
129
+          </Form.Item>
130
+        </Form>
131
+      </Card>
132
+      <Account
133
+        open={open}
134
+        user={user}
135
+        roleList={roleList}
136
+        onSuccess={setHidden}
137
+        onCancel={setHidden}
138
+      />
139
+    </Page>
140
+  );
141
+};

+ 151
- 0
src/pages/user/index.jsx Zobrazit soubor

@@ -0,0 +1,151 @@
1
+import React from "react";
2
+import { useNavigate } from "react-router-dom";
3
+import { Button, Popconfirm, message } from "antd";
4
+import { ProTable } from "@ant-design/pro-components";
5
+import { queryTable, queryDict } from "@/utils/request";
6
+// import {
7
+//   getSysUser,
8
+//   updateUserStatus,
9
+//   deleteSysUser,
10
+// } from "@/services/sysuser";
11
+// import { getSysOrg } from "@/services/sysorg";
12
+// import { getSysPosition } from "@/services/sysposition";
13
+import Page from "@/components/Page";
14
+// import { getSysDept } from "@/services/sysdept";
15
+import md5 from "md5";
16
+
17
+// const queryUserList = queryTable(getSysUser);
18
+// const queryOrg = queryDict(getSysOrg, { labelKey: "name", valueKey: "orgId" });
19
+// const queryDept = queryDict((params) => getSysDept({ ...params, dict: true }), {
20
+//   labelKey: "name",
21
+//   valueKey: "deptId",
22
+// });
23
+const queryPosition = queryDict(
24
+  // (params) => getSysPosition({ ...params, dict: true }),
25
+  {
26
+    labelKey: "name",
27
+    valueKey: "positionId",
28
+  }
29
+);
30
+
31
+export default (props) => {
32
+  const actionRef = React.useRef();
33
+  const navigate = useNavigate();
34
+
35
+  const updateStatus = (user) => {
36
+    const status = user.status === 1 ? 0 : 1;
37
+    const hide = message.loading("请稍候...", 0);
38
+    // updateUserStatus(user.userId, status)
39
+    //   .then((res) => {
40
+    //     hide();
41
+    //     actionRef.current.reload();
42
+    //   })
43
+    //   .catch(() => {
44
+    //     hide();
45
+    //   });
46
+  };
47
+
48
+  const handleDelete = (id) => {
49
+    if (id) {
50
+      // deleteSysUser(id).then((res) => {
51
+      //   actionRef.current.reload();
52
+      // });
53
+    }
54
+  };
55
+
56
+  const columns = [
57
+    {
58
+      title: "EHR",
59
+      dataIndex: "hxId",
60
+    },
61
+    {
62
+      title: "姓名",
63
+      dataIndex: "name",
64
+    },
65
+    {
66
+      title: "手机号",
67
+      search: false,
68
+      dataIndex: "phone",
69
+    },
70
+    {
71
+      title: "机构",
72
+      dataIndex: "orgName",
73
+    },
74
+    {
75
+      title: "状态",
76
+      dataIndex: "status",
77
+      search: false,
78
+      valueEnum: {
79
+        1: {
80
+          text: "正常",
81
+          status: "Processing",
82
+        },
83
+        0: {
84
+          text: "禁用",
85
+          status: "Error",
86
+        },
87
+      },
88
+    },
89
+    {
90
+      title: "操作",
91
+      valueType: "option",
92
+      width: 200,
93
+      render: (_, record) => [
94
+        <Button
95
+          key={1}
96
+          style={{ padding: 0 }}
97
+          type="link"
98
+          onClick={() => {
99
+            updateStatus(record);
100
+          }}
101
+        >
102
+          {record.status === 1 ? "禁用" : "启用"}
103
+        </Button>,
104
+        <Button
105
+          key={3}
106
+          style={{ padding: 0 }}
107
+          type="link"
108
+          onClick={() => {
109
+            navigate(`/user/edit?id=${record.userId}`);
110
+          }}
111
+        >
112
+          编辑
113
+        </Button>,
114
+        <Popconfirm
115
+          key={4}
116
+          title="您是否确认删除 ?"
117
+          onConfirm={() => handleDelete(record.userId)}
118
+          okText="确定"
119
+          cancelText="取消"
120
+        >
121
+
122
+          <Button style={{ padding: 0 }} type="link">
123
+            删除
124
+          </Button>
125
+        </Popconfirm>,
126
+      ],
127
+    },
128
+  ];
129
+
130
+  return (
131
+    <Page>
132
+      <ProTable
133
+        actionRef={actionRef}
134
+        rowKey="userId"
135
+        toolBarRender={() => [
136
+          <Button
137
+            key="1"
138
+            type="primary"
139
+            onClick={() => {
140
+              navigate("/user/edit");
141
+            }}
142
+          >
143
+            新增
144
+          </Button>,
145
+        ]}
146
+        // request={queryUserList}
147
+        columns={columns}
148
+      />
149
+    </Page>
150
+  );
151
+};

+ 18
- 0
src/routes/Router.jsx Zobrazit soubor

@@ -0,0 +1,18 @@
1
+import React from "react";
2
+import { createHashRouter, RouterProvider } from "react-router-dom";
3
+import { useModel } from "@/store";
4
+import { defaultRoutes } from './routes';
5
+
6
+export default (props) => {
7
+  const { routes } = useModel('user');
8
+
9
+  const router = React.useMemo(() => {
10
+    if (!routes || routes.length < 1) {
11
+      return createHashRouter(defaultRoutes);
12
+    } else {
13
+      return createHashRouter(routes);
14
+    }
15
+  }, [routes]);
16
+  
17
+  return <RouterProvider router={router} />
18
+}

+ 37
- 0
src/routes/hooks/usePrompt.jsx Zobrazit soubor

@@ -0,0 +1,37 @@
1
+import React from "react";
2
+import { UNSAFE_NavigationContext } from "react-router-dom";
3
+
4
+// 估计在 react-router v6 的后续某个版本 usePrompt 会回归
5
+// v6.7 已经添加 UNSAFE_usePrompt
6
+export function usePrompt(message, when = true) {
7
+  let blocker = React.useCallback(
8
+    tx => {
9
+      if (window.confirm(message)) tx.retry();
10
+    },
11
+    [message]
12
+  );
13
+
14
+  useBlocker(blocker, when);
15
+}
16
+
17
+function useBlocker(blocker, when = true) {
18
+  let { navigator } = React.useContext(UNSAFE_NavigationContext);
19
+
20
+  React.useEffect(() => {
21
+    if (!when) return;
22
+
23
+    let unblock = navigator.block((tx) => {
24
+      let autoUnblockingTx = {
25
+        ...tx,
26
+        retry() {
27
+          unblock();
28
+          tx.retry();
29
+        }
30
+      };
31
+
32
+      blocker(autoUnblockingTx);
33
+    });
34
+
35
+    return unblock;
36
+  }, [navigator, blocker, when]);
37
+}

+ 17
- 0
src/routes/hooks/useRoute.jsx Zobrazit soubor

@@ -0,0 +1,17 @@
1
+import { useLocation } from "react-router-dom";
2
+import { routes } from '../routes';
3
+import { flatten } from "../utils";
4
+
5
+let routeMap = null;
6
+
7
+// 获取当前的 route 信息
8
+export default function useRoute() {
9
+  if (!routeMap) {
10
+    routeMap = flatten(routes);
11
+  }
12
+
13
+  const location = useLocation();
14
+  return routeMap[location.pathname];
15
+  // const currentRoute = routeArr.filter(x => x.path === location.pathname)[0];
16
+  // return currentRoute;
17
+}

+ 44
- 0
src/routes/menus.jsx Zobrazit soubor

@@ -0,0 +1,44 @@
1
+import { Link } from 'react-router-dom';
2
+import { getPath } from './utils';
3
+
4
+// 菜单是否显示
5
+// 没有 meta 或者 meta.title 为空, 或者 meta.hideInMenu = true 的 都不显示
6
+const isShow = item => item.meta && item.meta.title && !item.meta.hideInMenu;
7
+
8
+const hasChildren = (list) => {
9
+  if (!list || list.length < 1) return false;
10
+
11
+  // 如果子元素全部都是不显示的, 说明子菜单不需要显示
12
+  return list.filter(it => !isShow(it)).length !== list.length;
13
+}
14
+
15
+export const getMenuItems = (routes = [], fullPath = '/') => {
16
+  return routes.map(route => {
17
+    const path = getPath(fullPath, route.path);
18
+
19
+    //
20
+    if (!isShow(route)) return false;
21
+    
22
+    const children = hasChildren(route.children) ? getMenuItems(route.children, path) : false;
23
+
24
+    const { target, title, icon } = route.meta || {}
25
+
26
+    // 坑爹 react-router v6 不支持 hash 路由的 target 跳转
27
+    const label = target === '_blank' ?
28
+      <a href={`${window.location.pathname}#${path}`} target={target}>{title}</a>
29
+      : (
30
+        path.indexOf('http') === 0  ? <a href={path} target="_blank">{title}</a>
31
+        : <Link to={path} target={target}>{title}</Link>
32
+      );
33
+
34
+    return Object.assign(
35
+      {
36
+        key: path,
37
+        label,
38
+        title,
39
+        icon,
40
+      },
41
+      children && { children },
42
+    )
43
+  }).filter(Boolean);
44
+}

+ 14
- 0
src/routes/permissions.js Zobrazit soubor

@@ -0,0 +1,14 @@
1
+
2
+export const getAuthedRoutes = (routes, permissions) => {
3
+  if (!routes || routes.length < 1) return [];
4
+
5
+  return routes.map(route => {
6
+    if (route.meta && route.meta.permission && permissions.indexOf(route.meta.permission) < 0) return false;
7
+
8
+    if (route.children) {
9
+      route.children = getAuthedRoutes(route.children, permissions);
10
+    }
11
+
12
+    return route;
13
+  }).filter(Boolean);
14
+}

+ 118
- 0
src/routes/routes.jsx Zobrazit soubor

@@ -0,0 +1,118 @@
1
+import {
2
+  UserOutlined,
3
+  BankOutlined,
4
+  DesktopOutlined,
5
+} from "@ant-design/icons";
6
+import { Navigate } from "react-router-dom";
7
+import AuthLayout from "@/layouts/AuthLayout";
8
+import Login from "@/pages/login";
9
+import Page404 from "@/pages/404";
10
+import Home from "@/pages/sample/home";
11
+import User from "@/pages/user";
12
+import UserEdit from "@/pages/user/Edit";
13
+import Org from "@/pages/org/index";
14
+
15
+/**
16
+ * meta 用来扩展自定义数据数据
17
+ * {
18
+ *    title: 用于页面或者菜单的标题, 没有此字段, 菜单不会显示
19
+ *    hideInMenu: 布尔值, 如果为 false, 菜单不会显示
20
+ *    noLayout: 布尔值, 如果为 true, 将不会使用默认布局
21
+ *    noSiderBar: 布尔值, 如果为 true, 将没有左侧菜单栏
22
+ *    noFooter: 布尔值, 如果为 true, 将没有底部 footer
23
+ *    target: 字符串, 如果为 _blank, 将在新窗口打开
24
+ *    permission: 对应服务器端权限名称
25
+ * }
26
+ */
27
+
28
+export const authRoutes = [
29
+  {
30
+    index: true,
31
+    element: <Navigate to="/user" replace={true} />,
32
+  },
33
+  {
34
+    path: "user",
35
+    element: <User />,
36
+    meta: {
37
+      title: "人员管理",
38
+      icon: <UserOutlined />,
39
+      // permission: 'user',
40
+    }
41
+  },
42
+  {
43
+    path: "user/edit",
44
+    element: <UserEdit />,
45
+    meta: {
46
+      title: "人员维护",
47
+      hideInMenu: true,
48
+      // permission: 'user.edit',
49
+    },
50
+  },
51
+  {
52
+    path: "org",
53
+    element: <Org />,
54
+    meta: {
55
+      title: "机构管理",
56
+      icon: <BankOutlined />,
57
+      // permission: 'org',
58
+    },
59
+  },
60
+];
61
+
62
+export const defaultRoutes = [
63
+  {
64
+    path: "/",
65
+    element: <AuthLayout />,
66
+    children: [
67
+      {
68
+        path: "home",
69
+        element: <Home />,
70
+        meta: {
71
+          title: "首页",
72
+          icon: <DesktopOutlined />,
73
+        },
74
+      },
75
+      {
76
+        path: "*",
77
+        element: <Page404 />,
78
+      },
79
+    ],
80
+  },
81
+  {
82
+    path: "/login",
83
+    element: <Login />,
84
+  },
85
+  {
86
+    path: "*",
87
+    element: <Page404 />,
88
+  },
89
+];
90
+
91
+export function mergeAuthRoutes (r1, r2) {
92
+  const r = r1.slice();
93
+  const children = r1[0].children.slice();
94
+  r[0].children = children.concat(r2);
95
+  return r;
96
+}
97
+
98
+// 全部路由
99
+export const routes = mergeAuthRoutes(defaultRoutes, authRoutes);
100
+function getPath (parent = "/", current = "") {
101
+  if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
102
+    return current;
103
+  return `${parent}/${current}`.replace(/\/\//g, "/");
104
+}
105
+
106
+// 路由数组, 一维数组
107
+export const routeArr = (() => {
108
+  const flatten = (routes, parentPath = "/") => {
109
+    return routes.reduce((acc, route) => {
110
+      const path = getPath(parentPath, route.path);
111
+      const children = route.children ? flatten(route.children, path) : [];
112
+
113
+      return acc.concat([{ ...route, path }].concat(children));
114
+    }, []);
115
+  };
116
+
117
+  return flatten(routes);
118
+})();

+ 22
- 0
src/routes/utils.js Zobrazit soubor

@@ -0,0 +1,22 @@
1
+
2
+// 获取组件路径
3
+export function getPath (parent = "/", current = "") {
4
+  if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
5
+    return current;
6
+  return `${parent}/${current}`.replace(/\/\//g, "/");
7
+}
8
+
9
+// 展平 routes, 为一个简单对象
10
+// 如果出现 父组件与子组件相同路由, 那么子组件会覆盖父组件
11
+export function flatten (routes, parentPath = "/") {
12
+  return routes.reduce((acc, route) => {
13
+    const path = route.index ? parentPath : getPath(parentPath, route.path);
14
+    const children = route.children ? flatten(route.children, path) : {};
15
+
16
+    return {
17
+      ...acc,
18
+      [path]: route,
19
+      ...children,
20
+    }
21
+  }, {});
22
+};

+ 19
- 0
src/services/login.js Zobrazit soubor

@@ -0,0 +1,19 @@
1
+import request from "@/utils/request";
2
+
3
+/*
4
+ * 修改密码
5
+ */
6
+export const changePassword = (id, data) =>
7
+  request(`/api/sysUser/${id}/change-pwd`, { data, method: "put" });
8
+
9
+/*
10
+ * 后台登录
11
+ */
12
+export const login = (data) =>
13
+  request("/api/sso/doLogin", { data, method: "post" });
14
+
15
+/*
16
+ * 登出
17
+ */
18
+export const logout = (data) =>
19
+  request("/api/admin/logout", { data, method: "post" });

+ 10
- 0
src/services/sys_user.js Zobrazit soubor

@@ -0,0 +1,10 @@
1
+import request from "@/utils/request";
2
+
3
+/*
4
+ * 查询当前人员
5
+ */
6
+
7
+export const currentUser = (params) => {
8
+  console.log("currentUser");
9
+  return request("/api/sysUser/current", { params });
10
+};

+ 50
- 0
src/services/sysuser.js Zobrazit soubor

@@ -0,0 +1,50 @@
1
+import request from "@/utils/request";
2
+
3
+/*
4
+ * 分页查询
5
+ */
6
+export const getSysUser = (params) => request("/api/sysUser", { params });
7
+
8
+/*
9
+ * 新增数据
10
+ */
11
+export const postSysUser = (data) =>
12
+  request("/api/sysUser", { data, method: "post" });
13
+
14
+/*
15
+ * 通过ID查询单条数据
16
+ */
17
+export const getSysUserById = (id) => request(`/api/sysUser/${id}`);
18
+
19
+/*
20
+ * 通过ID查询单条数据
21
+ */
22
+export const currentUser = () => request(`/api/sysUser/current`);
23
+
24
+/*
25
+ * 更新数据
26
+ */
27
+export const putSysUser = (id, data) =>
28
+  request(`/api/sysUser/${id}`, { data, method: "put" });
29
+
30
+/*
31
+ * 通过主键删除数据
32
+ */
33
+export const deleteSysUser = (id) =>
34
+  request(`/api/sysUser/${id}`, { method: "delete" });
35
+
36
+/*
37
+ * 更新状态
38
+ */
39
+export const updateUserStatus = (id, status) =>
40
+  request(`/api/sysUser/${id}/status?status=${status}`, { method: "put" });
41
+/*
42
+ * 重置密码
43
+ */
44
+export const resetPwd = (id, pwd) =>
45
+  request(`/api/sysUser/${id}/reset-pwd?pwd=${pwd}`, { method: "put" });
46
+
47
+/**
48
+ * 获取ticket
49
+ */
50
+export const getTicket = (params) => request(`/api/sso/getTicket`, { params });

+ 14
- 0
src/store/index.js Zobrazit soubor

@@ -0,0 +1,14 @@
1
+import { createStore } from "@zjxpcyc/react-tiny-store";
2
+import useSystem from "./models/system";
3
+import useUser from "./models/user";
4
+
5
+const store = createStore({
6
+  system: useSystem,
7
+  user: useUser,
8
+});
9
+
10
+export default store
11
+export const useModel = store.useModel
12
+export const addModel = store.addModel
13
+export const removeModel = store.removeModel
14
+export const Provider = store.Provider

+ 20
- 0
src/store/models/system.js Zobrazit soubor

@@ -0,0 +1,20 @@
1
+import { useState, useCallback } from "react";
2
+
3
+export default function useSystem () {
4
+  // 主题
5
+  const [theme, updateTheme] = useState('light');
6
+
7
+  // 其他配置
8
+  const [app, setApp] = useState({
9
+    fullName: '开票信息收集公示系统',
10
+    shorName: '开票信息',
11
+    company: '云致'
12
+  });
13
+
14
+  return {
15
+    theme,
16
+    updateTheme,
17
+    app,
18
+    hashRoute: true,
19
+  }
20
+}

+ 39
- 0
src/store/models/user.js Zobrazit soubor

@@ -0,0 +1,39 @@
1
+import { useState, useRef } from "react";
2
+import { defaultRoutes, authRoutes, mergeAuthRoutes } from "@/routes/routes";
3
+import { getMenuItems } from "@/routes/menus";
4
+import { getAuthedRoutes } from "@/routes/permissions";
5
+import { currentUser } from "@/services/sys_user";
6
+
7
+export default function useUser() {
8
+  const [user, setUser] = useState();
9
+  const menusRef = useRef();
10
+  const routesRef = useRef();
11
+
12
+  const getCurrentUser = (params) =>
13
+    new Promise((resolve, reject) => {
14
+      currentUser(params)
15
+        .then((res) => {
16
+          const { user } = res;
17
+          const permissions = (user.resourcesList || []).map((x) => x.resourceCode);
18
+
19
+          // authRoutes 是所有待验证授权的路由
20
+          // authedRoutes 是已经被授权的路由
21
+          const authedRoutes = getAuthedRoutes(authRoutes, permissions);
22
+
23
+          menusRef.current = getMenuItems(authedRoutes);
24
+          routesRef.current = mergeAuthRoutes(defaultRoutes, authedRoutes);
25
+
26
+          setUser(user);
27
+          resolve(user);
28
+        })
29
+        .catch(reject);
30
+    });
31
+
32
+  return {
33
+    user,
34
+    setUser,
35
+    getCurrentUser,
36
+    menus: menusRef.current || [],
37
+    routes: routesRef.current || [],
38
+  };
39
+}

+ 11
- 0
src/theme.less Zobrazit soubor

@@ -0,0 +1,11 @@
1
+
2
+.light {
3
+  .ant-layout,
4
+  .ant-layout-header,
5
+  .ant-layout-sider,
6
+  .ant-layout-sider-trigger,
7
+  .ant-menu
8
+   {
9
+    background: transparent !important;
10
+  }
11
+}

+ 64
- 0
src/utils/array.js Zobrazit soubor

@@ -0,0 +1,64 @@
1
+/**
2
+ * 数组 转 Tree
3
+ * @param {*} arr
4
+ * @param {*} parent
5
+ * @param {*} key
6
+ * @returns
7
+ */
8
+export function arr2Tree(arr = [], parent = "parentId", key = "key") {
9
+  // 转换为字典
10
+  const dict = arr.reduce((acc, item) => {
11
+    return {
12
+      ...acc,
13
+      [item[key]]: {
14
+        ...item,
15
+        children: [],
16
+      },
17
+    };
18
+  }, {});
19
+
20
+  // // 查找顶级结点
21
+  // const getRootNode = (node) => {
22
+  //   const found = arr.filter((x) => node[parentId] === x[key])[0];
23
+
24
+  //   return !found ? dict[node[key]] : getRootNode(found);
25
+  // };
26
+
27
+  // 挂载父子节点
28
+  const tree = [];
29
+  for (let item of arr) {
30
+    const it = dict[item[key]];
31
+    const parentNodeId = it[parent];
32
+    const parentNode = dict[parentNodeId];
33
+
34
+    if (!parentNode) {
35
+      tree.push(it);
36
+    } else {
37
+      dict[parentNodeId].children.push(it);
38
+    }
39
+  }
40
+  return [tree, dict];
41
+}
42
+
43
+/**
44
+ * 深度展平数组
45
+ * @param {*} arr
46
+ * @returns
47
+ */
48
+export function flatten(arr = []) {
49
+  return arr.reduce((acc, it) => {
50
+    const list = Array.isArray(it) ? flatten(it) : it;
51
+    return acc.concat(list);
52
+  }, []);
53
+}
54
+
55
+/**
56
+ * 深度数组去重
57
+ * @param {*} arr
58
+ */
59
+export function uniq(arr = []) {
60
+  const list = flatten(arr);
61
+  return list.reduce((acc, it) => {
62
+    return acc.indexOf(it) > -1 ? acc : acc.concat(it);
63
+  }, []);
64
+}

+ 8
- 0
src/utils/css.js Zobrazit soubor

@@ -0,0 +1,8 @@
1
+
2
+export function setProperty(...args) {
3
+  document.documentElement.style.setProperty(...args);
4
+}
5
+
6
+export function getPropertyValue(...args) {
7
+  return getComputedStyle(document.documentElement).getPropertyValue(...args);
8
+}

+ 17
- 0
src/utils/download.js Zobrazit soubor

@@ -0,0 +1,17 @@
1
+export function fetchBlob(url) {
2
+  return window.fetch(url).then((response) => response.blob());
3
+}
4
+
5
+export function downloadBlob(blob, fileName) {
6
+  console.info(blob)
7
+  const url = window.URL.createObjectURL(blob);
8
+  const link = document.createElement('a');
9
+  link.href = url;
10
+  link.setAttribute('download', fileName);
11
+  link.click();
12
+  window.URL.revokeObjectURL(url);
13
+}
14
+
15
+export function downloadUrl(url, fileName) {
16
+  return fetchBlob(url).then((blob) => downloadBlob(blob, fileName));
17
+}

+ 5
- 0
src/utils/float.js Zobrazit soubor

@@ -0,0 +1,5 @@
1
+const epsilonN = N => num => Math.round( num * N + Number.EPSILON ) / N;
2
+
3
+// 可以处理丢失精度的问题
4
+// 比如 epsilon2(0.29 * 100)
5
+export const epsilon2 = epsilonN(1e2);

+ 23
- 0
src/utils/form.js Zobrazit soubor

@@ -0,0 +1,23 @@
1
+
2
+export const formItemLayout = {
3
+  labelCol: {
4
+    xs: { span: 24 },
5
+    sm: { span: 8 },
6
+  },
7
+  wrapperCol: {
8
+    xs: { span: 24 },
9
+    sm: { span: 16 },
10
+  },
11
+};
12
+export const tailFormItemLayout = {
13
+  wrapperCol: {
14
+    xs: {
15
+      span: 24,
16
+      offset: 0,
17
+    },
18
+    sm: {
19
+      span: 16,
20
+      offset: 8,
21
+    },
22
+  },
23
+};

+ 13
- 0
src/utils/hooks/useBool.js Zobrazit soubor

@@ -0,0 +1,13 @@
1
+import React from "react";
2
+
3
+export default function useLoading(initial = false) {
4
+  const [loading, setLoading] = React.useState(initial);
5
+  const loadingRef = React.useRef();
6
+  loadingRef.current = loading;
7
+
8
+  const setTrue = React.useCallback(() => setLoading(true), []);
9
+  const setFalse = React.useCallback(() => setLoading(false), []);
10
+  const toggle = React.useCallback(() => setLoading(!loadingRef.current), []);
11
+
12
+  return [loading, setTrue, setFalse, setLoading, toggle];
13
+}

+ 19
- 0
src/utils/observe.js Zobrazit soubor

@@ -0,0 +1,19 @@
1
+
2
+export default function observe() {
3
+  const listeners = [];
4
+
5
+  const subscribe = (fn) => {
6
+    listeners.push(fn);
7
+
8
+    return () => listeners.splice(listeners.indexOf(fn), 1)
9
+  }
10
+
11
+  const notify = (...args) => {
12
+    listeners.forEach(fn => fn(...args))
13
+  }
14
+
15
+  return {
16
+    subscribe,
17
+    notify,
18
+  }
19
+}

+ 202
- 0
src/utils/request.js Zobrazit soubor

@@ -0,0 +1,202 @@
1
+import axios from "axios";
2
+import React from "react";
3
+import { message } from "antd";
4
+import { getToken, setToken } from "./token";
5
+
6
+const instance = axios.create({
7
+  baseURL: SERVER_BASE,
8
+  timeout: 10000,
9
+  withCredentials: true, // 跨域
10
+});
11
+
12
+// 添加请求拦截器
13
+instance.interceptors.request.use(
14
+  function (config) {
15
+    const {
16
+      headers = {},
17
+      method = "get",
18
+      responseType = "json",
19
+      download = false,
20
+      silent,
21
+      params = {},
22
+    } = config;
23
+    let token = localStorage.getItem("token") || "";
24
+
25
+    let noTip = silent;
26
+    if (noTip === undefined) {
27
+      noTip = method.toLocaleLowerCase() === "get" ? true : false;
28
+    }
29
+
30
+    const ticketOrigin = localStorage.getItem('ticket');
31
+    if (params.ticket && params.ticket != ticketOrigin) {
32
+      token = '';
33
+      localStorage.setItem('ticket', params.ticket);
34
+    } else {
35
+      params.ticket = undefined,
36
+        params.appid = undefined;
37
+    }
38
+
39
+    // 在发送请求之前做些什么
40
+    return {
41
+      ...config,
42
+      params,
43
+      silent: noTip,
44
+      headers: {
45
+        ...headers,
46
+        Authorization: token,
47
+      },
48
+      responseType: download ? "blob" : responseType,
49
+    };
50
+  },
51
+  function (error) {
52
+    // 对请求错误做些什么
53
+    return Promise.reject(error);
54
+  }
55
+);
56
+
57
+// 添加响应拦截器
58
+instance.interceptors.response.use(
59
+  function (response) {
60
+    // 2xx 范围内的状态码都会触发该函数。
61
+    // 对响应数据做点什么
62
+
63
+    const { data, config } = response;
64
+
65
+    if (config.download && !data.code) {
66
+      return downloadBlob(response, "下载文件");
67
+    }
68
+
69
+    if (data.code === 200) {
70
+      if (data.data?.token) {
71
+        setToken(data.data.token);
72
+      }
73
+
74
+      if (!config.silent) {
75
+        message.success("操作成功");
76
+      }
77
+
78
+      return data.data;
79
+    } else if (data.code === 401) {
80
+      if (!config.silent) {
81
+        message.error("未登录或者超时, 请重新登录");
82
+      }
83
+    } else {
84
+      console.log(config);
85
+      if (!config.silent) {
86
+        const errMsg = data.msg || "系统错误";
87
+        message.error(errMsg.indexOf("exception") > -1 ? "服务异常" : errMsg);
88
+      }
89
+    }
90
+
91
+    return Promise.reject(response);
92
+  },
93
+  function (error) {
94
+    // 超出 2xx 范围的状态码都会触发该函数。
95
+    // 对响应错误做点什么
96
+
97
+    console.error(error);
98
+
99
+    return Promise.reject("网络异常, 请重试...");
100
+  }
101
+);
102
+
103
+export default instance;
104
+
105
+export function queryTable (apiRequest) {
106
+  return function (params) {
107
+    const { pageSize } = params;
108
+    return apiRequest({
109
+      ...params,
110
+      pageSize,
111
+      pageNum: params.current,
112
+    })
113
+      .then((res) => {
114
+        return {
115
+          data: res.records,
116
+          success: true,
117
+          total: res.total,
118
+        };
119
+      })
120
+      .catch((err) => {
121
+        return {
122
+          success: false,
123
+        };
124
+      });
125
+  };
126
+}
127
+
128
+export function queryDict (
129
+  apiRequest,
130
+  { labelKey = "name", valueKey = "id" } = {}
131
+) {
132
+  return function (params) {
133
+    const { current, pageSize, ...leftParams } = params || {};
134
+    return apiRequest({
135
+      pageSize: 9999,
136
+      pageNum: 1,
137
+      ...(leftParams || {}),
138
+    })
139
+      .then((res) => {
140
+        return res?.records?.map((x) => ({
141
+          label: x[labelKey],
142
+          value: x[valueKey],
143
+          ...x,
144
+        }));
145
+      })
146
+      .catch((err) => {
147
+        return {
148
+          success: false,
149
+        };
150
+      });
151
+  };
152
+}
153
+export function restful (url) {
154
+  const list = (params) => instance.get(url, { params });
155
+  const get = (id) => instance.get(`${url}/${id}`);
156
+  const add = (data) => instance.post(url, data);
157
+  const update = (id, data) => instance.put(`${url}/${id}`, data);
158
+  const del = (id) => instance.delete(`${url}/${id}`);
159
+
160
+  return [list, get, add, update, del];
161
+}
162
+
163
+export function useRequest (fn) {
164
+  const [loading, setLoading] = React.useState(false);
165
+
166
+  const p = (...args) =>
167
+    new Promise((resolve, reject) => {
168
+      setLoading(true);
169
+      fn(...args)
170
+        .then((res) => {
171
+          setLoading(false);
172
+          resolve(res);
173
+        })
174
+        .catch((e) => {
175
+          setLoading(false);
176
+          reject(e);
177
+        });
178
+    });
179
+
180
+  return [loading, p];
181
+}
182
+
183
+function downloadBlob (response) {
184
+  let fileName = "未知文件";
185
+  const contentType = response.headers["content-type"];
186
+  const contentDisposition = response.headers["content-disposition"];
187
+  if (contentDisposition) {
188
+    const parts = contentDisposition.split(";filename=");
189
+    if (parts[1]) {
190
+      fileName = decodeURIComponent(parts[1]);
191
+    }
192
+  }
193
+
194
+  const url = window.URL.createObjectURL(
195
+    new Blob([response.data], { type: contentType })
196
+  );
197
+  const link = document.createElement("a");
198
+  link.href = url;
199
+  link.setAttribute("download", fileName);
200
+  link.click();
201
+  window.URL.revokeObjectURL(url);
202
+}

+ 70
- 0
src/utils/sso.js Zobrazit soubor

@@ -0,0 +1,70 @@
1
+import { getToken, setToken } from "./token";
2
+
3
+/**
4
+ * 异或加密, 可同时进行加密及解密
5
+ * @param {*} src 原始数据或待解密数据
6
+ * @param {*} key 密钥数组
7
+ * @returns 
8
+ */
9
+function xorDecrypt(src, key) {
10
+  let output = '';
11
+  for (var i = 0; i < src.length; i++) {
12
+    const c = src[i].charCodeAt();
13
+    const k = key[i % key.length];
14
+    output += String.fromCharCode(c ^ k);
15
+  }
16
+  return output;
17
+}
18
+
19
+/**
20
+ * 获取 token
21
+ * @param {*} url 
22
+ * @returns 
23
+ */
24
+function getTokenFromUrl(url) {
25
+  const matches = url.match(/sso-token=([^/&?]+)/);
26
+  return matches?.[1];
27
+}
28
+
29
+/**
30
+ * 初始化 token
31
+ * @returns 
32
+ */
33
+export function initTokenIfExists() {
34
+  // token 是 base64 格式
35
+  const base64Str = getTokenFromUrl(window.location.href);
36
+  if (!base64Str) return;
37
+
38
+  // base64 解码
39
+  const tkMixStr = window.atob(base64Str);
40
+  if (!tkMixStr) return;
41
+
42
+  // 解码后的格式为 xxxx-xxxxxxxxx
43
+  // 其中第一部分为密钥, 第二部分为 加密字串
44
+  const [keyStr, ...tkArr] = tkMixStr.split('-')
45
+  if (!keyStr || !tkArr.length) return;
46
+  
47
+  // 需要异或解密的是第二部分
48
+  const tkStr = tkArr.join('-');
49
+  const tk = xorDecrypt(tkStr, keyStr.split(''))
50
+  if (tk) {
51
+    setToken(tk);
52
+  }
53
+}
54
+
55
+/**
56
+ * 获取加密且可用于 URL 的 token
57
+ * @returns 
58
+ */
59
+export function getEncryptToken() {
60
+  const tk = getToken();
61
+  if (!tk) return;
62
+
63
+  const key = (new Date).valueOf();
64
+  
65
+  // 用 key 加密 token
66
+  const cipherText = xorDecrypt(tk, `${key}`.split(''));
67
+  const mixStr = [key, cipherText].join('-');
68
+
69
+  return window.btoa(mixStr);
70
+}

+ 0
- 0
src/utils/token.js Zobrazit soubor


Některé soubory nejsou zobrazny, neboť je v této revizi změněno mnoho souborů