parent
8ece48edfb
commit
a71eefc721
6 changed files with 803 additions and 1011 deletions
@ -1,153 +1,208 @@ |
||||
<template> |
||||
<el-dialog title="详情" append-to-body :modelValue="openShow" fullscreen width="70%" @close="closeDialog()"> |
||||
<!-- 绩效详情 --> |
||||
<avue-crud |
||||
:option="option" |
||||
:table-loading="loading" |
||||
:data="data" |
||||
v-model="form" |
||||
v-model:page="page" |
||||
ref="crud" |
||||
@search-change="searchChange" |
||||
@search-reset="searchReset" |
||||
@current-change="currentChange" |
||||
@size-change="sizeChange" |
||||
@refresh-change="refreshChange" |
||||
> |
||||
<template #menu-right> |
||||
<el-button type="primary">附件下载(明细)</el-button> |
||||
<el-button type="primary">附件下载(汇总)</el-button> |
||||
</template> |
||||
</avue-crud> |
||||
</el-dialog> |
||||
<el-dialog |
||||
title="详情" |
||||
append-to-body |
||||
:modelValue="openShow" |
||||
fullscreen |
||||
width="70%" |
||||
@close="closeDialog()" |
||||
> |
||||
<!-- 绩效详情 --> |
||||
<avue-crud |
||||
:option="option" |
||||
:table-loading="loading" |
||||
:data="data" |
||||
v-model="form" |
||||
v-model:page="page" |
||||
ref="crud" |
||||
@search-change="searchChange" |
||||
@search-reset="searchReset" |
||||
@current-change="currentChange" |
||||
@size-change="sizeChange" |
||||
@refresh-change="refreshChange" |
||||
> |
||||
<template #menu-right> |
||||
<el-button type="primary" @click="downloadDetail">附件下载(明细)</el-button> |
||||
<el-button type="primary" @click="downloadSummary">附件下载(汇总)</el-button> |
||||
</template> |
||||
</avue-crud> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
detailBsEfficiencyTask, |
||||
downloadBsEfficiencyTaskTemplate, |
||||
} from '@/api/performanceManagement/dataReporting'; |
||||
import { downloadXls, downloadFile, downloadFileBlob } from '@/utils/util'; |
||||
export default { |
||||
props:{ |
||||
showDetail:{ |
||||
type:Boolean, |
||||
default:false |
||||
}, |
||||
detailData:{ |
||||
type:Object, |
||||
default:()=>({}) |
||||
} |
||||
props: { |
||||
showDetail: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
data() { |
||||
return { |
||||
openShow:false, |
||||
loading:false, |
||||
form:{}, |
||||
option:{ |
||||
height: "auto", |
||||
align: "center", |
||||
calcHeight: 32, |
||||
rowKey: "id", |
||||
rowParentKey: "parentId", |
||||
tip: false, |
||||
simplePage: true, |
||||
searchShow: true, |
||||
searchMenuSpan:12, |
||||
searchIcon: true, |
||||
searchIndex: 3, |
||||
tree: false, |
||||
border: true, |
||||
index: true, |
||||
selection: false, |
||||
viewBtn: false, |
||||
delBtn: false, |
||||
addBtn: false, |
||||
editBtn: false, |
||||
editBtnText: "修改", |
||||
addBtnIcon: " ", |
||||
viewBtnIcon: " ", |
||||
delBtnIcon: " ", |
||||
editBtnIcon: " ", |
||||
viewBtnText: "详情", |
||||
labelWidth: 120, |
||||
searchLabelWidth: 120, |
||||
menu: false, |
||||
menuWidth: 100, |
||||
dialogWidth: 1200, |
||||
dialogClickModal: false, |
||||
searchEnter: true, |
||||
excelBtn: false, |
||||
filterBtn: true, |
||||
searchShowBtn: false, |
||||
columnSort: true, |
||||
excelBtn: true, |
||||
columnSort: true, |
||||
showOverflowTooltip: true, |
||||
searchLabelPosition: "left", |
||||
searchLabelPosition: "left", |
||||
searchGutter: 24, |
||||
searchSpan: 6, |
||||
menuAlign: "center", |
||||
gridBtn: false, |
||||
searchMenuPosition: "right", |
||||
column: [] |
||||
}, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
data: [], |
||||
columnData:[ |
||||
{label:'员工工号',prop:'cardNo'}, |
||||
{label:'姓名',prop:'name'}, |
||||
] |
||||
} |
||||
row: { |
||||
type: Object, |
||||
default: () => ({}), |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
openShow: false, |
||||
loading: false, |
||||
form: {}, |
||||
option: { |
||||
height: 'auto', |
||||
align: 'center', |
||||
calcHeight: 32, |
||||
rowKey: 'id', |
||||
rowParentKey: 'parentId', |
||||
tip: false, |
||||
simplePage: true, |
||||
searchShow: true, |
||||
searchMenuSpan: 12, |
||||
searchIcon: true, |
||||
searchIndex: 3, |
||||
tree: false, |
||||
border: true, |
||||
index: true, |
||||
selection: false, |
||||
viewBtn: false, |
||||
delBtn: false, |
||||
addBtn: false, |
||||
editBtn: false, |
||||
editBtnText: '修改', |
||||
addBtnIcon: ' ', |
||||
viewBtnIcon: ' ', |
||||
delBtnIcon: ' ', |
||||
editBtnIcon: ' ', |
||||
viewBtnText: '详情', |
||||
labelWidth: 120, |
||||
searchLabelWidth: 120, |
||||
menu: false, |
||||
menuWidth: 100, |
||||
dialogWidth: 1200, |
||||
dialogClickModal: false, |
||||
searchEnter: true, |
||||
excelBtn: false, |
||||
filterBtn: true, |
||||
searchShowBtn: false, |
||||
columnSort: true, |
||||
excelBtn: true, |
||||
columnSort: true, |
||||
showOverflowTooltip: true, |
||||
searchLabelPosition: 'left', |
||||
searchLabelPosition: 'left', |
||||
searchGutter: 24, |
||||
searchSpan: 6, |
||||
menuAlign: 'center', |
||||
gridBtn: false, |
||||
searchMenuPosition: 'right', |
||||
column: [], |
||||
}, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
data: [], |
||||
columnData: [ |
||||
{ label: '员工工号', prop: 'cardNo' }, |
||||
{ label: '姓名', prop: 'name' }, |
||||
], |
||||
}; |
||||
}, |
||||
created() { |
||||
this.openShow = this.showDetail; |
||||
this.onLoad(); |
||||
}, |
||||
methods: { |
||||
closeDialog(val) { |
||||
this.openShow = false; |
||||
this.$emit('closeDetail', val); |
||||
}, |
||||
searchChange(params, done) { |
||||
this.query = params; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(); |
||||
done(); |
||||
}, |
||||
searchReset() { |
||||
this.query = {}; |
||||
this.onLoad(); |
||||
}, |
||||
currentChange(currentPage) { |
||||
this.page.currentPage = currentPage; |
||||
}, |
||||
created(){ |
||||
this.openShow = this.showDetail |
||||
this.columnData.map(item =>{ |
||||
this.option.column.push({ |
||||
label:item.label, |
||||
prop:item.prop, |
||||
search:(item.label == '员工工号' || item.label == '姓名') ? true : false |
||||
}) |
||||
sizeChange(pageSize) { |
||||
this.page.pageSize = pageSize; |
||||
}, |
||||
refreshChange() { |
||||
this.onLoad(); |
||||
}, |
||||
onLoad() { |
||||
this.loading = true; |
||||
const params = { |
||||
id: this.row.id, |
||||
...this.query, |
||||
}; |
||||
detailBsEfficiencyTask(params) |
||||
.then(res => { |
||||
if (res.data.code === 200) { |
||||
this.data = res.data.data.table.tableDataList || []; |
||||
const arr = res.data.data.table.tableColumn; |
||||
arr.push({ ...arr[0], prop: arr[0].prop + 'Exact', hide: true, search: true }); |
||||
arr.push({ ...arr[1], prop: arr[1].prop + 'Exact', hide: true, search: true }); |
||||
res.data.data.table.tableColumn = arr.map(item => ({ ...item, sortable: true })); |
||||
this.option.column = res.data.data.table.tableColumn; |
||||
} else { |
||||
this.data = []; |
||||
this.page.total = 0; |
||||
} |
||||
this.loading = false; |
||||
}) |
||||
.catch(() => { |
||||
this.data = []; |
||||
this.page.total = 0; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
downloadDetail() { |
||||
if (!this.row.subTasks || this.row.subTasks.length === 0) { |
||||
this.$message.warning('暂无可下载文件!'); |
||||
return; |
||||
} |
||||
const completedTasks = this.row.subTasks.filter(task => task.status === 2); |
||||
if (completedTasks.length === 0) { |
||||
this.$message.warning('暂无可下载文件!'); |
||||
return; |
||||
} |
||||
// 调用模板下载接口 |
||||
downloadBsEfficiencyTaskTemplate() |
||||
.then(res => { |
||||
downloadXls(res.data, `${this.row.yearMonth}绩效填报模板.xlsx`); |
||||
this.row.subTasks.forEach(task => { |
||||
if (task.attachLink != '') { |
||||
downloadFileBlob(task.attachLink, task.taskName + '.xlsx'); |
||||
return; |
||||
} |
||||
}); |
||||
}) |
||||
this.onLoad() |
||||
.catch(error => { |
||||
console.error('下载模板失败:', error); |
||||
this.$message.error('下载失败,请检查网络或稍后重试'); |
||||
}); |
||||
}, |
||||
methods:{ |
||||
closeDialog(val) { |
||||
console.log('3333333333333333333') |
||||
this.openShow = false |
||||
this.$emit('closeDetail',val) |
||||
}, |
||||
searchChange(params, done){ |
||||
this.query = params; |
||||
this.page.currentPage = 1 |
||||
this.onLoad() |
||||
done() |
||||
}, |
||||
searchReset(){ |
||||
this.query = {} |
||||
this.onLoad() |
||||
}, |
||||
currentChange(currentPage){ |
||||
this.page.currentPage = currentPage |
||||
}, |
||||
sizeChange(pageSize){ |
||||
this.page.pageSize = pageSize |
||||
}, |
||||
refreshChange(){ |
||||
this.onLoad() |
||||
}, |
||||
onLoad(){ |
||||
this.data = [ |
||||
{id:"001",cardNo:"001",name:"张三"}, |
||||
{id:"002",cardNo:"002",name:"李四"}, |
||||
{id:"003",cardNo:"003",name:"王五"}, |
||||
] |
||||
this.page.total = this.data.length |
||||
downloadSummary() { |
||||
this.row.subTasks.forEach(task => { |
||||
if (task.attachLink != '') { |
||||
downloadFileBlob(task.attachLink, task.taskName + '.xlsx'); |
||||
return; |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -1,93 +1,202 @@ |
||||
<template> |
||||
<el-dialog :title="title" append-to-body :modelValue="openShow" width="70%" @close="closeDialog()"> |
||||
<avue-form |
||||
:option="excelOption" |
||||
v-model="excelForm" |
||||
:upload-after="uploadAfter" |
||||
></avue-form> |
||||
<el-button type="primary" v-if="!isDetail" text style="position: absolute;top: 80px;left: 460px;">读取文件</el-button> |
||||
<el-table v-show="isRead && !isDetail" :data="tableData"> |
||||
<el-table-column |
||||
type="index" |
||||
width="50"> |
||||
</el-table-column> |
||||
<el-table-column v-for="item in tableColumn" :key="item.prop" :label="item.label" :prop="item.prop" align="center"></el-table-column> |
||||
</el-table> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="closeDialog">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
<el-dialog |
||||
:title="title" |
||||
append-to-body |
||||
:modelValue="openShow" |
||||
width="70%" |
||||
@close="closeDialog()" |
||||
> |
||||
<avue-form |
||||
:option="excelOption" |
||||
v-model="excelForm" |
||||
:upload-after="uploadAfter" |
||||
:upload-before="uploadBefore" |
||||
> |
||||
<template #readExcel> |
||||
<el-button type="primary" @click="readExcel" v-if="!isDetail"> |
||||
读取文件<i class="el-icon-download el-icon--right"></i> |
||||
</el-button> |
||||
</template> |
||||
</avue-form> |
||||
<el-table v-show="isRead && !isDetail" :data="tableData"> |
||||
<el-table-column type="index" width="50" label="序号" /> |
||||
<el-table-column |
||||
v-for="item in tableColumn" |
||||
:key="item.prop" |
||||
:label="item.label" |
||||
:prop="item.prop" |
||||
align="center" |
||||
/> |
||||
</el-table> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="closeDialog">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
readExcelBsEfficiencyTask, |
||||
reportBsEfficiencyTask, |
||||
subReportBsEfficiencyTask, |
||||
} from '@/api/performanceManagement/dataReporting'; |
||||
export default { |
||||
props:{ |
||||
title:{ |
||||
type:String, |
||||
default:'' |
||||
}, |
||||
showReport:{ |
||||
type:Boolean, |
||||
default:false |
||||
}, |
||||
isDetail:{ |
||||
type:Boolean, |
||||
default:false |
||||
} |
||||
props: { |
||||
title: { |
||||
type: String, |
||||
default: '', |
||||
}, |
||||
data() { |
||||
return { |
||||
openShow: false, |
||||
excelOption:{ |
||||
submitBtn: false, |
||||
emptyBtn: false, |
||||
column: [ |
||||
{ |
||||
label: '填报文件', |
||||
prop: 'excelFile', |
||||
type: 'upload', |
||||
drag: true, |
||||
loadText: '文件上传中,请稍等', |
||||
span: 24, |
||||
propsHttp: { |
||||
res: 'data', |
||||
}, |
||||
accept: '.xls,.xlsx', |
||||
tip: '请上传 .xls,.xlsx 标准格式文件,文件最大5M', |
||||
action: '/blade-system/user/import-user', |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请上传文件', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
showReport: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
isDetail: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
row: { |
||||
type: Object, |
||||
default: null, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
openShow: false, |
||||
excelForm: { |
||||
excelFile: [], |
||||
}, |
||||
excelOption: { |
||||
submitBtn: false, |
||||
emptyBtn: false, |
||||
column: [ |
||||
{ |
||||
label: '填报文件', |
||||
prop: 'excelFile', |
||||
type: 'upload', |
||||
span: 12, |
||||
limit: 1, |
||||
fileSize: 50000, |
||||
propsHttp: { |
||||
res: 'data', |
||||
attachId: 'attachId', // 关键:指定附件ID字段 |
||||
}, |
||||
tableData:[], |
||||
isRead:true, |
||||
tableColumn:[ |
||||
{label: '员工工号',prop: 'cardNo'}, |
||||
{label: '姓名',prop: 'name'}, |
||||
] |
||||
} |
||||
accept: '.xls,.xlsx', |
||||
tip: '请上传 .xls,.xlsx 标准格式文件,文件最大5M', |
||||
action: '/api/blade-resource/oss/endpoint/put-file-attach', |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请上传文件', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '', |
||||
prop: 'readExcel', |
||||
formslot: true, |
||||
span: 12, |
||||
}, |
||||
], |
||||
}, |
||||
tableData: [], |
||||
isRead: false, |
||||
tableColumn: [ |
||||
{ label: '员工工号', prop: 'cardNo' }, |
||||
{ label: '姓名', prop: 'name' }, |
||||
], |
||||
attachId: null, |
||||
formData: null, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.openShow = this.showReport; |
||||
}, |
||||
methods: { |
||||
closeDialog(val) { |
||||
this.openShow = false; |
||||
// 清空数据 |
||||
this.excelForm = { excelFile: [] }; |
||||
this.attachId = null; |
||||
this.tableData = []; |
||||
this.isRead = false; |
||||
this.$emit('closeDialog', val); |
||||
}, |
||||
created() { |
||||
this.openShow = this.showReport |
||||
// 上传前(不用改,保留) |
||||
uploadBefore(file, done, loading, column) { |
||||
this.formData = file; |
||||
done(); // 必须执行,允许上传 |
||||
}, |
||||
methods: { |
||||
closeDialog(val) { |
||||
this.openShow = false |
||||
this.$emit('closeDialog',val) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
// 上传后(修复版) |
||||
uploadAfter(file, done, loading, column) { |
||||
console.log('上传成功返回:', file); |
||||
// 正确获取 attachId |
||||
this.attachId = file.attachId || file.data?.attachId; |
||||
done(); |
||||
}, |
||||
// 读取Excel(关键修复) |
||||
readExcel() { |
||||
if (!this.attachId) { |
||||
this.$message.warning('请先上传文件'); |
||||
return; |
||||
} |
||||
readExcelBsEfficiencyTask({ file: this.formData }) |
||||
.then(res => { |
||||
if (res.data.code === 200) { |
||||
this.tableData = res.data.data.tableData || []; |
||||
this.tableColumn = res.data.data.tableColumn || []; |
||||
this.isRead = true; |
||||
this.$message.success('文件读取成功'); |
||||
} else { |
||||
this.$message.error('文件读取失败'); |
||||
} |
||||
}) |
||||
.catch(() => { |
||||
this.$message.error('文件读取接口异常'); |
||||
}); |
||||
}, |
||||
// 提交表单 |
||||
submitForm() { |
||||
if (!this.attachId) { |
||||
this.$message.error('请先上传文件'); |
||||
return; |
||||
} |
||||
let params = {}; |
||||
if (!this.isDetail) { |
||||
params = { |
||||
id: this.row.id, |
||||
attachId: this.attachId, |
||||
table: { |
||||
tableData: this.tableData, |
||||
tableColumn: this.tableColumn, |
||||
}, |
||||
}; |
||||
reportBsEfficiencyTask(params).then(res => { |
||||
if (res.data.code === 200) { |
||||
this.$message.success('提交成功'); |
||||
this.closeDialog(true); |
||||
} else { |
||||
this.$message.error('提交失败'); |
||||
} |
||||
}); |
||||
} else { |
||||
params = { |
||||
id: this.row.id, |
||||
attachId: this.attachId, |
||||
}; |
||||
subReportBsEfficiencyTask(params).then(res => { |
||||
if (res.data.code === 200) { |
||||
this.$message.success('提交成功'); |
||||
this.closeDialog(true); |
||||
} else { |
||||
this.$message.error('提交失败'); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue