277 lines
7.4 KiB
Vue
277 lines
7.4 KiB
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>
|