资源平台 新增小程序对接方式

src/views/music/platform/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
-    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog()" v-hasPermi="['music:platform:add']">新增</el-button>
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog()"
+      v-hasPermi="['music:platform:add']">新增</el-button>
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
       <el-table-column type="index" label="序号" align="center" />
@@ -9,8 +10,10 @@
       <el-table-column label="对接方式" prop="joinType" align="center" :formatter="joinTypeFormatter" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDialog(scope.row.id)" v-hasPermi="['music:platform:edit']">编辑</el-button>
-          <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['music:platform:delete']">删除</el-button>
+          <el-button type="text" @click="getDialog(scope.row.id)" v-hasPermi="['music:platform:edit']">编辑
+          </el-button>
+          <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['music:platform:delete']">删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -30,9 +33,9 @@
           </el-select>
         </el-form-item>
         <el-form-item label="对接方式：" prop="joinType">
-          <el-select v-model="dialogForm.joinType" placeholder="请选择资源对接方式">
+          <el-select v-model="dialogForm.joinType" multiple placeholder="请选择资源对接方式">
             <el-option v-for="item in joinTypeOptions" :key="item.value" :value="item.value.toString()"
-              :label="item.label" />
+              :label="item.label" :disabled="item.disabled" />
           </el-select>
         </el-form-item>
         <el-form-item style="text-align: right;">
@@ -68,7 +71,8 @@ export default {
       // 提交表单
       dialogForm: {
         name: '',
-        audioType: []
+        audioType: [],
+        joinType: []
       },
       // 校验
       rules: {
@@ -91,9 +95,20 @@ export default {
       }, {
         value: 2,
         label: '本地管理'
+      }, {
+        value: 3,
+        label: '小程序'
       }]
     }
   },
+  watch: {
+    'dialogForm.joinType'(val) {
+      if (val) {
+        this.joinTypeOptions[1].disabled = val.findIndex(i => i === '1') !== -1 ? true : false
+        this.joinTypeOptions[0].disabled = val.findIndex(i => i === '2') !== -1 ? true : false
+      }
+    }
+  },
   mounted() {
     this.getList()
   },
@@ -112,18 +127,15 @@ export default {
     // 弹窗
     getDialog(id) {
       this.dialogVisible = true
+      this.title = id ? '编辑' : '新增'
       if (id) {
-        this.title = '编辑'
         detail(id).then(res => {
           if (res.code === 0) {
             this.dialogForm = res.data
-            if (this.dialogForm.audioType) {
-              this.dialogForm.audioType = res.data.audioType.split(',')
-            }
+            this.dialogForm.audioType = res.data.audioType.split(',')
+            this.dialogForm.joinType = res.data.joinType.split(',')
           }
         })
-      } else {
-        this.title = '新增'
       }
     },
 
@@ -139,6 +151,7 @@ export default {
       this.$refs.dialogForm.validate((valid) => {
         if (valid) {
           this.dialogForm.audioType = this.dialogForm.audioType.join(',')
+          this.dialogForm.joinType = this.dialogForm.joinType.join(',')
           submit(this.dialogForm).then(res => {
             if (res.code === 0) {
               this.$message.success(`${this.title}成功！`)
@@ -173,7 +186,7 @@ export default {
       return row.audioType ? row.audioType.split(',').map(i => this.selectDictLabel(this.audioOptions, i)).join(',') : '/'
     },
     joinTypeFormatter(row) {
-      return this.selectDictLabel(this.joinTypeOptions, row.joinType)
+      return row.joinType ? row.joinType.split(',').map(i => this.selectDictLabel(this.joinTypeOptions, i)).join(',') : '/'
     }
   }
 };