feats

src/components/Wangeditor/index.jsx

@@ -5,7 +5,16 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-react";
 // 工具栏配置参考
 // https://www.cnblogs.com/-roc/p/16400965.html
 
+const defaultStyle = {
+  border: "1px solid #ccc",
+  zIndex: 100,
+  marginTop: "15px"
+}
+
 function MyEditor(props) {
+
+  const style = React.useMemo(() => ({ ...defaultStyle, ...(props.style || {}) }), [props.style])
+
   const {
     value = "",
     onChange = (e) => {
@@ -22,19 +31,23 @@ function MyEditor(props) {
   const [editor, setEditor] = useState(null); // 存储 editor 实例
   const [html, setHtml] = useState("");
  
-  // 模拟 ajax 请求，异步设置 html
-  useEffect(() => {
-    setHtml(value || "");
-  }, [value]);
+  // // 模拟 ajax 请求，异步设置 html
+  // useEffect(() => {
+  //   setHtml(value || "");
+  // }, [value]);
 
   // 及时销毁 editor
   useEffect(() => {
+    if (editor) {
+      setHtml(value || "");
+    }
+
     return () => {
       if (editor == null) return;
       editor.destroy();
       setEditor(null);
     };
-  }, [editor]);
+  }, [editor, value]);
 
   function insertText() {
     if (editor == null) return;
@@ -47,24 +60,22 @@ function MyEditor(props) {
   }
 
   return !readonly ? (
-    <>
-      <div style={{ border: "1px solid #ccc", zIndex: 100, marginTop: "15px" }}>
-        <Toolbar
-          editor={editor}
-          defaultConfig={toolbarConfig}
-          mode="default"
-          style={{ borderBottom: "1px solid #ccc" }}
-        />
-        <Editor
-          defaultConfig={editorConfig}
-          value={html}
-          onCreated={setEditor}
-          onChange={(editor) => onChange(editor.getHtml())}
-          mode="default"
-          style={{ height: "500px" }}
-        />
-      </div>
-    </>
+    <div className={props.className} style={style}>
+      <Toolbar
+        editor={editor}
+        defaultConfig={toolbarConfig}
+        mode="default"
+        style={{ borderBottom: "1px solid #ccc" }}
+      />
+      <Editor
+        defaultConfig={editorConfig}
+        value={html}
+        onCreated={setEditor}
+        onChange={(editor) => onChange(editor.getHtml())}
+        mode="default"
+        style={{ height: "500px" }}
+      />
+    </div>
   ) : (
     <div dangerouslySetInnerHTML={{ __html: value }}></div>
   );

src/pages/dish/edit/Detail.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Row, Col, Divider, Typography, Image } from 'antd';
+
+const { Title, Paragraph } = Typography;
+
+export default (props) => {
+
+  const { dish = {} } = props;
+
+  return (
+    <Row gutter={24}>
+      <Col span={12}>
+        <Typography>
+          {/* <Title level={3}>
+            五花肉
+          </Title> */}
+          <Paragraph>
+            <div dangerouslySetInnerHTML={{ __html: dish.content }}  style={{ fontSize: '16px', lineHeight: '2em' }} />
+          </Paragraph>
+        </Typography>
+      </Col>
+      <Col span={12}>
+        <Image src={dish.thumb} />
+      </Col>
+    </Row>
+  )
+}

src/pages/dish/edit/Edit.jsx

@@ -0,0 +1,49 @@
+import { getStoreList, getStoreTypeList } from '@/services/stock';
+import { Alert, Row, Col } from 'antd';
+import { useEffect, useState, useMemo } from 'react';
+import Form from './Form';
+
+export default (props) => {
+  const { dish, onFinish } = props;
+
+  const [ingredientsList, setIngredientsList] = useState([]);
+  const [storeList, setStoreList] = useState([]);
+  const [storeTypeList, setStoreTypeList] = useState([]);
+  
+  const foodDict = useMemo(() => storeList.map(x => ({ label: x.name, value: x.id, })), [storeList]);
+  const Nutrition = useMemo(() => {
+    if (!ingredientsList.length
+      || !storeList.length
+      || !storeTypeList.length
+      ) return [];
+
+    return ingredientsList.map(x => storeList.filter(y => y.id === x)[0])
+      .map(x => storeTypeList.filter(y => y.id === x.typeId)[0].nutrition)
+      .map((it, inx) => (<p key={inx}>{it}</p>));
+  }, [ingredientsList, storeList, storeTypeList]);
+  
+  useEffect(() => {
+    getStoreList({ isDish: 1, pageSize: 9999 }).then((res) => {
+      setStoreList(res?.records || []);
+    });
+    getStoreTypeList({ isFood: 1, pageSize: 9999 }).then((res) => {
+      setStoreTypeList(res?.records || []);
+    });
+  }, []);
+
+  useEffect(() => {
+    const { ingredientsIdList } = dish || {};
+    setIngredientsList(ingredientsIdList || [])
+  }, [dish]);
+
+  return (
+    <Row gutter={48}>
+      <Col span={12}>
+        <Form dish={dish} onFinish={onFinish} foodDict={foodDict} onIngredientsChange={setIngredientsList} />         
+      </Col>
+      <Col span={12}>
+        <Alert message="营养元素" description={Nutrition} type="info" />
+      </Col>
+    </Row>
+  );
+};

src/pages/dish/edit/Form.jsx

@@ -0,0 +1,88 @@
+import { addDish } from '@/services/dish';
+import { ProForm, ProFormSelect, ProFormText, ProFormMoney } from '@ant-design/pro-components';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Row, Col, Space } from 'antd';
+import { useEffect, useRef, useState, useMemo } from 'react';
+import UploadFile from '@/components/UploadFile';
+import Wangeditor from "@/components/Wangeditor";
+import { floatMultiply, floatDivide } from "@/utils/float";
+
+export default (props) => {
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get('id');
+  const navigate = useNavigate();
+
+  const formRef = useRef();
+
+  useEffect(() => {
+    if (props.dish) {
+      formRef.current.setFieldsValue({ ...props.dish, price: floatDivide(props.dish.price, 100) });
+    }
+  }, [props.dish]);
+
+  const onFinish = async (values) => {
+    addDish({ ...values, price: floatMultiply(values.price, 100), id }).then((res) => {
+      props.onFinish(res);
+    });
+
+    return false;
+  };
+
+  return (
+    <ProForm
+      formRef={formRef}
+      layout={'horizontal'}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
+      onFinish={onFinish}
+      initialValues={{ type: '1', state: '1' }}
+      submitter={{
+        searchConfig: {
+          resetText: '返回',
+        },
+        onReset: () => navigate(-1),
+        render: (props, doms) => {
+          return (
+            <Row>
+              <Col span={8} offset={8}>
+                <Space>{doms}</Space>
+              </Col>
+            </Row>
+          );
+        },
+      }}
+    >
+      <ProFormText
+        name="name"
+        label="名称"
+        placeholder="请输入菜肴名称"
+        rules={[{ required: true, message: '请输入菜肴名称' }]}
+      />
+      <ProFormText
+        name="unit"
+        label="单位"
+        placeholder="请输入菜肴单位"
+        rules={[{ required: true, message: '请输入菜肴单位' }]}
+      />
+      <ProFormMoney
+        name="price"
+        label="价格"
+        rules={[{ required: true, message: '请输入菜肴价格' }]}
+      />
+      <ProFormSelect
+        mode="multiple"
+        name="ingredientsIdList"
+        label="食材"
+        placeholder="请选择包含食材"
+        options={props.foodDict}
+        onChange={props.onIngredientsChange}
+      />
+      <ProForm.Item name="thumb" label="图片">
+        <UploadFile preview={true} />
+      </ProForm.Item>
+      <ProForm.Item name="content" label="做法">
+        <Wangeditor></Wangeditor>
+      </ProForm.Item>
+    </ProForm>
+  );
+};

src/pages/dish/edit/index.jsx

@@ -1,115 +1,39 @@
-import { addDish, getDishById } from '@/services/dish';
-import { getStoreList } from '@/services/stock';
-import { PageContainer, ProForm, ProFormSelect, ProFormText, ProFormMoney, ProFormDigit } from '@ant-design/pro-components';
+import { getDishById } from '@/services/dish';
+import { PageContainer } from '@ant-design/pro-components';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Card, Col, message, Row, Space } from 'antd';
-import { useEffect, useRef, useState } from 'react';
-import { floatMultiply, floatDivide } from "@/utils/float";
+import { Alert, Card, Row, Col, message, Space, Button } from 'antd';
+import { useEffect, useRef, useState, useMemo } from 'react';
+import Detail from './Detail';
+import Edit from './Edit';
 
 export default (props) => {
   const [searchParams] = useSearchParams();
   const id = searchParams.get('id');
-  const [foodDict, setFoodDict] = useState([]);
+  const [dish, setDish] = useState();
+  const [isPreivw, setIsPreview] = useState(!!id);
   const navigate = useNavigate();
-
-  const formRef = useRef();
-  useEffect(() => {
-    getStoreList({ isDish: 1, pageSize: 9999 }).then((res) => {
-      setFoodDict(
-        res?.records?.map((x) => ({
-          label: x.name,
-          value: x.id,
-        })),
-      );
-    });
-  }, [id]);
-
+  
   useEffect(() => {
     if (id) {
       getDishById(id).then((res) => {
-        formRef.current.setFieldsValue({ ...res, price: floatDivide(res.price, 100) });
+        setDish(res);
       });
     }
   }, [id]);
 
-  const onFinish = async (values) => {
-    console.log(values, '===');
-
-    addDish({ ...values, price: floatMultiply(values.price, 100), id }).then((res) => {
-      // message.success('添加成功');
-      navigate(-1);
-    });
-
-    return false;
+  const onFinish = (values) => {
+    setDish(values);
+    // navigate(-1);
   };
 
   return (
     <PageContainer>
-      <Card>
-        <ProForm
-          formRef={formRef}
-          layout={'horizontal'}
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 16 }}
-          onFinish={onFinish}
-          initialValues={{ type: '1', state: '1' }}
-          submitter={{
-            searchConfig: {
-              resetText: '返回',
-            },
-            onReset: () => navigate(-1),
-            render: (props, doms) => {
-              return (
-                <Row>
-                  <Col span={8} offset={8}>
-                    <Space>{doms}</Space>
-                  </Col>
-                </Row>
-              );
-            },
-          }}
-        >
-          <ProFormText
-            name="name"
-            label="菜肴名称"
-            placeholder="请输入菜肴名称"
-            rules={[{ required: true, message: '请输入菜肴名称' }]}
-            width={460}
-          />
-          <ProFormText
-            name="unit"
-            label="菜肴单位"
-            placeholder="请输入菜肴单位"
-            rules={[{ required: true, message: '请输入菜肴单位' }]}
-            width={460}
-          />
-          <ProFormMoney
-            name="price"
-            label="价格"
-            rules={[{ required: true, message: '请输入菜肴价格' }]}
-            width={460}
-          />
-          <ProFormSelect
-            mode="multiple"
-            name="ingredientsIdList"
-            label="包含食材"
-            placeholder="请选择包含食材"
-            rules={[{ required: true, message: '请选择包含食材' }]}
-            width={460}
-            options={foodDict}
-          />
-          <ProFormDigit
-            label="元素"
-            name="calorie"
-            min={0}
-            width={460}
-            placeholder="卡路里"
-            fieldProps={{
-              addonAfter: '卡',
-              precision: '4'
-            }}
-          />
-        </ProForm>
+      <Card
+        title={(dish || {}).name}
+        extra={<Button type='link' disabled={!id} onClick={() => setIsPreview(!isPreivw)}>{ isPreivw ? '编辑' : '图文' }</Button>}>
+        {
+          isPreivw ? <Detail dish={dish} /> : <Edit dish={dish} onFinish={onFinish} />
+        }
       </Card>
     </PageContainer>
   );

