add drag

2022-05-05 15:40:14 +08:00 · 2022-05-05 15:40:14 +08:00 · f0e8c59be0
parent 40724d800d
commit f0e8c59be0
15 changed files with 216 additions and 132 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -43,7 +43,7 @@
        "vue-json-editor": "^1.4.3",
        "vue-router": "3.0.2",
        "vue-splitpane": "1.0.4",
-        "vuedraggable": "2.20.0",
+        "vuedraggable": "^2.20.0",
        "vuex": "3.1.0",
        "xlsx": "0.14.1",
        "xterm": "^4.12.0",
--- a/package.json
+++ b/package.json
@ -49,7 +49,7 @@
    "vue-json-editor": "^1.4.3",
    "vue-router": "3.0.2",
    "vue-splitpane": "1.0.4",
-    "vuedraggable": "2.20.0",
+    "vuedraggable": "^2.20.0",
    "vuex": "3.1.0",
    "xlsx": "0.14.1",
    "xterm": "^4.12.0",
--- a/src/api/one-class-page/virtualMachine.js
+++ b/src/api/one-class-page/virtualMachine.js
@ -81,6 +81,24 @@ export function getSecrests() {
  })
 }

+// 虚拟机创建 - 获取模板
+// https://10.105.20.1/v1/harvester/harvesterhci.io.virtualmachinetemplates
+export function getVMTemplate() {
+  return request({
+    url: '/virtual/v1/harvester/harvesterhci.io.virtualmachinetemplates',
+    method: 'get'
+  })
+}
+
+// 虚拟机创建 - 获取模板版本
+// https://10.105.20.1/v1/harvester/harvesterhci.io.virtualmachinetemplateversions
+export function getVMTemplateVersion() {
+  return request({
+    url: '/virtual/v1/harvester/harvesterhci.io.virtualmachinetemplateversions',
+    method: 'get'
+  })
+}
+
 // Request URL: https://103.116.78.162:30443/
 // 创建虚拟机
 export function postVirtualMachine(query) {
--- a/src/views/virtualMachine/virtualMachine/detail.vue
+++ b/src/views/virtualMachine/virtualMachine/detail.vue
@ -52,7 +52,6 @@
              v-model="formData.userData"
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 20}"
-              placeholder=""
            />
            <el-divider />
            <h5>网络数据</h5>
@ -60,7 +59,6 @@
              v-model="formData.networkData"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 20}"
-              placeholder=""
            />
          </el-card>
        </el-tab-pane>
--- a/src/views/virtualMachine/virtualMachine/edit.vue
+++ b/src/views/virtualMachine/virtualMachine/edit.vue
@ -12,42 +12,98 @@
      </el-form-item>
      <div v-if="instanceNumber === 1">
        <el-row :gutter="10">
-          <el-col :span="12"> <el-form-item label="名称" prop="name"><el-input
+          <el-col :span="6">
+            <el-form-item label="命名空间" prop="namespace">
+              <el-select v-model="namespace" :hide-required-asterisk="true" class="selectPro" placeholder="请选择命名空间">
+                <el-option
+                  v-for="item in namespaceList"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                  {{ item }}
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8"> <el-form-item label="名称" prop="name"><el-input
            v-model="name"
-            placeholder=""
            :disabled="disableConfig"
            :hide-required-asterisk="true"
          /></el-form-item></el-col>
-          <el-col :span="12">
+          <el-col :span="10">
            <el-form-item label="描述" prop="description"><el-input
              v-model="description"
-              placeholder=""
              :disabled="disableConfig"
            /></el-form-item></el-col>
        </el-row>
      </div>
      <div v-if="instanceNumber === 2">
        <el-row :gutter="10">
-          <el-col :span="8"> <el-form-item label="名称前缀" prop="name"><el-input
+          <el-col :span="6">
+            <el-form-item label="命名空间" prop="namespace">
+              <el-select v-model="namespace" :hide-required-asterisk="true" class="selectPro" placeholder="请选择命名空间">
+                <el-option
+                  v-for="item in namespaceList"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                  {{ item }}
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6"> <el-form-item label="名称前缀" prop="name"><el-input
            v-model="prename"
