el-plus-crud 0.0.112 → 0.0.113
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,7 +18,7 @@ import { ICRUDConfig } from 'types'
|
|
|
18
18
|
const defaultConf = inject('defaultConf') as ICRUDConfig
|
|
19
19
|
|
|
20
20
|
const props = defineProps<{
|
|
21
|
-
modelValue?: number | null
|
|
21
|
+
modelValue?: number | string | null
|
|
22
22
|
field?: string
|
|
23
23
|
loading?: boolean
|
|
24
24
|
desc: { [key: string]: any }
|
|
@@ -28,7 +28,7 @@ const props = defineProps<{
|
|
|
28
28
|
}>()
|
|
29
29
|
|
|
30
30
|
const emits = defineEmits(['update:modelValue', 'validateThis'])
|
|
31
|
-
const currentValue = ref(props.modelValue)
|
|
31
|
+
const currentValue = ref(typeof props.modelValue === 'string' ? +props.modelValue : props.modelValue)
|
|
32
32
|
|
|
33
33
|
emits('update:modelValue', currentValue)
|
|
34
34
|
const attrs = ref({} as any)
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
{{ item[tableConfig.showSelectNameKey || 'name'] }}
|
|
7
7
|
</el-tag>
|
|
8
8
|
</div> -->
|
|
9
|
-
<EleTabletHeader ref="tableHeaderRef" v-if="Object.keys(tableConfig?.toolbar || {}).length || tableConfig.tbName" v-model="toolFormData" :tbName="tableConfig.tbName" :column="tableConfig?.column || []" :size="size" :isShowRefresh="isShowRefresh" :loading="
|
|
9
|
+
<EleTabletHeader ref="tableHeaderRef" v-if="Object.keys(tableConfig?.toolbar || {}).length || tableConfig.tbName" v-model="toolFormData" :tbName="tableConfig.tbName" :column="tableConfig?.column || []" :size="size" :isShowRefresh="isShowRefresh" :loading="compLoading" :toolbar="tableConfig.toolbar" :isDialog="isDialog" @query="handelTopQuery" :queryDataFn="getListQueryData" />
|
|
10
10
|
|
|
11
11
|
<!-- 中部的Tabs -->
|
|
12
12
|
<div class="table-tabs-panel" v-if="tableConfig.tabConf">
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
</template>
|
|
30
30
|
|
|
31
31
|
<!-- 中间列表 -->
|
|
32
|
-
<div class="el-plus-table-main" v-loading="
|
|
32
|
+
<div class="el-plus-table-main" v-loading="compLoading">
|
|
33
33
|
<template v-if="isDIYMain">
|
|
34
34
|
<slot name="main" :tableData="tableData"></slot>
|
|
35
35
|
</template>
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
<ElPlusTableColumn v-for="(item, i) in headerColumns" :key="i" :item="item" :size="size"></ElPlusTableColumn>
|
|
67
67
|
|
|
68
68
|
<!-- 空 -->
|
|
69
|
-
<template v-if="!
|
|
69
|
+
<template v-if="!compLoading && loadingStatus === 2" #empty>
|
|
70
70
|
<el-empty v-if="isEmptyImg" :description="nullText" />
|
|
71
71
|
<span v-else>{{ nullText }}</span>
|
|
72
72
|
</template>
|
|
@@ -99,7 +99,7 @@ import { ref, reactive, onMounted, computed, watch, nextTick, useSlots, inject,
|
|
|
99
99
|
import EleTabletHeader from './components/header.vue'
|
|
100
100
|
import ElPlusTableColumn from './ElPlusTableColumn.vue'
|
|
101
101
|
import { handelListColumn } from './util'
|
|
102
|
-
import { cloneDeep } from 'lodash'
|
|
102
|
+
import { cloneDeep, throttle } from 'lodash'
|
|
103
103
|
import { Loading } from '@element-plus/icons-vue'
|
|
104
104
|
import type { TableColumnCtx } from 'element-plus'
|
|
105
105
|
import { ICRUDConfig, ITableConfig, ITableTabItem, ITreeProps } from 'types'
|
|
@@ -148,6 +148,8 @@ const props = withDefaults(
|
|
|
148
148
|
headerAlign?: 'left' | 'right' | 'center'
|
|
149
149
|
// 是否使用tempId
|
|
150
150
|
isTempId?: boolean
|
|
151
|
+
// 加载状态
|
|
152
|
+
loading?: boolean
|
|
151
153
|
}>(),
|
|
152
154
|
{
|
|
153
155
|
modelValue: null,
|
|
@@ -164,7 +166,8 @@ const props = withDefaults(
|
|
|
164
166
|
selectList: () => [],
|
|
165
167
|
colMinWidth: 'auto',
|
|
166
168
|
headerAlign: 'left',
|
|
167
|
-
isTempId: true
|
|
169
|
+
isTempId: true,
|
|
170
|
+
loading: false
|
|
168
171
|
}
|
|
169
172
|
)
|
|
170
173
|
|
|
@@ -203,11 +206,14 @@ const selectable = computed(() => (row: any, index: number) => {
|
|
|
203
206
|
const tableHeaderRef = ref()
|
|
204
207
|
|
|
205
208
|
// 加载
|
|
206
|
-
const
|
|
209
|
+
const localLoading = ref(false)
|
|
207
210
|
const loadingTab = ref(!!props.tableConfig?.tabConf?.fetch)
|
|
208
211
|
const listLoading = ref(false)
|
|
209
212
|
const size = defaultConf.size || 'default'
|
|
210
213
|
|
|
214
|
+
// 最终的loading
|
|
215
|
+
const compLoading = computed(() => props.loading || localLoading.value)
|
|
216
|
+
|
|
211
217
|
// 顶部查询条件数据缓存
|
|
212
218
|
// const topQueryData = ref({} as any)
|
|
213
219
|
|
|
@@ -633,9 +639,9 @@ async function loadData(isInit: Boolean) {
|
|
|
633
639
|
// }
|
|
634
640
|
return false
|
|
635
641
|
}
|
|
636
|
-
if (loadingStatus.value === 1 ||
|
|
642
|
+
if (loadingStatus.value === 1 || localLoading.value) return false
|
|
637
643
|
loadingStatus.value = 1
|
|
638
|
-
|
|
644
|
+
localLoading.value = true
|
|
639
645
|
if (isInit) {
|
|
640
646
|
pageInfo.current = 1
|
|
641
647
|
}
|
|
@@ -644,49 +650,59 @@ async function loadData(isInit: Boolean) {
|
|
|
644
650
|
if (props.tableConfig?.toolbar?.formConfig?.beforeRequest) {
|
|
645
651
|
postData = props.tableConfig?.toolbar?.formConfig?.beforeRequest(JSON.parse(JSON.stringify(postData))) || postData
|
|
646
652
|
}
|
|
647
|
-
let dataPage = ((await props.tableConfig.fetch(postData)) || {}) as any
|
|
648
|
-
// 这里要进行赋值操作-同时要转换相关key
|
|
649
|
-
if (Array.isArray(dataPage)) {
|
|
650
|
-
dataPage = { [props.tableConfig?.fetchMap?.list || 'records']: dataPage }
|
|
651
|
-
}
|
|
652
653
|
try {
|
|
653
|
-
let
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
dataResult = dataPage[props.tableConfig?.fetchMap?.list || 'records'] || null
|
|
658
|
-
} else {
|
|
659
|
-
dataResult = dataPage[props.tableConfig?.fetchMap?.list || 'records'] || null
|
|
654
|
+
let dataPage = ((await props.tableConfig.fetch(postData)) || {}) as any
|
|
655
|
+
// 这里要进行赋值操作-同时要转换相关key
|
|
656
|
+
if (Array.isArray(dataPage)) {
|
|
657
|
+
dataPage = { [props.tableConfig?.fetchMap?.list || 'records']: dataPage }
|
|
660
658
|
}
|
|
659
|
+
try {
|
|
660
|
+
let dataResult = [] as any
|
|
661
|
+
if (props.isPager) {
|
|
662
|
+
pageInfo.total = dataPage[props.tableConfig?.fetchMap?.total || 'total'] * 1 || 0
|
|
663
|
+
pageInfo.current = dataPage[props.tableConfig?.fetchMap?.current || 'current'] || 1
|
|
664
|
+
dataResult = dataPage[props.tableConfig?.fetchMap?.list || 'records'] || null
|
|
665
|
+
} else {
|
|
666
|
+
dataResult = dataPage[props.tableConfig?.fetchMap?.list || 'records'] || null
|
|
667
|
+
}
|
|
661
668
|
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
669
|
+
if (props.isTempId && Array.isArray(dataResult)) {
|
|
670
|
+
const nowTime = new Date().getTime()
|
|
671
|
+
dataResult.map((item, i) => {
|
|
672
|
+
item.tempId = item[props.rowKey] || `${nowTime + i}`
|
|
673
|
+
})
|
|
674
|
+
}
|
|
668
675
|
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
676
|
+
tableData.value = dataResult
|
|
677
|
+
// 如果是树形结构
|
|
678
|
+
if (props.type === 'expand') {
|
|
679
|
+
treeIndexList.splice(0, treeIndexList.length)
|
|
680
|
+
handelTreeIndex(tableData.value, [])
|
|
681
|
+
}
|
|
682
|
+
listLoading.value = false
|
|
683
|
+
// 通知父类
|
|
684
|
+
noticeInited()
|
|
685
|
+
nextTick(() => {
|
|
686
|
+
// 遍历以及选中当前页面数据
|
|
687
|
+
refreshTableSelect()
|
|
688
|
+
})
|
|
689
|
+
} catch (e) {
|
|
690
|
+
if (defaultConf.debug) {
|
|
691
|
+
// eslint-disable-next-line no-console
|
|
692
|
+
console.log('error: ', e)
|
|
693
|
+
}
|
|
674
694
|
}
|
|
675
|
-
listLoading.value = false
|
|
676
|
-
nextTick(() => {
|
|
677
|
-
// 遍历以及选中当前页面数据
|
|
678
|
-
refreshTableSelect()
|
|
679
|
-
})
|
|
680
695
|
} catch (e) {
|
|
681
|
-
|
|
682
|
-
// eslint-disable-next-line no-console
|
|
683
|
-
console.log('error: ', e)
|
|
684
|
-
}
|
|
696
|
+
console.log('fetch error: ', e)
|
|
685
697
|
}
|
|
686
698
|
loadingStatus.value = 2
|
|
687
|
-
|
|
699
|
+
localLoading.value = false
|
|
688
700
|
}
|
|
689
701
|
|
|
702
|
+
const noticeInited = throttle(() => {
|
|
703
|
+
emits('inited', tableData.value)
|
|
704
|
+
}, 1000)
|
|
705
|
+
|
|
690
706
|
/**
|
|
691
707
|
* 渲染列表的选中项
|
|
692
708
|
*/
|
package/package-lock.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "el-plus-crud",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.113",
|
|
4
4
|
"lockfileVersion": 3,
|
|
5
5
|
"requires": true,
|
|
6
6
|
"packages": {
|
|
7
7
|
"": {
|
|
8
8
|
"name": "el-plus-crud",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.113",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@element-plus/icons-vue": "^2.1.0",
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "el-plus-crud",
|
|
3
3
|
"description": "采用Vue3 + TS,封装的element-plus数据驱动表单、列表组件",
|
|
4
4
|
"author": "K.D.Jack",
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.113",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"private": false,
|
|
8
8
|
"main": "dist/el-plus-crud.mjs",
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@element-plus/icons-vue": "^2.1.0",
|
|
37
|
+
"dayjs": "^1.11.10",
|
|
37
38
|
"element-plus": "^2.3.6",
|
|
38
39
|
"lodash": "^4.17.21",
|
|
39
40
|
"vue": "^3.2.47"
|