feaets

config/routes.js

@@ -75,6 +75,19 @@
     icon: 'VideoCameraOutlined',
     component: './package/index',
   },
+  {
+    path: '/guaranteeTask/list',
+    name: '任务管理',
+    icon: 'VideoCameraOutlined',
+    component: './guaranteeTask/index',
+  },
+  {
+    path: '/guaranteeTask/edit',
+    name: '任务详情',
+    icon: 'VideoCameraOutlined',
+    // hideInMenu: true,
+    component: './guaranteeTask/Edit/index',
+  },
   {
     component: './404',
   },

src/pages/guaranteeTask/Edit/BasicForm.jsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { Button, Row, Col, Form, Input, InputNumber, DatePicker, notification } from 'antd';
+
+const { TextArea } = Input;
+const { RangePicker } = DatePicker;
+
+export default (props) => {
+  const [form] = Form.useForm()
+  const [rangeDate, setRangeDate] = useState([]);
+
+  const onChange = (dts) => {
+    const [start, end] = dts;
+    setRangeDate(dts);
+    
+    form.setFieldValue('startDate', start ? start.format('YYYY-MM-DD') : undefined);
+    form.setFieldValue('endDate', end ? end.format('YYYY-MM-DD') : undefined);
+  }
+
+  const onFinish = values => {
+    const notNull = Object.keys(values).map(k => values[k]).filter(Boolean);
+    if (!notNull || notNull.length < 1) {
+      notification.warn({ message: '未检索到填写内容' });
+      return ;
+    }
+  }
+
+  return (
+    <Form layout="vertical" onFinish={onFinish}>
+      <h3 style={{ marginBottom: '1.5em', fontWeight: 700 }}>人员安排</h3>
+      <Row gutter={48}>
+        <Col span={6}>
+          <Form.Item label="受领人" name="receiver">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="受领人电话" name="receiverPhone">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="部队联系人" name="concat_person">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="部队联系人电话" name="concat_phone">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={48}>
+        <Col span={6}>
+          <Form.Item label="制餐人" name="chef">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="制餐人电话" name="chef_phone">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="送餐人" name="delivery_man">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="送餐人电话" name="delivery_phone">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+      </Row>
+      
+      <h3 style={{ margin: '1.5em 0', fontWeight: 700 }}>基本情况</h3>
+      <Row gutter={48}>
+        <Col span={6}>
+          <Form.Item label="军代表" name="deputy_man">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="电话" name="deputy_phone">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="通报时间" name="got_date">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={48}>
+        <Col span={6}>
+          <Form.Item label="保障序号" name="guarantee_no">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="军运号" name="transport_no">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="车次" name="trips_no">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={48}>
+        <Col span={12}>
+          <Form.Item label="保障日期">
+            <RangePicker style={{ width: '100%' }} allowClear value={rangeDate} onChange={onChange} />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="保障时间" name="time_range">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={48}>
+        <Col span={6}>
+          <Form.Item label="保障人数" name="total_person_num">
+            <InputNumber min={1} style={{ width: '100%' }}/>
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="其中回民" name="hui_person_num">
+            <InputNumber min={0} style={{ width: '100%' }}/>
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="其中病号" name="patient_num">
+            <InputNumber min={0} style={{ width: '100%' }}/>
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={48}>
+        <Col span={12}>
+          <Form.Item label="保障地点" name="address">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item label="伙食标准" name="standard">
+            <Input allowClear />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={48}>
+        <Col span={12}>
+          <Form.Item label="备注" name="remark">
+            <TextArea rows={4} />
+          </Form.Item>
+        </Col>
+      </Row>
+
+      <Row gutter={48}>
+        <Col offset={6} span={6}>
+          <Button type="primary" htmlType="submit">提交</Button>
+          <Button style={{ marginLeft: '100px' }}>返回</Button>
+        </Col>
+      </Row>
+
+    </Form>
+  )
+}

src/pages/guaranteeTask/Edit/DishList.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default (props) => {
+  return (
+    <div></div>
+  )
+}

src/pages/guaranteeTask/Edit/index.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Tabs, Card } from 'antd';
+import { PageContainer } from '@ant-design/pro-components';
+import BasicForm from './BasicForm';
+import DishList from './DishList';
+
+export default (props) => {
+  const [activeTabKey, setActiveTabKey] = useState('item-1');
+
+  const tabList = [
+    { tab: '基本情况', key: 'item-1', }, // 务必填写 key
+    { tab: '菜单详情', key: 'item-2', },
+  ];
+
+  return (
+    <PageContainer>
+      <Card
+        style={{ width: '100%' }}
+        tabList={tabList}
+        activeTabKey={activeTabKey}
+        onTabChange={setActiveTabKey}>
+
+        {
+          activeTabKey === 'item-1' && <BasicForm />
+        }
+
+        {
+          activeTabKey === 'item-2' && <DishList />
+        }
+
+      </Card>
+    </PageContainer>
+  )
+}

src/pages/guaranteeTask/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default (props) => {
+  return (
+    <div></div>
+  )
+}