qiushanhe/ss-oa-manage-web
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

sc

Browse Source
This commit is contained in:
qsh
2025-06-03 18:12:32 +08:00
parent f3293ef14d
commit 0409e9ef11
3 changed files with 396 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/router/modules/static.ts
View File

@@ -48,20 +48,33 @@ const staticRouter: AppCustomRouteRecordRaw[] = [
visible: true,
alwaysShow: true,
redirect: ''
},
{
icon: 'ep:data-board',
path: 'okr-meeting',
name: '会议管理',
componentName: 'OkrMeeting',
component: 'OKR/Meeting/index',
meta: {
title: '会议管理'
},
visible: true,
alwaysShow: true,
redirect: ''
},
{
icon: 'ep:data-board',
path: 'okr-meeting-info/:id',
name: '会议详情',
componentName: 'MeetingInfo',
component: 'OKR/Meeting/MeetingInfo',
meta: {
title: '会议详情'
},
visible: false,
alwaysShow: true,
redirect: ''
}
// {
// icon: 'ep:data-board',
// path: 'okr-metting',
// name: '会议管理',
// componentName: 'OkrMetting',
// component: 'OKR/Meeting/index',
// meta: {
// title: '会议管理'
// },
// visible: true,
// alwaysShow: true,
// redirect: ''
// }
],
meta: {
title: 'OKR',

206
src/views/OKR/Meeting/MeetingInfo.vue Normal file
View File

@@ -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>

164
src/views/OKR/Meeting/index.vue Normal file
View File

@@ -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>