sc

src/views/OKR/Meeting/MeetingInfo.vue

@@ -3,7 +3,10 @@
     <!-- <el-affix postion="top" :offset="95" v-if="!isDetail"> -->
     <div class="flex justify-between mb-4 bg-white" v-if="!isDetail">
       <b class="text-20px">{{ form.meetingId ? '修改会议' : '新增会议' }}</b>
-      <el-button type="success" @click="submit()">保存</el-button>
+      <div>
+        <el-button @click="submit()">保存至草稿</el-button>
+        <el-button type="success" @click="submit()">保存</el-button>
+      </div>
     </div>
     <!-- </el-affix> -->
     <el-form
@@ -76,7 +79,6 @@
             <el-select
               v-model="form.expectUsers"
               placeholder="选择参会人员"
-              clearable
               filterable
               style="width: 100%"
               multiple
@@ -87,7 +89,7 @@
                 :key="item.id"
                 :label="item.name"
                 :value="item.id"
-                :disabled="item.status == 1"
+                :disabled="item.status == 1 || item.id == userStore.getUser.id"
               />
             </el-select>
           </el-form-item>
@@ -114,26 +116,108 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24">
-          <el-form-item label="会议内容" prop="meetingContent">
+          <el-tabs v-model="currentUserId" tab-position="top">
+            <el-tab-pane
+              v-for="item in form.contentList"
+              :key="item.id"
+              :label="item.name"
+              :name="item.id"
+              @click="userTabChange(item)"
+            />
+          </el-tabs>
+          <el-tabs v-model="currentContentId" tab-position="left" addable @edit="handleTabsEdit">
+            <el-tab-pane
+              v-for="(item, index) in form.contentList.find((it) => it.id == currentUserId)
+                ?.contentArr"
+              :key="item.id"
+              :label="item.title"
+              :name="item.id"
+              :closable="index > 0"
+            >
+              <div v-if="!!isDetail" v-dompurify-html="item.content" class="w-full"></div>
+              <Editor v-else v-model="item.content" height="500px" style="width: 100%" />
+            </el-tab-pane>
+          </el-tabs>
+
+          <!-- <el-form-item label="会议内容" prop="meetingContent">
             <div v-if="!!isDetail" v-dompurify-html="form.meetingContent" class="w-full"></div>
             <Editor v-else v-model="form.meetingContent" height="500px" style="width: 100%" />
-          </el-form-item>
+          </el-form-item> -->
         </el-col>
         <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" v-if="!!form.meetingId">
-          <el-form-item label="会议纪要" prop="meetingSummary" label-width="80px">
+          <div v-if="!!isDetail" v-dompurify-html="form.meetingSummary" class="w-full"></div>
-            <!-- <div v-if="!!isDetail" v-dompurify-html="form.meetingSummary" class="w-full"></div>
+          <div v-else>
-            <Editor v-else v-model="form.meetingSummary" height="500px" /> -->
+            <el-tabs v-model="summaryIdx" addable @edit="meetingSummaryEdit">
-            <div v-if="!!isDetail" class="w-full">{{ form.meetingSummary }}</div>
+              <el-tab-pane
-            <el-input
+                v-for="(item, index) in form.meetingList"
+                :key="index"
+                :label="`会议纪要${index || ''}`"
+                :name="index"
+                :closable="index > 0"
+              >
+                <Editor
+                  v-model="item.meetingSummary"
+                  :toolbarConfig="toolbarConfig"
+                  height="300px"
+                  placeholder="请输入会议纪要"
+                  style="width: 100%"
+                />
+                <div class="mt-10px">
+                  <el-form-item label="是否创建待办" label-width="auto">
+                    <el-radio-group v-model="item.createWait">
+                      <el-radio :label="true" :value="true"> 创建待办 </el-radio>
+                      <el-radio :label="false" :value="false"> 不创建待办 </el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </div>
+                <div class="flex items-center" v-if="item.createWait">
+                  <el-select
+                    class="flex-1"
+                    v-model="item.userIdList"
+                    placeholder="选择执行人"
+                    clearable
+                    filterable
+                    multiple
+                  >
+                    <el-option
+                      v-for="it in userOptions"
+                      :key="it.id"
+                      :label="it.name"
+                      :value="it.id"
+                      :disabled="it.status == 1"
+                    />
+                  </el-select>
+                  <el-date-picker
+                    class="flex-1 ml-10px"
+                    v-model="item.endDate"
+                    type="date"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                    placeholder="选择截止时间"
+                  />
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+            <el-divider />
+            <div class="text-black text-12px">
+              注：如果选择创建待办，请选择执行人及截止日期，默认每天9:00循环提醒，可于待办中修改
+            </div>
+            <div class="mt-10px">
+              <el-form-item label="会议纪要发送至群聊：" label-width="auto">
+                <el-input v-model="form.groupName" placeholder="请输入群聊名称" />
+              </el-form-item>
+            </div>
+          </div>
+          <!-- <el-form-item label="会议纪要" prop="meetingSummary" label-width="80px">
+            <div v-if="!!isDetail" v-dompurify-html="form.meetingSummary" class="w-full"></div>
+            <Editor
               v-else
               v-model="form.meetingSummary"
-              type="textarea"
+              :toolbarConfig="toolbarConfig"
-              placeholder="请输入会议纪要"
+              height="300px"
-              :maxlength="-1"
+              style="width: 100%"
-              :show-word-limit="false"
-              :autosize="{ minRows: 20 }"
             />
-          </el-form-item>
+          </el-form-item> -->
         </el-col>
       </el-row>
     </el-form>
