feats

src/components/Page/Edit.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Button, Card, Form } from 'antd';
+import { useSearchParams, useNavigate } from "react-router-dom";
+import useBool from '@/utils/hooks/useBool';
+import { restful } from '@/utils/request';
+import Page from './index';
+
+const FormItem = Form.Item;
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+
+export default (props) => {
+  /**
+   * resource 用来确定应该调用哪个接口
+   * dataFunc 将 form 表单数据转换为接口需要格式, 一般情况下不需要这个操作
+   * formDataFunc 将接口返回的值转换为 form 表单数据格式, 一般情况下不需要这个操作
+   * width form 表单宽度, 默认 800px
+   */
+  const { resource, dataFunc, formDataFunc, width = '800px' } = props;
+  const [loading, startLoading, stopLoading] = useBool();
+  const [form] = Form.useForm();
+  const navigate = useNavigate();
+
+  // 获取 id query 参数, 如果存在说明是编辑，而不是新增
+  const [params] = useSearchParams();
+  const id = params.get("id");
+
+  // 接口汇总
+  const api = React.useMemo(() => {
+    // 通过 resource 知道是哪个接口
+    // 通过 restfule 生成 增删改查的接口
+    const apis = restful(resource);
+
+    // 返回三个接口
+    // 1. 获取详情
+    // 2. 新增
+    // 3. 更新
+    return {
+      get: apis[1],
+      save: apis[2],
+      update: apis[3],
+    }
+  }, [resource]);
+  
+  const navBack = () => {
+    const t = setTimeout(() => {
+      navigate(-1);
+      clearTimeout(t);
+    }, 600);
+  }
+
+  // 表单提交
+  const onFinish = (values) => {    
+    startLoading();
+    // 可能需要转换下格式
+    const data = dataFunc ? dataFunc(id, values) : values;
+    if (id) {
+      api.update(id, data).then(() => {
+        stopLoading();
+        navBack();
+      }).catch(stopLoading);
+    } else {
+      api.save(data)
+        .then(() => {
+          stopLoading();
+          navBack();
+        }).catch(stopLoading);
+    }
+  }
+
+  // 查询详情
+  React.useEffect(() => {
+    if (id) {
+      api.get(id).then(res => {
+        // 此处可能需要转换下数据格式
+        const formData = formDataFunc ? formDataFunc(res) : res;
+        form.setFieldsValue(formData);
+      })
+    }
+  }, [id]);
+
+  return (
+    <Page>
+      <Card>
+        <Form {...formItemLayout} form={form} onFinish={onFinish} style={{width}}>
+          {props.children}
+          <FormItem label=" " colon={false}>
+            <Button type="default" onClick={() => navigate(-1)}>
+              取消
+            </Button>
+            <Button
+              type="primary"
+              htmlType="submit"
+              style={{ marginLeft: '4em' }}
+              loading={loading}
+            >
+              确认
+            </Button>
+          </FormItem>
+        </Form>
+      </Card>
+    </Page>
+  )
+}

src/components/Page/List.jsx

@@ -0,0 +1,90 @@
+import React, { useRef, useMemo } from 'react';
+import { Button, Popconfirm, message } from 'antd';
+import { ProTable } from '@ant-design/pro-components';
+import { Link, useNavigate } from "react-router-dom";
+import { queryTable, restful } from '@/utils/request';
+import Page from './index';
+
+export default (props) => {
+  /**
+   * resource 用来确定应该调用哪个接口
+   * rowKey 标识数据每一行的唯一键, 只能是字符串
+   * columns 定义表格每一列, 符合 ProTable 定义
+   * editURL 编辑页路由
+   */
+  const { resource, rowKey, columns, editURL } = props;
+  const actionRef = useRef();
+  const navigate = useNavigate();
+
+  // 接口汇总
+  const api = useMemo(() => {
+    // 通过 resource 知道是哪个接口
+    // 通过 restfule 生成 增删改查的接口
+    const apis = restful(resource);
+
+    // 返回两个，一个是列表查询, 一个是删除
+    return {
+      list: apis[0],
+      delete: apis[4],
+    }
+  }, [resource]);
+
+  // 响应 删除 操作
+  const onDelete = (row) => {
+    const hide = message.loading('操作中, 请稍候...');
+    api.delete(row[rowKey]).then(() => {
+      hide();
+      actionRef.current.reload();
+    }).catch(hide);
+  }
+
+  // 统一实现操作列
+  const cols = [
+    ...columns,
+    {
+      title: '操作',
+      valueType: 'option',
+      key: 'option',
+      ellipsis: true,
+      render: (_, record) => [
+        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => { navigate(`${editURL}?id=${record[rowKey]}`) }}>
+          编辑
+        </Button>,
+        <Popconfirm
+          key={3}
+          title="您是否确认删除 ?"
+          onConfirm={() => onDelete(record)}
+          okText="确定"
+          cancelText="取消"
+        >
+          <Button style={{ padding: 0 }} type="link">
+            删除
+          </Button>
+        </Popconfirm>,
+      ],
+    },
+  ]
+
+  return (
+    <Page>
+      <ProTable
+        rowKey={rowKey}
+        columns={cols}
+        request={queryTable(api.list)}
+        cardBordered
+        actionRef={actionRef}
+        toolBarRender={() => [
+          <Button
+            key="1"
+            type="primary"
+            onClick={() => {
+              navigate(editURL);
+            }}
+          >
+            新增
+          </Button>,
+        ]}
+      />
+    </Page>
+  )
+}

