模型支持排序

src/index.less

@@ -116,7 +116,7 @@ div[id^='__qiankun_microapp_wrapper_'] {
 }
 
 .yy-table-tbody > tr > td  {
-  padding: 12px 8px !important;
+  padding: 8px 8px !important;
 }
 
 .yy-table-tbody > .yy-table-measure-row > td  {

src/view/Manage/Model/Component/ModelTable.jsx

@@ -38,6 +38,7 @@ const ModelTable = (props) => {
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
   // const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
+  const [ sortRule, setSortRule ] = useState(null); 
   const [ filterData, setFilterData ] = useState([]);
   const [ subData, setSubData ] = useState([]);
   
@@ -81,6 +82,8 @@ const ModelTable = (props) => {
       dataIndex: 'name',
       width: isSzseEnv?360:160,
       ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
       render: (text, record, _) => {
         return (
           <Tooltip title={text||''}>
@@ -96,6 +99,8 @@ const ModelTable = (props) => {
       dataIndex: 'cnName',
       width: isSzseEnv?420:160,
       ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
       render: (text, _, __) => {
         return (
           <Tooltip title={text||''}>
@@ -108,6 +113,8 @@ const ModelTable = (props) => {
       title: '模型描述',
       dataIndex: 'remark',
       ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
       width: 200,
       render: (text, _, __) => {
         return (
@@ -146,6 +153,8 @@ const ModelTable = (props) => {
       dataIndex: 'editor',
       width: 100,
       ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
     },
     // {
     //   title: '标签',
@@ -331,13 +340,27 @@ const ModelTable = (props) => {
   })
 
   useEffect(() => {
-    const _data = paginate(data||[], pageNum, pageSize);
+
+    const newData = [...data];
+    if (sortRule) {
+      if (sortRule.order === 'ascend') {
+        newData.sort((item1, item2) => {
+          return item1[sortRule.field].localeCompare(item2[sortRule.field]);
+        })
+      } else if (sortRule.order === 'descend') {
+        newData.sort((item1, item2) => {
+          return item2[sortRule.field].localeCompare(item1[sortRule.field]);
+        })
+      } 
+    }
+
+    const _data = paginate(newData||[], pageNum, pageSize);
 
     autoResizeColumns(_data);
     setFilterData(_data);
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, pagination])
+  }, [data, pagination, sortRule])
 
   const autoResizeColumns = (val) => {
     if ((val||[]).length>0) {
@@ -359,8 +382,8 @@ const ModelTable = (props) => {
       })
 
       let newColumns = [...columns];
-      newColumns[1].width = getTextWidth(name)+24;
-      newColumns[2].width = getTextWidth(cnName)+24;
+      newColumns[1].width = getTextWidth(name)+20;
+      newColumns[2].width = getTextWidth(cnName)+20;
 
       let minWidth = isSzseEnv?200:120;
 
@@ -527,6 +550,12 @@ const ModelTable = (props) => {
     setColumns(nextColumns);
   };
 
+  const onTableChange = (pagination, filters, sorter, extra) => {
+    if (sorter) {
+      setSortRule(sorter);
+    }
+  }
+
   const rowSelection = {
     selectedRowKeys,
     onChange: onSelectChange,
@@ -604,6 +633,7 @@ const ModelTable = (props) => {
             style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
           }
         }}
+        onChange={onTableChange}
         expandable={expandable}
         sticky={!modelId}
       />