sc

src/views/OKR/Management/Components/ObjectList.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="height: 100vh">
     <div class="flex items-center">
-      <el-popover placement="bottom" width="500px" trigger="click">
+      <el-popover placement="bottom" width="500px" trigger="click" @show="handleSearchPeroid">
         <template #reference>
           <div class="flex items-center border-1px w-300px h-32px p-10px peroid-select">
             <Icon icon="ep:calendar" style="color: #aaa" />
@@ -11,46 +11,19 @@
           </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>
+            <el-table :data="peroidList" @row-click="handleSelectPeroid">
+              <el-table-column label="节点名称">
+                <template #default="{ row }">
+                  <el-radio v-model="searchForm.peroidId" :label="row.id">{{ row.name }}</el-radio>
+                </template>
+              </el-table-column>
+              <el-table-column label="开始日期" prop="startDate" width="120" />
+              <el-table-column label="截止日期" prop="endDate" width="120" />
+            </el-table>
           </div>
         </div>
       </el-popover>
-
       <el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button>
     </div>
 
@@ -144,27 +117,45 @@ const dataList = ref({
 
 const searchForm = ref({
   peroidName: '',
-  peroidId: null,
-  year: new Date().getFullYear()
+  peroidId: null
 })
 
-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'
-  }
-])
+const peroidList = ref([])
 
-function peroidChange(val) {
-  searchForm.value.peroidName = peroidList.value.find((it) => it.id == val).name
+onMounted(() => {
+  handleSearchPeroid()
+  if (!searchForm.value.peroidId && peroidList.value.length) {
+    searchForm.value.peroidId = peroidList.value[0].id
+    searchForm.value.peroidName = peroidList.value[0].name
+  }
+  handleSearchOkr()
+})
+
+async function handleSearchPeroid() {
+  peroidList.value = [
+    {
+      id: 1,
+      name: '2025年寻驾okr',
+      startDate: '2022-01-01',
+      endDate: '2022-01-31'
+    },
+    {
+      id: 2,
+      name: '2024年寻驾okr',
+      startDate: '2022-02-01',
+      endDate: '2022-02-28'
+    }
+  ]
+}
+
+function handleSelectPeroid(row) {
+  searchForm.value.peroidName = row.name
+  searchForm.value.peroidId = row.id
+  handleSearchOkr()
+}
+
+function handleSearchOkr() {
+  console.log(searchForm.value)
 }
 
 function toggleExpand(data, val) {
@@ -196,12 +187,12 @@ function openOkr() {
   okrId.value && dialogOkr.value.open(okrId.value)
 }
 
+const dialogOkrInfo = ref(null)
 function handleAddNode() {
   okrId.value = null
   dialogOkrInfo.value.open('create', null)
 }
 
-const dialogOkrInfo = ref(null)
 function handleEditOkr() {
   dialogOkr.value.close()
   dialogOkrInfo.value.open('update', 1)
@@ -239,19 +230,4 @@ function handleEditOkr() {
   justify-content: center;
   align-items: center;
 }
-:deep(.dialog-okr) {
-  width: 94vw;
-  height: 94vh;
-  max-width: 1800px;
-  max-height: 1000px;
-  margin: 0;
-}
-:deep(.dialog-okr .el-dialog__header) {
-  padding: 0 !important;
-}
-:deep(.okr-info-dialog) {
-  .el-dialog__body {
-    padding-top: 0;
-  }
-}
 </style>