feat: add data

sanmu
1 parent 69df8d4f
Showing 7 changed files with 138 additions and 357 deletions
.umirc.ts
src/app.ts
src/pages/Order/components/CreateForm.tsx
src/pages/Order/components/OrderDrawer.tsx
src/pages/Order/components/UpdateForm.tsx
src/pages/Order/index.tsx
src/services/request.ts
@@ -12,10 +12,10 @@ export default defineConfig({
     title: '订单管理系统',
   },
   proxy: {
-    '/api/': {
-      target: 'http://11.1.1.144:31590/',
+    '/erp/': {
+      target: 'http://39.108.227.113:3000/mock/39',
       changeOrigin: true,
-      pathRewrite: { '^/api': '' },
+      // pathRewrite: { '^/api': '' },
     },
   },
   routes: [
 // 运行时配置
 import { RequestConfig } from '@umijs/max';
-import { AxiosRequestConfig } from 'axios';
 import '@inspir/assembly-css/dist/special.css';
 import { message } from 'antd';
@@ -57,24 +56,24 @@ export const request: RequestConfig = {
         };
       }
-      const requestOption: AxiosRequestConfig = {
-        method: options.method || 'get',
-      };
+      // const requestOption: AxiosRequestConfig = {
+      //   method: options.method || 'get',
+      // };
-      if (options.header) {
-        requestOption.headers = options.header;
-      }
+      // if (options.header) {
+      //   requestOption.headers = options.header;
+      // }
-      if (options.body) {
-        requestOption.data = options.body;
-      }
+      // if (options.body) {
+      //   options.data = options.body;
+      // }
       if (options.query) {
         options.params = options.query;
       }
       return {
-        url: `/api${url}`,
+        url,
         options: {
           ...options,
           signal,
-import { Modal } from 'antd';
-import React, { PropsWithChildren } from 'react';
-
-interface CreateFormProps {
-  modalVisible: boolean;
-  onCancel: () => void;
-}
-
-const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
-  const { modalVisible, onCancel } = props;
-
-  return (
-    <Modal
-      destroyOnClose
-      title="新建"
-      width={420}
-      open={modalVisible}
-      onCancel={() => onCancel()}
-      footer={null}
-    >
-      {props.children}
-    </Modal>
-  );
-};
-
-export default CreateForm;
-// import { PlusOutlined } from '@ant-design/icons';
-import { postErpOrderAdd } from '@/services';
-import { DrawerForm, ProFormText } from '@ant-design/pro-components';
+import { postErpOrderAdd, postErpOrderUpdate } from '@/services';
+import {
+  DrawerForm,
+  ProFormList,
+  ProFormText,
+} from '@ant-design/pro-components';
 import { Form, message } from 'antd';
+import { useEffect } from 'react';
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default ({ onClose }) => {
+export default ({ onClose, data }: { onClose: () => void; data: any }) => {
   const [form] = Form.useForm<{ name: string; company: string }>();
+  const handleAddProduct = () => {};
+  useEffect(() => {
+    if (data?.main_order_id) {
+      form.setFieldsValue({ ...data });
+    }
+  }, [data]);
   return (
     <DrawerForm<{
       name: string;
@@ -37,8 +39,11 @@ export default ({ onClose }) =&gt; {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        await postErpOrderAdd({ values });
-        console.log(values.name);
+        if (data?.main_order_id) {
+          await postErpOrderUpdate({ data: values });
+        } else {
+          await postErpOrderAdd({ data: values });
+        }
         message.success('提交成功');
         // 不返回不会关闭弹框
         // onClose();
@@ -63,8 +68,20 @@ export default ({ onClose }) =&gt; {
       />
       <h2>商品基本信息</h2>
       <ProFormText width="lg" name="id" label="支付总金额" />
-      <h2>商品1</h2>
-      <ProFormText width="lg" name="id" label="支付总金额" />
+      <ProFormList name="sub_orders" label="商品">
+        {({ name }) => {
+          return (
+            <div key="row">
+              <h2>商品{name + 1}</h2>
+              <ProFormText name="product_code" label="product_code" />
+              <ProFormText name="name2" label="名称" />
+              <ProFormText name="name3" label="名称" />
+              <ProFormText name="name4" label="名称" />
+            </div>
+          );
+        }}
+      </ProFormList>
+
       {/* <ProFormDateRangePicker name="contractTime" label="合同生效时间" /> */}
       {/* <ProForm.Group>
         <ProFormSelect
-import {
-  ProFormDateTimePicker,
-  ProFormRadio,
-  ProFormSelect,
-  ProFormText,
-  ProFormTextArea,
-  StepsForm,
-} from '@ant-design/pro-components';
-import { Modal } from 'antd';
-import React from 'react';
-
-export interface FormValueType extends Partial<API.UserInfo> {
-  target?: string;
-  template?: string;
-  type?: string;
-  time?: string;
-  frequency?: string;
-}
-
-export interface UpdateFormProps {
-  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
-  onSubmit: (values: FormValueType) => Promise<void>;
-  updateModalVisible: boolean;
-  values: Partial<API.UserInfo>;
-}
-
-const UpdateForm: React.FC<UpdateFormProps> = (props) => (
-  <StepsForm
-    stepsProps={{
-      size: 'small',
-    }}
-    stepsFormRender={(dom, submitter) => {
-      return (
-        <Modal
-          width={640}
-          bodyStyle={{ padding: '32px 40px 48px' }}
-          destroyOnClose
-          title="规则配置"
-          open={props.updateModalVisible}
-          footer={submitter}
-          onCancel={() => props.onCancel()}
-        >
-          {dom}
-        </Modal>
-      );
-    }}
-    onFinish={props.onSubmit}
-  >
-    <StepsForm.StepForm
-      initialValues={{
-        name: props.values.name,
-        nickName: props.values.nickName,
-      }}
-      title="基本信息"
-    >
-      <ProFormText
-        width="md"
-        name="name"
-        label="规则名称"
-        rules={[{ required: true, message: '请输入规则名称！' }]}
-      />
-      <ProFormTextArea
-        name="desc"
-        width="md"
-        label="规则描述"
-        placeholder="请输入至少五个字符"
-        rules={[
-          { required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
-        ]}
-      />
-    </StepsForm.StepForm>
-    <StepsForm.StepForm
-      initialValues={{
-        target: '0',
-        template: '0',
-      }}
-      title="配置规则属性"
-    >
-      <ProFormSelect
-        width="md"
-        name="target"
-        label="监控对象"
-        valueEnum={{
-          0: '表一',
-          1: '表二',
-        }}
-      />
-      <ProFormSelect
-        width="md"
-        name="template"
-        label="规则模板"
-        valueEnum={{
-          0: '规则模板一',
-          1: '规则模板二',
-        }}
-      />
-      <ProFormRadio.Group
-        name="type"
-        width="md"
-        label="规则类型"
-        options={[
-          {
-            value: '0',
-            label: '强',
-          },
-          {
-            value: '1',
-            label: '弱',
-          },
-        ]}
-      />
-    </StepsForm.StepForm>
-    <StepsForm.StepForm
-      initialValues={{
-        type: '1',
-        frequency: 'month',
-      }}
-      title="设定调度周期"
-    >
-      <ProFormDateTimePicker
-        name="time"
-        label="开始时间"
-        rules={[{ required: true, message: '请选择开始时间！' }]}
-      />
-      <ProFormSelect
-        name="frequency"
-        label="监控对象"
-        width="xs"
-        valueEnum={{
-          month: '月',
-          week: '周',
-        }}
-      />
-    </StepsForm.StepForm>
-  </StepsForm>
-);
-
-export default UpdateForm;
 import { postErpOrderListByPage } from '@/services';
-import services from '@/services/demo';
 import {
   ActionType,
   FooterToolbar,
   PageContainer,
-  ProDescriptions,
   ProDescriptionsItemProps,
   ProTable,
 } from '@ant-design/pro-components';
-import { Button, Divider, Drawer, message } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
-import CreateForm from './components/CreateForm';
+import { Button, Divider } from 'antd';
+import React, { useRef, useState } from 'react';
 import OrderDrawer from './components/OrderDrawer';
-import UpdateForm, { FormValueType } from './components/UpdateForm';
-const { addUser, queryUserList, deleteUser, modifyUser } =
-  services.UserController;
+// 子表格
+const expandedRowRender = (props = {}) => {
+  const { sub_orders = [] } = props;
-/**
- * 添加节点
- * @param fields
- */
-const handleAdd = async (fields: API.UserInfo) => {
-  const hide = message.loading('正在添加');
-  try {
-    await addUser({ ...fields });
-    hide();
-    message.success('添加成功');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('添加失败请重试！');
-    return false;
-  }
-};
-
-/**
- * 更新节点
- * @param fields
- */
-const handleUpdate = async (fields: FormValueType) => {
-  const hide = message.loading('正在配置');
-  try {
-    await modifyUser(
-      {
-        userId: fields.id || '',
-      },
-      {
-        name: fields.name || '',
-        nickName: fields.nickName || '',
-        email: fields.email || '',
-      },
-    );
-    hide();
-
-    message.success('配置成功');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('配置失败请重试！');
-    return false;
-  }
-};
-
-/**
- *  删除节点
- * @param selectedRows
- */
-const handleRemove = async (selectedRows: API.UserInfo[]) => {
-  const hide = message.loading('正在删除');
-  if (!selectedRows) return true;
-  try {
-    await deleteUser({
-      userId: selectedRows.find((row) => row.id)?.id || '',
-    });
-    hide();
-    message.success('删除成功，即将刷新');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('删除失败，请重试');
-    return false;
-  }
+  return (
+    <ProTable
+      rowKey="sub_order_id"
+      columns={[
+        {
+          title: 'ProductCode',
+          dataIndex: 'product_code',
+          key: 'product_code',
+        },
+        {
+          title: 'ProductName',
+          dataIndex: 'product_name',
+          key: 'product_name',
+        },
+        {
+          title: 'ProductName',
+          dataIndex: 'product_name',
+          key: 'product_name',
+        },
+        {
+          title: 'ProductName',
+          dataIndex: 'product_name',
+          key: 'product_name',
+        },
+        // {
+        //   title: 'Action',
+        //   dataIndex: 'operation',
+        //   key: 'operation',
+        //   valueType: 'option',
+        //   render: () => [<a key="Pause">Pause</a>, <a key="Stop">Stop</a>],
+        // },
+      ]}
+      headerTitle={false}
+      search={false}
+      options={false}
+      dataSource={sub_orders}
+      pagination={false}
+    />
+  );
 };
 const TableList: React.FC<unknown> = () => {
-  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
-  const [updateModalVisible, handleUpdateModalVisible] =
-    useState<boolean>(false);
-  const [stepFormValues, setStepFormValues] = useState({});
   const actionRef = useRef<ActionType>();
   const [row, setRow] = useState<API.UserInfo>();
   const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
   const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
-  useEffect(() => {
-    postErpOrderListByPage();
-  }, []);
   const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
     {
-      title: '名称',
-      dataIndex: 'name',
+      title: 'SaleCode',
+      dataIndex: 'sales_code',
       // tip: '名称是唯一的 key',
       formItemProps: {
         rules: [
@@ -112,18 +76,39 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
       },
     },
     {
-      title: '昵称',
-      dataIndex: 'nickName',
+      title: 'CustomerName',
+      dataIndex: 'customer_name',
       valueType: 'text',
     },
     {
-      title: '性别',
-      dataIndex: 'gender',
-      hideInForm: true,
-      valueEnum: {
-        0: { text: '男', status: 'MALE' },
-        1: { text: '女', status: 'FEMALE' },
-      },
+      title: 'CustomerName',
+      dataIndex: 'customer_name',
+      valueType: 'text',
+    },
+    {
+      title: 'CustomerName',
+      dataIndex: 'customer_name',
+      valueType: 'text',
+    },
+    {
+      title: 'CustomerName',
+      dataIndex: 'customer_name',
+      valueType: 'text',
+    },
+    {
+      title: 'CustomerName',
+      dataIndex: 'customer_name',
+      valueType: 'text',
+    },
+    {
+      title: 'CustomerName',
+      dataIndex: 'customer_name',
+      valueType: 'text',
+    },
+    {
+      title: 'CustomerName',
+      dataIndex: 'customer_name',
+      valueType: 'text',
     },
     {
       title: '操作',
@@ -133,14 +118,19 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
         <>
           <a
             onClick={() => {
-              handleUpdateModalVisible(true);
-              setStepFormValues(record);
+              setOrderDrawerVisible(true);
+              console.log(
+                '%c [ record ]-123',
+                'font-size:13px; background:pink; color:#bf2c9f;',
+                record,
+              );
+              setRow(record);
             }}
           >
-            配置
+            编辑
           </a>
           <Divider type="vertical" />
-          <a href="">订阅警报</a>
+          <a href="">xxxx</a>
         </>
       ),
     },
@@ -155,10 +145,11 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
       <ProTable<API.UserInfo>
         headerTitle="查询表格"
         actionRef={actionRef}
-        rowKey="id"
+        rowKey="main_order_id"
         search={{
           labelWidth: 120,
         }}
+        expandable={{ expandedRowRender }}
         toolBarRender={() => [
           <Button
             key="1"
@@ -169,16 +160,16 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
           </Button>,
         ]}
         request={async (params, sorter, filter) => {
-          const { data, success } = await queryUserList({
+          const { data } = await postErpOrderListByPage({
             ...params,
             // FIXME: remove @ts-ignore
             // @ts-ignore
             sorter,
             filter,
           });
+
           return {
-            data: data?.list || [],
-            success,
+            data: data?.records || [],
           };
         }}
         columns={columns}
@@ -208,70 +199,8 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
           <Button type="primary">批量审批</Button>
         </FooterToolbar>
       )}
-      <CreateForm
-        onCancel={() => handleModalVisible(false)}
-        modalVisible={createModalVisible}
-      >
-        <ProTable<API.UserInfo, API.UserInfo>
-          onSubmit={async (value) => {
-            const success = await handleAdd(value);
-            if (success) {
-              handleModalVisible(false);
-              if (actionRef.current) {
-                actionRef.current.reload();
-              }
-            }
-          }}
-          rowKey="id"
-          type="form"
-          columns={columns}
-        />
-      </CreateForm>
-      {stepFormValues && Object.keys(stepFormValues).length ? (
-        <UpdateForm
-          onSubmit={async (value) => {
-            const success = await handleUpdate(value);
-            if (success) {
-              handleUpdateModalVisible(false);
-              setStepFormValues({});
-              if (actionRef.current) {
-                actionRef.current.reload();
-              }
-            }
-          }}
-          onCancel={() => {
-            handleUpdateModalVisible(false);
-            setStepFormValues({});
-          }}
-          updateModalVisible={updateModalVisible}
-          values={stepFormValues}
-        />
-      ) : null}
-
-      <Drawer
-        width={600}
-        open={!!row}
-        onClose={() => {
-          setRow(undefined);
-        }}
-        closable={false}
-      >
-        {row?.name && (
-          <ProDescriptions<API.UserInfo>
-            column={2}
-            title={row?.name}
-            request={async () => ({
-              data: row || {},
-            })}
-            params={{
-              id: row?.name,
-            }}
-            columns={columns}
-          />
-        )}
-      </Drawer>
       {orderDrawerVisible && (
-        <OrderDrawer onClose={() => setOrderDrawerVisible(false)} />
+        <OrderDrawer data={row} onClose={() => setOrderDrawerVisible(false)} />
       )}
     </PageContainer>
   );
@@ -2,7 +2,7 @@
 /* tslint:disable */
 /** Do not modify manually.
 content is generated automatically by `ts-gear`. */
-import requester from 'axios';
+import { request as requester } from 'umi';
 // import type {} from "./definition";
 /** @description request parameter type for postErpOrderListByPage */