Compare commits
No commits in common. 'b91fe3b05a726a8b8c420f19eac87b5ba24d6386' and 'a712e3f85fc0087a25fff3e921177fc317b4086d' have entirely different histories.
b91fe3b05a
...
a712e3f85f
@ -1,236 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="flex items-center justify-between"> |
|
||||||
<el-row> |
|
||||||
<el-popover placement="bottom" width="500px" trigger="click" @show="handleSearchPeroid"> |
|
||||||
<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> |
|
||||||
<div class="mt-10px" style="height: 400px"> |
|
||||||
<el-table :data="peroidList" @row-click="handleSelectPeroid"> |
|
||||||
<el-table-column label="节点名称"> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-radio v-model="searchForm.peroidId" :label="row.id">{{ |
|
||||||
row.name |
|
||||||
}}</el-radio> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="开始日期" prop="startDate" width="120" /> |
|
||||||
<el-table-column label="截止日期" prop="endDate" width="120" /> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-popover> |
|
||||||
<el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button> |
|
||||||
</el-row> |
|
||||||
<el-row> |
|
||||||
<el-button type="warning" @click="handleEditOkr(searchForm.peroidId)"> |
|
||||||
修改当前节点 |
|
||||||
</el-button> |
|
||||||
<el-button type="success" @click="handleUpdateProcess">更新进度</el-button> |
|
||||||
</el-row> |
|
||||||
</div> |
|
||||||
|
|
||||||
<OkrTable ref="okrTableRef" @row-click="handleShowOkr" /> |
|
||||||
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> |
|
||||||
<DialogOkrInfo ref="dialogOkrInfo" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup name="AllTarget"> |
|
||||||
import OkrTable from './OkrTable.vue' |
|
||||||
import DialogOkrInfo from './DialogOkrInfo.vue' |
|
||||||
import DialogOkr from './DialogOkr.vue' |
|
||||||
|
|
||||||
const message = useMessage() |
|
||||||
|
|
||||||
const okrTableRef = ref(null) |
|
||||||
const searchForm = ref({ |
|
||||||
peroidName: '', |
|
||||||
peroidId: null |
|
||||||
}) |
|
||||||
|
|
||||||
const peroidList = ref([]) |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
handleSearchPeroid() |
|
||||||
if (!searchForm.value.peroidId && peroidList.value.length) { |
|
||||||
searchForm.value.peroidId = peroidList.value[0].id |
|
||||||
searchForm.value.peroidName = peroidList.value[0].name |
|
||||||
} |
|
||||||
getOkrList() |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSearchPeroid() { |
|
||||||
peroidList.value = [ |
|
||||||
{ |
|
||||||
id: 1, |
|
||||||
name: '2025年寻驾okr', |
|
||||||
startDate: '2022-01-01', |
|
||||||
endDate: '2022-01-31' |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: 2, |
|
||||||
name: '2024年寻驾okr', |
|
||||||
startDate: '2022-02-01', |
|
||||||
endDate: '2022-02-28' |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
|
|
||||||
function handleSelectPeroid(row) { |
|
||||||
searchForm.value.peroidName = row.name |
|
||||||
searchForm.value.peroidId = row.id |
|
||||||
handleSearchOkr() |
|
||||||
} |
|
||||||
|
|
||||||
function handleSearchOkr() { |
|
||||||
console.log(searchForm.value) |
|
||||||
} |
|
||||||
|
|
||||||
async function getOkrList() { |
|
||||||
const list = [ |
|
||||||
{ |
|
||||||
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 |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
nextTick(() => { |
|
||||||
okrTableRef.value.prepareData(list) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const dialogOkrInfo = ref(null) |
|
||||||
function handleAddNode() { |
|
||||||
dialogOkrInfo.value.open('create', null) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEditOkr() { |
|
||||||
dialogOkr.value.close() |
|
||||||
dialogOkrInfo.value.open('update', 1) |
|
||||||
} |
|
||||||
|
|
||||||
function handleUpdateProcess() { |
|
||||||
message.success('更新进度成功') |
|
||||||
getOkrList() |
|
||||||
} |
|
||||||
|
|
||||||
const dialogOkr = ref(null) |
|
||||||
function handleShowOkr(row) { |
|
||||||
dialogOkr.value.open(row.id) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
:deep(.el-overlay-dialog) { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,236 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="flex items-center justify-between"> |
|
||||||
<el-row> |
|
||||||
<el-popover placement="bottom" width="500px" trigger="click" @show="handleSearchPeroid"> |
|
||||||
<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> |
|
||||||
<div class="mt-10px" style="height: 400px"> |
|
||||||
<el-table :data="peroidList" @row-click="handleSelectPeroid"> |
|
||||||
<el-table-column label="节点名称"> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-radio v-model="searchForm.peroidId" :label="row.id">{{ |
|
||||||
row.name |
|
||||||
}}</el-radio> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="开始日期" prop="startDate" width="120" /> |
|
||||||
<el-table-column label="截止日期" prop="endDate" width="120" /> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-popover> |
|
||||||
<el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button> |
|
||||||
</el-row> |
|
||||||
<el-row> |
|
||||||
<el-button type="warning" @click="handleEditOkr(searchForm.peroidId)"> |
|
||||||
修改当前节点 |
|
||||||
</el-button> |
|
||||||
<el-button type="success" @click="handleUpdateProcess">更新进度</el-button> |
|
||||||
</el-row> |
|
||||||
</div> |
|
||||||
|
|
||||||
<OkrTable ref="okrTableRef" @row-click="handleShowOkr" /> |
|
||||||
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> |
|
||||||
<DialogOkrInfo ref="dialogOkrInfo" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup name="MyDuty"> |
|
||||||
import OkrTable from './OkrTable.vue' |
|
||||||
import DialogOkrInfo from './DialogOkrInfo.vue' |
|
||||||
import DialogOkr from './DialogOkr.vue' |
|
||||||
|
|
||||||
const message = useMessage() |
|
||||||
|
|
||||||
const okrTableRef = ref(null) |
|
||||||
const searchForm = ref({ |
|
||||||
peroidName: '', |
|
||||||
peroidId: null |
|
||||||
}) |
|
||||||
|
|
||||||
const peroidList = ref([]) |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
handleSearchPeroid() |
|
||||||
if (!searchForm.value.peroidId && peroidList.value.length) { |
|
||||||
searchForm.value.peroidId = peroidList.value[0].id |
|
||||||
searchForm.value.peroidName = peroidList.value[0].name |
|
||||||
} |
|
||||||
getOkrList() |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSearchPeroid() { |
|
||||||
peroidList.value = [ |
|
||||||
{ |
|
||||||
id: 1, |
|
||||||
name: '2025年寻驾okr', |
|
||||||
startDate: '2022-01-01', |
|
||||||
endDate: '2022-01-31' |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: 2, |
|
||||||
name: '2024年寻驾okr', |
|
||||||
startDate: '2022-02-01', |
|
||||||
endDate: '2022-02-28' |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
|
|
||||||
function handleSelectPeroid(row) { |
|
||||||
searchForm.value.peroidName = row.name |
|
||||||
searchForm.value.peroidId = row.id |
|
||||||
handleSearchOkr() |
|
||||||
} |
|
||||||
|
|
||||||
function handleSearchOkr() { |
|
||||||
console.log(searchForm.value) |
|
||||||
} |
|
||||||
|
|
||||||
async function getOkrList() { |
|
||||||
const list = [ |
|
||||||
{ |
|
||||||
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 |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
nextTick(() => { |
|
||||||
okrTableRef.value.prepareData(list) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const dialogOkrInfo = ref(null) |
|
||||||
function handleAddNode() { |
|
||||||
dialogOkrInfo.value.open('create', null) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEditOkr() { |
|
||||||
dialogOkr.value.close() |
|
||||||
dialogOkrInfo.value.open('update', 1) |
|
||||||
} |
|
||||||
|
|
||||||
function handleUpdateProcess() { |
|
||||||
message.success('更新进度成功') |
|
||||||
getOkrList() |
|
||||||
} |
|
||||||
|
|
||||||
const dialogOkr = ref(null) |
|
||||||
function handleShowOkr(row) { |
|
||||||
dialogOkr.value.open(row.id) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
:deep(.el-overlay-dialog) { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,127 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<el-table |
|
||||||
ref="tableRef" |
|
||||||
:data="okrList" |
|
||||||
default-expand-all |
|
||||||
row-key="id" |
|
||||||
size="large" |
|
||||||
@row-click="handleRowClick" |
|
||||||
@expand-change="handleExpand" |
|
||||||
> |
|
||||||
<el-table-column label="目标/关键成果"> |
|
||||||
<template #default="{ row, $index }"> |
|
||||||
<span |
|
||||||
v-if="!expandedRows[row.id]" |
|
||||||
class="line1" |
|
||||||
:style="{ |
|
||||||
top: row.type == 'object' ? '30px' : 0, |
|
||||||
height: getHeight(row, $index) |
|
||||||
}" |
|
||||||
></span> |
|
||||||
<span v-if="row.type === 'object'">【目标】{{ row.name }}</span> |
|
||||||
<template v-else> |
|
||||||
<span class="line2"></span> |
|
||||||
<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> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup name="OkrTable"> |
|
||||||
const emit = defineEmits(['rowClick']) |
|
||||||
|
|
||||||
const okrList = ref([]) |
|
||||||
const helpList = ref([]) |
|
||||||
|
|
||||||
function prepareData(list) { |
|
||||||
okrList.value = list |
|
||||||
helpList.value = [] |
|
||||||
okrList.value.map((item) => { |
|
||||||
helpList.value.push(item) |
|
||||||
item.children.map((child) => { |
|
||||||
helpList.value.push(child) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
defineExpose({ |
|
||||||
prepareData |
|
||||||
}) |
|
||||||
|
|
||||||
function getHeight(row, index) { |
|
||||||
if (helpList.value.length - 1 == index || helpList.value[index + 1].type == 'object') { |
|
||||||
return '22px' |
|
||||||
} else { |
|
||||||
return '100%' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const expandedRows = ref({}) |
|
||||||
function handleExpand(row, expanded) { |
|
||||||
expandedRows.value[row.id] = !expanded |
|
||||||
} |
|
||||||
|
|
||||||
function handleRowClick(row) { |
|
||||||
emit('rowClick', row) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.line1 { |
|
||||||
position: absolute; |
|
||||||
width: 1px; |
|
||||||
left: 21px; |
|
||||||
border-left: 1px dashed #ccc; |
|
||||||
} |
|
||||||
.line2 { |
|
||||||
position: absolute; |
|
||||||
width: 26px; |
|
||||||
height: 1px; |
|
||||||
left: 21px; |
|
||||||
top: 22px; |
|
||||||
border-bottom: 1px dashed #ccc; |
|
||||||
&::after { |
|
||||||
position: absolute; |
|
||||||
left: 25px; |
|
||||||
top: -3px; |
|
||||||
display: block; |
|
||||||
width: 6px; |
|
||||||
height: 6px; |
|
||||||
border-radius: 6px; |
|
||||||
margin: 0 auto; |
|
||||||
border: 1px solid #ddd; |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue