功能：商品新增，商品编辑（联调完成）

src/api/interface/categoryManage.ts

@@ -80,9 +80,10 @@ type categoryItemType = {
   createTime: string;
   icon: string;
   description: string;
-  subDTOList: (Omit<categoryItemType, 'createTime' | 'icon' | 'subDTOList'> & {
+  subDTOList: (Omit<categoryItemType, 'createTime' | 'icon' | 'subDTOList' | 'sort'> & {
     categoryPrimaryId: number;
   })[];
+  sort: number;
 };
 export type categoryListRespType = InterItemFunction<{ id?: number }, categoryItemType[]>;
 //分类管理-1级分类新增（新）
@@ -106,6 +107,9 @@ export type updatePrimaryCategoryType = InterFunction<
 >;
 //分类管理-1级分类删除（新）
 export type deletePrimaryCategoryType = InterFunction<{ id: number }, any>;
+//分类管理-1级分类交换顺序（新）
+export type exchangeType = InterFunction<{ id: number; sort: number }[], any>;
+
 //分类管理-2级分类新增(新)
 export type addSubCategoryType = InterFunction<
   {

src/api/interface/goodsType.ts

@@ -127,6 +127,7 @@ export type addMallGoodsType = InterFunction<
         specValueImage: string;
         specValueName: string;
         stock?: number;
+        goodsSpecId?: number;
       }[];
       id: any;
       mallGoodsId: number;
@@ -164,6 +165,7 @@ export type editMallGoodsType = InterFunction<
         specValueImage: string;
         specValueName: string;
         stock?: number;
+        goodsSpecId: number;
       }[];
       id: any;
       mallGoodsId: number;

src/api/modules/categoryManage.ts

@@ -7,8 +7,10 @@ import {
   categoryListType,
   categoryRelevantType,
   deletePrimaryCategoryType,
+  deleteSubCategoryType,
   directoryListType,
   directoryPageListType,
+  exchangeType,
   updatePrimaryCategoryType,
   updateSubCategoryType,
 } from '~/api/interface/categoryManage';
@@ -116,6 +118,8 @@ export class CategoryManageAPI {
   //  分类管理-1级分类删除（新）
   static deletePrimaryCategory: deletePrimaryCategoryType = (params) =>
     axios.get('/pms/category/deletePrimaryCategory', { params });
+  //分类管理-1级分类交换顺序
+  static exchangeCategory: exchangeType = (data) => axios.post('/pms/category/exchange', data);
   //  分类管理-2级分类新增（新）
   static addSubCategory: addSubCategoryType = (data) =>
     axios.post('/pms/category/addSubCategory', data);
@@ -123,6 +127,6 @@ export class CategoryManageAPI {
   static updateSubCategory: updateSubCategoryType = (data) =>
     axios.post('/pms/category/updateSubCategory', data);
   //  分类管理-2级分类删除（新）
-  static deleteSubCategory: deletePrimaryCategoryType = (params) =>
+  static deleteSubCategory: deleteSubCategoryType = (params) =>
     axios.get('/pms/category/deleteSubCategory', { params });
 }

src/pages/categoryManage/categoryList/index.tsx

 import SearchBox from '~/components/search-box';
-import { Button, Checkbox, Form, Image, message, Modal, Table, Tooltip } from 'antd';
+import { Button, Form, Image, message, Modal, Radio, Table, Tooltip } from 'antd';
 import {
   ArrowDownOutlined,
   ArrowUpOutlined,
@@ -14,6 +14,7 @@ import { CategoryManageAPI } from '~/api';
 import EditableCell from '~/components/EditableCell';
 import AddOrEditCategoryModal from './components/addOrEditCategoryModal';
 import './index.scss';
+import _ from 'lodash';
 
 type EditableTableProps = Parameters<typeof Table>[0];
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
@@ -147,6 +148,7 @@ const CategoryList = () => {
     };
   });
   const [tableData, setTableData] = useState<categoryType>([]);
+  const [allTableData, setAllTableData] = useState<categoryType>([]);
   //分页
   const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
     pageNo: 1,
@@ -155,16 +157,21 @@ const CategoryList = () => {
   });
 
   //获取分类列表
