优化Crud组件，如有特殊接口使用注入模式进行使用

src/api/data.js

@@ -1,15 +1,10 @@
 import api from '@/utils/api'
 import qs from 'qs'
-import preview from '@/utils/preview'
+
-export function initData(url, params) {
+export function initData(apiRequest, url, params) {
-  return api({
+  const request = apiRequest || api
+  return request({
     url: url + '?' + qs.stringify(params, { indices: false }),
     method: 'get'
   })
 }
-export function initData1(url, params) {
-  return preview({
-    url: url + '?' + qs.stringify(params, { indices: false }),
-    method: 'get'
-  })
-}

src/components/Crud/crud.js

@@ -1,4 +1,4 @@
-import { initData, initData1 } from '@/api/data'
+import { initData } from '@/api/data'
 import Vue from 'vue'
 
 /**
@@ -10,8 +10,10 @@ function CRUD(options) {
   const defaultOptions = {
     // 标题
     title: '',
-    // 接口根路由
+    /**
-    rootApi: 0,
+     * 请求接口工具
+     */
+    api: undefined,
     // 请求数据的url
     url: '',
     // 表格数据
@@ -92,8 +94,8 @@ function CRUD(options) {
   }
   const methods = {
     /**
-         * 通用的提示
+     * 通用的提示
-         */
+     */
     submitSuccessNotify() {
       crud.notify(crud.msg.submit, CRUD.NOTIFICATION_TYPE.SUCCESS)
     },
@@ -118,42 +120,22 @@ function CRUD(options) {
       }
       return new Promise((resolve) => {
         // 请求数据
-        if (crud.rootApi) {
+        initData(crud.api, crud.url, crud.getQueryParams()).then(data => {
-          initData1(crud.url, crud.getQueryParams()).then(data => {
+          crud.page.total = data.total
-            crud.page.total = data.total
+          if (data.list) {
-            if (data.list) {
+            crud.data = data.list
-              crud.data = data.list
+          } else {
-            } else {
+            crud.data = data
-              crud.data = data
+          }
-            }
+          crud.resetDataStatus()
-            crud.resetDataStatus()
+          callVmHook(crud, CRUD.HOOK.afterRefresh)
-            // time 毫秒后显示表格
+          resolve(data)
-            setTimeout(() => {
+        })
-              callVmHook(crud, CRUD.HOOK.afterRefresh)
-            }, crud.time)
-            resolve(data)
-          })
-        } else {
-          initData(crud.url, crud.getQueryParams()).then(data => {
-            crud.page.total = data.total
-            if (data.list) {
-              crud.data = data.list
-            } else {
-              crud.data = data
-            }
-            crud.resetDataStatus()
-            // time 毫秒后显示表格
-            setTimeout(() => {
-              callVmHook(crud, CRUD.HOOK.afterRefresh)
-            }, crud.time)
-            resolve(data)
-          })
-        }
       })
     },
     /**
-         * 启动添加
+     * 启动添加
-         */
+     */
     toAdd() {
       if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
         return
@@ -163,9 +145,9 @@ function CRUD(options) {
       callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
     },
     /**
-         * 启动编辑
+     * 启动编辑
-         * @param {*} data 数据项
+     * @param {*} data 数据项
-         */
+     */
     toEdit(data) {
       crud.resetForm(JSON.parse(JSON.stringify(data)))
       if (!(callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
@@ -177,16 +159,16 @@ function CRUD(options) {
       callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
     },
     /**
-         * 启动删除
+     * 启动删除
-         * @param {*} data 数据项
+     * @param {*} data 数据项
-         */
+     */
     toDelete(data) {
       crud.getDataStatus(data.id).delete = CRUD.STATUS.PREPARED
     },
     /**
-         * 取消删除
+     * 取消删除
-         * @param {*} data 数据项
+     * @param {*} data 数据项
-         */
+     */
     cancelDelete(data) {
       if (!callVmHook(crud, CRUD.HOOK.beforeDeleteCancel, data)) {
         return
@@ -195,8 +177,8 @@ function CRUD(options) {
       callVmHook(crud, CRUD.HOOK.afterDeleteCancel, data)
     },
     /**
-         * 取消新增/编辑
+     * 取消新增/编辑
-         */
+     */
     cancelCU() {
       const addStatus = crud.status.add
       const editStatus = crud.status.edit
@@ -226,8 +208,8 @@ function CRUD(options) {
       }
     },
     /**
-         * 提交新增/编辑
+     * 提交新增/编辑
-         */
+     */
     submitCU() {
       if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) {
         return
@@ -247,8 +229,8 @@ function CRUD(options) {
       })
     },
     /**
-         * 执行添加
+     * 执行添加
-         */
+     */
     doAdd() {
       if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
         return
@@ -266,16 +248,13 @@ function CRUD(options) {
       })
     },
     /**
-         * 执行编辑
+     * 执行编辑
-         */
+     */
     doEdit() {
-      console.log(581222)
       if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
         return
       }
-      console.log(crud.crudMethod, crud.form)
       crud.status.edit = CRUD.STATUS.PROCESSING
-
       crud.crudMethod.edit(crud.form).then(() => {
         crud.status.edit = CRUD.STATUS.NORMAL
         crud.getDataStatus(crud.form.id).edit = CRUD.STATUS.NORMAL
@@ -289,9 +268,9 @@ function CRUD(options) {
       })
     },
     /**
-         * 执行删除
+     * 执行删除
-         * @param {*} data 数据项
+     * @param {*} data 数据项
-         */
+     */
     doDelete(data) {
       let delAll = false
       let dataStatus
@@ -327,8 +306,8 @@ function CRUD(options) {
       })
     },
     /**
-         * 获取查询参数
+     * 获取查询参数
-         */
+     */
     getQueryParams: function() {
       return {
         pageNum: crud.page.pageNum,
@@ -365,9 +344,9 @@ function CRUD(options) {
       callVmHook(crud, CRUD.HOOK.afterRowClick, row)
     },
     /**
-         * 重置查询参数
+     * 重置查询参数
-         * @param {Boolean} toQuery 重置后进行查询操作
+     * @param {Boolean} toQuery 重置后进行查询操作
-         */
+     */
     resetQuery(toQuery = true) {
       const defaultQuery = JSON.parse(JSON.stringify(crud.defaultQuery))
       const query = crud.query
@@ -380,9 +359,9 @@ function CRUD(options) {
       callVmHook(crud, CRUD.HOOK.afterResetQuery)
     },
     /**
-         * 重置表单
+     * 重置表单
-         * @param {Array} data 数据
+     * @param {Array} data 数据
-         */
+     */
     resetForm(data) {
       const form = data || (typeof crud.defaultForm === 'object' ? JSON.parse(JSON.stringify(crud.defaultForm)) : crud.defaultForm())
       const crudFrom = crud.form
@@ -397,11 +376,10 @@ function CRUD(options) {
       }
     },
     /**
-         * 重置数据状态
+     * 重置数据状态
-         */
+     */
     resetDataStatus() {
       const dataStatus = {}
-
       function resetStatus(datas) {
         datas.forEach(e => {
           dataStatus[e.id] = {
@@ -417,17 +395,17 @@ function CRUD(options) {
       crud.dataStatus = dataStatus
     },
     /**
-         * 获取数据状态
+     * 获取数据状态
-         * @param {Number | String} id 数据项id
+     * @param {Number | String} id 数据项id
-         */
+     */
     getDataStatus(id) {
       return crud.dataStatus[id]
     },
     /**
-         * 切换选中状态
+     * 切换选中状态
-         * @param selection
+     * @param selection
-         * @param data
+     * @param data
-         */
+     */
     toggleRowSelection(selection, data) {
       if (data.children) {
         data.children.forEach(val => {
@@ -463,11 +441,11 @@ function CRUD(options) {
     // 预留4位存储：组件 主页、头部、分页、表单，调试查看也方便找
     vms: Array(4),
     /**
-             * 注册组件实例
+     * 注册组件实例
-             * @param {String} type 类型
+     * @param {String} type 类型
-             * @param {*} vm 组件实例
+     * @param {*} vm 组件实例
-             * @param {Number} index 该参数内部使用
+     * @param {Number} index 该参数内部使用
-             */
+     */
     registerVM(type, vm, index = -1) {
       const vmObj = {
         type,
@@ -481,9 +459,9 @@ function CRUD(options) {
       this.vms.splice(index, 1, vmObj)
     },
     /**
-             * 取消注册组件实例
+     * 取消注册组件实例
-             * @param {*} vm 组件实例
+     * @param {*} vm 组件实例
-             */
+     */
     unregisterVM(vm) {
       this.vms.splice(this.vms.findIndex(e => e && e.vm === vm), 1)
     }
@@ -759,4 +737,4 @@ export {
   form,
   pagination,
   crud
-}
+}

src/views/document/index.vue

@@ -87,13 +87,15 @@ import CrudDocumentArchives from '@/api/document_archives'
 import { uploadFileFn, updateInspectionSystemFile } from '@/api/common'
 import { downloadFileUrl } from '@/utils'
 import download from 'downloadjs'
+import preview from '@/utils/preview'
+
 // crud交由presenter持有
 const defaultCrud = presenter(
   CRUD({
     title: '检验机构体系文件管理',
     url: '/inspectionSystemFile/list',
     orderBy: ['id desc'],
-    rootApi: 1,
+    api: preview,
     crudMethod: { ...CrudDocumentArchives }
   })
 )