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> <template #header>
<div class="dialog-okr-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"> <div class="flex items-center">
<el-button type="primary" link :disabled="formLoading" @click="handleSave"> <el-button type="primary" link :disabled="formLoading" @click="handleSave">
保存 保存
@ -20,48 +20,49 @@
</template> </template>
<template #default> <template #default>
<div class="dialog-okr-body"> <div class="dialog-okr-body">
<el-form :model="form" ref="formRef" :rules="rules" label-width="80px"> <el-form :model="form" ref="formRef" :rules="rules" label-width="0">
<el-row :gutter="20"> <el-row :gutter="10">
<el-col :span="4" :offset="0"> <el-col :span="4" :offset="0">
<el-form-item label="父节点" prop="parentId"> <el-form-item prop="parentId">
<el-tree-select <el-tree-select
v-model="form.parentId" v-model="form.parentId"
:data="parentNodeList" :data="parentNodeList"
check-strictly check-strictly
:props="{ value: 'id', label: 'label', children: 'children' }" :props="{ value: 'id', label: 'label', children: 'children' }"
:render-after-expand="false" :render-after-expand="false"
placeholder="父节点"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" :offset="0"> <el-col :span="4" :offset="0">
<el-form-item label="节点名称" prop="name"> <el-form-item prop="name">
<el-input v-model="form.name" placeholder="请输入" /> <el-input v-model="form.name" placeholder="请输入节点名称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" :offset="0"> <el-col :span="4" :offset="0">
<el-form-item label="开始日期" prop="createTime"> <el-form-item prop="createTime">
<el-date-picker <el-date-picker
v-model="form.createTime" v-model="form.createTime"
type="date" type="date"
format="yyyy-MM-dd" format="YYYY-MM-DD"
value-format="yyyy-MM-dd" value-format="YYYY-MM-DD"
placeholder="选择日期时间" placeholder="开始日期"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" :offset="0"> <el-col :span="4" :offset="0">
<el-form-item label="截止日期" prop="endTime"> <el-form-item prop="endTime">
<el-date-picker <el-date-picker
v-model="form.endTime" v-model="form.endTime"
type="date" type="date"
format="yyyy-MM-dd" format="YYYY-MM-DD"
value-format="yyyy-MM-dd" value-format="YYYY-MM-DD"
placeholder="选择日期时间" placeholder="截止日期"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" :offset="0"> <el-col :span="4" :offset="0">
<el-form-item label="执行人" prop="executor"> <el-form-item prop="executor">
<el-select <el-select
v-model="form.executor" v-model="form.executor"
placeholder="选择执行人，可多选" placeholder="选择执行人，可多选"
@ -78,164 +79,224 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </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-row>
</el-form> </el-form>
<el-tabs v-model="okrKey"> <div class="relative">
<el-tab-pane label="目标/关键成果" name="okr"> <el-button
<div> v-if="okrKey === 'okr'"
<div class="flex items-center w-full" v-for="(item, i) in objectList" :key="item.id"> style="position: absolute; right: 10px; top: 10px"
<div class="flex-1 w-100px"> type="primary"
<div class="flex items-center"> size="small"
<el-tag type="success" class="mr-10px">O{{ i + 1 }}</el-tag> @click="addObjective"
<el-input v-model="item.name" placeholder="目标名称" class="flex-1 w-150px" /> >
<el-select 添加目标
v-model="item.objExecutor" </el-button>
placeholder="选择执行人，可多选" <el-button
multiple v-else-if="okrKey === 'childNode'"
clearable style="position: absolute; right: 10px; top: 10px"
filterable type="primary"
style="min-width: 240px; margin-left: 10px" size="small"
> @click="addChildNode"
<el-option >
v-for="it in userOptions" 添加子节点
:key="it.id" </el-button>
:label="it.name" <el-tabs v-model="okrKey">
:value="it.id" <el-tab-pane label="目标/关键成果" name="okr">
/> <div>
</el-select> <div
<div class="ml-10px"> class="flex items-center w-full"
<el-button type="primary" text @click="AddKR">新增关键成果</el-button> v-for="(item, i) in objectList"
<el-button type="danger" text @click="removeObj">删除目标</el-button> :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> <div style="background: #f0f3fa; padding-bottom: 15px">
<div style="background: #f0f3fa; padding-bottom: 15px"> <div class="ml-50px" v-for="(kr, index) in item.children" :key="kr.id">
<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">
<div class="flex flex-1 items-center pb-5px pt-5px"> <el-tag class="mr-10px">KR{{ index + 1 }}</el-tag>
<el-tag class="mr-10px">KR{{ index + 1 }}</el-tag> <el-select
<el-select v-model="kr.id"
v-model="kr.id" placeholder="选择或输入"
placeholder="选择或输入" filterable
filterable :props="{ value: 'id', label: 'name' }"
:props="{ value: 'id', label: 'name' }" allow-create
allow-create :reserve-keyword="false"
:reserve-keyword="false" class="flex-1 w-150px"
class="flex-1 w-150px" >
> <el-option
<el-option v-for="it in item.children"
v-for="it in item.children" :key="it.id"
:key="it.id" :label="it.name"
:label="it.name" :value="it.id"
: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-radio-group v-model="kr.targetType" class="ml-10px">
<el-button type="danger" text @click="removeKR">删除关键成果</el-button> <el-radio-button label="value">目标值</el-radio-button>
</div> <el-radio-button label="radio">是/否</el-radio-button>
<div class="mt-5px flex items-center"> </el-radio-group>
<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 <el-input
v-model="kr.objExecutor" v-if="kr.targetType === 'value'"
placeholder="选择执行人，可多选" v-model="kr.targetNum"
multiple type="number"
clearable placeholder="目标值"
filterable class="ml-10px"
style="min-width: 240px; margin-left: 10px" style="width: 100px"
>
<el-option
v-for="it in userOptions"
:key="it.id"
:label="it.name"
:value="it.id"
/> />
</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>
</div> </div>
<!-- <div class="w-100px"></div> -->
</div> </div>
<!-- <div class="w-100px"></div> -->
</div> </div>
</div> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="子节点" name="childNode">
<el-tab-pane label="子节点" name="childNode"> <el-table :data="childNodeList">
<el-button class="mb-10px" type="primary" @click="addChildNode">新增子节点</el-button> <el-table-column label="名称">
<template #default="{ row }">
<el-table :data="childNodeList"> <el-input v-model="row.name" placeholder="子节点名称" />
<el-table-column label="名称"> </template>
<template #default="{ row }"> </el-table-column>
<el-input v-model="row.name" placeholder="子节点名称" /> <el-table-column label="开始日期" width="160px">
</template> <template #default="{ row }">
</el-table-column> <el-date-picker
<el-table-column label="开始日期" width="250px"> v-model="row.createTime"
<template #default="{ row }"> type="date"
<el-date-picker format="YYYY-MM-DD"
v-model="row.createTime" value-format="YYYY-MM-DD"
type="date" placeholder="选择日期时间"
format="yyyy-MM-dd" style="width: 130px"
value-format="yyyy-MM-dd" />
placeholder="选择日期时间" </template>
/> </el-table-column>
</template> <el-table-column label="截止日期" width="160px">
</el-table-column> <template #default="{ row }">
<el-table-column label="截止日期" width="250px"> <el-date-picker
<template #default="{ row }"> v-model="row.endTime"
<el-date-picker type="date"
v-model="row.endTime" format="YYYY-MM-DD"
type="date" value-format="YYYY-MM-DD"
format="yyyy-MM-dd" placeholder="选择日期时间"
value-format="yyyy-MM-dd" style="width: 130px"
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>
</template> </el-table-column>
</el-table-column> <el-table-column label="权限" width="160px">
<el-table-column fixed="right" label="删除" :width="100"> <template #default="{ row }">
<template #default="{ $index }"> <el-select v-model="row.permission" placeholder="请选择" style="width: 130px">
<el-button type="danger" text @click="removeChildNode($index)">删除</el-button> <el-option label="公开" :value="0" />
</template> <el-option label="仅上级可见" :value="1" />
</el-table-column> </el-select>
</el-table> </template>
</el-tab-pane> </el-table-column>
</el-tabs> <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> </div>
</template> </template>
</el-dialog> </el-dialog>
@ -455,6 +516,14 @@ const formRef = ref()
/** 提交表单 */ /** 提交表单 */
const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调 const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调
function addObjective() {
objectList.value.push({
name: '',
objExecutor: [],
children: []
})
}
function AddKR() { function AddKR() {
objectList.value.push({ objectList.value.push({
name: '', name: '',

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

@ -1,5 +1,59 @@
<template> <template>
<div style="height: 100vh"> <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"> <vue3-tree-org :data="dataList" center collapsable @on-node-click="handleClickNode">
<template #default="{ node }"> <template #default="{ node }">
<div style="cursor: pointer"> <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) { function toggleExpand(data, val) {
if (Array.isArray(data)) { if (Array.isArray(data)) {
data.forEach((item) => { data.forEach((item) => {
@ -114,7 +193,12 @@ function handleClickNode(node, data) {
} }
function openOkr() { 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) const dialogOkrInfo = ref(null)
@ -125,6 +209,14 @@ function handleEditOkr() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.peroid-select {
border-radius: 4px;
cursor: pointer;
&:hover {
border-color: var(--el-color-primary-light-5);
}
}
.tree-org-node__text { .tree-org-node__text {
min-width: 200px; min-width: 200px;
min-height: 80px; min-height: 80px;

Write Preview
Loading…
Cancel
Save