-            placeholder=""
            :disabled="disableConfig"
            :hide-required-asterisk="true"
          /></el-form-item></el-col>
-          <el-col :span="8">
+          <el-col :span="10">
            <el-form-item label="描述" prop="description"><el-input
              v-model="description"
-              placeholder=""
              :disabled="disableConfig"
            /></el-form-item></el-col>
-          <el-col :span="8">
+          <el-col :span="2">
            <el-form-item label="数量" prop="number"><el-input
              v-model="number"
-              placeholder=""
              :disabled="disableConfig"
            /></el-form-item></el-col>
        </el-row>
-      </div></el-form>
+      </div>
+      <el-checkbox v-model="checked">使用模板</el-checkbox>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="模板" prop="template">
+            <el-select v-model="template" :hide-required-asterisk="true" class="selectPro">
+              <el-option
+                v-for="item in templateList"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+                {{ item }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="版本" prop="version">
+            <el-select v-model="version" :hide-required-asterisk="true" class="selectPro">
+              <el-option
+                v-for="item in versionList"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+                {{ item }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+    </el-form>
    <div>
      <VirtualMachineConfig ref="child" :disable-config="disableConfig" :is-create="true" />
    </div>
@ -60,7 +116,7 @@

 <script>
 import VirtualMachineConfig from '../virtualMachineConfig'
-import { postVirtualMachine } from '@/api/one-class-page/virtualMachine'
+import { getVMTemplate, getVMTemplateVersion, postVirtualMachine } from '@/api/one-class-page/virtualMachine'

 export default {
  name: 'VirtualMachineCreate',
@ -71,16 +127,51 @@ export default {
    return {
      instanceNumber: 1,
      disableConfig: false,
+      namespace: '',
      name: '',
      number: '',
      description: '',
-      prename: ''
+      prename: '',
+      checked: false,
+      template: '',
+      version: '',
+      templateList: [],
+      versionList: [],
+      allVersionList: [],
+      namespaceList: []
+    }
+  },
+  watch: {
+    template() {
+      console.log(this.versionList)
+      this.versionList = this.setVersionList()
    }
  },
  mounted() {
    this.$refs.child.disableConfig = false
+    this.$HandleFunc.getAllNamespace().then(e => {
+      this.namespaceList = e.rows.map(e => e.name)
+    })
+    getVMTemplate().then(e => {
+      this.templateList = e.data.map(e => e.id)
+    })
+    getVMTemplateVersion().then(e => {
+      this.allVersionList = e.data
+    })
  },
  methods: {
+    setVersionList() {
+      const curTemplateResource = this.templateList.find(O => O.id === this.template)
+      const defaultVersion = curTemplateResource?.defaultVersion
+
+      return this.allVersionList.filter(O => O.templateId === this.template).map((T) => {
+        const version = T.version
+        console.log(version)
+        const label = defaultVersion === version ? `${version} (默认)` : version
+        const value = T.id
+        return { label, value }
+      })
+    },
    saveVirtualMachine() {
      var formData = this.$refs['child'].formData
      const submitData = {
--- a/src/views/virtualMachine/virtualMachineConfig.vue
+++ b/src/views/virtualMachine/virtualMachineConfig.vue
@ -6,7 +6,6 @@
          <el-row :gutter="10">
            <el-col :span="12"> <el-form-item label="CPU" prop="cpu"><el-input
              v-model="formData.cpu"
-              placeholder=""
              :disabled="disableConfig"
              :hide-required-asterisk="true"
            ><template slot="append">C</template></el-input></el-form-item></el-col>
@ -15,7 +14,6 @@

              <el-form-item label="内存" prop="memory"><el-input
                v-model="formData.memory"
-                placeholder=""
                :disabled="disableConfig"
              ><template slot="append">GiB</template></el-input></el-form-item></el-col>
          </el-row>
@ -49,9 +47,16 @@
          <el-button :disabled="disableConfig" @click="createSSHKey">创建SSH秘钥</el-button>
        </el-tab-pane>
        <el-tab-pane label="卷">
-          <h4>卷</h4>
+          <el-alert
+            title="拖放卷来更改引导顺序。"
+            type="info"
+          />
          <div v-if="show">
-            <component :is="item" v-for="(item, index) in allComponents" ref="volume" :key="index" :index="index" :child-list="childLists[index]" :is-create="isCreate" @delete="deletePanel" />
+            <draggable v-model="allComponents">
+              <!-- <transition-group> -->
+              <component :is="item" v-for="(item, index) in allComponents" ref="volume" :key="index" :index="index" :child-list="childLists[index]" :is-create="isCreate" @delete="deletePanel" />
+              <!-- </transition-group> -->
+            </draggable>
            <el-button v-if="!disableConfig" type="primary" align="left" @click="addVolume">添加卷</el-button>
            <el-button v-if="!disableConfig" type="primary" @click="addExistedVolumn">添加已存在的卷</el-button>
            <el-button v-if="!disableConfig" type="primary" @click="addImage">添加VM镜像</el-button>
@ -59,18 +64,15 @@
          </div>
        </el-tab-pane>
        <el-tab-pane label="网络">
-          <h4>网络</h4>
          <div v-if="show">
            <VirtualMachineNetwork v-for="(item, index) in allNetworkCard" ref="network" :key="index" :index="index" :card-data="item" :disable-config="disableConfig" :is-create="isCreate" @delete="deleteNetwork" />
            <el-button v-if="!disableConfig" type="primary" align="left" @click="addNetwork">添加网络</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="高级设置">
-          <h4>高级设置</h4>
          <el-row :gutter="10">
            <el-col :span="12"> <el-form-item label="主机名称" prop="hostname"><el-input
              v-model="formData.hostname"
-              placeholder=""
              :disabled="disableConfig"
              :hide-required-asterisk="true"
            /></el-form-item></el-col>
@ -94,7 +96,6 @@
            type="textarea"
            :rows="2"
            :disabled="disableConfig"
-            placeholder=""
          /></el-form-item>
          <h5>网络数据</h5>
          <p>网络设备配置可让您自定义实例的网络接口,例如管理子网分配，虚拟设备创建（bonds，bridges，Vlan）路由和DNS配置</p>
@ -103,7 +104,6 @@
            type="textarea"
            :rows="2"
            :disabled="disableConfig"
-            placeholder=""
          /></el-form-item>
          <el-form-item>
            <el-checkbox-group v-model="checkList">
@ -140,6 +140,7 @@ import ConfigExistedVolume from './virtualMachineConfig/configExistedVolume'
 import ConfigContainerMirror from './virtualMachineConfig/configContainerMirror'
 import VirtualMachineNetwork from './virtualMachineConfig/virtualMachineNetwork'
 import randomstring from 'randomstring'
+import draggable from 'vuedraggable'

 export default {
  name: 'VirtualMachineConfig',
@ -148,7 +149,8 @@ export default {
    VMImage: ConfigImage,
    ExistingVolume: ConfigExistedVolume,
    Container: ConfigContainerMirror,
-    VirtualMachineNetwork
+    VirtualMachineNetwork,
+    draggable
  },
  props: {
    childList: {
--- a/src/views/virtualMachine/virtualMachineConfig/configContainerMirror.vue
+++ b/src/views/virtualMachine/virtualMachineConfig/configContainerMirror.vue
@ -1,19 +1,16 @@
 <template>
-
  <el-card>
-    <div :disabled="disableConfig" @click="deleteCard"> <i class="el-icon-close show-icon" /></div>
+    <div @click="deleteCard"> <i class="el-icon-close show-icon" /></div>
    <h5>容器镜像</h5>
-    <el-row>
+    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="名称" prop="name"><el-input
          v-model="formData.Name"
-          placeholder=""
-          :disabled="disableConfig"
        /></el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="类型" prop="type"><br>
-          <el-select v-model="formData.Type" :disabled="disableConfig">
+          <el-select v-model="formData.Type">
            <el-option
              v-for="item in vmImageTypeList"
              :key="item"
@ -27,13 +24,11 @@
        <el-form-item label="Docker镜像" prop="dockerMirror">
          <el-input
            v-model="formData.dockerMirror"
-            placeholder=""
-            :disabled="disableConfig"
          /></el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总线" prop="bus"><br>
-          <el-select v-model="formData.Bus" :disabled="disableConfig">
+          <el-select v-model="formData.Bus">
            <el-option
              v-for="item in busList"
              :key="item"
@ -44,7 +39,7 @@
      </el-col>
      <el-col :span="8">
        <el-form-item label="启动顺序" prop="BootOrder"><br>
-          <el-select v-model="formData.BootOrder" :disabled="disableConfig">
+          <el-select v-model="formData.BootOrder">
            <el-option
              v-for="item in bootOrderList"
              :key="item"
@ -54,6 +49,7 @@
          </el-select></el-form-item>
      </el-col>
    </el-row>
+    <span class="tips">BootOrder:{{ index + 1 }}</span>
  </el-card>

 </template>
@ -75,7 +71,6 @@ export default {
    return {
      dialogFormVisible: false,
      checkList: '',
-      disableConfig: false,
      machineTypeOptions: ['q35', 'pc', 'None'],
      formData: {
        Name: 'cdrom-disk',
@ -97,14 +92,12 @@ export default {
    }
  },
  mounted() {
-    this.$route.query.disableConfig = null
    this.formData.Name = this.childList[0]
    this.formData.Type = this.childList[1]
    this.formData.dockerMirror = this.childList[6]
    this.formData.Size = this.childList[3]
    this.formData.Bus = this.childList[4]
    this.formData.BootOrder = this.childList[5]
-    this.disableConfig = this.childList[8]
  },
  methods: {
    createSSHKey() {
--- a/src/views/virtualMachine/virtualMachineConfig/configExistedVolume.vue
+++ b/src/views/virtualMachine/virtualMachineConfig/configExistedVolume.vue
@ -3,17 +3,15 @@
  <el-card>
    <div @click="deleteCard"> <i class="el-icon-close show-icon" /></div>
    <h5>已存在的卷</h5>
-    <el-row :gutter="10">
+    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="名称" prop="name"><el-input
          v-model="formData.Name"
-          placeholder=""
-          :disabled="disableConfig"
        /></el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="类型" prop="type"><br>
-          <el-select v-model="formData.Type" :disabled="disableConfig">
+          <el-select v-model="formData.Type">
            <el-option
              v-for="item in vmImageTypeList"
              :key="item"
@ -25,12 +23,12 @@
      </el-col>
      <el-col :span="8">
        <el-form-item label="卷" prop="type"><br>
-          <el-select v-model="formData.volume" :disabled="disableConfig" @change="selectVolume">
+          <el-select v-model="formData.volume" @change="selectVolume">
            <el-option
-              v-for="(item, index) in volumeList"
-              :key="index"
+              v-for="(item, ind) in volumeList"
+              :key="ind"
              :label="item.metadata.name"
-              :value="index"
+              :value="ind"
            />
          </el-select>
        </el-form-item>
@ -38,7 +36,6 @@
      <el-col :span="8">
        <el-form-item label="大小" prop="size"><el-input
          v-model="formData.Size"
-          placeholder=""
          :disabled="true"
        ><template slot="append">GiB</template></el-input></el-form-item>
      </el-col>
@ -53,9 +50,9 @@
            />
          </el-select></el-form-item>
      </el-col>
-      <el-col :span="8">
+      <!-- <el-col :span="8">
        <el-form-item label="启动顺序" prop="BootOrder"><br>
-          <el-select v-model="formData.BootOrder" :disabled="disableConfig">
+          <el-select v-model="formData.BootOrder">
            <el-option
              v-for="item in bootOrderList"
              :key="item"
@ -63,8 +60,9 @@
              :value="item"
            />
          </el-select></el-form-item>
-      </el-col>
+      </el-col> -->
    </el-row>
+    <span class="tips">BootOrder:{{ index + 1 }}</span>
  </el-card>

 </template>
@ -109,13 +107,11 @@ export default {
  },
  mounted() {
    this.volumeList = this.childList[9]
-    this.$route.query.disableConfig = null
    this.formData.Name = this.childList[0]
    this.formData.Type = this.childList[1]
    this.formData.Size = this.childList[3]
    this.formData.Bus = this.childList[4]
    this.formData.BootOrder = this.childList[5]
-    this.disableConfig = this.childList[8]
  },
  methods: {
    createSSHKey() {
--- a/src/views/virtualMachine/virtualMachineConfig/configImage.vue
+++ b/src/views/virtualMachine/virtualMachineConfig/configImage.vue
@ -1,19 +1,17 @@
 <template>

  <el-card>
-    <div :disabled="disableConfig" @click="deleteCard"> <i class="el-icon-close show-icon" /></div>
+    <div @click="deleteCard"> <i class="el-icon-close show-icon" /></div>
    <h5>镜像卷</h5>
-    <el-row>
+    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="名称" prop="name"><el-input
          v-model="formData.Name"
-          placeholder=""
-          :disabled="disableConfig"
        /></el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="类型" prop="type"><br>
-          <el-select v-model="formData.Type" :disabled="disableConfig">
+          <el-select v-model="formData.Type">
            <el-option
              v-for="item in vmImageTypeList"
              :key="item"
@ -37,14 +35,12 @@
      <el-col :span="8">
        <el-form-item label="大小" prop="size"><el-input
          v-model="formData.Size"
-          placeholder=""
-          :disabled="disableConfig"
          :hide-required-asterisk="true"
        ><template slot="append">GiB</template></el-input></el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总线" prop="bus"><br>
-          <el-select v-model="formData.Bus" :disabled="disableConfig">
+          <el-select v-model="formData.Bus">
            <el-option
              v-for="item in busList"
              :key="item"
@ -53,9 +49,9 @@
            />
          </el-select></el-form-item>
      </el-col>
-      <el-col :span="8">
+      <!-- <el-col :span="8">
        <el-form-item label="启动顺序" prop="BootOrder"><br>
-          <el-select v-model="formData.BootOrder" :disabled="disableConfig">
+          <el-select v-model="formData.BootOrder">
            <el-option
              v-for="item in bootOrderList"
              :key="item"
@ -63,8 +59,9 @@
              :value="item"
            />
          </el-select></el-form-item>
-      </el-col>
+      </el-col> -->
    </el-row>
+    <span class="tips">BootOrder:{{ index + 1 }}</span>
  </el-card>

 </template>
@ -172,7 +169,6 @@ export default {
    }
  },
  mounted() {
-    this.$route.query.disableConfig = null
    this.formData.Name = this.childList[0]
    this.formData.Type = this.childList[1]
    this.formData.Image = this.childList[2]
@ -181,7 +177,6 @@ export default {
    this.formData.BootOrder = this.childList[5]
    this.formData.ImageId = this.childList[9]
    this.isCreate = this.childList[7]
-    this.disableConfig = this.childList[8]
  },
  methods: {
    createSSHKey() {
--- a/src/views/virtualMachine/virtualMachineConfig/configNetworkPort.vue
+++ b/src/views/virtualMachine/virtualMachineConfig/configNetworkPort.vue
@ -3,11 +3,9 @@
    <div @click="deleteCard"> <i class="el-icon-close show-icon" /></div>
    <el-form-item label="名称" prop="name"><el-input
      v-model="cardData.name"
-      placeholder=""
    /></el-form-item>
    <el-form-item label="端口" prop="port"><el-input
      v-model="cardData.port"
-      placeholder=""
    /></el-form-item>
    <el-form-item label="协议" prop="protocol">
      <el-select v-model="cardData.protocol">
@ -34,14 +32,6 @@ export default {
    },
    index: {
      type: Number
-    },
-    disableConfig: {
-      type: Boolean,
-      default() {
-        return [
-          true// 默认初始值
-        ]
-      }
    }
  },
  data() {
--- a/src/views/virtualMachine/virtualMachineConfig/configVolume.vue
+++ b/src/views/virtualMachine/virtualMachineConfig/configVolume.vue
@ -1,19 +1,16 @@
 <template>
-
  <el-card>
    <div @click="deleteCard"> <i class="el-icon-close show-icon" /></div>
    <h5>卷</h5>
-    <el-row :gutter="10">
+    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="名称" prop="name"><el-input
          v-model="formData.Name"
-          placeholder=""
-          :disabled="disableConfig"
        /></el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="类型" prop="type"><br>
-          <el-select v-model="formData.Type" :disabled="disableConfig">
+          <el-select v-model="formData.Type">
            <el-option
              v-for="item in vmImageTypeList"
              :key="item"
@ -26,14 +23,12 @@
      <el-col :span="8">
        <el-form-item label="大小" prop="size"><el-input
          v-model="formData.Size"
-          placeholder=""
-          :disabled="disableConfig"
          :hide-required-asterisk="true"
        ><template slot="append">GiB</template></el-input></el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总线" prop="bus"><br>
-          <el-select v-model="formData.Bus" :disabled="disableConfig">
+          <el-select v-model="formData.Bus">
            <el-option
              v-for="item in busList"
              :key="item"
@ -42,9 +37,9 @@
            />
          </el-select></el-form-item>
      </el-col>
-      <el-col :span="8">
+      <!-- <el-col :span="8">
        <el-form-item label="启动顺序" prop="BootOrder"><br>
-          <el-select v-model="formData.BootOrder" :disabled="disableConfig">
+          <el-select v-model="formData.BootOrder">
            <el-option
              v-for="item in bootOrderList"
              :key="item"
@ -52,8 +47,9 @@
              :value="item"
            />
          </el-select></el-form-item>
-      </el-col>
+      </el-col> -->
    </el-row>
+    <span class="tips">BootOrder:{{ index + 1 }}</span>
  </el-card>

 </template>
@ -76,7 +72,6 @@ export default {
      dialogFormVisible: false,
      checkList: '',
      machineTypeOptions: ['q35', 'pc', 'None'],
-      disableConfig: false,
      formData: {
        Name: 'rootdisk',
        Type: 'disk',
@ -95,14 +90,11 @@ export default {
    }
  },
  mounted() {
-    console.log(this.childList)
-    this.$route.query.disableConfig = null
    this.formData.Name = this.childList[0]
    this.formData.Type = this.childList[1]
    this.formData.Size = this.childList[3]
    this.formData.Bus = this.childList[4]
    this.formData.BootOrder = this.childList[5]
-    this.disableConfig = this.childList[8]
  },
  methods: {
    createSSHKey() {
--- a/src/views/virtualMachine/virtualMachineConfig/virtualMachineNetwork.vue
+++ b/src/views/virtualMachine/virtualMachineConfig/virtualMachineNetwork.vue
@ -2,38 +2,47 @@
  <el-card>
    <div @click="deleteCard"> <i class="el-icon-close show-icon" /></div>
    <h5>网络</h5>
-    <el-form-item label="名称" prop="name"><el-input
-      v-model="cardData.name"
-      placeholder=""
-      :disabled="disableConfig"
-    /></el-form-item>
-    <el-form-item label="模型" prop="model"><br>
-      <el-select v-model="cardData.model" :disabled="disableConfig">
-        <el-option
-          v-for="item in modelList"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select></el-form-item>
-    <el-form-item label="网络" prop="network"><br>
-      <el-select v-model="cardData.networkName" :disabled="disableConfig">
-        <el-option
-          v-for="item in networkList"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select></el-form-item>
-    <el-form-item label="类型" prop="Type"><br>
-      <el-select v-model="cardData.type1" :disabled="disableConfig">
-        <el-option
-          v-for="item in networkTypeList"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select></el-form-item>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="名称" prop="name"><el-input
+          v-model="cardData.name"
+          :disabled="disableConfig"
+        /></el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="模型" prop="model"><br>
+          <el-select v-model="cardData.model" :disabled="disableConfig">
+            <el-option
+              v-for="item in modelList"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select></el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="网络" prop="network"><br>
+          <el-select v-model="cardData.networkName" :disabled="disableConfig">
+            <el-option
+              v-for="item in networkList"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select></el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="类型" prop="Type"><br>
+          <el-select v-model="cardData.type1" :disabled="disableConfig">
+            <el-option
+              v-for="item in networkTypeList"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select></el-form-item>
+      </el-col>
+    </el-row>
    <div v-if="isCreate">
      <ConfigNetworkPort v-for="(item, index) in allPortCard" :key="index" :index="index" :card-data="item" :disable-config="disableConfig" @delete="deletePort" />
      <el-button v-if="!disableConfig" type="primary" align="left" @click="addPort">添加端口</el-button></div>
--- a/src/views/virtualMachine/virtualMachineCreate.vue
+++ b/src/views/virtualMachine/virtualMachineCreate.vue
@ -12,14 +12,14 @@
        <el-row :gutter="10">
          <el-col :span="12"> <el-form-item label="名称" prop="name"><el-input
            v-model="name"
-            placeholder=""
+
            :disabled="disableConfig"
            :hide-required-asterisk="true"
          /></el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="description"><el-input
              v-model="description"
-              placeholder=""
+
              :disabled="disableConfig"
            /></el-form-item></el-col>
        </el-row>
@ -28,20 +28,20 @@
        <el-row :gutter="10">
          <el-col :span="8"> <el-form-item label="名称前缀" prop="name"><el-input
            v-model="prename"
-            placeholder=""
+
            :disabled="disableConfig"
            :hide-required-asterisk="true"
          /></el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="描述" prop="description"><el-input
              v-model="description"
-              placeholder=""
+
              :disabled="disableConfig"
            /></el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="数量" prop="number"><el-input
              v-model="number"
-              placeholder=""
+
              :disabled="disableConfig"
            /></el-form-item></el-col>
        </el-row>
--- a/src/views/virtualMachine/virtualMachineDetailPanel.vue
+++ b/src/views/virtualMachine/virtualMachineDetailPanel.vue
@ -27,14 +27,14 @@
            <el-form><el-row :gutter="10">
              <el-col :span="12"> <el-form-item label="名称" prop="name"><el-input
                v-model="virtualMachineYAML.metadata.name"
-                placeholder=""
+
                :disabled="disableConfig"
                :hide-required-asterisk="true"
              /></el-form-item></el-col>
              <el-col :span="12">
                <el-form-item label="描述" prop="description"><el-input
                  v-model="virtualMachineYAML.metadata.annotations['field.cattle.io/description']"
-                  placeholder=""
+
                  :disabled="disableConfig"
                /></el-form-item></el-col>
            </el-row></el-form>
--- a/yarn.lock
+++ b/yarn.lock
@ -12289,7 +12289,7 @@
  "resolved" "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz"
  "version" "2.6.10"

-"vuedraggable@2.20.0":
+"vuedraggable@^2.20.0":
  "integrity" "sha512-mrSWGkzY40nkgLDuuoxrs6/0u+A7VwXtQRruLQYOVjwd8HcT3BZatRvzw4qVCwJczsAYPbaMubkGOEtzDOzhsQ=="
  "resolved" "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.20.0.tgz"
  "version" "2.20.0"