Merge branch 'master' of http://git.ycjcjy.com/jgz/admin into master

config/routes.js

     hideInMenu: true,
     component: './stockClassification/edit',
   },
-  
+  {
+    path: '/guaranteeTask/print',
+    name: '保障单',
+    hideInMenu: true,
+    layout: false,
+    component: './guaranteeTask/print/index',
+  },
   {
     component: './404',
   },

src/components/EditableTag/Tag.jsx

+import React from 'react';
+import { Button } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import './style.less'
+
+export default (props) => {
+  const { size, type, onDelete, children } = props;
+
+  return (
+    <div className='tag-btn-group'>
+      <Button size={size} type={type}>{children}</Button>
+      <Button size={size} type="primary" icon={<CloseOutlined />} onClick={onDelete} />
+    </div>
+  )
+}

src/components/EditableTag/index.jsx

+import React from 'react';
+import { Button } from 'antd';
+import Tag from './Tag';
+import './style.less'
+
+export default (props) => {
+  const { size, type, list = [], onDelete, keyFuc, labelFunc } = props;
+
+  return (
+    <div className='editable-tag-box'>
+      {
+        list.map((item, index) => {
+          const key = keyFuc(item, index);
+          const label = labelFunc(item, index);
+
+          return <Tag key={key} size={size} type={type} onDelete={() => onDelete(item)}>{label}</Tag>
+        })
+      }
+    </div>
+  )
+}

src/components/EditableTag/style.less

