From 0409e9ef113e44d09343938ef41eb04713cea3a2 Mon Sep 17 00:00:00 2001
From: qsh <>
Date: Tue, 3 Jun 2025 18:12:32 +0800
Subject: [PATCH] sc

---
 src/router/modules/static.ts          |  39 +++--
 src/views/OKR/Meeting/MeetingInfo.vue | 206 ++++++++++++++++++++++++++
 src/views/OKR/Meeting/index.vue       | 164 ++++++++++++++++++++
 3 files changed, 396 insertions(+), 13 deletions(-)
 create mode 100644 src/views/OKR/Meeting/MeetingInfo.vue
 create mode 100644 src/views/OKR/Meeting/index.vue

diff --git a/src/router/modules/static.ts b/src/router/modules/static.ts
index 0faa34c..1e1c73a 100644
--- a/src/router/modules/static.ts
+++ b/src/router/modules/static.ts
@@ -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',
diff --git a/src/views/OKR/Meeting/MeetingInfo.vue b/src/views/OKR/Meeting/MeetingInfo.vue
new file mode 100644
index 0000000..820ea27
--- /dev/null
+++ b/src/views/OKR/Meeting/MeetingInfo.vue
@@ -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>
diff --git a/src/views/OKR/Meeting/index.vue b/src/views/OKR/Meeting/index.vue
new file mode 100644
index 0000000..a7b2168
--- /dev/null
+++ b/src/views/OKR/Meeting/index.vue
@@ -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>