499 lines
15 KiB
Vue
499 lines
15 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="dialogVisible2 = true">导出</el-button>
|
|
<el-button type="danger" size="small" @click="deleteDetail" icon="el-icon-delete">批量删除</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>
|
|
|
|
|
|
<!-- <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'
|
|
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: [],
|
|
|
|
}
|
|
},
|
|
|
|
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;
|
|
},
|
|
//新增方法
|
|
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
|
|
|
|
},*/
|
|
// 文件上传成功
|
|
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/downloadFileForSar?fileId=" + attId;
|
|
}
|
|
},
|
|
/** 点击对应附件进行下载*/
|
|
previews(val) {
|
|
let attId = val
|
|
if (attId != null && attId !== "") {
|
|
window.location.href = "/api/att/attFile/downloadFileForSar?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>
|
|
|