sc
This commit is contained in:
qsh
@@ -4,11 +4,11 @@ VITE_NODE_ENV=development
|
|||||||
VITE_DEV=true
|
VITE_DEV=true
|
||||||
|
|
||||||
# 请求路径
|
# 请求路径
|
||||||
# VITE_BASE_URL='http://118.31.23.45:48080'
|
# VITE_BASE_URL='http://47.98.161.246:48080'
|
||||||
VITE_BASE_URL='http://114.55.169.15:48080'
|
VITE_BASE_URL='http://114.55.169.15:48080'
|
||||||
|
|
||||||
# 上传路径
|
# 上传路径
|
||||||
VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
|
||||||
# VITE_UPLOAD_URL='http://114.55.169.15:48080/admin-api/system/file/upload'
|
# VITE_UPLOAD_URL='http://114.55.169.15:48080/admin-api/system/file/upload'
|
||||||
|
|
||||||
# 接口前缀
|
# 接口前缀
|
||||||
|
|||||||
2
.env.dev
2
.env.dev
@@ -7,7 +7,7 @@ VITE_DEV=false
|
|||||||
VITE_BASE_URL='http://localhost:48080'
|
VITE_BASE_URL='http://localhost:48080'
|
||||||
|
|
||||||
# 上传路径
|
# 上传路径
|
||||||
VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
|
||||||
|
|
||||||
# 接口前缀
|
# 接口前缀
|
||||||
VITE_API_BASEPATH=/oa-api
|
VITE_API_BASEPATH=/oa-api
|
||||||
|
|||||||
@@ -4,10 +4,10 @@ VITE_NODE_ENV=development
|
|||||||
VITE_DEV=true
|
VITE_DEV=true
|
||||||
|
|
||||||
# 请求路径
|
# 请求路径
|
||||||
VITE_BASE_URL='http://118.31.23.45:48080'
|
VITE_BASE_URL='http://47.98.161.246:48080'
|
||||||
|
|
||||||
# 上传路径
|
# 上传路径
|
||||||
VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
|
||||||
|
|
||||||
# 接口前缀
|
# 接口前缀
|
||||||
VITE_API_BASEPATH=/oa-api
|
VITE_API_BASEPATH=/oa-api
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ VITE_DEV=false
|
|||||||
VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn'
|
VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn'
|
||||||
|
|
||||||
# 上传路径
|
# 上传路径
|
||||||
VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
|
||||||
|
|
||||||
# 接口前缀
|
# 接口前缀
|
||||||
VITE_API_BASEPATH=/oa-api
|
VITE_API_BASEPATH=/oa-api
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ VITE_DEV=false
|
|||||||
VITE_BASE_URL='http://localhost:48080'
|
VITE_BASE_URL='http://localhost:48080'
|
||||||
|
|
||||||
# 上传路径
|
# 上传路径
|
||||||
VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
|
||||||
|
|
||||||
# 接口前缀
|
# 接口前缀
|
||||||
VITE_API_BASEPATH=/oa-api
|
VITE_API_BASEPATH=/oa-api
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ VITE_DEV=false
|
|||||||
VITE_BASE_URL='http://localhost:48080'
|
VITE_BASE_URL='http://localhost:48080'
|
||||||
|
|
||||||
# 上传路径
|
# 上传路径
|
||||||
VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
|
||||||
|
|
||||||
# 接口前缀
|
# 接口前缀
|
||||||
VITE_API_BASEPATH=/oa-api
|
VITE_API_BASEPATH=/oa-api
|
||||||
|
|||||||
@@ -72,6 +72,7 @@
|
|||||||
"vue-i18n": "9.2.2",
|
"vue-i18n": "9.2.2",
|
||||||
"vue-router": "^4.2.1",
|
"vue-router": "^4.2.1",
|
||||||
"vue-types": "^5.0.3",
|
"vue-types": "^5.0.3",
|
||||||
|
"vue3-tree-org": "^4.2.2",
|
||||||
"vuedraggable": "^4.1.0",
|
"vuedraggable": "^4.1.0",
|
||||||
"web-storage-cache": "^1.1.1",
|
"web-storage-cache": "^1.1.1",
|
||||||
"xe-utils": "^3.5.7",
|
"xe-utils": "^3.5.7",
|
||||||
|
|||||||
@@ -106,29 +106,41 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// path: '/Basic',
|
path: '/Basic',
|
||||||
// component: Layout,
|
component: Layout,
|
||||||
// name: 'Basic',
|
name: 'Basic',
|
||||||
// meta: {
|
meta: {
|
||||||
// title: '菜单管理'
|
title: '菜单管理'
|
||||||
// },
|
},
|
||||||
// redirect: '/Basic/menu',
|
redirect: '/Basic/menu',
|
||||||
// children: [
|
children: [
|
||||||
// {
|
{
|
||||||
// path: 'menu',
|
path: 'menu',
|
||||||
// component: () => import('@/views/Basic/Menu/index.vue'),
|
component: () => import('@/views/Basic/Menu/index.vue'),
|
||||||
// name: 'Menu',
|
name: 'Menu',
|
||||||
// meta: {
|
meta: {
|
||||||
// canTo: true,
|
canTo: true,
|
||||||
// hidden: true,
|
// hidden: true,
|
||||||
// noTagsView: false,
|
noTagsView: false,
|
||||||
// icon: 'ep:user',
|
icon: 'ep:user',
|
||||||
// title: '菜单管理'
|
title: '菜单管理'
|
||||||
// }
|
}
|
||||||
// }
|
},
|
||||||
// ]
|
{
|
||||||
// },
|
path: 'okr',
|
||||||
|
component: () => import('@/views/OKR/Management/index.vue'),
|
||||||
|
name: 'OkrManagement',
|
||||||
|
meta: {
|
||||||
|
canTo: true,
|
||||||
|
// hidden: true,
|
||||||
|
noTagsView: false,
|
||||||
|
icon: 'ep:user',
|
||||||
|
title: 'Okr管理'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
component: () => import('@/views/Login/Login.vue'),
|
component: () => import('@/views/Login/Login.vue'),
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
:tree-props="{ children: 'userDingAttendanceRespVOList', hasChildren: 'hasChildren' }"
|
:tree-props="{ children: 'userDingAttendanceRespVOList', hasChildren: 'hasChildren' }"
|
||||||
:span-method="spanMethod"
|
:span-method="spanMethod"
|
||||||
>
|
>
|
||||||
<el-table-column label="姓名" min-width="90px">
|
<el-table-column label="姓名" min-width="90px" fixed="left">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<span v-if="row.userDingAttendanceRespVOList && row.userDingAttendanceRespVOList.length">
|
<span v-if="row.userDingAttendanceRespVOList && row.userDingAttendanceRespVOList.length">
|
||||||
<span>{{ row.period }}</span>
|
<span>{{ row.period }}</span>
|
||||||
@@ -67,7 +67,8 @@
|
|||||||
{{ row.needAttendance ? '考勤' : '不考勤' }}
|
{{ row.needAttendance ? '考勤' : '不考勤' }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="shouldWorkDay" label="计薪天数" min-width="90px" />
|
<el-table-column prop="shouldWorkDay" label="应出勤天数" min-width="90px" />
|
||||||
|
<el-table-column prop="paidLeaveDay" label="带薪假天数" min-width="90px" />
|
||||||
<el-table-column label="出勤天数" align="center">
|
<el-table-column label="出勤天数" align="center">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-input-number
|
<el-input-number
|
||||||
@@ -286,8 +287,8 @@ async function getList() {
|
|||||||
function spanMethod({ row, columnIndex }) {
|
function spanMethod({ row, columnIndex }) {
|
||||||
if (row.userDingAttendanceRespVOList && row.userDingAttendanceRespVOList.length > 0) {
|
if (row.userDingAttendanceRespVOList && row.userDingAttendanceRespVOList.length > 0) {
|
||||||
if (columnIndex === 0) {
|
if (columnIndex === 0) {
|
||||||
return [1, 13]
|
return [1, 14]
|
||||||
} else if (columnIndex == 13 && row.id) {
|
} else if (columnIndex == 14 && row.id) {
|
||||||
return [1, 1]
|
return [1, 1]
|
||||||
} else {
|
} else {
|
||||||
return [0, 0]
|
return [0, 0]
|
||||||
|
|||||||
@@ -41,7 +41,7 @@
|
|||||||
:tree-props="{ children: 'userSalaryGrantRespVOList', hasChildren: 'hasChildren' }"
|
:tree-props="{ children: 'userSalaryGrantRespVOList', hasChildren: 'hasChildren' }"
|
||||||
:span-method="spanMethod"
|
:span-method="spanMethod"
|
||||||
>
|
>
|
||||||
<el-table-column label="姓名" min-width="90px">
|
<el-table-column label="姓名" min-width="90px" fixed="left">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<span v-if="row.userSalaryGrantRespVOList && row.userSalaryGrantRespVOList.length">
|
<span v-if="row.userSalaryGrantRespVOList && row.userSalaryGrantRespVOList.length">
|
||||||
<span>{{ row.period }}</span>
|
<span>{{ row.period }}</span>
|
||||||
|
|||||||
611
src/views/OKR/Management/Components/DialogOkr.vue
Normal file
611
src/views/OKR/Management/Components/DialogOkr.vue
Normal file
@@ -0,0 +1,611 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-if="show"
|
||||||
|
v-model="show"
|
||||||
|
width="94vw"
|
||||||
|
class="dialog-okr"
|
||||||
|
:show-close="false"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<div class="dialog-okr-header">
|
||||||
|
<div class="flex-1 flex items-center" style="line-height: 50px">
|
||||||
|
<div class="dialog-okr-title">
|
||||||
|
<Icon icon="ep:circle-check-filled" color="#30d1fc" :size="14" />
|
||||||
|
<span>目标</span>
|
||||||
|
</div>
|
||||||
|
<el-divider direction="vertical" />
|
||||||
|
<span class="text-14px ml-0.25">ork落地</span>
|
||||||
|
<div class="ml-20px text-14px">
|
||||||
|
<span>【节点】</span>
|
||||||
|
<span>寻驾全年目标 -> 1月</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<el-button link @click="emit('edit')">
|
||||||
|
<el-tooltip content="编辑" placement="top" effect="dark">
|
||||||
|
<Icon icon="ep:edit" :size="16" />
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button link @click="show = false">
|
||||||
|
<el-tooltip content="关闭" placement="top" effect="dark">
|
||||||
|
<Icon icon="ep:close" :size="16" />
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<div class="dialog-okr-body">
|
||||||
|
<div class="dialog-okr-content pr-10px">
|
||||||
|
<div class="dialog-okr-content-detail">
|
||||||
|
<div class="detail-basic-title">
|
||||||
|
<div class="basic-title-item">
|
||||||
|
<div class="basic-title-label">创建人</div>
|
||||||
|
<div class="basic-title-value">张三</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-title-item">
|
||||||
|
<div class="basic-title-label">执行人</div>
|
||||||
|
<div class="basic-title-value">张三、李四</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-title-item">
|
||||||
|
<div class="basic-title-label">目标数</div>
|
||||||
|
<div class="basic-title-value">3</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-title-item" style="min-width: 200px">
|
||||||
|
<div class="basic-title-label">总体进度</div>
|
||||||
|
<el-progress :percentage="60" :stroke-width="8" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex detail-basic-info">
|
||||||
|
<span>开始日期：2025-01-01</span>
|
||||||
|
<span>截止日期：2025-01-31</span>
|
||||||
|
<span>最新更新时间：2025-01-15</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex" style="position: relative; flex: 1; height: 100px">
|
||||||
|
<el-tabs v-model="workIndex" style="flex: 1">
|
||||||
|
<el-tab-pane label="目标/关键成果" name="okr">
|
||||||
|
<div class="content-wrap">
|
||||||
|
<el-table :data="okrList" default-expand-all row-key="id" size="large">
|
||||||
|
<el-table-column label="目标/关键成果">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span v-if="row.type === 'object'">【目标】{{ row.name }}</span>
|
||||||
|
<template v-else>
|
||||||
|
<span>
|
||||||
|
【关键成果】{{ row.channelName }} {{ row.target }}
|
||||||
|
<span v-if="row.targetType == 'value'">{{ row.targetNum }}</span>
|
||||||
|
</span>
|
||||||
|
<div class="flex items-center mt-10px ml-50px">
|
||||||
|
<span>当前进度：</span>
|
||||||
|
<span v-if="row.isSystem">{{ row.currentNum }}</span>
|
||||||
|
<el-input
|
||||||
|
v-else-if="row.targetType == 'value'"
|
||||||
|
v-model="row.currentNum"
|
||||||
|
clearable
|
||||||
|
size="small"
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
<el-radio-group
|
||||||
|
v-else-if="row.targetType == 'radio'"
|
||||||
|
v-model="row.currentValue"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<el-radio :label="true">是</el-radio>
|
||||||
|
<el-radio :label="false">否</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="process" label="进度" width="200px">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-progress :percentage="row.process" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="users" label="执行人" width="200px" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<el-button class="sav-btn" type="primary" @click="handleSaveProcess">
|
||||||
|
保存并更新
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-okr-side pl-10px">
|
||||||
|
<el-tabs v-model="sideIndex" style="flex: 1; height: 100%">
|
||||||
|
<el-tab-pane label="子节点" name="subNode">
|
||||||
|
<div class="overflow-y-auto" style="height: calc(100% - 50px)">
|
||||||
|
<div
|
||||||
|
v-for="index in 12"
|
||||||
|
:key="index"
|
||||||
|
class="border-b-1 child-item"
|
||||||
|
style="padding: 10px 5px; cursor: pointer"
|
||||||
|
@click="handleChildItem"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex justify-between items-center overflow-hidden text-16px"
|
||||||
|
style="line-height: 30px"
|
||||||
|
>
|
||||||
|
<div class="child-label">【节点】子节点{{ index }}</div>
|
||||||
|
<el-progress
|
||||||
|
type="line"
|
||||||
|
:percentage="0"
|
||||||
|
:stroke-width="6"
|
||||||
|
style="width: 120px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-10px flex items-center text-13px" style="line-height: 30px">
|
||||||
|
<span>目标数：</span>
|
||||||
|
<span style="color: #aaa">4</span>
|
||||||
|
<el-divider direction="vertical" style="margin: 0 20px" />
|
||||||
|
<div
|
||||||
|
class="flex-1 overflow-hidden h-30px"
|
||||||
|
style="text-overflow: ellipsis; white-space: nowrap"
|
||||||
|
>
|
||||||
|
<span>执行人：</span>
|
||||||
|
<span style="color: #aaa">张三、李四、王二</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ml-10px flex items-center text-12px"
|
||||||
|
style="line-height: 20px; color: #aaa"
|
||||||
|
>
|
||||||
|
<span>开始日期：2025-01-01</span>
|
||||||
|
<el-divider direction="vertical" style="margin: 0 20px" />
|
||||||
|
<span>截止日期：2025-01-31</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="评论" name="conclusion">
|
||||||
|
<div class="relative overflow-y-auto" style="height: calc(100% - 50px)">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<el-select
|
||||||
|
v-if="addNewComment"
|
||||||
|
v-model="form.commentType"
|
||||||
|
filterable
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
@change="getCommentTemplate"
|
||||||
|
>
|
||||||
|
<el-option label="总结" :value="1" />
|
||||||
|
<el-option label="日报" :value="2" />
|
||||||
|
<el-option label="周报" :value="3" />
|
||||||
|
<el-option label="月报" :value="4" />
|
||||||
|
<!-- <el-option label="评论" :value="5" disabled /> -->
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<div v-if="addNewComment">
|
||||||
|
<el-button size="small" @click="addNewComment = false"> 取消 </el-button>
|
||||||
|
<el-button type="primary" size="small" @click="handleSaveComment">
|
||||||
|
发布
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button v-else type="primary" size="small" @click="handleInsertComment">
|
||||||
|
新增评论
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="mt-10px" v-if="addNewComment">
|
||||||
|
<Editor
|
||||||
|
v-model:modelValue="form.commentValue"
|
||||||
|
height="300px"
|
||||||
|
:toolbarConfig="toolbarConfig"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-for="index in 12" :key="index" class="border-b-1" style="padding: 10px 5px">
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-between overflow-hidden text-16px"
|
||||||
|
style="line-height: 30px"
|
||||||
|
>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<el-avatar
|
||||||
|
shape="circle"
|
||||||
|
style="
|
||||||
|
background-color: var(--el-color-primary-light-3);
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
"
|
||||||
|
fit="fill"
|
||||||
|
>
|
||||||
|
<span class="text-12px">门庆</span>
|
||||||
|
</el-avatar>
|
||||||
|
<div class="ml-10px text-16px">西门庆</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-10px text-13px text-gray-400">01-01 12:15</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-10px" v-dompurify-html="commentListVal"></div>
|
||||||
|
<div
|
||||||
|
class="ml-10px mt-10px flex items-center text-12px"
|
||||||
|
style="line-height: 20px; color: #aaa"
|
||||||
|
>
|
||||||
|
<div class="flex items-center mr-50px">
|
||||||
|
<el-button link @click="good(index)">
|
||||||
|
<Icon icon="fa:thumbs-o-up" :size="16" />
|
||||||
|
</el-button>
|
||||||
|
<span class="ml-5px">6</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center mr-50px">
|
||||||
|
<el-button link @click="showComment(index)">
|
||||||
|
<Icon icon="ep:chat-dot-square" :size="16" />
|
||||||
|
</el-button>
|
||||||
|
<span class="ml-5px">1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 评论 -->
|
||||||
|
<div
|
||||||
|
v-if="showCommentIndex == index"
|
||||||
|
class="bg-gray-100 pl-10px pr-10px pt-5px pb-5px"
|
||||||
|
style="margin: 10px 10px 0 10px; border-radius: 4px"
|
||||||
|
label="评论"
|
||||||
|
>
|
||||||
|
<div class="text-14px" style="line-height: 24px">
|
||||||
|
<span class="font-bold">武大郎：</span>
|
||||||
|
<span>
|
||||||
|
大官人，你要脆饼不要，卖完最后一个我要回家了，我家婆娘熬了鸡汤给我补身子
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-14px" style="line-height: 24px">
|
||||||
|
<span class="font-bold">潘金莲：</span>
|
||||||
|
<span>西门大官人，我要给你生猴子❥(^_-)</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-14px" style="line-height: 24px">
|
||||||
|
<span class="font-bold">武二郎：</span>
|
||||||
|
<span>如同天上降魔主，真乃人间太岁</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-10px relative">
|
||||||
|
<el-input
|
||||||
|
v-model="form.commentValue"
|
||||||
|
placeholder="请输入评论"
|
||||||
|
type="textarea"
|
||||||
|
:autosize="{ minRows: 4 }"
|
||||||
|
clearable
|
||||||
|
size="small"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
style="position: absolute; right: 2px; bottom: 2px"
|
||||||
|
@click="handleSendCommnet"
|
||||||
|
>
|
||||||
|
发布
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="进度历史" name="history">
|
||||||
|
<div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
|
||||||
|
<el-timeline class="ml-10px">
|
||||||
|
<el-timeline-item placement="bottom" timestamp="2025-01-20" color="#30d1fc">
|
||||||
|
<div>张三</div>
|
||||||
|
<div class="mt-10px text-14px" style="line-height: 24px; color: #666">
|
||||||
|
进度变化：40% -> 60%
|
||||||
|
（节点进度是读取目标进度计算的，目标进度根据关键成果计算，关键成果在提交跟新时会有）
|
||||||
|
</div>
|
||||||
|
</el-timeline-item>
|
||||||
|
<el-timeline-item placement="bottom" timestamp="2025-01-15" color="#30d1fc">
|
||||||
|
<div>张三</div>
|
||||||
|
<div class="mt-10px text-14px" style="line-height: 24px; color: #666">
|
||||||
|
更新节点
|
||||||
|
</div>
|
||||||
|
</el-timeline-item>
|
||||||
|
<el-timeline-item placement="bottom" timestamp="2025-01-01" color="#30d1fc">
|
||||||
|
<div>张三</div>
|
||||||
|
<div class="mt-10px text-14px" style="line-height: 24px; color: #666">
|
||||||
|
创建节点
|
||||||
|
</div>
|
||||||
|
</el-timeline-item>
|
||||||
|
</el-timeline>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="DialogOkr">
|
||||||
|
const emit = defineEmits(['edit'])
|
||||||
|
|
||||||
|
const show = ref(false)
|
||||||
|
|
||||||
|
const toolbarConfig = {
|
||||||
|
toolbarKeys: [
|
||||||
|
'bold', // 加粗
|
||||||
|
'underline', // 下划线
|
||||||
|
'italic', // 斜体
|
||||||
|
'color', // 文字颜色
|
||||||
|
'bgColor', // 背景色
|
||||||
|
'fontSize', // 字号
|
||||||
|
'bulletedList', // 无序列表
|
||||||
|
'numberedList', // 有序列表
|
||||||
|
'insertTable', // 插入表格
|
||||||
|
'insertLink', // 插入链接
|
||||||
|
'undo' // 撤销
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const workIndex = ref('okr')
|
||||||
|
const okrList = ref([])
|
||||||
|
const sideIndex = ref('subNode')
|
||||||
|
|
||||||
|
async function open(id) {
|
||||||
|
show.value = true
|
||||||
|
// 获取数据详情
|
||||||
|
console.log(id)
|
||||||
|
okrList.value = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '销售成交额达到1000万，总体成交率15%',
|
||||||
|
process: 60,
|
||||||
|
type: 'object',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
type: 'keyresult',
|
||||||
|
channelName: '抖音',
|
||||||
|
target: '线索目标',
|
||||||
|
targetType: 'value',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
currentNum: 5000,
|
||||||
|
currentValue: false,
|
||||||
|
process: 60,
|
||||||
|
users: '张三、李四'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
type: 'keyresult',
|
||||||
|
channelName: '抖音',
|
||||||
|
target: '成交数',
|
||||||
|
isSystem: true,
|
||||||
|
targetType: 'value',
|
||||||
|
targetNum: 2500,
|
||||||
|
targetValue: false,
|
||||||
|
currentNum: 500,
|
||||||
|
currentValue: false,
|
||||||
|
process: 60,
|
||||||
|
users: '张三、李四'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '运营消耗预算控制在20万以内，获得10万条线索',
|
||||||
|
process: 80,
|
||||||
|
type: 'object',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 21,
|
||||||
|
type: 'keyresult',
|
||||||
|
target: '本月抖音运营投入相较上月少10%',
|
||||||
|
targetType: 'radio',
|
||||||
|
isSystem: false,
|
||||||
|
targetNum: 0,
|
||||||
|
targetValue: false,
|
||||||
|
currentNum: 0,
|
||||||
|
currentValue: false,
|
||||||
|
process: 0,
|
||||||
|
users: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 22,
|
||||||
|
type: 'keyresult',
|
||||||
|
target: '累计输出作品',
|
||||||
|
process: 15,
|
||||||
|
users: '',
|
||||||
|
isSystem: false,
|
||||||
|
targetType: 'value',
|
||||||
|
targetNum: 200,
|
||||||
|
targetValue: false,
|
||||||
|
currentNum: 30,
|
||||||
|
currentValue: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '目标3',
|
||||||
|
process: 40,
|
||||||
|
type: 'object',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 31,
|
||||||
|
type: 'keyresult',
|
||||||
|
target: '关键成果1',
|
||||||
|
process: 100,
|
||||||
|
users: '',
|
||||||
|
isSystem: false,
|
||||||
|
targetType: 'radio',
|
||||||
|
targetNum: 0,
|
||||||
|
targetValue: false,
|
||||||
|
currentNum: 0,
|
||||||
|
currentValue: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 22,
|
||||||
|
type: 'keyresult',
|
||||||
|
target: '关键成果2',
|
||||||
|
process: 15,
|
||||||
|
users: '',
|
||||||
|
isSystem: false,
|
||||||
|
targetType: 'value',
|
||||||
|
targetNum: 200,
|
||||||
|
targetValue: false,
|
||||||
|
currentNum: 30,
|
||||||
|
currentValue: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
show.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open, close })
|
||||||
|
|
||||||
|
function handleSaveProcess() {
|
||||||
|
console.log(okrList.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleChildItem() {
|
||||||
|
console.log('handleChildItem')
|
||||||
|
}
|
||||||
|
|
||||||
|
const addNewComment = ref(false)
|
||||||
|
const form = ref({
|
||||||
|
commentValue: '',
|
||||||
|
commentType: 1
|
||||||
|
})
|
||||||
|
function handleInsertComment() {
|
||||||
|
addNewComment.value = true
|
||||||
|
form.value = {
|
||||||
|
commentValue: '',
|
||||||
|
commentType: 1
|
||||||
|
}
|
||||||
|
getCommentTemplate()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCommentTemplate() {
|
||||||
|
form.value.commentValue = `<h2 style=\"text-align: start;\">一、工作概况</h2><p> </p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数：</li><li>有效沟通数：</li><li>销售成果</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p><br></p>`
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSaveComment() {
|
||||||
|
addNewComment.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const commentListVal = ref(
|
||||||
|
`<h2 style=\"text-align: start;\">一、工作概况</h2><p> 刷牙洗脸吃饭穿鞋出门开车上班捣台球 </p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数：666</li><li>有效沟通数：123</li><li>销售成果：今日成交20，本月成交120，距离目标还差888</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p>无<br></p>`
|
||||||
|
)
|
||||||
|
|
||||||
|
function good(index) {
|
||||||
|
console.log(index)
|
||||||
|
}
|
||||||
|
|
||||||
|
const showCommentIndex = ref(-1)
|
||||||
|
function showComment(index) {
|
||||||
|
showCommentIndex.value = showCommentIndex.value == index ? -1 : index
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSendCommnet() {
|
||||||
|
console.log(form.value.commentValue)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-okr {
|
||||||
|
.dialog-okr-header {
|
||||||
|
display: flex;
|
||||||
|
height: 51px;
|
||||||
|
min-height: 51px;
|
||||||
|
vertical-align: middle;
|
||||||
|
justify-content: space-between;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
.dialog-okr-title {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 5px;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(48, 209, 252, 0.1);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0 10px;
|
||||||
|
line-height: 24px;
|
||||||
|
span {
|
||||||
|
color: #2a344b;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dialog-okr-body {
|
||||||
|
display: flex;
|
||||||
|
background: #f0f3fa;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 1064px;
|
||||||
|
height: calc(94vh - 85px);
|
||||||
|
.dialog-okr-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 70%;
|
||||||
|
flex: auto;
|
||||||
|
min-width: 700px;
|
||||||
|
background: #fff;
|
||||||
|
margin: 0 1px 0 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
.dialog-okr-content-detail {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
.detail-basic-title {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
.basic-title-item {
|
||||||
|
margin-right: 50px;
|
||||||
|
.basic-title-label {
|
||||||
|
color: #aaa;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.basic-title-value {
|
||||||
|
color: #2a344b;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail-basic-info {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #aaa;
|
||||||
|
span {
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-wrap {
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: calc(100% - 70px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dialog-okr-side {
|
||||||
|
padding-left: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 30%;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 364px;
|
||||||
|
max-width: 500px;
|
||||||
|
background: #fff;
|
||||||
|
margin: 0;
|
||||||
|
.child-item:hover {
|
||||||
|
background: #f0f3fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sav-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 0;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
526
src/views/OKR/Management/Components/DialogOkrInfo.vue
Normal file
526
src/views/OKR/Management/Components/DialogOkrInfo.vue
Normal file
@@ -0,0 +1,526 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-if="show"
|
||||||
|
v-model="show"
|
||||||
|
width="900px"
|
||||||
|
class="dialog-okr"
|
||||||
|
:show-close="false"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<div class="dialog-okr-header">
|
||||||
|
<div class="flex-1 flex items-center" style="line-height: 50px"> 修改Okr </div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<el-button type="primary" link :disabled="formLoading" @click="handleSave">
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
<el-button link @click="show = false"> 关闭 </el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<div class="dialog-okr-body">
|
||||||
|
<el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="4" :offset="0">
|
||||||
|
<el-form-item label="父节点" prop="parentId">
|
||||||
|
<el-tree-select
|
||||||
|
v-model="form.parentId"
|
||||||
|
:data="parentNodeList"
|
||||||
|
check-strictly
|
||||||
|
:props="{ value: 'id', label: 'label', children: 'children' }"
|
||||||
|
:render-after-expand="false"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4" :offset="0">
|
||||||
|
<el-form-item label="节点名称" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="请输入" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4" :offset="0">
|
||||||
|
<el-form-item label="开始日期" prop="createTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.createTime"
|
||||||
|
type="date"
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="选择日期时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4" :offset="0">
|
||||||
|
<el-form-item label="截止日期" prop="endTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.endTime"
|
||||||
|
type="date"
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="选择日期时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4" :offset="0">
|
||||||
|
<el-form-item label="执行人" prop="executor">
|
||||||
|
<el-select
|
||||||
|
v-model="form.executor"
|
||||||
|
placeholder="选择执行人，可多选"
|
||||||
|
multiple
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in userOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<el-tabs v-model="okrKey">
|
||||||
|
<el-tab-pane label="目标/关键成果" name="okr">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center w-full" v-for="(item, i) in objectList" :key="item.id">
|
||||||
|
<div class="flex-1 w-100px">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<el-tag type="success" class="mr-10px">O{{ i + 1 }}</el-tag>
|
||||||
|
<el-input v-model="item.name" placeholder="目标名称" class="flex-1 w-150px" />
|
||||||
|
<el-select
|
||||||
|
v-model="item.objExecutor"
|
||||||
|
placeholder="选择执行人，可多选"
|
||||||
|
multiple
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
style="min-width: 240px; margin-left: 10px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="it in userOptions"
|
||||||
|
:key="it.id"
|
||||||
|
:label="it.name"
|
||||||
|
:value="it.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<div class="ml-10px">
|
||||||
|
<el-button type="primary" text @click="AddKR">新增关键成果</el-button>
|
||||||
|
<el-button type="danger" text @click="removeObj">删除目标</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="background: #f0f3fa; padding-bottom: 15px">
|
||||||
|
<div class="ml-50px" v-for="(kr, index) in item.children" :key="kr.id">
|
||||||
|
<div class="flex flex-1 items-center pb-5px pt-5px">
|
||||||
|
<el-tag class="mr-10px">KR{{ index + 1 }}</el-tag>
|
||||||
|
<el-select
|
||||||
|
v-model="kr.id"
|
||||||
|
placeholder="选择或输入"
|
||||||
|
filterable
|
||||||
|
:props="{ value: 'id', label: 'name' }"
|
||||||
|
allow-create
|
||||||
|
:reserve-keyword="false"
|
||||||
|
class="flex-1 w-150px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="it in item.children"
|
||||||
|
:key="it.id"
|
||||||
|
:label="it.name"
|
||||||
|
:value="it.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="danger" text @click="removeKR">删除关键成果</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5px flex items-center">
|
||||||
|
<el-tree-select
|
||||||
|
v-model="kr.sourceId"
|
||||||
|
:data="sourceOptions"
|
||||||
|
:props="defaultProps"
|
||||||
|
check-strictly
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
node-key="sourceId"
|
||||||
|
placeholder="请选择渠道"
|
||||||
|
/>
|
||||||
|
<el-radio-group v-model="kr.targetType" class="ml-10px">
|
||||||
|
<el-radio-button label="value">目标值</el-radio-button>
|
||||||
|
<el-radio-button label="radio">是/否</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
v-if="kr.targetType === 'value'"
|
||||||
|
v-model="kr.targetNum"
|
||||||
|
type="number"
|
||||||
|
placeholder="目标值"
|
||||||
|
class="ml-10px"
|
||||||
|
style="width: 100px"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
v-model="kr.objExecutor"
|
||||||
|
placeholder="选择执行人，可多选"
|
||||||
|
multiple
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
style="min-width: 240px; margin-left: 10px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="it in userOptions"
|
||||||
|
:key="it.id"
|
||||||
|
:label="it.name"
|
||||||
|
:value="it.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="w-100px"></div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="子节点" name="childNode">
|
||||||
|
<el-button class="mb-10px" type="primary" @click="addChildNode">新增子节点</el-button>
|
||||||
|
|
||||||
|
<el-table :data="childNodeList">
|
||||||
|
<el-table-column label="名称">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-input v-model="row.name" placeholder="子节点名称" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="开始日期" width="250px">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="row.createTime"
|
||||||
|
type="date"
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="选择日期时间"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="截止日期" width="250px">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="row.endTime"
|
||||||
|
type="date"
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="选择日期时间"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="执行人">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-select
|
||||||
|
v-model="row.executor"
|
||||||
|
placeholder="选择执行人，可多选"
|
||||||
|
multiple
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in userOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column fixed="right" label="删除" :width="100">
|
||||||
|
<template #default="{ $index }">
|
||||||
|
<el-button type="danger" text @click="removeChildNode($index)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="DialogOkrInfo">
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const show = ref(false)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => show.value,
|
||||||
|
(newValue, oldValue) => {
|
||||||
|
if (oldValue && !newValue) {
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const title = ref('')
|
||||||
|
const formType = ref('create')
|
||||||
|
|
||||||
|
const form = ref({})
|
||||||
|
const formLoading = ref(false)
|
||||||
|
const rules = ref({})
|
||||||
|
|
||||||
|
const okrKey = ref('okr')
|
||||||
|
|
||||||
|
const parentNodeList = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '寻驾全年目标',
|
||||||
|
children: [
|
||||||
|
{ id: 2, label: '1月' },
|
||||||
|
{ id: 3, label: '2月' },
|
||||||
|
{ id: 4, label: '3月' },
|
||||||
|
{ id: 5, label: '4月' },
|
||||||
|
{ id: 6, label: '5月' },
|
||||||
|
{ id: 7, label: '6月' },
|
||||||
|
{ id: 8, label: '7月' },
|
||||||
|
{ id: 9, label: '8月' },
|
||||||
|
{ id: 10, label: '9月' },
|
||||||
|
{ id: 11, label: '10月' },
|
||||||
|
{ id: 12, label: '11月' },
|
||||||
|
{ id: 13, label: '12月' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const childNodeList = ref([{}])
|
||||||
|
|
||||||
|
const userOptions = ref([
|
||||||
|
{ id: 1, name: '张三' },
|
||||||
|
{ id: 2, name: '李四' },
|
||||||
|
{ id: 3, name: '王五' },
|
||||||
|
{ id: 4, name: '赵六' }
|
||||||
|
])
|
||||||
|
const defaultProps = {
|
||||||
|
children: 'children',
|
||||||
|
label: 'sourceName',
|
||||||
|
value: 'sourceId',
|
||||||
|
isLeaf: 'leaf'
|
||||||
|
}
|
||||||
|
const sourceOptions = ref([])
|
||||||
|
const objectList = ref([
|
||||||
|
{
|
||||||
|
nodeId: 2,
|
||||||
|
name: '1月销售任务概述，例：销售额100万，成交率15%',
|
||||||
|
objExecutor: [1, 2],
|
||||||
|
id: 'a1',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'a1-1',
|
||||||
|
name: '销售额',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a1-2',
|
||||||
|
name: '成交数',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a1-3',
|
||||||
|
name: '成交率',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a1-4',
|
||||||
|
name: '本月抖音运营投入相较上月少10%',
|
||||||
|
isSystem: false,
|
||||||
|
targetNum: 0,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'radio'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nodeId: 3,
|
||||||
|
name: '1月运营目标',
|
||||||
|
objExecutor: [1, 2],
|
||||||
|
id: 'a2',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'a2-1',
|
||||||
|
name: '销售额',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a2-2',
|
||||||
|
name: '成交数',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a1-3',
|
||||||
|
name: '成交率',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a1-4',
|
||||||
|
name: '本月抖音运营投入相较上月少10%',
|
||||||
|
isSystem: false,
|
||||||
|
targetNum: 0,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'radio'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nodeId: 4,
|
||||||
|
name: '1月主播任务',
|
||||||
|
objExecutor: [1, 2],
|
||||||
|
id: 'a3',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'a3-1',
|
||||||
|
name: '销售额',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a3-2',
|
||||||
|
name: '成交数',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a3-3',
|
||||||
|
name: '成交率',
|
||||||
|
isSystem: true,
|
||||||
|
targetNum: 10000,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'value'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'a3-4',
|
||||||
|
name: '本月抖音运营投入相较上月少10%',
|
||||||
|
isSystem: false,
|
||||||
|
targetNum: 0,
|
||||||
|
targetValue: false,
|
||||||
|
targetType: 'radio'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
async function open(type, val) {
|
||||||
|
show.value = true
|
||||||
|
title.value = type == 'update' ? '修改Okr' : '新增Okr'
|
||||||
|
formType.value = type
|
||||||
|
resetForm()
|
||||||
|
if (val) {
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
// form.value = await KpiApi.getKpiDetail(val)
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// getOptions()
|
||||||
|
}
|
||||||
|
function resetForm() {
|
||||||
|
form.value = {
|
||||||
|
parentId: '',
|
||||||
|
name: '',
|
||||||
|
createTime: '',
|
||||||
|
endTime: '',
|
||||||
|
executor: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||||
|
|
||||||
|
const formRef = ref()
|
||||||
|
/** 提交表单 */
|
||||||
|
const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调
|
||||||
|
|
||||||
|
function AddKR() {
|
||||||
|
objectList.value.push({
|
||||||
|
name: '',
|
||||||
|
objExecutor: [],
|
||||||
|
children: []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeObj() {
|
||||||
|
objectList.value.pop()
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeKR() {
|
||||||
|
objectList.value.pop()
|
||||||
|
}
|
||||||
|
|
||||||
|
function addChildNode() {
|
||||||
|
childNodeList.value.push({})
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeChildNode(idx) {
|
||||||
|
childNodeList.value.splice(idx, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
// 校验表单
|
||||||
|
if (!formRef.value) return
|
||||||
|
const valid = await formRef.value.validate()
|
||||||
|
if (!valid) return
|
||||||
|
// 提交请求
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
if (formType.value === 'create') {
|
||||||
|
// await KpiApi.createKpi(form.value)
|
||||||
|
message.success(t('common.createSuccess'))
|
||||||
|
} else {
|
||||||
|
// await KpiApi.updateKpi(form.value)
|
||||||
|
message.success(t('common.updateSuccess'))
|
||||||
|
}
|
||||||
|
show.value = false
|
||||||
|
// 发送操作成功的事件
|
||||||
|
emit('success')
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-okr {
|
||||||
|
.dialog-okr-header {
|
||||||
|
display: flex;
|
||||||
|
height: 51px;
|
||||||
|
min-height: 51px;
|
||||||
|
vertical-align: middle;
|
||||||
|
justify-content: space-between;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
}
|
||||||
|
.dialog-okr-body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
min-width: 1064px;
|
||||||
|
height: calc(94vh - 85px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
165
src/views/OKR/Management/Components/ObjectList.vue
Normal file
165
src/views/OKR/Management/Components/ObjectList.vue
Normal file
@@ -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>
|
||||||
53
src/views/OKR/Management/index.vue
Normal file
53
src/views/OKR/Management/index.vue
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="{ height: `${height}px` }">
|
||||||
|
<el-tabs tab-position="left" v-model="tabIndex" style="height: 100%">
|
||||||
|
<el-tab-pane disabled name="-1">
|
||||||
|
<template #label>
|
||||||
|
<div class="w-full">
|
||||||
|
<div style="text-align: left; transform: translateX(-10px)">目标</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="我负责的" name="0">我负责的</el-tab-pane>
|
||||||
|
<el-tab-pane label="我的待办" name="1">我的待办</el-tab-pane>
|
||||||
|
<el-tab-pane label="全部目标" name="2">全部目标</el-tab-pane>
|
||||||
|
<el-tab-pane label="目标关系树" name="3">
|
||||||
|
<ObjectList v-if="tabIndex == 3" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane disabled>
|
||||||
|
<template #label>
|
||||||
|
<div class="w-full">
|
||||||
|
<el-divider
|
||||||
|
direction="horizontal"
|
||||||
|
style="width: calc(100% + 10px) !important; transform: translateX(-10px)"
|
||||||
|
/>
|
||||||
|
<div style="text-align: left; transform: translateX(-10px)">成员</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="张三">张三</el-tab-pane>
|
||||||
|
<el-tab-pane label="李四">李四</el-tab-pane>
|
||||||
|
<el-tab-pane label="王二">王二</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="OkrManagement">
|
||||||
|
import ObjectList from './Components/ObjectList.vue'
|
||||||
|
|
||||||
|
const tabIndex = ref('0')
|
||||||
|
const height = ref(innerHeight - 115)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
:deep(.el-tab-pane) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
:deep(.el-popover__title) {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #aaa !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
12
yarn.lock
12
yarn.lock
@@ -3362,6 +3362,11 @@ core-js@^3.31.1:
|
|||||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.36.1.tgz#c97a7160ebd00b2de19e62f4bbd3406ab720e578"
|
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.36.1.tgz#c97a7160ebd00b2de19e62f4bbd3406ab720e578"
|
||||||
integrity sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==
|
integrity sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==
|
||||||
|
|
||||||
|
core-js@^3.6.5:
|
||||||
|
version "3.40.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.40.0.tgz#2773f6b06877d8eda102fc42f828176437062476"
|
||||||
|
integrity sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==
|
||||||
|
|
||||||
cors@^2.8.5:
|
cors@^2.8.5:
|
||||||
version "2.8.5"
|
version "2.8.5"
|
||||||
resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
|
resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
|
||||||
@@ -8215,6 +8220,13 @@ vue-types@^5.0.3:
|
|||||||
dependencies:
|
dependencies:
|
||||||
is-plain-object "5.0.0"
|
is-plain-object "5.0.0"
|
||||||
|
|
||||||
|
vue3-tree-org@^4.2.2:
|
||||||
|
version "4.2.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue3-tree-org/-/vue3-tree-org-4.2.2.tgz#6b711dc6e7c5aac99d9b7ff169a432435080cb4b"
|
||||||
|
integrity sha512-AG2SykyD6dw0jIyqBm8iuF9j9GWli6KrwudxR1RjULCCBTDFsoNm7MmP/weKT7wowN/sPk+e2RsnvEJMw2OJMw==
|
||||||
|
dependencies:
|
||||||
|
core-js "^3.6.5"
|
||||||
|
|
||||||
vue@3.3.4:
|
vue@3.3.4:
|
||||||
version "3.3.4"
|
version "3.3.4"
|
||||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
|
resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
|
||||||
|
|||||||
Reference in New Issue
Block a user