[improvement][semantic-fe] Optimized the frontend display and code logic of visual modeling, and updated the relevant interface of the permission management module.

2026-04-19 13:04:21 +08:00 · 2023-08-07 10:10:54 +08:00
parent aa0a100a85
commit ef7c37a8da
39 changed files with 878 additions and 454 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
@@ -3,9 +3,11 @@ import StandardFormRow from '@/components/StandardFormRow';
 import TagSelect from '@/components/TagSelect';
 import React, { useEffect } from 'react';
 import { SENSITIVE_LEVEL_OPTIONS } from '../../constant';
+import { SearchOutlined } from '@ant-design/icons';
+import DomainTreeSelect from '../../components/DomainTreeSelect';
+import styles from '../style.less';

 const FormItem = Form.Item;
-const { Option } = Select;

 type Props = {
  filterValues?: any;
@@ -25,10 +27,7 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
    onFiltersChange(value, values);
  };

-  const onSearch = (value) => {
-    if (!value) {
-      return;
-    }
+  const onSearch = (value: any) => {
    onFiltersChange(value, form.getFieldsValue());
  };

@@ -57,34 +56,24 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
      form={form}
      colon={false}
      onValuesChange={(value, values) => {
-        if (value.keywords || value.keywordsType) {
+        if (value.name) {
          return;
        }
        handleValuesChange(value, values);
      }}
-      initialValues={{
-        keywordsType: 'name',
-      }}
    >
      <StandardFormRow key="search" block>
-        <Input.Group compact>
-          <FormItem name={'keywordsType'} noStyle>
-            <Select>
-              <Option value="name">中文名</Option>
-              <Option value="bizName">英文名</Option>
-              <Option value="id">ID</Option>
-            </Select>
+        <div className={styles.searchBox}>
+          <FormItem name={'name'} noStyle>
+            <div className={styles.searchInput}>
+              <Input.Search
+                placeholder="请输入需要查询指标的ID、指标名称、字段名称"
+                enterButton={<SearchOutlined style={{ marginTop: 5 }} />}
+                onSearch={onSearch}
+              />
+            </div>
          </FormItem>
-          <FormItem name={'keywords'} noStyle>
-            <Input.Search
-              placeholder="请输入需要查询的指标信息"
-              allowClear
-              onSearch={onSearch}
-              style={{ width: 300 }}
-              enterButton
-            />
-          </FormItem>
-        </Input.Group>
+        </div>
      </StandardFormRow>
      {filterList.map((item) => {
        const { title, key, options } = item;
@@ -102,6 +91,11 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
          </StandardFormRow>
        );
      })}
+      <StandardFormRow key="domainIds" title="所属主题域" block>
+        <FormItem name="domainIds">
+          <DomainTreeSelect />
+        </FormItem>
+      </StandardFormRow>
    </Form>
  );
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/index.tsx
@@ -1,6 +1,6 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
-import { message, Space } from 'antd';
+import { message } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
 import type { Dispatch } from 'umi';
 import { connect } from 'umi';
@@ -23,6 +23,7 @@ type QueryMetricListParams = {
  bizName?: string;
  sensitiveLevel?: string;
  type?: string;
+  [key: string]: any;
 };

 const ClassMetricTable: React.FC<Props> = () => {
@@ -31,8 +32,9 @@ const ClassMetricTable: React.FC<Props> = () => {
    pageSize: 20,
    total: 0,
  });
