feat: init

sanmu
1 parent 8b3b6ad0
Showing 6 changed files with 159 additions and 25 deletions
.umirc.ts
README.md
src/pages/Table/components/CreateForm.tsx → src/pages/Order/components/CreateForm.tsx
src/pages/Order/components/OrderDrawer.tsx
src/pages/Table/components/UpdateForm.tsx → src/pages/Order/components/UpdateForm.tsx
src/pages/Table/index.tsx → src/pages/Order/index.tsx
@@ -9,7 +9,7 @@ export default defineConfig({
   initialState: {},
   request: {},
   layout: {
-    title: '项目组模板',
+    title: '订单管理系统',
   },
   proxy: {
     '/api/': {
@@ -21,27 +21,27 @@ export default defineConfig({
   routes: [
     {
       path: '/',
-      redirect: '/home',
+      redirect: '/order',
     },
+    // {
+    //   name: '首页',
+    //   path: '/home',
+    //   component: './Home',
+    // },
+    // {
+    //   name: '权限演示',
+    //   path: '/access',
+    //   component: './Access',
+    // },
+    // {
+    //   name: '用户',
+    //   path: '/user',
+    //   component: './User',
+    // },
     {
-      name: '首页',
-      path: '/home',
-      component: './Home',
-    },
-    {
-      name: '权限演示',
-      path: '/access',
-      component: './Access',
-    },
-    {
-      name: '用户',
-      path: '/user',
-      component: './User',
-    },
-    {
-      name: ' CRUD 示例',
-      path: '/table',
-      component: './Table',
+      name: '订单管理',
+      path: '/order',
+      component: './Order',
     },
   ],
-# README
+# 订单新建
-`@umijs/max` 模板项目，更多功能参考 [Umi Max 简介](https://umijs.org/docs/max/introduce)
+新建订单文件地址
+
+/src/pages/Order/components/OrderDrawer.tsx
+
+新增/修改下面这个代码就可以操作订单新建字段，将name对应接口，label对应的中文
+
+```
+<ProFormText
+  name="orderId"
+  width="lg"
+  label="订单编号"
+  placeholder="请输入名称"
+/>
+```
+
+点击确认后看控制台的console确认提交的对象是否正确
+
+# 订单列表
+
+文件地址/src/pages/Order/index.tsx
+
+搜索columns，新建/修改下面的对象
+
+```
+{ title: '昵称', dataIndex: 'nickName', valueType: 'text', },
+```
+// import { PlusOutlined } from '@ant-design/icons';
+import { DrawerForm, ProFormText } from '@ant-design/pro-components';
+import { Form, message } from 'antd';
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+export default ({ onClose }) => {
+  const [form] = Form.useForm<{ name: string; company: string }>();
+
+  return (
+    <DrawerForm<{
+      name: string;
+      company: string;
+    }>
+      open
+      title="新建订单"
+      resize={{
+        onResize() {
+          console.log('resize!');
+        },
+        maxWidth: window.innerWidth * 0.8,
+        minWidth: 400,
+      }}
+      // layout="horizontal"
+      // labelCol={{ span: 8 }}
+      form={form}
+      autoFocusFirstInput
+      drawerProps={{
+        destroyOnClose: true,
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        console.log(
+          '%c [  ]-40',
+          'font-size:13px; background:pink; color:#bf2c9f;',
+          values,
+        );
+        console.log(values.name);
+        message.success('提交成功');
+        // 不返回不会关闭弹框
+        // onClose();
+        return true;
+      }}
+      onOpenChange={(val) => {
+        !val && onClose();
+      }}
+    >
+      <h2>订单基本信息</h2>
+      <ProFormText
+        name="orderId"
+        width="lg"
+        label="订单编号"
+        placeholder="请输入名称"
+      />
+      <ProFormText
+        width="lg"
+        name="orderName"
+        label="销售代号"
+        placeholder="请输入名称"
+      />
+      <h2>商品基本信息</h2>
+      <ProFormText width="lg" name="id" label="支付总金额" />
+      <h2>商品1</h2>
+      <ProFormText width="lg" name="id" label="支付总金额" />
+      {/* <ProFormDateRangePicker name="contractTime" label="合同生效时间" /> */}
+      {/* <ProForm.Group>
+        <ProFormSelect
+          options={[
+            {
+              value: 'chapter',
+              label: '盖章后生效',
+            },
+          ]}
+          width="xs"
+          name="useMode"
+          label="合同约定生效方式"
+        />
+        <ProFormSelect
+          width="xs"
+          options={[
+            {
+              value: 'time',
+              label: '履行完终止',
+            },
+          ]}
+          formItemProps={{
+            style: {
+              margin: 0,
+            },
+          }}
+          name="unusedMode"
+          label="合同约定失效效方式"
+        />
+      </ProForm.Group>
+   */}
+    </DrawerForm>
+  );
+};
@@ -10,6 +10,7 @@ import {
 import { Button, Divider, Drawer, message } from 'antd';
 import React, { useRef, useState } from 'react';
 import CreateForm from './components/CreateForm';
+import OrderDrawer from './components/OrderDrawer';
 import UpdateForm, { FormValueType } from './components/UpdateForm';
 const { addUser, queryUserList, deleteUser, modifyUser } =
@@ -90,11 +91,12 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
   const actionRef = useRef<ActionType>();
   const [row, setRow] = useState<API.UserInfo>();
   const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
+  const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
   const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
     {
       title: '名称',
       dataIndex: 'name',
-      tip: '名称是唯一的 key',
+      // tip: '名称是唯一的 key',
       formItemProps: {
         rules: [
           {
@@ -142,7 +144,7 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
   return (
     <PageContainer
       header={{
-        title: 'CRUD 示例',
+        title: '订单管理',
       }}
     >
       <ProTable<API.UserInfo>
@@ -156,7 +158,7 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
           <Button
             key="1"
             type="primary"
-            onClick={() => handleModalVisible(true)}
+            onClick={() => setOrderDrawerVisible(true)}
           >
             新建
           </Button>,
@@ -263,6 +265,9 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
           />
         )}
       </Drawer>
+      {orderDrawerVisible && (
+        <OrderDrawer onClose={() => setOrderDrawerVisible(false)} />
+      )}
     </PageContainer>
   );
 };