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">
        <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">
          <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,
  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) => {
      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)
}

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

const dialogOkrInfo = ref(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;
}
: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>