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

  

  1. /*money.js*/
  1. import Mock from 'mockjs'
  2. import * as mUtils from '@/utils/mUtils'
  3. let List = []
  4. const count = 60
  5. let typelist = [1, 2, 3, 4, 5, 6, 7, 8]
  6. for (let i = 0; i < count; i++) {
  7. List.push(Mock.mock({
  8. id: Mock.Random.guid(),
  9. username: Mock.Random.cname(),
  10. address: Mock.mock('@county(true)'),
  11. createTime: Mock.Random.datetime(),
  12. income: Mock.Random.float(0, 9999, 2,2),
  13. pay: Mock.Random.float(-5999, 0, 2,2),
  14. accoutCash: Mock.Random.float(0, 9999, 2,2),
  15. 'incomePayType|1': typelist
  16. }))
  17. }
  18. export default {
  19. /* 获取列表getMoneyList*/
  20. getMoneyList: config => {
  21. const { name, page = 1, limit = 20 } = mUtils.param2Obj(config.url)
  22. console.log(mUtils.param2Obj(config.url))
  23. console.log(page+"++"+limit)
  24. const mockList = List.filter(user => {
  25. if (name && user.username.indexOf(name) === -1) return false
  26. return true
  27. })
  28. const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
  29. return {
  30. code: 200,
  31. data: {
  32. total: mockList.length,
  33. moneyList: pageList
  34. }
  35. }
  36. },
  37. /** 增加资金信息createMoney*/
  38. createMoney: config => {
  39. const { username, address, income, pay , accoutCash, incomePayType } = mUtils.param2Obj(config.url)
  40. List.push({
  41. id: Mock.Random.guid(),
  42. username: username,
  43. address: address,
  44. createTime: Mock.Random.now(),
  45. income: income,
  46. pay: pay,
  47. accoutCash: accoutCash,
  48. incomePayType: incomePayType
  49. })
  50. return {
  51. code: 200,
  52. data: {
  53. message: '添加成功'
  54. }
  55. }
  56. },
  57. /*** 删除用户deleteMoney */
  58. deleteMoney: config => {
  59. const { id } = mUtils.param2Obj(config.url)
  60. if (!id) {
  61. return {
  62. code: -999,
  63. message: '参数不正确'
  64. }
  65. } else {
  66. List = List.filter(u => u.id !== id)
  67. return {
  68. code: 200,
  69. data: {
  70. message: '删除成功'
  71. }
  72. }
  73. }
  74. },
  75. /* 批量删除 */
  76.  
  77. batchremoveMoney: config => {
  78. console.log(config);
  79. // console.log(mUtils.param2Obj(config.url));
  80. let { ids } = mUtils.param2Obj(config.url)
  81. console.log(ids);
  82. ids = ids.split(',')
  83. List = List.filter(u => !ids.includes(u.id))
  84. return {
  85. code: 200,
  86. data: {
  87. message: '批量删除成功'
  88. }
  89. }
  90. },
  91. /*修改用户 */
  92. updateMoney: config => {
  93. const { id,username, address, income, pay , accoutCash, incomePayType } = mUtils.param2Obj(config.url)
  94. List.some(u => {
  95. if (u.id === id) {
  96. u.username = username
  97. u.address = address
  98. u.income = income
  99. u.pay = pay
  100. u.accoutCash = accoutCash
  101. u.incomePayType = incomePayType
  102. return true
  103. }
  104. })
  105. return {
  106. code: 200,
  107. data: {
  108. message: '编辑成功'
  109. }
  110. }
  111. }
  112. }

  

  1. /*index.js*/
  1. import Mock from 'mockjs'
  2. import tableAPI from './money'
  3. import salesAPI from './sales'
  4. import userAPI from './user'
  5. // 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
  6. Mock.setup({
  7. timeout: '300-600'
  8. })
  9. // 资金相关
  10. Mock.mock(/\/money\/get/, 'get', tableAPI.getMoneyList)
  11. Mock.mock(/\/money\/remove/, 'get', tableAPI.deleteMoney)
  12. Mock.mock(/\/money\/batchremove/, 'get', tableAPI.batchremoveMoney)
  13. Mock.mock(/\/money\/add/, 'get', tableAPI.createMoney)
  14. Mock.mock(/\/money\/edit/, 'get', tableAPI.updateMoney)
  15. // sales相关
  16. Mock.mock(/\/sales\/get/, 'get', salesAPI.getSalesList)
  17. // user相关
  18. Mock.mock(/\/user\/login/, 'get', userAPI.login)
  19. Mock.mock(/\/user\/logout/, 'get', userAPI.logout)
  20. Mock.mock(/\/user\/info\/get/, 'get', userAPI.getUserInfo)
  21. Mock.mock(/\/user\/list\/get/, 'get', userAPI.getUserList)

  

  1. /*Api.js接口管理*/
    import request from '@/utils/axios'
  2. export function getMoneyIncomePay(params) {
  3. return request({
  4. url: '/money/get',
  5. method: 'get',
  6. params: params
  7. })
  8. }
  9. export function addMoney(params) {
  10. return request({
  11. url: '/money/add',
  12. method: 'get',
  13. params: params
  14. })
  15. }
  16.  
  17. export function removeMoney(params) {
  18. return request({
  19. url: '/money/remove',
  20. method: 'get',
  21. params: params
  22. })
  23. }
  24. export function batchremoveMoney(params) {
  25. return request({
  26. url: '/money/batchremove',
  27. method: 'get',
  28. params: params
  29. })
  30. }
  31. export function updateMoney(params) {
  32. return request({
  33. url: '/money/edit',
  34. method: 'get',
  35. params: params
  36. })
  37. }

  

  1. /*在组件里使用*/
    <template>
  2. <div class="fillcontain">
  3. <search-item @showDialog="showAddFundDialog" @searchList="getMoneyList" @onBatchDelMoney="onBatchDelMoney"></search-item>
  4. <div class="table_container">
  5. <el-table
  6. v-loading="loading"
  7. :data="tableData"
  8. style="width: 100%"
  9. align='center'
  10. @select="selectTable"
  11. @select-all="selectAll"
  12. >
  13. <el-table-column
  14. v-if="idFlag"
  15. prop="id"
  16. label="id"
  17. align='center'
  18. width="180">
  19. </el-table-column>
  20. <el-table-column
  21. type="selection"
  22. align='center'
  23. width="40">
  24. </el-table-column>
  25. <el-table-column
  26. prop="username"
  27. label="用户姓名"
  28. align='center'
  29. width="80">
  30. </el-table-column>
  31. <el-table-column
  32. prop="address"
  33. label="籍贯"
  34. align='center'
  35. >
  36. </el-table-column>
  37. <el-table-column
  38. prop="createTime"
  39. label="投资时间"
  40. align='center'
  41. sortable
  42. width="170">
  43. <template slot-scope="scope">
  44. <el-icon name="time"></el-icon>
  45. <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
  46. </template>
  47. </el-table-column>
  48. <el-table-column
  49. prop="incomePayType"
  50. label="收支类型"
  51. align='center'
  52. width="130"
  53. :formatter="formatterType"
  54. :filters="fields.incomePayType.filter.list"
  55. :filter-method="filterType">
  56. </el-table-column>
  57. <el-table-column
  58. prop="income"
  59. label="收入"
  60. align='center'
  61. width="130"
  62. sortable>
  63. <template slot-scope="scope">
  64. <span style="color:#00d053">+ {{ scope.row.income }}</span>
  65. </template>
  66. </el-table-column>
  67. <el-table-column
  68. prop="pay"
  69. label="支出"
  70. align='center'
  71. width="130"
  72. sortable>
  73. <template slot-scope="scope">
  74. <span style="color:#f56767">{{ getPay(scope.row.pay) }}</span>
  75. </template>
  76. </el-table-column>
  77. <el-table-column
  78. prop="accoutCash"
  79. label="账户现金"
  80. align='center'
  81. width="130"
  82. sortable>
  83. <template slot-scope="scope">
  84. <span style="color:#4db3ff">{{ scope.row.accoutCash }}</span>
  85. </template>
  86. </el-table-column>
  87. <el-table-column
  88. prop="operation"
  89. align='center'
  90. label="操作"
  91. width="180">
  92. <template slot-scope='scope'>
  93. <el-button
  94. type="warning"
  95. icon='edit'
  96. size="mini"
  97. @click='onEditMoney(scope.row)'
  98. >编辑</el-button>
  99. <el-button
  100. type="danger"
  101. icon='delete'
  102. size="mini"
  103. @click='onDeleteMoney(scope.row,scope.$index)'
  104. >删除</el-button>
  105. </template>
  106. </el-table-column>
  107. </el-table>
  108.  
  109. <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>
  110. <addFundDialog v-if="addFundDialog.show" :isShow="addFundDialog.show" :dialogRow="addFundDialog.dialogRow" @getFundList="getMoneyList" @closeDialog="hideAddFundDialog"></addFundDialog>
  111. </div>
  112. </div>
  113. </template>
  114.  
  115. <script>
  116. import { mapGetters } from "vuex";
  117. import * as mutils from '@/utils/mUtils'
  118. import SearchItem from "./components/searchItem";
  119. import AddFundDialog from "./components/addFundDialog";
  120. import Pagination from "@/components/pagination";
  121. import { getMoneyIncomePay , removeMoney, batchremoveMoney } from "@/api/money";
  122. import axios from "axios"
  123. export default {
  124. data(){
  125. return {
  126. tableData: [],
  127. tableHeight:0,
  128. loading:true,
  129. idFlag:false,
  130. isShow:false, // 是否显示资金modal,默认为falselimit
  131. editid:'',
  132. rowIds:[],
  133. sortnum:0,
  134. format_type_list: {
  135. 0: '提现',
  136. 1: '提现手续费',
  137. 2: '提现锁定',
  138. 3: '理财服务退出',
  139. 4: '购买宜定盈',
  140. 5: '充值',
  141. 6: '优惠券',
  142. 7: '充值礼券',
  143. 8: '转账'
  144. },
  145. addFundDialog:{
  146. show:false,
  147. dialogRow:{}
  148. },
  149. incomePayData:{
  150. page:1,
  151. limit:20,
  152. name:''
  153. },
  154. pageTotal:0,
  155. // 用于列表筛选
  156. fields: {
  157. incomePayType:{
  158. filter: {
  159. list: [{
  160. text: '提现',
  161. value: 0
  162. },{
  163. text: '提现手续费',
  164. value: 1
  165. }, {
  166. text: '提现锁定',
  167. value: 2
  168. }, {
  169. text: '理财服务退出',
  170. value: 3
  171. }, {
  172. text: '购买宜定盈',
  173. value: 4
  174. }, {
  175. text: '充值',
  176. value: 5
  177. }, {
  178. text: '优惠券',
  179. value: 6
  180. }, {
  181. text: '充值礼券',
  182. value: 7
  183. }, {
  184. text: '转账',
  185. value: 8
  186. }],
  187. multiple: true
  188. }
  189. },
  190. },
  191.  
  192. }
  193. },
  194. components:{
  195. SearchItem,
  196. AddFundDialog,
  197. Pagination
  198. },
  199. computed:{
  200. ...mapGetters(['search'])
  201. },
  202. mounted() {
  203. this.getMoneyList();
  204. // this.setTableHeight();
  205. // window.onresize = () => {
  206. // this.setTableHeight();
  207. // }
  208. },
  209. methods: {
  210. setTableHeight(){
  211. this.$nextTick(() => {
  212. this.tableHeight = document.body.clientHeight - 300
  213. })
  214. },
  215. // 获取资金列表数据
  216. getMoneyList(){
  217. const para = Object.assign({},this.incomePayData,this.search);
  218. getMoneyIncomePay(para).then(res => {
  219. console.log(res)
  220. this.loading = false;
  221. this.pageTotal = res.data.total
  222. // console.log(res)
  223. this.tableData = res.data.moneyList
  224. })
  225. },
  226. // 显示资金弹框
  227. showAddFundDialog(val){
  228. this.$store.commit('SET_DIALOG_TITLE', val)
  229. this.addFundDialog.show = true;
  230. },
  231. hideAddFundDialog(){
  232. this.addFundDialog.show = false;
  233. },
  234. // 上下分页
  235. handleCurrentChange(val){
  236. this.incomePayData.page = val;
  237. this.getMoneyList()
  238. },
  239. // 每页显示多少条
  240. handleSizeChange(val){
  241. this.incomePayData.limit = val;
  242. this.getMoneyList()
  243. },
  244. getPay(val){
  245. if(mutils.isInteger(val)){
  246. return -val;
  247. }else{
  248. return val;
  249. }
  250. },
  251.  
  252. /**
  253. * 格式化状态
  254. */
  255. formatterType(item) {
  256. const type = parseInt(item.incomePayType);
  257. return this.format_type_list[type];
  258. },
  259. filterType(value, item) {
  260. const type = parseInt(item.incomePayType);
  261. return this.format_type_list[value] == this.format_type_list[type];
  262. },
  263. // 编辑操作方法
  264. onEditMoney(row){
  265. this.addFundDialog.dialogRow = row;
  266. this.showAddFundDialog();
  267. },
  268. // 删除数据
  269. onDeleteMoney(row){
  270. this.$confirm('确认删除该记录吗?', '提示', {
  271. type: 'warning'
  272. })
  273. .then(() => {
  274. const para = { id: row.id }
  275. removeMoney(para).then(res => {
  276. this.$message({
  277. message: '删除成功',
  278. type: 'success'
  279. })
  280. this.getMoneyList()
  281. })
  282. })
  283. .catch(() => {})
  284. },
  285. onBatchDelMoney(){
  286. this.$confirm('确认批量删除记录吗?', '提示', {
  287. type: 'warning'
  288. })
  289. .then(() => {
  290. const ids = this.rowIds.map(item => item.id).toString()
  291. const para = { ids: ids }
  292. batchremoveMoney(para).then(res => {
  293. this.$message({
  294. message: '批量删除成功',
  295. type: 'success'
  296. })
  297. this.getMoneyList()
  298. })
  299. })
  300. .catch(() => {})
  301. },
  302. // 当用户手动勾选数据行的 Checkbox 时触发的事件
  303. selectTable(val, row){
  304. this.setSearchBtn(val);
  305. },
  306. // 用户全选checkbox时触发该事件
  307. selectAll(val){
  308. val.forEach((item) => {
  309. this.rowIds.push(item.id);
  310. });
  311. this.setSearchBtn(val);
  312. },
  313. setSearchBtn(val){
  314. let isFlag = true;
  315. if(val.length > 0){
  316. isFlag = false;
  317. }else{
  318. isFlag = true;
  319. }
  320. this.$store.commit('SET_SEARCHBTN_DISABLED',isFlag);
  321. }
  322. },
  323. }
  324. </script>
  325.  
  326. <style lang="less" scoped>
  327. .table_container{
  328. padding: 10px;
  329. background: #fff;
  330. border-radius: 2px;
  331. }
  332. .el-dialog--small{
  333. width: 600px !important;
  334. }
  335. .pagination{
  336. text-align: left;
  337. margin-top: 10px;
  338. }
  339.  
  340. </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. 英语单词组件- 单词在句子中,上面显示中文下面显示音标 css样式

    原先效果: 改进demo效果 优化点 音标长度超出,或者中文超出,总宽度会按照最长的走 居中显示 再次优化 line-height: 22px; 加入这个 对齐中间行(字号大小会让绝对上下高度,对不齐 ...

  2. 在运行程序是出现sh: 行 1: cls: 未找到命令

    在运行程序是出现sh: 行 1: cls: 未找到命令 原因是system("cls");--这是在程序中调用系统命令,但是linux识别不了.功能是清除当前的终端显示数据.找到l ...

  3. Android TextView自动缩放能够完整显示出一行

    原文地址: Android TextView自动缩放能够完整显示出一行 - Stars-One的杂货小窝 app开发中,需要TextView可以在不同的屏幕大小要完整显示出文字,而不是显示省略号 可以 ...

  4. cpprest示例微服务链路嵌套调用层数1000以及跟踪

    本demo使用本人两个github项目cpprestsdk4mingw,zhepler-wxWdigets编写,一个简单的rest服务器cpprestbox,只提供GET方法方便测试,可以添加修改ap ...

  5. 云VR:虚拟现实专业化的下一步

    传统的VR通常需要功能强大的计算机和其他高性能设备来提供良好的用户体验.但是,如果有一种方法可以从任何设备和任何地方处理VR内容呢?这就是云VR对VR用户的承诺.随着5G和其他网络的到来,VR技术的未 ...

  6. [.NET项目实战] Elsa开源工作流组件应用(二):内核解读

    @ 目录 定义 变量 内存寄存器类 寄存器中的存储区块类 变量到存储的映射类 上下文对象 活动上下文(ActivityExecutionContext) 工作流执行上下文(WorkflowExecut ...

  7. 【福利】JetBrains 全家桶永久免费使用

    Jetbrains系列的IDE公认是最好的集成开发工具,但是收费且挺贵.我们以PhpStorm为例,新用户第一年需要199$,注意是$,还不是人民币,这个价格一上来肯定筛选掉一大批用户.确实好用,所以 ...

  8. KingbaseES V8R3 备份恢复系列之 -- sys_rman备份过程分析

    ​ 案例说明: 本案例通过对KingbaseES sys_rman物理备份过程的详细描述,有助于在执行sys_rman过程中发生故障的分析. 适用版本: KingbaseES V8R3 一.sys_r ...

  9. 机器语言编写helloworld

    kvmtool下载编译 git clone https://github.com/kvmtool/kvmtool.git 下载后进入到目录执行make即可. 补码 计算机怎么表示负数?以四位有符号数为 ...

  10. 微服务集成Spring Cloud Alibaba Seata(一)Seata服务搭建

    1.Seata介绍 Seata是阿里开源的一款分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务.数据库事务我们都知道,事务都是遵循ACID原则.而通过使用Seata可以实现在两个服务模块 ...