ss-oa-manage-web/src/views/OKR/Meeting/MeetingInfo.vue

<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 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-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">
            <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">
            <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">
            <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>
    </el-form>
  </div>
</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获取会议详情数据
    getMeetingInfo()
  } else {
    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: '',
  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: '未开始',
      content: '<p>会议内容示例</p> <p><img src="https://picsum.photos/200/300" alt=""></p>',
      minutes: '<p>会议纪要示例</p>'
    }
    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>