添加部署设备选择

src/views/modules/generator/images.vue

@@ -1,6 +1,37 @@
 <template>
   <div class="mod-config">
-
+    <el-dialog
+      title="应用部署设备选择"
+      :visible.sync="appDeviceVisible"
+      width="30%"
+      >
+      <el-form>
+        <el-form-item label="选择部署设备">
+          <el-select v-model="device" placeholder="请选择" @change="getEdgenodes()">
+            <el-option
+              v-for="item in deviceOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择边缘结点" v-if="edgeSelectVisible">
+          <el-select v-model="edgenode" placeholder="请选择">
+            <el-option
+              v-for="item in edgenodes"
+              :key="item.edgenodesId"
+              :label="item.edgenodesName"
+              :value="item.edgenodesId">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="checkDeployDevice()">确 定</el-button>
+      </span>
+    </el-dialog>
     <el-form
       :inline="true"
       :model="dataForm"
@@ -130,13 +161,21 @@
         label="操作"
       >
         <template slot-scope="scope">
-          <el-button
+          <!-- <el-button
             type="primary"
             size="small"
             :disabled="scope.row.imageDescription == '已发布' ? true : false"
             :loading="scope.row.state == 0 ? false : true"
             @click="startImage(scope.row)"
             >{{ scope.row.loadingText }}</el-button
+          > -->
+          <el-button
+            type="primary"
+            size="small"
+            :disabled="scope.row.imageDescription == '已发布' ? true : false"
+            :loading="scope.row.state == 0 ? false : true"
+            @click="chooseAppDevice(scope.row)"
+            >{{ scope.row.loadingText }}</el-button
           >
           <el-button
             type="danger"
@@ -189,6 +228,7 @@ export default {
       dataListLoading: false,
       dataListSelections: [],
       addOrUpdateVisible: false,
+      appDeviceVisible: false,
       filterVal: "",
       imageTypeOptions: [
         {
@@ -204,6 +244,33 @@ export default {
           label: "应用镜像",
         },
       ],
+      device:"",
+      deviceOptions:[
+        {
+          value: "0",
+          label: "中心云",
+        },
+        {
+          value: "-1",
+          label: "边缘云",
+        },
+      ],
+      edgeSelectVisible:false,
+      edgenode:"",
+      edgenodes:[
+        {
+          edgenodesId:"1",
+          edgenodesName:"边缘设备1",
+        },{
+          edgenodesId:"2",
+          edgenodesName:"边缘设备2",
+        },{
+          edgenodesId:"3",
+          edgenodesName:"边缘设备3",
+        }
+      ],
+      image:{},
+      deployDevice:"",
     };
   },
   components: {
@@ -373,6 +440,12 @@ export default {
       );
       this.getDataList();
     },
+    // 选择应用部署设备
+    chooseAppDevice(image){
+      this.appDeviceVisible=true;
+      this.image=image;
+
+    },
     // 启动镜像
     async startImage(image) {
       this.$confirm(`是否启动镜像${image.imageName}`, "提示", {
@@ -463,6 +536,24 @@ export default {
       });
       this.getDataList();
     },
+    // 获取所有边缘设备
+    getEdgenodes(){
+      if(this.device=="-1"){
+        this.edgeSelectVisible=true;
+      }else{
+        this.edgeSelectVisible=false;
+      }
+    },
+    checkDeployDevice(){
+      if(this.device=="-1"){
+        this.deployDevice=this.edgenode;
+        console.log("部署在边缘结点："+this.deployDevice);
+      }else{
+        this.deployDevice=this.device;
+        console.log("部署在中心云："+this.deployDevice);
+      }
+      
+    }
   },
 };
 </script>