From a712e3f85fc0087a25fff3e921177fc317b4086d Mon Sep 17 00:00:00 2001
From: qsh <>
Date: Wed, 19 Feb 2025 11:25:35 +0800
Subject: [PATCH] sc

---
 .../Management/Components/DialogOkrInfo.vue   | 391 ++++++++++--------
 .../OKR/Management/Components/ObjectList.vue  |  94 ++++-
 2 files changed, 323 insertions(+), 162 deletions(-)

diff --git a/src/views/OKR/Management/Components/DialogOkrInfo.vue b/src/views/OKR/Management/Components/DialogOkrInfo.vue
index 4a08730..3fd15a7 100644
--- a/src/views/OKR/Management/Components/DialogOkrInfo.vue
+++ b/src/views/OKR/Management/Components/DialogOkrInfo.vue
@@ -9,7 +9,7 @@
   >
     <template #header>
       <div class="dialog-okr-header">
-        <div class="flex-1 flex items-center" style="line-height: 50px"> 修改Okr </div>
+        <div class="flex-1 flex items-center" style="line-height: 50px"> {{ title }} </div>
         <div class="flex items-center">
           <el-button type="primary" link :disabled="formLoading" @click="handleSave">
             保存
@@ -20,48 +20,49 @@
     </template>
     <template #default>
       <div class="dialog-okr-body">
-        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
-          <el-row :gutter="20">
+        <el-form :model="form" ref="formRef" :rules="rules" label-width="0">
+          <el-row :gutter="10">
             <el-col :span="4" :offset="0">
-              <el-form-item label="父节点" prop="parentId">
+              <el-form-item prop="parentId">
                 <el-tree-select
                   v-model="form.parentId"
                   :data="parentNodeList"
                   check-strictly
                   :props="{ value: 'id', label: 'label', children: 'children' }"
                   :render-after-expand="false"
+                  placeholder="父节点"
                 />
               </el-form-item>
             </el-col>
             <el-col :span="4" :offset="0">
-              <el-form-item label="节点名称" prop="name">
-                <el-input v-model="form.name" placeholder="请输入" />
+              <el-form-item prop="name">
+                <el-input v-model="form.name" placeholder="请输入节点名称" />
               </el-form-item>
             </el-col>
             <el-col :span="4" :offset="0">
-              <el-form-item label="开始日期" prop="createTime">
+              <el-form-item prop="createTime">
                 <el-date-picker
                   v-model="form.createTime"
                   type="date"
-                  format="yyyy-MM-dd"
-                  value-format="yyyy-MM-dd"
-                  placeholder="选择日期时间"
+                  format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD"
+                  placeholder="开始日期"
                 />
               </el-form-item>
             </el-col>
             <el-col :span="4" :offset="0">
-              <el-form-item label="截止日期" prop="endTime">
+              <el-form-item prop="endTime">
                 <el-date-picker
                   v-model="form.endTime"
                   type="date"
-                  format="yyyy-MM-dd"
-                  value-format="yyyy-MM-dd"
-                  placeholder="选择日期时间"
+                  format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD"
+                  placeholder="截止日期"
                 />
               </el-form-item>
             </el-col>
             <el-col :span="4" :offset="0">
-              <el-form-item label="执行人" prop="executor">
+              <el-form-item prop="executor">
                 <el-select
                   v-model="form.executor"
                   placeholder="选择执行人，可多选"
@@ -78,164 +79,224 @@
                 </el-select>
               </el-form-item>
             </el-col>
