sc

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-form :model="form" ref="formRef" :rules="rules" label-width="0">
-          <el-row :gutter="20">
+          <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-form-item prop="name">
-                <el-input v-model="form.name" placeholder="请输入" />
+                <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"
+                  format="YYYY-MM-DD"
-                  value-format="yyyy-MM-dd"
+                  value-format="YYYY-MM-DD"
-                  placeholder="选择日期时间"
+                  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"
+                  format="YYYY-MM-DD"
-                  value-format="yyyy-MM-dd"
+                  value-format="YYYY-MM-DD"
-                  placeholder="选择日期时间"
+                  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,12 +79,43 @@
                 </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>
+        <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 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>
@@ -103,6 +135,16 @@
                           :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>
@@ -170,6 +212,16 @@
                               :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>
@@ -179,37 +231,45 @@
               </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">
+                <el-table-column label="开始日期" width="160px">
                   <template #default="{ row }">
                     <el-date-picker
                       v-model="row.createTime"
                       type="date"
-                    format="yyyy-MM-dd"
+                      format="YYYY-MM-DD"
-                    value-format="yyyy-MM-dd"
+                      value-format="YYYY-MM-DD"
                       placeholder="选择日期时间"
+                      style="width: 130px"
                     />
                   </template>
                 </el-table-column>
-              <el-table-column label="截止日期" width="250px">
+                <el-table-column label="截止日期" width="160px">
                   <template #default="{ row }">
                     <el-date-picker
                       v-model="row.endTime"
                       type="date"
-                    format="yyyy-MM-dd"
+                      format="YYYY-MM-DD"
-                    value-format="yyyy-MM-dd"
+                      value-format="YYYY-MM-DD"
                       placeholder="选择日期时间"
+                      style="width: 130px"
                     />
                   </template>
                 </el-table-column>
-              <el-table-column label="执行人">
+                <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"
@@ -237,6 +297,7 @@
             </el-tab-pane>
           </el-tabs>
         </div>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -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: '',

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;