mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

预算和指标填报上传样式修改

Browse Source
This commit is contained in:
朱菊兰
2026-04-10 10:47:58 +08:00
parent bdd73b8868
commit 24102f0d0d
4 changed files with 156 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.dev
View File

@@ -12,9 +12,9 @@ VUE_APP_TITLE = 洛玻集团驾驶舱
# 杨姗姗 # 杨姗姗
# VUE_APP_BASE_API = 'http://172.16.20.218:7070' # VUE_APP_BASE_API = 'http://172.16.20.218:7070'
# 小田 # 小田
VUE_APP_BASE_API = 'http://172.16.19.232:7070' # VUE_APP_BASE_API = 'http://172.16.19.232:7070'
# 测试 # 测试
# VUE_APP_BASE_API = 'http://192.168.0.35:8080' VUE_APP_BASE_API = 'http://192.168.0.35:8080'
# 闫阳 # 闫阳
# VUE_APP_BASE_API = 'http://172.16.19.131:7070' # VUE_APP_BASE_API = 'http://172.16.19.131:7070'

86
src/views/home/components/budgetDetails.vue
View File

@@ -75,8 +75,8 @@
:key="tableKey"></base-table> :key="tableKey"></base-table>
</div> </div>
</div> </div>
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="handleImportDialogClose">
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" action="#" :disabled="upload.isUploading" <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" action="#" :disabled="upload.httpUploading"
:on-change="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> :on-change="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -90,9 +90,15 @@
</el-radio-group> </el-radio-group>
</div> </div>
</el-upload> </el-upload>
<div v-if="upload.httpUploading" class="upload-progress-wrap">
<div class="upload-progress-track">
<div class="upload-progress-bar"></div>
</div>
<span class="upload-progress-text">正在上传</span>
</div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button> <el-button type="primary" :loading="upload.httpUploading" :disabled="upload.httpUploading" @click="submitFileForm">确 定</el-button>
<el-button @click="cancelBtn">取 消</el-button> <el-button :disabled="upload.httpUploading" @click="cancelBtn">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
</Container> </Container>
@@ -134,11 +140,11 @@ export default {
open: false, open: false,
// 弹出层标题 // 弹出层标题
title: "预算填报导入", title: "预算填报导入",
// 是否禁用上传
isUploading: false,
fileList:[], fileList:[],
currentFile:null, currentFile:null,
timeDim: 2 timeDim: 2,
// HTTP 上传中（点击确定后 axios 上传，展示不确定进度条）
httpUploading: false
}, },
getDataList: null, // 动态切换的查询接口 getDataList: null, // 动态切换的查询接口
updateData: null, // 动态切换的更新接口 updateData: null, // 动态切换的更新接口
@@ -361,6 +367,8 @@ export default {
}); });
}, },
handleLevelChange(id) { handleLevelChange(id) {
this.form.levelId = id;
this.getDataPage()
this.$emit('updateLevel', id) this.$emit('updateLevel', id)
}, },
// 表格单元格数据变更回调 // 表格单元格数据变更回调
@@ -457,9 +465,12 @@ export default {
} }
// 计算选中日期对应的时间戳 // 计算选中日期对应的时间戳
this.calculateTimeStamp(val); this.calculateTimeStamp(val);
// 重新请求数据
this.getDataPage();
}, },
// 导入 // 导入
importExcel() { importExcel() {
this.upload.httpUploading = false
this.upload.open = true this.upload.open = true
}, },
downLoadExcel() { downLoadExcel() {
@@ -500,7 +511,6 @@ export default {
// 文件上传中处理 // 文件上传中处理
handleFileUploadProgress(file, fileList) { handleFileUploadProgress(file, fileList) {
console.log('文件上传中：',file, fileList) console.log('文件上传中：',file, fileList)
this.upload.isUploading = true;
this.upload.fileList = fileList; this.upload.fileList = fileList;
this.upload.currentFile = file.raw; this.upload.currentFile = file.raw;
}, },
@@ -508,10 +518,14 @@ export default {
importTemplate() {}, importTemplate() {},
// 提交上传文件 // 提交上传文件
async submitFileForm() { async submitFileForm() {
try {
if (!this.upload.currentFile) { if (!this.upload.currentFile) {
return this.$message.error('请先选择要上传的文件！') return this.$message.error('请先选择要上传的文件！')
} }
if (this.upload.httpUploading) {
return
}
this.upload.httpUploading = true
try {
const formData = new FormData() const formData = new FormData()
formData.append('file', this.upload.currentFile) // 文件字段 formData.append('file', this.upload.currentFile) // 文件字段
formData.append('timeDim', this.upload.timeDim) // 年月维度字段 formData.append('timeDim', this.upload.timeDim) // 年月维度字段
@@ -526,7 +540,7 @@ export default {
'Authorization': "Bearer " + getAccessToken(), 'Authorization': "Bearer " + getAccessToken(),
'tenant-id': getTenantId(), 'tenant-id': getTenantId(),
}, },
timeout: 30000 timeout: 300000
}) })
// 4. 处理响应结果 // 4. 处理响应结果
if (response.data.code === 0) { if (response.data.code === 0) {
@@ -536,7 +550,6 @@ export default {
this.upload.timeDim = 2 this.upload.timeDim = 2
this.upload.currentFile = null this.upload.currentFile = null
this.upload.open = false this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles(); this.$refs.upload.clearFiles();
this.getDataPage(); this.getDataPage();
this.$emit('updateLeft') this.$emit('updateLeft')
@@ -547,17 +560,66 @@ export default {
// 5. 异常处理 // 5. 异常处理
console.error('文件上传出错：', error) console.error('文件上传出错：', error)
this.$message.error('上传失败！') this.$message.error('上传失败！')
} finally {
this.upload.httpUploading = false
} }
}, },
cancelBtn() { cancelBtn() {
if (this.upload.httpUploading) {
return
}
this.upload.open = false this.upload.open = false
this.$refs.upload.clearFiles(); },
handleImportDialogClose() {
this.upload.currentFile = null
this.upload.fileList = []
this.$nextTick(() => {
if (this.$refs.upload) {
this.$refs.upload.clearFiles()
}
})
} }
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.upload-progress-wrap {
margin-top: 12px;
}
.upload-progress-track {
height: 8px;
border-radius: 4px;
background: rgba(11, 88, 255, 0.12);
overflow: hidden;
position: relative;
}
.upload-progress-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 38%;
border-radius: 4px;
background: linear-gradient(90deg, #0b58ff, #5b9aff, #0b58ff);
animation: upload-indeterminate-slide 1.35s ease-in-out infinite;
}
@keyframes upload-indeterminate-slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(320%);
}
}
.upload-progress-text {
display: block;
margin-top: 8px;
font-size: 12px;
color: rgba(0, 0, 0, 0.55);
text-align: center;
}
// 月份列表容器样式（保留原有配置，若无使用可忽略） // 月份列表容器样式（保留原有配置，若无使用可忽略）
.month-list { .month-list {
// 内联样式已优化行间距，此处可留空或补充 // 内联样式已优化行间距，此处可留空或补充

88
src/views/home/components/indicatorDetails.vue
View File

@@ -66,8 +66,8 @@ font-style: normal;">指标详情</div>
></base-table> ></base-table>
</div> </div>
</div> </div>
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="handleImportDialogClose">
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" action="#" :disabled="upload.isUploading" <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" action="#" :disabled="upload.httpUploading"
:on-change="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> :on-change="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -77,9 +77,15 @@ font-style: normal;">指标详情</div>
<div class="el-upload__tip" slot="tip"> <div class="el-upload__tip" slot="tip">
</div> </div>
</el-upload> </el-upload>
<div v-if="upload.httpUploading" class="upload-progress-wrap">
<div class="upload-progress-track">
<div class="upload-progress-bar"></div>
</div>
<span class="upload-progress-text">正在上传</span>
</div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button> <el-button type="primary" :loading="upload.httpUploading" :disabled="upload.httpUploading" @click="submitFileForm">确 定</el-button>
<el-button @click="cancelBtn">取 消</el-button> <el-button :disabled="upload.httpUploading" @click="cancelBtn">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
</Container> </Container>
@@ -122,10 +128,10 @@ export default {
open: false, open: false,
// 弹出层标题 // 弹出层标题
title: "指标填报导入", title: "指标填报导入",
// 是否禁用上传
isUploading: false,
fileList:[], fileList:[],
currentFile:null currentFile:null,
// HTTP 上传中（点击确定后 axios 上传，展示不确定进度条）
httpUploading: false
} }
} }
}, },
@@ -277,6 +283,8 @@ export default {
} }
// 计算选中月份的起止时间戳 // 计算选中月份的起止时间戳
this.setMonthTimeStamp(val); this.setMonthTimeStamp(val);
// 重新请求数据
this.getDataPage();
}, },
getUnitLabel(unitCode) { getUnitLabel(unitCode) {
// 若字典为空或无匹配编码，返回原编码或空字符串 // 若字典为空或无匹配编码，返回原编码或空字符串
@@ -326,6 +334,8 @@ export default {
}, },
handleLevelChange(id) { handleLevelChange(id) {
this.form.levelId = id;
this.getDataPage()
this.$emit('updateLevel', id) this.$emit('updateLevel', id)
}, },
@@ -339,6 +349,7 @@ export default {
}, },
// 导入 // 导入
importExcel() { importExcel() {
this.upload.httpUploading = false
this.upload.open = true this.upload.open = true
}, },
downLoadExcel() { downLoadExcel() {
@@ -371,7 +382,6 @@ export default {
// 文件上传中处理 // 文件上传中处理
handleFileUploadProgress(file, fileList) { handleFileUploadProgress(file, fileList) {
console.log('文件上传中：',file, fileList) console.log('文件上传中：',file, fileList)
this.upload.isUploading = true;
this.upload.fileList = fileList; this.upload.fileList = fileList;
this.upload.currentFile = file.raw; this.upload.currentFile = file.raw;
}, },
@@ -379,10 +389,14 @@ export default {
importTemplate() {}, importTemplate() {},
// 提交上传文件 // 提交上传文件
async submitFileForm() { async submitFileForm() {
try {
if (!this.upload.currentFile) { if (!this.upload.currentFile) {
return this.$message.error('请先选择要上传的文件！') return this.$message.error('请先选择要上传的文件！')
} }
if (this.upload.httpUploading) {
return
}
this.upload.httpUploading = true
try {
const formData = new FormData() const formData = new FormData()
formData.append('file', this.upload.currentFile) // 文件字段 formData.append('file', this.upload.currentFile) // 文件字段
formData.append('reportDate', this.form.endTime) // 时间维度字段 formData.append('reportDate', this.form.endTime) // 时间维度字段
@@ -396,7 +410,7 @@ export default {
'Authorization': "Bearer " + getAccessToken(), 'Authorization': "Bearer " + getAccessToken(),
'tenant-id': getTenantId(), 'tenant-id': getTenantId(),
}, },
timeout: 30000 timeout: 300000
}) })
// 4. 处理响应结果 // 4. 处理响应结果
if (response.data.code === 0) { if (response.data.code === 0) {
@@ -405,7 +419,6 @@ export default {
this.upload.fileList = [] this.upload.fileList = []
this.upload.currentFile = null this.upload.currentFile = null
this.upload.open = false this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles(); this.$refs.upload.clearFiles();
this.getDataPage(); this.getDataPage();
this.$emit('updateLeft') this.$emit('updateLeft')
@@ -416,17 +429,66 @@ export default {
// 5. 异常处理 // 5. 异常处理
console.error('文件上传出错：', error) console.error('文件上传出错：', error)
this.$message.error('上传失败！') this.$message.error('上传失败！')
} finally {
this.upload.httpUploading = false
} }
}, },
cancelBtn(){ cancelBtn() {
if (this.upload.httpUploading) {
return
}
this.upload.open = false this.upload.open = false
this.$refs.upload.clearFiles(); },
handleImportDialogClose() {
this.upload.currentFile = null
this.upload.fileList = []
this.$nextTick(() => {
if (this.$refs.upload) {
this.$refs.upload.clearFiles()
}
})
} }
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.upload-progress-wrap {
margin-top: 12px;
}
.upload-progress-track {
height: 8px;
border-radius: 4px;
background: rgba(11, 88, 255, 0.12);
overflow: hidden;
position: relative;
}
.upload-progress-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 38%;
border-radius: 4px;
background: linear-gradient(90deg, #0b58ff, #5b9aff, #0b58ff);
animation: upload-indeterminate-slide 1.35s ease-in-out infinite;
}
@keyframes upload-indeterminate-slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(320%);
}
}
.upload-progress-text {
display: block;
margin-top: 8px;
font-size: 12px;
color: rgba(0, 0, 0, 0.55);
text-align: center;
}
// 月份列表容器样式（保留原有配置，若无使用可忽略） // 月份列表容器样式（保留原有配置，若无使用可忽略）
.month-list { .month-list {
// 内联样式已优化行间距，此处可留空或补充 // 内联样式已优化行间距，此处可留空或补充

2
src/views/home/components/keyWork.vue
View File

@@ -63,7 +63,7 @@ export default {
return { return {
...item, ...item,
id: index + 1, id: index + 1,
status: (item.real > 0 && item.target > 0 && item.real / item.target >= 1 || item.real >= item.target) ? 'done' : 'pending' status: (item.rate >= 100) ? 'done' : 'pending'
}; };
}) })
} }