标签

src/pages/ProductList/add.tsx

@@ -8,7 +8,6 @@ import {
   ProCard,
   ProForm,
   ProFormCascader,
-  ProFormCheckbox,
   ProFormDigit,
   ProFormInstance,
   ProFormList,
@@ -20,9 +19,9 @@ import {
 import { PageContainer } from '@ant-design/pro-layout';
 import { DndContext, DragEndEvent, PointerSensor, useSensor } from '@dnd-kit/core';
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { Button, Col, message, Row } from 'antd';
+import { Button, Col, Flex, message, Row, Tag, Tooltip } from 'antd';
 import Upload, { RcFile, UploadFile } from 'antd/es/upload';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { CSS } from '@dnd-kit/utilities';
 import { getLabelListForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductLabelConfigController';
 
@@ -62,7 +61,15 @@ const Detail: React.FC<any> = () => {
 
   const [colorData, setColorData] = useState<API.PbcCommonData[]>()
   const [commonDataList, setCommonDataList] = useState<API.PbcCommonData[]>()
-  const [labelAssociations, setLabelAssociationList] = useState<API.PbcProductLabelAssociation_[]>()
+  // const [labelAssociations, setLabelAssociationList] = useState<API.PbcProductLabelAssociation_[]>()
+
+  const [tags, setTags] = useState<API.PbcProductLabelConfig_[]>([])
+  // const [inputVisible, setInputVisible] = useState(false);
+  // const [loading, setLoading] = useState(false);
+  // const [inputValue, setInputValue] = useState('');
+  // const inputRef = useRef<InputRef>(null);
+  const [selectedTags, setSelectedTags] = useState<number[]>([]);
+  const [pbcBusinessId, setPbcBusinessId] = useState<number>();
 
   const formRef = useRef<ProFormInstance>();
 
@@ -90,14 +97,75 @@ const Detail: React.FC<any> = () => {
     }
   }
 
+  const getTags = () => {
+    if (pbcBusinessId) {
+      getLabelListForAdminUsingPost({pbcBusinessId}).then(res => {
+        const arr: API.PbcProductLabelConfig_[] = []
+        if (res.retcode && res.data) {
+          const data: API.PbcProductLabelConfigVO = res.data || [] as API.PbcProductLabelConfigVO
+          if (data.systemLabelList) {
+            arr.push(...data.systemLabelList)
+          }
+          if (data.frequentLabelList) {
+            arr.push(...data.frequentLabelList)
+          }
+          if (data.businessLabelList) {
+            arr.push(...data.businessLabelList)
+          }
+        }
+        setTags(arr)
+      }).catch(() => { setTags([]) })
+    }
+  }
+
+  useEffect(() => {
+    getTags()
+  }, [pbcBusinessId])
+
+  // useEffect(() => {
+  //   if (inputVisible) {
+  //     inputRef.current?.focus();
+  //   }
+  // }, [inputVisible]);
+
+  const handleChange = (tag: API.PbcProductLabelConfig_, checked: boolean) => {
+    const nextSelectedTags = checked && tag.pbcId
+      ? [...selectedTags, tag.pbcId]
+      : selectedTags.filter((t) => t !== tag.pbcId);
+    setSelectedTags(nextSelectedTags);
+  };
+
+  // const showInput = () => {
+  //   setInputVisible(true);
+  // };
+
+  // const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   setInputValue(e.target.value);
+  // };
+
+  // const handleInputConfirm = () => {
+  //   if (inputValue && pbcBusinessId) {
+  //     setLoading(true)
+  //     const params: API.PbcProductLabelConfig_ = {
+  //       pbcLabelName: inputValue,
+  //       pbcBusinessId: pbcBusinessId
+  //     }
+  //     addOrUpdateLabelConfigForAdminUsingPost(params).then(res => {
+  //       if (res.retcode) {
+  //         getTags()
+  //         setInputVisible(false);
+  //         setInputValue('');
+  //       }
+  //     }).catch(() => { }).finally(() => setLoading(false))
+  //   }
+  // };
+
   const onSubmit = async (values: any) => {
     let pbcProductOriginalProvince = undefined, pbcProductOriginalCity = undefined;
     if (values?.pbcZone?.length) {
       ([pbcProductOriginalProvince, pbcProductOriginalCity] = values.pbcZone);
     }
     const [pbcProductTopCategoryId, pbcProductParentCategoryId, pbcProductCategoryId] = values.pbcProductCategoryIdList
-    console.log(values.colorItems)
-    console.log(values.specItems)
     const specItems: API.PbcProductCommonData[] = []
     if (colorData && values.colorItems && values.colorItems.length > 0) {
       for (let i = 0; i < values.colorItems.length; i++) {
@@ -129,7 +197,11 @@ const Detail: React.FC<any> = () => {
         })
       }
     }
-    const labelAssociationList = labelAssociations?.filter(e => values.labelAssociationList && values.labelAssociationList.includes(e.pbcId))
+    //标签
+    let labelAssociationList: API.PbcProductLabelConfig_[] = []
+    if (selectedTags.length > 0) {
+      labelAssociationList = tags.filter(it => it.pbcId && selectedTags.includes(it.pbcId))
+    }
     const params: API.PbcProductDTO = {
       ...values,
       labelAssociationList,
@@ -205,19 +277,20 @@ const Detail: React.FC<any> = () => {
                 ]}
                 onChange={(value) => {
                   formRef.current?.setFieldValue('labelAssociationList', [])
-                  if (value) {
-                    getLabelListForAdminUsingPost({ pbcBusinessId: value as number }).then(res => {
-                      if (res.retcode && res.data) {
-                        setLabelAssociationList(res.data.systemLabelList)
-                      } else {
-                        setLabelAssociationList([])
-                      }
-                    }).catch(() => {
-                      setLabelAssociationList([])
-                    })
-                  } else {
-                    setLabelAssociationList([])
-                  }
+                  setPbcBusinessId(value as number)
+                  // if (value) {
+                  //   getLabelListForAdminUsingPost({ pbcBusinessId: value as number }).then(res => {
+                  //     if (res.retcode && res.data) {
+                  //       setLabelAssociationList(res.data.systemLabelList)
+                  //     } else {
+                  //       setLabelAssociationList([])
+                  //     }
+                  //   }).catch(() => {
+                  //     setLabelAssociationList([])
+                  //   })
+                  // } else {
+                  //   setLabelAssociationList([])
+                  // }
                 }}
                 request={ async () => {
                   const msg = await getPbcBusinessListUsingPost();
@@ -281,7 +354,46 @@ const Detail: React.FC<any> = () => {
           </Row>
           <Row gutter={20}>
             <Col span={24}>
-              <ProFormCheckbox.Group
+              <ProForm.Item label="商品标签">
+                <Flex gap="8px 0" wrap>
+                  {tags.map((tag) => {
+                    const isLongTag = tag.pbcLabelName && tag.pbcLabelName.length > 20;
+                    const tagElem = (
+                      <Tag.CheckableTag
+                        key={tag.pbcLabelName}
+                        checked={!!tag.pbcId && selectedTags.includes(tag.pbcId)}
+                        onChange={(checked) => handleChange(tag, checked)}
+                        style={{ userSelect: 'none', padding: 8, border: '1px solid' }}
+                      >
+                        {isLongTag ? `${tag.pbcLabelName?.slice(0, 20)}...` : tag.pbcLabelName}
+                      </Tag.CheckableTag>
+                    );
+                    return isLongTag ? (
+                      <Tooltip title={tag.pbcLabelName} key={tag.pbcLabelName}>
+                        {tagElem}
+                      </Tooltip>
+                    ) : (
+                      tagElem
+                    );
+                  })}
+                  {/* {inputVisible ? (
+                    <Input
+                      ref={inputRef}
+                      type="text"
+                      size="small"
+                      value={inputValue}
+                      onChange={handleInputChange}
+                      onBlur={handleInputConfirm}
+                      onPressEnter={handleInputConfirm}
+                    />
+                  ) : (
+                    <Tag style={{ display: 'flex', alignItems: 'center' }} icon={<PlusOutlined />} onClick={showInput}>
+                      添加
+                    </Tag>
+                  )} */}
+                </Flex>
+              </ProForm.Item>
+              {/* <ProFormCheckbox.Group
                 name="labelAssociationList"
                 layout="horizontal"
                 label="商品标签"
@@ -294,7 +406,7 @@ const Detail: React.FC<any> = () => {
                 rules={[
                   { required: true, message: '请选择商品标签' },
                 ]}
-              />
+              /> */}
             </Col>
           </Row>
           {colorData ? <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>