|
@@ -0,0 +1,282 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="app-container">
|
|
|
|
+ <!-- 表单 -->
|
|
|
|
+ <el-form class="form" label-width="100px">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-form-item label="频道名称:">
|
|
|
|
+ <el-input v-model="form.aliasName" placeholder="请输入频道名称" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="频道属性:">
|
|
|
|
+ <el-select v-model="form.channelType" placeholder="请选择频道属性" :disabled="disabled">
|
|
|
|
+ <el-option v-for="item in dict.type.channels_type" :key="item.value" :value="Number(item.value)"
|
|
|
|
+ :label="item.label" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="频道封面:">
|
|
|
|
+ <Upload listType="picture-card" :url="form.pic" @upload="getUpload" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-form-item label="频道简介:">
|
|
|
|
+ <el-input v-model="form.description" type="textarea" rows="12" placeholder="请输入频道简介" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-form-item label="频道内容:">
|
|
|
|
+ <el-button type="primary" icon="el-icon-plus" @click="getDialog">
|
|
|
|
+ 新增内容
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-table :data="tableData" height="381" v-loading="loading">
|
|
|
|
+ <el-table-column label="内容ID" prop="audioId" align="center" />
|
|
|
|
+ <el-table-column label="音频名称" prop="audioName" align="center" />
|
|
|
|
+ <el-table-column label="音频封面" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-image :src="scope.row.audioPic" :previewSrcList="[scope.row.audioPic]" fit="scale-down" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="付费" prop="isFree" align="center" width="100px" :formatter="freeFormatter" />
|
|
|
|
+ <el-table-column label="来源" prop="source" align="center" width="100px" />
|
|
|
|
+ <el-table-column label="操作" align="center" width="100px">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ <!-- 按钮 -->
|
|
|
|
+ <div class="form-btn">
|
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
|
+ <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-input v-model="dialogForm.keyword" placeholder="请输入内容名称" clearable />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="分类:">
|
|
|
|
+ <el-select v-model="dialogForm.classifyId" placeholder="请选择分类" clearable>
|
|
|
|
+ <el-option v-for="item in classifyOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </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" height="476" ref="table" :row-key="getRowKey"
|
|
|
|
+ @selection-change="getChange">
|
|
|
|
+ <el-table-column type="selection" align="center" reserve-selection />
|
|
|
|
+ <el-table-column label="内容ID" prop="id" align="center" />
|
|
|
|
+ <el-table-column label="音频名称" prop="audioName" align="center" />
|
|
|
|
+ <el-table-column label="音频封面" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-image :src="scope.row.audioPic" :previewSrcList="[scope.row.audioPic]" fit="scale-down" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="付费" prop="isFree" align="center" width="100px" :formatter="freeFormatter" />
|
|
|
|
+ <el-table-column label="来源" prop="source" align="center" width="100px" />
|
|
|
|
+ </el-table>
|
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
|
|
|
|
+ :limit.sync="dialogForm.pageSize" @pagination="getPage" />
|
|
|
|
+ <div slot="footer">
|
|
|
|
+ <el-button @click="getAdd" type="primary">确定</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import Upload from '@/components/Upload/index'
|
|
|
|
+import { channelList, channelTemplate, channelDetail, edit, list, remove, queryList } from '@/api/operation/channel'
|
|
|
|
+import { isFreeMixin } from '@/mixin/index'
|
|
|
|
+export default {
|
|
|
|
+ dicts: ['channels_type'],
|
|
|
|
+ mixins: [isFreeMixin],
|
|
|
|
+ components: {
|
|
|
|
+ Upload
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ // 遮罩层
|
|
|
|
+ loading: false,
|
|
|
|
+ // 弹窗
|
|
|
|
+ dialogVisible: false,
|
|
|
|
+ // 频道内容
|
|
|
|
+ tableData: [],
|
|
|
|
+ dialogData: [],
|
|
|
|
+ // 编辑表单
|
|
|
|
+ form: {},
|
|
|
|
+ // 频道属性
|
|
|
|
+ channelId: this.$route.query.channelId,
|
|
|
|
+ disabled: this.$route.query.index == '0' || this.$route.query.index == '1' ? true : false,
|
|
|
|
+ // 列表表单
|
|
|
|
+ dialogForm: {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10
|
|
|
|
+ },
|
|
|
|
+ total: 0,
|
|
|
|
+ classifyOptions: [],
|
|
|
|
+ // 添加频道内容
|
|
|
|
+ ids: [],
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.getDetail()
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 频道详情
|
|
|
|
+ getDetail() {
|
|
|
|
+ channelDetail({
|
|
|
|
+ channelId: this.channelId
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.form = res.data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 频道内容列表
|
|
|
|
+ getList() {
|
|
|
|
+ queryList(this.channelId).then(res => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.tableData = res.data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 可选全部频道内容列表
|
|
|
|
+ getPage() {
|
|
|
|
+ channelTemplate({
|
|
|
|
+ audioType: this.form.channelType
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.classifyOptions = res.data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ channelList({
|
|
|
|
+ channelId: this.channelId,
|
|
|
|
+ audioType: this.form.channelType,
|
|
|
|
+ ...this.dialogForm
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
+ this.dialogData = res.data[0].pageData.records
|
|
|
|
+ this.total = res.data[0].pageData.total
|
|
|
|
+ this.$refs.table.clearSelection()
|
|
|
|
+ if (this.tableData.length > 0) {
|
|
|
|
+ this.tableData.map(i => {
|
|
|
|
+ let row = res.data[0].pageData.records.find(j => j.id === i.audioId)
|
|
|
|
+ if (row) {
|
|
|
|
+ this.$refs.table.toggleRowSelection(row)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 上传频道封面
|
|
|
|
+ getUpload(e) {
|
|
|
|
+ this.form.pic = e.file
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 打开弹窗
|
|
|
|
+ getDialog() {
|
|
|
|
+ this.dialogVisible = true
|
|
|
|
+ this.ids = []
|
|
|
|
+ this.getPage()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 搜索
|
|
|
|
+ getSearch() {
|
|
|
|
+ this.dialogForm.pageNum = 1
|
|
|
|
+ this.getPage()
|
|
|
|
+ },
|
|
|
|
+ // 重置
|
|
|
|
+ getRefresh() {
|
|
|
|
+ this.dialogForm = {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ ...this.data
|
|
|
|
+ }
|
|
|
|
+ this.getPage()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 提交
|
|
|
|
+ submit() {
|
|
|
|
+ edit(this.form).then(res => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.$message.success('修改成功!')
|
|
|
|
+ this.getDetail()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 取消
|
|
|
|
+ cancel() {
|
|
|
|
+ this.$tab.closeOpenPage('/channel/custom')
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 删除
|
|
|
|
+ getDelete(row) {
|
|
|
|
+ remove(row.id).then(res => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.$message.success('删除成功!')
|
|
|
|
+ this.getList()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ getRowKey(row) {
|
|
|
|
+ return row.id
|
|
|
|
+ },
|
|
|
|
+ // 表格多选
|
|
|
|
+ getChange(row) {
|
|
|
|
+ this.ids = []
|
|
|
|
+ if (row.length > 0) {
|
|
|
|
+ row.map(i => {
|
|
|
|
+ if (this.ids.findIndex(j => j === i.id) === -1) {
|
|
|
|
+ this.ids.push(i.id)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 添加频道内容
|
|
|
|
+ getAdd() {
|
|
|
|
+ list({
|
|
|
|
+ audioType: this.form.channelType,
|
|
|
|
+ channelDefaultId: this.channelId,
|
|
|
|
+ ids: this.ids
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.$message.success('添加成功!')
|
|
|
|
+ this.dialogVisible = false
|
|
|
|
+ this.getList()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 字典翻译
|
|
|
|
+ freeFormatter(row) {
|
|
|
|
+ return this.selectDictLabel(this.freeOptions, row.isFree)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.form {
|
|
|
|
+ width: 1000px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.el-image {
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 80px;
|
|
|
|
+}
|
|
|
|
+</style>
|