优化执行指令时选择资产的方式 close #85

web/src/components/command/DynamicCommand.js

@@ -32,10 +32,10 @@ import {
     SyncOutlined,
     UndoOutlined
 } from '@ant-design/icons';
-import {compare} from "../../utils/utils";
 
 import {hasPermission, isAdmin} from "../../service/permission";
 import dayjs from "dayjs";
+import ChooseAsset from "./ChooseAsset";
 
 const confirm = Modal.confirm;
 const {Content} = Layout;
@@ -191,6 +191,12 @@ class DynamicCommand extends Component {
         });
     };
 
+    setCheckedAssets = (checkedAssets) => {
+        this.setState({
+            checkedAssets: checkedAssets
+        })
+    }
+
     executeCommand = e => {
         let checkedAssets = this.state.checkedAssets;
         if (checkedAssets.length === 0) {
@@ -198,18 +204,10 @@ class DynamicCommand extends Component {
             return;
         }
 
-        let assets = this.state.assets;
         let cAssets = checkedAssets.map(item => {
-            let name = '';
-            for (let i = 0; i < assets.length; i++) {
-                if (assets[i]['id'] === item) {
-                    name = assets[i]['name'];
-                    break;
-                }
-            }
             return {
-                id: item,
-                name: name
+                id: item['id'],
+                name: item['name']
             }
         });
 
@@ -474,17 +472,6 @@ class DynamicCommand extends Component {
                                 assetsVisible: true,
                                 commandId: record['id']
                             });
-
-                            let result = await request.get('/assets?protocol=ssh');
-                            if (result.code === 1) {
-                                let assets = result.data;
-                                assets.sort(compare('name'));
-                                this.setState({
-                                    assets: assets
-                                });
-                            } else {
-                                message.error(result.message);
-                            }
                         }}>执行</Button>
 
                         <Dropdown overlay={menu}>
@@ -640,7 +627,8 @@ class DynamicCommand extends Component {
                     <Modal
                         title="选择资产"
                         visible={this.state.assetsVisible}
-
+                        width={window.innerWidth * 0.8}
+                        centered={true}
                         onOk={this.executeCommand}
                         onCancel={() => {
                             this.setState({
@@ -648,19 +636,11 @@ class DynamicCommand extends Component {
                             });
                         }}
                     >
-                        <Checkbox indeterminate={this.state.indeterminate} onChange={this.onCheckAllChange}
-                                  checked={this.state.checkAllChecked}>
-                            全选
-                        </Checkbox>
-                        <Divider/>
+                        <ChooseAsset
+                            setCheckedAssets={this.setCheckedAssets}
+                        >
 
-                        <CheckboxGroup options={this.state.assets.map((item) => {
-                            return {
-                                label: item.name,
-                                value: item.id,
-                                key: item.id,
-                            }
-                        })} value={this.state.checkedAssets} onChange={this.onChange}/>
+                        </ChooseAsset>
                     </Modal>