chenyuan1
/
dianshang-qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add product development process step two

Browse Source
dev-QQq
chenyuan 3 weeks ago
parent 7ab7c4c930
commit eb093281cf
2 changed files with 102 additions and 3 deletions
Show Stats Download Patch File Download Diff File

20
src/api/studentTrainingAnswer.js
Unescape Escape View File

@ -129,6 +129,26 @@ export function checkProductDevelopmentProcessStepOne(items) {
});
}
export function checkProductDevelopmentProcessStepTwo(items) {
if (isStudentDemo()) {
const rows = Array.isArray(items) ? items : [];
const incomplete = rows.length !== Object.keys(productDevelopmentProcessStepOneAnswers).length || rows.find((row) => {
const startDate = String(row?.startDate || "").trim();
const endDate = String(row?.endDate || "").trim();
return !startDate || !endDate || !String(row?.dependency || "").trim() || startDate > endDate
|| productDevelopmentProcessStepOneAnswers[row?.taskNo] !== row?.classification;
});
if (incomplete) return Promise.reject(new Error("请完整填写任务工期和项目依赖关系，并先完成第一步关键任务判断"));
return Promise.resolve({ code: 200, data: { valid: true, message: "校验通过" } });
}
return request({
url: "/api/student-training-answers/product-development-process/step-2/validate",
method: "post",
data: { items },
headers: { repeatSubmit: false },
});
}
function validateNewProductSurveyStepTwoDemo(form) {
const value = form || {};
const images = Array.isArray(value.images) ? value.images : [];

85
src/views/foundation/product-development-process.vue
Unescape Escape View File

@ -59,6 +59,34 @@
<button type="button" class="btn-nav" :disabled="checking" @click="resetTraining"><el-icon><RefreshLeft /></el-icon>清空填写</button>
</div>
</template>
<template v-else-if="currentStep === 2">
<div class="step-title-row">
<div><p class="section-eyebrow">Step 02</p><h3>{{ trainingSteps[1] }}</h3></div>
<span class="step-chip">项目排期练习</span>
</div>
<p class="process-intro">将开发一款互联网产品的模糊目标，拆解为可执行的具体工作任务。根据案例信息，填写参考工期和项目依赖关系。</p>
<p v-if="!hasCompletedStepOne" class="step-warning">请先完成第 1 步并判题通过；关键任务结果会自动带入本表。</p>
<div class="training-table-wrap">
<table class="process-table schedule-table">
<thead><tr><th>阶段</th><th>任务编号</th><th>具体工作任务</th><th>是否关键任务</th><th>开始时间</th><th>完成时间</th><th>项目依赖关系</th></tr></thead>
<tbody>
<tr v-for="row in processRows" :key="row.taskNo">
<td class="stage-cell">{{ row.stage }}</td>
<td class="task-no-cell">{{ row.taskNo }}</td>
<td class="task-cell">{{ row.task }}</td>
<td class="classification-cell">{{ row.classification || '—' }}</td>
<td><input v-model="row.startDate" type="date" :disabled="!hasCompletedStepOne || checking" /></td>
<td><input v-model="row.endDate" type="date" :disabled="!hasCompletedStepOne || checking" /></td>
<td><input v-model.trim="row.dependency" class="dependency-input" :disabled="!hasCompletedStepOne || checking" placeholder="如：1.1；无" maxlength="100" /></td>
</tr>
</tbody>
</table>
</div>
<div class="task-actions">
<button type="button" class="btn-nav btn-submit" :disabled="checking || !hasCompletedStepOne" @click="saveAndGoToStepThree">{{ checking ? '校验中…' : '保存并进入第 3 步' }}</button>
<button type="button" class="btn-nav" :disabled="checking" @click="resetStepTwo"><el-icon><RefreshLeft /></el-icon>清空本步</button>
</div>
</template>
<div v-else class="step-placeholder"><p>第 {{ currentStep }} 步内容待配置</p><span>第 1 步答案已保存，可从上方步骤栏返回查看。</span></div>
</section>
</section>
@ -75,7 +103,7 @@
<script setup>
import { Download, Operation, RefreshLeft } from "@element-plus/icons-vue";
import { checkProductDevelopmentProcessStepOne, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
import { checkProductDevelopmentProcessStepOne, checkProductDevelopmentProcessStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import useUserStore from "@/store/modules/user";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
@ -107,12 +135,14 @@ const currentStep = ref(1);
const checking = ref(false);
const draftReady = ref(false);
const checkResult = ref(null);
const stepOnePassed = ref(false);
const taskTitle = computed(() => taskConfig.value?.taskName || defaultTask.title);
const taskBackground = computed(() => taskConfig.value?.background || defaultTask.background);
const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultTask.goals));
const taskRequirement = computed(() => taskConfig.value?.requirements || defaultTask.requirement);
const trainingSteps = computed(() => parseArray(taskConfig.value?.steps, DEFAULT_STEPS));
const feedbackByTaskNo = computed(() => Object.fromEntries((checkResult.value?.items || []).map((item) => [item.taskNo, item])));
const hasCompletedStepOne = computed(() => stepOnePassed.value);
const progressItems = computed(() => [
{ text: `进行中：${trainingSteps.value[Math.max(0, currentStep.value - 1)] || taskTitle.value}`, status: "doing" },
{ text: "完成本步后进入第 2 步", status: "" },
@ -129,7 +159,7 @@ onMounted(async () => {
watch(() => JSON.stringify(buildDraft()), persistDraft);
function createProcessRows() {
return PROCESS_TASKS.map(([stage, taskNo, task]) => ({ stage, taskNo, task, classification: "" }));
return PROCESS_TASKS.map(([stage, taskNo, task]) => ({ stage, taskNo, task, classification: "", startDate: "", endDate: "", dependency: "" }));
}
function parseArray(value, fallback) {
@ -153,8 +183,10 @@ async function loadSavedAnswer() {
const answer = (await getStudentTrainingAnswer(TASK_KEY))?.data;
if (answer?.step1Answer) {
restoreOutcome(answer.step1Answer);
stepOnePassed.value = processRows.value.every((row) => CLASSIFICATION_OPTIONS.includes(row.classification));
clearDraft();
}
if (answer?.step2Answer) restoreStepTwoOutcome(answer.step2Answer);
const savedStep = Number(answer?.currentStep);
if (Number.isInteger(savedStep) && savedStep > 0) currentStep.value = savedStep;
} catch (error) {
@ -173,6 +205,21 @@ function restoreOutcome(value) {
}
}
function restoreStepTwoOutcome(value) {
try {
const parsed = typeof value === "string" ? JSON.parse(value) : value;
const byTaskNo = Object.fromEntries((Array.isArray(parsed?.items) ? parsed.items : []).map((item) => [item.taskNo, item]));
processRows.value = processRows.value.map((row) => ({
...row,
startDate: byTaskNo[row.taskNo]?.startDate || "",
endDate: byTaskNo[row.taskNo]?.endDate || "",
dependency: byTaskNo[row.taskNo]?.dependency || "",
}));
} catch (error) {
// Ignore a malformed historical second-step answer.
}
}
function getLocalDraftKey() {
const info = userStore.userInfo || {};
return `${TASK_KEY}:draft:${info.userId || info.user_id || info.username || info.userName || "anonymous"}`;
@ -182,7 +229,14 @@ function buildOutcome() {
return { title: taskTitle.value, items: processRows.value.map(({ taskNo, classification }) => ({ taskNo, classification })) };
}
function buildDraft() { return { step1: buildOutcome(), currentStep: currentStep.value }; }
function buildStepTwoOutcome() {
return {
title: taskTitle.value,
items: processRows.value.map(({ taskNo, classification, startDate, endDate, dependency }) => ({ taskNo, classification, startDate, endDate, dependency })),
};
}
function buildDraft() { return { step1: buildOutcome(), step2: buildStepTwoOutcome(), currentStep: currentStep.value }; }
function persistDraft() {
if (!draftReady.value) return;
@ -195,6 +249,7 @@ function loadDraft() {
if (raw) {
const draft = JSON.parse(raw);
restoreOutcome(draft?.step1 || draft);
if (draft?.step2) restoreStepTwoOutcome(draft.step2);
if (Number(draft?.currentStep) > 0) currentStep.value = Number(draft.currentStep);
}
} catch (error) { clearDraft(); }
@ -226,6 +281,7 @@ async function saveAndGoToStepTwo() {
}
await saveStudentTrainingAnswer(TASK_KEY, { step1Answer: JSON.stringify(buildOutcome()), currentStep: 2, submitted: false, saveAction: "SAVE" });
clearDraft();
stepOnePassed.value = true;
currentStep.value = 2;
proxy?.$modal?.msgSuccess("已保存，已进入第 2 步");
} catch (error) {
@ -239,6 +295,7 @@ async function resetTraining() {
processRows.value = createProcessRows();
currentStep.value = 1;
checkResult.value = null;
stepOnePassed.value = false;
clearDraft();
try {
checking.value = true;
@ -251,6 +308,27 @@ async function resetTraining() {
proxy?.$modal?.msgSuccess("已清空填写内容");
}
async function saveAndGoToStepThree() {
if (checking.value || !hasCompletedStepOne.value) return;
checking.value = true;
try {
await checkProductDevelopmentProcessStepTwo(buildStepTwoOutcome().items);
await saveStudentTrainingAnswer(TASK_KEY, { step2Answer: JSON.stringify(buildStepTwoOutcome()), currentStep: 3, submitted: false, saveAction: "SAVE" });
clearDraft();
currentStep.value = 3;
proxy?.$modal?.msgSuccess("已保存，已进入第 3 步");
} catch (error) {
proxy?.$modal?.msgError?.(error?.message || "请完整填写任务工期和项目依赖关系");
} finally {
checking.value = false;
}
}
function resetStepTwo() {
processRows.value = processRows.value.map((row) => ({ ...row, startDate: "", endDate: "", dependency: "" }));
proxy?.$modal?.msgSuccess("已清空第 2 步填写内容");
}
function exportOutcome() {
const blob = new Blob([JSON.stringify(buildDraft(), null, 2)], { type: "application/json;charset=utf-8" });
const url = URL.createObjectURL(blob);
@ -274,6 +352,7 @@ function exportOutcome() {
.workbench-actions, .task-actions { display: flex; align-items: center; gap: 12px; }.workbench-actions { justify-content: flex-end; }.outline-action, .btn-nav { border: 1px solid #2cc9ff; border-radius: 999px; padding: 10px 18px; color: #dff8ff; background: rgba(8, 87, 121, .55); cursor: pointer; }.outline-action { display: inline-flex; align-items: center; gap: 6px; }
.step-indicator { display: flex; align-items: center; gap: 12px; margin: 28px 0; padding: 12px; border: 1px solid rgba(30, 190, 255, .28); border-radius: 22px; }.step-tab { display: flex; align-items: center; flex: 1; gap: 10px; min-width: 0; padding: 10px; border: 0; border-radius: 16px; color: #96c6d8; background: transparent; text-align: left; cursor: pointer; }.step-tab.active { color: #fff; background: linear-gradient(110deg, #148fc6, #0879aa); }.step-marker { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #4ed7ff; border-radius: 50%; font-weight: 800; }.step-copy { display: grid; min-width: 0; gap: 4px; }.step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.step-action { font-size: 12px; color: #5ec9ed; }.step-connector { flex: 0 0 25px; height: 2px; background: rgba(83, 204, 255, .4); }
.process-step-card { padding: 24px; border: 1px solid rgba(31, 185, 249, .32); border-radius: 18px; background: rgba(1, 21, 34, .65); }.step-title-row { display: flex; justify-content: space-between; align-items: flex-start; }.step-title-row h3 { margin: 5px 0 0; color: #fff; font-size: 24px; }.step-chip { border: 1px solid #38caff; border-radius: 999px; padding: 7px 12px; color: #9aeaff; }.process-intro { margin: 24px 0; line-height: 1.8; color: #c5e4ef; }.training-table-wrap { overflow-x: auto; }.process-table { width: 100%; min-width: 740px; border-collapse: collapse; color: #dff5ff; }.process-table th { padding: 14px; color: #fff; background: #079ed9; font-size: 16px; }.process-table td, .process-table th { border: 1px solid rgba(139, 213, 241, .45); text-align: center; }.process-table td { padding: 9px 12px; }.stage-cell { width: 16%; font-weight: 700; }.task-no-cell { width: 15%; }.task-cell { width: 37%; }.select-cell { width: 32%; }.select-cell select { width: 170px; max-width: 100%; padding: 6px 10px; border: 1px solid #6ea9bd; color: #132c36; background: #fff; font-size: 15px; }.classification-feedback { margin: 6px 0 0; color: #ff9b8f; font-size: 12px; }.is-correct { background: rgba(55, 196, 147, .08); }.is-incorrect { background: rgba(255, 91, 82, .1); }.classification-summary { margin: 16px 0 0; color: #ffbc86; }.classification-summary.is-success { color: #6ee8b1; }.task-actions { justify-content: center; margin-top: 26px; }.btn-submit { border-color: #36d9ff; background: linear-gradient(110deg, #0eaae4, #0572ac); font-weight: 700; }.btn-nav:disabled { opacity: .6; cursor: not-allowed; }.step-placeholder { padding: 90px 20px; text-align: center; color: #a8cfdd; }.step-placeholder p { color: #fff; font-size: 20px; }
.step-warning { margin: 0 0 16px; padding: 10px 14px; border: 1px solid rgba(255, 173, 93, .62); border-radius: 8px; color: #ffd19f; background: rgba(187, 102, 27, .16); }.schedule-table { min-width: 1180px; }.schedule-table .stage-cell { width: 13%; }.schedule-table .task-no-cell { width: 9%; }.schedule-table .task-cell { width: 20%; }.classification-cell { width: 13%; font-weight: 700; }.schedule-table input { box-sizing: border-box; width: 150px; max-width: 100%; padding: 7px 8px; border: 1px solid #6ea9bd; color: #132c36; background: #fff; }.schedule-table .dependency-input { width: 190px; }.schedule-table input:disabled { cursor: not-allowed; opacity: .6; }
@media (max-width: 1280px) { .product-process { grid-template-columns: 1fr; }.step-indicator { overflow-x: auto; }.step-tab { min-width: 190px; } }
@media (max-width: 720px) { .product-process { padding: 12px; }.process-workbench { margin: 12px; padding: 14px; }.task-header { padding: 18px; }.workbench-actions { justify-content: flex-start; flex-wrap: wrap; }.step-title-row { gap: 12px; }.step-chip { display: none; } }
</style>

Write Preview
Loading…
Cancel
Save