联调：行业方案，品牌，产品管理联调

src/api/interface.ts

 // 分页通用接口
 export interface PaginationProps {
-  pageSize?: number;
-  pageNo?: number;
+  pageSize: number;
+  pageNo: number;
 }
 
 // 通用返回接口(分页)
@@ -39,17 +39,17 @@ export interface ResponseType<D> {
 
 // 通用接口封装函数(分页) 建议用这个
 export interface InterListFunction<D extends object, T> {
-  (req: D & PaginationProps): Promise<ResponseListType<T>>;
+  (req: D & Partial<PaginationProps>): Promise<ResponseListType<T>>;
 }
 
 // 通用接口封装函数(不分页) 建议用这个
 export interface InterFunction<D extends object, T> {
-  (req: D): Promise<ResponseType<T>>;
+  (req?: D): Promise<ResponseType<T>>;
 }
 
 // 通用接口封装函数(分页了，但又没有分页) 建议用这个
 export interface InterItemFunction<D extends object, T> {
-  (req: D & PaginationProps): Promise<ResponseItemType<T>>;
+  (req: D & Partial<PaginationProps>): Promise<ResponseItemType<T>>;
 }
 
 // 返回类型封装

src/api/interface/produceManageType.ts

-import { InterItemFunction } from '~/api/interface';
+import { InterFunction, InterItemFunction } from '~/api/interface';
 
 export type MakeListType = InterItemFunction<
   any,
@@ -31,6 +31,54 @@ export type productListType = InterItemFunction<
     }[];
   }[]
 >;
+//产品-新增
+export type addProductType = InterFunction<
+  {
+    categoryId: number;
+    directoryId: number;
+    model: string;
+    productBrandId: number;
+    productName: string;
+  },
+  null
+>;
+//产品-编辑
+export type editProductType = InterFunction<
+  {
+    categoryId: number;
+    directoryId: number;
+    model: string;
+    productBrandId: number;
+    productName: string;
+    id?: number;
+  },
+  any
+>;
+//产品-删除
+export type deleteProductType = InterFunction<{ id: number }, null>;
+//产品-详情
+export type productDetailType = InterFunction<
+  { id: number },
+  {
+    id: number;
+    productName: string;
+    productBrandId: number;
+    productBrand: string;
+    model: string;
+    categoriesId: number;
+    categoryName: string;
+    directoryId: number;
+    directoryName: string;
+    productSpecList: {
+      id: number;
+      partNo: string;
+      specImage: string;
+      specName: string;
+      versionDesc: string;
+      productSkuId: number;
+    }[];
+  }
+>;
 //产品-规格-列表
 export type ProductSpecListType = InterItemFunction<
   { productSkuId: number },
@@ -43,3 +91,55 @@ export type ProductSpecListType = InterItemFunction<
     productSkuId: number;
   }[]
 >;
+//产品-规格-新增
+export type productSpecAddType = InterFunction<
+  {
+    partNo: string;
+    productSkuId: number;
+    specImage: string;
+    specName: string;
+    versionDesc: string;
+  },
+  null
+>;
+//产品-规格-编辑
+export type productSpecEditType = InterFunction<
+  {
+    partNo: string;
+    productSkuId: number;
+    specImage: string;
+    specName: string;
+    versionDesc: string;
+    id?: number;
+  },
+  null
+>;
+//产品-规格-删除
+export type productSpecDeleteType = InterFunction<{ id: number }, any>;
+//产品-规格-配置价格
+export type productSpecPriceType = InterFunction<
+  {
+    leaseTerm?: number;
+    productSpecId?: number;
+    specPrice: { cooperationTag: number; price: number }[];
+    type: number;
+  },
+  null
+>;
+//产品-规格-获取配置价格
+export type getProductSpecPriceType = InterFunction<
+  { leaseTerm?: number; productSpecId?: number; type: number },
+  { id: number; cooperationTag: number; price: number; leaseTerm: number }[]
+>;
+//产品-规格-配置价格修改
+export type editProductSpecPriceType = InterFunction<
+  {
+    leaseTerm?: number;
+    productSpecId?: number;
+    specPrice: { cooperationTag: number; price: number }[];
+    type: number;
+  },
+  null
+>;
+//加盟标签-列表
+export type cooperationTagType = InterFunction<any, { id: number; tagName: string }[]>;

src/api/modules/categoryManage.ts

 import axios from '../request';
-import { categoryListType, GoodsInfo } from '~/api/interface/categoryManage';
+import { categoryListType, directoryListType, GoodsInfo } from '~/api/interface/categoryManage';
 
 export class CategoryManageAPI {
   // 分类目录
@@ -8,6 +8,10 @@ export class CategoryManageAPI {
       params,
     });
   };
