.

src/pages/ContentManagementSystem/BannerClassification/BannerClassificationEdit/index.jsx

-import { Input, Card, Select, Button, message, Upload, Modal } from "antd"
-import { useEffect, useState } from 'react'
-import { Form } from "antd";
+import { Input, Card, Select, Button, message, Upload, Modal } from 'antd';
+import { useEffect, useState } from 'react';
+import { Form } from 'antd';
 import { history } from 'umi';
-import ProCard from '@ant-design/pro-card'
-import { UploadOutlined } from '@ant-design/icons';
+import ProCard from '@ant-design/pro-card';
+import { UploadImage } from '@/components/Upload';
+import ExtendContent from '@/components/ExtendContent';
 
-const { Option } = Select
+const { Option } = Select;
 const goBack = () => {
-  history.goBack()
-}
-const FormItem = Form.Item
+  history.goBack();
+};
+const FormItem = Form.Item;
 export default (props) => {
-
-  const [form] = Form.useForm()
-  const [loading, setLoading] = useState(false)
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [image, setImage] = useState();
 
   const formItemLayout = {
     //布局
     wrapperCol: { span: 14 },
   };
 
-  const Submit = values => {
+  const Submit = (values) => {
     message.success(`成功成功成功`);
-    console.log("🚀 ~ file: index.jsx ~ line 21 ~ values", values)
-
+    console.log('🚀 ~ file: index.jsx ~ line 21 ~ values', values);
   };
 
   return (
-    <Card >
-      <ProCard tabs={{ type: 'card' }} style={{ marginTop: '16px' }}
-      >
+    <Card>
+      <ProCard tabs={{ type: 'card' }} style={{ marginTop: '16px' }}>
         <ProCard.TabPane key={1} tab="资讯管理">
-          <Form {...formItemLayout} onFinish={Submit} form={form} >
-            <FormItem label="Banner图集" name="user" rules={[{ required: true, message: '请选择' }]}>
-              <Upload {...props}>
-                <Button icon={<UploadOutlined />}>Upload</Button>
-              </Upload>
-            </FormItem>
-            <FormItem label="资讯分类名称" name="shopName" rules={[{ required: true, message: '请输入' }]}>
+          <Form {...formItemLayout} onFinish={Submit} form={form}>
+            <FormItem label="名称" name="title" rules={[{ required: true, message: '请输入' }]}>
               <Input placeholder="请输入" style={{ width: '350px' }} />
             </FormItem>
-            <FormItem label="资讯内容" name="s1hopName" rules={[{ required: true, message: '请输入' }]}>
-              <Input placeholder="请输入" style={{ width: '350px' }} />
+            <FormItem label="图片" name="thumb" rules={[{ required: true, message: '请选择' }]}>
+              <UploadImage value={image} onChange={setImage} />
+            </FormItem>
+            <FormItem label="位置" name="position" rules={[{ required: true, message: '请选择' }]}>
+              <Select>
+                <Option value="index">首屏</Option>
+                <Option value="banner">banner页面</Option>
+              </Select>
+            </FormItem>
+            <FormItem label="详细信息" colon={false}>
+              <ExtendContent
+                targetType="tourist"
+                targetId={'66'}
+                onCancel={() => history.goBack()}
+              />
             </FormItem>
-            <FormItem label=" " colon={false} >
-              <Button type='default' onClick={() => goBack()} >返回</Button>
-              <Button type='primary' loading={loading} htmlType="Submit" style={{ marginLeft: '4em' }}>保存</Button>
+            <FormItem label=" " colon={false}>
+              <Button type="default" onClick={() => goBack()}>
+                返回
+              </Button>
+              <Button
+                type="primary"
+                loading={loading}
+                htmlType="Submit"
+                style={{ marginLeft: '4em' }}
+              >
+                保存
+              </Button>
             </FormItem>
           </Form>
         </ProCard.TabPane>
       </ProCard>
     </Card>
-  )
-}
+  );
+};

src/pages/ContentManagementSystem/BannerClassification/index.jsx

 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable, { TableDropdown } from '@ant-design/pro-table';
 
