feat: 添加设备列表-设备详情新增应用类型字段

src/views/device/list/detail.vue

@@ -1,9 +1,27 @@
 <template>
   <div class="app-container">
-    <el-form :model="form" :rules="rules" ref="form" label-width="auto" :disabled="disabled">
+    <el-form
+      :model="form"
+      :rules="rules"
+      ref="form"
+      label-width="auto"
+      :disabled="disabled"
+    >
+      <el-form-item label="应用类型：" prop="applicationType">
+        <el-select v-model="form.applicationType" placeholder="请选择应用类型">
+          <el-option
+            v-for="item in applicationType"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
       <el-form-item label="设备型号：" prop="clientType">
         <el-input v-model="form.clientType" placeholder="请输入设备型号" />
       </el-form-item>
+
       <el-form-item label="设备名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入设备名称" />
       </el-form-item>
@@ -11,197 +29,433 @@
         <el-input v-model="form.bluetoothName" disabled />
       </el-form-item>
       <el-form-item label="蓝牙名称：" prop="bluetoothNames">
-        <el-tag v-for="(item, index) in form.bluetoothNames" :key="item" :closable="!disabled"
-          :disable-transition="false" @close="handleClose(index)" style="margin-right: 10px;">{{ item }}</el-tag>
-        <el-input v-if="inputVisible" v-model="bluetoothName" ref="saveTagInput" @input="handleInput"
-          @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" style="width: 100px" />
+        <el-tag
+          v-for="(item, index) in form.bluetoothNames"
+          :key="item"
+          :closable="!disabled"
+          :disable-transition="false"
+          @close="handleClose(index)"
+          style="margin-right: 10px"
+          >{{ item }}</el-tag
+        >
+        <el-input
+          v-if="inputVisible"
+          v-model="bluetoothName"
+          ref="saveTagInput"
+          @input="handleInput"
+          @keyup.enter.native="handleInputConfirm"
+          @blur="handleInputConfirm"
+          style="width: 100px"
+        />
         <el-button v-else @click="showInput" size="mini">+ 新增</el-button>
       </el-form-item>
       <el-form-item label="制造商：" prop="manufacturer">
-        <el-select v-model="form.manufacturer" placeholder="请选择设备制造商" clearable>
-          <el-option v-for="item in manuOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select
+          v-model="form.manufacturer"
+          placeholder="请选择设备制造商"
+          clearable
+        >
+          <el-option
+            v-for="item in manuOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="多频多台：" prop="isChannelsPlatforms">
-        <el-switch v-model="form.isChannelsPlatforms" :active-value="1" :inactive-value="0" />
+        <el-switch
+          v-model="form.isChannelsPlatforms"
+          :active-value="1"
+          :inactive-value="0"
+        />
       </el-form-item>
       <el-form-item label="扫码授权：" prop="isScanAuth">
-        <el-switch v-model="form.isScanAuth" :active-value="1" :inactive-value="0" />
+        <el-switch
+          v-model="form.isScanAuth"
+          :active-value="1"
+          :inactive-value="0"
+        />
       </el-form-item>
       <el-form-item label="流量平台：">
         <el-select v-model="form.platform" placeholder="请选择流量平台">
-          <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
+
       <el-form-item label="设备分类：" prop="categoryId">
         <el-select v-model="form.categoryId" placeholder="请选择设备分类">
-          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option
+            v-for="item in categoryOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
+
       <el-form-item label="设备类型：" prop="deviceType">
         <el-select v-model="form.deviceType" placeholder="请选择设备类型">
-          <el-option v-for="item in devTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in devTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
+
       <el-form-item label="是否热门：" prop="isHot">
         <el-select v-model="form.isHot" placeholder="请选择是否热门">