-
+  const [loading, setLoading] = useState<boolean>(false);
  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
  const actionRef = useRef<ActionType>();

  useEffect(() => {
@@ -40,11 +42,13 @@ const ClassMetricTable: React.FC<Props> = () => {
  }, []);

  const queryMetricList = async (params: QueryMetricListParams = {}) => {
+    setLoading(true);
    const { code, data, msg } = await queryMetric({
-      ...params,
      ...pagination,
+      ...params,
    });
-    const { list, pageSize, current, total } = data;
+    setLoading(false);
+    const { list, pageSize, current, total } = data || {};
    let resData: any = {};
    if (code === 200) {
      setPagination({
@@ -87,6 +91,10 @@ const ClassMetricTable: React.FC<Props> = () => {
      dataIndex: 'bizName',
      title: '字段名称',
    },
+    {
+      dataIndex: 'domainName',
+      title: '主题域',
+    },
    {
      dataIndex: 'sensitiveLevel',
      title: '敏感度',
@@ -105,7 +113,6 @@ const ClassMetricTable: React.FC<Props> = () => {
    {
      dataIndex: 'type',
      title: '指标类型',
-      // search: false,
      valueEnum: {
        ATOMIC: '原子指标',
        DERIVED: '衍生指标',
@@ -123,25 +130,18 @@ const ClassMetricTable: React.FC<Props> = () => {
  ];

  const handleFilterChange = async (filterParams: {
-    keywordsType: string;
-    keywords: string;
+    name: string;
    sensitiveLevel: string;
    type: string;
  }) => {
-    const params: QueryMetricListParams = {};
-    const { keywordsType, keywords, sensitiveLevel, type } = filterParams;
-    if (keywordsType && keywords) {
-      params[keywordsType] = keywords;
-    }
+    const { sensitiveLevel, type } = filterParams;
+    const params: QueryMetricListParams = { ...filterParams };
    const sensitiveLevelValue = sensitiveLevel?.[0];
    const typeValue = type?.[0];
-    if (sensitiveLevelValue) {
-      params.sensitiveLevel = sensitiveLevelValue;
-    }
-    if (type) {
-      params.type = typeValue;
-    }

+    params.sensitiveLevel = sensitiveLevelValue;
+    params.type = typeValue;
+    setFilterParams(params);
    await queryMetricList(params);
  };

@@ -157,7 +157,6 @@ const ClassMetricTable: React.FC<Props> = () => {
      <ProTable
        className={`${styles.metricTable}`}
        actionRef={actionRef}
-        // headerTitle="指标列表"
        rowKey="id"
        search={false}
        dataSource={dataSource}
@@ -166,27 +165,19 @@ const ClassMetricTable: React.FC<Props> = () => {
        tableAlertRender={() => {
          return false;
        }}
+        loading={loading}
        onChange={(data: any) => {
          const { current, pageSize, total } = data;
-          setPagination({
+          const pagin = {
            current,
            pageSize,
            total,
-          });
+          };
+          setPagination(pagin);
+          queryMetricList({ ...pagin, ...filterParams });
        }}
        size="small"
        options={{ reload: false, density: false, fullScreen: false }}
-        // toolBarRender={() => [
-        //   <Button
-        //     key="create"
-        //     type="primary"
-        //     onClick={() => {
-        //       setMetricItem(undefined);
-        //     }}
-        //   >
-        //     创建指标
-        //   </Button>,
-        // ]}
      />
    </>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
@@ -7,4 +7,77 @@

 .metricTable {
    margin: 20px;
+}
+
+
+
+.searchBox {
+    // margin-bottom: 12px;
+    background: #fff;
+    border-radius: 10px;
+    width: 500px;
+    margin: 0 auto;
+    .searchInput {
+        width: 100%;
+        border: 1px solid rgba(35, 104, 184, 0.6);
+        border-radius: 10px;
+    }
+    :global {
+
+        .ant-select-auto-complete {
+            width: 100%;
+        }
+        .ant-input {
+            height: 50px;
+            padding: 0 15px;
+            color: #515a6e;
+            font-size: 14px;
+            line-height: 50px;
+            background: hsla(0, 0%, 100%, 0.2);
+            border: none;
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+            caret-color: #296df3;
+  
+            &:focus {
+                border-right-width: 0 !important;
+                box-shadow: none;
+            }
+        }
+  
+        .ant-input-group-addon {
+            left: 0 !important;
+            padding: 0;
+            background: hsla(0, 0%, 100%, 0.2);
+            border: none;
+            border-top-left-radius: 0;
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+            border-bottom-left-radius: 0;
+  
+            .ant-btn {
+                width: 72px;
+                height: 50px;
+                margin: 0;
+                color: rgba(35, 104, 184, 0.6);
+                font-size: 16px;
+                background-color: transparent;
+                background-color: transparent;
+                border: none;
+                box-shadow: none !important;
+  
+                &::after {
+                    box-shadow: none !important;
+                }
+  
+                .anticon {
+                    font-size: 28px;
+  
+                    &:hover {
+                        color: @primary-color;
+                    }
+                }
+            }
+        }
+    }
 }