功能：租赁联调（100%）

src/api/interface/commonType.ts

@@ -177,5 +177,4 @@ type locationType = {
   level: number;
   childInfo: locationType[];
 };
-
 export type getSecondDistrictInfoType = InterFunction<any, locationType[]>;

src/api/interface/goodsType.ts

@@ -93,8 +93,6 @@ export type detailGoodsType = InterFunction<
     id: number;
   }
 >;
-//商品-其它服务列表
-export type otherServiceType = InterFunction<any, { id: number; saleServiceName: string }[]>;
 //商品-规格单位
 export type skuUnitType = InterFunction<any, { id: number; unitName: string }[]>;
 //商品-批量上下架

src/api/interface/rentManageType.ts

@@ -48,22 +48,22 @@ export type addRentGoodsType = InterFunction<
     deviceModeId: number;
     leasePartsList: { name: string; number: number; price: number }[];
     level: number;
-    logisticsCompany: number;
+    logisticsCompany: string;
     maxLeaseTerm: number;
     minLeaseTerm: number;
     modeOfDelivery: number;
     priceStock: {
       cashPledge: number;
-      maxDaysRental: number;
-      ninetyDaysRental: number;
+      maxDaysRental?: number;
+      ninetyDaysRental?: number;
       productSpec: string;
-      sevenDaysRental: number;
-      showPrice: number;
-      skuImage: string;
-      stock: number;
+      sevenDaysRental?: number;
+      showPrice?: number;
+      skuImage?: string;
+      stock?: number;
       stockOut: number;
-      thirtyDaysRental: number;
-      threeDaysRental: number;
+      thirtyDaysRental?: number;
+      threeDaysRental?: number;
     }[];
     productDetails: string;
     productParam: string;
@@ -78,5 +78,108 @@ export type addRentGoodsType = InterFunction<
   },
   any
 >;
+//租赁商品-列表
+type rentGoodsType = {
+  brandInfoId: number;
+  deviceModeId: number;
+  leasePartsList: { id: number; name: string; number: number; price: number }[];
+  level: number;
+  logisticsCompany: string;
+  maxLeaseTerm: number;
+  minLeaseTerm: number;
+  modeOfDelivery: number;
+  priceStock: {
+    cashPledge: number;
+    maxDaysRental?: number;
+    ninetyDaysRental?: number;
+    productSpec: string;
+    sevenDaysRental?: number;
+    showPrice?: number;
+    skuImage?: string;
+    stock?: number;
+    stockOut: number;
+    thirtyDaysRental?: number;
+    threeDaysRental?: number;
+    id: number;
+  }[];
+  productDetails: string;
+  productParam: string;
+  productTypeId: number;
+  resourcesList: { id: number; type: number; url: string }[];
+  returnAddress: number;
+  sellingPoint: string;
+  shelfStatus: number;
+  shipAddress: number;
+  tradeName: string;
+  specAttrList: {
+    id: number;
+    specName: string;
+    specValuesList: { specName: string; id: number }[];
+  }[];
+  id: number;
+  createTime: string;
+};
+export type leaseGoodsListType = InterItemFunction<
+  {
+    brandInfoId?: number;
+    districtCode?: number;
+    productTypeId?: number;
+    shelfStatus?: number;
+    tradeName?: string;
+  },
+  rentGoodsType[]
+>;
+//租赁-商品-编辑
+export type editLeaseGoodsType = InterFunction<
+  {
+    brandInfoId: number;
+    deviceModeId: number;
+    leasePartsList: { id?: number; name: string; number: number; price: number }[];
+    level: number;
+    logisticsCompany: string;
+    maxLeaseTerm: number;
+    minLeaseTerm: number;
+    modeOfDelivery: number;
+    priceStock: {
+      cashPledge: number;
+      maxDaysRental?: number;
+      ninetyDaysRental?: number;
+      productSpec: string;
+      sevenDaysRental?: number;
+      showPrice?: number;
+      skuImage?: string;
+      stock?: number;
+      stockOut: number;
+      thirtyDaysRental?: number;
+      threeDaysRental?: number;
+      id?: number;
+    }[];
+    productDetails: string;
+    productParam: string;
+    productTypeId: number;
+    resourcesList: { type: number; url: string }[];
+    returnAddress: number;
+    sellingPoint: string;
+    shelfStatus: number;
+    shipAddress: number;
+    tradeName: string;
+    specAttrList: {
+      id: number;
+      specName: string;
+      specValuesList: { id: number; specName: string }[];
+    }[];
+    id: number;
+  },
+  any
+>;
+//租赁-商品-详情
+export type leaseGoodsDetailsType = InterFunction<{ id: number }, rentGoodsType>;
 //租赁-商品-租期信息
 export type leaseTermInfoType = InterFunction<any, { id: number; leaseDate: string }[]>;
+//租赁-商品-物流-配送方式
+export type otherServiceType = InterFunction<any, { id: number; saleServiceName: string }[]>;
+
+//租赁-商品-上下架-批量
+export type batchOnShelfOrTakeDownType = InterFunction<{ goodsIds: number[]; status: number }, any>;
+//租赁-商品-删除-批量
+export type batchRemoveWareInfoType = InterFunction<number[], any>;

src/api/interface/systemManageType.ts

@@ -299,3 +299,44 @@ export type listMenuInfoType = InterFunction<any, menType>;
 export type listRoleMenuInfoType = InterFunction<{ roleId: number }, any>;
 //账号权限-修改角色菜单权限
 export type updateRoleMenuInfoType = InterFunction<{ menuInfoIds: number[]; roleId: number }, any>;