-          <el-option v-for="item in yesOrNoOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
+          <el-option
+            v-for="item in yesOrNoOptions"
+            :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="在线图片：" prop="img">
-            <Upload listType="picture-card" :url="form.img" @upload="handleUploadImg($event, 'online')"
-              :disabled="disabled" />
+            <Upload
+              listType="picture-card"
+              :url="form.img"
+              @upload="handleUploadImg($event, 'online')"
+              :disabled="disabled"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="离线图片：" prop="offlineImg" style="float:right">
-            <Upload listType="picture-card" :url="form.offlineImg" @upload="handleUploadImg($event, 'offline')"
-              :disabled="disabled" />
+          <el-form-item
+            label="离线图片："
+            prop="offlineImg"
+            style="float: right"
+          >
+            <Upload
+              listType="picture-card"
+              :url="form.offlineImg"
+              @upload="handleUploadImg($event, 'offline')"
+              :disabled="disabled"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <!-- 子表单 -->
-      <el-button v-if="disabled === false && form.typeList.length < 4" type="primary" icon="el-icon-plus"
-        @click="getAdd">新增</el-button>
-      <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(item)">
-            <el-option v-for="item in devModeOptions" :key="item.value" :label="item.label" :value="Number(item.value)"
-              :disabled="item.disabled" />
+      <el-button
+        v-if="disabled === false && form.typeList.length < 4"
+        type="primary"
+        icon="el-icon-plus"
+        @click="getAdd"
+        >新增</el-button
+      >
+      <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(item)"
+          >
+            <el-option
+              v-for="item in devModeOptions"
+              :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 devFucOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <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 devFucOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="item.type == 2" label="芯片方案：" :prop="`typeList.${index}.is5g`"
-          :rules="{ required: true, message: '请选择芯片方案', trigger: 'change' }">
+        <el-form-item
+          v-if="item.type == 2"
+          label="芯片方案："
+          :prop="`typeList.${index}.is5g`"
+          :rules="{
+            required: true,
+            message: '请选择芯片方案',
+            trigger: 'change',
+          }"
+        >
           <el-select v-model="item.is5g" placeholder="请选择芯片方案">
-            <el-option v-for="item in planOptions" :key="item.value" :value="item.value" :label="item.label" />
+            <el-option
+              v-for="item in planOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            />
           </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-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 connectTypeOptions" :key="item.value" :label="item.label"
-              :value="Number(item.value)" />
+            <el-option
+              v-for="item in connectTypeOptions"
+              :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 || item.type === 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
+              :label="
+                item.type === 1 || item.type === 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
+              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="引导页内容："
+        <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" />
+          :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)" />
+        <el-link
+          class="el-icon-close"
+          v-if="form.typeList.length > 1"
+          :underline="false"
+          @click="getDelete(item.type, index)"
+        />
       </div>
     </el-form>
     <div>
       <el-button @click="getCancel">取消</el-button>
-      <el-button v-if="disabled === false" type="primary" @click="getSubmit">提交</el-button>
+      <el-button v-if="disabled === false" type="primary" @click="getSubmit"
+        >提交</el-button
+      >
     </div>
   </div>
 </template>
 
 <script>
 import { create, detail, edit } from "@/api/device/list";