+            <el-col :span="4" :offset="0">
+              <el-form-item prop="persission">
+                <el-select v-model="form.persission" placeholder="选择权限" clearable filterable>
+                  <el-option label="公开" :value="0" />
+                  <el-option label="仅上级可见" :value="1" />
+                </el-select>
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-form>
-        <el-tabs v-model="okrKey">
-          <el-tab-pane label="目标/关键成果" name="okr">
-            <div>
-              <div class="flex items-center w-full" v-for="(item, i) in objectList" :key="item.id">
-                <div class="flex-1 w-100px">
-                  <div class="flex items-center">
-                    <el-tag type="success" class="mr-10px">O{{ i + 1 }}</el-tag>
-                    <el-input v-model="item.name" placeholder="目标名称" class="flex-1 w-150px" />
-                    <el-select
-                      v-model="item.objExecutor"
-                      placeholder="选择执行人，可多选"
-                      multiple
-                      clearable
-                      filterable
-                      style="min-width: 240px; margin-left: 10px"
-                    >
-                      <el-option
-                        v-for="it in userOptions"
-                        :key="it.id"
-                        :label="it.name"
-                        :value="it.id"
-                      />
-                    </el-select>
-                    <div class="ml-10px">
-                      <el-button type="primary" text @click="AddKR">新增关键成果</el-button>
-                      <el-button type="danger" text @click="removeObj">删除目标</el-button>
+        <div class="relative">
+          <el-button
+            v-if="okrKey === 'okr'"
+            style="position: absolute; right: 10px; top: 10px"
+            type="primary"
+            size="small"
+            @click="addObjective"
+          >
+            添加目标
+          </el-button>
+          <el-button
+            v-else-if="okrKey === 'childNode'"
+            style="position: absolute; right: 10px; top: 10px"
+            type="primary"
+            size="small"
+            @click="addChildNode"
+          >
+            添加子节点
+          </el-button>
+          <el-tabs v-model="okrKey">
+            <el-tab-pane label="目标/关键成果" name="okr">
+              <div>
+                <div
+                  class="flex items-center w-full"
+                  v-for="(item, i) in objectList"
+                  :key="item.id"
+                >
+                  <div class="flex-1 w-100px">
+                    <div class="flex items-center">
+                      <el-tag type="success" class="mr-10px">O{{ i + 1 }}</el-tag>
+                      <el-input v-model="item.name" placeholder="目标名称" class="flex-1 w-150px" />
+                      <el-select
+                        v-model="item.objExecutor"
+                        placeholder="选择执行人，可多选"
+                        multiple
+                        clearable
+                        filterable
+                        style="min-width: 240px; margin-left: 10px"
+                      >
+                        <el-option
+                          v-for="it in userOptions"
+                          :key="it.id"
+                          :label="it.name"
+                          :value="it.id"
+                        />
+                      </el-select>
+                      <el-select
+                        v-model="item.persission"
+                        placeholder="选择权限"
+                        clearable
+                        filterable
+                        style="width: 120px; margin-left: 10px"
+                      >
+                        <el-option label="公开" :value="0" />
+                        <el-option label="仅上级可见" :value="1" />
+                      </el-select>
+                      <div class="ml-10px">
+                        <el-button type="primary" text @click="AddKR">新增关键成果</el-button>
+                        <el-button type="danger" text @click="removeObj">删除目标</el-button>
+                      </div>
                     </div>
-                  </div>
-                  <div style="background: #f0f3fa; padding-bottom: 15px">
-                    <div class="ml-50px" v-for="(kr, index) in item.children" :key="kr.id">
-                      <div class="flex flex-1 items-center pb-5px pt-5px">
-                        <el-tag class="mr-10px">KR{{ index + 1 }}</el-tag>
-                        <el-select
-                          v-model="kr.id"
-                          placeholder="选择或输入"
-                          filterable
-                          :props="{ value: 'id', label: 'name' }"
-                          allow-create
-                          :reserve-keyword="false"
-                          class="flex-1 w-150px"
-                        >
-                          <el-option
-                            v-for="it in item.children"
-                            :key="it.id"
-                            :label="it.name"
-                            :value="it.id"
+                    <div style="background: #f0f3fa; padding-bottom: 15px">
+                      <div class="ml-50px" v-for="(kr, index) in item.children" :key="kr.id">
+                        <div class="flex flex-1 items-center pb-5px pt-5px">
+                          <el-tag class="mr-10px">KR{{ index + 1 }}</el-tag>
+                          <el-select
+                            v-model="kr.id"
+                            placeholder="选择或输入"
+                            filterable
+                            :props="{ value: 'id', label: 'name' }"
+                            allow-create
+                            :reserve-keyword="false"
+                            class="flex-1 w-150px"
+                          >
+                            <el-option
+                              v-for="it in item.children"
+                              :key="it.id"
+                              :label="it.name"
+                              :value="it.id"
+                            />
+                          </el-select>
+                          <el-button type="danger" text @click="removeKR">删除关键成果</el-button>
+                        </div>
+                        <div class="mt-5px flex items-center">
+                          <el-tree-select
+                            v-model="kr.sourceId"
+                            :data="sourceOptions"
+                            :props="defaultProps"
+                            check-strictly
+                            clearable
+                            filterable
+                            node-key="sourceId"
+                            placeholder="请选择渠道"
                           />
-                        </el-select>
-                        <el-button type="danger" text @click="removeKR">删除关键成果</el-button>
-                      </div>
-                      <div class="mt-5px flex items-center">
-                        <el-tree-select
-                          v-model="kr.sourceId"
-                          :data="sourceOptions"
-                          :props="defaultProps"
-                          check-strictly
-                          clearable
-                          filterable
-                          node-key="sourceId"
-                          placeholder="请选择渠道"
-                        />
-                        <el-radio-group v-model="kr.targetType" class="ml-10px">
-                          <el-radio-button label="value">目标值</el-radio-button>
-                          <el-radio-button label="radio">是/否</el-radio-button>
-                        </el-radio-group>
-
-                        <el-input
-                          v-if="kr.targetType === 'value'"
-                          v-model="kr.targetNum"
-                          type="number"
-                          placeholder="目标值"
-                          class="ml-10px"
-                          style="width: 100px"
-                        />
+                          <el-radio-group v-model="kr.targetType" class="ml-10px">
+                            <el-radio-button label="value">目标值</el-radio-button>
+                            <el-radio-button label="radio">是/否</el-radio-button>
+                          </el-radio-group>
 
