功能：后台管理页面添加商品绑定话题id功能

src/api/interface/goodsType.ts

@@ -109,6 +109,7 @@ export type exchangeGoodsInfoType = InterFunction<{ firstId: number; secondId: n
 //商品-新增（新）
 //商品item类型
 type goodsItemType = {
+  gambitId: number;
   categoryPrimaryId: number;
   categorySubId: number;
   description: string;

src/pages/forumManage/topicList/components/addTopicModal/index.tsx

@@ -15,9 +15,17 @@ interface selfProps {
   onOk: () => void;
   onCancel: () => void;
   currentTopicItem: topicListType[0] | undefined;
+  showProperty?: boolean;
 }
 
-const AddTopicModal: FC<ModalProps & selfProps> = ({ open, onCancel, onOk, currentTopicItem }) => {
+
+const AddTopicModal: FC<ModalProps & selfProps> = ({
+  open,
+  onCancel,
+  onOk,
+  currentTopicItem,
+  showProperty = true,
+}) => {
   const [form] = Form.useForm<addTopicParams>();
   const [gambitIconFileList, setGambitIconFileList] = useState<any>([]);
   const [gambitCoverFileList, setGambitCoverFileList] = useState<any>([]);
@@ -130,13 +138,15 @@ const AddTopicModal: FC<ModalProps & selfProps> = ({ open, onCancel, onOk, curre
             <UploadOutlined />
           </Uploader>
         </Form.Item>
-        <Form.Item
-          label='属性'
-          name='gambitProperty'
-          rules={[{ required: true, message: '请选择属性' }]}
-        >
-          <Select placeholder='请选择属性' options={gambitPropertyList}></Select>
-        </Form.Item>
+        {showProperty && (
+          <Form.Item
+            label='属性'
+            name='gambitProperty'
+            rules={[{ required: true, message: '请选择属性' }]}
+          >
+            <Select placeholder='请选择属性' options={gambitPropertyList}></Select>
+          </Form.Item>
+        )}
       </Form>
     </Modal>
   );

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

@@ -8,3 +8,17 @@
     transform: translate(50%,-25%);
   }
 }
+.gambit-choose {
+  display: flex;
+  marginLeft: 200px;
+  width: 800px;
+  flex-wrap: nowrap;
+  .Form-item {
+    width: 300px;
+    margin-right: 20px;
+    padding-left: 20px;
+    .Select {
+      padding-left: 400px;
+    }
+  }
+}
\ No newline at end of file

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

@@ -3,16 +3,19 @@ import { Uploader } from '~/components/uploader';
 import type { RadioChangeEvent } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { InterDataType } from '~/api/interface';
+import { InterDataType, InterListType } from '~/api/interface';
 import { categoryListRespType } from '~/api/interface/categoryManage';
-import { CategoryManageAPI } from '~/api';
+import { CategoryManageAPI, ForumManageAPI } from '~/api';
 import deletePng from '~/assets/image/delete.png';
 import './index.scss';
 import { useSelector } from 'react-redux';
+import AddTopicModal from '~/pages/forumManage/topicList/components/addTopicModal';
+import { listGambitType } from '~/api/interface/forumManageType';
 
 //分类返回类型
 type categoryType = InterDataType<categoryListRespType>['list'];
-
+// 话题列表返回类型
+type topicListType = InterListType<listGambitType>;
 interface selfProps {
   ref: any;
 }
@@ -38,18 +41,27 @@ export type baseInfoType = {
     uid: number;
     url: string;
   }[];
+  gambitId: number;
   categoryId: number[];
   shelfStatus: number;
   labelShow: number;
   goodsLabel: string;
 };
-
+const { Option } = Select;
 const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
   const { userInfo } = useSelector((state: any) => state.UserInfo);
   const [baseInfoForm] = Form.useForm<baseInfoType>();
   const [labelShow, setLabelShow] = useState<boolean>(false);
   //分类列表
   const [categoryList, setCategoryList] = useState<categoryType>([]);
+  const [addTopicModalShow, setAddTopicModalShow] = useState<boolean>(false);
+  const [currentTopicItem, setCurrentTopicItem] = useState<topicListType[0]>();
+  const [gambitList, setGambitList] = useState<
+    {
+      id: number;
+      name: string;
+    }[]
+  >([]);
   //主图
   const [mainFileList, setMainFileList] = useState<
     {
@@ -125,6 +137,32 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
       setCategoryList(result.list || []);
     });
   };
