feats

config/config.js

@@ -44,7 +44,7 @@ export default defineConfig({
     // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
     // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
     // https://ant.design/docs/react/customize-theme-variable-cn
-    'root-entry-name': 'variable',
+    'root-entry-name': 'default' // 'variable',
   },
   ignoreMomentLocale: true,
   proxy: proxy[REACT_APP_ENV || 'dev'],

config/defaultSettings.ts → config/defaultSettings.js

@@ -1,9 +1,5 @@
-import { Settings as LayoutSettings } from '@ant-design/pro-components';
 
-const Settings: LayoutSettings & {
-  pwa?: boolean;
-  logo?: string;
-} = {
+const Settings = {
   navTheme: 'dark',
   // 拂晓蓝
   primaryColor: '#1890ff',
@@ -12,10 +8,13 @@ const Settings: LayoutSettings & {
   fixedHeader: false,
   fixSiderbar: true,
   colorWeak: false,
-  title: '军供',
+  title: '海安军供',
   pwa: false,
   logo: '/w2/logo.png',
   iconfontUrl: '',
+  splitMenus: false,
+  headerRender: false,
+  footerRender: false,
 };
 
 export default Settings;

config/routes.js

@@ -66,8 +66,7 @@
     path: '/package/list',
     name: '套餐管理',
     icon: 'VideoCameraOutlined',
-    component: './package/list',
-
+    component: './package/index',
   },
   {
     component: './404',

src/components/Footer/index.jsx

@@ -1,7 +1,7 @@
 import { DefaultFooter } from '@ant-design/pro-components';
 
 const Footer = () => {
-  const defaultMessage = '无际科技';
+  const defaultMessage = '南京云致';
 
   const currentYear = new Date().getFullYear();
 
@@ -11,26 +11,6 @@ const Footer = () => {
         background: 'none',
       }}
       copyright={`${currentYear} ${defaultMessage}`}
-      // links={[
-      //   {
-      //     key: 'Ant Design Pro',
-      //     title: 'Ant Design Pro',
-      //     href: 'https://pro.ant.design',
-      //     blankTarget: true,
-      //   },
-      //   {
-      //     key: 'github',
-      //     title: <GithubOutlined />,
-      //     href: 'https://github.com/ant-design/ant-design-pro',
-      //     blankTarget: true,
-      //   },
-      //   {
-      //     key: 'Ant Design',
-      //     title: 'Ant Design',
-      //     href: 'https://ant.design',
-      //     blankTarget: true,
-      //   },
-      // ]}
     />
   );
 };

src/pages/package/BasicForm.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Checkbox, Form, Input } from 'antd';
+import { addPackage, updataPackage } from '@/services/api/package';
+
+export default (props) => {
+  const { current, onChange } = props;
+
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const onFinish = (values) => {
+    setLoading(true);
+
+    const data = current.id ? { ...current, ...values } : values;
+    const func = current.id ? updataPackage : addPackage;
+    
+    func(data, current.id).then(res => {
+      setLoading(false);
+      onChange(res);
+    }).catch(() => {
+      setLoading(false);
+    });
+  }
+
+  useEffect(() => {
+    form.setFieldsValue({
+      name: current.name,
+      unit: current.unit,
+    });
+  }, [form, current])
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 16 }}
+      onFinish={onFinish}
+      autoComplete="off"
+    >
+      <Form.Item
+        label="套餐名称"
+        name="name"
+        rules={[{ required: true, message: '请输入套餐名称' }]}
+      >
+        <Input placeholder='请输入套餐名称' />
+      </Form.Item>
+
+      <Form.Item
+        label="套餐单位"
+        name="unit"
+      >
+        <Input placeholder='请输入套餐单位' />
+      </Form.Item>
+
+      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+        <Button type="primary" htmlType="submit" loading={loading}>
+          提交
+        </Button>
+      </Form.Item>
+    </Form>
+  )
+}

