定制频道

src/views/operation/channel/detail.vue

@@ -10,7 +10,7 @@
           <el-form-item label="频道属性：">
             <el-select v-model="form.channelType" placeholder="请选择频道属性" :disabled="disabled"
               @change="handleChange">
-              <el-option v-for="item in dict.type.channels_type" :key="item.value" :value="Number(item.value)"
+              <el-option v-for="item in channelTypeOptions" :key="item.value" :value="Number(item.value)"
                 :label="item.label" />
             </el-select>
           </el-form-item>
@@ -52,65 +52,19 @@
       <el-button type="primary" @click="submit">提交</el-button>
     </div>
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" title="新增内容" width="1000px">
-      <!-- 搜索 -->
-      <el-form inline size="mini" @submit.native.prevent>
-        <el-form-item label="音频类型：">
-          <el-select v-model="dialogForm.audioType">
-            <el-option v-for="item in channelOptions[form.channelType]" :key="item.value"
-              :value="item.value" :label="item.label" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="资源平台：">
-          <el-select v-model="dialogForm.platformId" :disabled="[16, 17].includes(form.channelType)">
-            <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
-              :label="item.label" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="付费类型：" v-if="![2, 10, 11].includes(dialogForm.audioType)">
-          <el-select v-model="dialogForm.isFree" placeholder="请选择付费类型">
-            <el-option v-for="item in freeOptions" :key="item.value" :label="item.label"
-              :value="item.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="内容名称：">
-          <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" clearable />
-        </el-form-item>
-        <el-form-item>
-          <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <!-- 列表 -->
-      <el-table :data="dialogData" ref="table" :row-key="getRowKey" @selection-change="getChange">
-        <el-table-column type="selection" align="center" :reserve-selection="true" />
-        <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
-        <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
-        <el-table-column label="音频封面" align="center" width="100px">
-          <template slot-scope="scope">
-            <el-image v-if="scope.row.audioPic" :src="scope.row.audioPic" />
-          </template>
-        </el-table-column>
-        <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
-        <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
-      </el-table>
-      <div slot="footer">
-        <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
-          :limit.sync="dialogForm.pageSize" @pagination="getList" />
-      </div>
-    </el-dialog>
+    <Dialog :visible="dialogVisible" :data="form.list" :channelType="form.channelType" @close="close" />
   </div>
 </template>
 
 <script>
+import Dialog from '@/components/Dialog/index.vue'
 import Upload from '@/components/Upload/index'
-import { list, channelDetail, edit } from '@/api/operation/channel'
+import { channelDetail, edit } from '@/api/operation/channel'
 import { platformMixin, isFreeMixin, channelMixin } from '@/mixin/index'
 export default {
-  dicts: ['channels_type'],
   mixins: [platformMixin, isFreeMixin, channelMixin],
   components: {
-    Upload
+    Upload, Dialog
   },
   data() {
     return {
@@ -118,37 +72,17 @@ export default {
       loading: false,
       // 弹窗
       dialogVisible: false,
-      // 内容列表
-      dialogData: [],
       // 表单
       form: {},
       // 频道1 频道2 的频道属性不可修改
       disabled: this.$route.query.index == '0' || this.$route.query.index == '1' ? true : false,
-      // 搜索表单
-      dialogForm: {
-        pageNum: 1,
-        pageSize: 10,
-        status: 1,
-        platformId: null,
-        audioType: null
-      },
-      total: 0
-    }
-  },
-  watch: {
-    'form.channelType'(val) {
-      this.getPlatform({
-        audioType: this.channelOptions[val][0].value
-      })
-      this.dialogForm.audioType = this.channelOptions[val][0].value
-    },
-    async 'dialogForm.audioType'(val) {
-      if (this.dialogVisible) {
-        await this.getPlatform({
-          audioType: val
-        })
-        this.getRefresh()
-      }
+      channelTypeOptions: [
+        { value: 2, label: '广播' },
+        { value: 6, label: '节目' },
+        { value: 8, label: '专辑' },
+        { value: 16, label: '猫王音乐台' },
+        { value: 17, label: '猫王精选电台' }
+      ]
     }
   },
   mounted() {
@@ -171,25 +105,6 @@ export default {
       this.form.list = this.form.audioList = []
     },
 
-    // 内容列表
-    getList() {
-      list(this.dialogForm).then(res => {
-        if (res.code == 0) {
-          this.dialogData = res.data.records
-          this.total = res.data.total
-          this.$refs.table.clearSelection()
-          if (this.form.list.length > 0) {
-            this.form.list.map(i => {
-              let row = this.dialogData.find(j => j.audioId === i.audioId)
-              if (row) {
-                this.$refs.table.toggleRowSelection(row, true)
-              }
-            })
-          }
-        }
-      })
-    },
-
     // 上传频道封面
     getUpload(e) {
       this.form.pic = e.file
@@ -198,26 +113,16 @@ export default {
     // 打开弹窗
     getDialog() {
       this.dialogVisible = true
-      this.dialogForm.platformId = this.form.channelType === 16 ? 3 : this.form.channelType === 17 ? 2 : this.platformOptions[0].value
-      this.getList()
     },
 
-    // 搜索
-    getSearch() {
-      this.dialogForm.pageNum = 1
-      this.getList()
+    // 关闭弹窗
+    close() {
+      this.dialogVisible = false
     },
 
-    // 重置
-    getRefresh() {
-      this.dialogForm = {
-        pageNum: 1,
-        pageSize: 10,
-        status: 1,
-        audioType: this.dialogForm.audioType,
-        platformId: this.platformOptions[0].value,
-      }
-      this.getList()
+    // 删除
+    getDelete(row) {
+      this.form.list = this.form.list.filter(i => i.audioId !== row.audioId)
     },
 
     // 提交
@@ -242,27 +147,6 @@ export default {
       this.$tab.closeOpenPage('/operation/channel')
     },
 
-    // 删除
-    getDelete(row) {
-      this.form.list = this.form.list.filter(i => i.audioId !== row.audioId)
-    },
-
-    getRowKey(row) {
-      return row.audioId
-    },
-
-    // 表格多选
-    getChange(row) {
-      this.form.audioList = []
-      if (row.length > 0) {
-        row.map(i => {
-          if (this.form.list.findIndex(j => j.audioId === i.audioId) === -1) {
-            this.form.list.push(i)
-          }
-        })
-      }
-    },
-
     // 字典翻译
     platfromFormatter(row) {
       return this.selectDictLabel(this.platformTypeOptions, row.platformId)