fix: 文件列表样式修改

packages/base-components/RichText/src/demos/demo.jsx

@@ -5,89 +5,90 @@
  */
 
 import React from 'react';
-import { Button } from 'antd';
 import RichText from '../index';
 import RichTextShow from '../RichTextShow';
+import {  ConfigProvider } from 'antd';
 // import { projectManageService } from '@/api';
 import styles from './demo.less';
 
 class RichTextDemo extends React.Component {
-    constructor(props) {
-        super(props);
-        this.myRichText = React.createRef();
-        this.state = {
-            personList: [
-                { userId: 568, userName: '徐乐' },
-                { userId: 569, userName: '余苏苏' },
-                { userId: 572, userName: '周宏民' },
-            ],
-            content: '',
-            fileList: [],
-        };
-    }
-
-    getData = async () => {
-        // const res = await projectManageService.GetWorkHourUserList({ projectId: 19 });
-        // this.setState({
-        //     // personList: res.data || [],
-        // });
-        // const arr = [
-        //     {
-        //         name: '工时管理_工时日报 (1).xlsx',
-        //         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        //         size: 8192,
-        //         path:
-        //             '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=b0422fdb-6c63-4b34-8021-b54102236bcb/工时管理_工时日报/(1).xlsx',
-        //     },
-        //     {
-        //         name: '浊度.png',
-        //         type: 'image/png',
-        //         size: 6789,
-        //         path:
-        //             '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=fd00ce06-52c0-410a-bd30-8aed9131a616/浊度.png',
-        //     },
-        // ];
-        // // this.setState({ fileList: arr });
-        // this.myRichText.current && this.myRichText.current.setHtml('');
-
+  constructor(props) {
+    super(props);
+    this.myRichText = React.createRef();
+    this.state = {
+      personList: [
+        { userId: 568, userName: '徐乐' },
+        { userId: 569, userName: '余苏苏' },
+        { userId: 572, userName: '周宏民' },
+      ],
+      content: '',
+      fileList: [],
     };
+  }
 
-    componentDidMount = () => {
-        this.getData();
-    };
+  getData = async () => {
+    // const res = await projectManageService.GetWorkHourUserList({ projectId: 19 });
+    // this.setState({
+    //     // personList: res.data || [],
+    // });
+    const arr = [
+      {
+        name: '工时管理_工时日报 (1).xlsx',
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        size: 8192,
+        path: '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=b0422fdb-6c63-4b34-8021-b54102236bcb/工时管理_工时日报/(1).xlsx',
+      },
+      {
+        name: '浊度.png',
+        type: 'image/png',
+        size: 6789,
+        path: '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=fd00ce06-52c0-410a-bd30-8aed9131a616/浊度.png',
+      },
+    ];
+    this.setState({ fileList: arr });
+    // this.myRichText.current && this.myRichText.current.setHtml('');
+  };
+
+  componentDidMount = () => {
+    this.getData();
+  };
 
-    componentDidUpdate = (propNev, stateNev) => { };
+  componentDidUpdate = (propNev, stateNev) => {};
 
-    componentWillUnmount() {
-        this.setState = () => { };
-    }
+  componentWillUnmount() {
+    this.setState = () => {};
+  }
 
-    render() {
-        return (
-            <div className={styles.RichTextDemo}>
-                <div className={styles.RichTextDemoContainer}>
-                    <RichText
-                        // content={this.state.content}
-                        personList={this.state.personList}
-                        onChange={val => {
-                            this.setState({ content: val });
-                        }}
-                        onChangeFile={arr => {
-                            this.setState({ fileList: arr });
-                        }}
-                        fileList={this.state.fileList}
-                        projectId={19}
-                        ref={this.myRichText}
-                    />
-                </div>
-                {/* <div className={styles.contentBox}>{this.state.content}</div> */}
-                <div className={styles.contentBox}>
-                    <RichTextShow content={this.state.content} onClickImg={src => { }} fileList={this.state.fileList} />
-                </div>
-                <div className={styles.contentBox}>{this.state.content}</div>
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div className={styles.RichTextDemo}>
+        <div className={styles.RichTextDemoContainer}>
+          <RichText
+            // content={this.state.content}
+            personList={this.state.personList}
+            onChange={(val) => {
+              this.setState({ content: val });
+            }}
+            onChangeFile={(arr) => {
+              this.setState({ fileList: arr });
+            }}
+            fileList={this.state.fileList}
+            projectId={19}
+            ref={this.myRichText}
+          />
+        </div>
+        {/* <div className={styles.contentBox}>{this.state.content}</div> */}
+        {/* <div className={styles.contentBox}>
+          <RichTextShow
+            content={this.state.content}
+            onClickImg={(src) => {}}
+            fileList={this.state.fileList}
+          />
+        </div> */}
+        <div className={styles.contentBox}>{this.state.content}</div>
+      </div>
+    );
+  }
 }
 
 export default RichTextDemo;

packages/base-components/RichText/src/fileListItem.js

@@ -3,12 +3,15 @@
  * @Author: hongmye
  * @Date: 2022-03-21 14:44:49
  */
-import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { FileTwoTone, DeleteOutlined, FileImageTwoTone, DownloadOutlined, PictureOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, ConfigProvider } from 'antd';
 import iconFile from './icon_file.png';
 function fileListItem(props) {
     const [fileList, setFileList] = useState([]);
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls();
+
     const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
     const onPreview = item => {
         props.onPreview(item);
@@ -28,27 +31,27 @@ function fileListItem(props) {
         <>
             {fileList.map((item, index) => {
                 return (
-                    <div key={index} className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}>
-                        <div className={'panda-civ-work-upload-list-picture-container'}>
-                            <div className={'panda-civ-work-upload-list-item'}>
-                                <div className={'panda-civ-work-upload-list-item-info'}>
-                                    <span className={'panda-civ-work-upload-span'}>
+                    <div key={index} className={`${prefixCls}-upload-list ${prefixCls}-upload-list-picture`}>
+                        <div className={`${prefixCls}-upload-list-picture-container`}>
+                            <div className={`${prefixCls}-upload-list-item`}>
+                                <div className={`${prefixCls}-upload-list-item-info`}>
+                                    <span className={`${prefixCls}-upload-span`}>
                                         <div
                                             className={
-                                                'panda-civ-work-upload-list-item-thumbnail panda-civ-work-upload-list-item-file'
+                                                `${prefixCls}-upload-list-item-thumbnail ${prefixCls}-upload-list-item-file`
                                             }
                                         >
                                             {/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */}
                                             <img src={iconFile} />
                                         </div>
                                         <span
-                                            className={'panda-civ-work-upload-list-item-name'}
+                                            className={`${prefixCls}-upload-list-item-name`}
                                             title={item.name}
                                             style={{ cursor: 'pointer' }}
                                         >
                                             {item.name}
                                         </span>
-                                        <span className={'panda-civ-work-upload-list-item-card-actions picture'}>
+                                        <span className={`${prefixCls}-upload-list-item-card-actions picture`}>
                                             {imgType.includes(item.type) && (
                                                 <Button
                                                     title="预览"

packages/base-components/RichText/src/index.js

@@ -168,7 +168,7 @@ const RichText = forwardRef((props, ref) => {
       }
     });
 
-    editor.txt.eventHooks.imgClickEvents.push((e) => {});
+    editor.txt.eventHooks.imgClickEvents.push((e) => { });
     // 粘贴图片上传
     editor.txt.eventHooks.pasteEvents.push((e) => {
       const file = e?.clipboardData?.items[0]?.getAsFile() || null;
@@ -240,7 +240,8 @@ const RichText = forwardRef((props, ref) => {
     }
     if (evet.key === 'Enter') {
       // 解决无法回车换行的bug
-      if (selectBoxRef.current.style.display === 'block' && selectSearchList.length) {
+      console.log(selectBoxRef.current.style.display === 'block',)
+      if (selectBoxRef.current.style.display === 'block') {
         evet.preventDefault();
         if (selectPerson[selectPersonIndex]) {
           onSelect(selectPerson[selectPersonIndex]);
@@ -251,11 +252,11 @@ const RichText = forwardRef((props, ref) => {
   };
 
   useEffect(() => {
-    richTextRef.current && richTextRef.current.removeEventListener('input', (e) => {});
+    richTextRef.current && richTextRef.current.removeEventListener('input', (e) => { });
     init();
     getAllPeople();
     return () => {
-      richTextRef.current && richTextRef.current.removeEventListener('input', (e) => {});
+      richTextRef.current && richTextRef.current.removeEventListener('input', (e) => { });
       editor && editor.destroy();
       editor = null;
     };
@@ -373,29 +374,27 @@ const RichText = forwardRef((props, ref) => {
       const formData = new FormData();
       formData.append('file', file);
       setLoading(true);
-      request({
-        url: API.POST_UPLOADERFILES,
+      request(API.POST_UPLOADERFILES, {
         method: 'POST',
         data: formData,
+      }).then((res) => {
+        if (res.data) {
+          const arr = [...fileList];
+          const url = res.data.replace(/[\\ \/=]/g, '/');
+          arr.unshift({
+            name: file.name,
+            type: file.type ? file.type.toLowerCase() : '',
+            size: file.size,
+            path: `${API.GET_DOWNLOADFILES}?filePath=${url}`,
+          });
+          // setFileList(arr);
+          props.onChangeFile(arr);
+          setLoading(false);
+        } else {
+          message.error(res.msg);
+          setLoading(false);
+        }
       })
-        .then((res) => {
-          if (res.data) {
-            const arr = [...fileList];
-            const url = res.data.replace(/[\\ \/=]/g, '/');
-            arr.unshift({
-              name: file.name,
-              type: file.type ? file.type.toLowerCase() : '',
-              size: file.size,
-              path: `${API.GET_DOWNLOADFILES}?filePath=${url}`,
-            });
-            // setFileList(arr);
-            props.onChangeFile(arr);
-            setLoading(false);
-          } else {
-            message.error(res.msg);
-            setLoading(false);
-          }
-        })
         .catch((err) => {
           setLoading(false);
         });