标签分类

src/views/operation/tag/detail.vue

@@ -9,7 +9,8 @@
       </el-form-item>
       <el-form-item label="频道属性：" prop="channelType">
         <el-select v-model="form.channelType" placeholder="请选择频道属性" @change="handleChange">
-          <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option v-for="item in channelTypeOptions" :key="item.value" :value="item.value"
+            :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="频道名称：" prop="channelName">
@@ -35,7 +36,7 @@
             </template>
           </el-table-column>
           <el-table-column label="音频类型" prop="audioType" align="center" :formatter="typeFormatter" />
-          <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
+          <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
               <el-button type="delete" @click="getDelete(scope.row.audioId)">删除</el-button>
@@ -50,83 +51,34 @@
     </div>
 
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" title="关联内容" width="1000px">
-      <el-form inline size="mini" style="width:100%">
-        <el-form-item label="资源平台：">
-          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
-            <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="音频名称：">
-          <el-input v-model="dialogForm.name" placeholder="请输入音频名称" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <el-table :data="dialogTableData" ref="dialogTableData" :row-key="getRowKey"
-        @selection-change="getChange" v-loading="loading">
-        <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 :src="scope.row.audioPic" />
-          </template>
-        </el-table-column>
-        <el-table-column label="音频类型" prop="audioType" align="center" :formatter="typeFormatter" />
-        <el-table-column label="节目数量" prop="programCount" align="center" />
-        <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
-      </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.listagCategoryAudio" :channelType="form.channelType"
+      @close="close" />
   </div>
 </template>
 
 <script>
+import Dialog from '@/components/Dialog/index.vue'
 import Upload from '@/components/Upload/index.vue'
-import { contentList, submitThree, detail } from '@/api/operation/tag'
-import { platformMixin, isFreeMixin, onOrOffMixin } from '@/mixin/index'
+import { submitThree, detail } from '@/api/operation/tag'
+import { platformMixin, isFreeMixin, channelMixin } from '@/mixin/index'
 export default {
   components: {
-    Upload
+    Upload, Dialog
   },
-  mixins: [platformMixin, isFreeMixin, onOrOffMixin],
+  mixins: [platformMixin, isFreeMixin, channelMixin],
   data() {
     return {
-      // 遮罩层
-      loading: false,
       // 表单
       form: {
         listagCategoryAudio: []
       },
-      // 频道属性
-      typeOptions: [{
-        value: 2,
-        label: '广播'
-      }, {
-        value: 6,
-        label: '节目'
-      }, {
-        value: 8,
-        label: '专辑'
-      }],
+      channelTypeOptions: [
+        { value: 2, label: '广播' },
+        { value: 6, label: '节目' },
+        { value: 8, label: '专辑' }
+      ],
       // 弹窗
       dialogVisible: false,
-      // 弹窗表单
-      dialogForm: {
-        pageNum: 1,
-        pageSize: 10
-      },
-      // 总数
-      total: 0,
-      // 弹窗列表
-      dialogTableData: [],
       // 校验
       rules: {
         name: [{
@@ -152,16 +104,6 @@ export default {
       disabled: false
     }
   },
-  watch: {
-    'form.channelType'(val) {
-      if (val) {
-        this.dialogForm.type = val
-        this.getPlatform({
-          audioType: val
-        })
-      }
-    }
-  },
   mounted() {
     if (this.$route.query.id) {
       this.form.id = this.$route.query.id
@@ -195,59 +137,11 @@ export default {
     // 弹窗
     getDialog() {
       this.dialogVisible = true
-      this.getList()
-    },
-
-    // 列表
-    getList() {
-      this.loading = true
-      contentList(this.dialogForm).then(res => {
-        if (res.code === 0) {
-          this.dialogTableData = res.data.records
-          this.total = res.data.total
-          this.loading = false
-          if (this.form.listagCategoryAudio.length > 0) {
-            this.form.listagCategoryAudio.map(i => {
-              let row = this.dialogTableData.find(j => j.audioId === i.audioId)
-              if (row) {
-                this.$refs.dialogTableData.toggleRowSelection(row, true)
-              }
-            })
-          } else {
-            this.$refs.dialogTableData.clearSelection()
-          }
-        }
-      })
     },
 
-    // 搜索
-    getSearch() {
-      this.dialogForm.pageNum = 1
-      this.getList()
-    },
-
-    // 重置
-    getRefresh() {
-      this.dialogForm.pageNum = 1
-      this.dialogForm.pageSize = 10
-      this.dialogForm.platformId = this.dialogForm.name = ''
-      this.getList()
-    },
-
-    getRowKey(row) {
-      return row.audioId
-    },
-
-    // 选择
-    getChange(row) {
-      this.form.ids = []
-      if (row.length > 0) {
-        row.map(i => {
-          if (this.form.listagCategoryAudio.findIndex(j => j.audioId === i.audioId) === -1) {
-            this.form.listagCategoryAudio.push(i)
-          }
-        })
-      }
+    // 关闭弹窗
+    close() {
+      this.dialogVisible = false
     },
 
     // 删除
@@ -286,15 +180,15 @@ export default {
     },
 
     // 字典翻译
-    freeFormatter(row) {
-      return this.selectDictLabel(this.freeOptions, row.isFree)
-    },
     typeFormatter(row) {
-      return this.selectDictLabel(this.typeOptions, row.audioType)
+      return this.selectDictLabel(this.channelTypeOptions, row.audioType)
     },
     statusFormatter(row) {
       return this.selectDictLabel(this.onOrOffOptions, row.status)
-    }
+    },
+    platfromFormatter(row) {
+      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
+    },
   }
 }
 </script>