-                        <el-select
-                          v-model="kr.objExecutor"
-                          placeholder="选择执行人，可多选"
-                          multiple
-                          clearable
-                          filterable
-                          style="min-width: 240px; margin-left: 10px"
-                        >
-                          <el-option
-                            v-for="it in userOptions"
-                            :key="it.id"
-                            :label="it.name"
-                            :value="it.id"
+                          <el-input
+                            v-if="kr.targetType === 'value'"
+                            v-model="kr.targetNum"
+                            type="number"
+                            placeholder="目标值"
+                            class="ml-10px"
+                            style="width: 100px"
                           />
-                        </el-select>
+
+                          <el-select
+                            v-model="kr.objExecutor"
+                            placeholder="选择执行人，可多选"
+                            multiple
+                            clearable
+                            filterable
+                            style="min-width: 240px; margin-left: 10px"
+                          >
+                            <el-option
+                              v-for="it in userOptions"
+                              :key="it.id"
+                              :label="it.name"
+                              :value="it.id"
+                            />
+                          </el-select>
+                          <el-select
+                            v-model="kr.persission"
+                            placeholder="选择权限"
+                            clearable
+                            filterable
+                            style="width: 120px; margin-left: 10px"
+                          >
+                            <el-option label="公开" :value="0" />
+                            <el-option label="仅上级可见" :value="1" />
+                          </el-select>
+                        </div>
                       </div>
                     </div>
                   </div>
+                  <!-- <div class="w-100px"></div> -->
                 </div>
-                <!-- <div class="w-100px"></div> -->
               </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="子节点" name="childNode">
-            <el-button class="mb-10px" type="primary" @click="addChildNode">新增子节点</el-button>
-
-            <el-table :data="childNodeList">
-              <el-table-column label="名称">
-                <template #default="{ row }">
-                  <el-input v-model="row.name" placeholder="子节点名称" />
-                </template>
-              </el-table-column>
-              <el-table-column label="开始日期" width="250px">
-                <template #default="{ row }">
-                  <el-date-picker
-                    v-model="row.createTime"
-                    type="date"
-                    format="yyyy-MM-dd"
-                    value-format="yyyy-MM-dd"
-                    placeholder="选择日期时间"
-                  />
-                </template>
-              </el-table-column>
-              <el-table-column label="截止日期" width="250px">
-                <template #default="{ row }">
-                  <el-date-picker
-                    v-model="row.endTime"
-                    type="date"
-                    format="yyyy-MM-dd"
-                    value-format="yyyy-MM-dd"
-                    placeholder="选择日期时间"
-                  />
-                </template>
-              </el-table-column>
-              <el-table-column label="执行人">
-                <template #default="{ row }">
-                  <el-select
-                    v-model="row.executor"
-                    placeholder="选择执行人，可多选"
-                    multiple
-                    clearable
-                    filterable
-                    style="width: 100%"
-                  >
-                    <el-option
-                      v-for="item in userOptions"
-                      :key="item.id"
-                      :label="item.name"
-                      :value="item.id"
+            </el-tab-pane>
+            <el-tab-pane label="子节点" name="childNode">
+              <el-table :data="childNodeList">
+                <el-table-column label="名称">
+                  <template #default="{ row }">
+                    <el-input v-model="row.name" placeholder="子节点名称" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="开始日期" width="160px">
+                  <template #default="{ row }">
+                    <el-date-picker
+                      v-model="row.createTime"
+                      type="date"
+                      format="YYYY-MM-DD"
+                      value-format="YYYY-MM-DD"
+                      placeholder="选择日期时间"
+                      style="width: 130px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="截止日期" width="160px">
+                  <template #default="{ row }">
+                    <el-date-picker
+                      v-model="row.endTime"
+                      type="date"
+                      format="YYYY-MM-DD"
+                      value-format="YYYY-MM-DD"
+                      placeholder="选择日期时间"
+                      style="width: 130px"
                     />
