From c143be72329489ce0cb74e74bf3455ac405087e5 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 10 一月 2025 17:16:20 +0800
Subject: [PATCH] 表单回显优化
---
src/views/projectManage/plan/planInfo.vue | 92 ++++++++++++++++++++++++++++++----------------
1 files changed, 60 insertions(+), 32 deletions(-)
diff --git a/src/views/projectManage/plan/planInfo.vue b/src/views/projectManage/plan/planInfo.vue
index 3fd438b..789eaf3 100644
--- a/src/views/projectManage/plan/planInfo.vue
+++ b/src/views/projectManage/plan/planInfo.vue
@@ -1,13 +1,19 @@
<template>
<div class="app-container">
<el-container>
- <el-header v-show="planRecordData && planRecordData.projectName" class="header-title">椤圭洰鍚嶇О锛歿{ planRecordData.projectName }} {{ planRecordData.planTimeFlag === 0 ? '(鏈堝害璁″垝)' : planRecordData.planTimeFlag === 1 ? '(瀛ｅ害璁″垝)' : '(骞村害璁″垝)' }}</el-header>
- <h4 v-show="planRecordData && planRecordData.projectCode" style="text-align: center">椤圭洰浠ｇ爜锛歿{ planRecordData.projectCode }}</h4>
+ <el-header class="header-title">椤圭洰鍚嶇О锛歿{ planInfoData.projectName }} ({{planInfoData.planTime}} {{ planInfoData.planTimeFlag === 0 ? '鏈堝害璁″垝' : planInfoData.planTimeFlag === 1 ? '瀛ｅ害璁″垝' : '骞村害璁″垝' }})</el-header>
+ <h4 style="text-align: center">椤圭洰浠ｇ爜锛歿{ planInfoData.projectCode }}</h4>
<el-main>
<el-card shadow="hover">
<el-row :gutter="20">
<el-col :span="24" class="mb-4">
- <el-button type="primary" size="small" @click="handleAdd" style="float: right; margin-bottom: 10px">鏂板</el-button>
+ <el-button
+ type="text"
+ size="medium"
+ icon="el-icon-plus"
+ @click="handleAdd"
+ style="float: right;
+ margin-bottom: 10px">鏂板</el-button>
<el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px">
<el-table-column prop="index" label="搴忓彿" width="50" align="center">
<template #default="scope">
@@ -21,30 +27,47 @@
</el-table-column>
<el-table-column prop="startTime" label="璁″垝寮�濮嬫椂闂�" width="160" align="center">
<template #default="scope">
- <el-date-picker v-model="scope.row.startTime" type="date" placeholder="閫夋嫨鏃ユ湡" size="small" style="width: 130px" />
+ <el-date-picker v-model="scope.row.startTime"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ size="medium"
+ style="width: 130px"
+ value-format="yyyy-MM-dd HH:mm:ss"/>
</template>
</el-table-column>
<el-table-column prop="endTime" label="璁″垝瀹屾垚鏃堕棿" width="160" align="center">
<template #default="scope">
- <el-date-picker v-model="scope.row.endTime" type="date" placeholder="閫夋嫨鏃ユ湡" size="small" style="width: 130px" />
+ <el-date-picker v-model="scope.row.endTime" type="date" placeholder="閫夋嫨鏃ユ湡" size="medium" style="width: 130px" value-format="yyyy-MM-dd HH:mm:ss"/>
</template>
</el-table-column>
- <el-table-column :label="planRecordData.planTimeFlag === 0 ? '鏈堝害' : planRecordData.planTimeFlag === 1 ? '瀛ｅ害' : '骞村害' " width="100" align="center">
+ <el-table-column :label="planInfoData.planTimeFlag === 0 ? '鏈堝害' : planInfoData.planTimeFlag === 1 ? '瀛ｅ害' : '骞村害' " width="100" align="center">
<template #default="scope">
- <span>{{ planRecordData.planTime }}{{ planRecordData.planTimeFlag === 0 ? '鏈堝害' : planRecordData.planTimeFlag === 1 ? '瀛ｅ害' : '骞村害' }}</span>
+ <span>{{ planInfoData.planTime }}{{ planInfoData.planTimeFlag === 0 ? '鏈堝害' : planInfoData.planTimeFlag === 1 ? '瀛ｅ害' : '骞村害' }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="鎿嶄綔" align="center">
<template #default="scope">
- <el-button size="small" @click="handleSave(scope.$index)">淇濆瓨</el-button>
- <el-button size="small" type="danger" @click="handleReset(scope.$index)">閲嶇疆</el-button>
- <el-button size="small" type="danger" @click="handleDelete(scope.$index)">鍒犻櫎</el-button>
+ <el-button
+ size="medium"
+ type="text"
+ icon="el-icon-check"
+ @click="handleSave(scope.$index)">淇濆瓨</el-button>
+ <el-button
+ size="medium"
+ type="text"
+ icon="el-icon-refresh-left"
+ @click="handleReset(scope.$index)">閲嶇疆</el-button>
+ <el-button
+ size="medium"
+ type="text"
+ icon="el-icon-delete"
+ @click="handleDelete(scope.$index)">鍒犻櫎</el-button>
</template>
</el-table-column>
</el-table>
<div style="display: flex; align-items: center;">
<h1 style="margin: 0;">
- 鎴鏈鍒掕繘搴﹀畬鎴愭姇璧勶紙涓囧厓锛夛細
+ 璁″垝鎶曡祫閲戦锛堜竾鍏冿級锛�
</h1>
<el-input
placeholder="璇疯緭鍏ユ姇璧勯噾棰�"
@@ -56,8 +79,16 @@
</el-input>
</div>
<div style="display: flex; justify-content: center; align-items: center; margin-top: 20px">
- <el-button type="primary" size="small" @click="handleSubmit">涓婃姤</el-button>
- <el-button type="primary" size="small" @click="handleResetAll">閲嶇疆</el-button>
+ <el-button
+ type="text"
+ size="medium"
+ icon="el-icon-upload2"
+ @click="handleSubmit">涓婃姤</el-button>
+ <el-button
+ type="text"
+ size="medium"
+ icon="el-icon-refresh-left"
+ @click="handleResetAll">閲嶇疆</el-button>
</div>
</el-col>
</el-row>
@@ -76,7 +107,7 @@
return {
loading: true,
// 鎺ユ敹浼犻�掕繃鏉ョ殑椤圭洰璁″垝鏁版嵁
- planRecordData: {},
+ projectInfoData: {},
planInfoData: {},
tableData: [
{
@@ -95,19 +126,19 @@
}
}
},
-
+ created() {
+ this.getProjectInfoData();
+ },
methods: {
// 椤甸潰鍔犺浇
search() {
- this.getPlanInfoData(this.planRecordData.id);
+ this.getPlanInfoData(this.planInfoData.id);
},
// 鑾峰彇浼犻�掕繃鏉ョ殑椤圭洰璁″垝璇︽儏
- getPlanRecordData() {
+ getProjectInfoData() {
// 浠庢煡璇㈠弬鏁颁腑鑾峰彇鏁版嵁
- if (this.$route.query.data) {
- this.planRecordData = JSON.parse(this.$route.query.data)
- }
- this.planInfoData = this.$route.query.planInfoData
+ this.projectInfoData = JSON.parse(this.$route.query.projectInfoData)
+ this.planInfoData = JSON.parse(this.$route.query.data)
this.search();
},
// 鑾峰彇椤圭洰璁″垝椤�
@@ -134,12 +165,13 @@
// 閬嶅巻tableData锛岃幏寰楀�间笉涓虹┖瀛楃涓茬殑琛�
const validList = this.tableData.filter(item => item.title !== '' || item.startTime !== '' || item.endTime !== '');
this.addData = {
- projectPlanRecordId: this.planRecordData.id,
+ projectPlanRecordId: this.planInfoData.id,
actualInvest: this.actualInvest,
addList: validList
}
addPlanInfo(this.addData).then(response => {
- this.handlePlanRecord(this.planInfoData)
+ this.handlePlanRecord()
+ this.$message.success('涓婃姤鎴愬姛');
})
},
// 閲嶇疆褰撳墠琛屾暟鎹�
@@ -160,24 +192,20 @@
},
// 淇濆瓨褰撳墠琛屾暟鎹�
handleSave(index) {
- this.tableData[index].projectPlanRecordId = this.planRecordData.id;
- savePlanInfo(this.tableData[index]).then(response => {
- this.search();
+ this.tableData[index].projectPlanRecordId = this.projectInfoData.id;
+ savePlanInfo(this.tableData[index], this.planInfoData.id).then(response => {
this.$message.success('淇濆瓨鎴愬姛');
});
},
/** 杩斿洖椤圭洰璁″垝璁板綍 */
- handlePlanRecord(planInfoData) {
+ handlePlanRecord() {
this.$router.push({
- name: '/projectManage/planRecord',
+ path: '/projectManage/planRecord',
query: {
- data: JSON.stringify(planInfoData)
+ data: JSON.stringify(this.projectInfoData)
}
})
}
- },
- created() {
- this.getPlanRecordData();
},
};
</script>
--
Gitblit v1.8.0