频道管理 官方推荐

src/views/channel/official/detail.vue

@@ -1,53 +1,51 @@
 <template>
   <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-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-col>
         <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 label="频道类型：">
+          <!-- <el-form-item label="频道类型：">
             <el-select placeholder="请选择频道类型">
               <el-option />
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
         </el-col>
       </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 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>
           </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-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>
+
     <!-- 弹窗 -->
-    <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-select placeholder="请选择当前状态：">
             <el-option />
@@ -63,33 +61,113 @@
           <el-button icon="el-icon-search" type="primary">搜索</el-button>
           <el-button icon="el-icon-refresh">重置</el-button>
         </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>
-      <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>
   </div>
 </template>
 
 <script>
+import { getChannelEdit, getChannelAudioPage } from "@/api/channel/official";
 import imageUpload from "@/components/Upload/index";
 export default {
   components: {
     imageUpload,
   },
+  dicts: ["free_yes_no"],
   data() {
     return {
+      // 频道详情列表
+      tableData1: [],
+      // 遮罩层
       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>
 

src/views/channel/official/index.vue

@@ -22,13 +22,17 @@
         </el-form>
         <el-table :data="tableData">
           <el-table-column type="index" label="序号" align="center"></el-table-column>
-          <el-table-column prop="name" label="频道名称" align="center"></el-table-column>
-          <el-table-column prop="img" label="频道封面" align="center"></el-table-column>
-          <el-table-column prop="title" label="频道简介" align="center"></el-table-column>
+          <el-table-column prop="aliasName" label="频道名称" align="center"></el-table-column>
+          <el-table-column label="频道封面" align="center" width="100px">
+            <template slot-scope="scope">
+              <el-image :src="scope.row.pic" :preview-src-list="[scope.row.pic]" fit="scale-down" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="description" label="频道简介" align="center"></el-table-column>
           <el-table-column label="频道详情" align="center">
             <template slot-scope="scope">
               <el-button type="text">查看</el-button>
-              <el-button type="text" @click="getEdit(scope.row.id)">编辑</el-button>
+              <el-button type="text" @click="getEdit(scope.row)">编辑</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -50,6 +54,7 @@
 </template>
 
 <script>
+import { getChannelPage } from "@/api/channel/official";
 export default {
   data() {
     return {
@@ -84,13 +89,6 @@ export default {
         },
       ],
       value: [],
-      tableData: [
-        {
-          name: "",
-          img: "",
-          title: "",
-        },
-      ],
       //   标签页
       tabOptions: [
         {
@@ -100,16 +98,40 @@ export default {
       ],
       tabActive: "1",
       listName: "",
+      // 列表
+      tableData: [],
       //  弹窗
       dialogVisible: false,
     };
   },
+  mounted() {
+    this.getList();
+  },
   methods: {
-    getEdit(id) {
+    // 搜索
+    getSearch(){
+
+    },
+    // 重置
+    getRefresh(){
+
+    },
+    // 列表
+    getList() {
+      getChannelPage().then((res) => {
+        if (res.code === 0) {
+          this.tableData = res.data;
+        }
+      });
+    },
+    // 编辑
+    getEdit(row) {
+      console.log(row);
       this.$router.push({
         path: `/channel/official/detail`,
         query: {
-          id: id,
+          id: row.id,
+          channelId: row.channelId
         },
       });
     },
@@ -127,7 +149,7 @@ export default {
         label: this.listName,
         value: ++index,
       });
-      this.dialogVisible = false
+      this.dialogVisible = false;
     },
   },
 };