feats

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 { 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 [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 id = dataSource ? dataSource.id : 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 gutter={48}>
         <Col offset={6} span={6}>
-          <Button type="primary" htmlType="submit">提交</Button>
+          <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
           <Button style={{ marginLeft: '100px' }}>返回</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>

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' });