feats

src/components/page/Container.jsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import './style.less'
-
-export default (props) => {
-  return (
-    <div className="page-container">
-      {props.children}
-    </div>
-  )
-}

src/components/page/index.jsx

@@ -1,14 +0,0 @@
-import React, { useEffect } from 'react';
-// import { PageHeader } from 'antd';
-import { useModel } from '@/store';
-import Container from './Container';
-
-export default (props) => {
-  // const { children, ...headerProps } = props;
-  
-  return (
-    <Container>
-      {props.children}
-    </Container>
-  )
-}

src/components/page/style.less

@@ -1,5 +0,0 @@
-
-.page-container {
-  margin: 24px;
-  // margin-bottom: 0;
-}

src/pages/sample/form/index.jsx

@@ -1,353 +0,0 @@
-import {
-  AutoComplete,
-  Button,
-  Cascader,
-  Checkbox,
-  Col,
-  Form,
-  Input,
-  InputNumber,
-  Row,
-  Select,
-  Card,
-} from 'antd';
-import React, { useState } from 'react';
-import Page from '@/components/page';
-
-const { Option } = Select;
-const residences = [
-  {
-    value: 'zhejiang',
-    label: 'Zhejiang',
-    children: [
-      {
-        value: 'hangzhou',
-        label: 'Hangzhou',
-        children: [
-          {
-            value: 'xihu',
-            label: 'West Lake',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'jiangsu',
-    label: 'Jiangsu',
-    children: [
-      {
-        value: 'nanjing',
-        label: 'Nanjing',
-        children: [
-          {
-            value: 'zhonghuamen',
-            label: 'Zhong Hua Men',
-          },
-        ],
-      },
-    ],
-  },
-];
-const formItemLayout = {
-  labelCol: {
-    xs: {
-      span: 24,
-    },
-    sm: {
-      span: 8,
-    },
-  },
-  wrapperCol: {
-    xs: {
-      span: 24,
-    },
-    sm: {
-      span: 16,
-    },
-  },
-};
-const tailFormItemLayout = {
-  wrapperCol: {
-    xs: {
-      span: 24,
-      offset: 0,
-    },
-    sm: {
-      span: 16,
-      offset: 8,
-    },
-  },
-};
-
-
-const BasicForm = () => {
-  const [form] = Form.useForm();
-
-  const onFinish = (values) => {
-    console.log('Received values of form: ', values);
-  };
-
-  const prefixSelector = (
-    <Form.Item name="prefix" noStyle>
-      <Select
-        style={{
-          width: 70,
-        }}
-      >
-        <Option value="86">+86</Option>
-        <Option value="87">+87</Option>
-      </Select>
-    </Form.Item>
-  );
-  const suffixSelector = (
-    <Form.Item name="suffix" noStyle>
-      <Select
-        style={{
-          width: 70,
-        }}
-      >
-        <Option value="USD">$</Option>
-        <Option value="CNY">¥</Option>
-      </Select>
-    </Form.Item>
-  );
-  const [autoCompleteResult, setAutoCompleteResult] = useState([]);
-
-  const onWebsiteChange = (value) => {
-    if (!value) {
-      setAutoCompleteResult([]);
-    } else {
-      setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));
-    }
-  };
-
-  const websiteOptions = autoCompleteResult.map((website) => ({
-    label: website,
-    value: website,
-  }));
-  return (
-    <Form
-      {...formItemLayout}
-      form={form}
-      name="register"
-      onFinish={onFinish}
-      initialValues={{
-        residence: ['zhejiang', 'hangzhou', 'xihu'],
-        prefix: '86',
-      }}
-      scrollToFirstError
-      style={{ background: '#fff', boxSizing: 'border-box', padding: '24px' }}
-    >
-      <Form.Item
-        name="email"
-        label="E-mail"
-        rules={[
-          {
-            type: 'email',
-            message: 'The input is not valid E-mail!',
-          },
-          {
-            required: true,
-            message: 'Please input your E-mail!',
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-
-      <Form.Item
-        name="password"
-        label="Password"
-        rules={[
-          {
-            required: true,
-            message: 'Please input your password!',
-          },
-        ]}
-        hasFeedback
-      >
-        <Input.Password />
-      </Form.Item>
-
-      <Form.Item
-        name="confirm"
-        label="Confirm Password"
-        dependencies={['password']}
-        hasFeedback
-        rules={[
-          {
-            required: true,
-            message: 'Please confirm your password!',
-          },
-          ({ getFieldValue }) => ({
-            validator(_, value) {
-              if (!value || getFieldValue('password') === value) {
-                return Promise.resolve();
-              }
-
-              return Promise.reject(new Error('The two passwords that you entered do not match!'));
-            },
-          }),
-        ]}
-      >
-        <Input.Password />
-      </Form.Item>
-
-      <Form.Item
-        name="nickname"
-        label="Nickname"
-        tooltip="What do you want others to call you?"
-        rules={[
-          {
-            required: true,
-            message: 'Please input your nickname!',
-            whitespace: true,
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-
-      <Form.Item
-        name="residence"
-        label="Habitual Residence"
-        rules={[
-          {
-            type: 'array',
-            required: true,
-            message: 'Please select your habitual residence!',
-          },
-        ]}
-      >
-        <Cascader options={residences} />
-      </Form.Item>
-
-      <Form.Item
-        name="phone"
-        label="Phone Number"
-        rules={[
-          {
-            required: true,
-            message: 'Please input your phone number!',
-          },
-        ]}
-      >
-        <Input
-          addonBefore={prefixSelector}
-          style={{
-            width: '100%',
-          }}
-        />
-      </Form.Item>
-
-      <Form.Item
-        name="donation"
-        label="Donation"
-        rules={[
-          {
-            required: true,
-            message: 'Please input donation amount!',
-          },
-        ]}
-      >
-        <InputNumber
-          addonAfter={suffixSelector}
-          style={{
-            width: '100%',
-          }}
-        />
-      </Form.Item>
-
-      <Form.Item
-        name="website"
-        label="Website"
-        rules={[
-          {
-            required: true,
-            message: 'Please input website!',
-          },
-        ]}
-      >
-        <AutoComplete options={websiteOptions} onChange={onWebsiteChange} placeholder="website">
-          <Input />
-        </AutoComplete>
-      </Form.Item>
-
-      <Form.Item
-        name="intro"
-        label="Intro"
-        rules={[
-          {
-            required: true,
-            message: 'Please input Intro',
-          },
-        ]}
-      >
-        <Input.TextArea showCount maxLength={100} />
-      </Form.Item>
-
-      <Form.Item
-        name="gender"
-        label="Gender"
-        rules={[
-          {
-            required: true,
-            message: 'Please select gender!',
-          },
-        ]}
-      >
-        <Select placeholder="select your gender">
-          <Option value="male">Male</Option>
-          <Option value="female">Female</Option>
-          <Option value="other">Other</Option>
-        </Select>
-      </Form.Item>
-
-      <Form.Item label="Captcha" extra="We must make sure that your are a human.">
-        <Row gutter={8}>
-          <Col span={12}>
-            <Form.Item
-              name="captcha"
-              noStyle
-              rules={[
-                {
-                  required: true,
-                  message: 'Please input the captcha you got!',
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Button>Get captcha</Button>
-          </Col>
-        </Row>
-      </Form.Item>
-
-      <Form.Item
-        name="agreement"
-        valuePropName="checked"
-        rules={[
-          {
-            validator: (_, value) =>
-              value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
-          },
-        ]}
-        {...tailFormItemLayout}
-      >
-        <Checkbox>
-          I have read the <a href="">agreement</a>
-        </Checkbox>
-      </Form.Item>
-      <Form.Item {...tailFormItemLayout}>
-        <Button type="primary" htmlType="submit">
-          Register
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default () => <Page><Card><BasicForm /></Card></Page>;

src/pages/sample/table/index.jsx

@@ -1,169 +0,0 @@
-import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
-import { ProTable, TableDropdown } from '@ant-design/pro-components';
-import { Button, Dropdown, Menu, Space, Tag } from 'antd';
-import { useRef, useEffect } from 'react';
-import Page from '@/components/page';
-import { useModel } from '@/store';
-
-// import request from 'umi-request';
-const columns = [
-    {
-        dataIndex: 'index',
-        valueType: 'indexBorder',
-        width: 48,
-    },
-    {
-        title: '标题',
-        dataIndex: 'title',
-        copyable: true,
-        ellipsis: true,
-        tip: '标题过长会自动收缩',
-        formItemProps: {
-            rules: [
-                {
-                    required: true,
-                    message: '此项为必填项',
-                },
-            ],
-        },
-    },
-    {
-        disable: true,
-        title: '状态',
-        dataIndex: 'state',
-        filters: true,
-        onFilter: true,
-        ellipsis: true,
-        valueType: 'select',
-        valueEnum: {
-            all: { text: '超长'.repeat(50) },
-            open: {
-                text: '未解决',
-                status: 'Error',
-            },
-            closed: {
-                text: '已解决',
-                status: 'Success',
-                disabled: true,
-            },
-            processing: {
-                text: '解决中',
-                status: 'Processing',
-            },
-        },
-    },
-    {
-        disable: true,
-        title: '标签',
-        dataIndex: 'labels',
-        search: false,
-        renderFormItem: (_, { defaultRender }) => {
-            return defaultRender(_);
-        },
-        render: (_, record) => (<Space>
-        {record.labels.map(({ name, color }) => (<Tag color={color} key={name}>
-            {name}
-          </Tag>))}
-      </Space>),
-    },
-    {
-        title: '创建时间',
-        key: 'showTime',
-        dataIndex: 'created_at',
-        valueType: 'date',
-        sorter: true,
-        hideInSearch: true,
-    },
-    {
-        title: '创建时间',
-        dataIndex: 'created_at',
-        valueType: 'dateRange',
-        hideInTable: true,
-        search: {
-            transform: (value) => {
-                return {
-                    startTime: value[0],
-                    endTime: value[1],
-                };
-            },
-        },
-    },
-    {
-        title: '操作',
-        valueType: 'option',
-        key: 'option',
-        render: (text, record, _, action) => [
-            <a key="editable" onClick={() => {
-                    var _a;
-                    (_a = action === null || action === void 0 ? void 0 : action.startEditable) === null || _a === void 0 ? void 0 : _a.call(action, record.id);
-                }}>
-        编辑
-      </a>,
-            <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
-        查看
-      </a>,
-            <TableDropdown key="actionGroup" onSelect={() => action === null || action === void 0 ? void 0 : action.reload()} menus={[
-                    { key: 'copy', name: '复制' },
-                    { key: 'delete', name: '删除' },
-                ]}/>,
-        ],
-    },
-];
-const menu = (<Menu items={[
-        {
-            label: '1st item',
-            key: '1',
-        },
-        {
-            label: '2nd item',
-            key: '1',
-        },
-        {
-            label: '3rd item',
-            key: '1',
-        },
-    ]}/>);
-export default () => {
-
-    const actionRef = useRef();
-    return (<Page><ProTable columns={columns} actionRef={actionRef} cardBordered request={async (params = {}, sort, filter) => {
-            console.log(sort, filter);
-            // return request('https://proapi.azurewebsites.net/github/issues', {
-            //     params,
-            // });
-        }} editable={{
-            type: 'multiple',
-        }} columnsState={{
-            persistenceKey: 'pro-table-singe-demos',
-            persistenceType: 'localStorage',
-            onChange(value) {
-                console.log('value: ', value);
-            },
-        }} rowKey="id" search={{
-            labelWidth: 'auto',
-        }} options={{
-            setting: {
-                listsHeight: 400,
-            },
-        }} form={{
-            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
-            syncToUrl: (values, type) => {
-                if (type === 'get') {
-                    return Object.assign(Object.assign({}, values), { created_at: [values.startTime, values.endTime] });
-                }
-                return values;
-            },
-        }} pagination={{
-            pageSize: 5,
-            onChange: (page) => console.log(page),
-        }} dateFormatter="string" headerTitle="高级表格" toolBarRender={() => [
-            <Button key="button" icon={<PlusOutlined />} type="primary">
-          新建
-        </Button>,
-            <Dropdown key="menu" overlay={menu}>
-          <Button>
-            <EllipsisOutlined />
-          </Button>
-        </Dropdown>,
-        ]}/></Page>);
-};

src/routes/routes.jsx

@@ -9,12 +9,10 @@ import {
 } from "@ant-design/icons";
 import { Navigate } from "react-router-dom";
 import AuthLayout from "@/layouts/AuthLayout";
-import Container from "@/layouts/Container";
+import PageContainer from "@/layouts/PageContainer";
 import Login from "@/pages/login";
 import Page404 from "@/pages/404";
-import Home from "@/pages/sample/home";
-import BasicForm from "@/pages/sample/form";
-import BasicTable from "@/pages/sample/table";
+import Home from "@/pages/home";
 import GuaranteeTaskList from "@/pages/guaranteeTask";
 import GuaranteeTaskEdit from "@/pages/guaranteeTask/Edit";
 import GuaranteeTaskPrint from "@/pages/guaranteeTask/print";
@@ -77,7 +75,7 @@ export const authRoutes = [
   },
   {
     path: "task",
-    element: <Container />,
+    element: <PageContainer />,
     meta: {
       title: "军供任务",
       permission: 'task',
@@ -135,7 +133,7 @@ export const authRoutes = [
   },
   {
     path: "stock",
-    element: <Container />,
+    element: <PageContainer />,
     meta: {
       title: "库存物资",
       permission: 'stock',
@@ -190,7 +188,7 @@ export const authRoutes = [
   },
   {
     path: "purchase",
-    element: <Container />,
+    element: <PageContainer />,
     meta: {
       title: "采购管理",
       permission: 'purchase',
@@ -255,7 +253,7 @@ export const authRoutes = [
   },
   {
     path: "cms",
-    element: <Container />,
+    element: <PageContainer />,
     meta: {
       title: "公告文件",
       permission: 'cms',
@@ -355,7 +353,7 @@ export const authRoutes = [
   },
   {
     path: "system",
-    element: <Container />,
+    element: <PageContainer />,
     meta: {
       title: "系统管理",
       permission: 'system',