-  const getCategoryList = () => {
+  const getCategoryList = (query?: PaginationProps, isAll?: boolean) => {
     setLoading(true);
     CategoryManageAPI.getCategoryRespList({
       pageNo: pagination.pageNo,
       pageSize: pagination.pageSize,
+      ...query,
     }).then(({ result }) => {
       setLoading(false);
+      if (isAll) {
+        setAllTableData(result.list ? [...result.list] : []);
+      } else {
         setTableData(result.list ? [...result.list] : []);
         pagination.totalCount = result.totalCount;
         setPagination(pagination);
+      }
     });
   };
   const paginationChange = (pageNo: number, pageSize: number) => {
@@ -182,6 +189,7 @@ const CategoryList = () => {
       setSelectedRowKeys([...selectedRowKeys, record.id]);
     }
   };
+
   //新增、编辑分类弹窗
   const addOrEditCategoryModalShowClick = (record?: categoryType[0] | any) => {
     if (record && !record.subDTOList) {
@@ -306,9 +314,74 @@ const CategoryList = () => {
       }
     }
   };
+  // 切换排序
+  const handleSort = _.debounce(async (from: 'up' | 'down') => {
+    if (selectedRowKeys.length === 0) {
+      message.warning('请选择需要排序的数据').then();
+      return;
+    }
+    // 当前选项
+    const id = selectedRowKeys.at(-1);
+    // 当前索引
+    const index = allTableData.findIndex((i) => i.id === id);
+    // 当前表格中的索引
+    const tableIndex = tableData.findIndex((i) => i.id === id);
+    // 第一条数据不能上移
+    if (index === 0 && from === 'up') {
+      message.warning('已是第一条数据').then();
+      return;
+    }
+    // 最后一条数据不能下移
+    if (index === allTableData.length - 1 && from === 'down') {
+      message.warning('已是最后一条数据').then();
+      return;
+    }
+    // 转换位置
+    const res = await CategoryManageAPI.exchangeCategory(
+      from === 'up'
+        ? [
+            { id: allTableData[index - 1].id, sort: allTableData[index - 1].sort },
+            { id: allTableData[index].id, sort: allTableData[index].sort },
+          ]
+        : [
+            { id: allTableData[index + 1].id, sort: allTableData[index + 1].sort },
+            { id: allTableData[index].id, sort: allTableData[index].sort },
+          ],
+    );
+    if (res && res.code === '200') {
+      message.success('操作成功').then();
+      // 如果是当前页的第一条数据
+      if (tableIndex === 0 && from === 'up') {
+        paginationChange(pagination.pageNo - 1, pagination.pageSize);
+        getCategoryList({ pageNo: 1, pageSize: 9999 }, true);
+        return;
+      }
+      // 如果是当前页的最后一条数据
+      if (tableIndex === tableData.length - 1 && from === 'down') {
+        paginationChange(pagination.pageNo + 1, pagination.pageSize);
+        getCategoryList({ pageNo: 1, pageSize: 9999 }, true);
+        return;
+      }
+      paginationChange(pagination.pageNo, pagination.pageSize);
+      getCategoryList({ pageNo: 1, pageSize: 9999 }, true);
+    }
+  }, 500);
+  //防抖
+  // const  debounce:<T extends ()=>T>= (func: T, delay: number)=> {
+  //   let timeout: NodeJS.Timeout;
+  //
+  //   return function (this: ThisParameterType<T>, ...args: Parameters<T>): ReturnType<T> {
+  //     clearTimeout(timeout);
+  //
+  //     timeout = setTimeout(() => {
+  //       func.apply(this, args);
+  //     }, delay);
+  //   } as T;
+  // }
 
   useEffect(() => {
     getCategoryList();
+    getCategoryList({ pageNo: 1, pageSize: 99999 }, true);
   }, []);
 
   return (
@@ -323,8 +396,16 @@ const CategoryList = () => {
             >
               新增分类
             </Button>
-            <Button icon={<ArrowUpOutlined />} type='primary'></Button>
-            <Button icon={<ArrowDownOutlined />} type='primary'></Button>
+            <Button
+              icon={<ArrowUpOutlined />}
+              type='primary'
+              onClick={() => handleSort('up')}
+            ></Button>
+            <Button
+              icon={<ArrowDownOutlined />}
+              type='primary'
+              onClick={() => handleSort('down')}
+            ></Button>
           </>
         }
       />
@@ -336,7 +417,7 @@ const CategoryList = () => {
             hideSelectAll: true,
             renderCell: (_checked: boolean, record: categoryType[0]) => {
               return (
-                <>{record.subDTOList ? <Checkbox onChange={() => onSelectChange(record)} /> : ''}</>
+                <>{record.subDTOList ? <Radio onChange={() => onSelectChange(record)} /> : ''}</>
               );
             },
           }}

src/pages/customManage/customList/index.tsx

@@ -239,7 +239,7 @@ function CustomListView() {
             label: '手机号',
             name: 'phoneNum',
             type: 'input',
-            placeholder: '请输入用户账号',
+            placeholder: '请输入手机号',
           },
           {
             label: '来源',

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.tsx

@@ -175,6 +175,7 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
             listType='picture-card'
             onChange={(fileList) => uploadSuccess(fileList, 'subImgList')}
             defaultFileList={subFileList}
+            fileLength={4}
           >
             <UploadOutlined />
           </Uploader>

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuAddOrEditModal/index.tsx

@@ -6,7 +6,6 @@ import { InterDataType, InterReqType } from '~/api/interface';
 import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
 import { filterObjAttr } from '~/utils';
 import { isEmptyBol, regPriceNumber } from '~/utils/validateUtils';
-import _ from 'lodash';
 
 type EditableTableProps = Parameters<typeof Table>[0];
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
@@ -108,7 +107,6 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
       editable: true,
       dataIndex: 'specValueImage',
       inputType: 'uploader',
-      rules: [{ required: true, message: '请上传图片' }],
     },
     {
       title: '选项名称',
@@ -123,7 +121,6 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
       align: 'center',
       editable: true,
       dataIndex: 'partNo',
-      rules: [{ required: true, message: '请输入料号' }],
       maxLength: 30,
     },
     {
@@ -147,7 +144,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
       editable: true,
       align: 'center',
       dataIndex: 'stock',
-      rules: [{ required: false, validator: stockPriceValidator }],
+      rules: [{ required: true, validator: stockPriceValidator }],
       inputType: 'number',
     },
     {
@@ -350,7 +347,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
       <Form
         labelCol={{ span: 2 }}
         wrapperCol={{ span: 22 }}
-        initialValues={{ chooseType: 0, must: 0 }}
+        initialValues={{ chooseType: 0, must: 0, skuUnitId: skuUnitList[0]?.id || undefined }}
         form={goodsSpecForm}
       >
         <Form.Item

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuInfo/index.tsx

-import { Button, Popconfirm, Table } from 'antd';
+import { Button, Popconfirm, Table, Tag } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/es/table';
 import { FC } from 'react';
@@ -54,6 +54,17 @@ const SkuInfo: FC<selfProps> = ({
       render: (text: number) => skuUnitList.find((v) => v.id === text)?.unitName || '',
     },
     {
+      title: '规格值',
+      align: 'center',
+      dataIndex: 'goodsSpecValuesList',
+      render: (text: goodsSpecType['goodsSpecValuesList']) =>
+        text.map((v) => (
+          <Tag key={v.id}>
+            {v.specValueName}({v.partNo})
+          </Tag>
+        )),
+    },
+    {
       title: '操作',
       align: 'center',
       render: (_text: string, record) => (

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.tsx

@@ -159,6 +159,9 @@ const GoodsAddOrEditOrDetail = () => {
                     .find((j) => j.id === v.id)
                     ?.goodsSpecValuesList.find((k) => k.id === i.id)?.id
                 : undefined,
+              goodsSpecId: goodsDetailsInfo
+                ? goodsDetailsInfo.goodsSpecList.find((i) => i.id === v.id)?.id
+                : undefined,
             })),
           }));
           const addGoodsEditReq = {
@@ -241,13 +244,14 @@ const GoodsAddOrEditOrDetail = () => {
             下一步
           </Button>
         ) : (
-          <Button type='primary' onClick={saveGoods}>
-            保存
-          </Button>
+          ''
         )}
       </div>
       <div className='back-btn'>
