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

<template>
  <div>
    <el-button
      type="primary"
      @click="dialogVisible1 = true"
      v-if="!tableData.length && liveStatus === 2"
      >嘉宾设置</el-button
    >
    <el-table :data="tableData" 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>