官方推荐

src/views/channel/official/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <!-- 提交表单 -->
-    <el-form :model="form1" :rules="rules" :ref="form1" class="form" label-width="100px">
+    <el-form :model="form1" :rules="rules" :ref="form1" class="form" label-width="100px" :disabled="disabled">
       <el-row>
         <el-col :span="12">
           <el-form-item prop="pic" label="频道封面：">
@@ -12,19 +12,16 @@
           <el-form-item prop="aliasName" label="频道名称：">
             <el-input v-model="form1.aliasName" placeholder="请输入频道名称" />
           </el-form-item>
-          <!-- <el-form-item label="频道类型：">
-            <el-select placeholder="请选择频道类型">
-              <el-option />
-            </el-select>
-          </el-form-item> -->
+          <el-form-item prop="description" label="频道简介：" style="width: 900px">
+            <el-input v-model="form1.description" type="textarea" rows="4" placeholder="请输入频道简介" />
+          </el-form-item>
         </el-col>
       </el-row>
-      <el-form-item prop="description" label="频道简介：">
-        <el-input v-model="form1.description" type="textarea" rows="4" placeholder="请输入频道简介" />
-      </el-form-item>
-      <el-form-item label="频道详情：" style="width: 1500px">
-        <el-button type="primary" @click="getPageList">关联</el-button>
-        <el-table :data="tableData1" height="400">
+      <el-form-item label="频道详情：" style="width: 1200px">
+        <!-- <el-button type="primary" @click="getPageList">关联</el-button> -->
+        <el-table :data="tableData2" ref="tableData2" :row-key="getRowKey"
+          @selection-change="handleSelectionChange" height="500px">
+          <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">
@@ -36,13 +33,26 @@
           <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 @click="getCancel">取消</el-button>
-        <el-button type="primary" @click="getSubmit">提交</el-button>
+        <pagination v-show="total>0" :total="total" :page.sync="form2.pageNum" :limit.sync="form2.pageSize"
+          @pagination="getPageList" />
+        <!-- <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>
-
+    <div class="form-btn">
+      <el-button @click="getCancel">取消</el-button>
+      <el-button v-if="disabled === false" type="primary" @click="getSubmit">提交</el-button>
+    </div>
     <!-- 弹窗 -->
     <el-dialog title="关联" :visible.sync="dialogVisible" width="1000px">
       <!-- <el-form inline label-width="100px" size="mini">
@@ -62,32 +72,7 @@
           <el-button icon="el-icon-refresh">重置</el-button>
         </el-form-item>
       </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>
-      <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="form2.pageNum"
-        :limit.sync="form2.pageSize"
-        @pagination="getPageList"
-      />
+
     </el-dialog>
   </div>
 </template>
@@ -105,27 +90,36 @@ export default {
       // 频道详情列表
       tableData1: [],
       // 遮罩层
+      loading: true,
+      // 弹窗
       dialogVisible: false,
       // 提交表单
-      form1: {
-        channelId: this.$route.query.channelId,
-      },
+      form1: {},
       // 表单验证
       rules: {},
       // 关联表单
       form2: {
-        channelId: this.$route.query.channelId,
+        channelId: this.$route.query.row.channelId,
         pageNum: 1,
         pageSize: 10,
       },
+      // 关联列表总数
       total: 0,
+      // 关联列表
       tableData2: [],
+      // 查看不可修改
+      disabled: true
     };
   },
+  mounted() {
+    this.form1 = this.$route.query.row
+    this.disabled = this.$route.query.key === '查看' ? true : false
+    this.getPageList()
+  },
   methods: {
-    // 频道详情列表
+    // 关联列表
     getPageList() {
-      this.dialogVisible = true;
+      // this.dialogVisible = true;
       getChannelAudioPage(this.form2).then((res) => {
         if (res.code === 0) {
           this.tableData2 = res.data.records;
@@ -147,15 +141,10 @@ export default {
     },
 
     // 取消
-    cancel() {
-      (this.audioList = []), (this.tableData2 = []);
-      this.$refs.tableData2.clearSelection();
-      this.dialogVisible = false;
+    getCancel() {
+      this.$tab.closeOpenPage("/channel/official");
     },
 
-    // 取消
-    getCancel() {},
-
     // 提交
     getSubmit() {
       getChannelEdit(this.form1).then((res) => {

src/views/channel/official/index.vue

@@ -13,9 +13,9 @@
     <!-- 列表 -->
     <el-tabs v-model="tabActive" editable type="card" @edit="handleTabsEdit">
       <el-tab-pane v-for="item in tabOptions" :key="item.value" :label="item.label" :name="item.value">
-        <el-form label-width="100px">
+        <el-form inline label-width="100px">
           <el-form-item label="关联设备：">
-            <el-select v-model="value" multiple placeholder="请选择需要关联的设备">
+            <el-select v-model="value" multiple collapse-tags placeholder="请选择需要关联的设备">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -31,8 +31,9 @@
           <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)">编辑</el-button>
+              <el-button type="text" @click="getEdit(scope.row, '查看')">查看</el-button>
+              <el-button v-if="scope.row.channelId !== 1 && scope.row.channelId !== 2" type="text"
+                @click="getEdit(scope.row)">编辑</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -41,7 +42,7 @@
     <!-- 弹窗 -->
     <el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
       <el-form label-width="100px">
-        <el-form-item label="列表名称：">
+        <el-form-item label="列表名称：" :rules="[{required: true, message:'请输入列表名称', trigger: 'blur'}]">
           <el-input v-model="listName" placeholder="请输入列表名称" />
         </el-form-item>
       </el-form>
@@ -109,11 +110,11 @@ export default {
   },
   methods: {
     // 搜索
-    getSearch(){
+    getSearch() {
 
     },
     // 重置
-    getRefresh(){
+    getRefresh() {
 
     },
     // 列表
@@ -124,22 +125,22 @@ export default {
         }
       });
     },
-    // 编辑
-    getEdit(row) {
-      console.log(row);
+    // 编辑 / 查看
+    getEdit(row, key) {
       this.$router.push({
         path: `/channel/official/detail`,
         query: {
-          id: row.id,
-          channelId: row.channelId
+          row: row,
+          key: key
         },
       });
     },
     // 操作列表
     handleTabsEdit(targetName, action) {
-      console.log(action);
       if (action === "add") {
         this.dialogVisible = true;
+      } else {
+        console.log(targetName);
       }
     },
     // 新建列表