org manage user page

src/pages/ManageOrgUserPage/index.js

@@ -1,16 +1,15 @@
 // material-ui
 import {
     DataGrid,
-    GridActionsCellItem
+    //GridActionsCellItem
 } from "@mui/x-data-grid";
 
 import {
-     Typography
+     Typography, Button
 }from '@mui/material';
 import MainCard from "../../components/MainCard";
 
 import * as React from "react";
-import * as Icon from '../../utils/IconUtils';
 import * as HttpUtils from "../../utils/HttpUtils";
 import * as UrlUtils from "../../utils/ApiPathConst";
 import * as DateUtils from "../../utils/DateUtils";
@@ -29,7 +28,7 @@ const ManageOrgUserPage = () => {
     }, []);
 
 
-    const loadData = ()=>{
+    function loadData(){
         HttpUtils.get(
             {
                 url: UrlUtils.GET_PUBLIC_ORG_USER_LIST,
@@ -38,16 +37,45 @@ const ManageOrgUserPage = () => {
                 }
             }
         );
-    };
-
-    const onActiveClick=()=>{
+    }
 
+    function onActiveClick(params){
+        HttpUtils.get({
+            url: UrlUtils.GET_USER_UNLOCK+"/"+params.row.id,
+            onSuccess:()=>{
+               loadData();
+            }
+        });
     }
 
-    const getHeader=(headerStr)=>{
+    function getHeader(headerStr){
         return <Typography variant="h5" >{headerStr}</Typography>;
     }
 
+    function getStatus(params){
+        if(params.row.locked){
+            return (
+                <>
+                {getStatusTag({color:"#525150", text: "鎖定"})}
+                <Button variant="outlined" onClick={()=>onActiveClick(params)}>解鎖</Button>
+                </>
+                )
+        }else if(!params.row.verifiedBy){
+            return getStatusTag({color:"#fca503", text: "待批核"})
+        }else if(params.row.status  == "active"){
+            return getStatusTag({color:"#73AD21", text: "生效中"})
+        }
+        return getStatusTag({text: params.row.status})
+    }
+
+    function getStatusTag({color="#000", textColor="#FFF",text=""}){
+        return  (
+            <div style={{"border-radius":"25px" ,"background": color, "color":textColor, "padding":"5px 10px 5px 10px"}}><b>{text}</b></div>
+        )
+    }
+
+
+
     const columns = [
         {
             id: 'username',
@@ -104,21 +132,11 @@ const ManageOrgUserPage = () => {
             flex: 1,
             cellClassName: 'actions',
             getActions: (params) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<Icon.Download/>}
-                        label="Download"
-                        className="textPrimary"
-                        onClick={onActiveClick(params)}
-                        color="primary"
-                    />]
+                return [getStatus(params)]
             },
         }
     ];
 
-
-
     return (
         <MainCard elevation={0}  border={false}   content={false} >
             <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>