feats

src/app.jsx

     token: {
       sider: {
         colorMenuBackground: '#001529',
-        colorTextMenuTitle: '#fff',
-        colorTextMenu: 'hsla(0,0%,100%,.65);',
         colorBgMenuItemHover: '#fff',
         colorBgMenuItemSelected: '#1890ff',
+        colorTextMenuActive: '#fff',
         colorTextMenuSelected: '#fff',
+        colorTextMenuTitle: '#fff',
+        colorTextMenu: 'hsla(0,0%,100%,.65);',
+        
+        // colorTextMenuTitle: string,
+        // colorTextCollapsedButtonHover: string,
+        // colorTextCollapsedButton: string,
+        // colorTextMenuSecondary: string,
+        // colorTextSubMenuSelected: string,
+        // colorBgMenuItemCollapsedHover: string,
+        // colorBgMenuItemCollapsedSelected: string,
       },
     },
     // waterMarkProps: {
       );
     },
 
-    settings: initialState?.settings,
+    ...initialState?.settings,
   };
 
   console.log(cfg)

src/global.less

     }
   }
 }
+
+.ant-page-header {
+  background-color: #fff !important;
+  // box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04);
+}

src/pages/package/DishList.jsx

-import React, { useState } from 'react';
-import { List, Popconfirm, Select } from 'antd';
+import React, { useEffect, useState, useRef } from 'react';
+import { Button, List, Popconfirm, Select } from 'antd';
+import classNames from 'classnames';
+import { getPackageDetailList, addPackageDetail, deletePackageDetail } from '@/services/api/package';
+import { getDishList } from '@/services/api/dish';
 
 const { Option } = Select;
 
 
   const handleSearch = (newValue) => {
     if (newValue) {
-      // fetch(newValue, setData);
+      getDishList({ name: newValue, pageNum: 1, pageSize: 100 }).then(res => {
+        setData(res.records || []);
+      });
     } else {
       setData([]);
     }
 
   const options = data.map(d => <Option key={d.id} value={d.id}>{d.name}</Option>);
 
+  const initList = () => {
+    getDishList({ pageNum: 1, pageSize: 10 }).then(res => {
+      setData(res.records || []);
+    });
+  }
+
+  useEffect(() => {
+    initList();
+  }, [])
+
   return (
     <Select
       style={{ width: '100%' }}
+      allowClear
       showSearch
       value={value}
       placeholder='请选择菜肴'
       onSearch={handleSearch}
       onChange={handleChange}
       notFoundContent={null}
+      onClear={initList}
     >
       {options}
     </Select>
 
 
 export default (props) => {
+  const { current, setCurrent } = props;
+
+  const packageId = (current || {}).id;
+
+  const [loading, setLoading] = useState(false);
   const [list, setList] = useState([]);
+  const [detail, setDetail] = useState({});
+  const listRef = useRef();
+  listRef.current = list;
 
   const onAdd = item => {
-    const origin = list.filter(x => x.id !== item.id)[0];
-    if (!origin) {
-      setList([...list, item]);
-    }
+    setLoading(true);
+    addPackageDetail({ packageId, dishId: item.id }).then(res => {
+      setLoading(false);
+      const newList = listRef.current.concat(res);
+      setList(newList);
+    }).catch(() => {
+      setLoading(false);
+    });
   }
 
+  const onDelete = item => {
+    setLoading(true);
+    deletePackageDetail({ packageId, dishId: item.id }).then(res => {
+      setLoading(false);
+      const newList = listRef.current.filter(x => x.id !== item.id);
+      setList(newList);
+    }).catch(() => {
+      setLoading(false);
+    });
+  }
+
+  useEffect(() => {
+    if (!packageId) return;
+
+    setLoading(true);
+    getPackageDetailList({ packageId, pageNum: 1, pageSize: 500 }).then(res => {
+      setLoading(false);
+      setList(res.records || []);
+      setDetail((res.records || [])[0] || {});
+    }).catch(() => {
+      setLoading(false);
+    });
+
+  }, [packageId]);
+
   return (
     <List
+      style={{ minHeight: '300px' }}
       header={<Header onChange={onAdd} />}
       bordered
+      loading={loading}
       dataSource={list}
       renderItem={item => (
         <List.Item
-          className={classNames({ active: current.id === item.id })}
-          onClick={() => setCurrent(item)}
+          className={classNames({ active: detail.id === item.id })}
           actions={[
             <Popconfirm
               key="delete"
-              title="确认删除套餐?"
+              title="确认删除?"
               onConfirm={() => onDelete(item)}
               >
               <a href="#">删除</a>

src/pages/package/List.jsx

 
   return (
     <List
+      style={{ minHeight: '600px' }}
       bordered
       header={
         <Input.Group compact>
           actions={[
             <Popconfirm
               key="delete"
-              title="确认删除套餐?"
+              title="确认删除?"
               onConfirm={() => onDelete(item)}
               >
               <a href="#">删除</a>

src/pages/package/index.jsx

           <Col span={8}>
             <BasicForm current={current} onChange={it => setCurrent(it)} />
             <div style={{ marginTop: '100px' }}>
-              <DishList />
+              <DishList current={current} />
             </div>
           </Col>
         </Row>

src/services/api/dish.js

  * @param {*} params
  * @returns
  */
-export const getDishList = (params) => request('/dish', { params });
+export const getDishList = (params) => request('/dishes', { params });
 
 
 /**

src/services/api/package.js

  *  @param {*} id
  * @returns
  */
-export const deletePackage = id => request(`/package/${id}`, { method: 'delete' });
+export const deletePackage = id => request(`/package/${id}`, { method: 'delete' });
+
+
+/**
+ * 获取明细
+ * @param {*} params 
+ * @returns 
+ */
+export const getPackageDetailList = params => request('/packageDetail', { params });
+
+
+/**
+ * 新增明细
+ * @param {*} data 
+ * @returns 
+ */
+ export const addPackageDetail = data => request('/packageDetail', { method: 'post', data });
+ 
+
+/**
+ * 删除明细
+ * @param {*} params 
+ * @returns 
+ */
+ export const deletePackageDetail = params => request('/packageDetail', { method: 'delete', params });