+.tag-btn-group {
+  .ant-btn {
+    vertical-align: middle;
+  }
+
+  .ant-btn:first-child {
+    border-right: none;
+  }
+
+  .ant-btn:last-child {
+    // border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+  }
+}
+
+.editable-tag-box {
+  display: flex;
+  flex-wrap: wrap;
+
+  .tag-btn-group {
+    flex: none;
+    box-sizing: border-box;
+    padding: 1em;
+  }
+}

src/pages/dish/edit/index.jsx

 import { useEffect, useRef, useState } from 'react';
 
 export default (props) => {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const id = searchParams.get('id');
   const [data, setData] = useState({});
   const formRef = useRef();

src/pages/guaranteeTask/Edit/BasicForm.jsx

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import { Link } from 'umi';
 import { Button, Row, Col, Form, Input, InputNumber, DatePicker, notification } from 'antd';
+import { addGuaranteeTask, updateGuaranteeTask } from '@/services/api/guaranteeTask';
 
 const { TextArea } = Input;
 const { RangePicker } = DatePicker;
 
 export default (props) => {
+  const { dataSource, setDataSource } = props;
+  const id = dataSource ? dataSource.id : undefined;
+
   const [form] = Form.useForm()
   const [rangeDate, setRangeDate] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   const onChange = (dts) => {
     const [start, end] = dts;
       notification.warn({ message: '未检索到填写内容' });
       return ;
     }
+
+    const [start, end] = rangeDate;
+    const startDate = start ? start.format('YYYY-MM-DD') : undefined;
+    const endDate = end ? end.format('YYYY-MM-DD') : undefined;
+
+    const func = id ? updateGuaranteeTask : addGuaranteeTask;
+
+    setLoading(true);
+    func({ ...values, startDate, endDate }, id).then(res => {
+      setLoading(false);
+      setDataSource(res);
+      notification.success({ message: '操作成功' })
+    }).catch(() => {
+      setLoading(false);
+    });
   }
 
+  useEffect(() => {
+    if (dataSource) {
+      form.setFieldsValue(dataSource);
+
+      let rangeDt = [];
+
+      if (dataSource.startDate) {
+        rangeDt[0] = moment(dataSource.startDate);
+      }
+
+      if (dataSource.endDate) {
+        rangeDt[1] = moment(dataSource.endDate);
+      }
+
+      setRangeDate(rangeDt);
+    }
+  }, [dataSource, form]);
+
   return (
-    <Form layout="vertical" onFinish={onFinish}>
+    <Form layout="vertical" form={form} onFinish={onFinish}>
       <h3 style={{ marginBottom: '1.5em', fontWeight: 700 }}>人员安排</h3>
       <Row gutter={48}>
         <Col span={6}>
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="部队联系人" name="concat_person">
+          <Form.Item label="部队联系人" name="concatPerson">
             <Input allowClear />
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="部队联系人电话" name="concat_phone">
+          <Form.Item label="部队联系人电话" name="concatPhone">
             <Input allowClear />
           </Form.Item>
         </Col>
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="制餐人电话" name="chef_phone">
+          <Form.Item label="制餐人电话" name="chefPhone">
             <Input allowClear />
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="送餐人" name="delivery_man">
+          <Form.Item label="送餐人" name="deliveryMan">
             <Input allowClear />
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="送餐人电话" name="delivery_phone">
+          <Form.Item label="送餐人电话" name="deliveryPhone">
             <Input allowClear />
           </Form.Item>
         </Col>
       <h3 style={{ margin: '1.5em 0', fontWeight: 700 }}>基本情况</h3>
       <Row gutter={48}>
         <Col span={6}>
-          <Form.Item label="军代表" name="deputy_man">
+          <Form.Item label="军代表" name="deputyMan">
             <Input allowClear />
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="电话" name="deputy_phone">
+          <Form.Item label="电话" name="deputyPhone">
             <Input allowClear />
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="通报时间" name="got_date">
+          <Form.Item label="通报时间" name="gotDate">
             <Input allowClear />
           </Form.Item>
         </Col>
       </Row>
       <Row gutter={48}>
         <Col span={6}>
-          <Form.Item label="保障序号" name="guarantee_no">
+          <Form.Item label="保障序号" name="guaranteeNo">
             <Input allowClear />
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="军运号" name="transport_no">
+          <Form.Item label="军运号" name="transportNo">
             <Input allowClear />
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="车次" name="trips_no">
+          <Form.Item label="车次" name="tripsNo">
             <Input allowClear />
           </Form.Item>
         </Col>
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="保障时间" name="time_range">
+          <Form.Item label="保障时间" name="timeRange">
             <Input allowClear />
           </Form.Item>
         </Col>
       </Row>
       <Row gutter={48}>
         <Col span={6}>
-          <Form.Item label="保障人数" name="total_person_num">
+          <Form.Item label="保障人数" name="totalPersonNum">
             <InputNumber min={1} style={{ width: '100%' }}/>
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="其中回民" name="hui_person_num">
+          <Form.Item label="其中回民" name="huiPersonNum">
             <InputNumber min={0} style={{ width: '100%' }}/>
           </Form.Item>
         </Col>
         <Col span={6}>
-          <Form.Item label="其中病号" name="patient_num">
+          <Form.Item label="其中病号" name="patientNum">
             <InputNumber min={0} style={{ width: '100%' }}/>
           </Form.Item>
         </Col>
       </Row>
 
       <Row gutter={48}>
-        <Col offset={6} span={6}>
-          <Button type="primary" htmlType="submit">提交</Button>
-          <Button style={{ marginLeft: '100px' }}>返回</Button>
+        <Col offset={6} span={12}>
+          <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
+          <Button style={{ marginLeft: '48px' }}>返回</Button>
+          <Button style={{ marginLeft: '48px' }}>
+            <Link target="_blank" to={`/guaranteeTask/print?id=${id}`}>打印预览</Link>
+          </Button>
         </Col>
       </Row>
 

src/pages/guaranteeTask/Edit/DishList.jsx

-import React from 'react'
+import React, { useState, useEffect, useRef } from 'react';
+import { Row, Col, Card, Button, notification } from 'antd';
+import EditableTag from '@/components/EditableTag';
+import { getDishList } from '@/services/api/dish';
+import { getPackageList, getPackageDetailList } from '@/services/api/package';
+import {
+  updateGuaranteeTask,
+  getGuaranteeDetailList,
+  addGuaranteeDetailBatch,
+  deleteGuaranteeDetail
+} from '@/services/api/guaranteeTask';
+import Selector from './components/Selector';
 
 export default (props) => {
+  const { dataSource, setDataSource } = props;
+
+  const [list, setList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const packageRef = useRef();
+
+  const handlePackageSubmit = ({item, amount}) => {
+    packageRef.current = item;
+
+    // 获取套餐下所有的菜肴
+    // 然后把菜肴放入到列表
+    getPackageDetailList({ pageNum: 1, pageSize: 500, packageId: item.id }).then(res => {
+      const { records = [] } = res;
+      if (records.length > 0) {
+        for (let it of records) {
+          const found = list.filter(x => x.dishId === it.id)[0]
+          if (found) {
+            found.dishAmount = amount;
+          } else {
+            list.push({
+              guaranteeId: dataSource.id,
+              dishId: it.id,
+              dishName: it.name,
+              dishUnit: it.unit,
+              dishAmount: amount,
+            })
+          }
+        }
+
+        setList(list.slice());
+      }
+    })
+  };
+
+  const handleDishSubmit = ({item, amount}) => {
+    const found = list.filter(x => x.dishId === item.id)[0]
+    if (found) {
+      found.dishAmount = amount;
+    } else {
+      list.push({
+        guaranteeId: dataSource.id,
+        dishId: item.id,
+        dishName: item.name,
+        dishUnit: item.unit,
+        dishAmount: amount,
+      })
+    }
+
+    setList(list.slice());
+  };
+
+  const onDelete = (item) => {
+    if (item.id) {
+      setLoading(true);
+      deleteGuaranteeDetail(item.id).then(res => {
+        setLoading(false);
+
+        const nwList = list.filter(x => x.dishId !== item.dishId);
+        setList(nwList);
+      }).catch(() => {
+        setLoading(false);
+      })
+    } else {
+      const nwList = list.filter(x => x.dishId !== item.dishId);
+      setList(nwList);
+    }
+  }
+
+  const onSubmit = () => {
+    setLoading(true);
+    addGuaranteeDetailBatch(list, dataSource.id).then(res => {
+      setLoading(false);
+      setList(res);
+      notification.success({ message: '操作成功' });
+    }).catch(() => {
+      setLoading(false);
+    });
+
+    if (packageRef.current) {
+      dataSource.packageName = packageRef.current.name;
+      updateGuaranteeTask(dataSource, dataSource.id).then(res => {
+        setDataSource(res);
+      });
+    }
+  }
+
+  useEffect(() => {
+    if (dataSource.id) {
+      setLoading(true);
+      getGuaranteeDetailList({ pageNum: 1, pageSize: 500, guaranteeId: dataSource.id }).then(res => {
+        setLoading(false);
+        setList(res.records || []);
+      }).catch(() => {
+        setLoading(false);
+      })
+    }
+  }, [dataSource.id])
+
   return (
-    <div></div>
+    <Row gutter={48}>
+      <Col span={8}>
+        <div>
+          <h3>选择套餐</h3>
+          <Selector
+            placeholder="请选择套餐"
+            fetch={getPackageList}
+            onSubmit={handlePackageSubmit}
+          />
+        </div>
+        <div style={{ marginTop: '48px' }}>
+          <h3>选择菜肴</h3>
+          <Selector
+            placeholder="请选择菜肴"
+            fetch={getDishList}
+            onSubmit={handleDishSubmit}
+          />
+        </div>
+      </Col>
+      <Col span={16}>
+        <Card
+          title="已选菜肴"
+          loading={loading}
+          extra={<Button type='primary' loading={loading} onClick={onSubmit}>保存</Button>}
+        >
+          <EditableTag
+            list={list}
+            keyFuc={x => x.dishId}
+            labelFunc={x => `${x.dishName} × ${x.dishAmount}`}
+            onDelete={onDelete}
+          />
+        </Card>
+      </Col>
+    </Row>
   )
 }

src/pages/guaranteeTask/Edit/components/Selector.jsx

+import React, { useState, useEffect } from 'react';
+import { Button, Input, InputNumber, Select, notification } from 'antd';
+
+const { Group } = Input;
+const { Option } = Select;
+
+export default (props) => {
+  const { fetch, placeholder, onSubmit } = props;
+
+  const [data, setData] = useState([]);
+  const [value, setValue] = useState();
+  const [amount, setAmount] = useState();
+
+  const options = data.map(d => <Option key={d.id}>{d.name}</Option>);
+
+  const handleSearch = (name) => {
+    fetch({ pageNum: 1, pageSize: 20, name }).then(res => {
+      setData(res.records || []);
+    })
+  };
+
+  const handleChange = (val) => {
+    setValue(val);
+  }
+
+  const handleSubmit = () => {
+    if (!amount || amount <= 0) {
+      notification.warn({ message: '请输入正确的数量' });
+      return;
+    }
+
+    if (!value) {
+      notification.warn({ message: placeholder });
+      return;
+    }
+
+    const item = data.filter(x => `${x.id}` === `${value}`)[0];
+    if (item) {
+      onSubmit({ item, amount });
+    }
+  }
+
+  useEffect(() => {
+    fetch({ pageNum: 1, pageSize: 20 }).then(res => {
+      setData(res.records || []);
+    })
+  }, []);
+
+  return (
+    <Group compact>
+      <Select
+        allowClear
+        showSearch
+        value={value}
+        style={{ width: '50%' }}
+        placeholder={placeholder}
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={handleSearch}
+        onChange={handleChange}
+        notFoundContent={null}
+      >
+        {options}
+      </Select>
+      <InputNumber style={{ width: '30%' }} placeholder="请输入数量" value={amount} onChange={setAmount} />
+      <Button type="primary" onClick={handleSubmit}>确定</Button>
+    </Group>
+  )
+}

src/pages/guaranteeTask/Edit/index.jsx

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useSearchParams } from '@umijs/max';
 import { Tabs, Card } from 'antd';
 import { PageContainer } from '@ant-design/pro-components';
+import { getGuaranteeTask } from '@/services/api/guaranteeTask';
 import BasicForm from './BasicForm';
 import DishList from './DishList';
 
 export default (props) => {
   const [activeTabKey, setActiveTabKey] = useState('item-1');
+  const [loading, setLoading] = useState(false);
+  const [dataSource, setDataSource] = useState();
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get('id');
 
   const tabList = [
     { tab: '基本情况', key: 'item-1', }, // 务必填写 key
-    { tab: '菜单详情', key: 'item-2', },
+    { tab: '军供菜单', key: 'item-2', },
   ];
 
+  useEffect(() => {
+    if (id) {
+      setLoading(true);
+      getGuaranteeTask(id).then(res => {
+        setLoading(false);
+        setDataSource(res);
+      }).catch(() => {
+        setLoading(false);
+      });
+    }
+  }, [id]);
+
   return (
     <PageContainer>
       <Card
         style={{ width: '100%' }}
+        loading={loading}
         tabList={tabList}
         activeTabKey={activeTabKey}
         onTabChange={setActiveTabKey}>
 
         {
-          activeTabKey === 'item-1' && <BasicForm />
+          activeTabKey === 'item-1' && <BasicForm dataSource={dataSource} setDataSource={setDataSource} />
         }
 
         {
-          activeTabKey === 'item-2' && <DishList />
+          activeTabKey === 'item-2' && <DishList dataSource={dataSource} setDataSource={setDataSource} />
         }
-
       </Card>
     </PageContainer>
   )

src/pages/guaranteeTask/print/index.jsx

+import React, { useRef, useState, useEffect } from 'react';
+import moment from 'moment';
+import { Button } from 'antd';
+import { useSearchParams } from '@umijs/max';
+import { getGuaranteeTask } from '@/services/api/guaranteeTask';
+import { getGuaranteeDetailList } from '@/services/api/guaranteeTask';
+import Styles from './style.less';
+
+export default (props) => {
+  const [dataSource, setDataSource] = useState({});
+  const [list, setList] = useState([]);
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get('id');
+
+  const onPrint = () => {
+    window.print();
+  }
+  
+  useEffect(() => {
+    if (id) {
+      // setLoading(true);
+      getGuaranteeTask(id).then(res => {
+        // setLoading(false);
+        setDataSource(res);
+      }).catch(() => {
+        // setLoading(false);
+      });
+      
+      // setLoading(true);
+      getGuaranteeDetailList({ pageNum: 1, pageSize: 500, guaranteeId: id }).then(res => {
+        // setLoading(false);
+        setList(res.records || []);
+      }).catch(() => {
+        // setLoading(false);
+      })
+    }
+  }, [id]);
+
+  const details = list.map(x => `${x.dishName} × ${x.dishAmount}`).join('，');
+  const startDate = dataSource.startDate ? moment(dataSource.startDate).format('YYYY-MM-DD') : '';
+  const endDate = dataSource.endDate ? moment(dataSource.endDate).format('YYYY-MM-DD') : '';
+  const dateStr = `${startDate} ~ ${endDate}`;
+
+  return (
+    <div className={Styles['print-page']}>
+      <table className={Styles['print-table']}>
+        {/* col 用于固定宽度 */}
+        <col />
+        <col />
+        <col />
+        <col />
+        <col />
+        <col />
+        <col />
+        <col />
+        <thead>
+          <tr>
+            <th className={Styles['title']} colSpan={8}>江苏省海安军供站军供保障受领单</th>
+          </tr>
+          <tr className={Styles['sub-title']}>
+            <th colSpan={2}><div>军代表：{dataSource.deputyMan || ' '}</div></th>
+            <th colSpan={2}><div>电话：{dataSource.deputyPhone || ' '}</div></th>
+            <th colSpan={2}><div>通报时间：{dataSource.gotDate || ' '}</div></th>
+            <th colSpan={2}><div>受领人：{dataSource.receiver || ' '}</div></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><div>保障序号</div></td>
+            <td colSpan={2}><div>{dataSource.guaranteeNo || ' '}</div></td>
+            <td><div>军运号</div></td>
+            <td colSpan={2}><div>{dataSource.transportNo || ' '}</div></td>
+            <td><div>车次</div></td>
+            <td><div>{dataSource.tripsNo || ' '}</div></td>
+          </tr>
+          <tr>
+            <td><div>保障日期</div></td>
+            <td colSpan={3}>{dateStr}</td>
+            <td><div>保障时间</div></td>
+            <td colSpan={3}>{dataSource.timeRange || ' '}</td>
+          </tr>
+          <tr>
+            <td rowSpan={2}><div>保障人数</div></td>
+            <td rowSpan={2}>{dataSource.totalPersonNum || ' '}</td>
+            <td><div>其中回民</div></td>
+            <td>{dataSource.huiPersonNum || ' '}</td>
+            <td rowSpan={2}><div>伙食标准</div></td>
+            <td>{dataSource.standard || ' '}</td>
+          </tr>
+          <tr>
+            <td className={Styles['bd-left']}><div>其中病号</div></td>
+            <td>{dataSource.patientNum || ' '}</td>
+            <td>套餐: {dataSource.packageName || ' '}</td>
+          </tr>
+          <tr>
+            <td><div>保障地点</div></td>
+            <td colSpan={7}>{dataSource.address || ' '}</td>
+          </tr>
+          <tr>
+            <td><div>部队联系人</div></td>
+            <td colSpan={3}>{dataSource.concatPerson || ' '}</td>
+            <td><div>联系电话</div></td>
+            <td colSpan={3}>{dataSource.concatPhone || ' '}</td>
+          </tr>
+          <tr>
+            <td><div>制餐人</div></td>
+            <td colSpan={3}>{dataSource.chef || ' '}</td>
+            <td><div>联系电话</div></td>
+            <td colSpan={3}>{dataSource.chefPhone || ' '}</td>
+          </tr>
+          <tr>
+            <td><div>配送人</div></td>
+            <td colSpan={3}>{dataSource.deliveryMan || ' '}</td>
+            <td><div>联系电话</div></td>
+            <td colSpan={3}>{dataSource.deliveryPhone || ' '}</td>
+          </tr>
+          <tr className={Styles['cell-lg']}>
+            <td>配餐明细</td>
+            <td colSpan={7}><div>{details}</div></td>
+          </tr>
+          <tr className={Styles['cell-lg']}>
+            <td>备注</td>
+            <td colSpan={7}><div>{dataSource.remark || ' '}</div></td>
+          </tr>
+        </tbody>
+      </table>
+      <div className={Styles['print-btn']}>
+        <Button type="primary" onClick={onPrint}>打印</Button>
+      </div>
+    </div>
+  )
+}

src/pages/guaranteeTask/print/style.less

+.print-page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding: 1cm;
+}
+
+// A4 大小 210 * 279
+@width: 190mm; // 210 - 20
+@height: 277mm;  // 279 - 20
+
+@minWidth: calc(@width / 8);
+
+.print-table {
+  table-layout: fixed;
+  width: @width;
+  height: @height;
+  margin: auto;
+  font-size: 16px;
+  overflow-x: hidden;
+
+  col {
+    width: @minWidth;
+  }
+
+  th {
+    font-weight: 400;
+  }
+
+  thead {
+    tr {
+      border: none !important;
+    }
+  }
+
+  @border: 1.5px solid #333;
+
+  tbody {
+    border: @border;
+  }
+  
+  tr {
+    & + tr {
+      border-top: @border;
+    }
+  }
+
+  td {
+    padding: 0 .5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    div {
+      min-width: @minWidth;
+      min-height: 10mm;
+      line-height: 10mm;
+    }
+
+    & + td {
+      border-left: @border;
+    }
+  }
+
+  .cell-lg {
+    div {
+      width: auto;
+      min-height: 70mm;
+      line-height: 1.6em;
+    }
+  }
+
+  .title {
+    font-size: 2em;
+  }
+
+  .sub-title {
+    // font-size: 12px;
+  }
+
+  .bd-left {
+    border-left: @border;
+  }
+}
+
+@media screen {
+  .print-btn {
+    text-align: center;
+    margin: 64px auto;
+  }
+
+  .print-table {
+    padding: 5mm 5mm 5mm 10mm;
+  }
+}
+
+@media print {
+  .print-table {
+    padding: 0;
+  }
+
+  .print-btn {
+    display: none;
+  }
+}
+
+@page {
+  size: A4;
+  margin: 0;
+}

src/pages/package/BasicForm.jsx

 import React, { useState, useEffect } from 'react';
-import { Button, Checkbox, Form, Input } from 'antd';
+import { Button, Checkbox, Card, Form, Input } from 'antd';
 import { addPackage, updataPackage } from '@/services/api/package';
 
 export default (props) => {
   }, [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: '请输入套餐名称' }]}
+    <Card>
+      <Form
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 16 }}
+        onFinish={onFinish}
+        autoComplete="off"
       >
