ss-oa-manage-web/src/views/OKR/Management/Components/ObjectList.vue

<template>
  <div style="height: 100vh">
    <div class="flex items-center">
      <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" />
            <span class="text-14px ml-10px" style="color: #aaa">
              {{ searchForm.peroidName ? searchForm.peroidName : '选择周期' }}
            </span>
          </div>
        </template>
        <div>
          <div class="mt-10px" style="height: 400px">
            <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>

    <vue3-tree-org :data="dataList" center collapsable @on-node-click="handleClickNode">
      <template #default="{ node }">
        <div style="cursor: pointer">
          <div class="tree-org-node__text node-label">
            <el-popover placement="right" title="目标" width="270px" trigger="hover">
              <template #reference>
                <div>
                  <div style="max-height: 40px; overflow: hidden">{{ node.label }}</div>
                  <div class="tip"> 目标数： 3</div>
                </div>
              </template>
              <template #default>
                <div style="font-size: 0.875rem; line-height: 1.5">
                  <div v-for="i in 3" :key="i" class="mt-5">
                    <span style="color: #aaa">0%</span>
                    <span style="margin-left: 0.5rem">
                      成交数达到10个，且订单的利润不能低于成交价的30%
                    </span>
                  </div>
                </div>
              </template>
            </el-popover>
          </div>
          <div class="p-5px">
            <el-progress type="line" :percentage="80" text-inside :stroke-width="12" />
          </div>
        </div>
      </template>
    </vue3-tree-org>
    <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
    <DialogOkrInfo ref="dialogOkrInfo" @close="openOkr" />
  </div>
</template>

<script setup name="ObjectList">
import { Vue3TreeOrg } from 'vue3-tree-org'
import 'vue3-tree-org/lib/vue3-tree-org.css'
import DialogOkr from './DialogOkr.vue'
import DialogOkrInfo from './DialogOkrInfo.vue'

const dataList = ref({
  id: 1,
  label: '寻驾全年目标',
  noDragging: true,
  disabled: true,
  children: [
    {
      id: 2,
      pid: 1,
      label: '1月',
      noDragging: true,
      disabled: true,
      children: [
        { id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
        { id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
        { id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
        { id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
      ]
    },
    {
      id: 3,
      pid: 1,
      label: '2月',
      noDragging: true,
      disabled: true,
      children: [
        { id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
        { id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
        { id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
        { id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
      ]
    },
    {
      id: 4,
      pid: 1,
      label: '3月',
      noDragging: true,
      disabled: true,
      children: [
        { id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
        { id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
        { id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
        { id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
      ]
    }
  ]
})

const searchForm = ref({
  peroidName: '',
  peroidId: null
})

const peroidList = ref([])

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) {
  if (Array.isArray(data)) {
    data.forEach((item) => {
      item.expand = val
      if (item.children) {
        toggleExpand(item.children, val)
      }
    })
  } else {
    data.expand = val
    if (data.children) {
      toggleExpand(data.children, val)
    }
  }
}

toggleExpand(dataList.value, true)

const dialogOkr = ref(null)
const okrId = ref(null)
function handleClickNode(node, data) {
  okrId.value = data.id
  openOkr()
}

function openOkr() {
  okrId.value && dialogOkr.value.open(okrId.value)
}

const dialogOkrInfo = ref(null)
function handleAddNode() {
  okrId.value = null
  dialogOkrInfo.value.open('create', null)
}

function handleEditOkr() {
  dialogOkr.value.close()
  dialogOkrInfo.value.open('update', 1)
}
</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;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}
.tip {
  position: relative;
  color: #aaa;
  font-size: 0.875rem;
}
:deep(.el-progress-bar__innerText) {
  display: block;
  font-size: 0.75rem !important;
}
:deep(.el-overlay-dialog) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>