完善列表展示

src/pages/MemoryList/index.less

@@ -4,3 +4,16 @@
 .red{
   color: red;
 }
+.listHeight{
+  max-height: 150px !important;
+  overflow: hidden;
+  img{
+    max-height: 100px !important;
+  }
+  :global {
+    .ql-bubble .ql-editor{
+      border: 0 solid #eaeaea !important;
+    }
+  }
+
+}

src/pages/MemoryList/index.tsx

@@ -9,7 +9,7 @@ import UpdateForm from "@/pages/Memory/components/UpdateForm";
 import {getTextFromHtml, minuteToDay} from "@/utils/utils";
 import {ExclamationCircleOutlined} from "@ant-design/icons/lib";
 import Quill from "@/pages/Memory/components/Quill";
-
+import styles from './index.less';
 
 /**
  *  删除节点
@@ -30,7 +30,6 @@ const handleRemove = async (fields: TableListItem) => {
 };
 
 
-
 const TableList: React.FC<{}> = () => {
   const [sorter, setSorter] = useState<string>('');
   const [modelVisible, setModalVisible] = useState<boolean>(false);
@@ -49,9 +48,9 @@ const TableList: React.FC<{}> = () => {
 
   const actionRef = useRef<ActionType>();
 
-  const { confirm } = Modal;
+  const {confirm} = Modal;
 
-  const deleteMemory = async (record:any) => {
+  const deleteMemory = async (record: any) => {
     await handleRemove(record);
     if (actionRef.current) {
       actionRef.current.reload();
@@ -59,38 +58,32 @@ const TableList: React.FC<{}> = () => {
 
   };
 
-  const  changeForm=async (record:any)=>{
-      setFormValues(record);
-      setModalVisible(true);
+  const changeForm = async (record: any) => {
+    setFormValues(record);
+    setModalVisible(true);
   }
 
   const columns: ProColumns<TableListItem>[] = [
     {
       title: '正面',
       dataIndex: 'front',
-      width: 150,
+      width: 250,
       // hideInSearch: true,
       render: (text, row) => {
-        const show = getTextFromHtml(row.front);
-        return (<>
-          <Tooltip title={show}>
-            <span >{show.substring(0, 10)}</span>
-          </Tooltip>
-        </>);
+        return (<div className={styles.listHeight}>
+          <Quill theme="bubble" readonly onChange={() => {}} value={text} />
+        </div>);
       }
     },
     {
       title: '背面',
       dataIndex: 'back',
-      width: 140,
+      width: 250,
       hideInSearch: true,
       render: (text, row) => {
-        const show = getTextFromHtml(row.back);
-        return (<>
-          <Tooltip title={show}>
-            <span>{show.substring(0, 10)}</span>
-          </Tooltip>
-        </>);
+        return (<div className={styles.listHeight}>
+          <Quill theme="bubble" readonly onChange={() => {}} value={text} />
+        </div>);
       }
     },
     {
@@ -112,17 +105,17 @@ const TableList: React.FC<{}> = () => {
       width: 150,
       hideInSearch: true,
       hideInForm: true,
-      sorter:true
-    },
-    {
-      title: '更新时间',
-      dataIndex: 'updateTime',
-      valueType: 'dateTime',
-      width: 150,
-      hideInSearch: true,
-      hideInForm: true,
-      sorter:true
+      sorter: true
     },
+    // {
+    //   title: '更新时间',
+    //   dataIndex: 'updateTime',
+    //   valueType: 'dateTime',
+    //   width: 150,
+    //   hideInSearch: true,
+    //   hideInForm: true,
+    //   sorter: true
+    // },
     {
       title: '操作',
       dataIndex: 'option',
@@ -144,7 +137,7 @@ const TableList: React.FC<{}> = () => {
             onClick={async () => {
               confirm({
                 title: '确定删除吗?',
-                icon: <ExclamationCircleOutlined />,
+                icon: <ExclamationCircleOutlined/>,
                 content: '删除后无法恢复',
                 okText: '确定',
                 okType: 'danger',
@@ -201,10 +194,14 @@ const TableList: React.FC<{}> = () => {
               setFormValues(record);
               setShowVisible(true);
             }, // 点击行
-            onDoubleClick: event => {},
-            onContextMenu: event => {},
-            onMouseEnter: event => {}, // 鼠标移入行
-            onMouseLeave: event => {},
+            onDoubleClick: event => {
+            },
+            onContextMenu: event => {
+            },
+            onMouseEnter: event => {
+            }, // 鼠标移入行
+            onMouseLeave: event => {
+            },
           };
         }}
       />
@@ -220,7 +217,7 @@ const TableList: React.FC<{}> = () => {
           values={formValues}>
         </UpdateForm>
       ) : null}
-      {showVisible?(
+      {showVisible ? (
         <Modal
           destroyOnClose
           width={640}
@@ -231,14 +228,16 @@ const TableList: React.FC<{}> = () => {
           footer={null}
         >
           正面：
-          <p />
-          <Quill theme="bubble" readonly onChange={() => {}} value={formValues.front} />
-          <p />
+          <p/>
+          <Quill theme="bubble" readonly onChange={() => {
+          }} value={formValues.front}/>
+          <p/>
           反面：
-          <p />
-          <Quill theme="bubble" readonly onChange={() => {}} value={formValues.back} />
+          <p/>
+          <Quill theme="bubble" readonly onChange={() => {
+          }} value={formValues.back}/>
         </Modal>
-      ):null}
+      ) : null}
 
     </PageHeaderWrapper>
   );