src/components/Page/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Typography } from 'antd';
+import useRoute from '@/utils/hooks/useRoute';
+
+const pageStyle = {
+  // margin: '24px 24px 0 24px',
+  margin: '24px',
+  minHeight: 'calc(100% - 48px)',
+}
+const { Title } = Typography;
+
+export default (props) => {
+  const { meta = {} } = useRoute() || {};
+  const style = meta.noLayout ? { height: '100%' } : pageStyle;
+  const title = props.title || meta.title;
+
+  return (
+    <div style={style}>
+      { title && !meta.noLayout && <Title level={4} style={{ paddingBottom: '12px' }}>{ title }</Title> }
+      {props.children}
+    </div>
+  )
+}

src/utils/request.js

@@ -1,30 +1,32 @@
 import axios from "axios";
+import React from 'react';
 import { message } from 'antd';
 
 const instance = axios.create({
-  baseURL: import.meta.env.PROD ? SERVER_BASE : import.meta.env.VITE_SERVER_BASE,
+  baseURL: import.meta.env.VITE_SERVER_BASE,
   timeout: 10000,
+  withCredentials: true, // 跨域
 });
 
 
 // 添加请求拦截器
 instance.interceptors.request.use(function (config) {
-  const { headers = {}, method = 'get', responseType = 'json', download = false, successTip } = config;
+  const { headers = {}, method = 'get', responseType = 'json', download = false, silent } = config;
   const token = localStorage.getItem('token') || '';
 
-  let tip = successTip;
-  if (tip === undefined) {
-    tip = method === 'get' ? false : true;
+  let noTip = silent;
+  if (noTip === undefined) {
+    noTip = method.toLocaleLowerCase() === 'get' ? true : false;
   }
 
   // 在发送请求之前做些什么
   return {
     ...config,
-    successTip : tip,
+    silent: noTip,
     headers: {
       ...headers,
       Authorization: token,
-    },    
+    },
     responseType: download ? 'blob' : responseType,
   };
 }, function (error) {
@@ -38,17 +40,18 @@ instance.interceptors.response.use(function (response) {
   // 对响应数据做点什么
 
   const { data, config } = response;
+
   if (config.download && !data.code) {
     return downloadBlob(response, '下载文件');
   }
-  
+
   if (data.code === 1000) {
     if (data.data.token) {
       localStorage.setItem('token', data.data.token);
     }
 
-    if (config.successTip && !config.silent) {
-      message.success(typeof success === 'string' ? successTip : '操作成功');
+    if (!config.silent) {
+      message.success('操作成功');
     }
 
     return data.data;
@@ -57,6 +60,7 @@ instance.interceptors.response.use(function (response) {
       message.error('未登录或者超时, 请重新登录');
     }
   } else {
+    console.log(config)
     if (!config.silent) {
       const errMsg = data.message || '系统错误';
       message.error(errMsg.indexOf('exception') > -1 ? '服务异常' : errMsg);
@@ -75,13 +79,13 @@ instance.interceptors.response.use(function (response) {
 
 export default instance;
 
-export function queryTable(apiRequest) {
+export function queryTable (apiRequest) {
   return function (params) {
-    const { current, pageSize, ...leftParams } = params;
+    const { pageSize } = params;
     return apiRequest({
+      ...params,
       pageSize,
       pageNum: params.current,
-      ...(leftParams || {}),
     })
       .then((res) => {
         return {
@@ -98,7 +102,7 @@ export function queryTable(apiRequest) {
   };
 }
 
-export function queryDict(apiRequest) {
+export function queryDict (apiRequest) {
   return function (params, labelKey = 'name', valueKey = 'id') {
     const { current, pageSize, ...leftParams } = params || {};
     return apiRequest({
@@ -121,9 +125,9 @@ export function queryDict(apiRequest) {
   };
 }
 
-export function restful(url) {
-  const list = params => instance.get(url, { params, successTip: false });
-  const get = id => instance.get(`${url}/${id}`,{ successTip: false });
+export function restful (url) {
+  const list = params => instance.get(url, { params });
+  const get = id => instance.get(`${url}/${id}`);
   const add = data => instance.post(url, data);
   const update = (id, data) => instance.put(`${url}/${id}`, data);
   const del = id => instance.delete(`${url}/${id}`);
@@ -131,7 +135,24 @@ export function restful(url) {
   return [list, get, add, update, del];
 }
 
-function downloadBlob(response) {
+export function useRequest (fn) {
+  const [loading, setLoading] = React.useState(false);
+
+  const p = (...args) => new Promise((resolve, reject) => {
+    setLoading(true);
+    fn(...args).then(res => {
+      setLoading(false);
+      resolve(res);
+    }).catch(e => {
+      setLoading(false);
+      reject(e);
+    });
+  });
+
+  return [loading, p]
+}
+
+function downloadBlob (response) {
   let fileName = '未知文件';
   const contentType = response.headers['content-type'];
   const contentDisposition = response.headers['content-disposition'];