货拉拉账户配置部分页面

jiangwei
1 parent 2568db05
Showing 5 changed files with 176 additions and 0 deletions
config/routers/pms.ts
src/pages/pms/transfer/HuolalaSetting/api.ts
src/pages/pms/transfer/HuolalaSetting/components/AddModal.tsx
src/pages/pms/transfer/HuolalaSetting/components/ChargeModal.tsx
src/pages/pms/transfer/HuolalaSetting/index.tsx
@@ -159,4 +159,8 @@ export default [
     path: '/pms/transfer/storageOverStock', // 可调出配件
     component: './pms/transfer/StorageOverStock'
   },
+  {
+    path: '/pms/transfer/huolalaSetting', // 货拉拉账户配置
+    component: './pms/transfer/HuolalaSetting'
+  },
 ];
+import React from 'react';
+import {Form, Button, InputNumber, Modal } from 'antd';
+import PmsSelect from '@/pages/pms/comonents/PmsSelect';
+
+const Item = Form.Item;
+
+interface Props{
+  visible?:boolean,
+  onCancel: Function,
+  item?:any
+}
+export default function Index(props:Props) {
+  const { visible, onCancel, item } = props;
+  const [form] = Form.useForm();
+
+  const onSave = () => {
+
+  };
+ 
+  return (
+    <Modal 
+      title={item.id ? "编辑货拉拉账户配置" : "新增货拉拉账户配置"}
+      visible={visible}
+      maskClosable={false}
+      onCancel={() => onCancel()}
+      footer={[
+        <Button onClick={() => onCancel()}>取消</Button>,
+        <Button type="primary" htmlType="submit" onClick={() => onSave()}>保存</Button>
+      ]}
+    >
+      <Form
+        form={form}
+        labelCol={{span: 5}}
+        wrapperCol={{span: 12}}
+      >
+        <Item label="往来单位" name="supplierName" rules={[{required: true, message: "请选择往来单位"}]}>
+          <PmsSelect />
+        </Item>
+        <Item label="签约门店" name="shopName" rules={[{ required: true, message: "请选择签约门店" }]}>
+          <PmsSelect />
+        </Item>
+        <Item label="推待办余额" name="amount" rules={[{ required: true, message: "请填写金额" }]}>
+          <InputNumber style={{width: '100%'}} addonAfter="元" />
+        </Item>
+        <Item label="推待办角色" name="role" rules={[{ required: true, message: "请选择推办角色" }]}>
+          <PmsSelect />
+        </Item>
+        <Item label="发单账号" name="admin" rules={[{ required: true, message: "请选择发单账号" }]}>
+          <PmsSelect />
+        </Item>
+      </Form>
+    </Modal>
+  );
+}
+import React from 'react';
+import { Form, Button, InputNumber, Modal } from 'antd';
+import PmsSelect from '@/pages/pms/comonents/PmsSelect';
+
+const Item = Form.Item;
+
+interface Props {
+  visible?: boolean,
+  onCancel: Function,
+  item?: any
+}
+export default function Index(props: Props) {
+  const { visible, onCancel, item } = props;
+  const [form] = Form.useForm();
+
+  const onSave = () => {
+    const params = {id: item.id};
+    console.log(params);
+  };
+
+  return (
+    <Modal
+      title="预付款充值申请"
+      visible={visible}
+      maskClosable={false}
+      onCancel={() => onCancel()}
+      footer={[
+        <Button onClick={() => onCancel()}>取消</Button>,
+        <Button type="primary" htmlType="submit" onClick={() => onSave()}>提交申请</Button>
+      ]}
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 7 }}
+        wrapperCol={{ span: 12 }}
+      >
+        <Item label="往来单位" name="supplierName" rules={[{ required: true, message: "请选择往来单位" }]}>
+          <PmsSelect />
+        </Item>
+        <Item label="往来单位类型" name="shopName" rules={[{ required: true, message: "请选择签约门店" }]}>
+          <PmsSelect />
+        </Item>
+        <Item label="账户余额" name="amount" rules={[{ required: true, message: "请填写金额" }]}>
+          <InputNumber style={{ width: '100%' }} addonAfter="元" />
+        </Item>
+        <Item label="充值金额" name="amount" rules={[{ required: true, message: "请填写金额" }]}>
+          <InputNumber style={{ width: '100%' }} addonAfter="元" />
+        </Item>
+        <Item label="账户到账金额" name="amount" rules={[{ required: true, message: "请填写金额" }]}>
+          <InputNumber style={{ width: '100%' }} addonAfter="元" />
+        </Item>
+        <Item label="结算门店" name="role" rules={[{ required: true, message: "请选择推办角色" }]}>
+          <PmsSelect />
+        </Item>
+        <Item label="发票金额要求比例" name="role" rules={[{ required: true, message: "请选择推办角色" }]}>
+          <PmsSelect />
+        </Item>
+        <Item label="结算方式" name="role" rules={[{ required: true, message: "请选择推办角色" }]}>
+          <PmsSelect />
+        </Item>
+        <Item label="附件" name="files">
+          <PmsSelect />
+        </Item>
+      </Form>
+    </Modal>
+  );
+}
+import React, { useState } from 'react';
+import { Card, Button, Table, Divider, Popconfirm } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import AddModal from './components/AddModal';
+import ChargeModal from './components/ChargeModal';
+
+const Column = Table.Column;
+export default function Index() {
+  const data = [
+    {id: 1, supplierName: "锦州货拉拉", shopName: "锦州4S店", amount: 5000, diAmount: 100, role: "计划员", admin: "168276829"}
+  ];
+  const [current, setCurrent] = useState<{visible: boolean, item: object}>({visible: false, item: {}});
+  const [chargeInfo, setChargeInfo] = useState<{visible: boolean, item: object}>({visible: false, item: {}});
+
+  return (
+    <PageHeaderWrapper title="货拉拉账户配置">
+      <Card 
+        extra={<Button type="primary" onClick={() => setCurrent({visible: true, item: {}})}>新增</Button>}
+      >
+        <Table dataSource={data} rowKey="id">
+          <Column title="往来单位" dataIndex="supplierName" />
+          <Column title="签约门店" dataIndex="shopName" />
+          <Column title="当前余额(元)" dataIndex="amount" />
+          <Column title="低余额推待办(元)" dataIndex="diAmount" />
+          <Column title="推待办角色" dataIndex="role" />
+          <Column title="发单账号" dataIndex="admin" />
+          <Column 
+            title="操作" 
+            render={r => (
+              <>
+                <a onClick={() => setChargeInfo({visible: true, item: r})}>预付款充值申请</a>
+                <Divider type="vertical" />
+                <a onClick={() => setCurrent({visible: true, item: r})}>编辑</a>
+                <Divider type="vertical" />
+                <Popconfirm
+                  title="确认删除"
+                  onConfirm={() => {}}
+                >
+                  <a>删除</a>
+                </Popconfirm>
+                
+              </>
+            )}
+          />
+        </Table>
+        <AddModal visible={current.visible} item={current.item} onCancel={() => setCurrent({ visible: false, item: {} })} />
+        <ChargeModal visible={chargeInfo.visible} item={chargeInfo.item} onCancel={() => setChargeInfo({ visible: false, item: {} })} />
+      </Card>
+    </PageHeaderWrapper>
+  );
+}