feature：设备详情页新增资源平台选项

src/views/device/list/detail.vue

@@ -1,12 +1,6 @@
 <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
@@ -22,12 +16,7 @@
       <el-form-item label="应用类型：" prop="applicationType">
         <input type="checkbox" v-model="isChecked1" :disabled="disabled" />
         小程序
-        <input
-          type="checkbox"
-          style="margin-left: 30px"
-          v-model="isChecked2"
-          :disabled="disabled"
-        />
+        <input type="checkbox" style="margin-left: 30px" v-model="isChecked2" :disabled="disabled" />
         APP
       </el-form-item>
 
@@ -42,303 +31,171 @@
         <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-form-item label="资源平台：">
+        <el-button @click="clickAddPlatform" size="mini">新增+</el-button>
+      </el-form-item>
+      <el-form-item v-if="isShowPlatform">
+        <el-table :data="contentVipPlatformList" border style="width: min-content">
+          <el-table-column prop="platformId" label="资源平台" width="180">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.platformId" placeholder="请选择流量平台" clearable>
+                <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="contentVip" label="设备会员收费时间" width="180">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.contentVip" placeholder="请选择流量平台" clearable>
+                <el-option v-for="item in contentVipOptions" :key="item.value" :label="item.label"
+                  :value="item.value" />
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
       <el-form-item label="设备会员收费时间：" prop="contentVip">
         <el-select v-model="form.contentVip" placeholder="默认关闭">
-          <el-option
-            v-for="item in contentVipOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="Number(item.value)"
-          />
+          <el-option v-for="item in contentVipOptions" :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="{
+            <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"
-              />
+              }">
+              <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="引导页内容："
-          :prop="`typeList.${index}.guidePageContent`"
-          :rules="{
+        <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"
-          />
+          }">
+          <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>
@@ -346,11 +203,12 @@
 <script>
 import { create, detail, edit } from "@/api/device/list";
 import {
-devCategoryMixin,
-devFucMixin,
-devModeMixin,
-devTypeMixin,
-yesOrNoMixin,
+  devCategoryMixin,
+  devFucMixin,
+  devModeMixin,
+  devTypeMixin,
+  yesOrNoMixin,
+  platformMixin,
 } from "@/mixin/index";
 
 export default {
@@ -361,12 +219,15 @@ export default {
     devCategoryMixin,
     yesOrNoMixin,
     devFucMixin,
+    platformMixin,
   ],
   data() {
     return {
       isChecked1: false,
       isChecked2: false,
-
+      isShowPlatform: false,
+      contentVipPlatformList: [],
+      platformContentVipOptions: [],
       // 表单
       form: {
         typeList: [
@@ -375,6 +236,7 @@ export default {
           },
         ],
         bluetoothNames: [],
+        contentVipPlatformList: [],
       },
       // 显示蓝牙输入框
       inputVisible: false,
@@ -494,6 +356,9 @@ export default {
   mounted() {
     this.getCateGory(1);
     this.getList();
+    this.getPlatform({
+      audioType: 15,
+    })
   },
   methods: {
     // 详情
@@ -640,6 +505,17 @@ export default {
       } else {
         this.form.applicationType = "[0]";
       }
+      this.form.contentVipPlatformList = []
+      this.contentVipPlatformList.forEach(element => {
+        if (element.contentVip != null) {
+          this.form.contentVipPlatformList.push({
+            contentVip: element.contentVip,
+            platformId: element.platformId,
+          })
+        }
+      });
+
+      console.log("this.contentVipPlatformList===", JSON.stringify(this.contentVipPlatformList), JSON.stringify(this.form.contentVipPlatformList));
 
       this.$refs.form.validate((valid) => {
         if (valid) {
@@ -666,6 +542,16 @@ export default {
         }
       });
     },
+    clickAddPlatform() {
+      this.isShowPlatform = true;
+      console.log("新增一个平台", this.platformOptions.length, this.contentVipPlatformList.length);
+      if (this.platformOptions.length != 0 && this.contentVipPlatformList.length <= this.platformOptions.length) {
+        this.contentVipPlatformList.push({ "contentVip": null, "platformId": null, });
+      } else {
+        let tips = `最多只能添加${this.platformOptions.length}个平台`;
+        this.$message.warning(tips);
+      }
+    },
   },
 };
 </script>