333 lines
9.9 KiB
Vue
333 lines
9.9 KiB
Vue
<!--标法规-工作组-项目费用统计信息-标准制修订补助资金收支统计--支出表-->
|
|
<template>
|
|
<div id="translateCost" class="child2">
|
|
<!-- 第一第二行表单 -->
|
|
<div class="revise">
|
|
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
|
<el-form-item label="项目名称：">
|
|
<el-input v-model="formInline1.name" placeholder="根据项目名称搜索" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item style="width: 50px"></el-form-item>
|
|
<el-form-item label="支出金额：">
|
|
<el-input v-model="formInline1.money" placeholder="根据支出金额搜索" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item style="width: 50px"></el-form-item>
|
|
<el-form-item label="用途：">
|
|
<el-input v-model="formInline1.use" placeholder="根据用途搜索" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item style="width: 100px"></el-form-item>
|
|
<el-form-item class="search-item btn-box" >
|
|
<el-button type="primary" size="small" onclick="" >查询</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="search-item btn-box">
|
|
<el-button type="" size="small" onclick="" >清空</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="formInline2">
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" @click="drawer1 = true" >新增</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" @click="drawer2 = true" >编辑</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" @click="dialogVisible1 = true" >导入</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" @click="dialogVisible2 = true" >导出</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="" size="small" @click="deleteDetail" icon="el-icon-delete" icon-color="red">批量删除</el-button>
|
|
<!-- handleDelete(scope.$index, scope.row)-->
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" onclick="" >模板下载</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!-- 表格-->
|
|
<div class="container">
|
|
<el-table
|
|
:data="tableData"
|
|
tooltip-effect="dark"
|
|
style="width: auto"
|
|
border
|
|
height="100%"
|
|
:header-cell-style="{background: '#f5f1f1', color: '#333333', fontSize: '16px',
|
|
fontWeight: 'bold', height: '48px'}"
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column
|
|
type="selection"
|
|
width="50">
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
type="index"
|
|
label="序号"
|
|
width="100"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="name"
|
|
label="项目名称"
|
|
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="payMoney"
|
|
label="支出金额"
|
|
|
|
>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
align="center"
|
|
prop="use"
|
|
label="用途"
|
|
|
|
>
|
|
<!-- <template slot-scope="scope">{{ scope.row.date }}</template>-->
|
|
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="detailAnnex"
|
|
label="详细附件"
|
|
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 新增抽屉 -->
|
|
<div class="meeting-drawer">
|
|
<el-drawer
|
|
:size="size"
|
|
title="新增"
|
|
:visible.sync="drawer1">
|
|
<div style="margin: 10px;"></div>
|
|
<el-form :label-position="labelPosition" label-width="150px" :model="formLabelAlign" v-model="labelPosition">
|
|
<el-form-item label="项目名称">
|
|
<el-input v-model="formLabelAlign.name" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="支出金额">
|
|
<el-input v-model="formLabelAlign.payMoney" type="text" placeholder="请填写" style="width: 433px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="用途">
|
|
<el-input v-model="formLabelAlign.use" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="详细附件">
|
|
<el-input v-model="formLabelAlign.detailAnnex" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item style="height: 250px"></el-form-item>
|
|
<el-form-item :inline="true" label-width="400px">
|
|
<el-button @click="dialogVisible2 = false">取消</el-button>
|
|
<el-button type="primary" @click="submit()">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
</el-drawer>
|
|
</div>
|
|
<!-- 编辑抽屉 -->
|
|
<div class="meeting-drawer">
|
|
<el-drawer
|
|
:size="size"
|
|
title="编辑"
|
|
:visible.sync="drawer2">
|
|
<div style="margin: 10px;"></div>
|
|
<el-form :label-position="labelPosition" label-width="150px" :model="formLabelAlign2" v-model="labelPosition">
|
|
<el-form-item label="项目名称">
|
|
<el-input v-model="formLabelAlign2.name" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="支出金额">
|
|
<el-input v-model="formLabelAlign2.payMoney" type="text" placeholder="请填写" style="width: 433px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="用途">
|
|
<el-input v-model="formLabelAlign2.use" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="详细附件">
|
|
<el-input v-model="formLabelAlign2.detailAnnex" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item style="height: 250px"></el-form-item>
|
|
<el-form-item :inline="true" label-width="400px">
|
|
<el-button @click="dialogVisible2 = false">取消</el-button>
|
|
<el-button type="primary" @click="addUser">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
</el-drawer>
|
|
</div>
|
|
<div>
|
|
<!-- 导入弹框 -->
|
|
<el-dialog
|
|
title="导入文件"
|
|
:visible.sync="dialogVisible1"
|
|
width="30%"
|
|
>
|
|
<el-button class="leading-in">点击或拖拽上传文件</el-button>
|
|
</el-dialog>
|
|
</div>
|
|
<!-- 页脚分页-->
|
|
<div class="block">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-size="10"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="100">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "child2",
|
|
data() {
|
|
return {
|
|
formInline1: {
|
|
name: '',
|
|
money: '',
|
|
use: ''
|
|
},
|
|
tableData: [{
|
|
name: '1',
|
|
payMoney: '1',
|
|
use: '1',
|
|
detailAnnex: '1'
|
|
}],
|
|
multipleSelection: [],
|
|
drawer1: false,
|
|
drawer2: false,
|
|
size: '600px',
|
|
labelPosition: 'center',
|
|
formLabelAlign: {
|
|
name: '',
|
|
payMoney: '',
|
|
use: '',
|
|
detailAnnex: ''
|
|
},
|
|
formLabelAlign2: {
|
|
name: '',
|
|
payMoney: '',
|
|
use: '',
|
|
detailAnnex: ''
|
|
},
|
|
dialogVisible1: false,
|
|
dialogVisible2: false,
|
|
/*formInlineOut: {
|
|
name: '',
|
|
num: '',
|
|
remarks: ''
|
|
},*/
|
|
dialogVisible3: false,
|
|
currentPage: 1
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.getTableData()
|
|
},
|
|
|
|
methods: {
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
//新增方法
|
|
submit: function(){
|
|
this.$confirm('确认进行添加','是否继续？','提示',{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
}).then(()=>{
|
|
this.tableData.push({
|
|
name:this.formLabelAlign.name,
|
|
payMoney:this.formLabelAlign.payMoney,
|
|
use: this.formLabelAlign.use,
|
|
detailAnnex: this.formLabelAlign.detailAnnex
|
|
}),
|
|
this.$message({
|
|
type: 'success',
|
|
message: '添加成功'
|
|
})
|
|
})
|
|
},
|
|
//删除方法
|
|
deleteDetail: function(index,rows) {
|
|
this.$confirm('此操作将删除数据,','是否继续?','提示',{
|
|
confirmButtonText:'确定',
|
|
cancelButtonText:'取消',
|
|
type:'warning'
|
|
}).then(()=>{
|
|
this.tableData.splice(index,1)
|
|
this.$message({
|
|
type: 'success',
|
|
message:'删除成功',
|
|
})
|
|
}).catch((err) =>{
|
|
this.$message({
|
|
type:'error',
|
|
message:err
|
|
})
|
|
})
|
|
},
|
|
/*增加行和删除行*/
|
|
handleSizeChange(val) {
|
|
console.log(`每页 ${val} 条`);
|
|
},
|
|
handleCurrentChange(val) {
|
|
console.log(`当前页: ${val}`);
|
|
},
|
|
addUser (){
|
|
this.$message.success('添加信息成功！')
|
|
this.dialogVisible2=false
|
|
this.getTableData()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.child2{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
flex: auto;
|
|
width: 100%;
|
|
height: calc(100% - 110px) !important;
|
|
|
|
.pagination {
|
|
position: static;
|
|
|
|
/deep/ .pagination-slot {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
.leading-in{
|
|
width: 400px;
|
|
height: 200px
|
|
}
|
|
.icon{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|