fix(): 模型属性中，单选枚举型支持显示为树状结构 refs: CMDB_MODEL-345 (#705)

Co-authored-by: zhendonghuang <zhendonghuang@zhendonghuangdeMacBook-Air.local>

libs/cmdb-instances/src/instance-list-table/AdvancedSearch.tsx

@@ -957,7 +957,8 @@ export class AdvancedSearchForm extends React.Component<
             if (multiValueSearchOperator) {
               let values: any[];
               if (
-                field.attrValue.type === ModelAttributeValueType.ENUM ||
+                (field.attrValue.type === ModelAttributeValueType.ENUM &&
+                  (field.attrValue.mode as any) !== "cascade") ||
                 field.attrValue.type === ModelAttributeValueType.ARR
               ) {
                 values = value;

libs/cmdb-instances/src/model-attribute-form-control/ModelAttributeFormControl.tsx

@@ -272,6 +272,12 @@ export class ModelAttributeFormControl extends Component<
         ) {
           return FormControlTypeEnum.RADIO;
         }
+        if (
+          getRuntime().getFeatureFlags()["cmdb-use-tree-enum-attr"] &&
+          (attribute.value.mode as any) === ModelAttributeValueModeType.CASCADE
+        ) {
+          return FormControlTypeEnum.TREESELECT;
+        }
         return FormControlTypeEnum.SELECT;
       case ModelAttributeValueType.INTEGER:
       case ModelAttributeValueType.FLOAT:
@@ -707,7 +713,13 @@ export class ModelAttributeFormControl extends Component<
         const { readOnly, placeholder } = restProps;
         const newValue =
           typeof value === "boolean" ? value : value ? value : [];
-        const treeData: any = treeEnumFormat(attribute.value.regex || []);
+        const isMultiple =
+          attribute.value.type === "enums" &&
+          (attribute.value.mode as any) === "cascade";
+        const treeData: any = treeEnumFormat(
+          attribute.value.regex || [],
+          isMultiple
+        );
         return (
           <TreeSelect
             value={newValue}
@@ -717,7 +729,7 @@ export class ModelAttributeFormControl extends Component<
             placeholder={placeholder}
             className={this.props.className}
             style={this.props.style}
-            treeCheckable
+            treeCheckable={attribute.value.type === "enums"}
             onChange={(e: any) => this.onChange(e)}
           />
         );

libs/cmdb-utils/src/cmdbUtil.spec.ts

@@ -595,7 +595,7 @@ describe("util", () => {
 describe("treeEnumFormat", () => {
   const value = ["A1/B1/C1", "A1/B1", "A1/B1/C2", "A1"];
   it("treeEnumFormat", () => {
-    const result = treeEnumFormat(value);
+    const result = treeEnumFormat(value, true);
     expect(result).toEqual([
       {
         children: [
@@ -606,6 +606,7 @@ describe("treeEnumFormat", () => {
                 id: "A1/B1/C1",
                 isLeaf: true,
                 parentId: "A1/B1",
+                selectable: true,
                 title: "C1",
                 value: "A1/B1/C1",
               },
@@ -614,25 +615,28 @@ describe("treeEnumFormat", () => {
                 id: "A1/B1/C2",
                 isLeaf: true,
                 parentId: "A1/B1",
+                selectable: true,
                 title: "C2",
                 value: "A1/B1/C2",
               },
             ],
             id: "A1/B1",
             isLeaf: false,
             parentId: "A1",
+            selectable: true,
             title: "B1",
             value: "A1/B1",
           },
         ],
         id: "A1",
         isLeaf: false,
         parentId: "",
+        selectable: true,
         title: "A1",
         value: "A1",
       },
     ]);
-    const result2 = treeEnumFormat("A1/B1/C1\nA1/B1\nA1/B1/C2\nA1");
+    const result2 = treeEnumFormat("A1/B1/C1\nA1/B1\nA1/B1/C2\nA1", true);
     expect(result2).toEqual([
       {
         children: [
@@ -643,6 +647,7 @@ describe("treeEnumFormat", () => {
                 id: "A1/B1/C1",
                 isLeaf: true,
                 parentId: "A1/B1",
+                selectable: true,
                 title: "C1",
                 value: "A1/B1/C1",
               },
@@ -651,42 +656,44 @@ describe("treeEnumFormat", () => {
                 id: "A1/B1/C2",
                 isLeaf: true,
                 parentId: "A1/B1",
+                selectable: true,
                 title: "C2",
                 value: "A1/B1/C2",
               },
             ],
             id: "A1/B1",
             isLeaf: false,
             parentId: "A1",
+            selectable: true,
             title: "B1",
             value: "A1/B1",
           },
         ],
         id: "A1",
         isLeaf: false,
         parentId: "",
+        selectable: true,
         title: "A1",
         value: "A1",
       },
     ]);
 
-    const result3 = treeEnumFormat([
-      "A1/B1/C1",
-      "A1/B1",
-      "A1/B1/C",
-      "A1/B1/C23",
-      "A1",
-    ]);
+    const result3 = treeEnumFormat(
+      ["A1/B1/C1", "A1/B1", "A1/B1/C", "A1/B1/C23", "A1"],
+      true
+    );
     expect(result3).toEqual([
       {
         id: "A1",
         parentId: "",
+        selectable: true,
         title: "A1",
         value: "A1",
         children: [
           {
             id: "A1/B1",
             parentId: "A1",
+            selectable: true,
             title: "B1",
             value: "A1/B1",
             children: [
@@ -695,6 +702,7 @@ describe("treeEnumFormat", () => {
                 parentId: "A1/B1",
                 title: "C",
                 value: "A1/B1/C",
+                selectable: true,
                 children: null,
                 isLeaf: true,
               },
@@ -703,6 +711,7 @@ describe("treeEnumFormat", () => {
                 parentId: "A1/B1",
                 title: "C1",
                 value: "A1/B1/C1",
+                selectable: true,
                 children: null,
                 isLeaf: true,
               },
@@ -711,6 +720,7 @@ describe("treeEnumFormat", () => {
                 parentId: "A1/B1",
                 title: "C23",
                 value: "A1/B1/C23",
+                selectable: true,
                 children: null,
                 isLeaf: true,
               },

libs/cmdb-utils/src/cmdbUtil.ts

@@ -342,14 +342,18 @@ export function getFixedStyle(
 interface TreeItem {
   title: string;
   value: string;
+  selectable?: boolean;
   isLeaf?: boolean;
   parentId?: string;
   key?: string;
   id?: string;
   children?: TreeItem[];
 }
 
-export function treeEnumFormat(value: string | string[]): TreeItem[] {
+export function treeEnumFormat(
+  value: string | string[],
+  isMultiple = true
+): TreeItem[] {
   const root: TreeItem[] = [];
   const arr = _.compact(
     _.uniq((_.isString(value) ? value?.split("\n") : value) || [])
@@ -373,8 +377,10 @@ export function treeEnumFormat(value: string | string[]): TreeItem[] {
       }
 
       if (index === parts.length - 1) {
+        existingNode.selectable = true;
         existingNode.isLeaf = true;
       } else {
+        existingNode.selectable = isMultiple;
         existingNode.isLeaf = false;
       }
 
@@ -395,6 +401,7 @@ export function treeEnumFormat(value: string | string[]): TreeItem[] {
 
   root.forEach((node) => {
     if (node.children?.length === 0) {
+      node.selectable = true;
       node.isLeaf = true;
     } else {
       node.isLeaf = false;