+
+//地址管理-列表
+export type addressListType = InterFunction<
+  any,
+  {
+    takeAddress: string;
+    takeName: string;
+    takePhone: string;
+    takeRegion: string;
+    type: number;
+    id: number;
+    districtCode: string;
+  }[]
+>;
+//地址管理-添加地址
+export type addressInsetType = InterFunction<
+  {
+    takeAddress: string;
+    takeName: string;
+    takePhone: string;
+    takeRegion: string;
+    type: number;
+    districtCode: string;
+  },
+  any
+>;
+//地址管理-编辑地址
+export type editAddressType = InterFunction<
+  {
+    id?: number;
+    takeAddress: string;
+    takeName: string;
+    takePhone: string;
+    takeRegion: string;
+    type: number;
+    districtCode: string;
+  },
+  any
+>;
+//地址管理-删除地址
+export type deleteAddressType = InterFunction<{ id: number }, any>;

src/api/modules/goodsAPI.ts

@@ -10,7 +10,6 @@ import {
   listGoodsType,
   listPageGoodsInfoType,
   mallGoodsDetailsType,
-  otherServiceType,
   removeMallGoodsType,
   skuUnitType,
   upOrDownShelfType,
@@ -38,10 +37,6 @@ class GoodsAPI {
   static getSkuUnit: skuUnitType = () => {
     return axios.get('/pms/mall/goods/getSkuUnit');
   };
-  //  商品-其它服务列表
-  static getOtherServiceList: otherServiceType = () => {
-    return axios.get('/pms/goods/listOtherService');
-  };
   //  商品-批量上下架
   static batchOnShelfOrTakeDown: batchOnShelfOrTakeDownType = (data) => {
     return axios.post('/pms/goods/batchOnShelfOrTakeDown', data);

src/api/modules/rentManageAPI.ts

@@ -2,16 +2,22 @@ import {
   addRentGoodsType,
   addRentModeType,
   addType,
+  batchRemoveWareInfoType,
   editBrandInfoType,
+  editLeaseGoodsType,
   getTypeListType,
+  leaseGoodsDetailsType,
+  leaseGoodsListType,
   leaseTermInfoType,
   listBrandInfoType,
+  otherServiceType,
   rentMakeAddType,
   rentModeListType,
   rentTypeEditType,
   rentTypeRemoveType,
 } from '~/api/interface/rentManageType';
 import axios from '../request';
+import { batchOnShelfOrTakeDownType } from '~/api/interface/goodsType';
 
 export class RentManageAPI {
   //租赁-类型-新增
@@ -43,7 +49,26 @@ export class RentManageAPI {
   //  租赁-商品-新增
   static addRentGoods: addRentGoodsType = (data) =>
     axios.post('/pms/lease/goods/addLeaseGoods', data);
+  //租赁-商品-列表
+  static getLeaseGoodsList: leaseGoodsListType = (data) =>
+    axios.post('/pms/lease/goods/leaseGoodsList', data);
+  //租赁-商品-编辑
+  static editLeaseGoods: editLeaseGoodsType = (data) =>
+    axios.post('/pms/lease/goods/editLeaseGoods', data);
+  //租赁-商品-详情
+  static getLeaseGoodsDetails: leaseGoodsDetailsType = (params) =>
+    axios.get('/pms/lease/goods/leaseGoodsDetails', { params });
   //  租赁-商品-租期信息
   static getLeaseTermInfo: leaseTermInfoType = () =>
     axios.post('/pms/lease/goods/getLeaseTermInfo');
+  //租赁-商品-上下架-批量
+  static batchOnShelfOrTakeDown: batchOnShelfOrTakeDownType = (data) =>
+    axios.post('/pms/lease/goods/batchOnShelfOrTakeDown', data);
+  ////租赁-商品-删除-批量
+  static batchRemoveWareInfo: batchRemoveWareInfoType = (data) =>
+    axios.post('/pms/lease/goods/batchRemoveWareInfo', data);
+  //  商品-其它服务列表
+  static getOtherServiceList: otherServiceType = () => {
+    return axios.get('/pms/goods/listOtherService');
+  };
 }

src/api/modules/systemManage.ts

 import {
+  addressInsetType,
+  addressListType,
   bindingCompanyMemberType,
+  deleteAddressType,
   deleteRoleInfoType,
+  editAddressType,
   getCompanyInfoByIdType,
   getSecondDistrictInfo,
   insertBAccountType,
@@ -104,4 +108,15 @@ export class SystemManageAPI {
   //账号权限-修改角色菜单权限
   static updateRoleMenuInfo: updateRoleMenuInfoType = (data) =>
     axios.post('/userapp/role/updateRoleMenuInfo', data);
+
+  //  地址管理-新增
+  static addressInset: addressInsetType = (data) => axios.post('/oms/user-address/insert', data);
+  //  地址管理-列表
+  static getAddressList: addressListType = (data) =>
+    axios.post('/oms/user-address/selectList', data);
+  //  地址管理-编辑
+  static editAddress: editAddressType = (data) => axios.post('/oms/user-address/update', data);
+  //  地址管理-删除
+  static deleteAddress: deleteAddressType = (params) =>
+    axios.get('/oms/user-address/deleteById', { params });
 }

src/components/EditableCell/index.tsx

-import { Form, InputNumber, Input, Select, Radio } from 'antd';
+import { Form, InputNumber, Input, Select, Radio, Switch } from 'antd';
 import React from 'react';
 import { Uploader } from '~/components/uploader';
 import { UploadOutlined } from '@ant-design/icons';
@@ -8,7 +8,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   editing: boolean;
   dataIndex: string;
   title: any;
-  inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio' | 'textArea';
+  inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio' | 'textArea' | 'switch';
   record: any;
   index: number;
   children: React.ReactNode;
@@ -82,6 +82,8 @@ const EditableCell: React.FC<
             showCount
           />
         );
+      case 'switch':
+        return <Switch />;
       default:
         return <Input placeholder={`请输入${placeholder || title}`} maxLength={maxLength} />;
     }

src/pages/rentManage/rentGoods/rentAddOrEdit/components/accessoryList/index.scss

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

src/pages/rentManage/rentGoods/rentAddOrEdit/components/accessoryList/index.tsx

+import './index.scss';
+import { Button, Col, Form, Row, Table } from 'antd';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { InterDataType, InterReqType } from '~/api/interface';
+import { addRentGoodsType, leaseGoodsDetailsType } from '~/api/interface/rentManageType';
+import EditableCell from '~/components/EditableCell';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+
+//租赁商品详情返回类型
+type rentGoodsDetailType = InterDataType<leaseGoodsDetailsType>;
+//租赁-清单类型
+type leasePartsListType = Exclude<
+  InterReqType<addRentGoodsType>,
+  undefined
+>['leasePartsList'][0] & { id?: number };
+
+type EditableTableProps = Parameters<typeof Table>[0];
+type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
+
+interface selfProps {
+  ref: any;
+  rentGoodsDetails: rentGoodsDetailType | undefined;
+}
+
+const AccessoryList = forwardRef<any, selfProps>(({ rentGoodsDetails }, ref) => {
+  const [accessoryTableForm] = Form.useForm<{ [x: string]: string | number }>();
+
+  const accessoryTableDefaultColumns: (ColumnTypes[number] & {
+    editable?: boolean;
+    dataIndex?: string;
+    inputType?: string;
+    rules?: any;
+    maxLength?: number;
+  })[] = [
+    {
+      title: '序号',
+      align: 'center',
+      render: (_: any, _record: any, index: number) => index + 1,
+    },
+    {
+      title: '名称',
+      editable: true,
+      dataIndex: 'name',
+      align: 'center',
+    },
+    {
+      title: '数量',
+      editable: true,
+      dataIndex: 'number',
+      align: 'center',
+      inputType: 'number',
+    },
+    {
+      title: '参考价格',
+      editable: true,
+      dataIndex: 'price',
+      align: 'center',
+      inputType: 'number',
+    },
+    {
+      title: '操作',
+      align: 'center',
+      render: (_: any, _record: any, index: number) => (
+        <>
+          {index === accessoryTableData.length - 1 ? (
+            <Button
+              type='primary'
+              icon={<PlusOutlined />}
+              style={{ marginRight: '5px' }}
+              onClick={addAccessoryTableClick}
+            ></Button>
+          ) : (
+            ''
+          )}
+          {index ? (
+            <Button
+              type='primary'
+              icon={<MinusOutlined />}
+              onClick={() => deleteAccessoryTableClick(index)}
+            ></Button>
+          ) : (
+            ''
+          )}
+        </>
+      ),
+    },
+  ];
+  const accessoryTableColumns = accessoryTableDefaultColumns.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 [accessoryTableData, setAccessoryTableData] = useState<leasePartsListType[]>([
+    { id: Math.random(), name: '', number: 0, price: 0 },
+  ]);
+
+  useImperativeHandle(ref, () => ({
+    accessoryTableFormSubmit,
+  }));
+
+  //新加一行
+  const addAccessoryTableClick = () => {
+    setAccessoryTableData([
+      ...accessoryTableData,
+      { id: Math.random(), name: '', number: 0, price: 0 },
+    ]);
+  };
+  //删除一行
+  const deleteAccessoryTableClick = (index: number) => {
+    accessoryTableData.splice(index, 1);
+    setAccessoryTableData([...accessoryTableData]);
+  };
+  //配件清单表单提交
+  const accessoryTableFormSubmit = () => {
+    return new Promise((resolve, reject) => {
+      accessoryTableForm
+        .validateFields()
+        .then((value: any) => {
+          resolve(
+            accessoryTableData.reduce((pre: leasePartsListType[], cur) => {
+              if (value['name' + cur.id] || value['price' + cur.id] || value['number' + cur.id]) {
+                pre.push({
+                  name: value['name' + cur.id],
+                  price: value['price' + cur.id],
+                  number: value['number' + cur.id],
+                  id: rentGoodsDetails
+                    ? rentGoodsDetails.leasePartsList.some((v) => v.id === cur.id)
+                      ? cur.id
+                      : undefined
+                    : undefined,
+                });
+              }
+
+              return pre;
+            }, []),
+          );
+        })
+        .catch((err) => {
+          reject(err);
+        });
+    });
+  };
+
+  useEffect(() => {
+    if (rentGoodsDetails) {
+      if (rentGoodsDetails.leasePartsList) {
+        setAccessoryTableData(rentGoodsDetails.leasePartsList);
+        const defaultFormValue: { [x: string]: string | undefined | number } =
+          rentGoodsDetails.leasePartsList.reduce(
+            (pre: { [x: string]: string | undefined | number }, cur) => {
+              pre['name' + cur.id] = cur.name || undefined;
+              pre['number' + cur.id] = cur.number || undefined;
+              pre['price' + cur.id] = cur.price || undefined;
+              return pre;
+            },
+            {},
+          );
+        accessoryTableForm.setFieldsValue(defaultFormValue);
+      }
+    }
+  }, [rentGoodsDetails]);
+
+  return (
+    <div className='accessory-list'>
+      <div className='accessory-list-title'>配件清单</div>
+      <Row>
+        <Col span={2}></Col>
+        <Col span={11}>
+          <Form form={accessoryTableForm}>
+            <Table
+              columns={accessoryTableColumns as ColumnTypes}
+              bordered
+              dataSource={accessoryTableData}
+              rowKey='id'
+              pagination={false}
+              components={{
+                body: {
+                  cell: EditableCell,
+                },
+              }}
+            />
+          </Form>
+        </Col>
+      </Row>
+    </div>
+  );
+});
+export default AccessoryList;

src/pages/rentManage/rentGoods/rentAddOrEdit/components/addressInfo/index.tsx

 import './index.scss';
-import { Form, Radio, Select } from 'antd';
+import { Button, Col, Form, Radio, Row, Select } from 'antd';
+import { OrderManageAPI, RentManageAPI, SystemManageAPI } from '~/api';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import AddOrEditAddressModal from '~/pages/systemManage/addressManage/components/addOrEditAddressModal';
+import { InterDataType } from '~/api/interface';
+import { leaseGoodsDetailsType } from '~/api/interface/rentManageType';
 
-const AddressInfo = () => {
+//租赁商品详情返回类型
+type rentGoodsDetailType = InterDataType<leaseGoodsDetailsType>;
+interface selfProps {
+  ref: any;
+  rentGoodsDetails: rentGoodsDetailType | undefined;
+}
+
+const AddressInfo = forwardRef<any, selfProps>(({ rentGoodsDetails }, ref) => {
+  const [addressInfoForm] = Form.useForm<{
+    shipAddress: number;
+    returnAddress: number;
+    logisticsCompany: string;
+    modeOfDelivery: number;
+  }>();
+
+  const [addOrEditAddressModalShow, setAddOrEditAddressModalShow] = useState<boolean>(false);
+
+  const [addressOptionList, setAddressOptionList] = useState<
+    { label: string; value: number; districtCode: string }[]
+  >([]);
+  const [expressOptionList, setExpressOptionList] = useState<{ label: string; value: string }[]>(
+    [],
+  );
+  //配送方式
+  const [shippingMethodList, setShippingMethodList] = useState<
+    { id: number; saleServiceName: string }[]
+  >([]);
+
+  useImperativeHandle(ref, () => ({
+    addressInfoFormSubmit,
+  }));
+
+  //地址列表
+  const getAddressList = () => {
+    SystemManageAPI.getAddressList({}).then(({ result }) => {
+      if (result) {
+        const optionList = result.map((v) => ({
+          label: v.takeName + v.takePhone + `(${v.takeRegion.split('/').join('') + v.takeAddress})`,
+          value: v.id,
+          districtCode: v.districtCode,
+        }));
+        const addressItemObj = result.find((v) => v.type === 1);
+        if (addressItemObj) {
+          addressInfoForm.setFieldsValue({
+            returnAddress: addressItemObj.id,
+            shipAddress: addressItemObj.id,
+          });
+        }
+        setAddressOptionList(optionList);
+      }
+    });
+  };
+  //物流公司列表
+  const getListExpressInfo = () => {
+    OrderManageAPI.listExpressInfo().then(({ result }) => {
+      if (result) {
+        const optionList = result.map((v) => ({
+          label: v.exName,
+          value: v.exCode,
+        }));
+        setExpressOptionList(optionList);
+      }
+    });
+  };
+  //物流-配送方式
+  const getOtherService = () => {
+    RentManageAPI.getOtherServiceList().then(({ result }) => {
+      setShippingMethodList(result || []);
+    });
+  };
+  //物流表单提交
+  const addressInfoFormSubmit = () => {
+    return new Promise((resolve, reject) => {
+      addressInfoForm
+        .validateFields()
+        .then((values) => {
+          resolve({
+            ...values,
+            districtCode: addressOptionList.find((v) => v.value === values.shipAddress)
+              ?.districtCode,
+          });
+        })
+        .then((err) => {
+          reject(err);
+        });
+    });
+  };
+  //新增地址弹窗
+  const addAddressClick = () => [setAddOrEditAddressModalShow(true)];
+  const addOrEditAddressModalOk = () => {
+    getAddressList();
+    setAddOrEditAddressModalShow(false);
+  };
+  const addOrEditAddressModalCancel = () => {
+    setAddOrEditAddressModalShow(false);
+  };
+
+  useEffect(() => {
+    getAddressList();
+    getListExpressInfo();
+    getOtherService();
+  }, []);
+
+  useEffect(() => {
+    if (rentGoodsDetails) {
+      addressInfoForm.setFieldsValue({
+        shipAddress: rentGoodsDetails.shipAddress,
+        returnAddress: rentGoodsDetails.returnAddress,
+        logisticsCompany: rentGoodsDetails.logisticsCompany,
+        modeOfDelivery: rentGoodsDetails.modeOfDelivery,
+      });
+    }
+  }, [rentGoodsDetails]);
   return (
     <div className='address-info'>
       <div className='address-info-title'>物流信息</div>
-      <Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
-        <Form.Item label='发货地址'>
-          <Select placeholder='请选择发货地址'>
-            <Select.Option>1</Select.Option>
-          </Select>
+      <Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }} form={addressInfoForm}>
+        <Form.Item
+          label='发货地址'
+          name='shipAddress'
+          rules={[{ required: true, message: '请选择发货地址' }]}
+        >
+          <Select placeholder='请选择发货地址' options={addressOptionList}></Select>
         </Form.Item>
-        <Form.Item label='归还地址'>
-          <Select placeholder='请选择归还地址'>
-            <Select.Option>1</Select.Option>
-          </Select>
+        <Form.Item>
+          <Row>
+            <Col span={5}></Col>
+            <Col>
+              <Button type='link' icon={<PlusOutlined />} onClick={addAddressClick}>
+                新增地址
+              </Button>
+            </Col>
+          </Row>
+        </Form.Item>
+
+        <Form.Item
+          label='归还地址'
+          name='returnAddress'
+          rules={[{ required: true, message: '请选择归还地址' }]}
+        >
+          <Select placeholder='请选择归还地址' options={addressOptionList}></Select>
         </Form.Item>
-        <Form.Item label='寄出物流'>
-          <Select placeholder='请选择寄出物流'>
-            <Select.Option>1</Select.Option>
-          </Select>
+        <Form.Item>
+          <Row>
+            <Col span={5}></Col>
+            <Col>
+              <Button type='link' icon={<PlusOutlined />} onClick={addAddressClick}>
+                新增地址
+              </Button>
+            </Col>
+          </Row>
         </Form.Item>
-        <Form.Item label='寄出物流'>
-          <Select placeholder='请选择寄出物流'>
-            <Select.Option>1</Select.Option>
-          </Select>
+        <Form.Item
+          label='寄出物流'
+          name='logisticsCompany'
+          rules={[{ required: true, message: '请选择寄出物流' }]}
+        >
+          <Select placeholder='请选择寄出物流' options={expressOptionList}></Select>
         </Form.Item>
-        <Form.Item label='配送方式（寄出）'>
+        <Form.Item
+          label='配送方式（寄出）'
+          name='modeOfDelivery'
+          rules={[{ required: true, message: '请选择配送方式（寄出）' }]}
+        >
           <Radio.Group>
-            <Radio>包邮</Radio>
-            <Radio>到付（租户支付）</Radio>
+            {shippingMethodList.map((v) => (
+              <Radio value={v.id} key={v.id}>
+                {v.saleServiceName}
+              </Radio>
+            ))}
           </Radio.Group>
         </Form.Item>
       </Form>
+      <AddOrEditAddressModal
+        open={addOrEditAddressModalShow}
+        onOk={addOrEditAddressModalOk}
+        onCancel={addOrEditAddressModalCancel}
+      />
     </div>
   );
-};
+});
 export default AddressInfo;

src/pages/rentManage/rentGoods/rentAddOrEdit/components/footerOperate/index.scss

+.rent-footer-operate{
+  background: #fff;
+  height: 70px;
+  position: fixed;
+  bottom: 10px;
+  left: 180px;
+  right: 10px;
+  box-shadow: 0 -5px 1px -5px rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  button{
+    height: 40px;
+    width: 80px;
+    &:first-child{
+      margin-right: 50px;
+    }
+  }
+}

src/pages/rentManage/rentGoods/rentAddOrEdit/components/footerOperate/index.tsx

+import './index.scss';
+import { Button } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { FC } from 'react';
+
+interface selfProps {
+  saveRentGoods: () => void;
+}
+
+const FooterOperate: FC<selfProps> = ({ saveRentGoods }) => {
+  const navigate = useNavigate();
+
+  //返回
+  const backRoute = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div className='rent-footer-operate'>
+      <Button onClick={backRoute}>返回</Button>
+      <Button type='primary' onClick={saveRentGoods}>
+        保存
+      </Button>
+    </div>
+  );
+};
+export default FooterOperate;