-        <Button type='primary' onClick={backRoute}>
+        <Button type='primary' onClick={saveGoods} style={{ marginRight: '10px' }}>
+          保存
+        </Button>
+        <Button type='default' onClick={backRoute}>
           返回
         </Button>
       </div>

src/pages/mallManage/mallGoods/goodsDetails/index.scss

+.goods-detail{
+  position: relative;
+  &-info{
+    margin-bottom: 20px;
+  }
+  &-sku{
+    .sku-title{
+      line-height: 50px;
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+  &-introduce{
+    .introduce-title{
+      line-height: 50px;
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+  &-operate{
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}

src/pages/mallManage/mallGoods/goodsDetails/index.tsx

+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import GoodsAPI from '~/api/modules/goodsAPI';
+import { InterDataType } from '~/api/interface';
+import { mallGoodsDetailsType, skuUnitType } from '~/api/interface/goodsType';
+import { Badge, Button, Descriptions, Image, Table, Tag } from 'antd';
+import { CategoryManageAPI } from '~/api';
+import { categoryListRespType } from '~/api/interface/categoryManage';
+import './index.scss';
+import { ColumnsType } from 'antd/es/table';
+
+//详情返回类型
+type detailType = InterDataType<mallGoodsDetailsType>;
+//分类返回类型
+type categoryType = InterDataType<categoryListRespType>['list'];
+//单位返回类型
+type unitType = InterDataType<skuUnitType>;
+
 const GoodsDetails = () => {
-  return <div className='goods-detail'></div>;
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  //分类列表
+  const [categoryList, setCategoryList] = useState<categoryType>([]);
+  //单位列表
+  const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
+  const [goodsInfoDetails, setGoodsInfoDetails] = useState<detailType>();
+  const tableColumns: ColumnsType<detailType['goodsSpecList'][0]> = [
+    {
+      title: '序号',
+      align: 'center',
+      render: (_text: string, _record, index: number) => index + 1,
+    },
+    {
+      title: '规格名称',
+      align: 'center',
+      dataIndex: 'specName',
+    },
+    {
+      title: '选择方式',
+      align: 'center',
+      dataIndex: 'chooseType',
+      render: (text: number) => (text ? '多选' : '单选'),
+    },
+    {
+      title: '是否必选',
+      align: 'center',
+      dataIndex: 'must',
+      render: (text: number) => (text ? '必选' : '非必选'),
+    },
+    {
+      title: '规格单位',
+      align: 'center',
+      dataIndex: 'skuUnitId',
+      render: (text: number) => skuUnitList.find((v) => v.id === text)?.unitName || '',
+    },
+    {
+      title: '规格值',
+      align: 'center',
+      dataIndex: 'goodsSpecValuesList',
+      render: (text: detailType['goodsSpecList'][0]['goodsSpecValuesList']) =>
+        text.map((v) => (
+          <Tag key={v.id}>
+            {v.specValueName}({v.partNo})
+          </Tag>
+        )),
+    },
+  ];
+  const getGoodsDetails = (id: number) => {
+    GoodsAPI.getMallGoodsDetails({ id }).then(({ result }) => {
+      setGoodsInfoDetails(result);
+    });
+  };
+  //分类列表
+  const getCategoryList = () => {
+    CategoryManageAPI.getCategoryRespList({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {
+      setCategoryList(result.list || []);
+    });
+  };
+  //单位列表
+  const getSkuUnit = () => {
+    GoodsAPI.getSkuUnit().then(({ result }) => {
+      setSkuUnitList(result || []);
+    });
+  };
+  //返回
+  const backRoute = () => {
+    navigate(-1);
+  };
+
+  useEffect(() => {
+    getGoodsDetails(Number(searchParams.get('id')));
+    getCategoryList();
+    getSkuUnit();
+  }, []);
+  return (
+    <div className='goods-detail'>
+      <div className='goods-detail-info'>
+        <Descriptions title='基本信息' bordered>
+          <Descriptions.Item label='商品名称'>{goodsInfoDetails?.tradeName}</Descriptions.Item>
+          <Descriptions.Item label='商品副图'>
+            {goodsInfoDetails?.resourcesList
+              .filter((v) => v.type === 1)
+              .map((v) => (
+                <Image src={v.url} width={50} height={50} key={v.id} />
+              ))}
+          </Descriptions.Item>
+          <Descriptions.Item label='商品主图'>
+            {goodsInfoDetails?.resourcesList
+              .filter((v) => v.type === 0)
+              .map((v) => (
+                <Image src={v.url} width={50} height={50} key={v.id} />
+              ))}
+          </Descriptions.Item>
+          <Descriptions.Item label='商品标签'>
+            {goodsInfoDetails?.goodsLabel || '暂无'}
+          </Descriptions.Item>
+          <Descriptions.Item label='商品分类'>
+            {categoryList
+              .reduce((pre: string[], cur) => {
+                if (cur.id === goodsInfoDetails?.categoryPrimaryId) {
+                  pre.push(cur.name);
+                  if (goodsInfoDetails?.categorySubId) {
+                    pre.push(
+                      cur.subDTOList.find((v) => v.id === goodsInfoDetails?.categorySubId)?.name ||
+                        '',
+                    );
+                  }
+                }
+                return pre;
+              }, [])
+              .join('/')}
+          </Descriptions.Item>
+          <Descriptions.Item label='商品状态'>
+            <Badge
+              status={goodsInfoDetails?.shelfStatus ? 'processing' : 'default'}
+              text={goodsInfoDetails?.shelfStatus ? '上架中' : '已下架'}
+            />
+          </Descriptions.Item>
+          <Descriptions.Item label='商品视频' span={1}>
+            {goodsInfoDetails?.resourcesList
+              .filter((v) => v.type === 2)
+              .map((v) => (
+                <video
+                  src={v.url}
+                  key={v.id}
+                  style={{ width: '200px', height: '200px' }}
+                  controls
+                />
+              ))}
+          </Descriptions.Item>
+          <Descriptions.Item label='商品描述'>{goodsInfoDetails?.description}</Descriptions.Item>
+        </Descriptions>
+      </div>
+      <div className='goods-detail-sku'>
+        <div className='sku-title'>商品规格</div>
+        <Table
+          bordered
+          columns={tableColumns}
+          dataSource={goodsInfoDetails?.goodsSpecList}
+          rowKey='id'
+          pagination={false}
+        ></Table>
+      </div>
+      <div className='goods-detail-introduce'>
+        <div className='introduce-title'>商品详情</div>
+        <div
+          className='introduce-content'
+          dangerouslySetInnerHTML={{ __html: goodsInfoDetails?.goodsDetails || '' }}
+        ></div>
+      </div>
+      <div className='goods-detail-operate'>
+        <Button type='primary' onClick={backRoute}>
+          返回
+        </Button>
+      </div>
+    </div>
+  );
 };
 export default GoodsDetails;

src/pages/mallManage/mallGoods/goodsList/index.tsx

@@ -205,10 +205,10 @@ const GoodsList = () => {
   };
   //商品详情
   const toGoodsDetail = (id: number) => {
-    // navigate({
-    //   pathname: '/mallManage/mallGoods/detail',
-    //   search: `id=${id}&isDetail=1`,
-    // });
+    navigate({
+      pathname: '/mallManage/mallGoods/detail',
+      search: `id=${id}`,
+    });
   };
   // 表格多选事件
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
@@ -253,8 +253,6 @@ const GoodsList = () => {
   const upGoodsClick = () => {
     if (selectedRowKeys.length === 0) {
       message.warning('请选择商品');
-    } else if (selectedRowKeys.length > 1) {
-      message.warning('最多选择一个商品');
     } else {
       const index = tableData.findIndex((v) => v.id === selectedRowKeys[0]);
       const allIndex = allGoods.findIndex((v) => v.id === selectedRowKeys[0]);
@@ -296,8 +294,6 @@ const GoodsList = () => {
   const downGoodsClick = () => {
     if (selectedRowKeys.length === 0) {
       message.warning('请选择商品');
-    } else if (selectedRowKeys.length > 1) {
-      message.warning('最多选择一个商品');
     } else {
       const index = tableData.findIndex((v) => v.id === selectedRowKeys[0]);
       const allIndex = allGoods.findIndex((v) => v.id === selectedRowKeys[0]);
@@ -335,7 +331,6 @@ const GoodsList = () => {
       }
     }
   };
-
   //分类列表
   const getCategoryList = () => {
     CategoryManageAPI.getCategoryRespList({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {

src/router/router.tsx

@@ -91,7 +91,9 @@ const RentAddOrEditOrDetailView = React.lazy(
 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')); //产品列表
 const ProduceDetailView = React.lazy(
   () => import('~/pages/mallManage/produceManage/produceDetail'),
@@ -579,7 +581,7 @@ export const routerList: Array<RouteObjectType> = [
       },
       {
         path: '/mallManage/mallGoods/detail',
-        element: withLoadingComponent(<MallAddOrEditOrDetailView />),
+        element: withLoadingComponent(<MallGoodsDetailsView />),
         errorElement: <ErrorPage />,
         meta: {
           id: 10146,