add device service selection

src/components/Edge/createDevice.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-if="createFormVisible" :close-on-click-modal="false" width="80%" :title="'创建'+typeMap[classification]" :visible.sync="createFormVisible">
+  <el-dialog v-if="createFormVisible" :close-on-click-modal="false" width="80%" title="创建" :visible.sync="createFormVisible">
     <el-steps :active="stepNum" finish-status="success" simple>
       <el-step title="选择设备服务" />
       <el-step title="选择设备元信息" />
@@ -7,6 +7,14 @@
       <el-step title="创建自动事件" />
       <el-step title="创建设备通信协议" />
     </el-steps>
+    <List
+      ref="multipleTable"
+      class="multipleTable"
+      :columns="columns"
+      :table-list-data="serviceList"
+      tooltip-effect="dark"
+      @current-change="handleCurrentChange"
+    />
     <!-- <basicInfoForm v-show="stepNum===0" ref="basicInfoForm" v-model="metaData" :classification="classification" @checkSuccess="handleCheckSuccess()" />
     <containerImage v-if="stepNum===1" v-model="metaData" :classification="classification" />
     <mountVolumes v-if="stepNum===2" v-model="metaData" />
@@ -30,9 +38,11 @@
 // import fs from 'fs'
 import yaml from 'js-yaml'
 // import baseYaml from './base.yaml'
+import { getEdgeDataByIpPath } from '@/api/edge/edge'
+import List from '@/components/list.vue'
 
 export default {
-  // components: { basicInfoForm, containerImage, advancedSettings, mountVolumes },
+  components: { List },
   props: {
     value: {
       type: Boolean,
@@ -49,11 +59,22 @@ export default {
   },
   data() {
     return {
-      typeMap: {
-        deployments: '部署',
-        statefulsets: '有状态副本集',
-        daemonsets: '守护进程集'
-      },
+      columns: [
+        // { type: 'selection', label: '选择' },
+        { prop: 'id', label: 'ID' },
+        { prop: 'name', label: '名字' },
+        { prop: 'description', label: '描述' },
+        { prop: 'baseAddress', label: '端口', formatter: (row) => {
+          return <div>
+            {row.baseAddress.split(':')[2]}
+          </div>
+        } },
+        { prop: 'adminState', label: '管理状态' },
+        { prop: 'created', label: '创建时间', formatter: (row) => {
+          return <div>{new Date(row.created).toLocaleString()}</div>
+        } }
+      ],
+      serviceList: [],
       stepNum: 0,
       metaData: {},
       baseYaml: `apiVersion: apps/v1
@@ -111,9 +132,22 @@ spec:
 
   },
   created() {
-    this.transformYaml()
+    // this.transformYaml()
+  },
+  mounted() {
+    this.getServiceList()
   },
   methods: {
+    // 设备服务列表
+    getServiceList() {
+      getEdgeDataByIpPath({ address: this.$route.query.ip, path: `core-metadata/api/v2/deviceservice/all?offset=0&limit=-1` }).then(e => {
+        this.serviceList = e.data.services || []
+      })
+    },
+    handleCurrentChange(e) {
+      console.log(e)
+      this.selectedService = e
+    },
     createDevice() {
       // getWorkloadsIsExist(this.classification, {
       //   clusterName: this.clusterName,

src/components/Edge/deviceServiceList.vue

@@ -49,7 +49,7 @@
           tooltip-effect="dark"
         >
           <template v-slot:filterBtns>
-            <el-button size="medium" type="primary" @click="addDevice">添加</el-button>
+            <el-button size="medium" type="primary" @click="createFormVisible = true">添加</el-button>
           </template>
         </List>
         <CreateDevice v-model="createFormVisible" />