Browse Source

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

master
李磊 3 years ago
parent
commit
bd12415a01
  1. 13
      src/api/data.js
  2. 34
      src/components/Crud/crud.js
  3. 4
      src/views/document/index.vue

13
src/api/data.js

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

34
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: '',
// 表格数据
@ -118,23 +120,7 @@ function CRUD(options) {
}
return new Promise((resolve) => {
// 请求数据
if (crud.rootApi) {
initData1(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)
})
} else {
initData(crud.url, crud.getQueryParams()).then(data => {
initData(crud.api, crud.url, crud.getQueryParams()).then(data => {
crud.page.total = data.total
if (data.list) {
crud.data = data.list
@ -142,13 +128,9 @@ function CRUD(options) {
crud.data = data
}
crud.resetDataStatus()
// time 毫秒后显示表格
setTimeout(() => {
callVmHook(crud, CRUD.HOOK.afterRefresh)
}, crud.time)
resolve(data)
})
}
})
},
/**
@ -269,13 +251,10 @@ 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
@ -401,7 +380,6 @@ function CRUD(options) {
*/
resetDataStatus() {
const dataStatus = {}
function resetStatus(datas) {
datas.forEach(e => {
dataStatus[e.id] = {

4
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'
// crudpresenter
const defaultCrud = presenter(
CRUD({
title: '检验机构体系文件管理',
url: '/inspectionSystemFile/list',
orderBy: ['id desc'],
rootApi: 1,
api: preview,
crudMethod: { ...CrudDocumentArchives }
})
)

Loading…
Cancel
Save