src/pages/package/DishList.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { List, Popconfirm, Select } from 'antd';
+
+const { Option } = Select;
+
+const Header = props => {
+  const { onChange } = props;
+  const [data, setData] = useState([]);
+  const [value, setValue] = useState();
+
+  const handleSearch = (newValue) => {
+    if (newValue) {
+      // fetch(newValue, setData);
+    } else {
+      setData([]);
+    }
+  };
+
+  const handleChange = (newValue) => {
+    setValue(newValue);
+    if (newValue) {
+      onChange(data.filter(x => x.id === newValue)[0]);
+    }
+  };
+
+  const options = data.map(d => <Option key={d.id} value={d.id}>{d.name}</Option>);
+
+  return (
+    <Select
+      style={{ width: '100%' }}
+      showSearch
+      value={value}
+      placeholder='请选择菜肴'
+      defaultActiveFirstOption={false}
+      showArrow={false}
+      filterOption={false}
+      onSearch={handleSearch}
+      onChange={handleChange}
+      notFoundContent={null}
+    >
+      {options}
+    </Select>
+  );
+}
+
+
+export default (props) => {
+  const [list, setList] = useState([]);
+
+  const onAdd = item => {
+    const origin = list.filter(x => x.id !== item.id)[0];
+    if (!origin) {
+      setList([...list, item]);
+    }
+  }
+
+  return (
+    <List
+      header={<Header onChange={onAdd} />}
+      bordered
+      dataSource={list}
+      renderItem={item => (
+        <List.Item
+          className={classNames({ active: current.id === item.id })}
+          onClick={() => setCurrent(item)}
+          actions={[
+            <Popconfirm
+              key="delete"
+              title="确认删除套餐?"
+              onConfirm={() => onDelete(item)}
+              >
+              <a href="#">删除</a>
+            </Popconfirm>
+          ]}
+        >
+          {item.name}
+        </List.Item>
+      )}
+    />
+  );
+}