+
+  const getGambitList = () => {
+    ForumManageAPI.getTopicList({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {
+      // 使用map方法创建新的数组，仅包含id和gambitName字段
+      const gambitTempList = result.list.map((item) => ({
+        id: item.id,
+        name: item.gambitName,
+      }));
+      const gambitListWithDefinedNames = gambitTempList.map((item) => ({
+        ...item,
+        name: item.name || '',
+      }));
+      setGambitList(gambitListWithDefinedNames);
+    });
+  };
+  const addTopicModalShowOk = () => {
+    setAddTopicModalShow(false);
+  };
+  const addTopicModalCancel = () => {
+    setAddTopicModalShow(false);
+  };
+  const addTopicModalShowClick = (record?: topicListType[0]) => {
+    setCurrentTopicItem(record ? { ...record } : undefined);
+    setAddTopicModalShow(true);
+  };
+
   //视频删除
   const deleteVideo = () => {
     setVideoFileList([]);
@@ -133,8 +171,8 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
 
   useEffect(() => {
     getCategoryList();
+    getGambitList();
   }, []);
-
   return (
     <div className='base-info'>
       <Form
@@ -185,6 +223,7 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
         <Form.Item label='商品视频' name='videoList'>
           {videoFileList.length ? (
             <div className='goods-video-wrap'>
+              {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
               <video
                 src={videoFileList[0].url}
                 style={{ width: '200px', height: '200px' }}
@@ -248,6 +287,35 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
             <Radio value={0}>不显示</Radio>
           </Radio.Group>
         </Form.Item>
+        <div className='flex-start gambit-choose'>
+          <Form.Item
+            label='关联话题'
+            name='gambitId'
+            rules={[{ required: false, message: '请选择话题' }]}
+          >
+            <Select
+              placeholder='请选择话题'
+              showSearch
+              optionFilterProp='children' // 指定筛选的字段
+              filterOption={(input, option) =>
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                option?.children?.toLowerCase().includes(input.toLowerCase())
+              }
+              // value={baseInfoForm.getFieldValue('gambitId')}
+              // onSelect={(e) => baseInfoForm.setFieldValue('gambitId', e)}
+            >
+              {gambitList.map((i, j) => (
+                <Option key={j} value={i.id}>
+                  {i.name}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Button type='primary' onClick={() => addTopicModalShowClick()}>
+            新建
+          </Button>
+        </div>
         {labelShow ? (
           <Form.Item
             label='商品标签'
@@ -259,6 +327,13 @@ const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
         ) : (
           ''
         )}
+        <AddTopicModal
+          open={addTopicModalShow}
+          onCancel={addTopicModalCancel}
+          onOk={addTopicModalShowOk}
+          currentTopicItem={currentTopicItem}
+          showProperty={false}
+        />
       </Form>
     </div>
   );

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

@@ -101,12 +101,19 @@ const GoodsAddOrEditOrDetail = () => {
     ])
       .then((values: any) => {
         const addGoodsEditReq = {
-          ...filterObjAttr(values[0], ['mainImgList', 'subImgList', 'videoList', 'categoryId']),
+          ...filterObjAttr(values[0], [
+            'mainImgList',
+            'subImgList',
+            'videoList',
+            'gambitList',
+            'categoryId',
+          ]),
           resourcesList: [
             ...values[0].mainImgList.map((v: any) => ({ type: 0, url: v.url })),
             ...(values[0].subImgList?.map((v: any) => ({ type: 1, url: v.url })) || []),
             ...(values[0].videoList?.map((v: any) => ({ type: 2, url: v.url })) || []),
           ],
+          gambitId: values[0].gambitId,
           categoryPrimaryId: values[0].categoryId[0],
           categorySubId: values[0].categoryId.length === 2 ? values[0].categoryId[1] : undefined,
           goodsDetails,
@@ -166,6 +173,7 @@ const GoodsAddOrEditOrDetail = () => {
         goodsLabel: result.goodsLabel || undefined,
         priceShow: result.priceShow,
         recommend: result.recommend,
+        gambitId: result.gambitId,
       });
       baseInfoRef.current.setLabelShow(!!result.labelShow);
       baseInfoRef.current.mediaData.setMainFileList(mainImgList);