587 lines
17 KiB
Vue
587 lines
17 KiB
Vue
<!--标法规-工作组-项目费用统计信息-标准制修订补助资金收支统计--支出表-->
|
||
<template>
|
||
<div id="expendSubsidy" class="child2">
|
||
<!-- 第一第二行表单 -->
|
||
<el-form :inline="true" :model="formQuery">
|
||
<el-form-item class="add-form-item" label="项目名称">
|
||
<el-input v-model.trim="formQuery.name" clearable size="small" placeholder="请输入项目名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item class="add-form-item" label="支出金额">
|
||
<el-input v-model.trim="formQuery.cost" clearable size="small" placeholder="请输入支出金额"></el-input>
|
||
</el-form-item>
|
||
<el-form-item class="add-form-item" label="用途">
|
||
<el-input v-model.trim="formQuery.purposes" clearable size="small" placeholder="请输入用途">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" @click="queryData">查询</el-button>
|
||
<el-button type="" size="small" onclick="">清空</el-button>
|
||
</el-form-item>
|
||
<el-divider/>
|
||
<div style="float: left">
|
||
<el-button type="primary" size="small" @click="dataAdd">新增</el-button>
|
||
<el-button type="primary" size="small" @click="dialogVisible1 = true">导入</el-button>
|
||
<el-button type="primary" size="small" @click="exportAllZcbs">导出</el-button>
|
||
<el-button type="danger" size="small" @click="deleteDetail">批量删除</el-button>
|
||
<!-- <el-button type="primary" size="small" onclick="">模板下载</el-button>-->
|
||
</div>
|
||
</el-form>
|
||
<el-divider/>
|
||
|
||
|
||
<!-- 表格-->
|
||
<div class="container">
|
||
<el-table
|
||
:data="tableData"
|
||
tooltip-effect="dark"
|
||
style="width: auto"
|
||
border
|
||
height="100%"
|
||
:header-cell-style="{background: '#f5f1f1', color: '#333333', padding: 0, fontSize: '16px',
|
||
fontWeight: 'bold', height: '48px'}"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column
|
||
align="center"
|
||
type="selection"
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
type="index"
|
||
label="序号"
|
||
width="50"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="项目名称"
|
||
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="cost"
|
||
label="支出金额">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="purposes"
|
||
label="用途">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="annexs"
|
||
label="详细附件">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.annexs === null || ''">{{ '-' }}</span>
|
||
<span v-for="res in JSON.parse(scope.row.annexs)" :key="res.id" style="color: #409EFF;" @click="previews(res.id)">
|
||
{{ res.name }} {{ ';'}}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="50" fixed="right">
|
||
<template slot-scope="scope">
|
||
<div @click.stop style="display: inline-block">
|
||
<el-dropdown trigger="click" @command="handleCommand">
|
||
<i class="iconfont"></i>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item :command="[scope.row, '编辑']" v-btn-permission="''">
|
||
编辑
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="[scope.row, '删除']" v-btn-permission="''">
|
||
删除
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<loading :loading="loading">加载中...</loading>
|
||
<pagination
|
||
:page="formQuery.page"
|
||
:total="tableTotal"
|
||
@pageChange="pageChange"
|
||
@pageSizeChange="pageSizeChange"/>
|
||
</div>
|
||
<!-- 新增抽屉 -->
|
||
<el-drawer
|
||
size="50%"
|
||
:title="drawerTitle"
|
||
:visible.sync="drawerTable">
|
||
<div style="margin: 10px;height: inherit">
|
||
<el-form class="label-input-form" label-width="150px" ref="formShowData" :model="formShowData" :rules="formRules">
|
||
<el-form-item class="add-form-item" label="项目名称">
|
||
<el-input v-model.trim="formShowData.name" type="text" placeholder="请填写">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item class="add-form-item" label="支出金额">
|
||
<el-input v-model.trim="formShowData.cost" type="text" placeholder="请填写"></el-input>
|
||
</el-form-item>
|
||
<el-form-item class="add-form-item" label="用途">
|
||
<el-input v-model.trim="formShowData.purposes" type="text" placeholder="请填写">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item class="add-form-item" label="详细附件">
|
||
<el-upload
|
||
:disabled="acceptShow"
|
||
multiple
|
||
ref="uploadFile"
|
||
:action="actionPath"
|
||
name="file"
|
||
:file-list="annexList"
|
||
accept=".ZIP, .zip, .docx, .DOCX, .xls, .xlsx"
|
||
:before-upload="handleBeforeUpload"
|
||
:before-remove="handleBeforeRemove"
|
||
:on-success="handleOnsuccess"
|
||
:on-preview="handleOnPreview"
|
||
>
|
||
<el-button size="small" type="primary">点击上传</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<div class="demo-drawer-footer">
|
||
<el-button size="small" @click="drawerTable = false">取消</el-button>
|
||
<el-button size="small" type="primary" :loading="submitLoading" @click="submit()">提交</el-button>
|
||
</div>
|
||
|
||
</el-drawer>
|
||
<!-- 导入 -->
|
||
<el-dialog
|
||
width="40%"
|
||
title="导入"
|
||
:visible.sync="dialogVisible1"
|
||
:show-footer="false"
|
||
>
|
||
<el-upload
|
||
class="upload-demo"
|
||
drag
|
||
action="string"
|
||
accept=".xlsx"
|
||
ref="file"
|
||
:http-request="uploadBank"
|
||
:before-upload="onbeforeunload"
|
||
:on-success="handleSuccess"
|
||
multiple style="text-align: center">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
</el-upload>
|
||
</el-dialog>
|
||
<!-- <div>-->
|
||
<!-- <!– 导入弹框 –>-->
|
||
<!-- <el-dialog-->
|
||
<!-- title="导入文件"-->
|
||
<!-- :visible.sync="dialogVisible1"-->
|
||
<!-- width="30%"-->
|
||
<!-- >-->
|
||
<!-- <el-button class="leading-in">点击或拖拽上传文件</el-button>-->
|
||
<!-- </el-dialog>-->
|
||
<!-- </div>-->
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { exportQuery, exportEdit, exportAdd, exportDel } from '@/api/statisticsApi'
|
||
import { exportAllSrbs, exportAllZcbs, importAllSrbs, importAllZcbs } from '@/api/process'
|
||
export default {
|
||
name: "child2",
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
formQuery: {
|
||
name: '',
|
||
cost: '',
|
||
purposes: '',
|
||
current: 1,
|
||
page: 1,
|
||
pageSize: this.$store.getters.userInfo.configContent,
|
||
},
|
||
tableTotal: 0,
|
||
tableData: [],
|
||
multipleSelection: [],
|
||
formShowData: {
|
||
id: '',
|
||
name: '',
|
||
cost: '',
|
||
purposes: '',
|
||
annexs: ''
|
||
},
|
||
|
||
drawerTable: false,
|
||
drawerTitle: '',
|
||
formRules: {},
|
||
submitLoading: false,
|
||
|
||
// 上传路径
|
||
actionPath: 'api/att/attFile/upload',
|
||
acceptShow: false,
|
||
annexDialog: false,
|
||
annexList: [],
|
||
ids:'',
|
||
dialogVisible1 : false
|
||
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.getTableData()
|
||
},
|
||
|
||
methods: {
|
||
getTableData() {
|
||
exportQuery(this.formQuery).then(res=>{
|
||
this.tableData = res.data.list
|
||
this.tableTotal = res.data.count
|
||
})
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
this.ids = ''
|
||
val.forEach(item => {
|
||
if (this.ids.length < 1) {
|
||
this.ids =item.id
|
||
} else {
|
||
this.ids += ','
|
||
this.ids += item.id
|
||
}
|
||
})
|
||
},
|
||
exportAllZcbs(){
|
||
const params = this.ids
|
||
this.$confirm('是否确认导出所有类型数据项?', '确认导出数据', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(()=> {
|
||
exportAllZcbs({ idList: params }).then(res => {
|
||
const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
|
||
const downloadElement = document.createElement('a')
|
||
const href = window.URL.createObjectURL(blob)// 创建下载的链接
|
||
downloadElement.href = href
|
||
downloadElement.download = '标准制修订补助资金收支统计支出表' + '.xlsx' // 下载后文件名
|
||
document.body.appendChild(downloadElement)
|
||
downloadElement.click()// 点击下载
|
||
document.body.removeChild(downloadElement)// 下载完成移除元素
|
||
window.URL.revokeObjectURL(href)// 释放掉blob对象
|
||
})
|
||
this.$message.success('导出信息成功')
|
||
})
|
||
},
|
||
//新增方法
|
||
dataAdd() {
|
||
this.drawerTitle = '新增'
|
||
this.annexList = []
|
||
this.formShowData = {}
|
||
this.drawerTable = true
|
||
},
|
||
// 查询按钮
|
||
queryData() {
|
||
this.getTableData()
|
||
},
|
||
//清空
|
||
resetForm() {
|
||
this.formQuery = {}
|
||
this.getTableData()
|
||
},
|
||
// 提交按钮
|
||
submit() {
|
||
this.$refs['formShowData'].validate((valid) => {
|
||
if (valid) {
|
||
this.submitLoading = true
|
||
this.formShowData.annexs = JSON.stringify(this.annexList)
|
||
if (this.drawerTitle === '新增') {
|
||
exportAdd(this.formShowData).then(res=>{
|
||
if (res.ok) {
|
||
this.$message.success('新增成功')
|
||
this.submitLoading = false
|
||
this.getTableData()
|
||
} else {
|
||
this.$message.warning('新增失败')
|
||
this.submitLoading = false
|
||
}
|
||
this.drawerTable = false
|
||
}, e => {
|
||
})
|
||
} else {
|
||
exportEdit(this.formShowData).then(res => {
|
||
if (res.ok) {
|
||
this.$message.success('编辑成功')
|
||
this.submitLoading = false
|
||
this.getTableData()
|
||
} else {
|
||
this.$message.warning('编辑失败')
|
||
this.submitLoading = false
|
||
}
|
||
this.drawerTable = false
|
||
},e => {
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//删除方法
|
||
deleteDetail() {
|
||
if (this.multipleSelection.length > 0) {
|
||
let msgIds = []
|
||
for (let i = 0; i < this.multipleSelection.length; i++) {
|
||
let msgId = this.multipleSelection[i].id
|
||
msgIds.push(msgId)
|
||
}
|
||
let delId = {
|
||
ids: msgIds.join(',')
|
||
}
|
||
this.$confirm('确定删除这些数据?', '提示', {
|
||
confirmButtonText: this.$t('m.determine'),
|
||
cancelButtonText: this.$t('m.cancel'),
|
||
type: 'warning',
|
||
confirmButtonClass: 'common-button-primary',
|
||
roundButton: true
|
||
}).then(() => {
|
||
exportDel(delId).then(res => {
|
||
if (res.ok) {
|
||
this.$message.success('删除成功')
|
||
this.pageNo = 1
|
||
this.multipleSelection = ''
|
||
this.getTableData()
|
||
} else {
|
||
this.$message.warning('删除失败')
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
} else {
|
||
this.$message.warning('请选择一条数据进行删除')
|
||
}
|
||
},
|
||
// 列表更多按钮
|
||
handleCommand(command) {
|
||
switch (command[1]) {
|
||
case "编辑":
|
||
this.editRowOne(command[0]);
|
||
break;
|
||
case "删除":
|
||
this.deleteRowOne(command[0].id);
|
||
break;
|
||
}
|
||
},
|
||
editRowOne(item) {
|
||
this.annexList = []
|
||
this.drawerTitle = '编辑'
|
||
this.formShowData = {
|
||
id: item.id,
|
||
name: item.name,
|
||
cost: item.cost,
|
||
purposes: item.purposes,
|
||
annexs: item.annexs
|
||
}
|
||
this.annexList = JSON.parse(this.formShowData.annexs)
|
||
this.drawerTable = true
|
||
},
|
||
deleteRowOne(val) {
|
||
let delId = {
|
||
ids: val
|
||
}
|
||
this.$confirm('确定删除这些数据?', '提示', {
|
||
confirmButtonText: this.$t('m.determine'),
|
||
cancelButtonText: this.$t('m.cancel'),
|
||
type: 'warning',
|
||
confirmButtonClass: 'common-button-primary',
|
||
roundButton: true
|
||
}).then(() => {
|
||
exportDel(delId).then(res => {
|
||
if (res.ok) {
|
||
this.$message.success('删除成功')
|
||
this.pageNo = 1
|
||
this.multipleSelection = []
|
||
this.getTableData()
|
||
} else {
|
||
this.$message.warning('删除失败')
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
},
|
||
/** 分页 */
|
||
pageChange(page) {
|
||
this.formQuery.page = page
|
||
this.getTableData()
|
||
},
|
||
pageSizeChange(pageSize) {
|
||
this.formQuery.pageSize = pageSize
|
||
this.getTableData()
|
||
},
|
||
/** 附件详情 */
|
||
/* fileDetail(val) {
|
||
this.tableFile = val
|
||
this.annexList = this.tableFile.annexs
|
||
this.annexDialog = true
|
||
this.acceptShow = true
|
||
|
||
},*/
|
||
/**
|
||
* 导入
|
||
*/
|
||
uploadBank(param){
|
||
const formData = new FormData()
|
||
formData.append('file', param.file)
|
||
importAllZcbs(formData).then(res=>{
|
||
if (res.ok === true){
|
||
this.$message.success("导入成功")
|
||
this.dialogVisible1 = false
|
||
this.getTableData()
|
||
this.$refs.file.clearFiles()
|
||
|
||
}else {
|
||
this.$message.error(res.data)
|
||
}
|
||
})
|
||
},
|
||
// 导入前验证
|
||
onbeforeunload(file){
|
||
if (!file){
|
||
this.$message.error('请上传文件')
|
||
}
|
||
const maxFile = file.size / 1024 / 1024 < 10;
|
||
const isExcel = file.name.indexOf('.xls') >= 0
|
||
if (!isExcel){
|
||
this.$message.error('只能上传Excel文件！')
|
||
}
|
||
if (!maxFile){
|
||
this.$message.error('上传大小不能超过10M')
|
||
}
|
||
return maxFile && isExcel
|
||
},
|
||
handleSuccess(){
|
||
|
||
},
|
||
// 文件上传成功
|
||
handleOnsuccess(res, file, fileList) {
|
||
if (res.ok) {
|
||
console.log(this.annexList)
|
||
if (this.annexList !== undefined ) {
|
||
this.newDataList = this.annexList
|
||
this.newDataList.push({
|
||
id: res.data.attId,
|
||
name: res.data.standName,
|
||
allName: res.data.name
|
||
})
|
||
} else {
|
||
this.newDataList.push({
|
||
id: res.data.attId,
|
||
name: res.data.standName,
|
||
allName: res.data.name
|
||
})
|
||
}
|
||
this.annexList = this.newDataList
|
||
this.$message({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: 'success'
|
||
})
|
||
this.newDataList = []
|
||
this.fileMadel = false
|
||
}
|
||
},
|
||
// 移除上传的文件
|
||
handleBeforeRemove(file, fileList) {
|
||
this.annexList.forEach((item, index) => {
|
||
if (item.name === file.name || item.id === file.id ) {
|
||
this.annexList.splice(index,1)
|
||
}
|
||
})
|
||
},
|
||
// 文件上传限制条件
|
||
handleBeforeUpload(file) {
|
||
var filename = file.name
|
||
var index1 = filename.lastIndexOf('.')
|
||
var index2 = filename.length
|
||
var fileSuffix = filename.substring(index1, index2)
|
||
// const fileSuffix = file.name.split('.')[1] // 后缀名
|
||
// 判断上传文件格式
|
||
if (fileSuffix === '.ZIP' || fileSuffix === '.docx' || fileSuffix === '.DOCX' || fileSuffix === '.zip' || fileSuffix === '.xls' || fileSuffix === '.xlsx') {
|
||
return true
|
||
} else {
|
||
this.spinShow = false
|
||
this.$message.error('文件' + file.name + '格式不正确，请上传ZIP/DOCX或XLS文件')
|
||
return false
|
||
}
|
||
// 判断文件上传大小
|
||
// eslint-disable-next-line no-unreachable
|
||
if (file.size / 1024 / 1024 <= 200) {
|
||
return true
|
||
} else {
|
||
this.$message.error('文件' + file.name + '大小不超过200M')
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
// 点击上传的文件进行下载
|
||
handleOnPreview(file) {
|
||
let attId = file.id
|
||
if (attId != null && attId !== "") {
|
||
window.location.href = "/api/att/attFile/downloadFileForSarNew?fileId=" + attId;
|
||
}
|
||
},
|
||
/** 点击对应附件进行下载*/
|
||
previews(val) {
|
||
let attId = val
|
||
if (attId != null && attId !== "") {
|
||
window.location.href = "/api/att/attFile/downloadFileForSarNew?fileId=" + attId;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.child2 {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-divider--horizontal {
|
||
height: 0.5px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
flex: auto;
|
||
width: 100%;
|
||
height: calc(100% - 110px) !important;
|
||
}
|
||
|
||
.leading-in {
|
||
width: 400px;
|
||
height: 200px
|
||
}
|
||
|
||
.icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
|