fix: 快速更改首页显示状态

src/avue/crud/liveroomList.ts

@@ -42,6 +42,11 @@ export const tableOption = {
       type: 'upload',
       listType: 'picture-img',
       width: 80,
+    }, {
+      label: '启动',
+      prop: "startup",
+      slot: true,
+      width: 70,
     }, {
       label: '首页显示',
       prop: 'showInList',

src/icons/svg/icon-play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>

src/views/modules/liveroom/liveroomList-opbar.vue

@@ -2,22 +2,22 @@
   <div class="icon-button">
     <el-button-group>
       <el-tooltip effect="dark" content="直播间内用户" placement="top" :enterable="false">
-        <el-button type="success" size="small"><icon-svg name="user" /></el-button>
+        <el-button type="success" size="small" disabled><icon-svg name="user" /></el-button>
       </el-tooltip>
       <el-tooltip effect="dark" content="管理回放" placement="top" :enterable="false">
-        <el-button type="warning" size="small"><icon-svg name="playback" /></el-button>
+        <el-button type="warning" size="small" disabled><icon-svg name="playback" /></el-button>
       </el-tooltip>
       <el-tooltip effect="dark" content="商品库" placement="top" :enterable="false">
-        <el-button type="primary" size="small"><icon-svg name="product" /></el-button>
+        <el-button type="primary" size="small" disabled><icon-svg name="product" /></el-button>
       </el-tooltip>
       <el-tooltip effect="dark" content="客户咨询" placement="top" :enterable="false">
-        <el-button type="primary" size="small"><icon-svg name="question" /></el-button>
+        <el-button type="primary" size="small" disabled><icon-svg name="question" /></el-button>
       </el-tooltip>
       <el-tooltip effect="dark" content="商品跳转记录" placement="top" :enterable="false">
-        <el-button type="info" size="small"><icon-svg name="record" /></el-button>
+        <el-button type="info" size="small" disabled><icon-svg name="record" /></el-button>
       </el-tooltip>
       <el-tooltip effect="dark" content="邀约码统计" placement="top" :enterable="false">
-        <el-button type="info" size="small"><icon-svg name="share" /></el-button>
+        <el-button type="info" size="small" disabled><icon-svg name="share" /></el-button>
       </el-tooltip>
 
       <el-tooltip effect="dark" content="查看" placement="top" :enterable="false">
@@ -63,12 +63,4 @@ export default Vue.extend({
     }
   }
 })
-</script>
-
-<style scoped>
-.icon-button .el-button {
-  padding: 6px 10px;
-  font-size: medium;
-  border-radius: 10px;
-}
-</style>
+</script>

src/views/modules/liveroom/liveroomList.vue

@@ -7,7 +7,13 @@
       </template>
 
       <template slot-scope="scope" slot="showInList">
-        <el-switch :value="scope.row.showInList" />
+        <el-switch :value="scope.row.showInList" @change="(e) => { updateShowStatus(scope.row.id, e) }" />
+      </template>
+
+      <template slot-scope="{row}" slot="startup">
+        <div class="icon-button">
+          <el-button type="primary" size="small" @click="startLiveRoom(row.id)"><icon-svg name="play" /></el-button>
+        </div>
       </template>
 
       <template slot-scope="{row,index}" slot="menu">
@@ -62,6 +68,19 @@ export default Vue.extend({
         }
       })
     },
+    updateShowStatus(id: number, status: boolean) {
+      httpx.post("/rooms/updateRoomShowStatus", { id, showInList: status }).then((data) => {
+        this.getDataList()
+        this.$message({
+          message: '操作成功',
+          type: 'success',
+          duration: 1500,
+        })
+      })
+    },
+    startLiveRoom({ id }: { id: number }) {
+      // TODO
+    },
     onDisplayDetail({ id, index }: { id: number, index: number }) {
       this.item = this.dataList[index]
     },
@@ -87,3 +106,11 @@ export default Vue.extend({
   }
 })
 </script>
+
+<style>
+.icon-button .el-button {
+  padding: 6px 10px;
+  font-size: medium;
+  border-radius: 10px;
+}
+</style>