-        <Input placeholder='请输入套餐名称' />
-      </Form.Item>
+        <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>
+        <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>
+    </Card>
   )
 }

src/pages/package/DishList.jsx

       renderItem={item => (
         <List.Item
           className={classNames({ active: detail.id === item.id })}
+          onClick={() => setDetail(item)}
           actions={[
             <Popconfirm
               key="delete"

src/pages/package/index.jsx

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

src/services/api/guaranteeTask.js

+import { request } from '@umijs/max';
+
+/**
+ * 详情
+ * @param {*} data
+ * @returns
+ */
+ export const getGuaranteeTask = (id) => request(`/guaranteeTask/${id}`);
+
+/**
+ * 新增
+ * @param {*} data
+ * @returns
+ */
+ export const addGuaranteeTask = (data) => request('/guaranteeTask', { method: 'post', data });
+
+ 
+/**
+ * 更新
+ * @param {*} data
+ * @returns
+ */
+ export const updateGuaranteeTask = (data, id) => request(`/guaranteeTask/${id}`, { method: 'put', data });
+
+ /**
+  * 查询明细
+  * @param {*} data
+  * @returns
+  */
+  export const getGuaranteeDetailList = (params) => request('/guaranteeDetail', { params });
+
+/**
+ * 批量新增明细
+ * @param {*} data
+ * @returns
+ */
+ export const addGuaranteeDetailBatch = (data, guaranteeId) => request('/guaranteeDetail/batch', { method: 'post', data, params: { guaranteeId } });
+ 
+/**
+ * 删除明细
+ * @param {*} data
+ * @returns
+ */
+ export const deleteGuaranteeDetail = id => request(`/guaranteeDetail/${id}`, { method: 'delete' });