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. 119
      src/views/OKR/Management/Components/DialogOkrInfo.vue
  2. 94
      src/views/OKR/Management/Components/ObjectList.vue

119
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,12 +79,43 @@
</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>
<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 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>
@ -103,6 +135,16 @@
: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>
@ -170,6 +212,16 @@
: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>
@ -179,37 +231,45 @@
</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">
<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"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="选择日期时间"
style="width: 130px"
/>
</template>
</el-table-column>
<el-table-column label="截止日期" width="250px">
<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"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="选择日期时间"
style="width: 130px"
/>
</template>
</el-table-column>
<el-table-column label="执行人">
<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"
@ -237,6 +297,7 @@
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
</el-dialog>
</template>
@ -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