莳松-行政管理系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ss-oa-manage-web/src/views/OKR/Management/Components/AllTarget.vue

108 lines
2.5 KiB

1 month ago
<template>
<div>
<div class="flex items-center justify-between">
<el-row>
4 weeks ago
<el-tree-select
v-model="searchForm.nodeId"
:data="peroidList"
:props="defaultProps"
:render-after-expand="false"
4 weeks ago
:default-expand-all="false"
check-strictly
4 weeks ago
style="width: 400px"
@change="getOkrList"
/>
1 month ago
<el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button>
</el-row>
<el-row>
4 weeks ago
<el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button>
4 weeks ago
<el-button type="warning" @click="handleEditOkr(searchForm.nodeId)">
1 month ago
修改当前节点
</el-button>
<el-button type="success" @click="handleUpdateProcess">更新进度</el-button>
</el-row>
</div>
4 weeks ago
<OkrTable ref="okrTableRef" />
1 month ago
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
4 weeks ago
<DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" />
1 month ago
</div>
</template>
<script setup name="AllTarget">
import OkrTable from './OkrTable.vue'
import DialogOkrInfo from './DialogOkrInfo.vue'
import DialogOkr from './DialogOkr.vue'
4 weeks ago
import { getAllNodeTree, getAllOkrPage } from '@/api/okr/okr'
import { listToTree } from '@/utils/tree'
1 month ago
const message = useMessage()
4 weeks ago
const defaultProps = {
value: 'nodeId',
label: 'nodeName',
children: 'children'
}
1 month ago
const okrTableRef = ref(null)
const searchForm = ref({
4 weeks ago
nodeId: undefined
1 month ago
})
const peroidList = ref([])
onMounted(() => {
handleSearchPeroid()
})
4 weeks ago
function handleSearchPeroid() {
getAllNodeTree().then((resp) => {
peroidList.value = listToTree(resp.tree, {
id: 'nodeId',
pid: 'parentId',
children: 'children'
})
searchForm.value.nodeId = resp.nodeId
getOkrList()
})
1 month ago
}
4 weeks ago
function getOkrList() {
getAllOkrPage(searchForm.value).then((resp) => {
const list = resp
nextTick(() => {
okrTableRef.value.prepareData(list)
})
1 month ago
})
}
const dialogOkrInfo = ref(null)
function handleAddNode() {
dialogOkrInfo.value.open('create', null)
}
function handleEditOkr() {
dialogOkr.value.close()
4 weeks ago
dialogOkrInfo.value.open('update', searchForm.value.nodeId)
1 month ago
}
function handleUpdateProcess() {
message.success('更新进度成功')
getOkrList()
}
const dialogOkr = ref(null)
4 weeks ago
function handleShowOkr(id) {
dialogOkr.value.open(id)
}
1 month ago
</script>
<style lang="scss" scoped>
:deep(.el-overlay-dialog) {
display: flex;
justify-content: center;
align-items: center;
}
</style>