-import { devModeMixin, devTypeMixin, devCategoryMixin, yesOrNoMixin, devFucMixin } from "@/mixin/index";
+import {
+  devCategoryMixin,
+  devFucMixin,
+  devModeMixin,
+  devTypeMixin,
+  yesOrNoMixin,
+} from "@/mixin/index";
 export default {
-  mixins: [devModeMixin, devTypeMixin, devCategoryMixin, yesOrNoMixin, devFucMixin],
+  mixins: [
+    devModeMixin,
+    devTypeMixin,
+    devCategoryMixin,
+    yesOrNoMixin,
+    devFucMixin,
+  ],
   data() {
     return {
+      // 设备连接
+      applicationType: [
+        {
+          value: "0",
+          label: "小程序",
+        },
+        {
+          value: "1",
+          label: "APP",
+        },
+      ],
       // 表单
       form: {
-        typeList: [{
-          functionList: [],
-        }],
-        bluetoothNames: []
+        typeList: [
+          {
+            functionList: [],
+          },
+        ],
+        bluetoothNames: [],
       },
       // 显示蓝牙输入框
       inputVisible: false,
       // 蓝牙名称
-      bluetoothName: '',
+      bluetoothName: "",
       // 表单验证
       rules: {
-        clientType: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
+        clientType: [
+          { required: true, message: "请输入设备型号", trigger: "blur" },
+        ],
         name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
-        bluetoothNames: [{ type: 'array', required: true, message: '请输入蓝牙名称', trigger: 'blur' }],
+        bluetoothNames: [
+          {
+            type: "array",
+            required: true,
+            message: "请输入蓝牙名称",
+            trigger: "blur",
+          },
+        ],
         isHot: [{ required: true, message: "是否热门", trigger: "change" }],
-        categoryId: [{ required: true, message: "请选择设备分类", trigger: "change" }],
-        deviceType: [{ required: true, message: "请选择设备类型", trigger: 'change' }],
+        categoryId: [
+          { required: true, message: "请选择设备分类", trigger: "change" },
+        ],
+        applicationType: [
+          { required: true, message: "请选择应用类型", trigger: "change" },
+        ],
+        deviceType: [
+          { required: true, message: "请选择设备类型", trigger: "change" },
+        ],
         img: [{ required: true, message: "请上传在线图片", trigger: "change" }],
-        offlineImg: [{ required: true, message: "请上传离线图片", trigger: "change" }],
+        offlineImg: [
+          { required: true, message: "请上传离线图片", trigger: "change" },
+        ],
       },
       // 设备连接
-      connectTypeOptions: [{
-        value: 2,
-        label: 'UPnP'
-      }, {
-        value: 3,
-        label: 'MQTT'
-      }],
+      connectTypeOptions: [
+        {
+          value: 2,
+          label: "UPnP",
+        },
+        {
+          value: 3,
+          label: "MQTT",
+        },
+      ],
       // 制造商
-      manuOptions: [{
-        value: 'ShanJing',
-        label: 'ShanJing'
-      }, {
-        value: 'JieLi',
-        label: 'JieLi'
-      }, {
-        value: 'LingXin',
-        label: 'LingXin'
-      }, {
-        value: 'QiXinWei',
-        label: 'QiXinWei'
-      }],
+      manuOptions: [
+        {
+          value: "ShanJing",
+          label: "ShanJing",
+        },
+        {
+          value: "JieLi",
+          label: "JieLi",
+        },
+        {
+          value: "LingXin",
+          label: "LingXin",
+        },
+        {
+          value: "QiXinWei",
+          label: "QiXinWei",
+        },
+      ],
       // 芯片方案
-      planOptions: [{
-        value: 1,
-        label: '兼容5GHZ频段芯片方案'
-      }, {
-        value: 0,
-        label: '不兼容5GHZ频段芯片方案'
-      }],
+      planOptions: [
+        {
+          value: 1,
+          label: "兼容5GHZ频段芯片方案",
+        },
+        {
+          value: 0,
+          label: "不兼容5GHZ频段芯片方案",
+        },
+      ],
       // 流量平台
-      typeOptions: [{
-        value: -1,
-        label: '默认'
-      },{
-        value: 0,
-        label: '树米'
-      }, {
-        value: 1,
-        label: '联通'
-      }],
+      typeOptions: [
+        {
+          value: -1,
+          label: "默认",
+        },
+        {
+          value: 0,
+          label: "树米",
+        },
+        {
+          value: 1,
+          label: "联通",
+        },
+      ],
       // 只读
-      disabled: Boolean(this.$route.query.boolean)
+      disabled: Boolean(this.$route.query.boolean),
     };
   },
   mounted() {
-    this.getCateGory(1)
-    this.getList()
+    this.getCateGory(1);
+    this.getList();
   },
   methods: {
     // 详情
@@ -211,6 +465,7 @@ export default {
           id: this.$route.query.id,
         }).then((res) => {
           if (res.code === 0) {
+            console.log("gadsfaerqewrqewrq===000==" + JSON.stringify(res.data));
             this.form = res.data;
             this.form.typeList.map((i) => {
               this.devModeOptions[i.type - 1].disabled = true;
@@ -222,30 +477,30 @@ export default {
 
     // 删除蓝牙名称
     handleClose(index) {
-      this.form.bluetoothNames.splice(index, 1)
+      this.form.bluetoothNames.splice(index, 1);
     },
 
     // 显示输入框
     showInput() {
-      this.inputVisible = true
+      this.inputVisible = true;
       this.$nextTick(() => {
-        this.$refs.saveTagInput.$refs.input.focus()
-      })
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
     },
 
     // 禁止输入逗号
     handleInput(e) {
-      this.bluetoothName = e.replace(/[,，]/g, "")
+      this.bluetoothName = e.replace(/[,，]/g, "");
     },
 
     // 保存蓝牙名称
     handleInputConfirm() {
-      let inputValue = this.bluetoothName
+      let inputValue = this.bluetoothName;
       if (inputValue) {
-        this.form.bluetoothNames.push(inputValue)
+        this.form.bluetoothNames.push(inputValue);
       }
-      this.inputVisible = false
-      this.bluetoothName = ''
+      this.inputVisible = false;
+      this.bluetoothName = "";
     },
 
     // 上传设备图片
@@ -263,21 +518,23 @@ export default {
     // 选中一个设备类型就从数组中去掉
     getTypeChange(i) {
       for (let key in this.devModeOptions) {
-        this.devModeOptions[key].disabled = false
+        this.devModeOptions[key].disabled = false;
       }
       // 选中的设备模式禁止再选
-      this.form.typeList.map(item => {
+      this.form.typeList.map((item) => {
         if (item.type) {
-          let index = this.devModeOptions.findIndex(j => j.value == item.type)
-          this.devModeOptions[index].disabled = true
+          let index = this.devModeOptions.findIndex(
+            (j) => j.value == item.type
+          );
+          this.devModeOptions[index].disabled = true;
         }
-      })
+      });
       // 除了设备模式都为空
-      Object.keys(i).map(e => {
-        if (!['type', 'icon1', 'icon2'].includes(e)) {
-          i[e] = e === 'functionList' ? [] : null
+      Object.keys(i).map((e) => {
+        if (!["type", "icon1", "icon2"].includes(e)) {
+          i[e] = e === "functionList" ? [] : null;
         }
-      })
+      });
     },
 
     // 新增子表单
@@ -286,9 +543,9 @@ export default {
         type: null,
         functionList: [],
         connectType: null,
-        icon1: '',
-        icon2: '',
-        guidePageContent: ''
+        icon1: "",
+        icon2: "",
+        guidePageContent: "",
       });
     },
 
@@ -296,7 +553,7 @@ export default {
     getDelete(type, index) {
       this.form.typeList.splice(index, 1);
       if (type) {
-        this.devModeOptions.find(i => i.value == type).disabled = false
+        this.devModeOptions.find((i) => i.value == type).disabled = false;
       }
     },
 
@@ -311,6 +568,9 @@ export default {
         if (valid) {
           if (this.$route.query.id) {
             // 编辑
+            console.log(
+              "gadsfaerqewrqewrq===111==" + JSON.stringify(this.form)
+            );
             edit(this.form).then((res) => {
               if (res.code === 0) {
                 this.$message.success("修改成功！");

src/views/device/list/index.vue

@@ -1,9 +1,9 @@
-<!-- 设备管理 设备分类 -->
+<!-- 设备管理 设备列表 -->
 <template>
   <div class="app-container">
     <!-- 搜索表单 -->
     <el-form inline size="mini">
-      <el-form-item label="设备名称：">
+      <el-form-item label="设备名称111：">
         <el-input v-model="form.name" placeholder="请输入设备名称" clearable />
       </el-form-item>
       <el-form-item label="设备型号：">
@@ -172,11 +172,11 @@
 <script>
 import { change, list, remove } from "@/api/device/list";
 import {
-devCategoryMixin,
-devMixin,
-devTypeMixin,
-onOrOffMixin,
-yesOrNoMixin,
+  devCategoryMixin,
+  devMixin,
+  devTypeMixin,
+  onOrOffMixin,
+  yesOrNoMixin,
 } from "@/mixin/index";
 import { dialogCallBack } from "@/utils/DialogUtil";
 export default {