qsh 3 weeks ago
parent ec34235cc2
commit 80d9e93e46
  1. 4
      .env.base
  2. 45
      src/api/okr/meeting.js
  3. 20
      src/router/modules/remaining.ts
  4. 200
      src/views/OKR/Meeting/MeetingInfo.vue
  5. 109
      src/views/OKR/Meeting/index.vue

@ -6,9 +6,9 @@ VITE_DEV=true
# 请求路径 # 请求路径
# VITE_BASE_URL='http://localhost:48080' # VITE_BASE_URL='http://localhost:48080'
# VITE_BASE_URL='http://47.98.161.246:48080' VITE_BASE_URL='http://47.98.161.246:48080'
# VITE_BASE_URL='http://114.55.169.15:48080' # VITE_BASE_URL='http://114.55.169.15:48080'
VITE_BASE_URL='http://114.215.207.150:48080' # VITE_BASE_URL='http://114.215.207.150:48080'
# 上传路径 # 上传路径
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'

@ -0,0 +1,45 @@
import request from '@/config/axios'
export const createMeeting = (data) => {
return request.post({
url: '/admin-api/okr/meeting/add',
data,
isSubmitForm: true
// headers: { 'instance-id': 1016 }
})
}
// 修改
export const updateMeeting = (data) => {
return request.put({
url: '/admin-api/okr/meeting/update',
data
// headers: { 'instance-id': 1016 }
})
}
// 查询详情
export const getMeetingDetail = (params) => {
return request.get({
url: '/admin-api/okr/meeting/get',
params
// headers: { 'instance-id': 1016 }
})
}
// 取消会议
export const cancelMeeting = (data) => {
return request.put({
url: '/admin-api/okr/meeting/cancel',
data
// headers: { 'instance-id': 1016 }
})
}
// 分页查询
export const getMeetingPage = (params) => {
return request.get({
url: '/admin-api/okr/meeting/page',
params
// headers: { 'instance-id': 1016 }
})
}

