feat(前端):终端绑定镜像、用户

web-fe/src/pages/terminal/mod/ImageSelectedTable/index.tsx

@@ -23,7 +23,7 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
   const [open, setOpen] = useState<boolean>(false);
   const [tableData, setTableData] = useState<any[]>([]);
   //镜像选择
-  const [selectedRowKeys, setSelectedRowKeys] = useState<[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([]);
   const [selectedRows, setSelectedRows] = useState<any[]>([]);
 
   // 已绑定用户列表选择
@@ -37,6 +37,7 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
         list.push(item);
         idList.push(item.id);
       });
+      setTableData(formValue);
       setSelectedRowKeys(idList);
       setSelectedRows(list);
     }
@@ -53,7 +54,7 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
     // 镜像
     (selectedRows || []).forEach((item) => {
       list.push({
-        record_id: item.id,
+        id: item.id,
         image_name: item.image_name,
       });
     });
@@ -74,17 +75,27 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
   const handleDelete = (record?: any) => {
     if (record) {
       // 单个删除
-      const { record_id } = record || {};
+      const { id } = record || {};
-      const newData = tableData.filter((item) => item.record_id !== record_id);
+      const newData = tableData.filter((item) => item.id !== id);
+      const ids: any[] = [];
+      newData.map((item) => ids.push(item.id));
       setTableData(newData);
+      setSelectedRowKeys(ids);
+      setSelectedRows(newData);
+      onBindImageChange(newData);
+      setBindTableKeys([]);
     } else {
       // 批量删除
       const newData = tableData.filter(
-        (item) => !bindTableKeys.includes(item.record_id),
+        (item) => !bindTableKeys.includes(item.id),
       );
+      const ids: any[] = [];
+      newData.map((item) => ids.push(item.id));
       setTableData(newData);
-      setSelectedRowKeys([]);
+      setBindTableKeys([]);
-      setSelectedRows([]);
+      setSelectedRowKeys(ids);
+      setSelectedRows(newData);
+      onBindImageChange(newData);
     }
   };
 
@@ -136,10 +147,20 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
         title: '操作',
         key: 'action',
         width: 150,
+        align: 'center',
         render: (_, record) => (
-          <Button type="link" onClick={() => handleDelete(record)}>
+          <Popconfirm
-            删除
+            title=""
-          </Button>
+            placement="bottom"
+            description="请确认是否删除?"
+            onConfirm={() => handleDelete(record)}
+            okText="删除"
+            cancelText="取消"
+          >
+            <Button type="link">
+              删除
+            </Button>
+          </Popconfirm>
         ),
       },
     ];
@@ -154,37 +175,37 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
           title=""
           trigger="click"
           open={open}
-          // onOpenChange={setOpen}
+          onOpenChange={setOpen}
           placement={placement}
         >
-          <div>
+          <Button
-            <Button
+          // onClick={() => {
-              onClick={() => {
+          //   setOpen(true);
-                setOpen(true);
+          // }}
-              }}
+          // style={{ marginRight: '15px' }}
-              style={{ marginRight: '15px' }}
+          >
-            >
+            添加
-              添加
+          </Button>
-            </Button>
-            <Popconfirm
-              title=""
-              description="删除操作不可逆，请确认是否删除?"
-              onConfirm={() => handleDelete()}
-              disabled={bindTableKeys.length === 0}
-              okText="删除"
-              cancelText="取消"
-            >
-              <Button disabled={bindTableKeys.length === 0}>删除</Button>
-            </Popconfirm>
-          </div>
         </Popover>
+
+        <Popconfirm
+          title=""
+          placement="bottomRight"
+          description="请确认是否删除?"
+          onConfirm={() => handleDelete()}
+          disabled={bindTableKeys.length === 0}
+          okText="删除"
+          cancelText="取消"
+        >
+          <Button disabled={bindTableKeys.length === 0}>删除</Button>
+        </Popconfirm>
       </Space>
       <CustomTable
         dataSource={tableData}
         onDelete={handleDelete}
         columns={getColumns()}
         scrollY={400}
