mockjs 模擬實現增刪改查

/*mUtils.js*/
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>