sc

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

@@ -0,0 +1,165 @@
+<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>