功能：服务业务案例可上传多张图片

src/pages/categoryManage/serviceCategoryList/comp/addEditChildren/index.tsx

@@ -36,6 +36,7 @@ const AddEditChildrenView: React.FC<ModalProps & selfProps> = ({
     form
       .validateFields()
       .then(async (values) => {
+        // console.log('表单验证 --->', values);
         await handleSubmit(values);
       })
       .catch((err) => {
@@ -52,6 +53,9 @@ const AddEditChildrenView: React.FC<ModalProps & selfProps> = ({
       ...values,
       id: data?.id || undefined,
       industryTypeId: data?.id ? data?.industryTypeId : id,
+      caseImg: values?.caseImg
+        ? JSON.stringify((values?.caseImg as any).map((i: { url: string }) => ({ fileUrl: i.url })))
+        : undefined,
       saleState: 1,
     });
     if (res && res.code === '200') {
@@ -59,12 +63,22 @@ const AddEditChildrenView: React.FC<ModalProps & selfProps> = ({
       handleCancel();
     }
   };
+  // 获取图片
+  const getImgParse = (text: string) => {
+    try {
+      return JSON.parse(text)?.map((i: { fileUrl: string }) => ({ url: i.fileUrl }));
+    } catch (e) {
+      return [{ url: text }];
+    }
+  };
   // componentDidMount
   useEffect(() => {
     if (!open) return;
     if (!data) return;
-    form.setFieldsValue(data);
-    console.log('data --->', data);
+    form.setFieldsValue({
+      ...data,
+      caseImg: getImgParse(data?.caseImg),
+    });
   }, [open]);
   return (
     <Modal title={title} open={open} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
@@ -117,11 +131,11 @@ const AddEditChildrenView: React.FC<ModalProps & selfProps> = ({
           <Uploader
             listType={'picture-card'}
             fileUpload
-            fileLength={1}
+            fileLength={4}
             fileSize={10}
             fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
-            onChange={(e) => form.setFieldValue('caseImg', e.at(0) ? e.at(0)?.url : undefined)}
-            defaultFileList={data?.caseImg ? [{ url: data?.caseImg }] : []}
+            onChange={(e) => form.setFieldValue('caseImg', e?.length ? e : undefined)}
+            defaultFileList={data?.caseImg ? getImgParse(data?.caseImg as any) : []}
           >
             <PlusOutlined />
           </Uploader>

src/pages/categoryManage/serviceCategoryList/detail/index.tsx

@@ -67,6 +67,14 @@ const ServiceCategoryDetail: React.FC = () => {
       setInspectionDetail(res.result);
     }
   };
+  // 获取图片
+  const getImgParse = (text: string) => {
+    try {
+      return JSON.parse(text);
+    } catch (e) {
+      return [{ fileUrl: text }];
+    }
+  };
   // 组件挂载
   useEffect(() => {
     getInspectionDetail().then();
@@ -135,7 +143,11 @@ const ServiceCategoryDetail: React.FC = () => {
         </Descriptions.Item>
         <Descriptions.Item label='服务编号'>{inspectionDetail?.inspectionNo}</Descriptions.Item>
         <Descriptions.Item label='业务案例图片'>
-          <Image src={inspectionDetail?.caseImg} width={40} height={40} />
+          {getImgParse(inspectionDetail?.caseImg as string).map(
+            (i: { fileUrl: string }, j: React.Key) => (
+              <Image src={i.fileUrl} width={40} height={40} key={j} />
+            ),
+          )}
         </Descriptions.Item>
         <Descriptions.Item label='业务案例视频'>
           {inspectionDetail?.caseVideo && (

src/pages/categoryManage/serviceCategoryList/index.tsx

@@ -93,6 +93,14 @@ function ServiceCategoryList() {
     };
     navigate(`/categoryManage/mallCategoryList/detail?${qs.stringify(search)}`);
   };
+  // 获取图片
+  const getImgParse = (text: string) => {
+    try {
+      return JSON.parse(text)?.[0]?.fileUrl;
+    } catch (e) {
+      return text;
+    }
+  };
   // 表格列
   const columns: ColumnsType<TableType[0]> = [
     {
@@ -121,7 +129,7 @@ function ServiceCategoryList() {
       title: '业务案例图片',
       dataIndex: 'caseImg',
       align: 'center',
-      render: (text) => <>{text && <Image src={text} width={40} height={40} />}</>,
+      render: (text) => <>{text && <Image src={getImgParse(text)} width={40} height={40} />}</>,
     },
     {
       title: '业务案例视频',