设备管理 设备列表

src/views/device/list/detail.vue

@@ -53,64 +53,60 @@
       <!-- 子表单 -->
       <el-button v-if="disabled === false && form.typeList.length < 4" type="primary" icon="el-icon-plus"
         @click="getAdd">新增</el-button>
-      <Draggable v-model="form.typeList" animation="300">
-        <div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
-          <el-form-item label="设备模式：" :prop="`typeList.${index}.type`" :rules="{
+      <div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
+        <el-form-item label="设备模式：" :prop="`typeList.${index}.type`" :rules="{
               required: true,
               message: '请选择设备模式',
               trigger: 'change',
             }">
-            <el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange($event, index)">
-              <el-option v-for="item in dict.type.dev_list_type" :key="item.value" :label="item.label"
-                :value="Number(item.value)" :disabled="item.disabled" />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="item.type !== 3" label="功能权限：" :prop="`typeList.${index}.functionList`"
-            :rules="{type: 'array', required: true, message: '请选择功能权限', trigger: 'change'}">
-            <el-select v-model="item.functionList" placeholder="请选择功能权限" multiple>
-              <el-option v-for="item in functionOptions" :key="item.id" :label="item.name"
-                :value="item.type" />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="item.type == 2" label="连接方式：" :prop="`typeList.${index}.connectType`"
-            :rules="{required: true, message: '请选择连接方式', trigger: 'change'}">
-            <el-select v-model="item.connectType" placeholder="请选择连接方式">
-              <el-option v-for="item in dict.type.dev_connect_type" :key="item.value" :label="item.label"
-                :value="Number(item.value)" />
-            </el-select>
-          </el-form-item>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item :label="item.type === 1 || 3 ? '连接引导图：' : '开机引导图'"
-                :prop="`typeList.${index}.icon1`"
-                :rules="{ required: true, message: '请上传引导图片', trigger: 'change'}">
-                <Upload listType="picture-card" :url="item.icon1"
-                  @upload="handleUploadIcon($event, index, 'icon1')" :disabled="disabled" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="配对键引导图：" :prop="`typeList.${index}.icon2`" style="float:right"
-                :rules="{ required: true, message: '请上传配对键引导图', trigger: 'change'}">
-                <Upload listType="picture-card" :url="item.icon2"
-                  @upload="handleUploadIcon($event, index, 'icon2')" :disabled="disabled" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item v-if="item.type === 1 || item.type === 3" label="引导页："
-            :prop="`typeList.${index}.guideUrl`"
-            :rules="{ required: true, message: '请输入引导页网址' , trigger: 'blur'}">
-            <el-input v-model="item.guideUrl" placeholder="请输入引导页网址" />
-          </el-form-item>
-          <el-form-item v-if="item.type === 1 || item.type === 3" label="引导页内容："
-            :prop="`typeList.${index}.guidePageContent`"
-            :rules="{required: true, message: '请输入引导页内容', trigger: 'blur'}">
-            <Editor v-model="item.guidePageContent" :min-height="250" :readOnly="disabled" />
-          </el-form-item>
-          <!-- 删除按钮 -->
-          <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
-            @click="getDelete(item.type, index)" />
-        </div>
-      </Draggable>
+          <el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange($event, index)">
+            <el-option v-for="item in dict.type.dev_list_type" :key="item.value" :label="item.label"
+              :value="Number(item.value)" :disabled="item.disabled" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="item.type !== 3" label="功能权限：" :prop="`typeList.${index}.functionList`"
+          :rules="{type: 'array', required: true, message: '请选择功能权限', trigger: 'change'}">
+          <el-select v-model="item.functionList" placeholder="请选择功能权限" multiple>
+            <el-option v-for="item in functionOptions" :key="item.id" :label="item.name" :value="item.type" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="item.type == 2" label="连接方式：" :prop="`typeList.${index}.connectType`"
+          :rules="{required: true, message: '请选择连接方式', trigger: 'change'}">
+          <el-select v-model="item.connectType" placeholder="请选择连接方式">
+            <el-option v-for="item in dict.type.dev_connect_type" :key="item.value" :label="item.label"
+              :value="Number(item.value)" />
+          </el-select>
+        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item :label="item.type === 1 || 3 ? '连接引导图：' : '开机引导图'" :prop="`typeList.${index}.icon1`"
+              :rules="{ required: true, message: '请上传引导图片', trigger: 'change'}">
+              <Upload listType="picture-card" :url="item.icon1"
+                @upload="handleUploadIcon($event, index, 'icon1')" :disabled="disabled" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="配对键引导图：" :prop="`typeList.${index}.icon2`" style="float:right"
+              :rules="{ required: true, message: '请上传配对键引导图', trigger: 'change'}">
+              <Upload listType="picture-card" :url="item.icon2"
+                @upload="handleUploadIcon($event, index, 'icon2')" :disabled="disabled" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item v-if="item.type === 1 || item.type === 3" label="引导页："
+          :prop="`typeList.${index}.guideUrl`"
+          :rules="{ required: true, message: '请输入引导页网址' , trigger: 'blur'}">
+          <el-input v-model="item.guideUrl" placeholder="请输入引导页网址" />
+        </el-form-item>
+        <el-form-item v-if="item.type === 1 || item.type === 3" label="引导页内容："
+          :prop="`typeList.${index}.guidePageContent`"
+          :rules="{required: true, message: '请输入引导页内容', trigger: 'blur'}">
+          <Editor v-model="item.guidePageContent" :min-height="250" :readOnly="disabled" />
+        </el-form-item>
+        <!-- 删除按钮 -->
+        <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
+          @click="getDelete(index)" />
+      </div>
     </el-form>
     <div class="form-btn">
       <el-button @click="getCancel">取消</el-button>
@@ -124,7 +120,6 @@ import { Add, Detail, Edit } from "@/api/device/list";
 import { category, functions } from "../mixin/index";
 import Upload from "@/components/Upload/index";
 import Editor from "@/components/Editor/index";
-import Draggable from "vuedraggable";
 
 export default {
   dicts: [
@@ -137,8 +132,7 @@ export default {
   mixins: [category, functions],
   components: {
     Upload,
-    Editor,
-    Draggable,
+    Editor
   },
   data() {
     return {
@@ -271,9 +265,9 @@ export default {
     },
 
     // 删除子表单
-    getDelete(e, index) {
+    getDelete(index) {
       this.form.typeList.splice(index, 1);
-      this.dict.type.dev_list_type[e - 1].disabled = false;
+      this.dict.type.dev_list_type[index].disabled = false;
     },
 
     // 取消
@@ -323,7 +317,6 @@ export default {
 }
 
 .sub-form {
-  // width: 600px;
   position: relative;
   border: 1px solid #e8e8e8;
   padding: 25px 25px 0 0;