@ -50,16 +50,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
noTagsView: true noTagsView: true
} }
}, },
{ // {
path: '', // path: '',
component: Layout, // component: Layout,
redirect: '/Home/index', // redirect: '/Home/index',
name: '', // name: '',
meta: { // meta: {
title: '首页', // title: '首页',
hidden: true // hidden: true
} // }
}, // },
{ {
path: '/swagger', path: '/swagger',
component: () => import('@/views/Basic/Swagger/index.vue'), component: () => import('@/views/Basic/Swagger/index.vue'),

@ -1,16 +1,23 @@
<template> <template>
<div> <div>
<el-affix postion="top" :offset="95"> <el-affix postion="top" :offset="95" v-if="!isDetail">
<div class="flex justify-between mb-4 bg-white"> <div class="flex justify-between mb-4 bg-white">
<b class="text-20px">{{ form.id ? '修改会议' : '新增会议' }}</b> <b class="text-20px">{{ form.meetingId ? '修改会议' : '新增会议' }}</b>
<el-button type="success" @click="submit()">保存</el-button> <el-button type="success" @click="submit()">保存</el-button>
</div> </div>
</el-affix> </el-affix>
<el-form :model="form" ref="formRef" :rules="rules" label-width="120px"> <el-form
:model="form"
ref="formRef"
:rules="rules"
label-width="120px"
v-loading="loading"
:disabled="!!isDetail"
>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<el-form-item label="会议主题" prop="subject"> <el-form-item label="会议主题" prop="meetingSubject">
<el-input v-model="form.subject" placeholder="请输入会议主题" /> <el-input v-model="form.meetingSubject" placeholder="请输入会议主题" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
@ -26,9 +33,9 @@
/> />
</el-col> </el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24"> <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<el-form-item label="会议时间" prop="startDate"> <el-form-item label="会议时间" prop="startTime">
<el-date-picker <el-date-picker
v-model="form.startDate" v-model="form.startTime"
type="datetime" type="datetime"
format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm"
@ -37,9 +44,9 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24"> <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<el-form-item label="预计结束时间" prop="expectEndDate"> <el-form-item label="预计结束时间" prop="expectEndTime">
<el-date-picker <el-date-picker
v-model="form.expectEndDate" v-model="form.expectEndTime"
type="datetime" type="datetime"
format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm"
@ -48,21 +55,20 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24"> <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<el-form-item label="会议地点" prop="address"> <el-form-item label="会议地点" prop="meetingRoom">
<el-input v-model="form.address" placeholder="请输入会议地点" /> <el-input v-model="form.meetingRoom" placeholder="请输入会议地点" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24"> <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<el-form-item label="会议状态" prop="status"> <el-form-item label="会议状态" prop="status">
<el-select v-model="form.status" placeholder="请选择会议状态" style="width: 100%"> <el-select v-model="form.status" placeholder="请选择会议状态" style="width: 100%">
<el-option label="未开始" value="未开始" /> <el-option label="未开始" value="1" />
<el-option label="已结束" value="已结束" /> <el-option label="已结束" value="2" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" :offset="0"> <el-col :span="24" :offset="0">
<el-form-item label="预约参会人员" prop="expectUsers"> <el-form-item label="预约参会人员" prop="expectUsers">
<!-- <el-input v-model="form.expectUsers" placeholder="请输入预约参会人员" /> -->
<el-select <el-select
v-model="form.expectUsers" v-model="form.expectUsers"
placeholder="选择参会人员" placeholder="选择参会人员"
@ -74,45 +80,45 @@
> >
<el-option <el-option
v-for="item in userOptions" v-for="item in userOptions"
:key="item.value" :key="item.id"
:label="item.label" :label="item.name"
:value="item.value" :value="item.id"
:disabled="item.status == 1"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" :offset="0"> <el-col :span="24" :offset="0" v-if="form.meetingId">
<el-form-item label="实际参会人员" prop="actualUsers"> <el-form-item label="实际参会人员" prop="actualUsers">
<!-- <el-input v-model="form.actualUsers" placeholder="请输入实际参会人员" /> -->
<el-checkbox-group v-model="form.actualUsers"> <el-checkbox-group v-model="form.actualUsers">
<el-checkbox <el-checkbox
v-for="item in expectUserOptions" v-for="item in expectUserOptions"
:key="item.key" :key="item.id"
:label="item.value" :label="item.name"
:value="item.value" :value="item.id"
> >
{{ item.label }} {{ item.name }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" :offset="0" v-if="!isAllActived"> <el-col :span="24" :offset="0" v-if="!isAllActived">
<el-form-item label="缺席原因" prop="absenceReason"> <el-form-item label="缺席原因" prop="absentReason">
<el-input v-model="form.absenceReason" placeholder="请输入缺席原因" /> <el-input v-model="form.absentReason" placeholder="请输入缺席原因" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24"> <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
<el-form-item label="会议内容:" prop="content"> <el-form-item label="会议内容:" prop="meetingContent">
<div v-if="isDetail" v-dompurify-html="form.content" class="w-full"></div> <div v-if="!!isDetail" v-dompurify-html="form.meetingContent" class="w-full"></div>
<Editor v-else v-model="form.content" height="500px" /> <Editor v-else v-model="form.meetingContent" height="500px" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24"> <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" v-if="!!form.meetingId">
<el-form-item label="会议纪要:" prop="minutes"> <el-form-item label="会议纪要:" prop="meetingSummary">
<div v-if="isDetail" v-dompurify-html="form.minutes" class="w-full"></div> <div v-if="!!isDetail" v-dompurify-html="form.meetingSummary" class="w-full"></div>
<Editor v-else v-model="form.minutes" height="500px" /> <Editor v-else v-model="form.meetingSummary" height="500px" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -123,8 +129,15 @@
<script setup name="MeetingInfo"> <script setup name="MeetingInfo">
import { listToTree } from '@/utils/tree' import { listToTree } from '@/utils/tree'
import { getAllNodeTree } from '@/api/okr/okr' import { getAllNodeTree } from '@/api/okr/okr'
import * as MeetingApi from '@/api/okr/meeting'
import { formatDate } from '@/utils/formatTime'
import { getEmployeeSimpleList } from '@/api/pers/employee'
import { useTagsViewStore } from '@/store/modules/tagsView'
const route = useRoute() const route = useRoute()
const message = useMessage()
const tagsViewStore = useTagsViewStore()
const defaultProps = { const defaultProps = {
value: 'nodeId', value: 'nodeId',
label: 'nodeName', label: 'nodeName',
@ -136,17 +149,16 @@ const isDetail = route.query.isDetail
onMounted(() => { onMounted(() => {
getOptions() getOptions()
if (route.params.id && route.params.id != 0) { if (route.params.id && route.params.id != 0) {
//
// API // API
getMeetingInfo() getMeetingInfo(route.params.id)
} else { } else {
console.error('会议ID不存在') console.error('会议不存在')
} }
}) })
const peroidList = ref([]) const peroidList = ref([])
function getOptions() { function getOptions() {
// OKR // OKR
getAllNodeTree().then((resp) => { getAllNodeTree().then((resp) => {
peroidList.value = listToTree(resp?.tree || [], { peroidList.value = listToTree(resp?.tree || [], {
id: 'nodeId', id: 'nodeId',
@ -154,39 +166,36 @@ function getOptions() {
children: 'children' children: 'children'
}) })
}) })
//
getEmployeeSimpleList().then((data) => {
userOptions.value = data.map((it) => ({ ...it, id: it.id + '' }))
})
} }
const form = ref({ const form = ref({
id: 0, meetingId: undefined,
subject: '', meetingSubject: '',
startDate: '', startTime: '',
address: '', meetingRoom: '',
expectEndDate: '', expectEndTime: '',
expectUsers: [], expectUsers: [],
actualUsers: [], actualUsers: [],
okrNodeName: '', okrNodeName: '',
status: '未开始', status: '1',
content: '', meetingContent: '',
minutes: '', meetingSummary: '',
absenceReason: '' absentReason: ''
}) })
const rules = { const rules = {
subject: [{ required: true, message: '请输入会议主题', trigger: 'blur' }], meetingSubject: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],
startDate: [{ required: true, message: '请选择会议开始时间', trigger: 'change' }], startTime: [{ required: true, message: '请选择会议开始时间', trigger: 'change' }],
expectEndDate: [{ required: true, message: '请选择预计结束时间', trigger: 'change' }], expectEndTime: [{ required: true, message: '请选择预计结束时间', trigger: 'change' }],
address: [{ required: true, message: '请输入会议地点', trigger: 'blur' }], meetingRoom: [{ required: true, message: '请输入会议地点', trigger: 'blur' }],
status: [{ required: true, message: '请选择会议状态', trigger: 'change' }], expectUsers: [{ required: true, message: '请选择参会人员', trigger: 'change' }]
expectUsers: [{ required: true, message: '请输入预约参会人员', trigger: 'blur' }],
actualUsers: [{ required: true, message: '请输入实际参会人员', trigger: 'blur' }]
} }
const formRef = ref(null) const formRef = ref(null)
const userOptions = ref([ const userOptions = ref([])
{ value: '张三', label: '张三' },
{ value: '李四', label: '李四' },
{ value: '王五', label: '王五' },
{ value: '赵六', label: '赵六' }
])
const expectUserOptions = ref([]) const expectUserOptions = ref([])
const isAllActived = computed(() => { const isAllActived = computed(() => {
@ -194,47 +203,72 @@ const isAllActived = computed(() => {
return form.value.expectUsers.every((item) => form.value.actualUsers.includes(item)) return form.value.expectUsers.every((item) => form.value.actualUsers.includes(item))
}) })
const loading = ref(false)
// //
const getMeetingInfo = () => { const getMeetingInfo = async (meetingId) => {
// try {
setTimeout(() => { loading.value = true
// // API
const resp = await MeetingApi.getMeetingDetail({ meetingId })
loading.value = false
if (resp) {
form.value = { form.value = {
id: route.params.id, ...form.value,
subject: 'OKR会议', ...resp,
startDate: '2023-10-01 10:00', startTime: formatDate(resp.startTime, 'YYYY-MM-DD HH:mm'),
address: '会议室A', expectEndTime: formatDate(resp.expectEndTime, 'YYYY-MM-DD HH:mm'),
expectEndDate: '2023-10-01 11:00', expectUsers: resp.expectUsers || [],
expectUsers: ['张三', '李四', '王五'], actualUsers: resp.actualUsers || []
actualUsers: ['张三', '李四'],
okrNodeName: 'OKR节点1',
status: '未开始',
content: '<p>会议内容示例</p> <p><img src="https://picsum.photos/200/300" alt=""></p>',
minutes: '<p>会议纪要示例</p>'
} }
handleUserChange() handleUserChange()
}, 1000) }
} catch (error) {
loading.value = false
console.error('获取会议详情失败:', error)
}
} }
function handleUserChange() { function handleUserChange() {
// //
expectUserOptions.value = userOptions.value.filter((user) => expectUserOptions.value = userOptions.value.filter((user) =>
form.value.expectUsers.includes(user.value) form.value.expectUsers.some((it) => it == user.id)
) )
form.value.actualUsers = [...form.value.expectUsers] form.value.actualUsers = [...form.value.expectUsers]
} }
function submit() { const router = useRouter()
formRef.value.validate((valid) => { async function submit() {
if (valid) { //
if (!formRef.value) return
const valid = await formRef.value.validate()
if (!valid) return
try {
// //
console.log('提交的会议数据:', form.value) if (form.value.meetingId) {
// API if (form.value.status == 2 && !form.value.meetingSummary) {
message.error('会议结束时,会议纪要不能为空')
return
}
//
await MeetingApi.updateMeeting(form.value)
message.success('会议更新成功')
} else { } else {
console.error('表单验证失败') if (form.value.status == 1 && !form.value.meetingContent) {
return false message.error('预约会议时,会议内容不能为空')
return
}
//
await MeetingApi.createMeeting(form.value)
message.success('会议创建成功')
}
tagsViewStore.delView(route)
const visitedViews = tagsViewStore.getVisitedViews
const latestView = visitedViews.slice(-1)[0]
router.push(latestView)
} catch (error) {
console.error('保存会议数据失败:', error)
} }
})
} }
</script> </script>

@ -3,13 +3,13 @@
<!-- 搜索条件主题会议状态会议时间时间段选择OKR节点 --> <!-- 搜索条件主题会议状态会议时间时间段选择OKR节点 -->
<el-form :model="searchForm" inline label-width="0"> <el-form :model="searchForm" inline label-width="0">
<el-form-item> <el-form-item>
<el-input v-model="searchForm.subject" placeholder="会议主题" style="width: 200px" /> <el-input v-model="searchForm.meetingSubject" placeholder="会议主题" style="width: 200px" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-select v-model="searchForm.status" placeholder="会议状态" style="width: 150px"> <el-select v-model="searchForm.status" placeholder="会议状态" style="width: 150px">
<el-option label="未开始" :value="1" /> <el-option label="未开始" value="1" />
<el-option label="已结束" :value="2" /> <el-option label="已结束" value="2" />
<el-option label="已取消" :value="3" /> <el-option label="已取消" value="3" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -42,34 +42,37 @@
</el-form> </el-form>
<el-table :data="tableList" v-loading="loading" border stripe> <el-table :data="tableList" v-loading="loading" border stripe>
<el-table-column prop="subject" label="会议主题" /> <el-table-column prop="meetingSubject" label="会议主题" />
<el-table-column prop="startDate" label="会议时间" /> <el-table-column prop="startTime" label="会议时间" />
<el-table-column prop="address" label="会议地点" /> <el-table-column prop="meetingRoom" label="会议地点" />
<el-table-column prop="expectEndDate" label="预计结束时间" /> <el-table-column prop="expectEndTime" label="预计结束时间" />
<el-table-column prop="expectUsers" label="预约参会人员" /> <el-table-column prop="expectUserName" label="预约参会人员" />
<el-table-column prop="actualUsers" label="实际参会人员" /> <el-table-column prop="actualUserName" label="实际参会人员" />
<el-table-column prop="okrNodeName" label="关联OKR节点" /> <el-table-column prop="nodeName" label="关联OKR节点" />
<el-table-column prop="status" label="会议状态"> <el-table-column prop="status" label="会议状态">
<template #default="{ row }"> <template #default="{ row }">
<el-tag v-if="row.status === '未开始'" type="info" size="small"> <el-tag :type="['', 'info', 'success', 'warning'][row.status]" size="small">
{{ row.status }} {{ ['', '未开始', '已结束', '已取消'][row.status] }}
</el-tag>
<el-tag v-else-if="row.status === '已结束'" type="success" size="small">
{{ row.status }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" width="140"> <el-table-column fixed="right" label="操作" width="140">
<template #default="{ row }"> <template #default="{ row }">
<template v-if="row.status == '未开始'"> <template v-if="row.status == 1">
<el-button type="primary" style="padding: 0" text @click="handleEdit(row.id)"> <el-button type="primary" style="padding: 0" text @click="handleEdit(row.meetingId)">
修改 修改
</el-button> </el-button>
<el-button type="danger" text style="padding: 0" @click="handleCancel(row)"> <el-button type="danger" text style="padding: 0" @click="handleCancel(row)">
取消 取消
</el-button> </el-button>
</template> </template>
<el-button v-else type="primary" style="padding: 0" text @click="handleDetail(row.id)"> <el-button
v-else
type="primary"
style="padding: 0"
text
@click="handleDetail(row.meetingId)"
>
详情 详情
</el-button> </el-button>
</template> </template>
@ -88,6 +91,7 @@
import { listToTree } from '@/utils/tree' import { listToTree } from '@/utils/tree'
// import { formatDate } from '@/utils/formatTime' // import { formatDate } from '@/utils/formatTime'
import { getAllNodeTree } from '@/api/okr/okr' import { getAllNodeTree } from '@/api/okr/okr'
import * as MeetingApi from '@/api/okr/meeting'
const defaultProps = { const defaultProps = {
value: 'nodeId', value: 'nodeId',
@ -97,8 +101,8 @@ const defaultProps = {
const message = useMessage() const message = useMessage()
const searchForm = ref({ const searchForm = ref({
subject: '', meetingSubject: undefined,
status: 1, status: '1',
dateRange: [], dateRange: [],
nodeId: undefined, nodeId: undefined,
pageNo: 1, pageNo: 1,
@ -113,7 +117,7 @@ onMounted(() => {
const peroidList = ref([]) const peroidList = ref([])
function getOptions() { function getOptions() {
// OKR // OKR
getAllNodeTree().then((resp) => { getAllNodeTree().then((resp) => {
peroidList.value = listToTree(resp?.tree || [], { peroidList.value = listToTree(resp?.tree || [], {
id: 'nodeId', id: 'nodeId',
@ -132,36 +136,29 @@ const handleSearch = () => {
function getList() { function getList() {
loading.value = true loading.value = true
// //
setTimeout(() => { try {
// const params = { ...searchForm.value }
tableList.value = [ if (params.dateRange && params.dateRange.length) {
{ params.startTime = params.dateRange[0] + ' 00:00:00'
id: 1, params.endDate = params.dateRange[1] + ' 23:59:59'
subject: 'OKR会议', delete params.dateRange
startDate: '2023-10-01 10:00', } else {
address: '会议室A', delete params.startTime
expectEndDate: '2023-10-01 11:00', delete params.endDate
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: '已结束'
} }
] MeetingApi.getMeetingPage(params)
total.value = tableList.value.length .then((resp) => {
tableList.value = resp.list || []
total.value = resp.total || 0
})
.finally(() => {
loading.value = false
})
} catch (error) {
console.error('获取会议列表失败:', error)
loading.value = false loading.value = false
}, 1000) }
} }
const router = useRouter() const router = useRouter()
@ -194,14 +191,10 @@ const handleDetail = (id) => {
const handleCancel = async (row) => { const handleCancel = async (row) => {
try { try {
await message.confirm('是否确认取消该会议?') await message.confirm('是否确认取消该会议?')
// //
setTimeout(() => { await MeetingApi.cancelMeeting({ meetingId: row.meetingId })
console.log(row) message.success('会议取消成功')
getList() //
message.success('会议已取消')
//
getList()
}, 500)
} catch (error) { } catch (error) {
console.log('取消操作被用户拒绝', error) console.log('取消操作被用户拒绝', error)
} }

Loading…
Cancel
Save