140 lines
4.2 KiB
Vue
140 lines
4.2 KiB
Vue
<template>
|
|
<el-dialog v-model="props.modelValue" title="新增音视频会议" width="600px" @close="handleClose" :close-on-click-modal="false">
|
|
<!-- 常规表单部分 -->
|
|
<el-form ref="formRef" :model="formData" layout="vertical">
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<!-- 主题 -->
|
|
<el-form-item label="会议主题">
|
|
<el-input v-model="formData.subject" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<!-- 开始时间 -->
|
|
<el-form-item label="开始时间">
|
|
<el-date-picker v-model="formData.appointment" type="datetime" unlink-panels value-format="YYYY-MM-DD HH:mm:ss"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<!-- 会议时长 -->
|
|
<el-form-item label="会议时长">
|
|
<el-select v-model="formData.duration" >
|
|
<el-option value="30" label="30 分钟"></el-option>
|
|
<el-option value="60" label="60 分钟"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<!-- 提醒时间 -->
|
|
<el-form-item label="提醒时间">
|
|
<el-select v-model="formData.alarm" >
|
|
<el-option :value="1">1 分钟前</el-option>
|
|
<el-option :value="5">5 分钟前</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="24">
|
|
<!-- 备注 -->
|
|
<el-form-item label="备注">
|
|
<el-input type="textarea" v-model="formData.remark" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<!-- 设备选择穿梭框部分 -->
|
|
<div class="groupTransfer">
|
|
<div class="head flex just-between align-center">
|
|
<span>成员</span>
|
|
<span><el-icon><Delete/></el-icon></span>
|
|
</div>
|
|
<ul class="peolist">
|
|
<li v-for="(it,idx) in formData.members" :key="idx" class="flex just-between align-center">
|
|
<div class="flex align-center"> <img class="mr5" src="@/assets/images/webPuc/svgs/avatar_call_online_small.svg" alt="">{{it.alias}} ( {{ it.number }})</div>
|
|
<span><el-icon><Delete/></el-icon></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tc mt10">
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button @click="okBtn">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { timeValidate } from '@/utils/tools'
|
|
import { ref,defineEmits, onMounted } from 'vue'
|
|
const props = defineProps({
|
|
modelValue:Boolean,
|
|
})
|
|
const emit = defineEmits(['update:modelValue','save'])
|
|
const baseInfo = localStorage.getItem('rhInfo') ? JSON.parse(localStorage.getItem('rhInfo')) : {};
|
|
const formData = ref({
|
|
alarm:1,
|
|
duration:'30',
|
|
})
|
|
const remarkModal = ref({})
|
|
onMounted(()=>{
|
|
formData.value.subject = baseInfo.dispatcher_name +' 预约的会议';
|
|
formData.value.appointment = timeValidate( getRecentTime(10));
|
|
formData.value.members = [
|
|
{
|
|
alias:baseInfo.dispatcher_name,
|
|
basedata_id:baseInfo.basedata_id,
|
|
guid:baseInfo.user_guid,
|
|
number:baseInfo.user_id,
|
|
}
|
|
]
|
|
})
|
|
|
|
const getRecentTime = (n) => {
|
|
var currentDate = new Date();
|
|
var preDate = new Date(currentDate.getTime() + n * 60 * 1000)
|
|
return preDate
|
|
}
|
|
|
|
|
|
// 关闭
|
|
const handleClose = () =>{
|
|
emit('update:modelValue',false)
|
|
};
|
|
|
|
// 保存
|
|
const okBtn = () =>{
|
|
let obj = { ...formData.value }
|
|
obj.appointment = new Date(obj.appointment).toISOString();
|
|
emit('save',obj)
|
|
emit('update:modelValue',false)
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.groupTransfer{
|
|
border: 1px solid #ccc;
|
|
.head{
|
|
background: rgb(85,89,93);
|
|
line-height: 40px;
|
|
color: #fff;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.peolist{
|
|
height: 200px;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
li{
|
|
line-height: 40px;
|
|
color: #fff;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
background: rgb(28,32,41);
|
|
}
|
|
}
|
|
}
|
|
</style> |