fix: bug#5661

src/components/SearchComponent/index.tsx

@@ -34,7 +34,7 @@ import _ from 'lodash';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import classnames from 'classnames';
 import { onlyMessage, randomString } from '@/utils/util';
-import useUrlState from '@ahooksjs/use-url-state';
+import { useHistory, useLocation } from 'umi';
 
 const ui2Server = (source: SearchTermsUI): SearchTermsServer => [
   { terms: source.terms1 },
@@ -151,11 +151,14 @@ const sortField = (field: ProColumns[]) => {
 const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
   const { field, target, onSearch, defaultParam, enableSave = true, initParam, model } = props;
 
+  const _history = useHistory();
+  const _location = useLocation();
+
   /**
    * 过滤不参与搜索的数据 ?
    * TODO Refactor 依赖透明？
    */
-  const filterSearchTerm = (): ProColumns<T>[] =>
+  const filterSearchTerm = (): ProColumns<any>[] =>
     field
       .filter((item) => item.dataIndex)
       .filter((item) => !item.hideInSearch)
@@ -524,7 +527,6 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
       });
   };
 
-  const [url, setUrl] = useUrlState();
   const handleSearch = async (type: boolean = true) => {
     const value = form.values;
     const filterTerms = (data: Partial<Term>[] | undefined) =>
@@ -549,28 +551,38 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
       (value.terms2 && value.terms2.length && value.terms2?.some((item) => item.value))
     ) {
       if (type) {
-        setUrl({ q: JSON.stringify(value), target: props.target });
+        _history.push({
+          hash: _location.hash,
+          search: `q=${JSON.stringify(value)}&target=${props.target}`,
+        });
+        // setUrl({ q: JSON.stringify(value), target: props.target });
       }
     } else {
-      setUrl({ q: undefined, target: undefined });
+      _history.push({
+        hash: _location.hash,
+        search: '?',
+      });
     }
     onSearch({ terms: _temp });
   };
 
   useEffect(() => {
     // 防止页面下多个TabsTabPane中的查询组件共享路由中的参数
-    if (url.q && props.model !== 'simple') {
-      if (url.target) {
-        if (props.target && url.target === props.target) {
-          form.setValues(JSON.parse(url.q));
+    const params = new URLSearchParams(_location.search);
+    const q = params.get('q');
+    const _target = params.get('target');
+    if (q && props.model !== 'simple') {
+      if (_target) {
+        if (props.target && _target === props.target) {
+          form.setValues(JSON.parse(q));
           handleSearch(false);
         }
         return;
       }
-      form.setValues(JSON.parse(url.q));
+      form.setValues(JSON.parse(q));
       handleSearch(false);
     }
-  }, [url, props.target]);
+  }, [_location, props.target]);
 
   useEffect(() => {
     if (defaultParam) {

src/pages/link/DashBoard/index.less

@@ -1,62 +1,71 @@
-.link-dash-board {
-  .echarts-items {
-    position: relative;
-    display: flex;
-    gap: 24px;
-    margin-bottom: 24px;
-    padding: 24px;
-    background-color: #fff;
-
-    .echarts-item {
-      display: flex;
-      flex-grow: 1;
-      width: 0;
-      height: 160px;
-      padding: 16px;
+@media screen {
+  .link-dash-board {
+    .echarts-items {
+      position: relative;
+      display: grid;
+      grid-row-gap: 24px;
+      grid-column-gap: 24px;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      margin-bottom: 24px;
+      padding: 24px;
       background-color: #fff;
-      border: 1px solid #e0e4e8;
 
-      .echarts-item-left {
+      .echarts-item {
         display: flex;
-        flex-direction: column;
-        width: 45%;
-      }
+        height: 150px;
+        padding: 16px;
+        background-color: #fff;
+        border: 1px solid #e0e4e8;
 
-      .echarts-item-right {
-        width: 55%;
-      }
+        .echarts-item-left {
+          display: flex;
+          flex-direction: column;
+          width: 45%;
+        }
 
-      .echarts-item-title {
-        margin-bottom: 8px;
-        color: rgba(#000, 0.6);
-        font-size: 16px;
-      }
+        .echarts-item-right {
+          width: 55%;
+        }
 
-      .echarts-item-value {
-        font-weight: bold;
-        font-size: 36px;
-      }
+        .echarts-item-title {
+          margin-bottom: 8px;
+          color: rgba(#000, 0.6);
+          font-size: 16px;
+        }
 
-      .echarts-item-bottom {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        justify-content: center;
-        height: 0;
-        padding-left: 12px;
-
-        &::before {
-          position: absolute;
-          top: 50%;
-          left: 0;
-          width: 4px;
-          height: 12px;
-          background-color: #ff595e;
-          transform: translateY(-50%);
-          content: ' ';
+        .echarts-item-value {
+          font-weight: bold;
+          font-size: 36px;
+        }
+
+        .echarts-item-bottom {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          flex-grow: 1;
+          justify-content: center;
+          height: 0;
+          padding-left: 12px;
+
+          &::before {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 4px;
+            height: 12px;
+            background-color: #ff595e;
+            transform: translateY(-50%);
+            content: ' ';
+          }
         }
       }
     }
   }
+
+  @media (max-width: 1400px) {
+    .echarts-items {
+      grid-template-rows: 1fr 1fr;
+      grid-template-columns: 1fr 1fr !important;
+    }
+  }
 }

src/pages/link/DashBoard/index.tsx

@@ -638,7 +638,6 @@ export default () => {
         const cpu = value.cpu;
         const memory = value.memory;
         const disk = value.disk;
-        console.log(value);
         setTopValues({
           cpu: cpu.systemUsage,
           jvm: Number(((memory.jvmHeapUsage / 100) * (memory.jvmHeapTotal / 1024)).toFixed(1)),

src/pages/system/Department/Assets/deivce/bind.tsx

@@ -117,8 +117,6 @@ const Bind = observer((props: Props) => {
     }
   }, [props.visible]);
 
-  console.log(AssetsModel);
-
   const getParams = (params: any) => {
     console.log(params);
     const _params: any = [
@@ -170,7 +168,25 @@ const Bind = observer((props: Props) => {
         field={columns}
         enableSave={false}
         model={'simple'}
-        defaultParam={getParams(AssetsModel.bindModal ? AssetsModel.params : {})}
+        defaultParam={getParams(
+          AssetsModel.bindModal
+            ? AssetsModel.params
+            : [
+                {
+                  column: 'id',
+                  termType: 'dim-assets$not',
+                  value: {
+                    assetType: 'device',
+                    targets: [
+                      {
+                        type: 'org',
+                        id: props.parentId,
+                      },
+                    ],
+                  },
+                },
+              ],
+        )}
         onSearch={async (data) => {
           actionRef.current?.reset?.();
           setSearchParam(data);

src/pages/system/Department/Assets/product/bind.tsx

@@ -25,6 +25,7 @@ const Bind = observer((props: Props) => {
   const actionRef = useRef<ActionType>();
   const [searchParam, setSearchParam] = useState({});
   const saveRef = useRef<{ saveData: Function }>();
+  const [loading, setLoading] = useState(false);
 
   const columns: ProColumns<ProductItem>[] = [
     {
@@ -54,6 +55,7 @@ const Bind = observer((props: Props) => {
 
   const handleBind = () => {
     if (Models.bindKeys.length && saveRef.current) {
+      setLoading(true);
       saveRef.current?.saveData();
     } else {
       message.warn('请先勾选数据');
@@ -75,6 +77,7 @@ const Bind = observer((props: Props) => {
         onCancel={props.onCancel}
         width={'75vw'}
         title="绑定"
+        confirmLoading={loading}
       >
         <PermissionModal
           type="product"
@@ -88,7 +91,7 @@ const Bind = observer((props: Props) => {
             }
           }}
         />
-        <SearchComponent<ProductItem>
+        <SearchComponent
           field={columns}
           model={'simple'}
           enableSave={false}