+  // 分类目录(类型)
+  static getDirectoryListClone: directoryListType = (params) => {
+    return axios.get('/pms/classify/getDirectoryList', { params });
+  };
 
   //目录列表不含分页
   static getDirectoryList = (params: { type: number }) => {

src/api/modules/makeManage.ts

@@ -9,21 +9,21 @@ import axios from '../request';
 export class MakeManageAPI {
   // 品牌-新增
   static addBrandInfo: MakeAddType = (params) => {
-    return axios.get('uavgoods/brand/addBrandInfo', { params });
+    return axios.get('/pms/brand/addBrandInfo', { params });
   };
 
   // 品牌-编辑
   static editBrandInfo: MakeEditType = (params) => {
-    return axios.get('uavgoods/brand/editBrandInfo', { params });
+    return axios.get('/pms/brand/editBrandInfo', { params });
   };
 
   // 品牌-列表
   static getListBrandInfo: MakeListType = (params) => {
-    return axios.get('uavgoods/brand/listBrandInfo', { params });
+    return axios.get('/pms/brand/listBrandInfo', { params });
   };
 
   //  品牌刪除
   static deleteBrandInfo: MakeDeleteType = (params) => {
-    return axios.get('uavgoods/brand/deleteBrandInfo', { params });
+    return axios.get('/pms/brand/deleteBrandInfo', { params });
   };
 }

src/api/modules/produceManageAPI.ts

 import axios from '../request';
 import {
-  MakeListType,
+  addProductType,
+  cooperationTagType,
+  deleteProductType,
+  editProductSpecPriceType,
+  editProductType,
+  getProductSpecPriceType,
+  productDetailType,
   productListType,
+  productSpecAddType,
+  productSpecDeleteType,
+  productSpecEditType,
   ProductSpecListType,
+  productSpecPriceType,
 } from '~/api/interface/produceManageType';
+import dayjs from 'dayjs';
 
 export class ProduceManageAPI {
   // 产品管理-分页列表
@@ -11,41 +22,53 @@ export class ProduceManageAPI {
     return axios.post('/pms/product/spec/listPageProductSku', data);
   };
   // 产品sku管理-删除产品sku
-  static removeProductSku = (params: unknown) => {
-    return axios.get('uavgoods/product/spec/removeProductSku', { params });
-  };
-  static directoryList = () => {
-    return axios.get('uavgoods/directory/directoryList');
-  };
-  // 分类列表(属于商品)
-  static getListGoodsTypeList = (type: number): any => {
-    return axios.get(`uavgoods/mgoods/getGoodsTypeInfoList/${type}`);
-  };
-  // 品牌-列表
-  static getListBrandInfo: MakeListType = (params) => {
-    return axios.get('uavgoods/brand/listBrandInfo', { params });
+  static removeProductSku: deleteProductType = (params) => {
+    return axios.get('/pms/product/spec/removeProductSku', { params });
   };
   // 产品sku管理-新增产品sku
-  static addProductSku = (data: unknown) => {
-    return axios.post('uavgoods/product/spec/addProductSku', data);
+  static addProductSku: addProductType = (data) => {
+    return axios.post('/pms/product/spec/addProductSku', data);
   };
 
   // 产品sku管理-编辑产品sku
-  static editProductSku = (data: unknown) => {
-    return axios.post('uavgoods/product/spec/editProductSku', data);
+  static editProductSku: editProductType = (data) => {
+    return axios.post('/pms/product/spec/editProductSku', data);
   };
-  // 产品规格管理---删除规格
-  static removeProductSpec = (params: unknown) => {
-    return axios.get('uavgoods/product/spec/removeProductSpec', { params });
-  };
-
   // 产品sku管理-编辑单个产品sku时的信息回显
-  static getProductSkuDetail = (params: unknown) => {
-    return axios.get('uavgoods/product/spec/getProductSkuDetail', { params });
+  static getProductSkuDetail: productDetailType = (params) => {
+    return axios.get('/pms/product/spec/getProductSkuDetail', { params });
   };
 
+  // 产品规格管理---删除规格
+  static removeProductSpec: productSpecDeleteType = (params) => {
+    return axios.get('/pms/product/spec/removeProductSpec', { params });
+  };
+  //产品规格管理---新增规格
+  static addProductSpec: productSpecAddType = (data) => {
+    return axios.post('/pms/product/spec/addOrEditProductSpec', data);
+  };
+  //产品规格管理---编辑规格
+  static editProductSpec: productSpecEditType = (data) => {
+    return axios.post('/pms/product/spec/addOrEditProductSpec', data);
+  };
   // 产品sku管理-产品规格管理-分页列表
   static listPageProductSpec: ProductSpecListType = (params) => {
     return axios.get('/pms/product/spec/listPageProductSpec', { params });
   };
+  //产品sku管理-产品规格管理-价格配置
+  static setProductSpecPrice: productSpecPriceType = (data) => {
+    return axios.post('/pms/product/spec/productSpecCPQ', data);
+  };
+  //产品sku管理-产品规格管理-获取价格配置
+  static getProductSpecPrice: getProductSpecPriceType = (data) => {
+    return axios.post('/pms/product/spec/getProductSpecCPQ', data);
+  };
+  //产品sku管理-产品规格管理-价格配置修改
+  static editProductSpecPrice: editProductSpecPriceType = (data) => {
+    return axios.post('/pms/product/spec/updateProductSpecCPQ', data);
+  };
+  //加盟标签-列表
+  static getCooperationListTag: cooperationTagType = () => {
+    return axios.get('/userapp/cooperation/listTag');
+  };
 }

src/api/request.ts

@@ -13,7 +13,7 @@ const service = axios.create({
 });
 service.interceptors.request.use(
   (config: any) => {
-    const token = Cookies.get('SHAREFLY-TOKEN');
+    const token = Cookies.get('SHAREFLY_TOKEN');
     // console.log('token --->', token);
     if (token) {
       config.headers.token = token;

src/pages/mallManage/industryManage/industryDetail/components/addOrEditSpecModal/index.tsx

@@ -50,7 +50,7 @@ const AddOrEditSpecModal: FC<ModalProps & PropsType> = ({
     {
       title: '序号',
       align: 'center',
-      render: (text: string, record: selfProduceItemType, index: number) => {
+      render: (_text: string, _record: selfProduceItemType, index: number) => {
         return (pagination.pageNo - 1) * pagination.pageSize + index + 1;
       },
     },

src/pages/mallManage/industryManage/industryDetail/components/productListModal/index.tsx

@@ -18,7 +18,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
       title: '序号',
       align: 'center',
       width: '50px',
-      render: (text: string, record: productInventoryListType[0], index: number) => {
+      render: (_text: string, _record: productInventoryListType[0], index: number) => {
         return index + 1;
       },
     },
@@ -27,7 +27,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
       dataIndex: 'productName',
       align: 'center',
       width: '100px',
-      render: (text: string, record: productInventoryListType[0]) => {
+      render: (_text: string, record: productInventoryListType[0]) => {
         return record.productSku.productName;
       },
     },
@@ -36,7 +36,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
       dataIndex: 'typeName',
       align: 'center',
       width: '100px',
-      render: (text: string, record: productInventoryListType[0]) => {
+      render: (_text: string, record: productInventoryListType[0]) => {
         return record.productSku.goodsTypeId;
       },
     },
@@ -45,7 +45,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
       dataIndex: 'model',
       align: 'center',
       width: '100px',
-      render: (text: string, record: productInventoryListType[0]) => {
+      render: (_text: string, record: productInventoryListType[0]) => {
         return record.productSku.model;
       },
     },
@@ -54,7 +54,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
       dataIndex: 'productBrand',
       align: 'center',
       width: '100px',
-      render: (text: string, record: productInventoryListType[0]) => {
+      render: (_text: string, record: productInventoryListType[0]) => {
         return record.productSku.productName;
       },
     },
@@ -62,7 +62,7 @@ const ProductListModal: FC<ModalProps & PropsType> = ({ open, onCancel, data })
       title: '产品规格',
       // align: "left",
       width: '200px',
-      render: (text: string, record) => {
+      render: (_text: string, record) => {
         if (record.select === 0) {
           return '不指定';
         }

src/pages/mallManage/industryManage/industryDetail/index.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { ColumnsType } from 'antd/es/table';
 import { IndustryManageAPI } from '~/api';
 import { useSearchParams } from 'react-router-dom';
-import { inventoryType } from '../industryList/propsType';
+// import { inventoryType } from '../industryList/propsType';
 import { InterDataType, PaginationProps } from '~/api/interface';
 import {
   industryDetailType,
@@ -48,13 +48,13 @@ function IndustryDetail() {
   // 方案规格
   const [industrySpecData, setIndustrySpecData] = useState<industrySpecType>([]);
   // 产品清单弹窗显示
-  const [visibleList, setVisibleList] = useState<boolean>(false);
+  // const [visibleList, setVisibleList] = useState<boolean>(false);
   // 产品规格清单
-  const [listData, setListData] = useState<inventoryType[]>([]);
+  // const [listData, setListData] = useState<inventoryType[]>([]);
   // 配置价格弹窗显示
-  const [visiblePrice, setVisiblePrice] = useState<boolean>(false);
+  // const [visiblePrice, setVisiblePrice] = useState<boolean>(false);
   // 当前配置价格数据
-  const [priceData, setPriceData] = useState([]);
+  // const [priceData, setPriceData] = useState([]);
   // 新增编辑规格弹窗是否显示
   const [addOrEditSpecModalShow, setAddOrEditSpecModalShow] = useState<boolean>(false);
   //关联产品弹窗
@@ -81,8 +81,8 @@ function IndustryDetail() {
       title: '规格图片',
       dataIndex: 'specImage',
       align: 'center',
-      render: (text: string, record) => {
-        return <Image width={50} height={50} src={record.specImage} alt='图片' />;
+      render: (text) => {
+        return <Image width={50} height={50} src={text} alt='图片' />;
       },
     },
     {
@@ -101,13 +101,13 @@ function IndustryDetail() {
       title: '操作',
       align: 'center',
       width: '250px',
-      render: (text: string, record: any) => {
+      render: (_text, record) => {
         return (
           <div>
             <Button
               type='link'
               onClick={() => {
-                handlePrice(record);
+                // handlePrice(record);
               }}
             >
               配置价格
@@ -139,20 +139,20 @@ function IndustryDetail() {
   });
 
   // 关闭产品清单
-  const handleListClosed = () => {
-    setListData([]);
-    setVisibleList(false);
-  };
+  // const handleListClosed = () => {
+  //   setListData([]);
+  //   setVisibleList(false);
+  // };
   // 打开配置价格弹窗
-  const handlePrice = (arr: any) => {
-    setPriceData(arr);
-    setVisiblePrice(true);
-  };
+  // const handlePrice = (arr: any) => {
+  //   setPriceData(arr);
+  //   setVisiblePrice(true);
+  // };
   // 关闭配置价格弹窗
-  const handlePriceClosed = () => {
-    setPriceData([]);
-    setVisiblePrice(false);
-  };
+  // const handlePriceClosed = () => {
+  //   setPriceData([]);
+  //   setVisiblePrice(false);
+  // };
   // 打开新增弹窗
   const handleAdd = () => {
     setAddOrEditSpecModalShow(true);

src/pages/mallManage/makeManage/makeList/index.tsx

-import { Button, Table } from 'antd';
+import { useEffect, useState } from 'react';
+import { Button, message, Modal, Table } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import { ColumnsType } from 'antd/es/table';
-// import AddOrEditMakeModal from './components/addOrEditMakeModal';
+import type { ColumnsType } from 'antd/es/table';
+import AddOrEditMakeModal from './components/addOrEditMakeModal';
+import { MakeManageAPI } from '~/api';
+import { MakeItemEntity } from '~/api/interface/makeManage';
+import { PaginationProps } from '~/api/interface';
 
-const MakeList = () => {
-  const columns: ColumnsType<any> = [
+const MakeManage = () => {
+  const columns: ColumnsType<MakeItemEntity> = [
     {
       title: '品牌名称',
       align: 'center',
@@ -18,28 +22,130 @@ const MakeList = () => {
     {
       title: '操作',
       align: 'center',
-      render: () => (
+      render: (_text: string, record: MakeItemEntity) => (
         <>
-          <Button type='link'>编辑</Button>
-          <Button type='link' danger>
+          <Button type='link' onClick={() => editMake(record)}>
+            编辑
+          </Button>
+          <Button type='link' danger onClick={() => deleteMake(record)}>
             删除
           </Button>
         </>
       ),
     },
   ];
+  const [tableData, setTableData] = useState<MakeItemEntity[]>([]);
+  const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
+    pageNo: 1,
+    pageSize: 10,
+    totalCount: 0,
+  });
+  // add or edit modal is show
+  const [currentMakeItem, setCurrentMakeItem] = useState<MakeItemEntity>();
+  const [addOrEditModalShow, setAddOrEditModalShow] = useState<boolean>(false);
+
+  // 新建
+  const addMakeClick = () => {
+    setAddOrEditModalShow(true);
+  };
+  // add or edit modal event
+  const addOrEditModalOk = () => {
+    getListBrandInfo({
+      pageSize: pagination.pageSize,
+      pageNo: pagination.pageNo,
+    });
+    setAddOrEditModalShow(false);
+    setCurrentMakeItem(undefined);
+  };
+  const addOrEditModalCancel = () => {
+    setCurrentMakeItem(undefined);
+    setAddOrEditModalShow(false);
+  };
+  // 品牌-列表
+  const getListBrandInfo = (data: Pick<PaginationProps, 'pageSize' | 'pageNo'>) => {
+    MakeManageAPI.getListBrandInfo(data).then(({ result }) => {
+      setTableData(result.list || []);
+      pagination.pageNo = data.pageNo;
+      pagination.pageSize = data.pageSize;
+      pagination.totalCount = result.totalCount;
+      setPagination(pagination);
+    });
+  };
+  // 分页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    getListBrandInfo({
+      pageSize,
+      pageNo,
+    });
+  };
+  // edit
+  const editMake = (record: MakeItemEntity) => {
+    setCurrentMakeItem(record);
+    setAddOrEditModalShow(true);
+  };
+  // delete
+  const deleteMake = (record: MakeItemEntity) => {
+    Modal.confirm({
+      content: '是否删除该品牌？',
+      onOk: () => {
+        MakeManageAPI.deleteBrandInfo({ id: record.id }).then(({ code, message: msg }) => {
+          if (code === '200') {
+            message.success('删除成功');
+            if (tableData.length === 1 && pagination.pageNo !== 1) {
+              pagination.pageNo--;
+            }
+            getListBrandInfo({
+              pageSize: pagination.pageSize,
+              pageNo: pagination.pageNo,
+            });
+          } else {
+            message.error(msg);
+          }
+        });
+      },
+    });
+  };
+
+  useEffect(() => {
+    getListBrandInfo({
+      pageSize: pagination.pageSize,
+      pageNo: pagination.pageNo,
+    });
+  }, []);
   return (
-    <div className='make-list'>
-      <div className='make-list-operate'>
-        <Button type='primary' icon={<PlusOutlined />}>
-          新增
-        </Button>
-      </div>
-      <div className='make-list-content' style={{ marginTop: '10px' }}>
-        <Table bordered columns={columns} />
-      </div>
-      {/*<AddOrEditMakeModal />*/}
+    <div className='make-manage'>
+      <Button
+        icon={<PlusOutlined />}
+        type='primary'
+        onClick={addMakeClick}
+        style={{ marginBottom: '10px' }}
+      >
+        新建
+      </Button>
+
+      <Table
+        columns={columns}
+        bordered
+        rowKey='id'
+        dataSource={tableData}
+        pagination={{
+          total: pagination.totalCount,
+          pageSize: pagination.pageSize,
+          current: pagination.pageNo,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+      />
+      <AddOrEditMakeModal
+        open={addOrEditModalShow}
+        onOk={addOrEditModalOk}
+        handleCancel={addOrEditModalCancel}
+        title={currentMakeItem ? '编辑品牌' : '新建品牌'}
+        makeItem={currentMakeItem}
+      />
     </div>
   );
 };
-export default MakeList;
+export default MakeManage;

src/pages/mallManage/produceManage/produceDetail/components/addOrEditProduceSpecModal/index.tsx

+import React, { FC, useEffect, useState } from 'react';
+import { Form, Input, Modal, message, ModalProps } from 'antd';
+import { Uploader } from '~/components/uploader';
+import { UploadOutlined } from '@ant-design/icons';
+import { ProduceManageAPI } from '~/api';
+import { InterDataType } from '~/api/interface';
+import { ProductSpecListType } from '~/api/interface/produceManageType';
+
+//产品规格返回类型
+type specType = InterDataType<ProductSpecListType>['list'];
+
+interface PropsType {
+  onCancel: () => void;
+  onOk: () => void;
+  data: specType[0] | undefined;
+  productSkuId: number;
+}
+
+const AddOrEditProduceSpecModal: FC<ModalProps & PropsType> = ({
+  open,
+  onCancel,
+  data,
+  onOk,
+  productSkuId,
+}) => {
+  // 表格事件
+  const [form] = Form.useForm();
+  //文件列表
+  const [fileList, setFileList] = useState<
+    {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[]
+  >([]);
+  // 关闭弹窗
+  const handleClosed = () => {
+    form.resetFields();
+    setFileList([]);
+    onCancel();
+  };
+  // 触发表单验证
+  const handleSubmit = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        const obj = { ...data, ...values, productSkuId };
+        ProduceManageAPI[!obj.id ? 'addProductSpec' : 'editProductSpec'](obj).then(({ code }) => {
+          if (code === '200') {
+            message.success('操作成功');
+            form.resetFields();
+            setFileList([]);
+            onOk();
+          }
+        });
+      })
+      .catch((err) => {
+        message.warning(err.errorFields[0].errors[0]).then();
+      });
+  };
+  //上传成功
+  const uploadSuccess = (
+    value: {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[],
+  ) => {
+    form.setFieldsValue({
+      specImage: value[0].url,
+    });
+  };
+  // componentsDidMounted
+  useEffect(() => {
+    if (data) {
+      form.setFieldsValue({
+        ...data,
+      });
+      setFileList([
+        {
+          uid: Math.random(),
+          name: 'img',
+          id: Math.random(),
+          url: data.specImage,
+        },
+      ]);
+    }
+  }, [data]);
+  return (
+    <div>
+      <Modal
+        open={open}
+        title='新增'
+        onCancel={handleClosed}
+        onOk={handleSubmit}
+        destroyOnClose
+        width={800}
+      >
+        <Form
+          name='form'
+          form={form}
+          layout='horizontal'
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 16 }}
+        >
+          <Form.Item
+            name='specName'
+            label='规格名称'
+            rules={[{ required: true, message: '请输入规格名称' }]}
+          >
+            <Input placeholder='请输入规格名称' allowClear maxLength={30} />
+          </Form.Item>
+          <Form.Item
+            name='specImage'
+            label='规格图片'
+            rules={[{ required: true, message: '请上传规格图片' }]}
+          >
+            <Uploader
+              fileUpload
+              listType='picture-card'
+              onChange={uploadSuccess}
+              defaultFileList={fileList}
+            >
+              <UploadOutlined />
+            </Uploader>
+          </Form.Item>
+          <Form.Item
+            name='partNo'
+            label='产品料号'
+            rules={[{ required: true, message: '请输入产品料号' }]}
+          >
+            <Input placeholder='请输入产品料号' allowClear maxLength={50} />
+          </Form.Item>
+          <Form.Item
+            name='versionDesc'
+            label='版本描述'
+            rules={[{ required: true, message: '请输入版本描述' }]}
+          >
+            <Input placeholder='请输入版本描述' allowClear maxLength={50} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+export default AddOrEditProduceSpecModal;

src/pages/mallManage/produceManage/produceDetail/components/setProduceSpecPriceModal/index.tsx

+import React, { FC, useEffect, useState } from 'react';
+import { Form, Input, message, Modal, Select, Row, Col, Button, ModalProps, Card } from 'antd';
+import { ProduceManageAPI } from '~/api';
+import { InterDataType } from '~/api/interface';
+import { cooperationTagType, ProductSpecListType } from '~/api/interface/produceManageType';
+import { filterObjAttr } from '~/utils';
+
+//加盟标签返回类型
+type cooperationTagResponseType = InterDataType<cooperationTagType>;
+//产品规格返回类型
+type specType = InterDataType<ProductSpecListType>['list'][0];
+
+interface PropsType {
+  onCancel: () => void;
+  data: specType | undefined;
+}
+
+const { Option } = Select;
+
+const SetProduceSpecPriceModal: FC<ModalProps & PropsType> = ({ open, onCancel, data }) => {
+  const tabList = [
+    {
+      key: '0',
+      tab: '销售价格',
+    },
+    {
+      key: '1',
+      tab: '租赁价格',
+    },
+  ];
+  //当前tab
+  const [currentTab, setCurrentTab] = useState<string>('0');
+  // 表格事件
+  const [form] = Form.useForm();
+  // 等级标签列表
+  const [tagInfoList, setTagInfoList] = useState<cooperationTagResponseType>([]);
+  // 选择的列表
+  const [selectList, setSelectList] = useState<number[]>([]);
+  //是否编辑
+  const [isEdit, setIsEdit] = useState<boolean>(false);
+
+  // 获取当前规格的价格
+  const getProductSpecPrice = (type: number, productSpecId?: number, leaseTerm?: number) => {
+    ProduceManageAPI.getProductSpecPrice({ type, productSpecId, leaseTerm }).then(({ result }) => {
+      setIsEdit(!!result.length);
+      const levelNumber: number[] = result
+        .filter((v) => v.cooperationTag != 0)
+        .map((v) => v.cooperationTag);
+      const Obj: any = result.reduce((pre: any, cur) => {
+        pre[cur.cooperationTag] = cur.price;
+        return { ...pre };
+      }, {});
+      if (result.length) {
+        form.setFieldsValue({ ...Obj, level: levelNumber });
+      } else {
+        form.setFieldsValue({
+          0: undefined,
+          level: undefined,
+        });
+      }
+      const arr = result
+        .map((i) => {
+          return i.cooperationTag;
+        })
+        .filter((i: number) => i !== 0);
+      setSelectList(arr);
+    });
+  };
+  // 获取等级标签
+  const getTagNameList = () => {
+    ProduceManageAPI.getCooperationListTag().then(({ result }) => {
+      setTagInfoList(result || []);
+    });
+  };
+  // 选择器点击事件
+  const handleChange = (value: number[]) => {
+    setSelectList(value);
+  };
+  // 将val转换为label
+  const transValtoLabel = (id: number) => {
+    const item = tagInfoList.find((i) => i.id === id);
+    return item ? item.tagName : id;
+  };
+  // 关闭弹窗
+  const handleClosed = () => {
+    setCurrentTab('0');
+    const data = Object.fromEntries(
+      selectList.map((i) => {
+        return [i, undefined];
+      }),
+    );
+    form.setFieldsValue({
+      0: undefined,
+      ...data,
+    });
+    setSelectList([]);
+    onCancel();
+  };
+  // 触发表单验证
+  const handleSubmit = () => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        const specPrice = Object.keys(filterObjAttr(values, ['leaseTerm', 'level'])).reduce(
+          (pre: any, cur: string) => {
+            return [...pre, { price: values[cur], cooperationTag: Number(cur) }];
+          },
+          [],
+        );
+        ProduceManageAPI[isEdit ? 'editProductSpecPrice' : 'setProductSpecPrice']({
+          specPrice,
+          productSpecId: data?.id,
+          type: Number(currentTab),
+          leaseTerm: values.leaseTerm,
+        }).then(({ code }) => {
+          if (code === '200') {
+            message.success('操作成功');
+            handleClosed();
+          }
+        });
+      })
+      .catch((err) => {
+        message.warning(err.errorFields[0].errors[0]).then();
+      });
+  };
+  // 价格正则
+  const priceValidator = (_rule: any, value: any) => {
+    const regExp = /^[1-9]\d{0,7}(\.\d{1,2})?$|^0(\.\d{1,2})?$/;
+    const bol: boolean = regExp.test(value);
+    if (!value) {
+      return Promise.reject(new Error('请输入定价金额'));
+    }
+    if (!bol) {
+      return Promise.reject(
+        new Error('金额应为数字,小数最多两位,整数最多八位,不能输入0开头的整数'),
+      );
+    }
+    return Promise.resolve();
+  };
+
+  //tab change
+  const onTabChange = (key: string) => {
+    form.resetFields();
+    switch (key) {
+      case '0':
+        getProductSpecPrice(Number(key), data?.id);
+        break;
+      case '1':
+        getProductSpecPrice(Number(key), data?.id, 0);
+        break;
+    }
+    setSelectList([]);
+    setCurrentTab(key);
+  };
+  //租期选择
+  const rentDateChange = (value: string) => {
+    getProductSpecPrice(Number(currentTab), data?.id, Number(value));
+  };
+  // componentsDidMounted
+  useEffect(() => {
+    if (data) {
+      getTagNameList();
+      getProductSpecPrice(Number(currentTab), data?.id);
+    }
+  }, [data]);
+  return (
+    <Modal
+      open={open}
+      title='配置价格'
+      destroyOnClose
+      width={768}
+      onCancel={handleClosed}
+      footer={[
+        <Button key='1' type='default' onClick={handleClosed}>
+          取消
+        </Button>,
+        <Button key='2' type='primary' onClick={handleSubmit}>
+          确认
+        </Button>,
+      ]}
+    >
+      <Card tabList={tabList} onTabChange={onTabChange}>
+        <Form
+          name='form'
+          form={form}
+          layout='horizontal'
+          labelWrap
+          initialValues={{ leaseTerm: 0 }}
+        >
+          {currentTab === '1' && (
+            <Form.Item
+              label='租期'
+              labelCol={{ span: 5 }}
+              wrapperCol={{ span: 15 }}
+              name='leaseTerm'
+              rules={[{ required: true, message: '请选择租期' }]}
+            >
+              <Select onChange={rentDateChange}>
+                <Select.Option value={0}>1-7天</Select.Option>
+                <Select.Option value={1}>8-15天</Select.Option>
+                <Select.Option value={2}>16-30天</Select.Option>
+                <Select.Option value={3}>31天以上</Select.Option>
+              </Select>
+            </Form.Item>
+          )}
+          <Form.Item
+            label='渠道等级'
+            name='level'
+            rules={[{ required: true, message: '请选择渠道等级' }]}
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 15 }}
+          >
+            <Select
+              placeholder='请选择渠道等级'
+              allowClear
+              mode='multiple'
+              onChange={handleChange}
+              value={selectList}
+            >
+              {tagInfoList.map((i, j) => (
+                <Option value={i.id} key={j}>
+                  {i.tagName}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Row>
+            <Col span={20}>
+              <Form.Item
+                name='0'
+                label='市场单价'
+                rules={[{ required: true, validator: priceValidator }]}
+                labelCol={{ span: 6 }}
+                wrapperCol={{ span: 18 }}
+              >
+                <Input placeholder='请输入市场单价' maxLength={11} allowClear />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <div style={{ margin: '6px 0 0 10px' }}>元/件</div>
+            </Col>
+          </Row>
+          {selectList.map((i, j) => (
+            <Row key={j}>
+              <Col span={20}>
+                <Form.Item
+                  name={i}
+                  label={transValtoLabel(i)}
+                  rules={[{ required: true, validator: priceValidator }]}
+                  key={j}
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}
+                >
+                  <Input placeholder='请输入定价金额' maxLength={11} allowClear />
+                </Form.Item>
+              </Col>
+              <Col span={4}>
+                <div style={{ margin: '6px 0 0 10px' }}>元/件</div>
+              </Col>
+            </Row>
+          ))}
+        </Form>
+      </Card>
+    </Modal>
+  );
+};
+export default SetProduceSpecPriceModal;

src/pages/mallManage/produceManage/produceDetail/index.tsx

 import React, { useEffect, useState } from 'react';
-import qs from 'query-string';
-import { Button, Descriptions, message, Table, Modal } from 'antd';
+import { Button, Descriptions, message, Table, Modal, Image } from 'antd';
 import { ColumnsType } from 'antd/es/table';
-// import { PriceModal } from '@/pages/goodsManage/productManage/comp/priceModal';
-// import { AddEditDetailModal } from '@/pages/goodsManage/productManage/comp/addEditDetailModal';
-import useOption from '~/common/hook/optionHook';
-import { ProductSkuType, ProductSpecType } from '../produceList/propsType';
+import AddOrEditProduceSpecModal from './components/addOrEditProduceSpecModal';
+import SetProduceSpecPriceModal from './components/setProduceSpecPriceModal';
 import { ProduceManageAPI } from '~/api';
+import { useSearchParams } from 'react-router-dom';
+import { InterDataType, PaginationProps } from '~/api/interface';
+import { productDetailType, ProductSpecListType } from '~/api/interface/produceManageType';
+
+//产品详情返回类型
+type detailType = InterDataType<productDetailType>;
+//产品规格返回类型
+type specType = InterDataType<ProductSpecListType>['list'];
 
 const { confirm } = Modal;
-function ProduceDetail(props: any) {
+function ProduceDetail() {
+  const [searchParams] = useSearchParams();
+
+  //产品id
+  const [productId, setProductId] = useState<number>(0);
   // 基本信息
-  const [detailData, setDetailData] = useState<ProductSkuType>();
+  const [detailData, setDetailData] = useState<detailType>();
   // 表格数据
-  const [tableData, setTableData] = useState<ProductSpecType[]>([]);
-  // 图片是否放大
-  const [visibleImg, setVisibleImg] = useState<boolean>(false);
-  // 当前放大图片
-  const [currentImgList, setCurrentImgList] = useState<{ src: string }[]>([]);
-  // 产品清单弹窗显示
-  const [visibleList, setVisibleList] = useState<boolean>(false);
-  // 当前放大图片
-  const [listData, setListData] = useState([]);
-  // 配置价格弹窗显示
-  const [visiblePrice, setVisiblePrice] = useState<boolean>(false);
-  // 当前配置价格数据
-  const [priceData, setPriceData] = useState([]);
-  // 配置价格弹窗显示
-  const [visibleAddEdit, setVisibleAddEdit] = useState<boolean>(false);
-  // 当前配置价格数据
-  const [addEditData, setAddEditData] = useState<ProductSpecType>();
-  // 按钮权限
-  const btnAdd = useOption(22155);
-  const btnSetPrice = useOption(22156);
-  const btnEdit = useOption(22157);
-  const btnDelete = useOption(22158);
-  // 预览图片
-  const previewImage = (url: string) => {
-    setVisibleImg(true);
-    setCurrentImgList([{ src: url }]);
-  };
-  // 关闭图片放大
-  const setVisibleEvent = () => {
-    setVisibleImg(false);
-  };
-  // 查看产品清单
-  const handleList = (arr: any) => {
-    setListData(arr);
-    setVisibleList(true);
-  };
-  // 关闭产品清单
-  const handleListClosed = () => {
-    setListData([]);
-    setVisibleList(false);
-  };
-  // 打开配置价格弹窗
-  const handlePrice = (arr: any) => {
-    setPriceData(arr);
-    setVisiblePrice(true);
-  };
-  // 关闭配置价格弹窗
-  const handlePriceClosed = () => {
-    setPriceData([]);
-    setVisiblePrice(false);
-  };
+  const [tableData, setTableData] = useState<specType>([]);
+  //新增、编辑产品规格弹窗
+  const [addOrEditProduceSpecModalShow, setAddOrEditProduceSpecModalShow] =
+    useState<boolean>(false);
+  // 当前数据
+  const [addEditData, setAddEditData] = useState<specType[0]>();
+  //配置价格弹窗
+  const [produceSpecPriceModalShow, setProduceSpecPriceModalShow] = useState<boolean>(false);
+  // 表格结构
+  const columns: ColumnsType<specType[0]> = [
+    { title: '规格名称', dataIndex: 'specName', align: 'center' },
+    {
+      title: '规格图片',
+      dataIndex: 'specImage',
+      align: 'center',
+      render: (text: string) => {
+        return <Image width={50} height={50} src={text} />;
+      },
+    },
+    { title: '版本描述', dataIndex: 'versionDesc', align: 'center' },
+    { title: '料号', dataIndex: 'partNo', align: 'center' },
+    {
+      title: '操作',
+      align: 'center',
+      width: '250px',
+      render: (_text: string, record) => {
+        return (
+          <div>
+            <Button
+              type='link'
+              onClick={() => {
+                handlePrice(record);
+              }}
+            >
+              配置价格
+            </Button>
+            <Button
+              type='link'
+              onClick={() => {
+                handleEdit(record);
+              }}
+            >
+              编辑
+            </Button>
+            <Button type='link' onClick={() => handleDelete(record)}>
+              删除
+            </Button>
+          </div>
+        );
+      },
+    },
+  ];
+  // 表格分页配置
+  const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
+    totalCount: 0,
+    pageSize: 10,
+    pageNo: 1,
+  });
   // 打开新增弹窗
   const handleAdd = () => {
-    const { id } = qs.parse(props.location.search);
-    setAddEditData({
-      createTime: '',
-      id: 0,
-      partNo: '',
-      productSkuId: id as unknown as number,
-      specImage: '',
-      specName: '',
-      versionDesc: '',
-    });
-    setVisibleAddEdit(true);
+    setAddEditData(undefined);
+    setAddOrEditProduceSpecModalShow(true);
   };
   // 打开编辑弹窗
-  const handleEdit = (arr: ProductSpecType) => {
-    setAddEditData(arr);
-    setVisibleAddEdit(true);
+  const handleEdit = (record: specType[0]) => {
+    setAddEditData(record);
+    setAddOrEditProduceSpecModalShow(true);
   };
   // 关闭新增编辑弹窗
-  const handleAddEditClosed = () => {
-    paginationChange(pagination.current, pagination.pageSize);
+  const addOrEditProduceSpecModalCancel = () => {
+    setAddOrEditProduceSpecModalShow(false);
     setAddEditData(undefined);
-    setVisibleAddEdit(false);
   };
-  // 删除产品
-  const handleDelete = (record: ProductSpecType) => {
+  const addOrEditProduceSpecModalOk = () => {
+    setAddOrEditProduceSpecModalShow(false);
+    getProductSpecList(productId);
+  }; // 删除产品
+  const handleDelete = (record: specType[0]) => {
     confirm({
       title: '提示',
       content: '删除后此数据将会丢失，确定删除吗？',
       async onOk() {
-        const res: any = await ProduceManageAPI.removeProductSpec({ id: record.id });
-        if (res.code !== '200') {
-          return message.error(res.message);
-        }
-        if (!res.result) {
-          await message.success('操作成功');
-          await paginationChange(pagination.current, pagination.pageSize);
+        const { code, result } = await ProduceManageAPI.removeProductSpec({ id: record.id });
+        if (!result && code === '200') {
+          message.success('操作成功');
+          getProductSpecList(productId);
           return;
         }
         message.info({
           content: (
             <div style={{ textAlign: 'left' }}>
-              {res.result.goodsName && (
+              {result.goodsName && (
                 <div>
                   <div style={{ color: 'red' }}>删除失败，已被商品关联</div>
-                  <div>关联商品为： {res.result.goodsName.join(',')}</div>
+                  <div>关联商品为： {result.goodsName.join(',')}</div>
                 </div>
               )}
-              {res.result.industrySkuName && (
+              {result.industrySkuName && (
                 <div>
                   <div style={{ color: 'red' }}>删除失败，已被方案关联</div>
-                  <div>关联方案SKU为： {getTipInfo(res.result.industrySkuName)}</div>
+                  <div>关联方案SKU为： {getTipInfo(result.industrySkuName)}</div>
                 </div>
               )}
             </div>
           ),
           duration: 2,
-          // key: date,
-          // onClick: () => {
-          //   message.destroy(date);
-          // },
         });
       },
     });
   };
-  // 表格结构
-  const columns: ColumnsType<ProductSpecType> = [
-    { title: '规格名称', dataIndex: 'specName', align: 'center' },
-    {
-      title: '规格图片',
-      dataIndex: 'specImage',
-      align: 'center',
-      render: (text: string) => {
-        return (
-          <img
-            style={{ width: '50px', height: '50px' }}
-            src={text}
-            alt='图片'
-            onClick={() => {
-              previewImage(text);
-            }}
-          />
-        );
-      },
-    },
-    { title: '版本描述', dataIndex: 'versionDesc', align: 'center' },
-    { title: '料号', dataIndex: 'partNo', align: 'center' },
-    {
-      title: '操作',
-      align: 'center',
-      width: '250px',
-      render: (text: string, record: ProductSpecType) => {
-        return (
-          <div>
-            {btnSetPrice ? (
-              <Button
-                type='link'
-                onClick={() => {
-                  handlePrice(record);
-                }}
-              >
-                配置价格
-              </Button>
-            ) : (
-              ''
-            )}
-            {btnEdit ? (
-              <Button
-                type='link'
-                onClick={() => {
-                  handleEdit(record);
-                }}
-              >
-                编辑
-              </Button>
-            ) : (
-              ''
-            )}
-            {btnDelete ? (
-              <Button type='link' onClick={() => handleDelete(record)}>
-                删除
-              </Button>
-            ) : (
-              ''
-            )}
-          </div>
-        );
-      },
-    },
-  ];
-  // 表格分页配置
-  const [pagination, setPagination] = useState({
-    total: 0,
-    pageSize: 10,
-    current: 1,
-    totalPage: 0,
-  });
   // 获取基本信息
-  const getDetailData = async () => {
-    const { id } = qs.parse(props.location.search);
-    const res: any = await ProduceManageAPI.getProductSkuDetail({ id });
-    if (res && res.code === '200') {
-      setDetailData(res.result);
-    }
+  const getDetailData = (id: number) => {
+    ProduceManageAPI.getProductSkuDetail({ id }).then(({ result }) => {
+      setDetailData(result || {});
+    });
   };
-  // 获取表格数据
-  // 新版通用部分(ES6+ for React) ZhangLK 2022/08/30 Start
-  // 加载列表
-  const getTableList = async (value = {}) => {
-    // 只需要修改这个地方的接口即可
-    const res: any = await ProduceManageAPI.listPageProductSpec({
-      pageNo: pagination.current,
+  //获取产品规格列表
+  const getProductSpecList = (productSkuId: number) => {
+    ProduceManageAPI.listPageProductSpec({
+      pageNo: pagination.pageNo,
       pageSize: pagination.pageSize,
-      ...value,
-      productSkuId: qs.parse(props.location.search).id,
+      productSkuId,
+    }).then(({ result }) => {
+      setTableData(result.list);
+      pagination.totalCount = result.totalCount;
+      setPagination(pagination);
     });
-    if (res && res.code === '200') {
-      // console.log("res -->", res);
-      const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
-      setPagination({
-        total: totalCount,
-        pageSize,
-        current: pageNo,
-        totalPage,
-      });
-      setTableData(list);
-    } else {
-      message.warning(res.message);
-    }
   };
   // 翻页
   const paginationChange = (pageNo: number, pageSize: number) => {
-    getTableList({ pageNo, pageSize }).then();
+    pagination.pageNo = pageNo;
+    pagination.pageSize = pageSize;
+    getProductSpecList(productId);
+  };
+  //配置价格
+  const handlePrice = (record: specType[0]) => {
+    setAddEditData(record);
+    setProduceSpecPriceModalShow(true);
+  };
+  const produceSpecPriceModalCancel = () => {
+    setProduceSpecPriceModalShow(false);
   };
   // 返回上一页
   const handleBack = () => {
@@ -248,9 +173,9 @@ function ProduceDetail(props: any) {
     return data.map((v: any) => `${v.industrySkuName}(${v.industrySpecNames})`).join('、');
   };
   useEffect(() => {
-    // if (!props.location.search) return;
-    // getDetailData().then();
-    // getTableList().then();
+    setProductId(Number(searchParams.get('id')));
+    getDetailData(Number(searchParams.get('id')));
+    getProductSpecList(Number(searchParams.get('id')));
   }, []);
   return (
     <div className='detail-wrap'>
@@ -269,7 +194,7 @@ function ProduceDetail(props: any) {
       >
         <Descriptions.Item label='产品名称'>{detailData?.productName}</Descriptions.Item>
         <Descriptions.Item label='产品目录'>{detailData?.directoryName}</Descriptions.Item>
-        <Descriptions.Item label='产品类型'>{detailData?.typeName}</Descriptions.Item>
+        <Descriptions.Item label='产品类型'>{detailData?.categoryName}</Descriptions.Item>
         <Descriptions.Item label='型号'>{detailData?.model}</Descriptions.Item>
         <Descriptions.Item label='产品品牌'>{detailData?.productBrand}</Descriptions.Item>
       </Descriptions>
@@ -280,15 +205,11 @@ function ProduceDetail(props: any) {
         labelStyle={{ width: '200px' }}
         style={{ marginTop: '20px' }}
       >
-        {btnAdd ? (
-          <Descriptions.Item>
-            <Button type='primary' onClick={handleAdd}>
-              新增规格
-            </Button>
-          </Descriptions.Item>
-        ) : (
-          ''
-        )}
+        <Descriptions.Item>
+          <Button type='primary' onClick={handleAdd}>
+            新增规格
+          </Button>
+        </Descriptions.Item>
         <Descriptions.Item>
           <Table
             size='small'
@@ -298,9 +219,9 @@ function ProduceDetail(props: any) {
             style={{ width: '100%' }}
             bordered
             pagination={{
-              total: pagination.total,
+              total: pagination.totalCount,
               pageSize: pagination.pageSize,
-              current: pagination.current,
+              current: pagination.pageNo,
               showSizeChanger: true,
               showQuickJumper: true,
               onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
@@ -310,12 +231,20 @@ function ProduceDetail(props: any) {
           />
         </Descriptions.Item>
       </Descriptions>
-      {/*<PriceModal visible={visiblePrice} closed={handlePriceClosed} data={priceData} />*/}
-      {/*<AddEditDetailModal*/}
-      {/*  visible={visibleAddEdit}*/}
-      {/*  closed={handleAddEditClosed}*/}
-      {/*  data={addEditData}*/}
-      {/*/>*/}
+      {/*新增、编辑*/}
+      <AddOrEditProduceSpecModal
+        open={addOrEditProduceSpecModalShow}
+        onCancel={addOrEditProduceSpecModalCancel}
+        data={addEditData}
+        onOk={addOrEditProduceSpecModalOk}
+        productSkuId={productId}
+      />
+      {/*配置价格*/}
+      <SetProduceSpecPriceModal
+        open={produceSpecPriceModalShow}
+        onCancel={produceSpecPriceModalCancel}
+        data={addEditData}
+      />
     </div>
   );
 }

src/pages/mallManage/produceManage/produceList/components/addOrEditProduceModal/index.tsx

-import React, { useEffect, useState } from 'react';
-import { Form, Input, Modal, message, Select } from 'antd';
+import React, { FC, useEffect, useState } from 'react';
+import { Form, Input, Modal, message, Select, ModalProps } from 'antd';
 import { CategoryManageAPI, ProduceManageAPI } from '~/api';
-import { ProductSkuType, MakeItemEntity } from '../../propsType';
-import { InterDataType } from '~/api/interface';
+import { InterDataType, InterReqType } from '~/api/interface';
 import { categoryListType, directoryListType } from '~/api/interface/categoryManage';
+import { MakeListType } from '~/api/interface/makeManage';
+import { addProductType } from '~/api/interface/produceManageType';
+import { filterObjAttr } from '~/utils';
 
 //目录返回类型
 type directoryType = InterDataType<directoryListType>;
 //分类返回类型
 type categoryType = InterDataType<categoryListType>['list'];
+//品牌返回类型
+type makeListType = InterDataType<MakeListType>['list'];
+//表单类型
+type addMakeParameterType = InterReqType<addProductType>;
 
 interface PropsType {
-  visible: boolean;
-  closed: any;
-  data: ProductSkuType | undefined;
-  makeList: MakeItemEntity[];
+  closed: () => void;
+  data: (addMakeParameterType & { id: number; categoriesId: number }) | undefined;
   decList: directoryType;
+  makeList: makeListType;
+  onOk: () => void;
 }
 
 const { Option } = Select;
 
-function AddOrEditProduceModal(props: PropsType) {
-  // 父组件传参
-  const { visible, closed, data, makeList, decList } = props;
+const AddOrEditProduceModal: FC<ModalProps & PropsType> = ({
+  open,
+  closed,
+  data,
+  decList,
+  makeList,
+  onOk,
+}) => {
   // 产品类型下拉列表
   const [productTypeSelectList, setProductTypeSelectList] = useState<categoryType>([]);
   // 表格事件
-  const [form] = Form.useForm();
+  const [form] = Form.useForm<addMakeParameterType>();
   // 关闭弹窗
   const handleClosed = async () => {
     form.resetFields();
@@ -36,15 +47,17 @@ function AddOrEditProduceModal(props: PropsType) {
   const handleSubmit = () => {
     form
       .validateFields()
-      .then(async (values) => {
-        const obj = { ...data, ...values };
-        const res: any = await ProduceManageAPI[!obj.id ? 'addProductSku' : 'editProductSku'](obj);
-        if (res && res.code === '200') {
-          message.success('操作成功');
-          await handleClosed();
-        } else {
-          message.warning(res.message);
-        }
+      .then((values) => {
+        const obj: any = { ...data, ...values };
+        ProduceManageAPI[!obj.id ? 'addProductSku' : 'editProductSku'](
+          filterObjAttr(obj, ['categoriesId']),
+        ).then(({ code }) => {
+          if (code === '200') {
+            message.success('操作成功');
+            form.resetFields();
+            onOk();
+          }
+        });
       })
       .catch((err) => {
         message.warning(err.errorFields[0].errors[0]).then();
@@ -60,20 +73,21 @@ function AddOrEditProduceModal(props: PropsType) {
   };
   // 目录修改
   const decSelectChange = (value: number) => {
-    form.setFieldValue('goodsTypeId', undefined);
+    form.setFieldValue('categoryId', undefined);
     getCategoryListByDirectory(value);
   };
   // componentsDidMounted
   useEffect(() => {
-    if (!data) return;
-    getCategoryListByDirectory(data.directoryId);
-    form.setFieldsValue({
-      ...data,
-    });
+    if (data) {
+      getCategoryListByDirectory(data.directoryId);
+      form.setFieldsValue({
+        ...data,
+      });
+    }
   }, [data]);
   return (
     <Modal
-      open={visible}
+      open={open}
       title={data?.id ? '编辑' : '新增'}
       onCancel={handleClosed}
       onOk={handleSubmit}
@@ -108,7 +122,7 @@ function AddOrEditProduceModal(props: PropsType) {
           </Select>
         </Form.Item>
         <Form.Item
-          name='goodsTypeId'
+          name='categoryId'
           label='产品类型'
           rules={[{ required: true, message: '请选择产品类型' }]}
         >
@@ -156,5 +170,5 @@ function AddOrEditProduceModal(props: PropsType) {
       </Form>
     </Modal>
   );
-}
+};
 export default AddOrEditProduceModal;

src/pages/mallManage/produceManage/produceList/index.tsx

@@ -3,36 +3,36 @@ import './index.scss';
 import { Button, Form, Input, message, Modal, Select, Table } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { ColumnsType } from 'antd/es/table';
-import { CategoryManageAPI, ProduceManageAPI } from '~/api';
+import { CategoryManageAPI, MakeManageAPI, ProduceManageAPI } from '~/api';
 import AddOrEditProduce from './components/addOrEditProduceModal';
-import { MakeItemEntity } from './propsType';
-import { InterDataType, PaginationProps } from '~/api/interface';
-import { productListType } from '~/api/interface/produceManageType';
+import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
+import { addProductType, productListType } from '~/api/interface/produceManageType';
 import { categoryListType, directoryListType } from '~/api/interface/categoryManage';
+import { MakeListType } from '~/api/interface/makeManage';
 
 //产品列表返回类型
 type produceListType = InterDataType<productListType>['list'];
+//产品列表参数类型
+type produceParametersType = Omit<InterReqType<productListType>, 'pageSize' | 'pageNo'>;
 //分类返回类型
 type categoryType = InterDataType<categoryListType>['list'];
 //目录返回类型
 type directoryType = InterDataType<directoryListType>;
+//品牌返回类型
+type makeListType = InterDataType<MakeListType>['list'];
+//新增编辑表单类型
+type addMakeParameterType = InterReqType<addProductType>;
 
 const { Option } = Select;
 const { confirm } = Modal;
-// 搜索表单的数据
-let query: any = {};
-
-// 表单提交
-interface FormType {
-  productName?: string;
-  goodsTypeId?: number;
-}
 
 function ProduceManage() {
   // 路由操作
   const navigate = useNavigate();
   // 表格数据
   const [tableData, setTableData] = useState<produceListType>([]);
+  //筛选表单
+  const [query, setQuery] = useState<produceParametersType>();
   // 加载中
   const [loading, setLoading] = useState<boolean>(false);
   // 产品类型下拉列表
@@ -40,9 +40,11 @@ function ProduceManage() {
   // 新增弹窗是否显示
   const [visibleAddEdit, setVisibleAddEdit] = useState(false);
   // 新增弹窗内容
-  const [addEditData, setAddEditData] = useState<produceListType[0]>();
+  const [addEditData, setAddEditData] = useState<
+    addMakeParameterType & { id: number; categoriesId: number }
+  >();
   // 品牌列表
-  const [makeList, setMakeList] = useState<MakeItemEntity[]>([]);
+  const [makeList, setMakeList] = useState<makeListType>([]);
   // 目录列表
   const [decList, setDecList] = useState<directoryType>([]);
   // 表格结构
@@ -66,7 +68,7 @@ function ProduceManage() {
       align: 'center',
       width: '15%',
       fixed: 'right',
-      render: (text: string, record) => {
+      render: (_text: string, record) => {
         return (
           <div>
             <Button type='link' onClick={() => handleDetail(record)}>
@@ -99,42 +101,61 @@ function ProduceManage() {
   };
   // 新增弹窗
   const handleAdd = () => {
+    getMakeList();
     setVisibleAddEdit(true);
     setAddEditData(undefined);
   };
   // 编辑弹窗
   const handleEdit = (record: produceListType[0]) => {
+    getMakeList();
     setVisibleAddEdit(true);
-    setAddEditData(record);
+    setAddEditData({
+      id: record.id,
+      categoryId: record.categoriesId,
+      directoryId: record.directoryId,
+      model: record.model,
+      productBrandId: record.productBrandId,
+      productName: record.productName,
+      categoriesId: record.categoriesId,
+    });
   };
   // 关闭弹窗
   const handleAddEditClosed = () => {
     setVisibleAddEdit(false);
     setAddEditData(undefined);
-    paginationChange(pagination.pageNo, pagination.pageSize);
+  };
+  const addOrEditProduceOk = () => {
+    setVisibleAddEdit(false);
+    setAddEditData(undefined);
+    getProduceList(query);
   };
   // 删除产品
   const handleDelete = (record: produceListType[0]) => {
     confirm({
       title: '提示',
       content: '删除后此数据将会丢失，确定删除吗？',
-      async onOk() {
-        const res: any = await ProduceManageAPI.removeProductSku({ id: record.id });
-        if (res && res.code === '200') {
-          await message.success('操作成功');
-          await paginationChange(pagination.pageNo, pagination.pageSize);
-        } else {
-          message.error(res.message);
-        }
+      onOk() {
+        ProduceManageAPI.removeProductSku({ id: record.id }).then(({ code }) => {
+          if (code === '200') {
+            if (pagination.pageNo != 1 && tableData.length === 1) {
+              pagination.pageNo -= 1;
+            }
+            message.success('删除成功');
+            getProduceList(query);
+          }
+        });
       },
     });
   };
   //产品列表
-  const getProduceList = () => {
+  const getProduceList = (query?: produceParametersType) => {
+    setLoading(true);
     ProduceManageAPI.listPageProductSku({
       pageNo: pagination.pageNo,
       pageSize: pagination.pageSize,
+      ...query,
     }).then(({ result }) => {
+      setLoading(false);
       setTableData(result.list || []);
       setPagination(pagination);
     });
@@ -143,29 +164,31 @@ function ProduceManage() {
   const paginationChange = (pageNo: number, pageSize: number) => {
     pagination.pageNo = pageNo;
     pagination.pageSize = pageSize;
-    getProduceList();
+    getProduceList(query);
   };
   // 表单提交
-  const onFinish = (val: FormType) => {
+  const onFinish = (val: produceListType) => {
     // 在这里对提交的数据做处理，如range转为开始和结束时间
     const data = Object.fromEntries(
       // 过滤为空项
       Object.entries({
         ...val,
-      }).filter((i) => i[1] !== '' && i[1] !== undefined && i[1] !== null),
+      }).filter(
+        (i) => (typeof i[1] === 'string' && i[1] !== '') || (i[1] !== undefined && i[1] !== null),
+      ),
     );
-    query = data;
-    // getTableList(data).then();
+    setQuery(data);
+    getProduceList(data);
   };
-  // 获取品牌列表
+  //品牌列表
   const getMakeList = () => {
-    ProduceManageAPI.getListBrandInfo({ pageNo: 1, pageSize: 999999 }).then(({ code, result }) => {
+    MakeManageAPI.getListBrandInfo({ pageNo: 1, pageSize: 9999 }).then(({ result }) => {
       setMakeList(result.list || []);
     });
   };
   // 目录列表
   const getDirectoryList = () => {
-    CategoryManageAPI.getDirectoryList({ type: 4 }).then(({ result }) => {
+    CategoryManageAPI.getDirectoryListClone({ type: 4 }).then(({ result }) => {
       setDecList(result || []);
     });
   };
@@ -185,7 +208,7 @@ function ProduceManage() {
   };
   // componentDidMount
   useEffect(() => {
-    getProduceList();
+    getProduceList(query);
     getDirectoryList();
   }, []);
 
@@ -245,11 +268,12 @@ function ProduceManage() {
         }}
       />
       <AddOrEditProduce
-        visible={visibleAddEdit}
+        open={visibleAddEdit}
         closed={handleAddEditClosed}
         data={addEditData}
         makeList={makeList}
         decList={decList}
+        onOk={addOrEditProduceOk}
       />
     </div>
   );

src/pages/mallManage/produceManage/produceList/propsType.ts

-// 产品sku管理-分页列表
-export interface ProductSkuType {
-  createTime: string;
-  goodsTypeId: number;
-  id: number;
-  model: string;
-  productBrand: number;
-  productName: string;
-  typeName: string;
-  productBrandId: number;
-  directoryId: number;
-  directoryName: string;
-}
-// 产品sku管理-产品规格管理-分页列表
-export interface ProductSpecType {
-  createTime: string;
-  id: number;
-  partNo: string;
-  productSkuId: number;
-  specImage: string;
-  specName: string;
-  versionDesc: string;
-}
-// 品牌管理-列表
-export type MakeItemEntity = {
-  createTime: string;
-  brandName: string;
-  id: number;
-};

src/router/privateRouter.tsx

@@ -11,7 +11,7 @@ function PrivateRouter() {
   const beforeEach = () => {
     // TODO: 判断是否登录 (需要改为实时获取地址栏的路由)
     const path = location.pathname;
-    const token = Cookies.get('SHAREFLY-TOKEN');
+    const token = Cookies.get('SHAREFLY_TOKEN');
     if (!token && path !== '/login') {
       location.replace('/login');
       return;

src/utils/index.ts

@@ -35,7 +35,7 @@ export const urlToBase64 = (url: string) => {
 };
 // 过滤对象属性
 export const filterObjAttr = (obj: any, key: string[]) => {
-  return Object.keys(obj).reduce((pre: any, cur: string) => {
+  return Object.keys(JSON.parse(JSON.stringify(obj))).reduce((pre: any, cur: string) => {
     if (!key.includes(cur)) {
       pre[cur] = obj[cur];
     }

vite.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
     proxy: {
       '/api': {
         // target: 'http://192.168.3.111:8077', // 后端女oms
+        // target: 'http://192.168.3.17:8099', // 狗旺
         target: 'https://test.iuav.shop',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),