qiushanhe
/
ss-oa-manage-web
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

sc

Browse Source
dev-cl
qsh 3 weeks ago
parent a5a64b7131
commit a712e3f85f
2 changed files with 323 additions and 162 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 391
      src/views/OKR/Management/Components/DialogOkrInfo.vue
  2. 94
      src/views/OKR/Management/Components/ObjectList.vue

391
src/views/OKR/Management/Components/DialogOkrInfo.vue
Unescape View File

@ -9,7 +9,7 @@
>
<template #header>
<div class="dialog-okr-header">
<div class="flex-1 flex items-center" style="line-height: 50px"> 修改Okr </div>
<div class="flex-1 flex items-center" style="line-height: 50px"> {{ title }} </div>
<div class="flex items-center">
<el-button type="primary" link :disabled="formLoading" @click="handleSave">
保存
@ -20,48 +20,49 @@
</template>
<template #default>
<div class="dialog-okr-body">
<el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
<el-row :gutter="20">
<el-form :model="form" ref="formRef" :rules="rules" label-width="0">
<el-row :gutter="10">
<el-col :span="4" :offset="0">
<el-form-item label="父节点" prop="parentId">
<el-form-item prop="parentId">
<el-tree-select
v-model="form.parentId"
:data="parentNodeList"
check-strictly
:props="{ value: 'id', label: 'label', children: 'children' }"
:render-after-expand="false"
placeholder="父节点"
/>
</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 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-form-item prop="createTime">
<el-date-picker
v-model="form.createTime"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期时间"
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-form-item prop="endTime">
<el-date-picker
v-model="form.endTime"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期时间"
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-form-item prop="executor">
<el-select
v-model="form.executor"
placeholder="选择执行人，可多选"
@ -78,164 +79,224 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" :offset="0">
<el-form-item prop="persission">
<el-select v-model="form.persission" placeholder="选择权限" clearable filterable>
<el-option label="公开" :value="0" />
<el-option label="仅上级可见" :value="1" />
</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 class="relative">
<el-button
v-if="okrKey === 'okr'"
style="position: absolute; right: 10px; top: 10px"
type="primary"
size="small"
@click="addObjective"
>
添加目标
</el-button>
<el-button
v-else-if="okrKey === 'childNode'"
style="position: absolute; right: 10px; top: 10px"
type="primary"
size="small"
@click="addChildNode"
>
添加子节点
</el-button>
<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>
<el-select
v-model="item.persission"
placeholder="选择权限"
clearable
filterable
style="width: 120px; margin-left: 10px"
>
<el-option label="公开" :value="0" />
<el-option label="仅上级可见" :value="1" />
</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>
<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"
<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-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-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-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-input
v-if="kr.targetType === 'value'"
v-model="kr.targetNum"
type="number"
placeholder="目标值"
class="ml-10px"
style="width: 100px"
/>
</el-select>
<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>
<el-select
v-model="kr.persission"
placeholder="选择权限"
clearable
filterable
style="width: 120px; margin-left: 10px"
>
<el-option label="公开" :value="0" />
<el-option label="仅上级可见" :value="1" />
</el-select>
</div>
</div>
</div>
</div>
<!-- <div class="w-100px"></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-tab-pane>
<el-tab-pane label="子节点" name="childNode">
<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="160px">
<template #default="{ row }">
<el-date-picker
v-model="row.createTime"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="选择日期时间"
style="width: 130px"
/>
</template>
</el-table-column>
<el-table-column label="截止日期" width="160px">
<template #default="{ row }">
<el-date-picker
v-model="row.endTime"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="选择日期时间"
style="width: 130px"
/>
</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>
</template>
</el-table-column>
<el-table-column label="权限" width="160px">
<template #default="{ row }">
<el-select v-model="row.permission" placeholder="请选择" style="width: 130px">
<el-option label="公开" :value="0" />
<el-option label="仅上级可见" :value="1" />
</el-select>
</template>
</el-table-column>
<el-table-column label="执行人" width="300px">
<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>
</div>
</template>
</el-dialog>
@ -455,6 +516,14 @@ const formRef = ref()
/** 提交表单 */
const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调
function addObjective() {
objectList.value.push({
name: '',
objExecutor: [],
children: []
})
}
function AddKR() {
objectList.value.push({
name: '',

94
src/views/OKR/Management/Components/ObjectList.vue
Unescape View File

@ -1,5 +1,59 @@
<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">
@ -88,6 +142,31 @@ const dataList = ref({
]
})
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) => {
@ -114,7 +193,12 @@ function handleClickNode(node, data) {
}
function openOkr() {
dialogOkr.value.open(okrId.value)
okrId.value && dialogOkr.value.open(okrId.value)
}
function handleAddNode() {
okrId.value = null
dialogOkrInfo.value.open('create', null)
}
const dialogOkrInfo = ref(null)
@ -125,6 +209,14 @@ function handleEditOkr() {
</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;

Write Preview
Loading…
Cancel
Save