main
qsh
3 weeks ago
parent
f3293ef14d
commit
0409e9ef11
@ -0,0 +1,206 @@ |
||||
<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> |
||||
@ -0,0 +1,164 @@ |
||||
<template> |
||||
<div> |
||||
<!-- 搜索条件：主题、会议状态、会议时间（时间段）、选择OKR节点 --> |
||||
<el-form :model="searchForm" inline label-width="0"> |
||||
<el-form-item> |
||||
<el-input v-model="searchForm.subject" placeholder="会议主题" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select v-model="searchForm.status" placeholder="会议状态" style="width: 120px"> |
||||
<el-option label="未开始" :value="1" /> |
||||
<el-option label="已结束" :value="2" /> |
||||
<el-option label="已取消" :value="3" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-date-picker |
||||
v-model="searchForm.dateRange" |
||||
type="daterange" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
start-placeholder="会议时间" |
||||
end-placeholder="会议时间" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select v-model="searchForm.nodeId" placeholder="选择OKR节点" style="width: 220px"> |
||||
<el-option label="OKR节点1" :value="1" /> |
||||
<el-option label="OKR节点2" :value="2" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleSearch">查询</el-button> |
||||
<el-button type="primary" @click="handleAdd">预约会议</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-table :data="tableList" v-loading="loading" border stripe> |
||||
<el-table-column prop="subject" label="会议主题" /> |
||||
<el-table-column prop="startDate" label="会议时间" /> |
||||
<el-table-column prop="address" label="会议地点" /> |
||||
<el-table-column prop="expectEndDate" label="预计结束时间" /> |
||||
<el-table-column prop="expectUsers" label="预约参会人员" /> |
||||
<el-table-column prop="actualUsers" label="实际参会人员" /> |
||||
<el-table-column prop="okrNodeName" label="关联OKR节点" /> |
||||
<el-table-column prop="status" label="会议状态"> |
||||
<template #default="{ row }"> |
||||
<el-tag v-if="row.status === '未开始'" type="info" size="small"> |
||||
{{ row.status }} |
||||
</el-tag> |
||||
<el-tag v-else-if="row.status === '已结束'" type="success" size="small"> |
||||
{{ row.status }} |
||||
</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="操作" width="140"> |
||||
<template #default="{ row }"> |
||||
<el-button type="primary" style="padding: 0" text @click="handleEdit(row.id)"> |
||||
修改 |
||||
</el-button> |
||||
<el-button type="danger" text style="padding: 0" @click="handleCancel(row)"> |
||||
取消 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<Pagination |
||||
v-model:limit="searchForm.pageSize" |
||||
v-model:page="searchForm.pageNo" |
||||
:total="total" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Meeting"> |
||||
const message = useMessage() |
||||
|
||||
const searchForm = ref({ |
||||
subject: '', |
||||
status: 1, |
||||
dateRange: [], |
||||
pageNo: 1, |
||||
pageSize: 50 |
||||
}) |
||||
const total = ref(0) |
||||
|
||||
onMounted(() => { |
||||
handleSearch() |
||||
}) |
||||
|
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
const handleSearch = () => { |
||||
searchForm.value.pageNo = 1 |
||||
getList() |
||||
} |
||||
|
||||
function getList() { |
||||
loading.value = true |
||||
// 模拟异步请求 |
||||
setTimeout(() => { |
||||
// 假设请求成功，更新数据 |
||||
tableList.value = [ |
||||
{ |
||||
id: 1, |
||||
subject: 'OKR会议', |
||||
startDate: '2023-10-01 10:00', |
||||
address: '会议室A', |
||||
expectEndDate: '2023-10-01 11:00', |
||||
expectUsers: '张三, 李四', |
||||
actualUsers: '张三, 李四, 王五', |
||||
okrNodeName: 'OKR节点1', |
||||
status: '未开始' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
subject: '项目复盘会议', |
||||
startDate: '2023-10-02 14:00', |
||||
address: '会议室B', |
||||
expectEndDate: '2023-10-02 15:00', |
||||
expectUsers: '赵六, 钱七', |
||||
actualUsers: '赵六, 钱七, 孙八', |
||||
okrNodeName: 'OKR节点2', |
||||
status: '已结束' |
||||
} |
||||
] |
||||
total.value = tableList.value.length |
||||
loading.value = false |
||||
}, 1000) |
||||
} |
||||
|
||||
const router = useRouter() |
||||
|
||||
const handleAdd = () => { |
||||
router.push({ name: 'MeetingInfo', params: { id: 0 } }) |
||||
} |
||||
|
||||
const handleEdit = (id) => { |
||||
router.push({ |
||||
name: `MeetingInfo`, |
||||
params: { |
||||
id |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const handleCancel = async (row) => { |
||||
try { |
||||
await message.confirm('是否确认取消该会议？') |
||||
// 模拟取消会议操作 |
||||
setTimeout(() => { |
||||
console.log(row) |
||||
|
||||
message.success('会议已取消') |
||||
// 重新获取列表 |
||||
getList() |
||||
}, 500) |
||||
} catch (error) { |
||||
console.log('取消操作被用户拒绝', error) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue