功能：租赁商品新增

src/pages/mallManage/rentGoods/rentAddOrEdit/components/rentAttr/index.scss

+.rent-attr{
+  &-title{
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 40px;
+  }
+}

src/pages/mallManage/rentGoods/rentAddOrEdit/components/rentAttr/index.tsx

+import './index.scss';
+import { Button, Cascader, Form, Radio, Table } from 'antd';
+import EditableCell from '~/components/EditableCell';
+import { useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+type EditableTableProps = Parameters<typeof Table>[0];
+type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
+
+const RentAttr = () => {
+  const typeList = [
+    {
+      label: '航拍无人机',
+      value: 1,
+    },
+    {
+      label: '行业无人机',
+      value: 2,
+    },
+    {
+      label: '挂载',
+      value: 3,
+    },
+    {
+      label: '配件',
+      value: 4,
+    },
+  ];
+
+  const attrTableColumns: (ColumnTypes[number] & {
+    editable?: boolean;
+    dataIndex?: string;
+    inputType?: string;
+    rules?: any;
+    maxLength?: number;
+  })[] = [
+    {
+      title: '参数名称',
+      dataIndex: '',
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '参数值',
+      dataIndex: '',
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '操作',
+      dataIndex: '',
+      render: () => <Button icon={<PlusOutlined />}></Button>,
+    },
+  ];
+  const columns = attrTableColumns.map((col) => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: (record: any) => ({
+        record,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: col.editable,
+        inputType: col.inputType,
+        rules: col.rules,
+      }),
+    };
+  });
+  const [parameterTableData, setParameterTableData] = useState<any>([{ id: 1 }]);
+
+  return (
+    <div className='rent-attr'>
+      <div className='rent-attr-title'>商品属性</div>
+      <Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
+        <Form.Item label='商品类型'>
+          <Radio.Group>
+            {typeList.map((v) => (
+              <Radio key={v.value} value={v.value}>
+                {v.label}
+              </Radio>
+            ))}
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label='商品型号'>
+          <Cascader placeholder='请选择商品型号' />
+        </Form.Item>
+        <Form.Item label='商品参数'>
+          <Form>
+            <Table
+              columns={columns as ColumnTypes}
+              components={{
+                body: {
+                  cell: EditableCell,
+                },
+              }}
+              dataSource={parameterTableData}
+              bordered
+              rowKey='id'
+              pagination={false}
+            ></Table>
+          </Form>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+export default RentAttr;

src/pages/mallManage/rentGoods/rentAddOrEdit/components/rentInfo/index.scss

+.rent-info{
+  &-title{
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 40px;
+  }
+}

src/pages/mallManage/rentGoods/rentAddOrEdit/components/rentInfo/index.tsx

+import { Form, Input, Radio } from 'antd';
+import './index.scss';
+
+const RentInfo = () => {
+  const qualityList = [
+    {
+      label: '全新',
+      value: 0,
+    },
+    {
+      label: '99新',
+      value: 1,
+    },
+    {
+      label: '95新',
+      value: 2,
+    },
+    {
+      label: '90新',
+      value: 3,
+    },
+    {
+      label: '80新',
+      value: 4,
+    },
+  ];
+
+  return (
+    <div className='rent-info'>
+      <div className='rent-info-title'>商品信息</div>
+      <Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
+        <Form.Item label='商品标题'>
+          <Input placeholder='请输入商品标题' />
+        </Form.Item>
+        <Form.Item label='商品卖点'>
+          <Input placeholder='请输入商品卖点' />
+        </Form.Item>
+        <Form.Item label='商品成新'>
+          <Radio.Group>
+            {qualityList.map((v, index) => (
+              <Radio value={v.value} key={index}>
+                {v.label}
+              </Radio>
+            ))}
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label='商品状态'>
+          <Radio.Group>
+            <Radio value={1}>上架</Radio>
+            <Radio value={0}>下架</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+export default RentInfo;

src/pages/mallManage/rentGoods/rentAddOrEdit/index.tsx

+import RentInfo from './components/rentInfo';
+import RentAttr from './components/rentAttr';
+const RentAddOrEdit = () => {
+  return (
+    <div className='rent-create-edit'>
+      {/*商品信息*/}
+      <RentInfo />
+      {/*商品属性*/}
+      <RentAttr />
+    </div>
+  );
+};
+export default RentAddOrEdit;

src/pages/mallManage/rentGoods/rentList/index.tsx

 import SearchBox, { searchColumns as searchColumnsType } from '~/components/search-box';
 import { Button, Card, Table } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import {
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
 import { useState } from 'react';
 import { ColumnsType } from 'antd/es/table';
+import { useNavigate } from 'react-router-dom';
 
 const RentList = () => {
+  const navigate = useNavigate();
   const searchColumns: searchColumnsType[] = [
     {
       label: '商品名称',
@@ -70,25 +77,52 @@ const RentList = () => {
     {
       title: '操作',
       align: 'center',
+      width: '20%',
+      render: () => (
+        <>
+          <Button type='link'>编辑</Button>
+          <Button type='link'>详情</Button>
+          <Button type='link'>上架</Button>
+          <Button type='link'>下架</Button>
+          <Button type='link' danger>
+            删除
+          </Button>
+        </>
+      ),
     },
   ];
-  const [tableData, setTableData] = useState<any>([{ id: 1 }]);
+  const [tableData] = useState<any>([{ id: 1 }]);
 
   const onTabChange = (key: string) => {
     setActiveTabKey(key);
   };
+  //新增，编辑租赁商品
+  const addOrEditClick = () => {
+    navigate({ pathname: '/mallManage/rentGoods/add' });
+  };
 
   return (
     <div className='rent-list'>
       <SearchBox
         search={searchColumns}
         child={
-          <Button icon={<PlusOutlined />} type='primary'>
+          <Button icon={<PlusOutlined />} type='primary' onClick={addOrEditClick}>
             新增商品
           </Button>
         }
       />
       <Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
+        <div className='table-operate' style={{ marginBottom: '10px' }}>
+          <Button type='primary' icon={<ArrowUpOutlined />} style={{ marginRight: '10px' }}>
+            批量上架
+          </Button>
+          <Button type='primary' icon={<ArrowDownOutlined />} style={{ marginRight: '10px' }}>
+            批量下架
+          </Button>
+          <Button type='primary' danger icon={<DeleteOutlined />}>
+            批量删除
+          </Button>
+        </div>
         <Table bordered columns={tableColumns} rowKey='id' dataSource={tableData} />
       </Card>
     </div>

src/router/router.tsx

@@ -97,7 +97,7 @@ const ServiceIntroduceView = React.lazy(
 ); //服务介绍
 const RentListView = React.lazy(() => import('~/pages/mallManage/rentGoods/rentList')); //租赁列表
 const RentAddOrEditOrDetailView = React.lazy(
-  () => import('~/pages/mallManage/rentGoods/rentAddOrEditOrDetail'),
+  () => import('~/pages/mallManage/rentGoods/rentAddOrEdit'),
 ); //租赁新增、编辑、详情
 const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品
 const MallAddOrEditOrDetailView = React.lazy(