407 lines
12 KiB
Vue
407 lines
12 KiB
Vue
<!--标法规-工作组-项目费用统计信息-标准制修订补助资金收支统计--收入表-->
|
|
<template>
|
|
<div id="translateCost" class="child1">
|
|
<!-- 第一第二行表单 -->
|
|
<div class="revise">
|
|
<el-form :inline="true" :model="formInline1" class="demo-form-inline" ref="formInline1">
|
|
<el-form-item label="标准名称">
|
|
<el-input v-model="formInline1.name" size="small" placeholder="请输入标准名称" style="width: 170px" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="标准编号">
|
|
<el-input v-model="formInline1.num" size="small" placeholder="请输入标准编号" style="width:170px" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="补助来源">
|
|
<el-input v-model="formInline1.source" size="small" placeholder="请输入补助来源" style="width:170px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item class="search-item btn-box" >
|
|
<el-button type="primary" size="small" @click="" >查询</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="search-item btn-box">
|
|
<el-button type="" size="small" @click="resetForm('formInline1')" >清空</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true">
|
|
<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.native.prevent="deleteDetail($index,tableData)" 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="num"
|
|
label="标准编号"
|
|
|
|
>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
align="center"
|
|
prop="source"
|
|
label="补助来源"
|
|
|
|
>
|
|
<!-- <template slot-scope="scope">{{ scope.row.date }}</template>-->
|
|
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="money"
|
|
label="补助金额"
|
|
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="time"
|
|
label="入账时间"
|
|
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 新增抽屉 -->
|
|
<div class="meeting-drawer">
|
|
<el-drawer
|
|
:size="size"
|
|
title="新增"
|
|
:visible.sync="drawer1">
|
|
<div style="margin: 10px;height: inherit">
|
|
<el-form :label-position="labelPosition" label-width="150px" :model="formLabelAlign" >
|
|
<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.num" type="text" placeholder="请填写" style="width: 433px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="补助来源">
|
|
<el-input v-model="formLabelAlign.source" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="补助金额">
|
|
<el-input v-model="formLabelAlign.money" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="入账时间">
|
|
<el-input v-model="formLabelAlign.time" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="demo-drawer-footer">
|
|
<el-button size="small" @click="dialogVisible2 = false">取消</el-button>
|
|
<el-button size="small" type="primary" @click="submit()">提交</el-button>
|
|
</div>
|
|
|
|
</el-drawer>
|
|
</div>
|
|
<!-- 编辑抽屉 -->
|
|
<div class="meeting-drawer">
|
|
<el-drawer
|
|
:size="size"
|
|
title="编辑"
|
|
:visible.sync="drawer2">
|
|
<div style="margin: 10px;height: inherit">
|
|
<el-form :label-position="labelPosition" label-width="150px" :model="formLabelAlign2">
|
|
<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.num" type="text" placeholder="请填写" style="width: 433px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="补助来源">
|
|
<el-input v-model="formLabelAlign2.source" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="补助金额">
|
|
<el-input v-model="formLabelAlign2.money" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="入账时间">
|
|
<el-input v-model="formLabelAlign2.time" type="text" placeholder="请填写" style="width: 433px" >
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="demo-drawer-footer">
|
|
<el-button size="small" @click="dialogVisible2 = false">取消</el-button>
|
|
<el-button size="small" type="primary" @click.native.prevent="editSubForm">提交</el-button>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
<div>
|
|
<!-- 导入弹框 -->
|
|
<el-dialog
|
|
title="导入文件"
|
|
:visible.sync="dialogVisible1"
|
|
width="30%"
|
|
>
|
|
<el-button class="leading-in">点击或拖拽上传文件</el-button>
|
|
</el-dialog>
|
|
<!-- 导出弹框 -->
|
|
<!-- <el-dialog
|
|
title="导出文件"
|
|
:visible.sync="dialogVisible2"
|
|
width="30%"
|
|
>
|
|
<el-form :model="formInlineOut">
|
|
<el-form-item label="名称" >
|
|
<el-input v-model="formInlineOut.name" style="width:350px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="序号" >
|
|
<el-input v-model="formInlineOut.num" style="width:350px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="备注" >
|
|
<el-input v-model="formInlineOut.remarks" style="width:350px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible2 = false">取 消</el-button>
|
|
<el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
|
|
</span>
|
|
</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: "child1",
|
|
data() {
|
|
return {
|
|
formInline1: {
|
|
name: '',
|
|
num: '',
|
|
source: ''
|
|
},
|
|
tableData: [{
|
|
name: '1',
|
|
num: '397433',
|
|
source: '来源1',
|
|
money: '2322',
|
|
time: '2020-02-02'
|
|
},{
|
|
name: '2',
|
|
num: '123456',
|
|
source: '来源2',
|
|
money: '1111',
|
|
time: '2020-04-06'
|
|
},{
|
|
name: '3',
|
|
num: '3',
|
|
source: '3',
|
|
money: '3',
|
|
time: '3'
|
|
}
|
|
],
|
|
multipleSelection: [],
|
|
drawer1: false,
|
|
drawer2: false,
|
|
size: '600px',
|
|
labelPosition: 'center',
|
|
formLabelAlign: {
|
|
name: '',
|
|
num: '',
|
|
source: '',
|
|
money: '',
|
|
time: ''
|
|
},
|
|
formLabelAlign2: {
|
|
name: '',
|
|
num: '',
|
|
source: '',
|
|
money: '',
|
|
time: ''
|
|
},
|
|
rowIndex: null,
|
|
dialogVisible1: false,
|
|
dialogVisible2: false,
|
|
dialogVisible3: false,
|
|
currentPage: 1
|
|
}
|
|
},
|
|
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
//新增方法
|
|
submit: function(){
|
|
this.$confirm('确认进行添加','是否继续？','提示',{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
}).then(()=>{
|
|
this.tableData.push({
|
|
name:this.formLabelAlign.name,
|
|
num:this.formLabelAlign.num,
|
|
source: this.formLabelAlign.source,
|
|
money: this.formLabelAlign.money,
|
|
time: this.formLabelAlign.time
|
|
}),
|
|
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
|
|
})
|
|
})
|
|
},
|
|
//编辑（修改）
|
|
drawer2:function (index,row) {
|
|
this.formLabelAlign2=Object.assign({},row);
|
|
console.log(index);
|
|
},
|
|
//点击确定（编辑）(没出)
|
|
editSubForm(){
|
|
var editdata= _index;
|
|
console.log(editdata);
|
|
this.tableData[editdata].name=this.formLabelAlign2.name;
|
|
this.tableData[editdata].num=this.formLabelAlign2.num;
|
|
this.tableData[editdata].source=this.formLabelAlign2.source;
|
|
this.tableData[editdata].money=this.formLabelAlign2.money;
|
|
this.tableData[editdata].time=this.formLabelAlign2.time;
|
|
this.FormVisible = true;
|
|
},
|
|
//清空
|
|
resetForm(formName) {
|
|
this[formName] = {};
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs[formName].resetFields()
|
|
});
|
|
},
|
|
|
|
/*获取需要渲染到页面中的数据*/
|
|
getShowData:function (arr){
|
|
this.clonetableData=JSON.parse(JSON.stringify(arr));
|
|
},
|
|
/*专门为查询写的渲染数据*/
|
|
getShowData1:function (arr){
|
|
this.tableData=JSON.parse(JSON.stringify(arr));
|
|
},
|
|
/*分页*/
|
|
handleSizeChange(val) {
|
|
console.log(`每页 ${val} 条`);
|
|
},
|
|
handleCurrentChange(val) {
|
|
console.log(`当前页: ${val}`);
|
|
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.child1{
|
|
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>
|
|
|