391 lines
10 KiB
Vue
391 lines
10 KiB
Vue
|
<template lang="pug">
|
||
|
|
div(
|
||
|
|
:class="{user_item: true, user_item_active, [`user_item_${props.index}`]: true}"
|
||
|
|
@mouseenter="mouseEnterItem(props.index)"
|
||
|
|
@mouseleave="mouseLeaveItem"
|
||
|
|
)
|
||
|
|
|
||
|
|
.user_item_info
|
||
|
|
tableColAvatar(:style='{width: "36px", height: "36px"}' :name="''" :record="props.userInfo")
|
||
|
|
div.user_item_info_name
|
||
|
|
.name {{ getName(props.userInfo) }}
|
||
|
|
.type(v-if="getUserType") {{ getUserType }}
|
||
|
|
|
||
|
|
div(
|
||
|
|
v-if="props.meetingType === 'noMeet' && userInfo.member_state === CONFERENCE_MEMBER_STATE_CALLING"
|
||
|
|
style="color: rgba(12, 162, 255, 1);"
|
||
|
|
) {{ $t('conference.control.calling') }}
|
||
|
|
|
||
|
|
div
|
||
|
|
.user_item_opration(v-if="props.meetingType === 'meeting'")
|
||
|
|
div.user_mask()
|
||
|
|
div.icon_box
|
||
|
|
WebPucSvgIcon(
|
||
|
|
v-show="userInfo.microphone_status !== MICROPHONE_STATUS_NO"
|
||
|
|
:name="isMicEnable ? 'microphone' : 'microphone_mute'")
|
||
|
|
WebPucSvgIcon(
|
||
|
|
v-show="userInfo.camera_status !== CAMERA_STATUS_NO"
|
||
|
|
:name="userInfo.camera_status === CAMERA_STATUS_OPEN ? 'camera' : 'camera_mute'")
|
||
|
|
|
||
|
|
a-dropdown(
|
||
|
|
v-if="globalStore.IS_CURRENT_MEETING_OWNER"
|
||
|
|
@select="(val) => reliveSelect(val)"
|
||
|
|
:popup-max-height="false"
|
||
|
|
v-model:popup-visible="reliveVisible"
|
||
|
|
position='br'
|
||
|
|
trigger="hover"
|
||
|
|
)
|
||
|
|
a-button {{ $t('meeting.modal.release_text') }}
|
||
|
|
icon-down
|
||
|
|
template(#content)
|
||
|
|
a-doption(
|
||
|
|
v-for="item in getReliveList"
|
||
|
|
:value="item.value"
|
||
|
|
:key="item.value") {{ item.label }}
|
||
|
|
|
||
|
|
a-dropdown(
|
||
|
|
@select="(val) => controlSelect(val)"
|
||
|
|
:popup-max-height="false"
|
||
|
|
v-model:popup-visible="controlVisible"
|
||
|
|
trigger="hover"
|
||
|
|
position='br')
|
||
|
|
a-button {{ $t('meeting.modal.control_text') }}
|
||
|
|
icon-down
|
||
|
|
template(#content)
|
||
|
|
a-doption(
|
||
|
|
v-for="item in getControlList"
|
||
|
|
:value="item.value"
|
||
|
|
:disabled="item.disabled"
|
||
|
|
:key="item.value") {{ item.label }}
|
||
|
|
|
||
|
|
.user_item_opration(v-if="props.meetingType === 'noMeet'")
|
||
|
|
div.user_mask()
|
||
|
|
a-dropdown(
|
||
|
|
@select="(val) => controlSelect(val)"
|
||
|
|
:popup-max-height="false"
|
||
|
|
v-model:popup-visible="reliveVisible"
|
||
|
|
position='br'
|
||
|
|
trigger="hover"
|
||
|
|
)
|
||
|
|
a-button {{ $t('report.tab.call') }}
|
||
|
|
icon-down
|
||
|
|
template(#content)
|
||
|
|
a-doption(
|
||
|
|
v-for="item in getNoMeetOperate"
|
||
|
|
:value="item.value"
|
||
|
|
:key="item.value") {{ item.label }}
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import tableColAvatar from '@/views/webPuc/org/components/tableColAvatarByNumType.vue';
|
||
|
|
import { computed, ref, watch } from 'vue';
|
||
|
|
import { formatShowNameFin } from '@/views/consultation/utils/format-show-name';
|
||
|
|
import { $t } from '@/locale';
|
||
|
|
import { useGlobalStore } from '@/store';
|
||
|
|
import {
|
||
|
|
MICROPHONE_STATUS_NO,
|
||
|
|
MICROPHONE_STATUS_OPEN,
|
||
|
|
MICROPHONE_STATUS_CLOSE,
|
||
|
|
MUTE_STATUS_Y,
|
||
|
|
MUTE_STATUS_N,
|
||
|
|
CAMERA_STATUS_NO,
|
||
|
|
CAMERA_STATUS_OPEN,
|
||
|
|
CAMERA_STATUS_CLOSE,
|
||
|
|
CONFERENCE_MEMBER_STATE_CALLING,
|
||
|
|
PROHIBITION_STATUS_N,
|
||
|
|
} from '@/views/consultation/sdk/conferenceControl';
|
||
|
|
|
||
|
|
const globalStore = useGlobalStore();
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
meetingType: {
|
||
|
|
type: String,
|
||
|
|
default: 'meeting',
|
||
|
|
},
|
||
|
|
userInfo: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
currentIndex: {
|
||
|
|
type: Number,
|
||
|
|
default: -1,
|
||
|
|
},
|
||
|
|
isShowType: {
|
||
|
|
// 是否显示人员类型
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
// eslint-disable-next-line vue/prop-name-casing
|
||
|
|
dispatcher_account: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const reliveVisible = ref(false);
|
||
|
|
const controlVisible = ref(false);
|
||
|
|
|
||
|
|
const isMicEnable = computed(() => {
|
||
|
|
return (
|
||
|
|
props.userInfo.prohibition_status === PROHIBITION_STATUS_N &&
|
||
|
|
props.userInfo.mute_status === MUTE_STATUS_N
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
const emit = defineEmits([
|
||
|
|
'changeCurrentIndex',
|
||
|
|
'controlSelect',
|
||
|
|
'reliveSelect',
|
||
|
|
]);
|
||
|
|
|
||
|
|
// 获取资源名称\
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const getName = (record: Record<string, any>) => {
|
||
|
|
const rolemap = {
|
||
|
|
0: 'conference.role.common', // 参会者
|
||
|
|
1: 'conference.role.host', // 主持人（仅用户或硬件终端）
|
||
|
|
2: 'conference.role.creator', // 组织者（仅创建人）
|
||
|
|
};
|
||
|
|
|
||
|
|
let type = '';
|
||
|
|
|
||
|
|
if (props.meetingType === 'meeting') {
|
||
|
|
type = $t(rolemap[record.role]);
|
||
|
|
}
|
||
|
|
|
||
|
|
return formatShowNameFin(record.nick || record.alias, type);
|
||
|
|
};
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const getUserType = computed(() => {
|
||
|
|
let personType: any = '';
|
||
|
|
if (props.userInfo.basedata_id === sessionStorage.getItem('basedata_id')) {
|
||
|
|
personType = $t('meeting.modal.personType');
|
||
|
|
} else {
|
||
|
|
personType = false;
|
||
|
|
}
|
||
|
|
return personType;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 未入会成员-呼叫操作
|
||
|
|
const getNoMeetOperate = computed(() => {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
value: 'FullDuplexCall',
|
||
|
|
label: $t('conference.fullDuplex_call'),
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// value: 'HalfDuplexCall',
|
||
|
|
// label: $t('conference.halfDuplex_call'),
|
||
|
|
// },
|
||
|
|
{
|
||
|
|
value: 'AllCall',
|
||
|
|
label: $t('conference.control.allCall'),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
});
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
// 已入会-解除操作
|
||
|
|
const getReliveList = computed(() => {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
value: 'ReleaseProhibition',
|
||
|
|
label: $t('meeting.modal.release_voice_text'),
|
||
|
|
}, // 解除禁言
|
||
|
|
{
|
||
|
|
value: 'CancelSpeech',
|
||
|
|
label: $t('conference.cancel_speak'),
|
||
|
|
}, // 取消发言
|
||
|
|
{
|
||
|
|
value: 'UnMute',
|
||
|
|
label: $t('conference.control.unmute'),
|
||
|
|
}, // 解除静音
|
||
|
|
{
|
||
|
|
value: 'OpenCamera',
|
||
|
|
label: $t('conference.control.openCamera'),
|
||
|
|
}, // 打开摄像头
|
||
|
|
{
|
||
|
|
value: 'AsMember',
|
||
|
|
label: $t('conference.control.setAsMember'),
|
||
|
|
}, // 设置为成员
|
||
|
|
// {
|
||
|
|
// value: 'CancelImage',
|
||
|
|
// label: $t('conference.control.cancel.image'),
|
||
|
|
// },// 取消指定
|
||
|
|
];
|
||
|
|
});
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
// 已入会-管控操作
|
||
|
|
const getControlList = computed(() => {
|
||
|
|
const operations = [
|
||
|
|
{
|
||
|
|
value: 'Prohibition',
|
||
|
|
label: $t('meeting.modal.control_voice_text'),
|
||
|
|
}, // 禁言
|
||
|
|
{
|
||
|
|
value: 'Mute',
|
||
|
|
label: $t('conference.control.muteMember'),
|
||
|
|
}, // 静音
|
||
|
|
{
|
||
|
|
value: 'CloseCamera',
|
||
|
|
label: $t('conference.control.closeCamera'),
|
||
|
|
}, // 关闭摄像头
|
||
|
|
{
|
||
|
|
value: 'AsHost',
|
||
|
|
label: $t('conference.control.setAsHost'),
|
||
|
|
}, // 设置为主席
|
||
|
|
{
|
||
|
|
value: 'Speech',
|
||
|
|
label: $t('conference.control.designatedSpeech'),
|
||
|
|
}, // 指定发言
|
||
|
|
{
|
||
|
|
value: 'ReName',
|
||
|
|
label: $t('conference.control.reName'),
|
||
|
|
}, // 修改昵称
|
||
|
|
{
|
||
|
|
value: 'Remove',
|
||
|
|
label: $t('meeting.modal.control_move_text'),
|
||
|
|
}, // 移除会议
|
||
|
|
// {
|
||
|
|
// value: 'AppointImage',
|
||
|
|
// label: $t('conference.control.appoint.image'),
|
||
|
|
// },// 指定画面
|
||
|
|
];
|
||
|
|
|
||
|
|
return globalStore.IS_CURRENT_MEETING_OWNER
|
||
|
|
? operations
|
||
|
|
: operations.filter((v) => v.value === 'ReName');
|
||
|
|
});
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const activeStatus = computed(() => {
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const mouseEnterItem = (index: number) => {
|
||
|
|
if (reliveVisible.value || controlVisible.value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
emit('changeCurrentIndex', index);
|
||
|
|
};
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const mouseLeaveItem = () => {
|
||
|
|
if (reliveVisible.value || controlVisible.value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
emit('changeCurrentIndex', -1);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 解除选择
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const reliveSelect = (val) => {
|
||
|
|
emit('reliveSelect', {
|
||
|
|
val,
|
||
|
|
record: props.userInfo,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 控制选择
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const controlSelect = (val, index) => {
|
||
|
|
emit('controlSelect', {
|
||
|
|
val,
|
||
|
|
record: props.userInfo,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.currentIndex,
|
||
|
|
() => {
|
||
|
|
reliveVisible.value = false;
|
||
|
|
controlVisible.value = false;
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.user_item {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 12px 16px;
|
||
|
|
border-bottom: 1px solid #3c4046;
|
||
|
|
|
||
|
|
&.user_item_active {
|
||
|
|
background: #353b43;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user_item_info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.user_item_info_name {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 5px;
|
||
|
|
line-height: 18px;
|
||
|
|
|
||
|
|
.type {
|
||
|
|
min-width: 200px;
|
||
|
|
color: #80848b;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user_item_opration {
|
||
|
|
img {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
&:nth-child(2) {
|
||
|
|
margin: 0 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.no_meeting_btn {
|
||
|
|
img {
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user_mask {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
right: 10px;
|
||
|
|
background: #353b43;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
|
||
|
|
> button {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_box {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|