From 79871604f3c79e0ee7a15d198ef321b42fe65c24 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 27 三月 2026 17:54:56 +0800
Subject: [PATCH] 追踪进度页面修改
---
src/views/qualityManagement/rawMaterialInspection/components/formDia.vue | 2
src/views/productionPlan/productionPlan/index.vue | 173 --------------
src/views/productionPlan/trackProgress/index.vue | 441 ++++++++++++++++++++++++++++++++++++++++
vite.config.js | 2
4 files changed, 452 insertions(+), 166 deletions(-)
diff --git a/src/views/productionPlan/productionPlan/index.vue b/src/views/productionPlan/productionPlan/index.vue
index ed7011e..a294890 100644
--- a/src/views/productionPlan/productionPlan/index.vue
+++ b/src/views/productionPlan/productionPlan/index.vue
@@ -187,73 +187,6 @@
</span>
</template>
</el-dialog>
- <!-- 杩借釜杩涘害寮圭獥 -->
- <el-dialog v-model="showTrackProgressDialog"
- destroy-on-close
- :title="`杩借釜杩涘害 - ${trackProgressForm.materialCode || ''}`"
- width="600px">
- <el-form :model="trackProgressForm"
- label-width="120px">
- <el-form-item label="鐗╂枡缂栫爜">
- <el-input v-model="trackProgressForm.materialCode"
- disabled />
- </el-form-item>
- <el-form-item label="褰撳墠鐘舵��">
- <el-select v-model="trackProgressForm.currentStatus"
- placeholder="璇烽�夋嫨鐘舵��">
- <el-option label="寰呭鐞�"
- value="pending" />
- <el-option label="杩涜涓�"
- value="processing" />
- <el-option label="宸插畬鎴�"
- value="completed" />
- </el-select>
- </el-form-item>
- <el-form-item label="瀹屾垚杩涘害">
- <el-progress :percentage="trackProgressForm.completionRate"
- :status="trackProgressForm.completionRate === 100 ? 'success' : ''" />
- </el-form-item>
- <el-form-item label="杩涘害璇︽儏">
- <el-table :data="trackProgressForm.progressDetails"
- border
- style="width: 100%">
- <el-table-column prop="step"
- label="姝ラ"
- align="center"
- width="100" />
- <el-table-column prop="status"
- label="鐘舵��"
- align="center"
- width="100">
- <template #default="scope">
- <el-tag :type="scope.row.status === 'completed' ? 'success' : scope.row.status === 'processing' ? 'warning' : 'info'">
- {{ scope.row.status === 'completed' ? '宸插畬鎴�' : scope.row.status === 'processing' ? '杩涜涓�' : '寰呭紑濮�' }}
- </el-tag>
- </template>
- </el-table-column>
- <el-table-column prop="startTime"
- label="寮�濮嬫椂闂�"
- align="center"
- width="180" />
- <el-table-column prop="endTime"
- label="缁撴潫鏃堕棿"
- align="center"
- width="180" />
- </el-table>
- </el-form-item>
- <el-form-item label="澶囨敞">
- <el-input v-model="trackProgressForm.remark"
- type="textarea" />
- </el-form-item>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="showTrackProgressDialog = false">鍏抽棴</el-button>
- <el-button type="primary"
- @click="handleUpdateProgress">鏇存柊杩涘害</el-button>
- </span>
- </template>
- </el-dialog>
<!-- 瀵煎叆寮圭獥 -->
<ImportDialog ref="importDialogRef"
v-model="importDialogVisible"
@@ -394,6 +327,7 @@
import ImportDialog from "@/components/Dialog/ImportDialog.vue";
import { getToken } from "@/utils/auth";
import { useDict } from "@/utils/dict";
+ import { useRouter } from "vue-router";
import {
productionPlanListPage,
loadProdData,
@@ -411,6 +345,7 @@
} from "@/api/basicData/newProduct.js";
const { proxy } = getCurrentInstance();
+ const router = useRouter();
const tableColumn = ref([
{
@@ -666,17 +601,6 @@
strength: "",
});
- // 杩借釜杩涘害寮圭獥鎺у埗
- const showTrackProgressDialog = ref(false);
- // 杩借釜杩涘害琛ㄥ崟鏁版嵁
- const trackProgressForm = reactive({
- materialCode: "",
- currentStatus: "",
- completionRate: 0,
- progressDetails: [],
- remark: "",
- });
-
// 瀵煎叆鐩稿叧
const importDialogRef = ref(null);
const importDialogVisible = ref(false);
@@ -744,21 +668,13 @@
// 澶勭悊杩借釜杩涘害鎸夐挳鐐瑰嚮
const handleTrackProgress = row => {
- // 璁剧疆琛ㄥ崟鏁版嵁
- trackProgressForm.materialCode = row.materialCode;
- trackProgressForm.currentStatus = row.status;
-
- // 鐢熸垚妯℃嫙杩涘害鏁版嵁
- trackProgressForm.progressDetails = generateProgressDetails(row.status);
-
- // 璁＄畻瀹屾垚鐜�
- trackProgressForm.completionRate = calculateCompletionRate(
- trackProgressForm.progressDetails
- );
- trackProgressForm.remark = "";
-
- // 鎵撳紑寮圭獥
- showTrackProgressDialog.value = true;
+ // 璺宠浆鍒拌拷韪繘搴﹂〉闈�
+ router.push({
+ path: "/productionPlan/trackProgress",
+ query: {
+ row: encodeURIComponent(JSON.stringify(row)),
+ },
+ });
};
const onBlur = value => {
// 闄愬埗鍥涗綅灏忔暟
@@ -842,77 +758,6 @@
}
}
}
- };
-
- // 鐢熸垚妯℃嫙杩涘害璇︽儏鏁版嵁
- const generateProgressDetails = status => {
- const details = [
- {
- step: "璁″垝纭",
- status: "completed",
- startTime: "2026-03-01 09:00:00",
- endTime: "2026-03-01 10:00:00",
- },
- {
- step: "鐗╂枡鍑嗗",
- status:
- status === "completed"
- ? "completed"
- : status === "processing"
- ? "completed"
- : "pending",
- startTime:
- status === "completed" || status === "processing"
- ? "2026-03-01 10:30:00"
- : "",
- endTime:
- status === "completed" || status === "processing"
- ? "2026-03-02 16:00:00"
- : "",
- },
- {
- step: "鐢熶骇鍔犲伐",
- status:
- status === "completed"
- ? "completed"
- : status === "processing"
- ? "processing"
- : "pending",
- startTime:
- status === "completed" || status === "processing"
- ? "2026-03-03 08:00:00"
- : "",
- endTime: status === "completed" ? "2026-03-08 17:00:00" : "",
- },
- {
- step: "璐ㄩ噺妫�楠�",
- status: status === "completed" ? "completed" : "pending",
- startTime: status === "completed" ? "2026-03-09 09:00:00" : "",
- endTime: status === "completed" ? "2026-03-09 15:00:00" : "",
- },
- {
- step: "鍏ュ簱",
- status: status === "completed" ? "completed" : "pending",
- startTime: status === "completed" ? "2026-03-10 10:00:00" : "",
- endTime: status === "completed" ? "2026-03-10 11:00:00" : "",
- },
- ];
- return details;
- };
-
- // 璁＄畻瀹屾垚鐜�
- const calculateCompletionRate = details => {
- const completedSteps = details.filter(
- step => step.status === "completed"
- ).length;
- return Math.round((completedSteps / details.length) * 100);
- };
-
- // 澶勭悊杩涘害鏇存柊
- const handleUpdateProgress = () => {
- // 杩欓噷鍙互娣诲姞鏇存柊杩涘害鐨勯�昏緫
- ElMessage.success("杩涘害鏇存柊鎴愬姛");
- showTrackProgressDialog.value = false;
};
const data = reactive({
diff --git a/src/views/productionPlan/trackProgress/index.vue b/src/views/productionPlan/trackProgress/index.vue
new file mode 100644
index 0000000..bd48010
--- /dev/null
+++ b/src/views/productionPlan/trackProgress/index.vue
@@ -0,0 +1,441 @@
+<template>
+ <div class="app-container">
+ <PageHeader content="鐢熶骇璁″垝杩借釜杩涘害">
+ </PageHeader>
+ <el-card style="height:82vh;overflow:auto;">
+ <template #header>
+ <div class="card-header">
+ <span>鐢宠鍗曠紪鍙� - {{ rowData.applyNo || '' }}</span>
+ </div>
+ </template>
+ <!-- 鍩虹淇℃伅 -->
+ <div class="detail-section">
+ <h3 class="section-title">鍩虹淇℃伅</h3>
+ <el-descriptions :column="3"
+ border>
+ <el-descriptions-item label="鐢宠鍗曠紪鍙�">{{ rowData.applyNo || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="浜у搧鍚嶇О">{{ rowData.productName || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="浜у搧瑙勬牸">{{ rowData.model || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鐗╂枡缂栫爜">{{ rowData.materialCode || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="涓嬪彂鏁伴噺">{{ rowData.assignedQuantity || 0 }} <span class="unit">鏂�</span></el-descriptions-item>
+ <el-descriptions-item label="褰撳墠鐘舵��">
+ <el-tag :type="getStatusType(rowData.status)">
+ {{ getStatusText(rowData.status) }}
+ </el-tag>
+ </el-descriptions-item>
+ </el-descriptions>
+ </div>
+ <div class="progress-container">
+ <div class="progress-section">
+ <h3 class="section-title">杩涘害淇℃伅</h3>
+ <div class="progress-item">
+ <div class="progress-label">瀹屾垚杩涘害锛�</div>
+ <div class="progress-content">
+ <el-progress :percentage="trackProgressForm.completionRate"
+ :color="customColors"
+ :status="trackProgressForm.completionRate === 100 ? 'success' : ''" />
+ </div>
+ </div>
+ <div class="progress-item">
+ <div class="progress-label">杩涘害璇︽儏锛�</div>
+ <div class="progress-content">
+ <el-table :data="trackProgressForm.progressDetails"
+ border
+ style="width: auto; height: 300px">
+ <el-table-column prop="step"
+ label="姝ラ锛堢偣鍑绘煡鐪嬭鎯咃級"
+ align="center">
+ <template #default="{ row, $index }">
+ <el-link v-if="$index!=0"
+ @click="handleClickStep(row)"
+ type="primary">{{ row.step }}</el-link>
+ <span v-else
+ @click="handleClickStep(row)">{{ row.step }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="status"
+ label="鐘舵��"
+ align="center">
+ <template #default="scope">
+ <el-tag :type="scope.row.status === 'completed' ? 'success' : scope.row.status === 'processing' ? 'warning' : 'info'">
+ {{ scope.row.status === 'completed' ? '宸插畬鎴�' : scope.row.status === 'processing' ? '杩涜涓�' : '寰呭紑濮�' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="quantity"
+ label="鏁伴噺"
+ align="center" />
+ <el-table-column prop="startTime"
+ label="鏃堕棿"
+ align="center" />
+ </el-table>
+ </div>
+ </div>
+ </div>
+ <div class="progress-section">
+ <h3 class="section-title">璁㈠崟淇℃伅</h3>
+ <div v-for="item in rowData.orderList"
+ :key="item.orderNo"
+ class="order-item">
+ <el-descriptions :column="3"
+ border>
+ <el-descriptions-item label="璁㈠崟缂栧彿">{{ item.orderNo || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="璁㈠崟鐘舵��">
+ <el-tag :type="getStatusType(item.status)">{{ getStatusText(item.status) }}</el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="寮�濮嬫棩鏈�">{{ item.startTime || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="闇�姹傛暟閲�">{{ item.quantity || 0 }} <span class="unit">鏂�</span></el-descriptions-item>
+ <el-descriptions-item label="瀹屾垚鏁伴噺">{{ item.completeQuantity || 0 }} <span class="unit">鏂�</span></el-descriptions-item>
+ <el-descriptions-item label="瀹屾垚杩涘害">
+ <el-progress :percentage="item.completionRate"
+ :color="customColors(item.completionRate)"
+ :status="item.completionRate === 100 ? 'success' : ''"
+ style="width: 120px;" />
+ </el-descriptions-item>
+ </el-descriptions>
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+ import { ref, reactive, onMounted } from "vue";
+ import { ElMessage } from "element-plus";
+ import { useRouter, useRoute } from "vue-router";
+
+ const router = useRouter();
+ const route = useRoute();
+
+ // 璺敱鍙傛暟鏁版嵁
+ const rowData = reactive({});
+
+ // 杩借釜杩涘害琛ㄥ崟鏁版嵁
+ const trackProgressForm = reactive({
+ materialCode: "",
+ currentStatus: "",
+ completionRate: 0,
+ progressDetails: [],
+ remark: "",
+ });
+
+ // 鑾峰彇鐘舵�佺被鍨�
+ const getStatusType = status => {
+ const typeMap = {
+ 0: "warning",
+ 1: "primary",
+ 2: "info",
+ };
+ return typeMap[status] || "info";
+ };
+
+ // 鑾峰彇鐘舵�佹枃鏈�
+ const getStatusText = status => {
+ const statusMap = {
+ 0: "寰呬笅鍙�",
+ 1: "閮ㄥ垎涓嬪彂",
+ 2: "宸蹭笅鍙�",
+ };
+ return statusMap[status] || "";
+ };
+ const customColors = percentage => {
+ if (Number(percentage) < 10) {
+ return "#909399";
+ }
+ if (Number(percentage) < 70) {
+ return "#e6a23c";
+ }
+ return "#67c23a";
+ };
+
+ // 鐢熸垚妯℃嫙杩涘害璇︽儏鏁版嵁
+ const generateProgressDetails = status => {
+ const details = [
+ {
+ step: "璁″垝纭",
+ status: "completed",
+ quantity: 233,
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ {
+ step: "绗竴娆℃姤宸�",
+ status: "completed",
+ quantity: 233,
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ {
+ step: "绗簩娆℃姤宸�",
+ status: "completed",
+ quantity: 233,
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ {
+ step: "绗笁娆℃姤宸�",
+ status: "completed",
+ quantity: 233,
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ {
+ step: "绗洓娆℃姤宸�",
+ status: "completed",
+ quantity: 233,
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ {
+ step: "绗簲娆℃姤宸�",
+ status: "completed",
+ quantity: 233,
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ {
+ step: "绗叚娆℃姤宸�",
+ status: "completed",
+ quantity: 233,
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ {
+ step: "绗竷娆℃姤宸�",
+ status: "completed",
+ quantity: 233,
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ ];
+ return details;
+ };
+
+ // 璁＄畻瀹屾垚鐜�
+ const calculateCompletionRate = details => {
+ const completedSteps = details.filter(
+ step => step.status === "completed"
+ ).length;
+ return Math.round((completedSteps / details.length) * 100);
+ };
+
+ // 澶勭悊杩涘害鏇存柊
+ const handleUpdateProgress = () => {
+ // 杩欓噷鍙互娣诲姞鏇存柊杩涘害鐨勯�昏緫
+ ElMessage.success("杩涘害鏇存柊鎴愬姛");
+ };
+
+ // 澶勭悊杩斿洖
+ const handleBack = () => {
+ router.push("/productionPlan/productionPlan");
+ };
+
+ // 鐢熸垚妯℃嫙璁㈠崟鏁版嵁
+ const generateOrderList = () => {
+ return [
+ {
+ orderNo: "ORD-2026-001",
+ status: 1,
+ quantity: 233.28,
+ completeQuantity: 14,
+ completionRate: 6,
+ startTime: "2026-03-25",
+ },
+ {
+ orderNo: "ORD-2026-002",
+ status: 2,
+ quantity: 150.5,
+ completeQuantity: 100,
+ completionRate: 67,
+ startTime: "2026-03-20",
+ },
+ {
+ orderNo: "ORD-2026-003",
+ status: 0,
+ quantity: 80.0,
+ completeQuantity: 0,
+ completionRate: 0,
+ startTime: "2026-03-30",
+ },
+ ];
+ };
+
+ // 椤甸潰鍔犺浇鏃惰幏鍙栨暟鎹�
+ onMounted(() => {
+ // 浠庤矾鐢卞弬鏁颁腑鑾峰彇鏁版嵁
+ const data = route.query.row
+ ? JSON.parse(decodeURIComponent(route.query.row))
+ : null;
+ if (data) {
+ // 璧嬪�肩粰rowData
+ Object.assign(rowData, data);
+ // 璧嬪�肩粰琛ㄥ崟鏁版嵁
+ trackProgressForm.materialCode = data.materialCode;
+ trackProgressForm.currentStatus = data.status;
+ trackProgressForm.progressDetails = generateProgressDetails(data.status);
+ trackProgressForm.completionRate = calculateCompletionRate(
+ trackProgressForm.progressDetails
+ );
+ trackProgressForm.remark = "";
+ }
+ // 鐢熸垚妯℃嫙璁㈠崟鏁版嵁
+ rowData.orderList = generateOrderList();
+ });
+</script>
+
+<style scoped>
+ .app-container {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
+ }
+
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 10px;
+ }
+
+ .action-buttons {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 20px;
+ gap: 10px;
+ }
+
+ .detail-section {
+ margin-bottom: 24px;
+ background-color: #ffffff;
+ border-radius: 10px;
+ padding: 24px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+ transition: all 0.3s ease;
+ }
+
+ .detail-section:hover {
+ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
+ }
+
+ .section-title {
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: #1a1a1a;
+ border-bottom: 2px solid #409eff;
+ padding-bottom: 10px;
+ display: flex;
+ align-items: center;
+ }
+
+ .section-title::before {
+ content: "";
+ display: inline-block;
+ width: 4px;
+ height: 16px;
+ background-color: #409eff;
+ margin-right: 8px;
+ border-radius: 2px;
+ }
+
+ .unit {
+ font-size: 12px;
+ color: #909399;
+ margin-left: 4px;
+ }
+
+ :deep(.el-descriptions) {
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ }
+
+ :deep(.el-descriptions__row:nth-child(odd)) {
+ background-color: #f9f9f9;
+ }
+
+ :deep(.el-descriptions__label) {
+ font-weight: 500;
+ color: #606266;
+ background-color: #f5f7fa;
+ }
+
+ :deep(.el-descriptions__content) {
+ color: #303133;
+ font-weight: 500;
+ }
+
+ .progress-container {
+ display: flex;
+ gap: 24px;
+ }
+
+ .progress-section {
+ margin-bottom: 24px;
+ background-color: #ffffff;
+ border-radius: 10px;
+ padding: 24px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+ flex: 1;
+ transition: all 0.3s ease;
+ }
+
+ .progress-section:hover {
+ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
+ }
+
+ .progress-item {
+ margin-bottom: 24px;
+ }
+
+ .progress-label {
+ font-size: 14px;
+ font-weight: 500;
+ color: #606266;
+ margin-bottom: 12px;
+ display: flex;
+ align-items: center;
+ }
+
+ .progress-content {
+ margin-left: 0;
+ }
+
+ .progress-content .el-table {
+ max-height: 400px;
+ overflow-y: auto;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ }
+
+ :deep(.el-table th) {
+ background-color: #f5f7fa !important;
+ font-weight: 600;
+ color: #606266;
+ }
+
+ :deep(.el-table tr:hover) {
+ background-color: #f5f7fa !important;
+ }
+
+ .order-item {
+ margin-bottom: 20px;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ }
+
+ .order-item:last-child {
+ margin-bottom: 0;
+ }
+
+ :deep(.el-progress-bar__inner) {
+ border-radius: 10px;
+ }
+
+ :deep(.el-tag) {
+ border-radius: 12px;
+ padding: 2px 10px;
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/qualityManagement/rawMaterialInspection/components/formDia.vue b/src/views/qualityManagement/rawMaterialInspection/components/formDia.vue
index 2928e42..c5296dc 100644
--- a/src/views/qualityManagement/rawMaterialInspection/components/formDia.vue
+++ b/src/views/qualityManagement/rawMaterialInspection/components/formDia.vue
@@ -347,7 +347,7 @@
testStandardOptions.value = [];
tableData.value = [];
// 鍏堢‘淇濅骇鍝佹爲宸插姞杞斤紝鍚﹀垯缂栬緫鏃朵骇鍝�/瑙勬牸鍨嬪彿鏃犳硶鍙嶆樉
- await getProductOptions();
+ // await getProductOptions();
if (operationType.value === "edit") {
// 鍏堜繚瀛� testStandardId锛岄伩鍏嶈娓呯┖
const savedTestStandardId = row.testStandardId;
diff --git a/vite.config.js b/vite.config.js
index 3ddb11c..5e91d64 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,7 +8,7 @@
const { VITE_APP_ENV } = env;
const baseUrl =
env.VITE_APP_ENV === "development"
- ? "http://192.168.1.234:9019"
+ ? "http://192.168.1.107:7003"
: env.VITE_BASE_API;
const javaUrl =
env.VITE_APP_ENV === "development"
--
Gitblit v1.9.3