exaple vue
<template>
<div class="fillcontain">
<div class="search_container">
<el-form
:inline="true"
:model='search_data'
ref="search_data"
class="demo-form-inline search-form">
<el-form-item label="投标时间筛选:">
<el-date-picker
v-model="search_data.startTime"
type="datetime"
placeholder="选择开始时间">
</el-date-picker> --
<el-date-picker
v-model="search_data.endTime"
type="datetime"
placeholder="选择结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" size ="mini" icon="search" @click='onScreeoutMoney("search_data")'>筛选</el-button>
</el-form-item>
<el-form-item class="btnRight">
<el-button type="primary" size ="mini" icon="view" @click='onAddMoney()'>添加</el-button>
</el-form-item>
</el-form>
</div>
<div class="table_container">
<el-table
:data="tableData"
style="width: 100%"
align='center'
:max-height="tableHeight">
<el-table-column
prop="sortnum"
label="序号"
align='center'
width="80">
</el-table-column>
<el-table-column
v-if="idFlag"
prop="id"
label="id"
align='center'
width="220">
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
align='center'
width="220"
sortable>
<template slot-scope="scope">
<el-icon name="time"></el-icon>
<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
</template>
</el-table-column>
<el-table-column
prop="incomePayType"
label="收支类型"
align='center'
width="180"
:formatter="formatterType"
:filters="fields.incomePayType.filter.list"
:filter-method="filterType">
</el-table-column>
<el-table-column
prop="incomePayDes"
label="收支描述"
align='center'
width="240">
</el-table-column>
<el-table-column
prop="income"
label="收入"
align='center'
width="170"
sortable>
<template slot-scope="scope">
<span style="color:#00d053">+ {{ scope.row.income }}</span>
</template>
</el-table-column>
<el-table-column
prop="pay"
label="支出"
align='center'
width="170"
sortable>
<template slot-scope="scope">
<span style="color:#f56767">- {{ scope.row.pay }}</span>
</template>
</el-table-column>
<el-table-column
prop="accoutCash"
label="账户现金"
align='center'
width="170"
sortable>
<template slot-scope="scope">
<span style="color:#4db3ff">{{ scope.row.accoutCash }}</span>
</template>
</el-table-column>
<el-table-column
prop="remarks"
label="备注"
align='center'
width="250">
</el-table-column>
<el-table-column
prop="operation"
align='center'
label="操作"
fixed="right"
width="180">
<template slot-scope='scope'>
<el-button
type="warning"
icon='edit'
size="mini"
@click='onEditMoney(scope.row)'
>编辑</el-button>
<el-button
type="danger"
icon='delete'
size="mini"
@click='onDeleteMoney(scope.row,scope.index)'
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-row>
<el-col :span="24">
<div class="pagination">
<el-pagination
v-if='paginations.total>0'
:page-sizes="paginations.page_sizes"
:page-size="paginations.page_size"
:layout="paginations.layout"
:total="paginations.total"
:current-page='paginations.page_index'
@current-change='handleCurrentChange'
@size-change='handleSizeChange'>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
<el-dialog :title="dialog.title" :visible.sync="dialog.show"
:close-on-click-modal='false'
:close-on-press-escape='false'
:modal-append-to-body="false">
<div class="form">
<el-form ref="form" :model="form"
:rules="form_rules"
:label-width="dialog.formLabelWidth" style="margin:10px;width:auto;">
<el-form-item label="收支类型:" >
<el-select v-model="form.incomePayType" placeholder="收支类型">
<el-option label="提现" value="0"></el-option>
<el-option label="提现手续费" value="1"></el-option>
<el-option label="提现锁定" value="2"></el-option>
<el-option label="理财服务退出" value="3"></el-option>
<el-option label="购买宜定盈" value="4"></el-option>
<el-option label="充值" value="5"></el-option>
<el-option label="优惠券" value="6"></el-option>
<el-option label="充值礼券" value="7"></el-option>
<el-option label="转账" value="8"></el-option>
</el-select>
</el-form-item>
<el-form-item prop='incomePayDes' label="收支描述:">
<el-input type="textarea" v-model="form.incomePayDes"></el-input>
</el-form-item>
<el-form-item prop='income' label="收入:">
<el-input type="income" v-model.number="form.income"></el-input>
</el-form-item>
<el-form-item prop='pay' label="支出:">
<el-input type="pay" v-model.number="form.pay"></el-input>
</el-form-item>
<el-form-item prop='accoutCash' label="账户现金:">
<el-input type="accoutCash" v-model.number="form.accoutCash"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input type="textarea" v-model="form.remarks"></el-input>
</el-form-item>
<el-form-item class="text_right">
<el-button @click="dialog.show = false">取 消</el-button>
<el-button type="primary" @click='onSubmit("form")'>提 交</el-button>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import dtime from 'time-formater'
import * as mutils from 'utils/mUtils'
import {axios} from 'utils/'
export default {
data(){
let validateData = (rule, value, callback) => {
if(value === ''){
let text;
if(rule.field == "income"){
text='收入';
}else if(rule.field == "pay"){
text='支出';
}else{
text='账户现金';
}
callback(new Error(text+'不能为空~'));
}else{
let numReg = /^[0-9]+.?[0-9]*/;
if(!numReg.test(value)){
callback(new Error('请输入数字值'));
}else{
callback();
}
}
};
return {
tableData: [],
tableHeight:'',
idFlag:false,
editid:'',
sortnum:0,
search_data:{
startTime:'',
endTime:''
},
format_type_list: {
0: '提现',
1: '提现手续费',
2: '提现锁定',
3: '理财服务退出',
4: '购买宜定盈',
5: '充值',
6: '优惠券',
7: '充值礼券',
8: '转账'
},
//需要给分页组件传的信息
paginations: {
page_index: 1, // 当前位于哪页
total: 0, // 总数
page_size: 20, // 1页显示多少条
page_sizes: [5, 10, 15, 20], //每页显示多少条
layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
},
fields: {
incomePayType:{
filter: {
list: [{
text: '提现',
value: 0
},{
text: '提现手续费',
value: 1
}, {
text: '提现锁定',
value: 2
}, {
text: '理财服务退出',
value: 3
}, {
text: '购买宜定盈',
value: 4
}, {
text: '充值',
value: 5
}, {
text: '优惠券',
value: 6
}, {
text: '充值礼券',
value: 7
}, {
text: '转账',
value: 8
}],
multiple: true
}
},
create_time: {
info: {
prop: 'create_time',
label: '日期',
sortable: true
},
filter: {
},
style: {
width: '260',
align: 'center'
}
},
},
//详情弹框信息
dialog: {
width:'400px',
show : false,
title: '修改资金信息',
formLabelWidth:'120px'
},
form:{
incomePayType:'',
incomePayDes: '',
income: '',
pay:'',
accoutCash:'',
remarks: ''
},
form_rules: {
incomePayDes : [
{required: true, message : '收支描述不能为空！',trigger : 'blur'}
],
income : [
{ required: true, validator:validateData,trigger: 'blur'},
],
pay : [
{ required: true, validator:validateData,trigger: 'blur'},
],
accoutCash : [
{ required: true, validator:validateData,trigger: 'blur'},
],
}
}
},
mounted() {
//加载数据之前，先加载theme颜色
this.getList({
fun: () => {}
});
},
methods: {
/**
* 格式化状态
*/
formatterType(item) {
const type = parseInt(item.incomePayType);
return this.format_type_list[type];
},
filterType(value, item) {
const type = parseInt(item.incomePayType);
return this.format_type_list[value] == this.format_type_list[type];
},
/**
* 改变页码和当前页时需要拼装的路径方法
* @param {string} field 参数字段名
* @param {string} value 参数字段值
*/
setPath(field, value) {
var path = this.route.path,
query = Object.assign({}, this.route.query);
if (typeof field === 'object') {
query = field;
} else {
query[field] = value;
}
this.router.push({
path,
query
});
},
getList({
page,
page_size,
where,
fun
} = {}){
var query = this.route.query;
this.paginations.page_index = page || parseInt(query.page) || 1;
this.paginations.page_size = page_size || parseInt(query.page_size) || this.paginations.page_size;
var data = {
pageIndex: this.paginations.page_index,
pageSize: this.paginations.page_size
};
if (where) {
data = Object.assign(data, where || {});
}
// 封装 get,path,params,fn,errfn
axios({
type:'get',
path:'/api/money/getMoneyIncomePay',
data:data,
fn:data=>{
//成功之后的回调函数
this.paginations.total = data.count;
this.tableData = [];
data.data.forEach((item,index) => {
const tableItem = {
sortnum:this.sortnum+(index+1),
id: item._id,
createTime: mutils.parseToDate(JSON.stringify(item.createTime)),
incomePayType: item.incomePayType,
incomePayDes: item.incomePayDes,
income: mutils.toFixedNum(item.income),
pay: mutils.toFixedNum(item.pay),
accoutCash: mutils.toFixedNum(item.accoutCash),
remarks: item.remarks
}
this.tableData.push(tableItem);
})
fun && fun();
}
})
},
// 操作方法
onEditMoney(row){
this.editid = row.id;
this.form.incomePayType = row.incomePayType;
this.form.incomePayDes = row.incomePayDes;
this.form.income = Number(row.income);
this.form.pay = Number(row.pay);
this.form.accoutCash = Number(row.accoutCash);
this.form.remarks = row.remarks;
this.dialog.title = '修改资金信息';
this.dialog.show = true;
},
onDeleteMoney(row){
//根据id来删除数据
this.message({
showClose: true,
message: '对不起，您暂无此操作权限~',
type: 'success'
});
return;
let data = {
id:row.id
}
axios({
type:'get',
path:'/api/money/deleteMoneyIncomePay',
data:data,
fn:data=>{
this.message('删除成功'),
this.paginations.total = data.count;
this.getList({fun: () => {} }); // 删除成功后，重新加载数据;
},
errFn:()=>{
this.message.error('删除失败请重试')
}
})
},
onAddMoney(){
const formdata = this.form;
for(let key in formdata){
formdata[key] ='';
}
this.dialog.title = '新增资金信息';
this.dialog.show = true;
},
// 每页多少条切换
handleSizeChange(page_size) {
this.getList({
page_size,
fun: () => {
this.setPath('page_size', page_size);
}
});
},
// 上下分页
handleCurrentChange(page) {
this.sortnum = this.paginations.page_size*(page-1);
this.getList({
page,
fun: () => {
this.setPath('page', page);
}
});
},
editMoneyIncomePay(data){
axios({
type:'get',
path:'/api/money/editMoneyIncomePay',
data:data,
fn:data=>{
this.message('编辑成功'),
this.paginations.total = data.count;
this.getList({fun: () => {} });
this.dialog.show = false;
},
errFn:()=>{
this.message.error('编辑失败请重试')
}
})
},
addMoneyIncomePay(data){
axios({
type:'get',
path:'/api/money/addMoneyIncomePay',
data:data,
fn:data=>{
this.message('新增成功'),
this.paginations.total = data.count;
this.getList({fun: () => {} });
this.dialog.show = false;
},
errFn:()=>{
this.message.error('新增失败请重试')
}
})
},
//表单提交
onSubmit(form){
this.refs[form].validate((valid) => {
if (valid) {//表单数据验证完成之后，提交数据;
let formData = this[form];
let data = {};
for(var i in formData){
data.id = this.editid;
data.accoutCash = Number(formData['accoutCash'])
data.income = Number(formData['income'])
data.pay = Number(formData['pay'])
data.incomePayType = parseInt(formData['incomePayType'])
data.incomePayDes = formData['incomePayDes']
data.remarks = formData['remarks']
}
console.log(data);
if(this.editid != ""){
this.editMoneyIncomePay(data)
}else{
this.addMoneyIncomePay(data)
}
}
})
},
//筛选
onScreeoutMoney(search_data){
this.refs[search_data].validate((valid) => {
if (valid) {//表单数据验证完成之后，提交数据;
let formData = this[search_data];
let data = {};
const startTime = formData['startTime'];
const endTime = formData['endTime'];
if(mutils.isEmpty(startTime)){
data.startTime = "";
}else{
data.startTime = parseInt(mutils.formatDate(new Date(startTime),2)); // 毫秒数，时间戳
}
if(mutils.isEmpty(endTime)){
data.endTime = "";
}else{
data.endTime = parseInt(mutils.formatDate(new Date(endTime),2));
}
console.log(data);
axios({
type:'get',
path:'/api/money/screeoutMoneyIncomePay',
data:data,
fn:data=>{
//得到筛选之后的值，进行重新加载表格数据;
this.message('筛选成功'),
this.paginations.total = data.count; // ??
this.tableData = [];
data.data.forEach( (item,index) => {
const tableItem = {
id: item._id,
sortnum:this.sortnum+(index+1),
createTime: mutils.parseToDate(JSON.stringify(item.createTime)),
incomePayType: item.incomePayType,
incomePayDes: item.incomePayDes,
income: item.income,
pay: item.pay,
accoutCash: item.accoutCash,
remarks: item.remarks
}
this.tableData.push(tableItem);
})
},
errFn:()=>{
this.$message.error('编辑失败请重试')
}
})
}
})
}
},
}
</script>
<style lang="less" scoped>
.btnRight{
float: right;
margin-right: 0px !important;
}
.search-form{
width:100%;
min-width:750px;
.el-form-item{
margin-bottom: 10px !important;
.el-date-editor{
width:200px;
.el-input__inner{
height:36px !important;
}
}
}
}
.el-dialog--small{
width: 600px !important;
}
.pagination{
text-align: left;
margin-top: 10px;
}
</style>