Browse Source

:zap: 新增全局crud驱动, 改造param模块

smallchill 5 năm trước cách đây
mục cha
commit
b38420b056
5 tập tin đã thay đổi với 291 bổ sung210 xóa
  1. 9 0
      src/api/system/param.js
  2. 10 7
      src/main.js
  3. 212 0
      src/mixins/crud.js
  4. 48 0
      src/option/system/param.js
  5. 12 203
      src/views/system/param.vue

+ 9 - 0
src/api/system/param.js

@@ -1,5 +1,13 @@
 import request from '@/router/axios';
 
+export const list = (data) => {
+  return request({
+    url: '/api/blade-system/param/list',
+    method: 'get',
+    params: data
+  })
+}
+
 export const getList = (current, size, params) => {
   return request({
     url: '/api/blade-system/param/list',
@@ -11,6 +19,7 @@ export const getList = (current, size, params) => {
     }
   })
 }
+
 export const remove = (ids) => {
   return request({
     url: '/api/blade-system/param/remove',

+ 10 - 7
src/main.js

@@ -14,14 +14,17 @@ import {
   iconfontUrl,
   iconfontVersion
 } from '@/config/env';
-import i18n from './lang' // Internationalization
+import i18n from './lang'; // Internationalization
 import './styles/common.scss';
-import basicBlock from './components/basic-block/main'
-import basicContainer from './components/basic-container/main'
-import thirdRegister from './components/third-register/main'
+import basicBlock from './components/basic-block/main';
+import basicContainer from './components/basic-container/main';
+import thirdRegister from './components/third-register/main';
 import avueUeditor from 'avue-plugin-ueditor';
 import website from '@/config/website';
-
+import crudCommon from '@/mixins/crud';
+// 注册全局crud驱动
+window.$crudCommon = crudCommon;
+// 加载Vue拓展
 Vue.use(router);
 Vue.use(VueAxios, axios);
 Vue.use(Element, {
@@ -32,7 +35,7 @@ Vue.use(window.AVUE, {
   tableSize: 'small',
   i18n: (key, value) => i18n.t(key, value)
 });
-//注册全局容器
+// 注册全局容器
 Vue.component('basicContainer', basicContainer);
 Vue.component('basicBlock', basicBlock);
 Vue.component('thirdRegister', thirdRegister);
@@ -55,4 +58,4 @@ new Vue({
   store,
   i18n,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app');

+ 212 - 0
src/mixins/crud.js

@@ -0,0 +1,212 @@
+import {mapGetters} from "vuex";
+
+export default (app, option = {}) => {
+  const mixins = {
+    data() {
+      return {
+        selectionList: [],
+        data: [],
+        form: {},
+        params: {},
+        loading: false,
+        api: require(`@/api/${option.name}`),
+        option: require(`@/option/${option.name}`).default,
+        page: {
+          pageSizes: [10, 30, 50, 100, 200],
+          pageSize: 10
+        },
+      }
+    },
+    computed: {
+      ...mapGetters(['userInfo', 'permission', 'roles']),
+      ids() {
+        const ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele[this.rowKey]);
+        });
+        return ids.join(",");
+      },
+      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,
+          'selection-change': this.selectionChange,
+          'refresh-change': this.refreshChange,
+          'date-change': this.dateChange,
+          'search-change': this.searchChange,
+          'search-reset': this.searchChange
+        }
+      },
+      rowKey() {
+        return this.option.rowKey || option.rowKey || 'id'
+      }
+    },
+    methods: {
+      getList() {
+        const callback = () => {
+          this.loading = true;
+          const pageParams = {};
+          pageParams[option.size || 'size'] = this.page.pageSize;
+          pageParams[option.current || 'current'] = this.page.currentPage;
+          this.api[option.list || 'list'](Object.assign(pageParams, this.params)).then(res => {
+            let data;
+            if (option.res) {
+              data = option.res(res.data);
+            } else {
+              data = res.data.data;
+            }
+            this.page.total = data[option.total || 'total'] || 0;
+            this.data = data[option.records || 'records'];
+            if (this.listAfter) {
+              this.listAfter(data);
+            }
+            this.loading = false;
+          })
+        }
+        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'](this.form).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 || 'remove'](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('确定将选择数据删除?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            callback();
+          })
+        }
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.api[option.del || 'remove'](this.ids).then((data) => {
+              this.getList();
+              if (this.delMultiAfter) {
+                this.delMultiAfter(data, this.ids);
+              } else {
+                this.$message.success('删除成功');
+              }
+            });
+          });
+      },
+      searchChange(params, done) {
+        if (done) done();
+        if (this.validatenull(params)) {
+          Object.keys(this.params).forEach(ele => {
+            if (!['createTime_dategt', 'createTime_datelt'].includes(ele)) {
+              delete this.params[ele];
+            }
+          })
+        } else {
+          Object.keys(params).forEach(ele => {
+            if (this.validatenull(params[ele])) {
+              delete this.params[ele];
+              delete params[ele];
+            }
+          })
+        }
+        this.params = Object.assign(this.params, params);
+        this.page.currentPage = 1;
+        this.getList();
+      },
+      dateChange(date) {
+        if (date) {
+          this.params.createTime_dategt = date[0];
+          this.params.createTime_datelt = date[1];
+        } else {
+          delete this.params.createTime_dategt;
+          delete this.params.createTime_datelt;
+        }
+        this.page.currentPage = 1;
+        this.getList();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      refreshChange() {
+        this.getList();
+      }
+    }
+  }
+  app.mixins = app.mixins || [];
+  app.mixins.push(mixins);
+  return app;
+}

