mockjs 模拟实现增删改查

2024-03-14 20:50:56

/*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>

1 2 3 4 5 6 7 8 /*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, '":"') + '"}') }

1	`/money.js/`

1	`/index.js/`

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 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)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 /*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 }) }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 /*在组件里使用*/<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>

码农公寓

相关文章