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.
128 lines
3.1 KiB
128 lines
3.1 KiB
4 months ago
|
<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>
|