/*mUtils.js用于解析get请求的参数*/
export const param2Obj = url => {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}

  

/*money.js*/
import Mock from 'mockjs'
import * as mUtils from '@/utils/mUtils'
let List = []
const count = 60
let typelist = [1, 2, 3, 4, 5, 6, 7, 8]
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
id: Mock.Random.guid(),
username: Mock.Random.cname(),
address: Mock.mock('@county(true)'),
createTime: Mock.Random.datetime(),
income: Mock.Random.float(0, 9999, 2,2),
pay: Mock.Random.float(-5999, 0, 2,2),
accoutCash: Mock.Random.float(0, 9999, 2,2),
'incomePayType|1': typelist
}))
}
export default {
/* 获取列表getMoneyList*/
getMoneyList: config => {
const { name, page = 1, limit = 20 } = mUtils.param2Obj(config.url)
console.log(mUtils.param2Obj(config.url))
console.log(page+"++"+limit)
const mockList = List.filter(user => {
if (name && user.username.indexOf(name) === -1) return false
return true
})
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
return {
code: 200,
data: {
total: mockList.length,
moneyList: pageList
}
}
},
/** 增加资金信息createMoney*/
createMoney: config => {
const { username, address, income, pay , accoutCash, incomePayType } = mUtils.param2Obj(config.url)
List.push({
id: Mock.Random.guid(),
username: username,
address: address,
createTime: Mock.Random.now(),
income: income,
pay: pay,
accoutCash: accoutCash,
incomePayType: incomePayType
})
return {
code: 200,
data: {
message: '添加成功'
}
}
},
/*** 删除用户deleteMoney */
deleteMoney: config => {
const { id } = mUtils.param2Obj(config.url)
if (!id) {
return {
code: -999,
message: '参数不正确'
}
} else {
List = List.filter(u => u.id !== id)
return {
code: 200,
data: {
message: '删除成功'
}
}
}
},
/* 批量删除 */ batchremoveMoney: config => {
console.log(config);
// console.log(mUtils.param2Obj(config.url));
let { ids } = mUtils.param2Obj(config.url)
console.log(ids);
ids = ids.split(',')
List = List.filter(u => !ids.includes(u.id))
return {
code: 200,
data: {
message: '批量删除成功'
}
}
},
/*修改用户 */
updateMoney: config => {
const { id,username, address, income, pay , accoutCash, incomePayType } = mUtils.param2Obj(config.url)
List.some(u => {
if (u.id === id) {
u.username = username
u.address = address
u.income = income
u.pay = pay
u.accoutCash = accoutCash
u.incomePayType = incomePayType
return true
}
})
return {
code: 200,
data: {
message: '编辑成功'
}
}
}
}

  

/*index.js*/
import Mock from 'mockjs'
import tableAPI from './money'
import salesAPI from './sales'
import userAPI from './user'
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({
timeout: '300-600'
})
// 资金相关
Mock.mock(/\/money\/get/, 'get', tableAPI.getMoneyList)
Mock.mock(/\/money\/remove/, 'get', tableAPI.deleteMoney)
Mock.mock(/\/money\/batchremove/, 'get', tableAPI.batchremoveMoney)
Mock.mock(/\/money\/add/, 'get', tableAPI.createMoney)
Mock.mock(/\/money\/edit/, 'get', tableAPI.updateMoney)
// sales相关
Mock.mock(/\/sales\/get/, 'get', salesAPI.getSalesList)
// user相关
Mock.mock(/\/user\/login/, 'get', userAPI.login)
Mock.mock(/\/user\/logout/, 'get', userAPI.logout)
Mock.mock(/\/user\/info\/get/, 'get', userAPI.getUserInfo)
Mock.mock(/\/user\/list\/get/, 'get', userAPI.getUserList)

  

/*Api.js接口管理*/
import request from '@/utils/axios'
export function getMoneyIncomePay(params) {
return request({
url: '/money/get',
method: 'get',
params: params
})
}
export function addMoney(params) {
return request({
url: '/money/add',
method: 'get',
params: params
})
} export function removeMoney(params) {
return request({
url: '/money/remove',
method: 'get',
params: params
})
}
export function batchremoveMoney(params) {
return request({
url: '/money/batchremove',
method: 'get',
params: params
})
}
export function updateMoney(params) {
return request({
url: '/money/edit',
method: 'get',
params: params
})
}

  

