sc

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;