-                  </el-select>
-                </template>
-              </el-table-column>
-              <el-table-column fixed="right" label="删除" :width="100">
-                <template #default="{ $index }">
-                  <el-button type="danger" text @click="removeChildNode($index)">删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-tab-pane>
-        </el-tabs>
+                  </template>
+                </el-table-column>
+                <el-table-column label="权限" width="160px">
+                  <template #default="{ row }">
+                    <el-select v-model="row.permission" placeholder="请选择" style="width: 130px">
+                      <el-option label="公开" :value="0" />
+                      <el-option label="仅上级可见" :value="1" />
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column label="执行人" width="300px">
+                  <template #default="{ row }">
+                    <el-select
+                      v-model="row.executor"
+                      placeholder="选择执行人，可多选"
+                      multiple
+                      clearable
+                      filterable
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="item in userOptions"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                      />
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="删除" :width="100">
+                  <template #default="{ $index }">
+                    <el-button type="danger" text @click="removeChildNode($index)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
       </div>
     </template>
   </el-dialog>
@@ -455,6 +516,14 @@ const formRef = ref()
 /** 提交表单 */
 const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调
 
+function addObjective() {
+  objectList.value.push({
+    name: '',
+    objExecutor: [],
+    children: []
+  })
+}
+
 function AddKR() {
   objectList.value.push({
     name: '',
diff --git a/src/views/OKR/Management/Components/ObjectList.vue b/src/views/OKR/Management/Components/ObjectList.vue
index 6e3213f..75d1def 100644
--- a/src/views/OKR/Management/Components/ObjectList.vue
+++ b/src/views/OKR/Management/Components/ObjectList.vue
@@ -1,5 +1,59 @@
 <template>
   <div style="height: 100vh">
+    <div class="flex items-center">
+      <el-popover placement="bottom" width="500px" trigger="click">
+        <template #reference>
+          <div class="flex items-center border-1px w-300px h-32px p-10px peroid-select">
+            <Icon icon="ep:calendar" style="color: #aaa" />
+            <span class="text-14px ml-10px" style="color: #aaa">
+              {{ searchForm.peroidName ? searchForm.peroidName : '选择周期' }}
+            </span>
+          </div>
+        </template>
+        <div>
+          <el-date-picker
+            v-model="searchForm.year"
+            type="year"
+            format="YYYY"
+            value-format="YYYY"
+            :clearable="false"
+            style="width: 100%"
+          />
+          <div class="mt-10px" style="height: 400px">
+            <div class="flex items-center border-bottom-1" style="line-height: 32px">
+              <div class="flex-1">节点名称</div>
+              <div class="w-120px">开始日期</div>
+              <div class="w-120px">截止日期</div>
+            </div>
+            <el-radio-group
+              v-model="searchForm.peroidId"
+              @change="peroidChange"
+              style="width: 100%"
+            >
+              <el-radio
+                v-for="item in peroidList"
+                :key="item.id"
+                :label="item.id"
+                class="h-44px"
+                style="width: 100%"
+              >
+                <div
+                  class="flex items-center border-bottom-1"
+                  style="width: 100%; line-height: 44px"
+                >
+                  <div class="flex-1">{{ item.name }}</div>
+                  <div class="w-120px">{{ item.startDate }}</div>
+                  <div class="w-120px">{{ item.endDate }}</div>
+                </div>
+              </el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+      </el-popover>
+
+      <el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button>
+    </div>
+
     <vue3-tree-org :data="dataList" center collapsable @on-node-click="handleClickNode">
       <template #default="{ node }">
         <div style="cursor: pointer">
@@ -88,6 +142,31 @@ const dataList = ref({
   ]
 })
 
+const searchForm = ref({
+  peroidName: '',
+  peroidId: null,
+  year: new Date().getFullYear()
+})
+
+const peroidList = ref([
+  {
+    id: 1,
+    name: '1月',
+    startDate: '2022-01-01',
+    endDate: '2022-01-31'
+  },
+  {
+    id: 2,
+    name: '2月',
+    startDate: '2022-02-01',
+    endDate: '2022-02-28'
+  }
+])
+
+function peroidChange(val) {
+  searchForm.value.peroidName = peroidList.value.find((it) => it.id == val).name
+}
+
 function toggleExpand(data, val) {
   if (Array.isArray(data)) {
     data.forEach((item) => {
@@ -114,7 +193,12 @@ function handleClickNode(node, data) {
 }
 
 function openOkr() {
-  dialogOkr.value.open(okrId.value)
+  okrId.value && dialogOkr.value.open(okrId.value)
+}
+
+function handleAddNode() {
+  okrId.value = null
+  dialogOkrInfo.value.open('create', null)
 }
 
 const dialogOkrInfo = ref(null)
@@ -125,6 +209,14 @@ function handleEditOkr() {
 </script>
 
 <style lang="scss" scoped>
+.peroid-select {
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover {
+    border-color: var(--el-color-primary-light-5);
+  }
+}
+
 .tree-org-node__text {
   min-width: 200px;
   min-height: 80px;