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

<template>
  <div style="height: 100vh">
    <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 }
      ]
    }
  ]
})

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() {
  dialogOkr.value.open(okrId.value)
}

const dialogOkrInfo = ref(null)
function handleEditOkr() {
  dialogOkr.value.close()
  dialogOkrInfo.value.open('update', 1)
}
</script>

<style lang="scss" scoped>
.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;
}
: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>