CRUD极简增删改查封装

... 2022-3-28 About 2 min

# CRUD极简增删改查封装

# 封装插件

@/mixins/crud.js
export default (app, option = {}) => {
  let mixins = {
    data () {
      return {
        data: [],
        form: {},
        params: {},
        api: require(`@/api/${option.name}`),
        option: require(`@/option/${option.name}`).default(this),
        loading: false,
        page: {},
      }
    },
    computed: {
      bindVal () {
        return {
          ref: 'crud',
          option: this.option,
          data: this.data,
          tableLoading: this.loading
        }
      },
      onEvent () {
        return {
          'on-load': this.getList,
          'row-save':this.rowSave,
          'row-update':this.rowUpdate,
          'row-del':this.rowDel,
          'refresh-change': this.refreshChange,
          'search-reset': this.searchChange,
          'search-change': this.searchChange
        }
      },
      rowKey () {
        return option.rowKey || 'id'
      }
    },
    methods: {
      getList () {
        const callback = () => {
          this.loading = true;
          let pageParams = {}
          pageParams[option.pageNumber || 'pageNumber'] = this.page.currentPage
          pageParams[option.pageSize || 'pageSize'] = this.page.pageSize

          const data = Object.assign(pageParams, this.params)
          this.data = [];
          this.api[option.list || 'list'](data).then(res => {
            this.loading = false;
            let data;
            if (option.res) {
              data = option.res(res.data);
            } else {
              data = res.data.data
            }
            this.page.total = data[option.total || 'total'];
            const result = data[option.data || 'data'];
            this.data = result;
            if (this.listAfter) {
              this.listAfter(data)
            } else {
              this.$message.success('获取成功')
            }
          })
        }
        if (this.listBefore) {
          this.listBefore()
        }
        callback()
      },
      rowSave (row, done, loading) {
        const callback = () => {
          delete this.form.params;
          this.api[option.add || 'add'](this.form).then((data) => {
            this.getList();
            if (this.addAfter) {
              this.addAfter(data)
            } else {
              this.$message.success('新增成功')
            }
            done();
          }).catch(() => {
            loading()
          })
        }
        if (this.addBefore) {
          this.addBefore()
        }
        callback()
      },
      rowUpdate (row, index, done, loading) {
        const callback = () => {
          delete this.form.params;
          this.api[option.update || 'update'](row[this.rowKey], this.form, index).then((data) => {
            this.getList();
            if (this.updateAfter) {
              this.updateAfter(data)
            } else {
              this.$message.success('更新成功')
            }
            done()
          }).catch(() => {
            loading()
          })
        }
        if (this.updateBefore) {
          this.updateBefore()
        }
        callback()
      },
      rowDel (row, index) {
        const callback = () => {
          this.api[option.del || 'del'](row[this.rowKey], row).then((data) => {
            this.getList();
            if (this.delAfter) {
              this.delAfter(data, row, index)
            } else {
              this.$message.success('删除成功')
            }
          })
        }
        if (this.delBefore) {
          this.delBefore()
          callback()
        } else {
          this.$confirm(`此操作将永久删除序号【${index}】的数据, 是否继续?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            callback()
          })
        }
      },
      searchChange (params, done) {
        if (done) done();
        this.params = params;
        this.page.currentPage = 1;
        this.getList();
      },
      refreshChange () {
        this.getList();
      }
    }
  }
  app.mixins = app.mixins || [];
  app.mixins.push(mixins)
  return app;
}

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

# 设置为全局方法

这样子每个模块里面不用全局引入，直接使用即可，这里作用到全局window下面

main.js
import crudCommon from '@/mixins/crud'
window.$crudCommon = crudCommon;

1
2
3
4

# 使用方法

@/option/system/params.js
export default (safe)=>{
  //safe => vue的this对象
  return {
    ...
    column:[]
    ....
  }
}

@/api/system/params.js
export const list ()=>{}
export const add ()=>{}
export const del ()=>{}
export const update ()=>{}

@/page/system/params.vue
<template>
  <basic-container>
    <avue-crud v-bind="bindVal"
               v-on="onEvent"
               v-model="form"
               :page.sync="page">
    </avue-crud>
  </basic-container>
</template>

<script>

export default window.$crudCommon({
  data () {
    return {}
  },
  methods: {
    //列表前操作方法
    listBefore(){},

    //列表后操作方法
    listAfter(){},

    //新增前操作方法
    addBefore () {
      this.form.createUser = 'small'
    },
    //新增后操作方法
    addAfter() {},

    //修改前操作方法
    updateBefore () {
      this.form.updateUser = 'small'
    },

    //修改后操作方法
    updateAfter() {},

    //删除前操作方法
    delBefore () {}

    //删除后操作方法
    delAfter() {},
  }
}, {
  name:'system/params',//模块名字
  list: 'list',//列表接口名字
  update: 'update',//更新接口名字
  add: 'add',//新增接口名字
  del: 'del',//删除接口名字
  rowKey: 'id',//主键
  pageNumber: 'pageNumber',//页码
  pageSize: 'pageSize',//页数
  res:(data)=>{
    return {
      total:0,
      data:[]
    }
  },//列表的结构
  total: 'total',//总页数
  data: 'list'//列表属性
})
</script>
<style lang="scss" scoped>
</style>

CRUD模块封装