src/pages/package/List.jsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Row, Col, Button, List, Popconfirm, Input } from 'antd';
+import classNames from 'classnames';
+import { getPackageList, deletePackage } from '@/services/api/package';
+
+export default (props) => {
+  const { current, setCurrent } = props;
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [filter, setFilter] = useState({ pageNum: 1, pageSize: 10, total: 0 });
+  const [list, setList] = useState([]);
+  const listRef = useRef();
+  listRef.current = list;
+
+  const onLoadMore = () => {
+    setFilter({
+      ...filter,
+      pageNum: filter.pageNum + 1,
+    })
+  }
+
+  const loadMore = loading || !hasMore ? null : (
+    <div
+      style={{
+        textAlign: 'center',
+        marginTop: 12,
+        height: 32,
+        lineHeight: '32px',
+      }}
+    >
+      <Button onClick={onLoadMore}>加载更多</Button>
+    </div>
+  );
+
+  const onSearch = (val) => {
+    setFilter({
+      ...filter,
+      name: val,
+      pageNum: 1,
+    })
+  }
+
+  const onDelete = (item) => {
+    setLoading(true);
+    deletePackage(item.id).then(res => {
+      setLoading(false);
+
+      const newList = listRef.current.filter(x => x.id !== item.id);
+      setList(newList);
+      if (item.id === current.id) {
+        setCurrent(newList[0] || {});
+      }
+    }).catch(() => {
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    getPackageList(filter).then(res => {
+      setLoading(false);
+
+      const { records = [], current, total, pages } = res
+
+      if (current === 1) {
+        setList(records)
+        setCurrent((records || [])[0] || {})
+      } else {
+        setList(listRef.current.concat(records))
+      }
+
+      setHasMore(current < pages)
+    }).catch(() => {
+      setLoading(false);
+    });
+  }, [filter]);
+
+  useEffect(() => {
+    if (!current || !current.id) return;
+
+    let found = false;
+    let newList = listRef.current.map(x => {
+      if (x.id === current.id) {
+        found = true;
+        return current;
+      }
+
+      return x;
+    })
+
+    if (!found) {
+      newList = newList.concat(current);
+    }
+
+    setList(newList);
+  }, [current])
+
+  return (
+    <List
+      bordered
+      header={
+        <Input.Group compact>
+          <Input.Search allowClear placeholder="请输入筛选名称" onSearch={onSearch} style={{ width: 'calc(100% - 60px)' }} />
+          <Button type='link' onClick={() => setCurrent({})} >新增</Button>
+        </Input.Group>
+      }
+      dataSource={list}
+      loading={loading}
+      loadMore={loadMore}
+      renderItem={item => (
+        <List.Item
+          className={classNames({ active: current.id === item.id })}
+          onClick={() => setCurrent(item)}
+          actions={[
+            <Popconfirm
+              key="delete"
+              title="确认删除套餐?"
+              onConfirm={() => onDelete(item)}
+              >
+              <a href="#">删除</a>
+            </Popconfirm>
+          ]}
+        >
+          {item.name}
+        </List.Item>
+      )}
+    />
+  )
+}

src/pages/package/index.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { PageContainer } from '@ant-design/pro-components';
+import { Row, Col } from 'antd';
+import List from './List';
+import BasicForm from './BasicForm';
+import DishList from './DishList';
+
+import './style.less';
+
+export default (props) => {
+  const [current, setCurrent] = useState({});
+
+  return (
+    <PageContainer>
+      <Row gutter={100}>
+        <Col span={8}>
+          <List current={current} setCurrent={setCurrent}/>
+        </Col>
+        <Col span={8}>
+          <BasicForm current={current} onChange={it => setCurrent(it)} />
+          <div style={{ marginTop: '100px' }}>
+            <DishList />
+          </div>
+        </Col>
+      </Row>
+    </PageContainer>
+  )
+}

src/pages/package/list/index.jsx

@@ -1,115 +0,0 @@
-import { getPackageList, addPackage, updataPackage } from '@/services/api/package';
-import { queryTable } from '@/utils/request';
-import { PageContainer, ProTable } from '@ant-design/pro-components';
-import { history } from '@umijs/max';
-import { Button, message, Popconfirm, EditForm } from 'antd';
-import { useRef, useState } from 'react';
-
-const PackageList = (props) => {
-  console.log(props, '===');
-  const [showDetail, setShowDetail] = useState(false);
-  const [activeKey, setActiveKey] = useState('');
-  const actionRef = useRef();
-
-  const updata = (row) => {
-    if (row.id) {
-      updataPackage(row.id, { state: row.state === '1' ? '2' : '1' }).then((res) => {
-        message.success('修改成功');
-        actionRef.current.reload();
-      });
-    }
-  };
-
-  const handleDelete = (id) => {
-    if (id) {
-      deleteBanner(id).then((res) => {
-        message.success('删除成功');
-        actionRef.current.reload();
-      });
-    }
-  };
-
-  const columns = [
-    {
-      title: '套餐名称',
-      dataIndex: 'name',
-    },
-
-    {
-      title: '套餐单位',
-      dataIndex: 'unit',
-    },
-    {
-      title: '包含菜肴(份)',
-      dataIndex: 'itemId.amount',
-    },
-    {
-      title: '包含食材(种)',
-      dataIndex: 'itemId.amount',
-    },
-    {
-      title: '操作',
-      valueType: 'option',
-      width: 200,
-      render: (_, record) => [
-        <Button
-          key={1}
-          style={{ padding: 0 }}
-          type="link"
-          onClick={() => {
-            updata(record);
-          }}
-        >
-          {record.state === '1' ? '下架' : '上架'}
-        </Button>,
-        <Button
-          key={2}
-          style={{ padding: 0 }}
-          type="link"
-          onClick={() => {
-            console.log(record, ']]');
-            history.push(`/rotationChart/add?id=${record.id}`);
-          }}
-        >
-          编辑
-        </Button>,
-
-        <Popconfirm
-          key={3}
-          title="您是否确认删除 ?"
-          onConfirm={() => handleDelete(record.id)}
-          okText="确定"
-          cancelText="取消"
-        >
-          {/* manualPush */}
-          <Button style={{ padding: 0 }} type="link">
-            删除
-          </Button>
-        </Popconfirm>,
-      ],
-    },
-  ];
-
-  return (
-    <PageContainer>
-      <ProTable
-        search={false}
-        actionRef={actionRef}
-        rowKey="id"
-        toolBarRender={() => [
-          <Button
-            key="2"
-            type="primary"
-            onClick={() => { setCurrent({}); setVisible(true); }}
-          >
-            新增
-          </Button>,
-        ]}
-        // request={queryTable(getDishList)}
-        columns={columns}
-      />
-    </PageContainer>
-  );
-};
-
-export default PackageList;

src/pages/package/style.less

@@ -0,0 +1,6 @@
+
+.ant-list-item {
+  &.active {
+    background-color: #e6f7ff;
+  }
+}

src/services/api/package.js

@@ -21,4 +21,11 @@ export const addPackage = (data) => request('/package', { method: 'post', data }
  * @param {*} data
  * @returns
  */
-export const updataPackage = (id, data) => request(`/package/${id}`, { method: 'put', data });
+export const updataPackage = (data, id) => request(`/package/${id}`, { method: 'put', data });
+
+/**
+ * 删除
+ *  @param {*} id
+ * @returns
+ */
+export const deletePackage = id => request(`/package/${id}`, { method: 'delete' });