src/pages/rentManage/rentGoods/rentAddOrEdit/components/goodsInfo/index.tsx

 import { Form, Input, Radio } from 'antd';
 import './index.scss';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { InterDataType } from '~/api/interface';
+import { leaseGoodsDetailsType } from '~/api/interface/rentManageType';
 
+//租赁商品详情返回类型
+type rentGoodsDetailType = InterDataType<leaseGoodsDetailsType>;
 type goodsInfoForm = {
   tradeName: string;
   sellingPoint: string;
   level: number;
   shelfStatus: number;
 };
+interface selfProps {
+  ref: any;
+  rentGoodsDetails: rentGoodsDetailType | undefined;
+}
 
-const GoodsInfo = () => {
+const GoodsInfo = forwardRef<any, selfProps>(({ rentGoodsDetails }, ref) => {
   const qualityList = [
     {
       label: '全新',
@@ -33,13 +42,41 @@ const GoodsInfo = () => {
   ];
   const [form] = Form.useForm<goodsInfoForm>();
 
+  useImperativeHandle(ref, () => ({
+    submitGoodsInfoForm,
+  }));
+
+  const submitGoodsInfoForm = () => {
+    return new Promise((resolve, reject) => {
+      form
+        .validateFields()
+        .then((value) => {
+          resolve(value);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  };
+
+  useEffect(() => {
+    if (rentGoodsDetails) {
+      form.setFieldsValue({
+        tradeName: rentGoodsDetails.tradeName,
+        sellingPoint: rentGoodsDetails.sellingPoint,
+        level: rentGoodsDetails.level,
+        shelfStatus: rentGoodsDetails.shelfStatus,
+      });
+    }
+  }, [rentGoodsDetails]);
+
   return (
     <div className='goods-info'>
       <div className='goods-info-title'>商品信息</div>
       <Form
         labelCol={{ span: 2 }}
         wrapperCol={{ span: 10 }}
-        initialValues={{ level: 0 }}
+        initialValues={{ level: 0, shelfStatus: 1 }}
         form={form}
       >
         <Form.Item
@@ -74,5 +111,5 @@ const GoodsInfo = () => {
       </Form>
     </div>
   );
-};
+});
 export default GoodsInfo;

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

@@ -4,4 +4,14 @@
     font-weight: bold;
     line-height: 40px;
   }
+  .rent-goods-video-wrap{
+    position: relative;
+    width: 200px;
+    img{
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translate(50%,-25%);
+    }
+  }
 }

src/pages/rentManage/rentGoods/rentAddOrEdit/index.scss

-.goods-info {
-  &-operate {
-    margin-top: 50px;
-    display: flex;
-    justify-content: center;
-    button {
-      width: 100px;
-      height: 40px;
-      &:first-child {
-        margin-right: 50px;
-      }
-    }
-  }
+.rent-create-edit{
+  padding-bottom: 80px;
 }

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

@@ -2,17 +2,99 @@ import GoodsInfo from './components/goodsInfo';
 import RentAttr from './components/rentAttr';
 import SkuInfo from './components/skuInfo';
 import AddressInfo from './components/addressInfo';
+import FooterOperate from './components/footerOperate';
+import AccessoryList from './components/accessoryList';
+import './index.scss';
+import { useEffect, useRef, useState } from 'react';
+import { RentManageAPI } from '~/api';
+import { filterObjAttr } from '~/utils';
+import { message } from 'antd';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { InterDataType } from '~/api/interface';
+import { leaseGoodsDetailsType } from '~/api/interface/rentManageType';
+
+//租赁商品详情返回类型
+type rentGoodsDetailType = InterDataType<leaseGoodsDetailsType>;
 const RentAddOrEdit = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const goodsInfoRef = useRef<any>();
+  const rentAttrRef = useRef<any>();
+  const skuInfoRef = useRef<any>();
+  const accessoryListRef = useRef<any>();
+  const addressInfoRef = useRef<any>();
+
+  //租赁商品-编辑-id
+  const [rentGoodsId, setRentGoodsId] = useState<number>(-1);
+  //租赁-编辑-商品详情
+  const [rentGoodsDetails, setRentGoodsDetails] = useState<rentGoodsDetailType>();
+
+  //  保存
+  const saveRentGoods = () => {
+    Promise.all([
+      goodsInfoRef.current.submitGoodsInfoForm(),
+      rentAttrRef.current.submitAttrForm(),
+      skuInfoRef.current.skuFormSubmit(),
+      accessoryListRef.current.accessoryTableFormSubmit(),
+      addressInfoRef.current.addressInfoFormSubmit(),
+    ]).then((values) => {
+      const resourcesList = [
+        { type: 0, url: values[1].mainImage },
+        ...(values[1].subImage?.map((v: string) => ({ type: 1, url: v })) || []),
+        ...(values[1].goodsVideo ? [{ type: 2, url: values[1].goodsVideo }] : []),
+      ];
+      values[2].priceStock = values[2].priceStock.map((v: any) => ({
+        ...v,
+        stockOut: v.stockOut ? 1 : 0,
+      }));
+      RentManageAPI[rentGoodsId ? 'editLeaseGoods' : 'addRentGoods']({
+        ...values[0],
+        ...filterObjAttr(values[1], ['goodsImage', 'goodsVideo']),
+        ...values[2],
+        leasePartsList: values[3],
+        ...values[4],
+        resourcesList,
+        id: rentGoodsId ? rentGoodsId : undefined,
+      }).then(({ code }) => {
+        if (code === '200') {
+          message.success(rentGoodsId ? '编辑成功' : '新增成功');
+          navigate(-1);
+        }
+      });
+    });
+  };
+
+  //获取租赁商品详情
+  const getRentGoodsDetail = (id: number) => {
+    RentManageAPI.getLeaseGoodsDetails({ id }).then(({ result }) => {
+      if (result) {
+        setRentGoodsDetails({ ...result });
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (searchParams.get('id')) {
+      getRentGoodsDetail(Number(searchParams.get('id')));
+      setRentGoodsId(Number(searchParams.get('id')));
+    }
+  }, []);
+
   return (
     <div className='rent-create-edit'>
       {/*商品信息*/}
-      <GoodsInfo />
+      <GoodsInfo ref={goodsInfoRef} rentGoodsDetails={rentGoodsDetails} />
       {/*商品属性*/}
-      <RentAttr />
+      <RentAttr ref={rentAttrRef} rentGoodsDetails={rentGoodsDetails} />
       {/*价格库存信息*/}
-      <SkuInfo />
+      <SkuInfo ref={skuInfoRef} rentGoodsDetails={rentGoodsDetails} />
+      {/*配件清单*/}
+      <AccessoryList ref={accessoryListRef} rentGoodsDetails={rentGoodsDetails} />
       {/*物流信息*/}
-      <AddressInfo />
+      <AddressInfo ref={addressInfoRef} rentGoodsDetails={rentGoodsDetails} />
+      {/*底部操作栏*/}
+      <FooterOperate saveRentGoods={saveRentGoods} />
     </div>
   );
 };

src/pages/rentManage/rentGoods/rentList/index.scss

+.rent-goods-info{
+  display: flex;
+  .info-meta{
+    margin-left: 5px;
+    word-break: break-all;
+    .title{
+      margin-bottom: 10px;
+    }
+  }
+}

src/pages/systemManage/addressManage/components/addOrEditAddressModal/index.tsx

+import { Cascader, Form, Input, message, Modal, ModalProps, Switch } from 'antd';
+import { FC, useEffect } from 'react';
+import districtData from '~/assets/json/district.json';
+import { InterDataType, InterReqType } from '~/api/interface';
+import { addressInsetType, addressListType } from '~/api/interface/systemManageType';
+import { SystemManageAPI } from '~/api';
+
+interface selfProps {
+  onOk: () => void;
+  onCancel: () => void;
+  currentAddressItem?: addressType[0] | undefined;
+}
+//新增地址参数类型
+type addAddressParameterType = Exclude<InterReqType<addressInsetType>, undefined>;
+//地址列表返回类型
+type addressType = InterDataType<addressListType>;
+
+const AddOrEditAddressModal: FC<ModalProps & selfProps> = ({
+  open,
+  onCancel,
+  onOk,
+  currentAddressItem,
+}) => {
+  const [form] = Form.useForm<
+    Omit<addAddressParameterType, 'takeRegion' | 'type' | 'districtCode'> & {
+      takeRegion: string[];
+      type: boolean;
+      districtCode: number[];
+    }
+  >();
+
+  const handleOk = () => {
+    form.validateFields().then((values) => {
+      SystemManageAPI[currentAddressItem ? 'editAddress' : 'addressInset']({
+        ...values,
+        districtCode: values.districtCode[2].toString(),
+        takeRegion: getDistrictName(values.districtCode),
+        type: values.type ? 1 : 0,
+        id: currentAddressItem ? currentAddressItem.id : undefined,
+      }).then(({ code }) => {
+        if (code === '200') {
+          message.success('新增地址成功');
+          form.resetFields();
+          onOk();
+        }
+      });
+    });
+  };
+  const handleCancel = () => {
+    onCancel();
+  };
+  //根据省市区code查询省市区名称
+  const getDistrictName = (codeArr: number[]) => {
+    const getFlatDistrictData = (districtData: any[]) => {
+      return districtData.reduce((pre: any, cur: any) => {
+        pre.push(cur);
+        if (cur.childInfo) {
+          pre.push(...getFlatDistrictData(cur.childInfo));
+        }
+        return pre;
+      }, []);
+    };
+    const flatDistrictData: any = getFlatDistrictData(districtData);
+    return codeArr.map((v) => flatDistrictData.find((i: any) => i.id === v)?.name).join('/');
+  };
+
+  useEffect(() => {
+    if (currentAddressItem) {
+      form.setFieldsValue({
+        takeName: currentAddressItem.takeName,
+        takePhone: currentAddressItem.takePhone,
+        districtCode: [
+          Number(currentAddressItem.districtCode.substring(0, 2) + '0000'),
+          Number(currentAddressItem.districtCode.substring(0, 4) + '00'),
+          Number(currentAddressItem.districtCode),
+        ],
+        takeAddress: currentAddressItem.takeAddress,
+        type: !!currentAddressItem.type,
+      });
+    }
+  }, [currentAddressItem]);
+
+  return (
+    <Modal
+      open={open}
+      title={currentAddressItem ? '编辑地址' : '新增地址'}
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form}>
+        <Form.Item label='姓名' name='takeName' rules={[{ required: true, message: '请输入姓名' }]}>
+          <Input placeholder='请输入姓名' maxLength={30} />
+        </Form.Item>
+        <Form.Item
+          label='手机号'
+          name='takePhone'
+          rules={[
+            { required: true, message: '请输入手机号' },
+            // 校验手机号
+            () => ({
+              validator(_, value) {
+                if (!value || /^1[3-9]\d{9}$/.test(value)) {
+                  return Promise.resolve();
+                }
+                return Promise.reject('请输入正确的手机号');
+              },
+            }),
+          ]}
+        >
+          <Input placeholder='请输入手机号' maxLength={11} />
+        </Form.Item>
+        <Form.Item
+          label='所在地区'
+          name='districtCode'
+          rules={[{ required: true, message: '请选择所在地区' }]}
+        >
+          <Cascader
+            placeholder='请选择所在地区'
+            options={districtData}
+            fieldNames={{ label: 'name', value: 'id', children: 'childInfo' }}
+          />
+        </Form.Item>
+        <Form.Item
+          label='详细地址'
+          name='takeAddress'
+          rules={[{ required: true, message: '请输入详细地址' }]}
+        >
+          <Input.TextArea rows={4} showCount placeholder='请输入详细地址' maxLength={70} />
+        </Form.Item>
+        <Form.Item label='设为默认地址' name='type'>
+          <Switch />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default AddOrEditAddressModal;

src/pages/systemManage/addressManage/index.tsx

+import SearchBox from '~/components/search-box';
+import { Button, message, Modal, Table } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { ColumnsType } from 'antd/es/table';
+import AddOrEditAddressModal from '~/pages/systemManage/addressManage/components/addOrEditAddressModal';
+import { useEffect, useState } from 'react';
+import { SystemManageAPI } from '~/api';
+import { InterDataType } from '~/api/interface';
+import { addressListType } from '~/api/interface/systemManageType';
+
+//地址列表返回类型
+type addressType = InterDataType<addressListType>;
+
+const AddressManage = () => {
+  const tableColumns: ColumnsType<addressType[0]> = [
+    {
+      title: '姓名',
+      align: 'center',
+      dataIndex: 'takeName',
+    },
+    {
+      title: '电话',
+      align: 'center',
+      dataIndex: 'takePhone',
+    },
+    {
+      title: '所在地区',
+      align: 'center',
+      dataIndex: 'takeRegion',
+    },
+    {
+      title: '详细地址',
+      align: 'center',
+      dataIndex: 'takeAddress',
+    },
+    {
+      title: '状态',
+      align: 'center',
+      dataIndex: 'type',
+      render: (text: number) => (text ? '默认' : ''),
+    },
+    {
+      title: '操作',
+      align: 'center',
+      render: (_: any, record) => (
+        <>
+          <Button type='link' onClick={() => addOrEditAddressModalClick(record)}>
+            编辑
+          </Button>
+          <Button type='link' onClick={() => deleteAddressClick(record)}>
+            删除
+          </Button>
+        </>
+      ),
+    },
+  ];
+
+  const [addressList, setAddressList] = useState<addressType>([]);
+  const [addOrEditAddressModalShow, setAddOrEditAddressModalShow] = useState<boolean>(false);
+  const [currentAddressItem, setCurrentAddressItem] = useState<addressType[0]>();
+
+  const getAddressList = () => {
+    SystemManageAPI.getAddressList({}).then(({ result }) => {
+      setAddressList(result);
+    });
+  };
+  //新增，编辑地址
+  const addOrEditAddressModalClick = (record?: addressType[0]) => {
+    setCurrentAddressItem(record ? { ...record } : undefined);
+    setAddOrEditAddressModalShow(true);
+  };
+  const addOrEditAddressModalCancel = () => {
+    setAddOrEditAddressModalShow(false);
+  };
+  const addOrEditAddressModalOk = () => {
+    getAddressList();
+    setAddOrEditAddressModalShow(false);
+  };
+
+  //地址删除
+  const deleteAddressClick = (record: addressType[0]) => {
+    Modal.confirm({
+      title: '提示',
+      content: '确认删除该地址吗？',
+      onOk: () => {
+        SystemManageAPI.deleteAddress({ id: record.id }).then(({ code }) => {
+          if (code === '200') {
+            message.success('删除成功');
+            getAddressList();
+          }
+        });
+      },
+    });
+  };
+
+  useEffect(() => {
+    getAddressList();
+  }, []);
+
+  return (
+    <div className='address-manage'>
+      <SearchBox
+        child={
+          <Button
+            type='primary'
+            icon={<PlusOutlined />}
+            onClick={() => addOrEditAddressModalClick()}
+          >
+            新增地址
+          </Button>
+        }
+      />
+      <Table bordered columns={tableColumns} dataSource={addressList} rowKey='id' />
+
+      {/*新增编辑地址*/}
+      <AddOrEditAddressModal
+        open={addOrEditAddressModalShow}
+        onCancel={addOrEditAddressModalCancel}
+        onOk={addOrEditAddressModalOk}
+        currentAddressItem={currentAddressItem}
+      />
+    </div>
+  );
+};
+export default AddressManage;

src/router/router.tsx

@@ -35,6 +35,7 @@ import {
   BankOutlined,
   VerifiedOutlined,
   AccountBookOutlined,
+  EnvironmentOutlined,
 } from '@ant-design/icons';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -98,7 +99,8 @@ const ServiceIntroduceView = React.lazy(
 ); //服务介绍
 
 const RentListView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentList')); //租赁列表
-const RentAddOrEditView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentAddOrEdit')); //租赁新增、编辑、详情
+const RentAddOrEditView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentAddOrEdit')); //租赁新增、编辑
+const RentDetailView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentDetail')); //租赁详情
 const RentTypeView = React.lazy(() => import('~/pages/rentManage/rentType')); //租赁-类型管理
 const RentMakeView = React.lazy(() => import('~/pages/rentManage/rentMake')); //租赁-品牌管理
 const RentModeView = React.lazy(() => import('~/pages/rentManage/rentMode')); //租赁-型号管理
@@ -106,7 +108,7 @@ const RentModeView = React.lazy(() => import('~/pages/rentManage/rentMode')); //
 const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品
 const MallAddOrEditOrDetailView = React.lazy(
   () => import('~/pages/mallManage/mallGoods/goodsAddOrEditOrDetail'),
-); //商城商品新增、编辑、租赁商品详情
+); //商城商品新增、编辑
 const MallGoodsDetailsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsDetails')); //商城商品（新）
 
 const ProduceListView = React.lazy(() => import('~/pages/mallManage/produceManage/produceList')); //产品列表
@@ -153,6 +155,7 @@ const CompanyDetailView = React.lazy(
 import AccountLimit from '~/pages/systemManage/limitManage/roleList'; //账号权限
 import LimitInfo from '~/pages/systemManage/limitManage/limitInfo';
 import CustomListDetail from '~/pages/customManage/customList/detail';
+const AddressManageView = React.lazy(() => import('~/pages/systemManage/addressManage'));
 
 // const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
 // const IndustryDetailView = React.lazy(
@@ -734,17 +737,17 @@ export const routerList: Array<RouteObjectType> = [
           hidden: true,
         },
       },
-      // {
-      //   path: '/rentManage/rentGoods/detail',
-      //   element: withLoadingComponent(<RentAddOrEditView />),
-      //   errorElement: <ErrorPage />,
-      //   meta: {
-      //     id: 10136,
-      //     icon: <SmileOutlined />,
-      //     title: '租赁商品详情',
-      //     hidden: true,
-      //   },
-      // },
+      {
+        path: '/rentManage/rentGoods/detail',
+        element: withLoadingComponent(<RentDetailView />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 10176,
+          icon: <SmileOutlined />,
+          title: '租赁商品详情',
+          hidden: true,
+        },
+      },
       {
         path: '/rentManage/rentType',
         element: withLoadingComponent(<RentTypeView />),
@@ -1163,6 +1166,17 @@ export const routerList: Array<RouteObjectType> = [
           hidden: true,
         },
       },
+      {
+        path: '/systemManage/addressManage',
+        element: withLoadingComponent(<AddressManageView />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 1450,
+          title: '地址管理',
+          icon: <EnvironmentOutlined />,
+          develop: true,
+        },
+      },
     ],
   },
 ];