fix: adding edges without restricting primary keys (#72)

* fix: adding edges without restricting primary keys

* fix: adding edges without restricting primary keys

* fix: adding edges without restricting primary keys

* fix: adding edges without restricting primary keys

* fix: adding edges without restricting primary keys

Author: noneAuth

client/src/components/studio/domain-core/graph-construct/add-nodes-edges/index.tsx

@@ -30,6 +30,7 @@ interface EditColumnsType<T> extends ColumnsType<T> {
   };
   editable: boolean;
 }
+
 export const AddNodesEdges: React.FC<Prop> = ({
   type,
   data = [],
@@ -39,13 +40,15 @@ export const AddNodesEdges: React.FC<Prop> = ({
 }) => {
   const [form] = Form.useForm();
   const { visible, onShow, onClose } = useVisible({ defaultVisible: true });
-  const isNode = type === 'node';
+
   const [state, updateState] = useImmer<{
     startList: Array<StartData>;
     attrList: Array<AttrData>;
     configList: Array<IndexData>;
+    isNode: boolean;
   }>({
     startList: [],
+    isNode: true,
     attrList: [
       {
         id: 'primary-key',
@@ -58,13 +61,20 @@ export const AddNodesEdges: React.FC<Prop> = ({
     configList: [],
   });
   const { startList, attrList, configList } = state;
+  const isAllow = (record: any): boolean => {
+    return state?.isNode && record?.primaryField;
+  };
   useEffect(() => {
     onSwitch?.(onShow, onClose);
   }, []);
   useEffect(() => {
     onVisible?.(visible);
   }, [visible]);
-
+  useEffect(() => {
+    updateState(draft => {
+      draft.isNode = type === 'node';
+    });
+  }, [type]);
   const propertyList = () => {
     const attrPropertyNames = map(
       filter(attrList, attr => !attr.optional && !attr.primaryField),
@@ -195,10 +205,10 @@ export const AddNodesEdges: React.FC<Prop> = ({
           inputType: EditType.SELECT,
           prop: {
             defaultValue: false,
-            disabled: record.primaryField,
+            disabled: isAllow(record),
             options: [
               {
-                label: record.primaryField ? '否（主键）' : '否',
+                label: isAllow(record) ? '否（主键）' : '否',
                 value: false,
               },
               { label: '是', value: true },
@@ -211,8 +221,8 @@ export const AddNodesEdges: React.FC<Prop> = ({
       title: '操作',
       dataIndex: 'operate',
       key: 'operate',
-      render: (_, record: any) =>
-        record.primaryField ? (
+      render: (_, record: any) => {
+        return isAllow(record) ? (
           <Button
             disabled
             type="text"
@@ -239,7 +249,8 @@ export const AddNodesEdges: React.FC<Prop> = ({
           >
             <a style={{ color: 'rgba(54,55,64,1)' }}>删除</a>
           </Popconfirm>
-        ),
+        );
+      },
     },
   ];
   const nodeConfigColumns: EditColumnsType<IndexData> = [
@@ -423,7 +434,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
     >
       <div className={styles[`${PUBLIC_PERFIX_CLASS}-container-content`]}>
         <div className={styles[`${PUBLIC_PERFIX_CLASS}-container-header`]}>
-          <span> 添加{`${isNode ? '点' : '边'}`}类型</span>
+          <span> 添加{`${state.isNode ? '点' : '边'}`}类型</span>
           <div>
             <span style={{ marginRight: 4 }}>命令行建模</span>
             <a href="https://tugraph.antgroup.com/doc" target="_blank">
@@ -434,7 +445,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
         <div>
           <Form layout="vertical" form={form}>
             <Form.Item
-              label={`${isNode ? '点' : '边'}类型名称`}
+              label={`${state.isNode ? '点' : '边'}类型名称`}
               name={'name'}
               rules={[
                 {
@@ -443,7 +454,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
                     var reg = new RegExp('^[a-zA-Z0-9_\u4e00-\u9fa5]+$');
                     if (!value) {
                       return Promise.reject(
-                        `请填写${isNode ? '点' : '边'}类型名称！`,
+                        `请填写${state.isNode ? '点' : '边'}类型名称！`,
                       );
                     }
                     if (!reg.test(value)) {
@@ -459,7 +470,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
             >
               <Input
                 autoComplete="off"
-                placeholder={`请输入${isNode ? '点' : '边'}类型名称`}
+                placeholder={`请输入${state.isNode ? '点' : '边'}类型名称`}
                 className={styles[`${PUBLIC_PERFIX_CLASS}-container-name`]}
               />
             </Form.Item>
@@ -484,7 +495,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
             />
             {addButton(addNodeAttr)}
           </div>
-          {!isNode && (
+          {!state.isNode && (
             <div>
               <p className={styles[`${PUBLIC_PERFIX_CLASS}-container-title`]}>
                 <Tooltip title="如果不选择，则表示起点和终点可以为任意点类型">
@@ -510,7 +521,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
               {addButton(addEdge, '添加起点和终点')}
             </div>
           )}
-          {isNode && (
+          {state.isNode && (
             <div>
               <p className={styles[`${PUBLIC_PERFIX_CLASS}-container-title`]}>
                 索引列表

client/src/constants/GI_EXPORT_FILES.ts

@@ -1454,7 +1454,7 @@ export default {
     },
     GISDK: {
       name: '@antv/gi-sdk',
-      version: '2.4.20',
+      version: '2.4.21',
       url: 'https://gw.alipayobjects.com/os/lib/antv/gi-sdk/2.4.20/dist/index.min.js',
       global: 'GISDK',
     },