src/pages/guaranteeTask/Edit/DishList.jsx

@@ -19,12 +19,12 @@ export default (props) => {
   const packageRef = useRef();
   const dishRef = useRef();
 
-  const calorie = useMemo(() => {
-    return list.reduce((acc, it) => {
-      const dish = dishRef.current.filterItem(it.dishId) || {};
-      return acc + dish.calorie || 0;
-    }, 0);
-  }, [list]);
+  // const calorie = useMemo(() => {
+  //   return list.reduce((acc, it) => {
+  //     const dish = dishRef.current.filterItem(it.dishId) || {};
+  //     return acc + dish.calorie || 0;
+  //   }, 0);
+  // }, [list]);
 
   const handlePackageSubmit = ({item, amount}) => {
     packageRef.current = item;
@@ -144,7 +144,7 @@ export default (props) => {
       </Col>
       <Col span={16}>
         <Card
-          title={`已选菜肴 共计${calorie}卡`}
+          title="已选菜肴"
           loading={loading}
           extra={<Button disabled={!dataSource} type='primary' loading={loading} onClick={onSubmit}>保存</Button>}
         >

src/pages/package/DishList.jsx

@@ -1,15 +1,23 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, List, Popconfirm, Select } from 'antd';
+import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Button, Modal, List, Popconfirm, Form, Select, message } from 'antd';
 import classNames from 'classnames';
+import useBool from '@/utils/hooks/useBool';
 import { getPackageDetailList, addPackageDetail, deletePackageDetail } from '@/services/package';
 import { getDishList } from '@/services/dish';
 
 const { Option } = Select;
+const defaultKind = 2;
 
-const Header = props => {
+const AddDish = props => {
   const { onChange } = props;
   const [data, setData] = useState([]);
-  const [value, setValue] = useState();
+  const [form] = Form.useForm();
+
+  const onFinish = (values) => {
+    const it = data.filter(x => x.id === values.dishId)[0] || {};
+    const dishKind = values.dishKind || defaultKind;
+    onChange({...it, dishKind});
+  };
 
   const handleSearch = (newValue) => {
     if (newValue) {
@@ -21,17 +29,10 @@ const Header = props => {
     }
   };
 
-  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>);
 
   const initList = () => {
-    getDishList({ pageNum: 1, pageSize: 10 }).then(res => {
+    getDishList({ pageNum: 1, pageSize: 20 }).then(res => {
       setData(res.records || []);
     });
   }
@@ -41,32 +42,48 @@ const Header = props => {
   }, [])
 
   return (
-    <Select
-      style={{ width: '100%' }}
-      allowClear
-      showSearch
-      value={value}
-      placeholder='请选择菜肴'
-      defaultActiveFirstOption={false}
-      showArrow={false}
-      filterOption={false}
-      onSearch={handleSearch}
-      onChange={handleChange}
-      notFoundContent={null}
-      onClear={initList}
-    >
-      {options}
-    </Select>
+    <Form form={form} layout="vertical" onFinish={onFinish}>
+      <Form.Item name="dishId" label="选择菜肴" rules={[{ required: true, message: '请选择菜肴' }]}>
+        <Select
+          allowClear
+          showSearch
+          placeholder='请选择菜肴, 可输入汉字搜索'
+          defaultActiveFirstOption={false}
+          showArrow={false}
+          filterOption={false}
+          onSearch={handleSearch}
+          // onChange={handleChange}
+          notFoundContent={null}
+          onClear={initList}
+        >
+          {options}
+        </Select>
+      </Form.Item>
+      <Form.Item name="dishKind" label="菜肴类型">
+        <Select allowClear defaultValue={defaultKind}>
+          <Select.Option value={1}>主食</Select.Option>
+          <Select.Option value={2}>菜肴</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item>
+        <Button type='primary' htmlType='sumbit'>确定</Button>
+      </Form.Item>
+    </Form>
   );
 }
 
+const kindDict = {
+  '1': '主食',
+  '2': '菜肴',
+}
 
-export default (props) => {
+export default forwardRef((props, ref) => {
   const { current, setCurrent } = props;
 
   const packageId = (current || {}).id;
 
   const [loading, setLoading] = useState(false);
+  const [open, setVisible, hide ] = useBool();
   const [list, setList] = useState([]);
   const [detail, setDetail] = useState({});
   const listRef = useRef();
@@ -74,10 +91,11 @@ export default (props) => {
 
   const onAdd = item => {
     setLoading(true);
-    addPackageDetail({ packageId, dishId: item.id }).then(res => {
+    addPackageDetail({ ...item, packageId, dishId: item.id }).then(res => {
       setLoading(false);
       const newList = listRef.current.concat(res);
       setList(newList);
+      hide();
     }).catch(() => {
       setLoading(false);
     });
@@ -108,30 +126,44 @@ export default (props) => {
 
   }, [packageId]);
 
+  useImperativeHandle(ref, () => ({
+    new: () => setVisible(),
+  }));
+
   return (
-    <List
-      style={{ minHeight: '300px' }}
-      header={<Header onChange={onAdd} />}
-      bordered
-      loading={loading}
-      dataSource={list}
-      renderItem={item => (
-        <List.Item
-          className={classNames({ active: detail.id === item.id })}
-          onClick={() => setDetail(item)}
-          actions={[
-            <Popconfirm
-              key="delete"
-              title="确认删除?"
-              onConfirm={() => onDelete(item)}
-              >
-              <a href="#">删除</a>
-            </Popconfirm>
-          ]}
-        >
-          {item.name}
-        </List.Item>
-      )}
-    />
+    <>
+      <List
+        style={{ minHeight: '300px' }}
+        loading={loading}
+        dataSource={list}
+        renderItem={item => (
+          <List.Item
+            className={classNames({ active: detail.id === item.id })}
+            onClick={() => setDetail(item)}
+            actions={[
+              <Popconfirm
+                key="delete"
+                title="确认删除?"
+                onConfirm={() => onDelete(item)}
+                >
+                <a href="#">删除</a>
+              </Popconfirm>
+            ]}
+          >
+            {`【${kindDict[`${item.dishKind}`]}】${item.name}`}
+          </List.Item>
+        )}
+      />
+      <Modal
+        title="添加菜肴"
+        open={open}
+        onCancel={hide}
+        maskClosable={false}
+        footer={null}
+        destroyOnClose
+      >
+        <AddDish onChange={onAdd} />
+      </Modal>
+    </>
   );
-}
+})

src/pages/package/List.jsx

@@ -1,12 +1,15 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Row, Col, Button, List, Popconfirm, Input } from 'antd';
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Modal, Button, List, Popconfirm, Input } from 'antd';
 import classNames from 'classnames';
+import BasicForm from './BasicForm';
 import { getPackageList, deletePackage } from '@/services/package';
+import useBool from '@/utils/hooks/useBool';
 
-export default (props) => {
+export default forwardRef((props, ref) => {
   const { current, setCurrent } = props;
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
+  const [loading, startLoading, stopLoading] = useBool();
+  const [open, setVisible, hide] = useBool();
+  const [hasMore, setHasMore] = useState(false);
   const [filter, setFilter] = useState({ pageNum: 1, pageSize: 10, total: 0 });
   const [list, setList] = useState([]);
   const listRef = useRef();
@@ -40,10 +43,15 @@ export default (props) => {
     })
   }
 
+  const onEdit = (val = {}) => {
+    setCurrent(val);
+    setVisible();
+  }
+
   const onDelete = (item) => {
-    setLoading(true);
+    startLoading();
     deletePackage(item.id).then(res => {
-      setLoading(false);
+      stopLoading();
 
       const newList = listRef.current.filter(x => x.id !== item.id);
       setList(newList);
@@ -51,14 +59,19 @@ export default (props) => {
         setCurrent(newList[0] || {});
       }
     }).catch(() => {
-      setLoading(false);
+      stopLoading();
     });
   };
 
+  const handleForm = (val) => {
+    setCurrent(val);
+    hide()
+  }
+
   useEffect(() => {
-    setLoading(true);
+    startLoading();
     getPackageList(filter).then(res => {
-      setLoading(false);
+      stopLoading();
 
       const { records = [], current, total, pages } = res
 
@@ -71,7 +84,7 @@ export default (props) => {
 
       setHasMore(current < pages)
     }).catch(() => {
-      setLoading(false);
+      stopLoading();
     });
   }, [filter]);
 
@@ -95,16 +108,16 @@ export default (props) => {
     setList(newList);
   }, [current])
 
+  useImperativeHandle(ref, () => ({
+    new: () => onEdit(),
+  }));
+
   return (
+    <>
     <List
       style={{ minHeight: '600px' }}
       bordered
-      header={
-        <Input.Group compact>
-          <Input.Search allowClear placeholder="请输入筛选名称" onSearch={onSearch} style={{ width: 'calc(100% - 60px)' }} />
-          <Button type='link' onClick={() => setCurrent({})} >新增</Button>
-        </Input.Group>
-      }
+      header={<Input.Search allowClear placeholder="请输入筛选名称" onSearch={onSearch} />}
       dataSource={list}
       loading={loading}
       loadMore={loadMore}
@@ -113,6 +126,7 @@ export default (props) => {
           className={classNames({ active: current.id === item.id })}
           onClick={() => setCurrent(item)}
           actions={[
+            <Button key="edit" type='link' onClick={() => onEdit(item)}>编辑</Button>,
             <Popconfirm
               key="delete"
               title="确认删除?"
@@ -126,5 +140,9 @@ export default (props) => {
         </List.Item>
       )}
     />
+    <Modal open={open} title="套餐维护" footer={null} onCancel={hide} maskClosable={false} >
+      <BasicForm current={current} onChange={handleForm}></BasicForm>
+    </Modal>
+    </>
   )
-}
+})

src/pages/package/index.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { PageContainer } from '@ant-design/pro-components';
-import { Row, Col, Card } from 'antd';
+import { Button, Row, Col, Card } from 'antd';
 import List from './List';
 import BasicForm from './BasicForm';
 import DishList from './DishList';
@@ -8,23 +8,25 @@ import DishList from './DishList';
 import './style.less';
 
 export default (props) => {
-  const [current, setCurrent] = useState({});
+  const [current, setCurrent] = React.useState({});
+  const pkgRef = React.useRef();
+  const dishRef = React.useRef();
+
+  const onAdd = () => pkgRef.current.new();
+  const onDishAdd = () => dishRef.current.new();
 
   return (
-    <PageContainer>
-      <Card>
-        <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: '24px' }}>
-              <DishList current={current} />
-            </div>
-          </Col>
-        </Row>
-      </Card>
-    </PageContainer>
+    <Row gutter={24}>
+      <Col span={12}>
+        <Card title="套餐列表" extra={<Button type='primary' onClick={onAdd}>新增</Button>}>
+          <List ref={pkgRef} current={current} setCurrent={setCurrent}/>
+        </Card>
+      </Col>
+      <Col span={12}>
+        <Card title={`${current.name || '套餐'} 明细`} extra={<Button onClick={onDishAdd}>新增</Button>}>
+          <DishList current={current} ref={dishRef} />
+        </Card>
+      </Col>
+    </Row>
   )
 }

src/pages/stockClassification/edit/index.jsx

@@ -1,9 +1,11 @@
 import { addStoreType, getStoreTypeById, updataStoreType } from '@/services/stock';
-import { PageContainer, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
+import { PageContainer, ProForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Card, Col, message, Row, Space } from 'antd';
 import { useEffect, useRef } from 'react';
 
+const width = 540;
+
 export default (props) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const id = searchParams.get('id');
@@ -44,7 +46,7 @@ export default (props) => {
         <ProForm
           formRef={formRef}
           layout={'horizontal'}
-          labelCol={{ span: 8 }}
+          labelCol={{ span: 4 }}
           wrapperCol={{ span: 16 }}
           onFinish={onFinish}
           submitter={{
@@ -67,7 +69,7 @@ export default (props) => {
             name="name"
             label="分类名称"
             placeholder="请输入名称"
-            width={460}
+            width={width}
             allowClear={false}
             rules={[{ required: true, message: '请输入名称' }]}
           />
@@ -79,7 +81,7 @@ export default (props) => {
               { label: '否', value: 0 },
             ]}
             placeholder="请选择"
-            width={460}
+            width={width}
             allowClear={false}
             rules={[{ required: true, message: '请选择是否食材' }]}
           />
@@ -91,10 +93,17 @@ export default (props) => {
               { label: '否', value: 0 },
             ]}
             placeholder="请选择"
-            width={460}
+            width={width}
             allowClear={false}
             rules={[{ required: true, message: '请选择是否设备' }]}
           />
+          <ProFormTextArea
+            name="nutrition"
+            label="营养元素"
+            placeholder="请输入名称"
+            width={width}
+            allowClear={true}
+          />
         </ProForm>
       </Card>
     </PageContainer>