|
@@ -1,53 +1,51 @@
|
|
<template>
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="app-container">
|
|
- <el-form class="form" label-width="100px">
|
|
|
|
|
|
+ <!-- 提交表单 -->
|
|
|
|
+ <el-form :model="form1" :rules="rules" :ref="form1" class="form" label-width="100px">
|
|
<el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
- <el-form-item label="频道封面:">
|
|
|
|
- <imageUpload />
|
|
|
|
|
|
+ <el-form-item prop="pic" label="频道封面:">
|
|
|
|
+ <imageUpload :url="form1.pic" @success="handleUploadImg" @delete="handleUploadImg" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
- <el-form-item label="频道名称:">
|
|
|
|
- <el-input placeholder="请输入频道名称" />
|
|
|
|
|
|
+ <el-form-item prop="aliasName" label="频道名称:">
|
|
|
|
+ <el-input v-model="form1.aliasName" placeholder="请输入频道名称" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="频道类型:">
|
|
|
|
|
|
+ <!-- <el-form-item label="频道类型:">
|
|
<el-select placeholder="请选择频道类型">
|
|
<el-select placeholder="请选择频道类型">
|
|
<el-option />
|
|
<el-option />
|
|
</el-select>
|
|
</el-select>
|
|
- </el-form-item>
|
|
|
|
|
|
+ </el-form-item> -->
|
|
</el-col>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
- <el-form-item label="频道简介:">
|
|
|
|
- <el-input type="textarea" rows="4" placeholder="请输入频道简介" />
|
|
|
|
|
|
+ <el-form-item prop="description" label="频道简介:">
|
|
|
|
+ <el-input v-model="form1.description" type="textarea" rows="4" placeholder="请输入频道简介" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="频道详情:">
|
|
|
|
- <el-table>
|
|
|
|
- <el-table-column label="ID" align="center"></el-table-column>
|
|
|
|
- <el-table-column label="名称" align="center"></el-table-column>
|
|
|
|
- <el-table-column label="状态" align="center"></el-table-column>
|
|
|
|
- <el-table-column label="资源平台" align="center"></el-table-column>
|
|
|
|
- <el-table-column label="操作" align="center">
|
|
|
|
- <template slot="header">
|
|
|
|
- <el-button type="text" @click="dialogVisible = true">关联</el-button>
|
|
|
|
- </template>
|
|
|
|
- <template>
|
|
|
|
- <el-button type="text">选择</el-button>
|
|
|
|
|
|
+ <el-form-item label="频道详情:" style="width: 1500px">
|
|
|
|
+ <el-button type="primary" @click="getPageList">关联</el-button>
|
|
|
|
+ <el-table :data="tableData1" height="400">
|
|
|
|
+ <el-table-column prop="id" label="ID" align="center" />
|
|
|
|
+ <el-table-column prop="audioName" label="音频名称" align="center" show-overflow-tooltip />
|
|
|
|
+ <el-table-column prop="audioPic" label="音频封面图" width="100px">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-image :src="scope.row.audioPic" :preview-src-list="[scope.row.audioPic]" />
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
+ <el-table-column prop="audioTypeText" label="音频类型" align="center" />
|
|
|
|
+ <el-table-column prop="audioInfo" label="音频信息" align="center" show-overflow-tooltip />
|
|
|
|
+ <el-table-column prop="free" label="付费类型" align="center" :formatter="freeFormatter" />
|
|
</el-table>
|
|
</el-table>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-form-item>
|
|
- <el-button>取消</el-button>
|
|
|
|
- <el-button type="primary">确定</el-button>
|
|
|
|
|
|
+ <el-button @click="getCancel">取消</el-button>
|
|
|
|
+ <el-button type="primary" @click="getSubmit">提交</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
|
|
+
|
|
<!-- 弹窗 -->
|
|
<!-- 弹窗 -->
|
|
- <el-dialog title="关联" :visible.sync="dialogVisible" width="1600px">
|
|
|
|
- <el-form inline label-width="100px" size="mini">
|
|
|
|
- <el-form-item label="资源平台:">
|
|
|
|
- <el-input disabled />
|
|
|
|
- </el-form-item>
|
|
|
|
|
|
+ <el-dialog title="关联" :visible.sync="dialogVisible" width="1000px">
|
|
|
|
+ <!-- <el-form inline label-width="100px" size="mini">
|
|
<el-form-item label="当前状态:">
|
|
<el-form-item label="当前状态:">
|
|
<el-select placeholder="请选择当前状态:">
|
|
<el-select placeholder="请选择当前状态:">
|
|
<el-option />
|
|
<el-option />
|
|
@@ -63,33 +61,113 @@
|
|
<el-button icon="el-icon-search" type="primary">搜索</el-button>
|
|
<el-button icon="el-icon-search" type="primary">搜索</el-button>
|
|
<el-button icon="el-icon-refresh">重置</el-button>
|
|
<el-button icon="el-icon-refresh">重置</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- </el-form>
|
|
|
|
- <el-table>
|
|
|
|
- <el-table-column type="selection" align="center"></el-table-column>
|
|
|
|
- <el-table-column label="ID" align="center"></el-table-column>
|
|
|
|
- <el-table-column label="名称" align="center"></el-table-column>
|
|
|
|
- <el-table-column label="资源平台" align="center"></el-table-column>
|
|
|
|
- <el-table-column label="状态" align="center"></el-table-column>
|
|
|
|
|
|
+ </el-form>-->
|
|
|
|
+ <el-table
|
|
|
|
+ :data="tableData2"
|
|
|
|
+ ref="tableData2"
|
|
|
|
+ :row-key="getRowKey"
|
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
|
+ style="height: 500px; overflow: scroll; overflow-x: hidden;"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column type="selection" align="center" reserve-selection />
|
|
|
|
+ <el-table-column prop="id" label="ID" align="center" />
|
|
|
|
+ <el-table-column prop="audioName" label="音频名称" align="center" show-overflow-tooltip />
|
|
|
|
+ <el-table-column prop="audioPic" label="音频封面图" width="100px">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-image :src="scope.row.audioPic" :preview-src-list="[scope.row.audioPic]" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="audioTypeText" label="音频类型" align="center" />
|
|
|
|
+ <el-table-column prop="audioInfo" label="音频信息" align="center" show-overflow-tooltip />
|
|
|
|
+ <el-table-column prop="free" label="付费类型" align="center" :formatter="freeFormatter" />
|
|
</el-table>
|
|
</el-table>
|
|
- <div slot="footer">
|
|
|
|
- <el-button>取消</el-button>
|
|
|
|
- <el-button type="primary">确定</el-button>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <pagination
|
|
|
|
+ v-show="total>0"
|
|
|
|
+ :total="total"
|
|
|
|
+ :page.sync="form2.pageNum"
|
|
|
|
+ :limit.sync="form2.pageSize"
|
|
|
|
+ @pagination="getPageList"
|
|
|
|
+ />
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import { getChannelEdit, getChannelAudioPage } from "@/api/channel/official";
|
|
import imageUpload from "@/components/Upload/index";
|
|
import imageUpload from "@/components/Upload/index";
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
imageUpload,
|
|
imageUpload,
|
|
},
|
|
},
|
|
|
|
+ dicts: ["free_yes_no"],
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ // 频道详情列表
|
|
|
|
+ tableData1: [],
|
|
|
|
+ // 遮罩层
|
|
dialogVisible: false,
|
|
dialogVisible: false,
|
|
|
|
+ // 提交表单
|
|
|
|
+ form1: {
|
|
|
|
+ channelId: this.$route.query.channelId,
|
|
|
|
+ },
|
|
|
|
+ // 表单验证
|
|
|
|
+ rules: {},
|
|
|
|
+ // 关联表单
|
|
|
|
+ form2: {
|
|
|
|
+ channelId: this.$route.query.channelId,
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ },
|
|
|
|
+ total: 0,
|
|
|
|
+ tableData2: [],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ methods: {
|
|
|
|
+ // 频道详情列表
|
|
|
|
+ getPageList() {
|
|
|
|
+ this.dialogVisible = true;
|
|
|
|
+ getChannelAudioPage(this.form2).then((res) => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.tableData2 = res.data.records;
|
|
|
|
+ this.total = res.data.total;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 上传频道封面
|
|
|
|
+ handleUploadImg(e) {
|
|
|
|
+ this.form1.pic = e;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 多选
|
|
|
|
+ handleSelectionChange(e) {
|
|
|
|
+ this.tableData1 = e;
|
|
|
|
+ },
|
|
|
|
+ getRowKey(row) {
|
|
|
|
+ return row.id;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 取消
|
|
|
|
+ cancel() {
|
|
|
|
+ (this.audioList = []), (this.tableData2 = []);
|
|
|
|
+ this.$refs.tableData2.clearSelection();
|
|
|
|
+ this.dialogVisible = false;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 取消
|
|
|
|
+ getCancel() {},
|
|
|
|
+
|
|
|
|
+ // 提交
|
|
|
|
+ getSubmit() {
|
|
|
|
+ getChannelEdit(this.form1).then((res) => {
|
|
|
|
+ console.log(res);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 字典翻译
|
|
|
|
+ freeFormatter(row) {
|
|
|
|
+ return this.selectDictLabel(this.dict.type.free_yes_no, row.free);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|