diff --git a/src/router/modules/static.ts b/src/router/modules/static.ts index 1e1c73a..1f8a4f9 100644 --- a/src/router/modules/static.ts +++ b/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, diff --git a/src/views/OKR/Meeting/MeetingInfo.vue b/src/views/OKR/Meeting/MeetingInfo.vue index 820ea27..78083ba 100644 --- a/src/views/OKR/Meeting/MeetingInfo.vue +++ b/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) diff --git a/src/views/OKR/Meeting/index.vue b/src/views/OKR/Meeting/index.vue index a7b2168..e956673 100644 --- a/src/views/OKR/Meeting/index.vue +++ b/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,11 +61,16 @@ </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)"> - 取消 + <template v-if="row.status == '未开始'"> + <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-button v-else type="primary" style="padding: 0" text @click="handleDetail(row.id)"> + 详情 </el-button> </template> </el-table-column> @@ -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('是否确认取消该会议?')