-        rowKey="record_id"
+        rowKey="id"
         pagination={false}
         rowSelection={{
           bindTableKeys,

web-fe/src/pages/terminal/mod/ImageSelectedTable/table.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { ERROR_CODE } from '@/constants/constants';
 import { getImageList } from '@/services/terminal';
-import { Input, message, Table } from 'antd';
+import { Input, message, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import React, { useEffect, useState } from 'react';
 import styles from './index.less';
@@ -65,7 +65,9 @@ const TablePage: React.FC<TableProps> = ({
     {
       title: '镜像名称',
       dataIndex: 'image_name',
-      render: (text: any) => <span>{text || ''}</span>,
+      render: (text) => {
+        return <Tooltip>{text || '--'}</Tooltip>;
+      },
     },
   ];
 
@@ -92,7 +94,7 @@ const TablePage: React.FC<TableProps> = ({
           onSearch={handleSearch}
           enterButton
           allowClear
-          style={{ width: '200px', marginLeft: '10px' }}
+          style={{ width: '300px', marginLeft: '10px' }}
         />
       </div>
 
@@ -102,7 +104,7 @@ const TablePage: React.FC<TableProps> = ({
         rowKey="id"
         loading={loading}
         rowSelection={{
-          selectedRowKeys,
+          selectedRowKeys:selectedRowKeys,
           preserveSelectedRowKeys: true,
           onChange: onUserTableSelect,
         }}

web-fe/src/pages/terminal/mod/bindImage/index.tsx

@@ -2,16 +2,15 @@
 import { ERROR_CODE } from '@/constants/constants';
 import { getBindImageAdd, getBindImageList } from '@/services/terminal';
 import { Button, Form, message, Modal } from 'antd';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import SelectedTable from '../ImageSelectedTable/index';
 import styles from './index.less';
 
 interface UserEditModalProps {
   onCancel: () => void;
-  onOk: (values: any) => void;
+  onOk: (values?: any) => void;
   confirmLoading?: boolean;
   dataDetial?: Termial.ModalBaseNode;
-  selectedOrg?: number;
 }
 
 const BindUserModal: React.FC<UserEditModalProps> = ({
@@ -20,9 +19,10 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
   confirmLoading = false,
   dataDetial,
 }) => {
-  const { recordData, visible, selectedOrg } = dataDetial || {};
+  const { recordData, visible } = dataDetial || {};
   const { device_id } = recordData || {};
   const [form] = Form.useForm();
+  const [dataSource, setDataSource] = useState<any[]>([]);
 
   useEffect(() => {
     const params = { device_id: device_id };
@@ -30,44 +30,61 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
       const { code, data = [] } = res || {};
       if (code === ERROR_CODE) {
         if (data && data.length) {
-          const initialValues = { image_list: data };
+          const imageList: any[] = [];
+          data.forEach((item: any) => {
+            imageList.push({
+              id: item.image_id,
+              image_name: item.image_name,
+              // current_id: item.id,
+            });
+          });
+          setDataSource(data);
+          const initialValues = { image_list: imageList };
           form.setFieldsValue(initialValues);
         }
       }
     });
-  }, [visible, form, recordData, selectedOrg]);
+  }, [visible, form, recordData]);
+
+  const onBind = (payload: any) => {
+    getBindImageAdd(payload).then((res: any) => {
+      const { code } = res || {};
+      if (code === ERROR_CODE) {
+        message.success('绑定成功');
+        if (onOk) onOk();
+      } else {
+        message.error('绑定失败');
+      }
+    });
+  };
 
   const handleOk = async () => {
     try {
       const values = await form.validateFields();
       const { image_list } = values || {};
+      console.log('image_list=====', image_list);
       if (image_list && image_list.length > 0) {
         const list: any[] = [];
         image_list.forEach((item: any) => {
-          list.push({
+          const obj: any = {
-            id: item.id,
             device_id: device_id,
-            image_id: item.record_id,
+            image_id: item.id,
-          });
+          };
+          const newData = dataSource.filter(
+            (record) => record.image_id === item.id,
+          );
+          if (newData && newData.length === 1) {
+            obj.id = newData[0].id;
+          }
+          list.push({ ...obj });
         });
         const payload: any = {
           data: list,
         };
-
+        onBind(payload);
-        getBindImageAdd(payload).then((res: any) => {
-          const { code } = res || {};
-          if (code === ERROR_CODE) {
-            message.success('绑定成功');
-            onOk();
-          } else {
-            message.error('绑定失败');
-          }
-        });
       } else {
         message.info('请先选择绑定的镜像');
       }
-      console.log('values=====', values);
-      // onOk(values);
     } catch (error) {
       message.error('请检查表单字段');
     }

web-fe/src/pages/terminal/mod/bindUser/index.tsx

@@ -24,8 +24,10 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
   dataDetial,
 }) => {
   const { recordData, visible } = dataDetial || {};
-  const { device_id,device_group_id } = recordData || {};
+  const { device_id, device_group_id } = recordData || {};
   const [orgTreeData, setOrgTreeData] = useState<User.OrganizationNode[]>([]);
+  const [userDataSource, setUserDataSource] = useState<any[]>([]);
+  // const [groupDataSource, setGroupDataSource] = useState<any[]>([]);
   const [form] = Form.useForm();
 
   const getGroupList = async () => {
@@ -57,7 +59,6 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
     if (!device_id) return;
     const payload = { device_id: device_id };
     getBindUserList(payload).then((res: any) => {
-      console.log('res========', res);
       const { code, data = [] } = res || {};
       if (code === ERROR_CODE) {
         if (data && data.length > 0) {
@@ -65,23 +66,47 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
           data.map((item: any) => {
             const { type, user_id, user_name, user_group_id, user_group_name } =
               item || {};
+            const obj: any = { ...item };
+            delete obj.id;
             if (type === 1) {
-              list.push({ record_id: user_id, name: user_name, ...item });
+              list.push({
+                table_id: `user_${user_id}`,
+                id: user_id,
+                name: user_name,
+                user_name: user_name,
+                type: type,
+              });
             } else {
               list.push({
-                record_id: user_group_id,
+                table_id: `group_${user_group_id}`,
+                id: user_group_id,
                 name: user_group_name,
-                ...item,
+                type: type,
               });
             }
           });
-          const initialValues = { user_list: list, status: 1 };
+          setUserDataSource(data);
+          const initialValues = { user_list: list };
           form.setFieldsValue(initialValues);
         }
       }
     });
   }, [visible, form, recordData]);
 
+  const onBind = (payload: any) => {
+    bindUserAdd(payload)
+      .then((res: any) => {
+        const { code } = res || {};
+        if (code === ERROR_CODE) {
+          message.success('绑定成功');
+          onOk();
+        } else {
+          message.error('绑定失败');
+        }
+      })
+      .catch(() => {});
+  };
+
   const handleOk = async () => {
     try {
       const values = await form.validateFields();
@@ -89,41 +114,43 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
       const list: any[] = [];
       if (user_list && user_list.length > 0) {
         user_list.forEach((item: any) => {
-          const { record_id, type, id } = item || {};
+          const { type, id } = item || {};
           if (type === 1) {
             // 用户
-            list.push({
+            const obj: any = {
-              user_id: record_id,
-              id: id,
               device_id,
               device_group_id,
               type: type,
-            });
+              user_id: id,
+            };
+            const newData = userDataSource.filter(
+              (record) => record.user_id === item.id && record.type === 1,
+            );
+            if (newData && newData.length === 1) {
+              obj.id = newData[0].id;
+            }
+            list.push(obj);
           } else {
             //用户分组
-            list.push({
+            const obj: any = {
-              user_group_id: record_id,
+              device_id,
-              id: id,
-              device_id: device_id,
               device_group_id,
               type: type,
-            });
+              user_group_id: id,
+            };
+            const newData = userDataSource.filter(
+              (record) => record.user_group_id === item.id && record.type === 2,
+            );
+            if (newData && newData.length === 1) {
+              obj.id = newData[0].id;
+            }
+            list.push(obj);
           }
         });
         const payload = {
           data: list,
         };
-        bindUserAdd(payload)
+        onBind(payload);
-          .then((res: any) => {
-            const { code } = res || {};
-            if (code === ERROR_CODE) {
-              message.success('绑定成功');
-              onOk();
-            } else {
-              message.error('绑定失败');
-            }
-          })
-          .catch(() => {});
       }
     } catch (error) {
       message.error('请检查表单字段');

web-fe/src/pages/terminal/mod/eidtDevice/index.tsx

@@ -134,7 +134,7 @@ const UserEditModal: React.FC<UserEditModalProps> = ({
         <Form.Item
           name="device_type"
           label="终端类型"
-          rules={[{ required: true, message: '请输入终端型号' }]}
+          rules={[{ required: false, message: '请输入终端型号' }]}
         >
           <Select options={DEVICE_TYPE_OPTIONS} />
         </Form.Item>

web-fe/src/pages/terminal/mod/selectedTable/index.tsx

@@ -2,7 +2,7 @@
 import CustomTree from '@/pages/components/customTree';
 import { TeamOutlined } from '@ant-design/icons';
 import type { PopoverProps } from 'antd';
-import { Alert, Button, Popconfirm, Popover, Space, Tabs } from 'antd';
+import { Alert, Button, Popconfirm, Popover, Space, Tabs,Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import React, { useEffect, useState } from 'react';
 import SelectConponents from '../selectConponents';
@@ -38,7 +38,6 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
   const [bindTableKeys, setBindTableKeys] = useState<any[]>([]);
 
   useEffect(() => {
-    console.log('formValue==========', formValue);
     const userList: any = [];
     const groupList: any = [];
     const userId: any = [];
@@ -47,10 +46,10 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
       formValue.forEach((item: any) => {
         if (item.type === 1) {
           userList.push(item);
-          userId.push(item.record_id);
+          userId.push(item.id);
         } else {
           groupList.push(item);
-          groupId.push(item.record_id);
+          groupId.push(item.id);
         }
       });
       setTableData(formValue);
@@ -61,11 +60,7 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
     }
   }, [formValue]);
 
-  // const onOrgSelect = (selectedKeys: React.Key[], info: any) => {};
-
   const onCheckChange = (keys: any[], info: any) => {
-    // const { checkedNodes } = info;
-    console.log('info=========', info);
     setCheckedKeys(keys);
     setCheckedRow(info);
   };
@@ -83,17 +78,19 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
     // 用户
     (selectedRows || []).forEach((item) => {
       list.push({
-        record_id: item.id,
+        id: item.id,
         name: item.user_name,
         type: 1,
+        table_id: `user_${item.id}`,
       });
     });
     // 用户组
     (checkedRow || []).forEach((item) => {
       list.push({
-        record_id: item.id,
+        id: item.id,
         name: item.name,
         type: 2,
+        table_id: `group_${item.id}`,
       });
     });
     setTableData(list);
@@ -102,34 +99,30 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
   };
 
   const onUserTableSelect = (keys: any[], row: any[]) => {
-    console.log('selectedRowKeys changed: ', keys);
-    console.log('selectedRowKeys rows: ', row);
     setSelectedRowKeys(keys as any);
     setSelectedRows(row);
   };
 
   const onSelectChange = (keys: any[]) => {
-    console.log('selectedRowKeys changed: ', keys);
     setBindTableKeys(keys as any);
   };
 
   const handleDelete = (record?: any) => {
-    console.log('record=====handleDelete', record);
     if (record) {
       // 单个删除
-      const { record_id } = record || {};
+      const { table_id } = record || {};
-      const newData = tableData.filter((item) => item.record_id !== record_id);
+      const newData = tableData.filter((item) => item.table_id !== table_id);
       setTableData(newData);
+      setBindTableKeys([]);
       if (onBindUserChange) onBindUserChange(newData);
     } else {
       // 批量删除
       const newData = tableData.filter(
-        (item) => !bindTableKeys.includes(item.record_id),
+        (item) => !bindTableKeys.includes(item.table_id),
       );
       setTableData(newData);
+      setBindTableKeys([]);
       if (onBindUserChange) onBindUserChange(newData);
-      setSelectedRowKeys([]);
-      setSelectedRows([]);
     }
   };
 
@@ -140,17 +133,24 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
         dataIndex: 'order',
         key: 'order',
         width: 80,
+        align: 'center',
         render: (_, record, index) => <span>{index + 1}</span>,
       },
       {
         title: '名称',
         dataIndex: 'name',
         key: 'name',
+        align: 'center',
+        render: (text) => {
+          return <Tooltip>{text || '--'}</Tooltip>;
+        },
       },
       {
         title: '类型',
         dataIndex: 'type',
         key: 'type',
+        align: 'center',
+         width: 220,
         render: (text) => (
           <span>{text == 1 ? '用户' : text == 2 ? '用户组' : ''}</span>
         ),
@@ -158,10 +158,19 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
       {
         title: '操作',
         key: 'action',
+        width: 180,
+        align: 'center',
         render: (_, record) => (
-          <Button type="link" onClick={() => handleDelete(record)}>
+          <Popconfirm
-            删除
+            title=""
-          </Button>
+            placement="bottom"
+            description="请确认是否删除?"
+            onConfirm={() => handleDelete(record)}
+            okText="删除"
+            cancelText="取消"
+          >
+            <Button type="link">删除</Button>
+          </Popconfirm>
         ),
       },
     ];
@@ -229,36 +238,28 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
           title=""
           trigger="click"
           open={open}
-          // onOpenChange={setOpen}
+          onOpenChange={setOpen}
           placement={placement}
         >
-          <div>
+          <Button>添加</Button>
-            <Button
-              onClick={() => {
-                setOpen(true);
-              }}
-              style={{ marginRight: '15px' }}
-            >
-              添加
-            </Button>
-            <Popconfirm
-              title=""
-              description="删除操作不可逆，请确认是否删除?"
-              onConfirm={() => handleDelete()}
-              disabled={bindTableKeys.length === 0}
-              okText="删除"
-              cancelText="取消"
-            >
-              <Button disabled={bindTableKeys.length === 0}>删除</Button>
-            </Popconfirm>
-          </div>
         </Popover>
+        <Popconfirm
+          title=""
+          placement="bottomRight"
+          description="请确认是否删除?"
+          onConfirm={() => handleDelete()}
+          disabled={bindTableKeys.length === 0}
+          okText="删除"
+          cancelText="取消"
+        >
+          <Button disabled={bindTableKeys.length === 0}>删除</Button>
+        </Popconfirm>
       </Space>
       <CustomTable
         dataSource={tableData}
         onDelete={handleDelete}
         scrollY={400}
-        rowKey="record_id"
+        rowKey="table_id"
         pagination={false}
         columns={getColumns()}
         rowSelection={{

web-fe/src/pages/terminal/mod/selectedTable/table.tsx

@@ -23,7 +23,6 @@ const DeletableTable: React.FC<DeletableTableProps> = (props) => {
     scrollY = 400,
     ...restProps
   } = props;
-  console.log("datasource=====",dataSource);
   // const getColumns = (): ColumnsType<any> => {
   //   const columns: ColumnsType<any> = [
   //     {