-
 export default (props) => {
   const dataSource = [
     {
       age: 32,
       zz: '西湖区湖底公园1号',
     },
-
   ];
 
-
   // 测试内容👆-------------------------
 
   const actionRef = useRef();
   const gotoDetail = (id) => {
-    history.push(`BannerClassification/BannerClassificationEdit`)
-  }
-
+    history.push(`BannerClassification/BannerClassificationEdit`);
+  };
 
   const handleDelete = (e) => {
-    deleteNote(e.noteId).then(res => {
+    deleteNote(e.noteId).then((res) => {
       message.success('删除成功');
       actionRef.current.reload();
-    })
-  }
+    });
+  };
 
   const handleOK = (record, data) => {
-    const titleCourse = record.status ? '您确定要禁用该用户吗? 禁用后该用户不能在后台登陆!' : '您确定要启用该用户吗? 启用后该用户将允许在后台登陆!';
+    const titleCourse = record.status
+      ? '您确定要禁用该用户吗? 禁用后该用户不能在后台登陆!'
+      : '您确定要启用该用户吗? 启用后该用户将允许在后台登陆!';
     Modal.confirm({
       title: titleCourse,
       okText: '确认',
       cancelText: '取消',
-      onOk () {
-        publishNote(record.noteId, record.status ? 'off' : 'on').then(res => {
+      onOk() {
+        publishNote(record.noteId, record.status ? 'off' : 'on').then((res) => {
           message.success('操作成功');
-          actionRef.current.reload()
-        })
+          actionRef.current.reload();
+        });
       },
     });
-  }
+  };
   const actions = () => [
-    <Button key='add' type="primary" icon={<PlusOutlined />} onClick={() => gotoDetail()}>新增</Button>,
-  ]
+    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => gotoDetail()}>
+      新增
+    </Button>,
+  ];
   const columns = [
     {
-      title: 'Banner图片',
-      key: 'zz',
-      dataIndex: 'zz',
+      title: '名称',
+      key: 'title',
+      dataIndex: 'title',
+      search: false,
+    },
+    {
+      title: '图片',
+      key: 'thumb',
+      dataIndex: 'thumb',
       search: false,
       render: (t) => <img width={110} src={t} alt="" />,
-
     },
     {
-      title: '资讯详情',
-      dataIndex: 'name',
-      key: 'name',
+      title: '位置',
+      key: 'position',
+      dataIndex: 'position',
       search: false,
     },
     {
       valueEnum: {
         0: { text: '已发布', status: 'Success' },
         1: { text: '未发布', status: 'Error' },
-      }
+      },
     },
 
     {
       dataIndex: 'createdAt',
       valueType: 'date',
       // render: (t) => formatterTime(t),
-      sorter: (a, b) => a.createdAt - b.createdAt,//时间排序
+      sorter: (a, b) => a.createdAt - b.createdAt, //时间排序
     },
     {
       title: '操作',
       ellipsis: true,
       width: 200,
       render: (_, record) => [
-        <Link key={2} to={`BannerClassification/BannerClassificationEdit`}>编辑</Link>,
+        <Link key={2} to={`BannerClassification/BannerClassificationEdit`}>
+          编辑
+        </Link>,
         <Popconfirm
           key={3}
           title="您是否确认删除 ?"
           okText="确定"
           cancelText="取消"
         >
-          <a href="#"  >删除</a>
+          <a href="#">删除</a>
         </Popconfirm>,
-      ]
+      ],
     },
-  ]
+  ];
 
   return (
     <PageHeaderWrapper>
         actionRef={actionRef}
       />
     </PageHeaderWrapper>
-  )
-}
+  );
+};

src/pages/ContentManagementSystem/InformationList/InformationListEdit/index.jsx

-import { Input, Card, Select, Button, message } from 'antd';
+import { Input, Card, Select, Button, Form, message } from 'antd';
 import { useEffect, useState } from 'react';
-import { Form } from 'antd';
 import { history } from 'umi';
 import ProCard from '@ant-design/pro-card';
-// import ModalImage from './Modalimage';
+import ExtendContent from '@/components/ExtendContent';
+import { UploadImage } from '@/components/Upload';
 
 const { Option } = Select;
 const goBack = () => {
 export default (props) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
+  const [image, setImage] = useState();
 
   const formItemLayout = {
     //布局
               <Input placeholder="请输入" style={{ width: '350px' }} />
             </FormItem>
             <FormItem label="资讯封面" name="thumb" rules={[{ required: true, message: '请输入' }]}>
-              {/* <ModalImage
-                sortVale={sortVale}
-                visible={visible}
-                value={content}
-                onChange={handleChange}
-                onCancel={handleClose}
-              /> */}
+              <UploadImage value={image} onChange={setImage} />
+            </FormItem>
+            <FormItem label="详细信息" colon={false}>
+              <ExtendContent
+                targetType="tourist"
+                targetId={'66'}
+                onCancel={() => history.goBack()}
+              />
             </FormItem>
             <FormItem label=" " colon={false}>
               <Button type="default" onClick={() => goBack()}>