/*在组件里使用*/
<template>
<div class="fillcontain">
<search-item @showDialog="showAddFundDialog" @searchList="getMoneyList" @onBatchDelMoney="onBatchDelMoney"></search-item>
<div class="table_container">
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%"
align='center'
@select="selectTable"
@select-all="selectAll"
>
<el-table-column
v-if="idFlag"
prop="id"
label="id"
align='center'
width="180">
</el-table-column>
<el-table-column
type="selection"
align='center'
width="40">
</el-table-column>
<el-table-column
prop="username"
label="用户姓名"
align='center'
width="80">
</el-table-column>
<el-table-column
prop="address"
label="籍贯"
align='center'
>
</el-table-column>
<el-table-column
prop="createTime"
label="投资时间"
align='center'
sortable
width="170">
<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="130"
:formatter="formatterType"
:filters="fields.incomePayType.filter.list"
:filter-method="filterType">
</el-table-column>
<el-table-column
prop="income"
label="收入"
align='center'
width="130"
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="130"
sortable>
<template slot-scope="scope">
<span style="color:#f56767">{{ getPay(scope.row.pay) }}</span>
</template>
</el-table-column>
<el-table-column
prop="accoutCash"
label="账户现金"
align='center'
width="130"
sortable>
<template slot-scope="scope">
<span style="color:#4db3ff">{{ scope.row.accoutCash }}</span>
</template>
</el-table-column>
<el-table-column
prop="operation"
align='center'
label="操作"
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> <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>
<addFundDialog v-if="addFundDialog.show" :isShow="addFundDialog.show" :dialogRow="addFundDialog.dialogRow" @getFundList="getMoneyList" @closeDialog="hideAddFundDialog"></addFundDialog>
</div>
</div>
</template> <script>
import { mapGetters } from "vuex";
import * as mutils from '@/utils/mUtils'
import SearchItem from "./components/searchItem";
import AddFundDialog from "./components/addFundDialog";
import Pagination from "@/components/pagination";
import { getMoneyIncomePay , removeMoney, batchremoveMoney } from "@/api/money";
import axios from "axios"
export default {
data(){
return {
tableData: [],
tableHeight:0,
loading:true,
idFlag:false,
isShow:false, // 是否显示资金modal,默认为falselimit
editid:'',
rowIds:[],
sortnum:0,
format_type_list: {
0: '提现',
1: '提现手续费',
2: '提现锁定',
3: '理财服务退出',
4: '购买宜定盈',
5: '充值',
6: '优惠券',
7: '充值礼券',
8: '转账'
},
addFundDialog:{
show:false,
dialogRow:{}
},
incomePayData:{
page:1,
limit:20,
name:''
},
pageTotal:0,
// 用于列表筛选
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
}
},
}, }
},
components:{
SearchItem,
AddFundDialog,
Pagination
},
computed:{
...mapGetters(['search'])
},
mounted() {
this.getMoneyList();
// this.setTableHeight();
// window.onresize = () => {
// this.setTableHeight();
// }
},
methods: {
setTableHeight(){
this.$nextTick(() => {
this.tableHeight = document.body.clientHeight - 300
})
},
// 获取资金列表数据
getMoneyList(){
const para = Object.assign({},this.incomePayData,this.search);
getMoneyIncomePay(para).then(res => {
console.log(res)
this.loading = false;
this.pageTotal = res.data.total
// console.log(res)
this.tableData = res.data.moneyList
})
},
// 显示资金弹框
showAddFundDialog(val){
this.$store.commit('SET_DIALOG_TITLE', val)
this.addFundDialog.show = true;
},
hideAddFundDialog(){
this.addFundDialog.show = false;
},
// 上下分页
handleCurrentChange(val){
this.incomePayData.page = val;
this.getMoneyList()
},
// 每页显示多少条
handleSizeChange(val){
this.incomePayData.limit = val;
this.getMoneyList()
},
getPay(val){
if(mutils.isInteger(val)){
return -val;
}else{
return val;
}
}, /**
* 格式化状态
*/
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];
},
// 编辑操作方法
onEditMoney(row){
this.addFundDialog.dialogRow = row;
this.showAddFundDialog();
},
// 删除数据
onDeleteMoney(row){
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
})
.then(() => {
const para = { id: row.id }
removeMoney(para).then(res => {
this.$message({
message: '删除成功',
type: 'success'
})
this.getMoneyList()
})
})
.catch(() => {})
},
onBatchDelMoney(){
this.$confirm('确认批量删除记录吗?', '提示', {
type: 'warning'
})
.then(() => {
const ids = this.rowIds.map(item => item.id).toString()
const para = { ids: ids }
batchremoveMoney(para).then(res => {
this.$message({
message: '批量删除成功',
type: 'success'
})
this.getMoneyList()
})
})
.catch(() => {})
},
// 当用户手动勾选数据行的 Checkbox 时触发的事件
selectTable(val, row){
this.setSearchBtn(val);
},
// 用户全选checkbox时触发该事件
selectAll(val){
val.forEach((item) => {
this.rowIds.push(item.id);
});
this.setSearchBtn(val);
},
setSearchBtn(val){
let isFlag = true;
if(val.length > 0){
isFlag = false;
}else{
isFlag = true;
}
this.$store.commit('SET_SEARCHBTN_DISABLED',isFlag);
}
},
}
</script> <style lang="less" scoped>
.table_container{
padding: 10px;
background: #fff;
border-radius: 2px;
}
.el-dialog--small{
width: 600px !important;
}
.pagination{
text-align: left;
margin-top: 10px;
} </style>

  

