You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
207 lines
7.2 KiB
207 lines
7.2 KiB
3 weeks ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-affix postion="top" :offset="95">
|
||
|
|
<div class="flex justify-between mb-4 bg-white">
|
||
|
|
<b class="text-20px">{{ form.id ? '修改会议' : '新增会议' }}</b>
|
||
|
|
<el-button v-if="form.status == '未开始'" type="success" @click="submit()">保存</el-button>
|
||
|
|
</div>
|
||
|
|
</el-affix>
|
||
|
|
<el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||
|
|
<el-form-item label="会议主题" prop="subject">
|
||
|
|
<el-input v-model="form.subject" placeholder="请输入会议主题" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||
|
|
<el-form-item label="OKR节点" prop="okrNodeName">
|
||
|
|
<el-input v-model="form.okrNodeName" placeholder="请输入OKR节点" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
|
||
|
|
<el-form-item label="会议时间" prop="startDate">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="form.startDate"
|
||
|
|
type="datetime"
|
||
|
|
format="YYYY-MM-DD HH:mm"
|
||
|
|
value-format="YYYY-MM-DD HH:mm"
|
||
|
|
placeholder="请选择会议开始时间"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
|
||
|
|
<el-form-item label="预计结束时间" prop="expectEndDate">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="form.expectEndDate"
|
||
|
|
type="datetime"
|
||
|
|
format="YYYY-MM-DD HH:mm"
|
||
|
|
value-format="YYYY-MM-DD HH:mm"
|
||
|
|
placeholder="请选择预计结束时间"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
|
||
|
|
<el-form-item label="会议地点" prop="address">
|
||
|
|
<el-input v-model="form.address" placeholder="请输入会议地点" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
|
||
|
|
<el-form-item label="会议状态" prop="status">
|
||
|
|
<el-select v-model="form.status" placeholder="请选择会议状态" style="width: 100%">
|
||
|
|
<el-option label="未开始" value="未开始" />
|
||
|
|
<el-option label="已结束" value="已结束" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24" :offset="0">
|
||
|
|
<el-form-item label="预约参会人员" prop="expectUsers">
|
||
|
|
<!-- <el-input v-model="form.expectUsers" placeholder="请输入预约参会人员" /> -->
|
||
|
|
<el-select
|
||
|
|
v-model="form.expectUsers"
|
||
|
|
placeholder="选择参会人员"
|
||
|
|
clearable
|
||
|
|
filterable
|
||
|
|
style="width: 100%"
|
||
|
|
multiple
|
||
|
|
@change="handleUserChange"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in userOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24" :offset="0">
|
||
|
|
<el-form-item label="实际参会人员" prop="actualUsers">
|
||
|
|
<!-- <el-input v-model="form.actualUsers" placeholder="请输入实际参会人员" /> -->
|
||
|
|
<el-checkbox-group v-model="form.actualUsers">
|
||
|
|
<el-checkbox
|
||
|
|
v-for="item in expectUserOptions"
|
||
|
|
:key="item.key"
|
||
|
|
:label="item.value"
|
||
|
|
:value="item.value"
|
||
|
|
>
|
||
|
|
{{ item.label }}
|
||
|
|
</el-checkbox>
|
||
|
|
</el-checkbox-group>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24" :offset="0" v-if="!isAllActived">
|
||
|
|
<el-form-item label="缺席原因" prop="absenceReason">
|
||
|
|
<el-input v-model="form.absenceReason" placeholder="请输入缺席原因" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||
|
|
<el-form-item label="会议内容" prop="content">
|
||
|
|
<Editor v-model="form.content" height="500px" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||
|
|
<el-form-item label="会议纪要" prop="minutes">
|
||
|
|
<Editor v-model="form.minutes" height="500px" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup name="MeetingInfo">
|
||
|
|
const route = useRoute()
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
if (route.params.id && route.params.id != 0) {
|
||
|
|
// 模拟获取会议详情
|
||
|
|
// 这里可以调用API获取会议详情数据
|
||
|
|
getMeetingInfo()
|
||
|
|
} else {
|
||
|
|
console.error('会议ID不存在')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const form = ref({
|
||
|
|
id: 0,
|
||
|
|
subject: '',
|
||
|
|
startDate: '',
|
||
|
|
address: '',
|
||
|
|
expectEndDate: '',
|
||
|
|
expectUsers: [],
|
||
|
|
actualUsers: [],
|
||
|
|
okrNodeName: '',
|
||
|
|
status: '未开始',
|
||
|
|
content: '',
|
||
|
|
minutes: '',
|
||
|
|
absenceReason: ''
|
||
|
|
})
|
||
|
|
const rules = {
|
||
|
|
subject: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],
|
||
|
|
startDate: [{ required: true, message: '请选择会议开始时间', trigger: 'change' }],
|
||
|
|
expectEndDate: [{ required: true, message: '请选择预计结束时间', trigger: 'change' }],
|
||
|
|
address: [{ required: true, message: '请输入会议地点', trigger: 'blur' }],
|
||
|
|
status: [{ required: true, message: '请选择会议状态', trigger: 'change' }],
|
||
|
|
expectUsers: [{ required: true, message: '请输入预约参会人员', trigger: 'blur' }],
|
||
|
|
actualUsers: [{ required: true, message: '请输入实际参会人员', trigger: 'blur' }]
|
||
|
|
}
|
||
|
|
|
||
|
|
const formRef = ref(null)
|
||
|
|
const userOptions = ref([
|
||
|
|
{ value: '张三', label: '张三' },
|
||
|
|
{ value: '李四', label: '李四' },
|
||
|
|
{ value: '王五', label: '王五' },
|
||
|
|
{ value: '赵六', label: '赵六' }
|
||
|
|
])
|
||
|
|
const expectUserOptions = ref([])
|
||
|
|
|
||
|
|
const isAllActived = computed(() => {
|
||
|
|
// 判断实际参会人员是否包含所有预约参会人员
|
||
|
|
return form.value.expectUsers.every((item) => form.value.actualUsers.includes(item))
|
||
|
|
})
|
||
|
|
|
||
|
|
// 获取详情
|
||
|
|
const getMeetingInfo = () => {
|
||
|
|
// 模拟异步请求
|
||
|
|
setTimeout(() => {
|
||
|
|
// 假设请求成功，模拟数据
|
||
|
|
form.value = {
|
||
|
|
id: route.params.id,
|
||
|
|
subject: 'OKR会议',
|
||
|
|
startDate: '2023-10-01 10:00',
|
||
|
|
address: '会议室A',
|
||
|
|
expectEndDate: '2023-10-01 11:00',
|
||
|
|
expectUsers: ['张三', '李四', '王五'],
|
||
|
|
actualUsers: ['张三', '李四'],
|
||
|
|
okrNodeName: 'OKR节点1',
|
||
|
|
status: '未开始'
|
||
|
|
}
|
||
|
|
handleUserChange()
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleUserChange() {
|
||
|
|
// 当预约参会人员变化时，更新实际参会人员选项
|
||
|
|
expectUserOptions.value = userOptions.value.filter((user) =>
|
||
|
|
form.value.expectUsers.includes(user.value)
|
||
|
|
)
|
||
|
|
form.value.actualUsers = [...form.value.expectUsers]
|
||
|
|
}
|
||
|
|
|
||
|
|
function submit() {
|
||
|
|
formRef.value.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
// 提交表单数据
|
||
|
|
console.log('提交的会议数据:', form.value)
|
||
|
|
// 这里可以调用API保存会议数据
|
||
|
|
} else {
|
||
|
|
console.error('表单验证失败')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|