1、修改fundlist，把添加按钮加上
2、新建dialog
3、Fundlist引入dialog
-
引入(import)，
-
注册(components)，
-
使用<Dialog></Dialog>
-
给状态
dialog:{
show:false
}
- 添加按钮：
handleAdd(){
this.dialog.show=true;
}
-
组件绑定：<Dialog :dialog="dialog"></Dialog>
-
关闭组件：给Dialog组件添加sync
:visible.sync="dialog.show" -
注意：表单提交传递的是ref
4、代码
//Dialog.vue
<template>
<div class="dialog">
<el-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="formData" :rules="rules" label-width="120px" style="margin:10px;width:auto;">
<el-form-item label="收支类型：">
<el-select v-model="formData.type" placeholder="收支类型:">
<el-option
v-for="(formtype,index) in format_type_list"
:key="index"
:label="formtype"
:value="formtype"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="describe" label="收支描述:">
<el-input type="describe" v-model="formData.describe"></el-input>
</el-form-item>
<el-form-item prop="income" label="收入:">
<el-input type="income" v-model="formData.income"></el-input>
</el-form-item>
<el-form-item prop="expend" label="支出:">
<el-input type="expend" v-model="formData.expend"></el-input>
</el-form-item>
<el-form-item prop="cash" label="账户现金:">
<el-input type="cash" v-model="formData.cash"></el-input>
</el-form-item>
<el-form-item prop="remark" label="备注:">
<el-input type="textarea" v-model="formData.remark"></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>
export default {
name: "dialog",
data() {
return {
formData: {
type: "",
describe: "",
income: "",
expend: "",
cash: "",
remark: ""
// id: ""
},
rules: {
describe: [
{
requied: true,
message: "收支描述不能为空",
trigger: "blur"
}
],
income: [{ requied: true, message: "收入不能为空", trigger: "blur" }],
expend: [{ requied: true, message: "支出不能为空", trigger: "blur" }],
cash: [{ requied: true, message: "账户不能为空", trigger: "blur" }]
},
format_type_list: [
"提现",
"提现手续费",
"充值",
"优惠券",
"充值礼券",
"转账"
]
};
},
props: {
dialog: Object
},
methods: {
onSubmit(form){
this.$refs[form].validate(valid=>{
if(valid){
this.$axios.post("/api/profiles/add",this.formData)
.then(res=>{
// 添加成功
this.$message({
message:"数据添加成功",
type:'success'
})
});
// 隐藏对话框
this.dialog.show = false;
// 自动刷新
this.$emit('update');
}
})
}
}
};
</script>
<style>
</style>
//FundList.vue
<template>
<div class="fillContainer">
<!-- 添加按钮 -->
<div>
<el-form :inline="true" ref="add_data">
<el-form-item class="btnRight">
<el-button type="primary" size="small" icon="view" @click="handleAdd()">添加</el-button>
</el-form-item>
</el-form>
</div>
<div class="table_container">
<el-table
v-if="tableData.length>0"
:data="tableData"
style="width: 100%"
max-height="450"
border
>
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
<el-table-column prop="date" label="创建时间" width="200" align="center">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column prop="type" label="收支类型" width="120" align="center"></el-table-column>
<el-table-column prop="describe" label="收支描述" width="160" align="center"></el-table-column>
<el-table-column prop="income" label="收入" width="150" align="center">
<template slot-scope="scope">
<span style="color:#00d053">{{scope.row.income}}</span>
</template>
</el-table-column>
<el-table-column prop="expend" label="支出" width="150" align="center">
<template slot-scope="scope">
<span style="color:#f56767">{{scope.row.expend}}</span>
</template>
</el-table-column>
<el-table-column prop="cash" label="账户现金" width="150" align="center">
<template slot-scope="scope">
<span style="color:#4db3ff">{{scope.row.cash}}</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" width="180" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="180" fixed="right" prop="operation">
<template slot-scope="scope">
<el-button
type="warning"
icon="edit"
size="small"
@click="handleEdit(scope.$index, scope.row)"
>编辑</el-button>
<el-button
size="small"
type="danger"
icon="delete"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<Dialog :dialog="dialog" @update="this.getProfile"></Dialog>
</div>
</template>
<script>
import Dialog from '../components/Dialog'
export default {
name: "fundlist",
data() {
return {
tableData: [],
dialog:{
show:false
}
};
},
created() {
this.getProfile();
},
methods: {
getProfile() {
// 获取表格数据
this.$axios
.get("/api/profiles")
.then(res => {
this.tableData = res.data;
})
.catch(err => console.log(err));
},
handleEdit(index, row) {
console.log(123);
},
handleDelete(index, row) {
console.log(456);
},
handleAdd(){
this.dialog.show=true;
}
},
components: {
Dialog
}
};
</script>
<style scoped>
.fillContainer {
width: 100%;
height: 100%;
padding: 16px;
box-sizing: border-box;
}
.btnRight{
float: right;
}
</style>
网友评论