@@ -147,10 +231,12 @@ import * as MeetingApi from '@/api/okr/meeting'
 import { formatDate } from '@/utils/formatTime'
 import { getEmployeeSimpleList } from '@/api/pers/employee'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useUserStore } from '@/store/modules/user'
 
 const route = useRoute()
 const message = useMessage()
 const tagsViewStore = useTagsViewStore()
+const userStore = useUserStore()
 
 const defaultProps = {
   value: 'nodeId',
@@ -159,6 +245,13 @@ const defaultProps = {
 }
 
 const isDetail = route.query.isDetail
+const currentUserId = ref(undefined)
+const currentContentId = ref('') // 默认选中第一个标签页
+const summaryIdx = ref(0) // 会议纪要的索引
+
+const toolbarConfig = {
+  toolbarKeys: []
+}
 
 onMounted(async () => {
   await getOptions()
@@ -166,7 +259,20 @@ onMounted(async () => {
     // 这里可以调用API获取会议详情数据
     getMeetingInfo(route.params.id)
   } else {
-    console.error('会议不存在')
+    form.value.contentList = [
+      {
+        id: userStore.getUser.id + '',
+        name: userStore.getUser.nickname,
+        contentArr: [
+          {
+            id: crypto.randomUUID(),
+            title: '主要内容',
+            content: ''
+          }
+        ]
+      }
+    ]
+    currentContentId.value = form.value.contentList[0].contentArr[0].id
   }
 })
 
@@ -180,6 +286,8 @@ function getOptions() {
         children: 'children'
       })
       userOptions.value = employeeResp.map((it) => ({ ...it, id: it.id + '' }))
+      form.value.expectUsers = [userStore.getUser.id + ''] // 默认添加当前用户为预约参会人员
+      currentUserId.value = userStore.getUser.id + '' // 默认选中当前用户
       // handleUserChange()
     })
     .catch((error) => {
@@ -211,7 +319,9 @@ const form = ref({
   status: '1',
   meetingContent: '',
   meetingSummary: '',
-  absentReason: ''
+  absentReason: '',
+  contentList: [],
+  meetingList: []
 })
 const rules = {
   meetingSubject: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],
@@ -245,9 +355,17 @@ const getMeetingInfo = async (meetingId) => {
         startTime: formatDate(resp.startTime, 'YYYY-MM-DD HH:mm'),
         expectEndTime: formatDate(resp.expectEndTime, 'YYYY-MM-DD HH:mm'),
         expectUsers: resp.expectUsers || [],
-        actualUsers: resp.actualUsers || []
+        actualUsers: resp.actualUsers || [],
+        meetingList: resp.meetingList || [
+          {
+            meetingSummary: resp.meetingSummary || '',
+            userIdList: [],
+            endDate: '',
+            createWait: true
+          }
+        ]
       }
-      handleUserChange()
+      handleUserChange(resp.expectUsers)
     }
   } catch (error) {
     loading.value = false
@@ -255,7 +373,65 @@ const getMeetingInfo = async (meetingId) => {
   }
 }
 
-function handleUserChange() {
+function userTabChange(val) {
+  currentContentId.value = val.contentArr[0].id
+}
+
+function handleTabsEdit(targetName, action) {
+  if (action === 'add') {
+    form.value.contentList.forEach((item) => {
+      if (item.id === currentUserId.value) {
+        item.contentArr.push({
+          id: crypto.randomUUID(),
+          title: '次要内容',
+          content: ''
+        })
+      }
+    })
+  } else if (action === 'remove') {
+    form.value.contentList.forEach((item) => {
+      if (item.id === currentUserId.value) {
+        const idx = item.contentArr.findIndex((item) => item.id == targetName)
+        item.contentArr.splice(idx, 1)
+        // 如果删除的是当前选中的标签页，则切换到下一个标签页
+        if (currentContentId.value === targetName) {
+          currentContentId.value = item.contentArr[idx - 1]?.id || item.contentArr[idx + 1]?.id
+        }
+      }
+    })
+    const tabs = editableTabs.value
+    let activeName = editableTabsValue.value
+    if (activeName === targetName) {
+      tabs.forEach((tab, index) => {
+        if (tab.name === targetName) {
+          const nextTab = tabs[index + 1] || tabs[index - 1]
+          if (nextTab) {
+            activeName = nextTab.name
+          }
+        }
+      })
+    }
+
+    editableTabsValue.value = activeName
+    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
+  }
+}
+
+function meetingSummaryEdit(targetName, action) {
+  if (action === 'add') {
+    form.value.meetingList.push({
+      meetingSummary: '',
+      userIdList: [],
+      endDate: '',
+      createWait: true
+    })
+  } else if (action === 'remove') {
+    form.value.meetingList.splice(targetName, 1)
+    summaryIdx.value = 0
+  }
+}
+
+function handleUserChange(val) {
   // 当预约参会人员变化时，更新实际参会人员选项
   expectUserOptions.value = userOptions.value.filter((user) =>
     form.value.expectUsers.some((it) => it == user.id)
@@ -263,6 +439,26 @@ function handleUserChange() {
   if (!isDetail) {
     form.value.actualUsers = [...form.value.expectUsers]
   }
+  // 先过滤掉不存在的参会人员
+  form.value.contentList = form.value.contentList.filter((item) => {
+    return val.some((it) => it == item.id)
+  })
+  // 再补充新增的
+  val.map((item) => {
+    if (!form.value.contentList.some((it) => it.id == item)) {
+      form.value.contentList.push({
+        id: item,
+        name: userOptions.value.find((it) => it.id == item).name,
+        contentArr: [
+          {
+            id: crypto.randomUUID(),
+            title: '主要内容',
+            content: ''
+          }
+        ]
+      })
+    }
+  })
 }
 
 const router = useRouter()