feat: course9

aspirantzhang · Feb 26, 2021 · 32de788 · 32de788
1 parent ca08b1d
commit 32de788
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 242 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Settings as LayoutSettings } from '@ant-design/pro-layout';
 import { PageLoading } from '@ant-design/pro-layout';
-import { notification } from 'antd';
+import { message } from 'antd';
 import type { RequestConfig, RunTimeLayoutConfig } from 'umi';
 import { history } from 'umi';
 import RightContent from '@/components/RightContent';
@@ -93,46 +93,44 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
   };
 };
 
-const codeMessage = {
-  200: '服务器成功返回请求的数据。',
-  201: '新建或修改数据成功。',
-  202: '一个请求已经进入后台排队（异步任务）。',
-  204: '删除数据成功。',
-  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
-  401: '用户没有权限（令牌、用户名、密码错误）。',
-  403: '用户得到授权，但是访问是被禁止的。',
-  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
-  405: '请求方法不被允许。',
-  406: '请求的格式不可得。',
-  410: '请求的资源被永久删除，且不会再得到的。',
-  422: '当创建一个对象时，发生一个验证错误。',
-  500: '服务器发生错误，请检查服务器。',
-  502: '网关错误。',
-  503: '服务不可用，服务器暂时过载或维护。',
-  504: '网关超时。',
-};
-
 /** 异常处理程序
  * @see https://beta-pro.ant.design/docs/request-cn
  */
 const errorHandler = (error: ResponseError) => {
-  const { response } = error;
-  if (response && response.status) {
-    const errorText = codeMessage[response.status] || response.statusText;
-    const { status, url } = response;
-
-    notification.error({
-      message: `请求错误 ${status}: ${url}`,
-      description: errorText,
-    });
+  switch (error.name) {
+    case 'BizError':
+      if (error.data.message) {
+        message.error({
+          content: error.data.message,
+          key: 'process',
+          duration: 20,
+        });
+      } else {
+        message.error({
+          content: 'Business Error, please try again.',
+          key: 'process',
+          duration: 20,
+        });
+      }
+      break;
+    case 'ResponseError':
+      message.error({
+        content: `${error.response.status} ${error.response.statusText}. Please try again.`,
+        key: 'process',
+        duration: 20,
+      });
+      break;
+    case 'TypeError':
+      message.error({
+        content: `Network error. Please try again.`,
+        key: 'process',
+        duration: 20,
+      });
+      break;
+    default:
+      break;
   }
 
-  if (!response) {
-    notification.error({
-      description: '您的网络发生异常，无法连接服务器',
-      message: '网络异常',
-    });
-  }
   throw error;
 };
 

diff --git a/src/pages/BasicList/builder/ActionBuilder.tsx b/src/pages/BasicList/builder/ActionBuilder.tsx
@@ -3,7 +3,9 @@ import type { ButtonType } from 'antd/lib/button';
 
 const ActionBuilder = (
   actions: BasicListApi.Action[] | undefined,
-  actionHandler: (action: BasicListApi.Action) => void,
+  actionHandler: BasicListApi.ActionHandler,
+  loading: boolean,
+  record: any,
 ) => {
   return (actions || []).map((action) => {
     if (action.component === 'button') {
@@ -12,8 +14,9 @@ const ActionBuilder = (
           key={action.text}
           type={action.type as ButtonType}
           onClick={() => {
-            actionHandler(action);
+            actionHandler(action, record);
           }}
+          loading={loading}
         >
           {action.text}
         </Button>

diff --git a/src/pages/BasicList/builder/ColumnBuilder.tsx b/src/pages/BasicList/builder/ColumnBuilder.tsx
@@ -2,8 +2,11 @@ import moment from 'moment';
 import { Space, Tag } from 'antd';
 import ActionBuilder from './ActionBuilder';
 
-const ColumnBuilder = (tableColumn: BasicListApi.TableColumn[] | undefined) => {
-  const newColumns: BasicListApi.TableColumn[] = [];
+const ColumnBuilder = (
+  tableColumn: BasicListApi.Field[] | undefined,
+  actionHandler: BasicListApi.ActionHandler,
+) => {
+  const newColumns: BasicListApi.Field[] = [];
   (tableColumn || []).forEach((column) => {
     if (column.hideInColumn !== true) {
       switch (column.type) {
@@ -14,13 +17,13 @@ const ColumnBuilder = (tableColumn: BasicListApi.TableColumn[] | undefined) => {
           break;
         case 'switch':
           column.render = (value: any) => {
-            const option = (column.data || []).find((item) => item.value === value);
+            const option = (column.data || []).find((item: any) => item.value === value);
             return <Tag color={value ? 'blue' : 'red'}>{option?.title}</Tag>;
           };
           break;
         case 'actions':
-          column.render = () => {
-            return <Space>{ActionBuilder(column.actions)}</Space>;
+          column.render = (_: any, record: any) => {
+            return <Space>{ActionBuilder(column.actions, actionHandler, false, record)}</Space>;
           };
           break;
 
@@ -31,7 +34,7 @@ const ColumnBuilder = (tableColumn: BasicListApi.TableColumn[] | undefined) => {
     }
   });
 
-  const idColumn: BasicListApi.TableColumn[] = [
+  const idColumn: BasicListApi.Field[] = [
     {
       title: 'ID',
       dataIndex: 'id',

diff --git a/src/pages/BasicList/builder/FormBuilder.tsx b/src/pages/BasicList/builder/FormBuilder.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input, Form, DatePicker, TreeSelect, Switch } from 'antd';
 
-const FormBuilder = (data: PageApi.Datum[] | undefined) => {
+const FormBuilder = (data: BasicListApi.Field[] | undefined) => {
   return (data || []).map((field) => {
     switch (field.type) {
       case 'text':
@@ -13,7 +13,7 @@ const FormBuilder = (data: PageApi.Datum[] | undefined) => {
       case 'datetime':
         return (
           <Form.Item label={field.title} name={field.key} key={field.key}>
-            <DatePicker showTime disabled={field.disabled} value />
+            <DatePicker showTime disabled={field.disabled} />
           </Form.Item>
         );
       case 'tree':

diff --git a/src/pages/BasicList/component/Modal.tsx b/src/pages/BasicList/component/Modal.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
-import { Modal as AntdModal, Form, Input } from 'antd';
+import { Modal as AntdModal, Form, Input, message } from 'antd';
 import { useRequest } from 'umi';
 import moment from 'moment';
 import FormBuilder from '../builder/FormBuilder';
 import ActionBuilder from '../builder/ActionBuilder';
+import { setFieldsAdaptor, submitFieldsAdaptor } from '../helper';
 
 const Modal = ({
   modalVisible,
@@ -15,25 +16,41 @@ const Modal = ({
   modalUri: string;
 }) => {
   const [form] = Form.useForm();
-  const init = useRequest<{ data: PageApi.Data }>(`${modalUri}`, {
-    manual: true,
-  });
+  const init = useRequest<{ data: BasicListApi.PageData }>(
+    `https://public-api-v2.aspirantzhang.com${modalUri}?X-API-KEY=antd`,
+    {
+      manual: true,
+      onError: () => {
+        hideModal();
+      },
+    },
+  );
+
   const request = useRequest(
     (values: any) => {
+      message.loading({ content: 'Processing...', key: 'process', duration: 0 });
       const { uri, method, ...formValues } = values;
       return {
         url: `https://public-api-v2.aspirantzhang.com${uri}`,
         method,
         data: {
-          ...formValues,
+          ...submitFieldsAdaptor(formValues),
           'X-API-KEY': 'antd',
-          create_time: moment(formValues.create_time).format(),
-          update_time: moment(formValues.update_time).format(),
         },
       };
     },
     {
       manual: true,
+      onSuccess: (data) => {
+        message.success({
+          content: data.message,
+          key: 'process',
+        });
+        hideModal();
+      },
+      formatResult: (res: any) => {
+        return res;
+      },
     },
   );
 
@@ -44,27 +61,6 @@ const Modal = ({
     }
   }, [modalVisible]);
 
-  const setFieldsAdaptor = (data: PageApi.Data) => {
-    if (data?.layout?.tabs && data?.dataSource) {
-      const result = {};
-      data.layout.tabs.forEach((tab) => {
-        tab.data.forEach((field) => {
-          switch (field.type) {
-            case 'datetime':
-              result[field.key] = moment(data.dataSource[field.key]);
-              break;
-
-            default:
-              result[field.key] = data.dataSource[field.key];
-              break;
-          }
-        });
-      });
-      return result;
-    }
-    return {};
-  };
-
   useEffect(() => {
     if (init.data) {
       form.setFieldsValue(setFieldsAdaptor(init.data));
@@ -77,6 +73,7 @@ const Modal = ({
   };
 
   const onFinish = (values: any) => {
+    console.log(values);
     request.run(values);
   };
 
@@ -98,7 +95,7 @@ const Modal = ({
         title={init?.data?.page?.title}
         visible={modalVisible}
         onCancel={hideModal}
-        footer={ActionBuilder(init?.data?.layout?.actions[0]?.data, actionHandler)}
+        footer={ActionBuilder(init?.data?.layout?.actions[0]?.data, actionHandler, request.loading)}
         maskClosable={false}
       >
         <Form

diff --git a/src/pages/BasicList/component/data.d.ts b/src/pages/BasicList/component/data.d.ts