zbAdmin/src/views/liveBroadcast/liveDetail/components/guestList.vue

<template>
  <div class="p20">
    <el-button type="primary" @click="dialogVisible1 = true" v-if="!tableData.length && liveStatus === 2">嘉宾设置</el-button>
    <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column prop="" label="讲师名称" width="180"> 
        <template slot-scope="scope">
          {{ scope.row.guestInfo.showName }}
        </template>
      </el-table-column>
      <el-table-column prop="" label="推流状态" width="180"> 
        <template slot-scope="scope">
          {{ streamStatusObj[scope.row.streamStatus] }}
        </template>
      </el-table-column>
      <el-table-column prop="" label="连麦状态">
        <template slot-scope="scope">
          {{ statusObj[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column prop="" label="主画面显示">
        <template slot-scope="scope">
          <el-switch
            :disabled="[2,4].includes(liveStatus)"
            v-model="scope.row.showMain"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="2"
            @change="(showMain)=> changeShowMain({showMain, item:scope.row})">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作"> 
        <template slot-scope="scope">
          <el-button type="text" @click="optFn({type:0, item:scope.row})" v-if="liveStatus === 2">移除</el-button>
          <div v-else-if="scope.row.streamStatus === 'active' && liveStatus === 1">
            <el-button type="text" @click="optFn({type:2, item:scope.row})" v-if="scope.row.status !== 2">开始连麦</el-button>
            <el-button type="text" @click="optFn({type:3, item:scope.row})" v-if="scope.row.status === 2">结束连麦</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="设置嘉宾"
      :append-to-body="true"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <el-form ref="ruleForm" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="嘉宾名称" prop="guestId">
          <adviser-select
            v-model="form.guestId"
            :dept-id="user.user.deptId"
            :filterSelf="1"
          ></adviser-select>
        </el-form-item>
        <el-form-item label="嘉宾展示区域" prop="templateId">
          <el-select v-model="form.templateId" placeholder="请选择嘉宾展示区域"  style="width: 100%;">
            <el-option
              v-for="(value,key) in mixQueryTemplateObj"
              :key="key"
              :label="value"
              :value="key">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="saveMixDataFn"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :append-to-body="true"
      :visible.sync="dialogVisible2"
      width="30%"
    >
      <span>{{ tipText }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updateStatus"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {  mixQueryTemplateObj } from "@/utils/options";
import { getMixData, saveMixData, updateMixShowMain, updateMixStatus } from "@/api/videoLive"
import AdviserSelect from "@/views/adviser/components/select";
export default {
  components: {
    AdviserSelect
  },
  computed: {
    ...mapGetters(["user"]),
  },
  props:{
    liveStatus: {
      type: Number
    }
  },
  data() {
    return {
      mixQueryTemplateObj,
      dialogVisible1: false,
      form: {
        guestId: '',
        templateId: '',
        videoId: this.$route.query.id
      },
      rules: {
        guestId: [{ required: true, message: "请选择嘉宾", trigger: "blur" }],
        templateId: [{ required: true, message: "请选择嘉宾展示区域", trigger: "blur" }]
      },
      dialogVisible2: false,
      streamStatusObj: {
        active: '已推流',
        inactive: '未推流',
        forbid: '禁播'
      },
      statusObj: {
        1:'未连麦',
        2:'已连麦',
        3:'已结束连麦'
      },
      tableData: [],
      tipText: '',
      optStatus: null,
      time: null
    };
  },
  async created() {
    await this.getDetail()
    this.timerGetDetail()
  },
  beforeDestroy() {
    clearInterval(this.time)
  },
  watch: {
    liveStatus(){
      this.timerGetDetail()
    },
    dialogVisible1(value) {
      if(!value) {
        this.form = {
          guestId: '',
          templateId: '',
          videoId: this.$route.query.id
        }
      }
    }
  },
  methods: {
    timerGetDetail() {
      if([1,3].includes(this.liveStatus) && this.tableData.length && this.$route.query.id) {
        clearInterval(this.time)
        this.time = setInterval(()=>{
          this.getDetail()
        }, 5000)
      }
    },
    async getDetail() {
      console.log('getDetail')
      let ret = await getMixData({id: this.$route.query.id})
      if(ret && ret.code === 0 && ret.data) {
        this.tableData = [ret.data]
      } else if(ret && ret.code === 0 && !ret.data){
        clearInterval(this.time)
        this.tableData = []
      }
    },
    optFn({type, item}) {
      this.optStatus = type
      let name = item.guestInfo.showName
      const textObj = {
        0: `是否确认将${name}从嘉宾名单中移除?`,
        2: `是否确认开始与嘉宾${name}连麦?`,
        3: `是否确认结束与嘉宾${name}连麦?`
      }
      this.tipText = textObj[type]
      this.dialogVisible2 = true
    },
    async updateStatus() {
      let ret = await updateMixStatus({
        status: this.optStatus,
        videoId: this.$route.query.id
      })
      if(ret && ret.code === 0) {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.dialogVisible2 = false
        this.getDetail()
      }
    },
    saveMixDataFn() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let ret =  await saveMixData(this.form)
          if(ret && ret.code === 0) {
            this.dialogVisible1 = false
            this.$message({
              type: "success",
              message: "设置成功!"
            });
            this.getDetail()
          }
        }
      })
    },
    async changeShowMain({showMain, item}) {
      let ret =  await updateMixShowMain({
        showMain,
        videoId: this.$route.query.id
      })
      if(ret && ret.code === 0) {
        this.$message({
          type: "success",
          message: "设置成功!"
        });
      } else {
        item.showMain =  showMain === 1? 2: 1
      }
    }
  },
};
</script>
<style scoped lang="scss">
.p20 {
  padding: 20px;
}
.el-button {
  margin-bottom: 10px;
}
</style>