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/productionPlan/productionPlan/index.vue | 316 +++++++++++++++++++---------------------------------
1 files changed, 115 insertions(+), 201 deletions(-)
diff --git a/src/views/productionPlan/productionPlan/index.vue b/src/views/productionPlan/productionPlan/index.vue
index 8289f26..a294890 100644
--- a/src/views/productionPlan/productionPlan/index.vue
+++ b/src/views/productionPlan/productionPlan/index.vue
@@ -3,36 +3,9 @@
<div class="search_form">
<el-form :model="searchForm"
:inline="true">
- <el-form-item label="瀹㈡埛鍚嶇О:">
- <el-input v-model="searchForm.customerName"
- placeholder="璇疯緭鍏�"
- clearable
- style="width: 160px;"
- @keyup.enter="handleQuery" />
- </el-form-item>
+ <!-- 绠�鍖栫増鎼滅储鏉′欢 -->
<el-form-item label="浜у搧鍚嶇О:">
<el-input v-model="searchForm.productName"
- placeholder="璇疯緭鍏�"
- clearable
- style="width: 160px;"
- @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="浜у搧瑙勬牸:">
- <el-input v-model="searchForm.model"
- placeholder="璇疯緭鍏�"
- clearable
- style="width: 160px;"
- @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鐗╂枡缂栫爜:">
- <el-input v-model="searchForm.materialCode"
- placeholder="璇疯緭鍏�"
- clearable
- style="width: 160px;"
- @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鐢宠鍗曠紪鍙�:">
- <el-input v-model="searchForm.applyNo"
placeholder="璇疯緭鍏�"
clearable
style="width: 160px;"
@@ -50,7 +23,7 @@
</el-form-item>
<el-form-item label="涓嬪彂鐘舵��:">
<el-select v-model="searchForm.status"
- placeholder="璇烽�夋嫨鐘舵��"
+ placeholder="璇烽�夋嫨鐘舵��"
clearable
filterable
style="width: 100px">
@@ -62,6 +35,37 @@
value="2" />
</el-select>
</el-form-item>
+ <!-- 灞曞紑鐗堟悳绱㈡潯浠� -->
+ <template v-if="searchFormExpanded">
+ <el-form-item label="瀹㈡埛鍚嶇О:">
+ <el-input v-model="searchForm.customerName"
+ placeholder="璇疯緭鍏�"
+ clearable
+ style="width: 160px;"
+ @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="浜у搧瑙勬牸:">
+ <el-input v-model="searchForm.model"
+ placeholder="璇疯緭鍏�"
+ clearable
+ style="width: 160px;"
+ @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="鐗╂枡缂栫爜:">
+ <el-input v-model="searchForm.materialCode"
+ placeholder="璇疯緭鍏�"
+ clearable
+ style="width: 160px;"
+ @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="鐢宠鍗曠紪鍙�:">
+ <el-input v-model="searchForm.applyNo"
+ placeholder="璇疯緭鍏�"
+ clearable
+ style="width: 160px;"
+ @keyup.enter="handleQuery" />
+ </el-form-item>
+ </template>
<el-form-item>
<el-button type="primary"
@click="handleQuery">鎼滅储</el-button>
@@ -82,6 +86,16 @@
<div>
</div>
</div>
+ <div class="search-header">
+ <el-button type="text"
+ @click="toggleSearchForm">
+ <el-icon>
+ <ArrowUp v-if="searchFormExpanded" />
+ <ArrowDown v-else />
+ </el-icon>
+ {{ searchFormExpanded ? '鏀惰捣鎼滅储鏉′欢' : '灞曞紑鎼滅储鏉′欢' }}
+ </el-button>
+ </div>
<div class="table_list">
<PIMTable rowKey="id"
:column="tableColumn"
@@ -93,10 +107,17 @@
:selectable="isSelectable"
@selection-change="handleSelectionChange"
@pagination="pagination">
+ <template #quantity="{ row }">
+ {{ row.quantity || '-' }}<span style="color:rgb(63, 95, 211)"> 鍧�</span>
+ </template>
+ <template #volume="{ row }">
+ {{ row.volume || '-' }}<span style="color:rgba(12, 46, 40, 0.76)"> 鏂�</span>
+ </template>
</PIMTable>
</div>
<!-- 鍚堝苟涓嬪彂寮圭獥 -->
<el-dialog v-model="isShowNewModal"
+ destroy-on-close
title="鍚堝苟涓嬪彂"
width="600px">
<el-form :model="mergeForm"
@@ -166,72 +187,6 @@
</span>
</template>
</el-dialog>
- <!-- 杩借釜杩涘害寮圭獥 -->
- <el-dialog v-model="showTrackProgressDialog"
- :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"
@@ -246,6 +201,7 @@
@close="handleImportClose" />
<!-- 鏂板/缂栬緫寮圭獥 -->
<el-dialog v-model="dialogVisible"
+ destroy-on-close
:title="operationType === 'add' ? '鏂板鐢熶骇璁″垝' : '缂栬緫鐢熶骇璁″垝'"
width="600px">
<el-form ref="formRef"
@@ -366,10 +322,12 @@
<script setup>
import { onMounted, ref, reactive, getCurrentInstance, toRefs } from "vue";
import { ElMessage } from "element-plus";
+ import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import dayjs from "dayjs";
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,
@@ -387,6 +345,7 @@
} from "@/api/basicData/newProduct.js";
const { proxy } = getCurrentInstance();
+ const router = useRouter();
const tableColumn = ref([
{
@@ -441,14 +400,18 @@
{
label: "鍧楁暟",
prop: "quantity",
- formatData: cell => (cell ? `${cell}鍧梎 : ""),
+ align: "right",
+ dataType: "slot",
+ slot: "quantity",
},
{
label: "鏂规暟",
prop: "volume",
width: "150px",
+ align: "right",
+ dataType: "slot",
+ slot: "volume",
className: "volume-cell",
- formatData: cell => (cell ? `${cell}鏂筦 : ""),
},
{
label: "涓嬪彂鐘舵��",
@@ -638,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);
@@ -716,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 => {
// 闄愬埗鍥涗綅灏忔暟
@@ -816,77 +760,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({
searchForm: {
customerName: "",
@@ -896,8 +769,14 @@
applyNo: "",
dateRange: [],
},
+ searchFormExpanded: false,
});
- const { searchForm } = toRefs(data);
+ const { searchForm, searchFormExpanded } = toRefs(data);
+
+ // 鍒囨崲鎼滅储琛ㄥ崟灞曞紑/鏀惰捣鐘舵��
+ const toggleSearchForm = () => {
+ data.searchFormExpanded = !data.searchFormExpanded;
+ };
// 鏌ヨ鍒楄〃
/** 鎼滅储鎸夐挳鎿嶄綔 */
@@ -1042,7 +921,7 @@
sum +
(row.volume == null
? 0
- : (Number(row.volume) - Number(row.assignedQuantity)).toFixed(4))
+ : Number(Number(row.volume) - Number(row.assignedQuantity).toFixed(4)))
);
}, 0);
sumAssignedQuantity.value = totalAssignedQuantity;
@@ -1087,7 +966,14 @@
}
console.log(mergeForm, "mergeForm");
- productionPlanCombine(mergeForm)
+ const strengthItem = block_strength.value.find(
+ item => item.id === mergeForm.strength
+ );
+ const payload = {
+ ...mergeForm,
+ strength: strengthItem ? strengthItem.label : mergeForm.strength,
+ };
+ productionPlanCombine(payload)
.then(res => {
if (res.code === 200) {
ElMessage.success("涓嬪彂鎴愬姛");
@@ -1318,10 +1204,7 @@
}
.search_form {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 24px;
+ // margin-bottom: 24px;
padding: 20px;
background-color: #ffffff;
border-radius: 6px;
@@ -1333,6 +1216,36 @@
}
}
+ .search-header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ // margin-bottom: 5px;
+ // padding-bottom: 5px;
+ position: relative;
+ bottom: 35px;
+ // border-bottom: 1px solid #ebeef5;
+ }
+
+ .search-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #303133;
+ }
+
+ .search-header .el-button {
+ color: #606266;
+ transition: all 0.3s ease;
+ }
+
+ .search-header .el-button:hover {
+ color: #409eff;
+ }
+
+ .search-header .el-icon {
+ margin-right: 4px;
+ }
+
.table_list {
// margin-bottom: 24px;
background-color: #ffffff;
@@ -1340,6 +1253,7 @@
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
height: calc(100vh - 250px);
+ margin-top: 0px !important;
}
:deep(.el-table) {
--
Gitblit v1.9.3