监控策略、拓扑图、资源分组等

src/views/disRevenue/resource/group/details.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="app-container">
-        <Form :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
+        <Form ref="formRes" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
     </div>
 </template>
 
 <script setup name="Handle">
   import Form from '@/components/form/index.vue';
-  import {addGroup, getGroup, updateGroup, resNameList} from "@/api/disRevenue/resource"
+  import {addGroup, getGroup, updateGroup, resNameList,exitsResourceById} from "@/api/disRevenue/resource"
   export default {
     name: 'GroupDetails',
     components: {Form},
@@ -14,7 +14,8 @@
       return {
         ruleForm: {},
         formList: [],
-        paramsData: {}
+        paramsData: {},
+        includedDevicesList: {},
       }
     },
     created() {
@@ -34,7 +35,7 @@
             id: {label: 'ID',hidden: true},
             groupName: {label: '名称', span: 24, type: 'input', rules: [{required: true, message: '请输入名称', trigger: 'blur'}]},
             description: {label: '描述', span: 24, type: 'textarea'},
-            includedDevices: {label: '包含设备', span: 24, type: 'transfer',options: []}
+            includedDevicesId: {label: '包含设备', span: 24, type: 'transfer',options: [], eventName: 'change'}
           }
         }];
       },
@@ -42,8 +43,9 @@
       getFormDataList(id) {
         getGroup(id).then(val => {
           if (val && val.data) {
-            if (val.data && val.data['includedDevices']) {
-              val.data['includedDevices'] = val.data['includedDevices'].split(',');
+            if (val.data && val.data['includedDevicesId']) {
+              let newArr = val.data['includedDevicesId'].split(',');
+              val.data['includedDevicesId'] = newArr.map(id => Number(id));
             }
             this.ruleForm = val.data;
           }
@@ -54,19 +56,24 @@
       // 包含设备
       getResNameList() {
         resNameList().then(val => {
-          this.formList[0].controls['includedDevices']['options']= val && val.map(item => {
-            return Object.assign({label: item.resourceName, key: item.resourceName});
-          });
+          if (val) {
+            this.formList[0].controls['includedDevicesId']['options']= val && val.map(item => {
+              this.includedDevicesList[item.id] = item;
+              return Object.assign({label: item.resourceName, key: item.id});
+            });
+          }
         }).catch(() => {
           this.$modal.msgError("操作失败")
         });
       },
       // 监听事件
       callback(result, dataVal, formVal) {
+        console.log('result===',formVal);
         if (result && result.fnCode) {
           switch (result.fnCode) {
             case 'submit':
-              dataVal['includedDevices'] = dataVal['includedDevices'].join();
+              dataVal['includedDevicesName'] = (dataVal['includedDevicesId'].map(id => this.includedDevicesList[id].resourceName)).join();
+              dataVal['includedDevicesId'] = dataVal['includedDevicesId'].join();
               let fnType = addGroup;
               if (dataVal && dataVal.id) {
                 fnType = updateGroup;
@@ -81,6 +88,20 @@
             case 'cancle':
               this.$router.push("/resource/group");
               break;
+            case 'includedDevicesId':
+              // if (formVal && formVal === 'right') {
+              //   exitsResourceById({resourceIds: dataVal.join(',')}).then(res => {
+              //     console.log('res=',res.msg);
+              //     if (res.msg) {
+              //       let content = '<p style="font-size: 1rem;font-weight: 600;">资源从其他分组移动到此组</p>' +
+              //         '<p style="height: 0px;margin:10px 0 50px;">资源移动到此组后，将在原来到组中消失，相关的监控策略也会消失</p>';
+              //       this.$modal.confirm(content).then(() => {
+              //
+              //       }).catch(() => {});
+              //     }
+              //   });
+              // }
+              break;
             default:
           }
         }