|
<template>
|
<div class="phase-goal-list-container">
|
<el-table
|
v-loading="loading"
|
:data="phaseGoalList"
|
style="width: 100%"
|
>
|
<el-table-column prop="phaseName" label="所属阶段" width="180" />
|
<el-table-column prop="taskName" label="目标名称" min-width="200" />
|
<el-table-column prop="targetValue" label="目标值" width="120" />
|
<el-table-column prop="currentValue" label="当前值" width="120" />
|
<el-table-column prop="unit" label="单位" width="80" />
|
<el-table-column prop="targetDate" label="目标日期" width="120" />
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="scope">
|
<el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="completionRate" label="完成度" width="120">
|
<template #default="scope">
|
<el-progress :percentage="scope.row.completionRate" :stroke-width="6" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" fixed="right">
|
<template #default="scope">
|
<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button type="text" size="small" @click="handleDelete(scope.row)" danger>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 无阶段目标时的提示 -->
|
<div v-if="!loading && phaseGoalList.length === 0" class="empty-tip">
|
<el-empty description="暂无阶段目标数据" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, watch } from 'vue';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { listProjectPhase, updateProjectTask, delProjectTask } from '@/api/oaSystem/projectManagement';
|
|
const props = defineProps({
|
projectId: {
|
type: String,
|
required: true
|
}
|
});
|
|
const emit = defineEmits(['refresh']);
|
|
const phaseGoalList = ref([]);
|
const loading = ref(true);
|
|
// 获取阶段目标列表
|
const getPhaseGoalList = async () => {
|
loading.value = true;
|
try {
|
const { data } = await listProjectPhase(props.projectId);
|
// 假设phase数据中包含了目标信息
|
// 这里简化处理，实际应该调用专门的获取阶段目标的API
|
const phases = data.rows || data;
|
phaseGoalList.value = [];
|
|
phases.forEach(phase => {
|
if (phase.oaProjectPhaseTasks && phase.oaProjectPhaseTasks.length > 0) {
|
phase.oaProjectPhaseTasks.forEach(goal => {
|
phaseGoalList.value.push({
|
...goal,
|
phaseName: phase.phaseName
|
});
|
});
|
}
|
});
|
} catch (error) {
|
ElMessage.error('获取阶段目标列表失败');
|
console.error('获取阶段目标列表失败:', error);
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 编辑阶段目标
|
const handleEdit = (goal) => {
|
// 触发父组件的编辑事件，传递目标数据
|
emit('editGoal', goal);
|
};
|
|
// 删除阶段目标
|
const handleDelete = async (goal) => {
|
try {
|
await ElMessageBox.confirm(
|
`确定要删除目标「${goal.taskName}」吗？`,
|
'确认删除',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}
|
);
|
|
// 调用删除API
|
await delProjectTask(goal.taskId);
|
ElMessage.success('删除阶段目标成功');
|
|
// 刷新列表
|
getPhaseGoalList();
|
emit('refresh');
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error('删除阶段目标失败');
|
console.error('删除阶段目标失败:', error);
|
}
|
}
|
};
|
|
// 获取状态标签类型
|
const getStatusType = (status) => {
|
const statusTypeMap = {
|
notStarted: 'info',
|
inProgress: 'primary',
|
completed: 'success',
|
delayed: 'danger'
|
};
|
return statusTypeMap[status] || 'default';
|
};
|
|
// 获取状态文本
|
const getStatusText = (status) => {
|
const statusTextMap = {
|
notStarted: '未开始',
|
inProgress: '进行中',
|
completed: '已完成',
|
delayed: '已延迟'
|
};
|
return statusTextMap[status] || status;
|
};
|
|
// 监听项目ID变化
|
watch(() => props.projectId, () => {
|
if (props.projectId) {
|
getPhaseGoalList();
|
}
|
});
|
|
// 初始化
|
onMounted(() => {
|
if (props.projectId) {
|
getPhaseGoalList();
|
}
|
});
|
</script>
|
|
<style scoped>
|
.phase-goal-list-container {
|
padding: 10px 0;
|
}
|
|
.empty-tip {
|
margin-top: 40px;
|
text-align: center;
|
}
|
</style>
|
