feat(前端):终端绑定用户

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

@@ -159,7 +159,7 @@ const UserListPage: React.FC = () => {
     try {
       const { id } = device || {};
       const payload = {
-        ids: id ? id : selectedRowKeys,
+        id: id ? id : selectedRowKeys,
       };
       const res: any = await deleteDevice(payload);
       const { code } = res || {};
@@ -390,6 +390,14 @@ const UserListPage: React.FC = () => {
     getDataSource();
   };
 
+  const onBindImageSave = () => {
+    setBindImageDta({
+      recordData: {},
+      visible: false,
+    });
+    getDataSource();
+  };
+
   return (
     <div className={styles.user_content}>
       <div className={styles.left_content}>
@@ -552,7 +560,9 @@ const UserListPage: React.FC = () => {
               visible: false,
             });
           }}
-          onOk={() => {onBindUserSave()}}
+          onOk={() => {
+            onBindUserSave();
+          }}
         />
       )}
       {bindImageDta.visible && (
@@ -564,7 +574,9 @@ const UserListPage: React.FC = () => {
               visible: false,
             });
           }}
-          onOk={() => {}}
+          onOk={() => {
+            onBindImageSave();
+          }}
         />
       )}
     </div>

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import type { PopoverProps } from 'antd';
-import { Button, Popconfirm, Popover, Space } from 'antd';
+import { Button, Popconfirm, Popover, Space, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import React, { useEffect, useState } from 'react';
 import CustomTable from '../selectedTable/table';
@@ -50,14 +50,13 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
 
   const onHandleOk = () => {
     const list: any[] = [];
-    // 用户
+    // 镜像
     (selectedRows || []).forEach((item) => {
       list.push({
-        id: item.image_id,
+        record_id: item.id,
-        name: item.image_name,
+        image_name: item.image_name,
       });
     });
-
     setTableData(list);
     onBindImageChange(list);
     onHnadleCancel();
@@ -75,13 +74,13 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
   const handleDelete = (record?: any) => {
     if (record) {
       // 单个删除
-      const { id } = record || {};
+      const { record_id } = record || {};
-      const newData = tableData.filter((item) => item.id !== id);
+      const newData = tableData.filter((item) => item.record_id !== record_id);
       setTableData(newData);
     } else {
       // 批量删除
       const newData = tableData.filter(
-        (item) => !bindTableKeys.includes(item.id),
+        (item) => !bindTableKeys.includes(item.record_id),
       );
       setTableData(newData);
       setSelectedRowKeys([]);
@@ -129,12 +128,16 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
         title: '镜像名称',
         dataIndex: 'image_name',
         key: 'image_name',
+        render: (text) => {
+          return <Tooltip>{text || '--'}</Tooltip>;
+        },
       },
       {
         title: '操作',
         key: 'action',
+        width: 150,
         render: (_, record) => (
-          <Button type="link" danger onClick={() => handleDelete(record)}>
+          <Button type="link" onClick={() => handleDelete(record)}>
             删除
           </Button>
         ),
@@ -181,7 +184,7 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
         onDelete={handleDelete}
         columns={getColumns()}
         scrollY={400}
-        rowKey="id"
+        rowKey="record_id"
         pagination={false}
         rowSelection={{
           bindTableKeys,

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

@@ -1,6 +1,6 @@
 // index.tsx
 import { ERROR_CODE } from '@/constants/constants';
-import { getBindImageList } from '@/services/terminal';
+import { getBindImageAdd, getBindImageList } from '@/services/terminal';
 import { Button, Form, message, Modal } from 'antd';
 import React, { useEffect } from 'react';
 import SelectedTable from '../ImageSelectedTable/index';
@@ -21,7 +21,7 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
   dataDetial,
 }) => {
   const { recordData, visible, selectedOrg } = dataDetial || {};
-  const { id: device_id } = recordData || {};
+  const { device_id } = recordData || {};
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -40,8 +40,34 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
   const handleOk = async () => {
     try {
       const values = await form.validateFields();
+      const { image_list } = values || {};
+      if (image_list && image_list.length > 0) {
+        const list: any[] = [];
+        image_list.forEach((item: any) => {
+          list.push({
+            id: item.id,
+            device_id: device_id,
+            image_id: item.record_id,
+          });
+        });
+        const payload: any = {
+          data: list,
+        };
+
+        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);
+      // onOk(values);
     } catch (error) {
       message.error('请检查表单字段');
     }

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

@@ -24,7 +24,7 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
   dataDetial,
 }) => {
   const { recordData, visible } = dataDetial || {};
-  const { device_id } = recordData || {};
+  const { device_id,device_group_id } = recordData || {};
   const [orgTreeData, setOrgTreeData] = useState<User.OrganizationNode[]>([]);
   const [form] = Form.useForm();
 
@@ -96,6 +96,7 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
               user_id: record_id,
               id: id,
               device_id,
+              device_group_id,
               type: type,
             });
           } else {
@@ -104,6 +105,7 @@ const BindUserModal: React.FC<UserEditModalProps> = ({
               user_group_id: record_id,
               id: id,
               device_id: device_id,
+              device_group_id,
               type: type,
             });
           }

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

@@ -97,7 +97,7 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
       });
     });
     setTableData(list);
-    onBindUserChange(list);
+    if (onBindUserChange) onBindUserChange(list);
     onHnadleCancel();
   };
 
@@ -120,12 +120,14 @@ const SelectedTable: React.FC<SelectedTableProps> = (props) => {
       const { record_id } = record || {};
       const newData = tableData.filter((item) => item.record_id !== record_id);
       setTableData(newData);
+      if (onBindUserChange) onBindUserChange(newData);
     } else {
       // 批量删除
       const newData = tableData.filter(
         (item) => !bindTableKeys.includes(item.record_id),
       );
       setTableData(newData);
+      if (onBindUserChange) onBindUserChange(newData);
       setSelectedRowKeys([]);
       setSelectedRows([]);
     }