+ 48 - 0
src/option/system/param.js

@@ -0,0 +1,48 @@
+export default {
+  height: 'auto',
+  calcHeight: 30,
+  tip: false,
+  searchShow: true,
+  searchMenuSpan: 6,
+  border: true,
+  index: true,
+  selection: true,
+  viewBtn: true,
+  dialogClickModal: false,
+  column: [
+    {
+      label: "参数名称",
+      prop: "paramName",
+      search: true,
+      span: 24,
+      rules: [{
+        required: true,
+        message: "请输入参数名称",
+        trigger: "blur"
+      }]
+    },
+    {
+      label: "参数键名",
+      prop: "paramKey",
+      search: true,
+      span: 24,
+      rules: [{
+        required: true,
+        message: "请输入参数键名",
+        trigger: "blur"
+      }]
+    },
+    {
+      label: "参数键值",
+      prop: "paramValue",
+      type: "textarea",
+      span: 24,
+      minRows: 6,
+      rules: [{
+        required: true,
+        message: "请输入参数键值",
+        trigger: "blur"
+      }]
+    }
+  ]
+};

+ 12 - 203
src/views/system/param.vue

@@ -1,22 +1,9 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               ref="crud"
+    <avue-crud v-bind="bindVal"
+               v-on="onEvent"
                v-model="form"
-               :page.sync="page"
-               :permission="permissionList"
-               @row-del="rowDel"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
+               :page.sync="page">
       <template slot="menuLeft">
         <el-button type="danger"
                    size="small"
@@ -31,194 +18,16 @@
 </template>
 
 <script>
-  import {getList, remove, update, add} from "@/api/system/param";
-  import {mapGetters} from "vuex";
 
-  export default {
-    data() {
-      return {
-        form: {},
-        selectionList: [],
-        query: {},
-        loading: true,
-        page: {
-          pageSize: 10,
-          currentPage: 1,
-          total: 0
-        },
-        option: {
-          height: 'auto',
-          calcHeight: 30,
-          tip: false,
-          searchShow: true,
-          searchMenuSpan: 6,
-          border: true,
-          index: true,
-          selection: true,
-          viewBtn: true,
-          dialogClickModal: false,
-          column: [
-            {
-              label: "参数名称",
-              prop: "paramName",
-              search: true,
-              span: 24,
-              rules: [{
-                required: true,
-                message: "请输入参数名称",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "参数键名",
-              prop: "paramKey",
-              search: true,
-              span: 24,
-              rules: [{
-                required: true,
-                message: "请输入参数键名",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "参数键值",
-              prop: "paramValue",
-              type: "textarea",
-              span: 24,
-              minRows: 6,
-              rules: [{
-                required: true,
-                message: "请输入参数键值",
-                trigger: "blur"
-              }]
-            }
-          ]
-        },
-        data: []
-      };
-    },
-    computed: {
-      ...mapGetters(["permission"]),
-      permissionList() {
-        return {
-          addBtn: this.vaildData(this.permission.param_add, false),
-          viewBtn: this.vaildData(this.permission.param_view, false),
-          delBtn: this.vaildData(this.permission.param_delete, false),
-          editBtn: this.vaildData(this.permission.param_edit, false)
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
-        });
-        return ids.join(",");
-      }
-    },
-    methods: {
-      rowSave(row, done, loading) {
-        add(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          window.console.log(error);
-          loading();
-        });
-      },
-      rowUpdate(row, index, done, loading) {
-        update(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          window.console.log(error);
-          loading();
-        });
-      },
-      rowDel(row) {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(row.id);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      searchReset() {
-        this.query = {};
-        this.onLoad(this.page);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.page.currentPage = 1;
-        this.onLoad(this.page, params);
-        done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      handleDelete() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
-          return;
-        }
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(this.ids);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-          });
-      },
-      currentChange(currentPage) {
-        this.page.currentPage = currentPage;
-      },
-      sizeChange(pageSize) {
-        this.page.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoad(this.page, this.query);
-      },
-      onLoad(page, params = {}) {
-        this.loading = true;
-        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-          const data = res.data.data;
-          this.page.total = data.total;
-          this.data = data.records;
-          this.loading = false;
-          this.selectionClear();
-        });
-      }
-    }
-  };
+export default window.$crudCommon({
+  data() {
+    return {}
+  },
+  methods: {}
+}, {
+  //模块路径
+  name: 'system/param',
+})
 </script>
 
 <style>