sc

src/router/modules/static.ts

@@ -39,11 +39,11 @@ const staticRouter: AppCustomRouteRecordRaw[] = [
       {
         icon: 'ep:data-line',
         path: 'okr-analysis',
-        name: 'Okr统计',
+        name: 'OKR统计',
         componentName: 'OkrAnalysis',
         component: 'OKR/Analysis/index',
         meta: {
-          title: 'Okr统计'
+          title: 'OKR统计'
         },
         visible: true,
         alwaysShow: true,

src/views/OKR/Meeting/MeetingInfo.vue

@@ -3,7 +3,7 @@
     <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>
+        <el-button type="success" @click="submit()">保存</el-button>
       </div>
     </el-affix>
     <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
@@ -14,9 +14,16 @@
           </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-tree-select
+            v-model="form.nodeId"
+            :data="peroidList"
+            :props="defaultProps"
+            :render-after-expand="false"
+            :default-expand-all="false"
+            check-strictly
+            placeholder="选择OKR节点"
+            style="width: 100%"
+          />
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
           <el-form-item label="会议时间" prop="startDate">
@@ -97,13 +104,15 @@
       </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 label="会议内容:" prop="content">
+            <div v-if="isDetail" v-dompurify-html="form.content" class="w-full"></div>
+            <Editor v-else 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 label="会议纪要:" prop="minutes">
+            <div v-if="isDetail" v-dompurify-html="form.minutes" class="w-full"></div>
+            <Editor v-else v-model="form.minutes" height="500px" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -112,9 +121,20 @@
 </template>
 
 <script setup name="MeetingInfo">
+import { listToTree } from '@/utils/tree'
+import { getAllNodeTree } from '@/api/okr/okr'
+
 const route = useRoute()
+const defaultProps = {
+  value: 'nodeId',
+  label: 'nodeName',
+  children: 'children'
+}
+
+const isDetail = route.query.isDetail
 
 onMounted(() => {
+  getOptions()
   if (route.params.id && route.params.id != 0) {
     // 模拟获取会议详情
     // 这里可以调用API获取会议详情数据
@@ -123,6 +143,19 @@ onMounted(() => {
     console.error('会议ID不存在')
   }
 })
+
+const peroidList = ref([])
+function getOptions() {
+  // 模拟获取OKR节点数据
+  getAllNodeTree().then((resp) => {
+    peroidList.value = listToTree(resp?.tree || [], {
+      id: 'nodeId',
+      pid: 'parentId',
+      children: 'children'
+    })
+  })
+}
+
 const form = ref({
   id: 0,
   subject: '',
@@ -175,7 +208,9 @@ const getMeetingInfo = () => {
       expectUsers: ['张三', '李四', '王五'],
       actualUsers: ['张三', '李四'],
       okrNodeName: 'OKR节点1',
-      status: '未开始'
+      status: '未开始',
+      content: '<p>会议内容示例</p> <p><img src="https://picsum.photos/200/300" alt=""></p>',
+      minutes: '<p>会议纪要示例</p>'
     }
     handleUserChange()
   }, 1000)

src/views/OKR/Meeting/index.vue

@@ -3,10 +3,10 @@
     <!-- 搜索条件：主题、会议状态、会议时间（时间段）、选择OKR节点 -->
     <el-form :model="searchForm" inline label-width="0">
       <el-form-item>
-        <el-input v-model="searchForm.subject" placeholder="会议主题" />
+        <el-input v-model="searchForm.subject" placeholder="会议主题" style="width: 200px" />
       </el-form-item>
       <el-form-item>
-        <el-select v-model="searchForm.status" placeholder="会议状态" style="width: 120px">
+        <el-select v-model="searchForm.status" placeholder="会议状态" style="width: 150px">
           <el-option label="未开始" :value="1" />
           <el-option label="已结束" :value="2" />
           <el-option label="已取消" :value="3" />
@@ -23,10 +23,17 @@
         />
       </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-tree-select
+          v-model="searchForm.nodeId"
+          :data="peroidList"
+          :props="defaultProps"
+          :render-after-expand="false"
+          :default-expand-all="false"
+          check-strictly
+          placeholder="选择OKR节点"
+          style="width: 300px"
+          @change="handleSearch"
+        />
       </el-form-item>
       <el-form-item>
         <el-button @click="handleSearch">查询</el-button>
@@ -54,6 +61,7 @@
       </el-table-column>
       <el-table-column fixed="right" label="操作" width="140">
         <template #default="{ row }">
+          <template v-if="row.status == '未开始'">
             <el-button type="primary" style="padding: 0" text @click="handleEdit(row.id)">
               修改
             </el-button>
@@ -61,6 +69,10 @@
               取消
             </el-button>
           </template>
+          <el-button v-else type="primary" style="padding: 0" text @click="handleDetail(row.id)">
+            详情
+          </el-button>
+        </template>
       </el-table-column>
     </el-table>
     <Pagination
@@ -73,21 +85,44 @@
 </template>
 
 <script setup name="Meeting">
+import { listToTree } from '@/utils/tree'
+// import { formatDate } from '@/utils/formatTime'
+import { getAllNodeTree } from '@/api/okr/okr'
+
+const defaultProps = {
+  value: 'nodeId',
+  label: 'nodeName',
+  children: 'children'
+}
 const message = useMessage()
 
 const searchForm = ref({
   subject: '',
   status: 1,
   dateRange: [],
+  nodeId: undefined,
   pageNo: 1,
   pageSize: 50
 })
 const total = ref(0)
 
 onMounted(() => {
+  getOptions()
   handleSearch()
 })
 
+const peroidList = ref([])
+function getOptions() {
+  // 模拟获取OKR节点数据
+  getAllNodeTree().then((resp) => {
+    peroidList.value = listToTree(resp?.tree || [], {
+      id: 'nodeId',
+      pid: 'parentId',
+      children: 'children'
+    })
+  })
+}
+
 const loading = ref(false)
 const tableList = ref([])
 const handleSearch = () => {
@@ -144,6 +179,18 @@ const handleEdit = (id) => {
   })
 }
 
+const handleDetail = (id) => {
+  router.push({
+    name: `MeetingInfo`,
+    params: {
+      id
+    },
+    query: {
+      isDetail: 1
+    }
+  })
+}
+
 const handleCancel = async (row) => {
   try {
     await message.confirm('是否确认取消该会议？')