Merge pull request #59 from MrHGJ/feature/#58

feat: add result page
hiui-group · Mar 23, 2022 · 0c85ec0 · 0c85ec0
2 parents e7d8bbd + 3cc0285
commit 0c85ec0
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@hi-ui/icons": "^4.0.0-beta.6",
     "@hi-ui/loading": "^4.0.0-beta.7",
     "@hi-ui/radio": "^4.0.0-beta.5",
+    "@hi-ui/result": "^4.0.0-alpha.1",
     "@hi-ui/table": "^4.0.0-beta.27",
     "@hi-ui/utils": "^4.0.0-beta.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

diff --git a/src/views/exception-network/index.tsx b/src/views/exception-network/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@hi-ui/hiui";
 import { PlusOutlined } from "@hi-ui/icons";
+import Result, { IconNetError } from "@hi-ui/result";
 import { ContentHeader } from "../../components/content-header";
 
 export const ExceptionNetwork = () => {
@@ -22,5 +23,27 @@ export const ExceptionNetwork = () => {
         </div>
       }
     />
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'calc(100vh - 56px - 130px)',
+        margin: '20px',
+        background: '#fff',
+      }}
+    >
+      <Result
+        image={<IconNetError />}
+        imageSize="lg"
+        title="网络中断"
+        content="抱歉，网络连接中断，请稍后再试！"
+        children={
+          <Button type="primary">
+            刷新页面
+          </Button>
+        }
+      />
+    </div>
   </div>
 }
diff --git a/src/views/exception-notfound/index.tsx b/src/views/exception-notfound/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@hi-ui/hiui";
 import { PlusOutlined } from "@hi-ui/icons";
+import Result, { IconNotFound } from "@hi-ui/result";
 import { ContentHeader } from "../../components/content-header";
 
 export const ExceptionNotfound = () => {
@@ -22,5 +23,27 @@ export const ExceptionNotfound = () => {
         </div>
       }
     />
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'calc(100vh - 56px - 130px)',
+        margin: '20px',
+        background: '#fff',
+      }}
+    >
+      <Result
+        image={<IconNotFound />}
+        imageSize="lg"
+        title="404"
+        content="抱歉，服务器开小差了！"
+        children={
+          <Button type="primary">
+            立即申请
+          </Button>
+        }
+      />
+    </div>
   </div>
 }
diff --git a/src/views/exception-permission/index.tsx b/src/views/exception-permission/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@hi-ui/hiui";
 import { PlusOutlined } from "@hi-ui/icons";
+import Result, { IconNoPermission } from "@hi-ui/result";
 import { ContentHeader } from "../../components/content-header";
 
 export const ExceptionPermission = () => {
@@ -22,5 +23,27 @@ export const ExceptionPermission = () => {
         </div>
       }
     />
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'calc(100vh - 56px - 130px)',
+        margin: '20px',
+        background: '#fff',
+      }}
+    >
+      <Result
+        image={<IconNoPermission />}
+        imageSize="lg"
+        title="暂无权限"
+        content="抱歉，您没有当前模块的访问权限"
+        children={
+          <Button type="primary">
+            立即申请
+          </Button>
+        }
+      />
+    </div>
   </div>
 }
diff --git a/src/views/exception-server-error/index.tsx b/src/views/exception-server-error/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@hi-ui/hiui";
 import { PlusOutlined } from "@hi-ui/icons";
+import Result, { IconServerError } from "@hi-ui/result";
 import { ContentHeader } from "../../components/content-header";
 
 export const ExceptionServerError = () => {
@@ -22,5 +23,27 @@ export const ExceptionServerError = () => {
         </div>
       }
     />
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'calc(100vh - 56px - 130px)',
+        margin: '20px',
+        background: '#fff',
+      }}
+    >
+      <Result
+        image={<IconServerError />}
+        imageSize="lg"
+        title="500"
+        content="抱歉，服务器开小差了！"
+        children={
+          <Button type="primary">
+            立即申请
+          </Button>
+        }
+      />
+    </div>
   </div>
 }
diff --git a/src/views/result-failure/index.tsx b/src/views/result-failure/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@hi-ui/hiui";
 import { PlusOutlined } from "@hi-ui/icons";
+import Result from "@hi-ui/result";
 import { ContentHeader } from "../../components/content-header";
 
 export const ResultFailure = () => {
@@ -22,5 +23,44 @@ export const ResultFailure = () => {
         </div>
       }
     />
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        height: 'calc(100vh - 56px - 130px)',
+        margin: '20px',
+        background: '#fff',
+      }}
+    >
+      <Result
+        title="工单创建失败"
+        type="error"
+        content="抱歉，您的工地创建失败，您可以联系检查创建者权限，或返回修改。"
+        style={{width:'calc(100% - 250px)', marginTop:'12px'}}
+      >
+        <div>
+            {[
+              <Button type="primary" key="create">继续创建</Button>,
+              <Button key="back">返回首页</Button>,
+            ]}
+            <div
+              style={{
+                whiteSpace: 'pre-wrap',
+                marginTop: '48px',
+                padding: '16px 20px',
+                background: '#f5f7fa',
+                boxSizing: 'border-box',
+                fontSize: '14px',
+                color: '#5f6a7a',
+                textAlign: 'left',
+                borderRadius: '6px',
+              }}
+            >
+              <div style={{fontWeight:600, color:'#1f2733', marginBottom:'6px'}}>说明</div>
+              {'此处展示共建创建失败的相关说明文字，此处展示共建创建失败的相关说明文字，\n此处展示共建创建失败后可以进行的后续操作'}
+            </div>
+          </div>
+      </Result>
+    </div>
   </div>
 }
diff --git a/src/views/result-success/index.tsx b/src/views/result-success/index.tsx
@@ -1,5 +1,6 @@
-import { Button } from "@hi-ui/hiui";
+import { Button, Stepper } from "@hi-ui/hiui";
 import { PlusOutlined } from "@hi-ui/icons";
+import Result from "@hi-ui/result";
 import { ContentHeader } from "../../components/content-header";
 
 export const ResultSuccess = () => {
@@ -22,5 +23,51 @@ export const ResultSuccess = () => {
         </div>
       }
     />
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        height: 'calc(100vh - 56px - 130px)',
+        margin: '20px',
+        background: '#fff',
+      }}
+    >
+      <Result
+        title="工单创建成功"
+        type="success"
+        content="您可以继续创建、或进行下一步操作"
+        style={{ width: 'calc(100% - 250px)', marginTop: '12px' }}
+      >
+        <div>
+          {[
+            <Button type="primary" key="create">继续创建</Button>,
+            <Button key="handle">处理工单</Button>,
+            <Button key="back">返回首页</Button>,
+          ]}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginTop: '48px',
+              padding: '40px 0px',
+              background: '#f5f7fa',
+              borderRadius: '6px',
+              textAlign: 'left'
+            }}
+          >
+            <Stepper
+              style={{maxWidth: '570px'}}
+              data={[
+                { title: '创建工单完成' },
+                { title: '指派工程师' },
+                { title: '处理工单' },
+              ]}
+              current={2}
+            />
+          </div>
+        </div>
+      </Result>
+    </div>
   </div>
 }