mockjs 模拟实现增删改查的更多相关文章

  1. python函数模拟mysql增删改查功能

    import os list1 = ['staff_id', 'name', 'age', 'phone', 'dept', 'enroll_date'] def staff_info(): #获取员 ...

  2. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

  3. 用Java中的File类模拟实现对系统文件的增删改查效果

    码字不易,三连支持一波吧 IO操作向来是各大语言的热区,而对文件的操作也是重中之重. 那么在Java中也给我们提供了很多关于文件操作的类.今天我就用一个比较基本的File类来模拟实现对文件的增删改查效 ...

  4. 作业三:模拟 mysql 进行增删改查

    # !/usr/bin/env python3 # _*_coding:utf-8_*_ def help_sql(cmd): if cmd in func_dic.keys(): print('{} ...

  5. 模拟admin组件自己开发stark组件之增删改查

    增删改查,针对视图 我们需要modelform来创建,可自动生成标签,我们还要考虑用户是不是自己定制,依然解决方法是,继承和重写 app01下的joker.py文件 class BookModelFo ...

  6. Python 模拟SQL对文件进行增删改查

    #!/usr/bin/env python # _*_ coding:UTF-8 _*_ # __auth__: Dalhhin # Python 3.5.2,Pycharm 2016.3.2 # 2 ...

  7. Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)

    在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...

  8. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  9. mock.js 的用法 -- 脱离后端独立开发,实现增删改查功能

    在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...

  10. 【面向对象版】HashMap(增删改查)

    前言: 关于什么是HashMap,HashMap可以用来做些什么,这些定义类的描述,请参照[简易版]HashMap(增删改查)的内容. 这章节主要是面向实例,直接进行HashMap(增删改查)的演示. ...

随机推荐

  1. 本地锁 & 分布式锁

    引子: 解决缓存击穿问题 synchronized (this){代码块} public synchronized Map<String,List<Catelog2Vo>> g ...

  2. Git | Git Server 搭建,在自己的服务器上进行 git server 搭建

    系列文章目录 目录 系列文章目录 前言 操作 1. 创建 git 用户 2. 创建 .ssh 目录 3. 自定义仓库的根目录 4. 在服务器上创建个裸仓库 5. 手动配置一个公钥 6. 在本地测试一下 ...

  3. PAT 甲级考试【1003 Emergency】

    题目: As an emergency rescue team leader of a city, you are given a special map of your country. The m ...

  4. DES算法揭秘:数据加密的前沿技术

    DES算法起源: DES(Data Encryption Standard)算法是一种对称密钥加密算法,由IBM的Horst Feistel设计,于1977年被美国国家标准局(NBS)确定为数据加密标 ...

  5. python基础七(函数名称空间及作用域、函数对象、函数嵌套、闭包函数、装饰器)

    一 名称空间(namespaces):存放名字的地方,是对栈区的划分. 有了名称空间之后,就可以在栈区中存放相同的名字,详细的名称空间.分三种1.1 内建名称空间存放的名字:存放的python解释器内 ...

  6. 记录--两行CSS让页面提升了近7倍渲染性能!

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态.如果页面加载 ...

  7. 【K8S】Kubernetes中暴露外部IP地址来访问集群中的应用

    本文是Kubernetes.io官方文档中介绍如何创建暴露外部IP地址的Kubernetes Service 对象. 学习目标 运行Hello World应用程序的五个实例. 创建一个暴露外部IP地址 ...

  8. GIT版本控制学习博客

    GIT版本控制学习博客 环境部署 下载git版本控制即可. 用户配置 (1)设置用户及地址 git config --global user.name "Username" git ...

  9. 基于proteus的数字电路设计

    基于proteus的数字电路设计 1.实验原理 proteus的数字电路仿真能力还是比较强大的.这里总结一下proteus的几个基本操作以备后用.大致包括74hc系列的使用.常用调试设备.仿真开关.器 ...

  10. #回滚莫队#AT1219 歴史の研究

    洛谷题目 AT1219 分析 不满足区间减性质的运算,如最值,就不能用普通莫队求, 考虑回滚莫队,它的核心思想就是若区间在块内直接暴力, 否则将右端点从小到大排序,右端点按普通莫队求,那么左端点由于只 ...