canrd-main / canrd-erp-front · Commits

Commit b83dc2a9cf235a8837b3ce7454e962a2621a09c6

Authored by sanmu
1 parent 69df8d4f
build: skipped

feat: add data

Inline Side-by-side
Showing 7 changed files with 138 additions and 357 deletions
.umirc.ts
  View file @b83dc2a
... ... @@ -12,10 +12,10 @@ export default defineConfig({
12 12 title: '订单管理系统',
13 13 },
14 14 proxy: {
15   - '/api/': {
16   - target: 'http://11.1.1.144:31590/',
  15 + '/erp/': {
  16 + target: 'http://39.108.227.113:3000/mock/39',
17 17 changeOrigin: true,
18   - pathRewrite: { '^/api': '' },
  18 + // pathRewrite: { '^/api': '' },
19 19 },
20 20 },
21 21 routes: [
... ...
src/app.ts
  View file @b83dc2a
1 1 // 运行时配置
2 2  
3 3 import { RequestConfig } from '@umijs/max';
4   -import { AxiosRequestConfig } from 'axios';
5 4  
6 5 import '@inspir/assembly-css/dist/special.css';
7 6 import { message } from 'antd';
... ... @@ -57,24 +56,24 @@ export const request: RequestConfig = {
57 56 };
58 57 }
59 58  
60   - const requestOption: AxiosRequestConfig = {
61   - method: options.method || 'get',
62   - };
  59 + // const requestOption: AxiosRequestConfig = {
  60 + // method: options.method || 'get',
  61 + // };
63 62  
64   - if (options.header) {
65   - requestOption.headers = options.header;
66   - }
  63 + // if (options.header) {
  64 + // requestOption.headers = options.header;
  65 + // }
67 66  
68   - if (options.body) {
69   - requestOption.data = options.body;
70   - }
  67 + // if (options.body) {
  68 + // options.data = options.body;
  69 + // }
71 70  
72 71 if (options.query) {
73 72 options.params = options.query;
74 73 }
75 74  
76 75 return {
77   - url: `/api${url}`,
  76 + url,
78 77 options: {
79 78 ...options,
80 79 signal,
... ...
src/pages/Order/components/CreateForm.tsx deleted 100644 → 0
  View file @69df8d4
1   -import { Modal } from 'antd';
2   -import React, { PropsWithChildren } from 'react';
3   -
4   -interface CreateFormProps {
5   - modalVisible: boolean;
6   - onCancel: () => void;
7   -}
8   -
9   -const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
10   - const { modalVisible, onCancel } = props;
11   -
12   - return (
13   - <Modal
14   - destroyOnClose
15   - title="新建"
16   - width={420}
17   - open={modalVisible}
18   - onCancel={() => onCancel()}
19   - footer={null}
20   - >
21   - {props.children}
22   - </Modal>
23   - );
24   -};
25   -
26   -export default CreateForm;
src/pages/Order/components/OrderDrawer.tsx
  View file @b83dc2a
1   -// import { PlusOutlined } from '@ant-design/icons';
2   -import { postErpOrderAdd } from '@/services';
3   -import { DrawerForm, ProFormText } from '@ant-design/pro-components';
  1 +import { postErpOrderAdd, postErpOrderUpdate } from '@/services';
  2 +import {
  3 + DrawerForm,
  4 + ProFormList,
  5 + ProFormText,
  6 +} from '@ant-design/pro-components';
4 7 import { Form, message } from 'antd';
  8 +import { useEffect } from 'react';
5 9  
6   -const waitTime = (time: number = 100) => {
7   - return new Promise((resolve) => {
8   - setTimeout(() => {
9   - resolve(true);
10   - }, time);
11   - });
12   -};
13   -
14   -export default ({ onClose }) => {
  10 +export default ({ onClose, data }: { onClose: () => void; data: any }) => {
15 11 const [form] = Form.useForm<{ name: string; company: string }>();
16 12  
  13 + const handleAddProduct = () => {};
  14 + useEffect(() => {
  15 + if (data?.main_order_id) {
  16 + form.setFieldsValue({ ...data });
  17 + }
  18 + }, [data]);
17 19 return (
18 20 <DrawerForm<{
19 21 name: string;
... ... @@ -37,8 +39,11 @@ export default ({ onClose }) =&gt; {
37 39 }}
38 40 submitTimeout={2000}
39 41 onFinish={async (values) => {
40   - await postErpOrderAdd({ values });
41   - console.log(values.name);
  42 + if (data?.main_order_id) {
  43 + await postErpOrderUpdate({ data: values });
  44 + } else {
  45 + await postErpOrderAdd({ data: values });
  46 + }
42 47 message.success('提交成功');
43 48 // 不返回不会关闭弹框
44 49 // onClose();
... ... @@ -63,8 +68,20 @@ export default ({ onClose }) =&gt; {
63 68 />
64 69 <h2>商品基本信息</h2>
65 70 <ProFormText width="lg" name="id" label="支付总金额" />
66   - <h2>商品1</h2>
67   - <ProFormText width="lg" name="id" label="支付总金额" />
  71 + <ProFormList name="sub_orders" label="商品">
  72 + {({ name }) => {
  73 + return (
  74 + <div key="row">
  75 + <h2>商品{name + 1}</h2>
  76 + <ProFormText name="product_code" label="product_code" />
  77 + <ProFormText name="name2" label="名称" />
  78 + <ProFormText name="name3" label="名称" />
  79 + <ProFormText name="name4" label="名称" />
  80 + </div>
  81 + );
  82 + }}
  83 + </ProFormList>
  84 +
68 85 {/* <ProFormDateRangePicker name="contractTime" label="合同生效时间" /> */}
69 86 {/* <ProForm.Group>
70 87 <ProFormSelect
... ...
src/pages/Order/components/UpdateForm.tsx deleted 100644 → 0
  View file @69df8d4
1   -import {
2   - ProFormDateTimePicker,
3   - ProFormRadio,
4   - ProFormSelect,
5   - ProFormText,
6   - ProFormTextArea,
7   - StepsForm,
8   -} from '@ant-design/pro-components';
9   -import { Modal } from 'antd';
10   -import React from 'react';
11   -
12   -export interface FormValueType extends Partial<API.UserInfo> {
13   - target?: string;
14   - template?: string;
15   - type?: string;
16   - time?: string;
17   - frequency?: string;
18   -}
19   -
20   -export interface UpdateFormProps {
21   - onCancel: (flag?: boolean, formVals?: FormValueType) => void;
22   - onSubmit: (values: FormValueType) => Promise<void>;
23   - updateModalVisible: boolean;
24   - values: Partial<API.UserInfo>;
25   -}
26   -
27   -const UpdateForm: React.FC<UpdateFormProps> = (props) => (
28   - <StepsForm
29   - stepsProps={{
30   - size: 'small',
31   - }}
32   - stepsFormRender={(dom, submitter) => {
33   - return (
34   - <Modal
35   - width={640}
36   - bodyStyle={{ padding: '32px 40px 48px' }}
37   - destroyOnClose
38   - title="规则配置"
39   - open={props.updateModalVisible}
40   - footer={submitter}
41   - onCancel={() => props.onCancel()}
42   - >
43   - {dom}
44   - </Modal>
45   - );
46   - }}
47   - onFinish={props.onSubmit}
48   - >
49   - <StepsForm.StepForm
50   - initialValues={{
51   - name: props.values.name,
52   - nickName: props.values.nickName,
53   - }}
54   - title="基本信息"
55   - >
56   - <ProFormText
57   - width="md"
58   - name="name"
59   - label="规则名称"
60   - rules={[{ required: true, message: '请输入规则名称！' }]}
61   - />
62   - <ProFormTextArea
63   - name="desc"
64   - width="md"
65   - label="规则描述"
66   - placeholder="请输入至少五个字符"
67   - rules={[
68   - { required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
69   - ]}
70   - />
71   - </StepsForm.StepForm>
72   - <StepsForm.StepForm
73   - initialValues={{
74   - target: '0',
75   - template: '0',
76   - }}
77   - title="配置规则属性"
78   - >
79   - <ProFormSelect
80   - width="md"
81   - name="target"
82   - label="监控对象"
83   - valueEnum={{
84   - 0: '表一',
85   - 1: '表二',
86   - }}
87   - />
88   - <ProFormSelect
89   - width="md"
90   - name="template"
91   - label="规则模板"
92   - valueEnum={{
93   - 0: '规则模板一',
94   - 1: '规则模板二',
95   - }}
96   - />
97   - <ProFormRadio.Group
98   - name="type"
99   - width="md"
100   - label="规则类型"
101   - options={[
102   - {
103   - value: '0',
104   - label: '强',
105   - },
106   - {
107   - value: '1',
108   - label: '弱',
109   - },
110   - ]}
111   - />
112   - </StepsForm.StepForm>
113   - <StepsForm.StepForm
114   - initialValues={{
115   - type: '1',
116   - frequency: 'month',
117   - }}
118   - title="设定调度周期"
119   - >
120   - <ProFormDateTimePicker
121   - name="time"
122   - label="开始时间"
123   - rules={[{ required: true, message: '请选择开始时间！' }]}
124   - />
125   - <ProFormSelect
126   - name="frequency"
127   - label="监控对象"
128   - width="xs"
129   - valueEnum={{
130   - month: '月',
131   - week: '周',
132   - }}
133   - />
134   - </StepsForm.StepForm>
135   - </StepsForm>
136   -);
137   -
138   -export default UpdateForm;
src/pages/Order/index.tsx
  View file @b83dc2a
1 1 import { postErpOrderListByPage } from '@/services';
2   -import services from '@/services/demo';
3 2 import {
4 3 ActionType,
5 4 FooterToolbar,
6 5 PageContainer,
7   - ProDescriptions,
8 6 ProDescriptionsItemProps,
9 7 ProTable,
10 8 } from '@ant-design/pro-components';
11   -import { Button, Divider, Drawer, message } from 'antd';
12   -import React, { useEffect, useRef, useState } from 'react';
13   -import CreateForm from './components/CreateForm';
  9 +import { Button, Divider } from 'antd';
  10 +import React, { useRef, useState } from 'react';
14 11 import OrderDrawer from './components/OrderDrawer';
15   -import UpdateForm, { FormValueType } from './components/UpdateForm';
16 12  
17   -const { addUser, queryUserList, deleteUser, modifyUser } =
18   - services.UserController;
  13 +// 子表格
  14 +const expandedRowRender = (props = {}) => {
  15 + const { sub_orders = [] } = props;
19 16  
20   -/**
21   - * 添加节点
22   - * @param fields
23   - */
24   -const handleAdd = async (fields: API.UserInfo) => {
25   - const hide = message.loading('正在添加');
26   - try {
27   - await addUser({ ...fields });
28   - hide();
29   - message.success('添加成功');
30   - return true;
31   - } catch (error) {
32   - hide();
33   - message.error('添加失败请重试！');
34   - return false;
35   - }
36   -};
37   -
38   -/**
39   - * 更新节点
40   - * @param fields
41   - */
42   -const handleUpdate = async (fields: FormValueType) => {
43   - const hide = message.loading('正在配置');
44   - try {
45   - await modifyUser(
46   - {
47   - userId: fields.id || '',
48   - },
49   - {
50   - name: fields.name || '',
51   - nickName: fields.nickName || '',
52   - email: fields.email || '',
53   - },
54   - );
55   - hide();
56   -
57   - message.success('配置成功');
58   - return true;
59   - } catch (error) {
60   - hide();
61   - message.error('配置失败请重试！');
62   - return false;
63   - }
64   -};
65   -
66   -/**
67   - * 删除节点
68   - * @param selectedRows
69   - */
70   -const handleRemove = async (selectedRows: API.UserInfo[]) => {
71   - const hide = message.loading('正在删除');
72   - if (!selectedRows) return true;
73   - try {
74   - await deleteUser({
75   - userId: selectedRows.find((row) => row.id)?.id || '',
76   - });
77   - hide();
78   - message.success('删除成功，即将刷新');
79   - return true;
80   - } catch (error) {
81   - hide();
82   - message.error('删除失败，请重试');
83   - return false;
84   - }
  17 + return (
  18 + <ProTable
  19 + rowKey="sub_order_id"
  20 + columns={[
  21 + {
  22 + title: 'ProductCode',
  23 + dataIndex: 'product_code',
  24 + key: 'product_code',
  25 + },
  26 + {
  27 + title: 'ProductName',
  28 + dataIndex: 'product_name',
  29 + key: 'product_name',
  30 + },
  31 + {
  32 + title: 'ProductName',
  33 + dataIndex: 'product_name',
  34 + key: 'product_name',
  35 + },
  36 + {
  37 + title: 'ProductName',
  38 + dataIndex: 'product_name',
  39 + key: 'product_name',
  40 + },
  41 + // {
  42 + // title: 'Action',
  43 + // dataIndex: 'operation',
  44 + // key: 'operation',
  45 + // valueType: 'option',
  46 + // render: () => [<a key="Pause">Pause</a>, <a key="Stop">Stop</a>],
  47 + // },
  48 + ]}
  49 + headerTitle={false}
  50 + search={false}
  51 + options={false}
  52 + dataSource={sub_orders}
  53 + pagination={false}
  54 + />
  55 + );
85 56 };
86 57  
87 58 const TableList: React.FC<unknown> = () => {
88   - const [createModalVisible, handleModalVisible] = useState<boolean>(false);
89   - const [updateModalVisible, handleUpdateModalVisible] =
90   - useState<boolean>(false);
91   - const [stepFormValues, setStepFormValues] = useState({});
92 59 const actionRef = useRef<ActionType>();
93 60 const [row, setRow] = useState<API.UserInfo>();
94 61 const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
95 62 const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
96 63  
97   - useEffect(() => {
98   - postErpOrderListByPage();
99   - }, []);
100 64 const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
101 65 {
102   - title: '名称',
103   - dataIndex: 'name',
  66 + title: 'SaleCode',
  67 + dataIndex: 'sales_code',
104 68 // tip: '名称是唯一的 key',
105 69 formItemProps: {
106 70 rules: [
... ... @@ -112,18 +76,39 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
112 76 },
113 77 },
114 78 {
115   - title: '昵称',
116   - dataIndex: 'nickName',
  79 + title: 'CustomerName',
  80 + dataIndex: 'customer_name',
117 81 valueType: 'text',
118 82 },
119 83 {
120   - title: '性别',
121   - dataIndex: 'gender',
122   - hideInForm: true,
123   - valueEnum: {
124   - 0: { text: '男', status: 'MALE' },
125   - 1: { text: '女', status: 'FEMALE' },
126   - },
  84 + title: 'CustomerName',
  85 + dataIndex: 'customer_name',
  86 + valueType: 'text',
  87 + },
  88 + {
  89 + title: 'CustomerName',
  90 + dataIndex: 'customer_name',
  91 + valueType: 'text',
  92 + },
  93 + {
  94 + title: 'CustomerName',
  95 + dataIndex: 'customer_name',
  96 + valueType: 'text',
  97 + },
  98 + {
  99 + title: 'CustomerName',
  100 + dataIndex: 'customer_name',
  101 + valueType: 'text',
  102 + },
  103 + {
  104 + title: 'CustomerName',
  105 + dataIndex: 'customer_name',
  106 + valueType: 'text',
  107 + },
  108 + {
  109 + title: 'CustomerName',
  110 + dataIndex: 'customer_name',
  111 + valueType: 'text',
127 112 },
128 113 {
129 114 title: '操作',
... ... @@ -133,14 +118,19 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
133 118 <>
134 119 <a
135 120 onClick={() => {
136   - handleUpdateModalVisible(true);
137   - setStepFormValues(record);
  121 + setOrderDrawerVisible(true);
  122 + console.log(
  123 + '%c [ record ]-123',
  124 + 'font-size:13px; background:pink; color:#bf2c9f;',
  125 + record,
  126 + );
  127 + setRow(record);
138 128 }}
139 129 >
140   - 配置
  130 + 编辑
141 131 </a>
142 132 <Divider type="vertical" />
143   - <a href="">订阅警报</a>
  133 + <a href="">xxxx</a>
144 134 </>
145 135 ),
146 136 },
... ... @@ -155,10 +145,11 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
155 145 <ProTable<API.UserInfo>
156 146 headerTitle="查询表格"
157 147 actionRef={actionRef}
158   - rowKey="id"
  148 + rowKey="main_order_id"
159 149 search={{
160 150 labelWidth: 120,
161 151 }}
  152 + expandable={{ expandedRowRender }}
162 153 toolBarRender={() => [
163 154 <Button
164 155 key="1"
... ... @@ -169,16 +160,16 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
169 160 </Button>,
170 161 ]}
171 162 request={async (params, sorter, filter) => {
172   - const { data, success } = await queryUserList({
  163 + const { data } = await postErpOrderListByPage({
173 164 ...params,
174 165 // FIXME: remove @ts-ignore
175 166 // @ts-ignore
176 167 sorter,
177 168 filter,
178 169 });
  170 +
179 171 return {
180   - data: data?.list || [],
181   - success,
  172 + data: data?.records || [],
182 173 };
183 174 }}
184 175 columns={columns}
... ... @@ -208,70 +199,8 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
208 199 <Button type="primary">批量审批</Button>
209 200 </FooterToolbar>
210 201 )}
211   - <CreateForm
212   - onCancel={() => handleModalVisible(false)}
213   - modalVisible={createModalVisible}
214   - >
215   - <ProTable<API.UserInfo, API.UserInfo>
216   - onSubmit={async (value) => {
217   - const success = await handleAdd(value);
218   - if (success) {
219   - handleModalVisible(false);
220   - if (actionRef.current) {
221   - actionRef.current.reload();
222   - }
223   - }
224   - }}
225   - rowKey="id"
226   - type="form"
227   - columns={columns}
228   - />
229   - </CreateForm>
230   - {stepFormValues && Object.keys(stepFormValues).length ? (
231   - <UpdateForm
232   - onSubmit={async (value) => {
233   - const success = await handleUpdate(value);
234   - if (success) {
235   - handleUpdateModalVisible(false);
236   - setStepFormValues({});
237   - if (actionRef.current) {
238   - actionRef.current.reload();
239   - }
240   - }
241   - }}
242   - onCancel={() => {
243   - handleUpdateModalVisible(false);
244   - setStepFormValues({});
245   - }}
246   - updateModalVisible={updateModalVisible}
247   - values={stepFormValues}
248   - />
249   - ) : null}
250   -
251   - <Drawer
252   - width={600}
253   - open={!!row}
254   - onClose={() => {
255   - setRow(undefined);
256   - }}
257   - closable={false}
258   - >
259   - {row?.name && (
260   - <ProDescriptions<API.UserInfo>
261   - column={2}
262   - title={row?.name}
263   - request={async () => ({
264   - data: row || {},
265   - })}
266   - params={{
267   - id: row?.name,
268   - }}
269   - columns={columns}
270   - />
271   - )}
272   - </Drawer>
273 202 {orderDrawerVisible && (
274   - <OrderDrawer onClose={() => setOrderDrawerVisible(false)} />
  203 + <OrderDrawer data={row} onClose={() => setOrderDrawerVisible(false)} />
275 204 )}
276 205 </PageContainer>
277 206 );
... ...
src/services/request.ts
  View file @b83dc2a
... ... @@ -2,7 +2,7 @@
2 2 /* tslint:disable */
3 3 /** Do not modify manually.
4 4 content is generated automatically by `ts-gear`. */
5   -import requester from 'axios';
  5 +import { request as requester } from 'umi';
6 6 // import type {} from "./definition";
7 7  
8 8 /** @description request parameter type for postErpOrderListByPage */
... ...