el-plus-crud 0.0.63 → 0.0.64
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.
|
@@ -1,101 +1,101 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="ElPlusFormStatus-panel">
|
|
3
|
-
<i :style="iconStyle" />
|
|
4
|
-
<div :class="desc.class" :style="desc.style">
|
|
5
|
-
{{ formatValue }}
|
|
6
|
-
</div>
|
|
7
|
-
</div>
|
|
8
|
-
</template>
|
|
9
|
-
<script lang="ts">
|
|
10
|
-
export default {
|
|
11
|
-
name: 'ElPlusFormStatus',
|
|
12
|
-
inheritAttrs: false,
|
|
13
|
-
typeName: 'status',
|
|
14
|
-
customOptions: {}
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
<script lang="ts" setup>
|
|
18
|
-
import { isEqual } from 'lodash'
|
|
19
|
-
import { ref, reactive, watch, computed, inject } from 'vue'
|
|
20
|
-
|
|
21
|
-
const globalData = inject('globalData') as any
|
|
22
|
-
const format = inject('format') as any
|
|
23
|
-
|
|
24
|
-
const props = defineProps<{
|
|
25
|
-
modelValue?: string | number | '' | null
|
|
26
|
-
field: string
|
|
27
|
-
desc: { [key: string]: any }
|
|
28
|
-
formData: { [key: string]: any }
|
|
29
|
-
}>()
|
|
30
|
-
|
|
31
|
-
const emits = defineEmits(['update:modelValue'])
|
|
32
|
-
const currentValue = ref(props.modelValue)
|
|
33
|
-
emits('update:modelValue', currentValue)
|
|
34
|
-
|
|
35
|
-
const options = reactive([] as any[])
|
|
36
|
-
const formatValue = ref('' as any)
|
|
37
|
-
|
|
38
|
-
// icon 样式
|
|
39
|
-
const iconStyle = computed(() => {
|
|
40
|
-
if (props.desc.icolor) {
|
|
41
|
-
if (typeof props.desc.icolor === 'function') {
|
|
42
|
-
return { background: props.desc.icolor(props.formData) || '#909399' }
|
|
43
|
-
}
|
|
44
|
-
return { background: props.desc.icolor || '#909399' }
|
|
45
|
-
}
|
|
46
|
-
const optionsItem = options.find((item: any) => (item.value || item.v) == currentValue.value) || {}
|
|
47
|
-
return { background: optionsItem.c || optionsItem.color || '#909399' }
|
|
48
|
-
})
|
|
49
|
-
|
|
50
|
-
watch(
|
|
51
|
-
() => props.desc.options,
|
|
52
|
-
async (data) => {
|
|
53
|
-
if (typeof data === 'string') {
|
|
54
|
-
// 从全局数据中获取options
|
|
55
|
-
options.splice(0, options.length, ...(globalData[data] || []))
|
|
56
|
-
} else if (typeof data === 'function') {
|
|
57
|
-
options.splice(0, options.length, ...(await data(props.formData)))
|
|
58
|
-
} else if (Array.isArray(data)) {
|
|
59
|
-
if (data && options && !isEqual(data, options)) {
|
|
60
|
-
options.splice(0, options.length, ...data)
|
|
61
|
-
}
|
|
62
|
-
} else {
|
|
63
|
-
options.splice(0, options.length)
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
{ immediate: true }
|
|
67
|
-
)
|
|
68
|
-
|
|
69
|
-
watch(
|
|
70
|
-
() => props.modelValue,
|
|
71
|
-
async () => {
|
|
72
|
-
if (!props.desc.format) {
|
|
73
|
-
formatValue.value = props.modelValue === '' ? props.desc.default ?? '—' : props.modelValue ?? props.desc.default ?? '—'
|
|
74
|
-
} else {
|
|
75
|
-
if (typeof props.desc.format === 'function') {
|
|
76
|
-
// 如果有方法类型的判断，则需要启用动态监测
|
|
77
|
-
formatValue.value = await props.desc.format(props.modelValue, props.formData, props.field)
|
|
78
|
-
} else if (typeof props.desc.format === 'string') {
|
|
79
|
-
formatValue.value = format[props.desc.format] ? format[props.desc.format](props.modelValue, props.formData, props.field) : '--'
|
|
80
|
-
} else {
|
|
81
|
-
formatValue.value = props.modelValue || '—'
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
{ immediate: true }
|
|
86
|
-
)
|
|
87
|
-
</script>
|
|
88
|
-
<style lang="scss" scoped>
|
|
89
|
-
.ElPlusFormStatus-panel {
|
|
90
|
-
display: flex;
|
|
91
|
-
line-height: 25px;
|
|
92
|
-
align-items: center;
|
|
93
|
-
i {
|
|
94
|
-
display: inline-block;
|
|
95
|
-
min-width: 10px;
|
|
96
|
-
min-height: 10px;
|
|
97
|
-
border-radius: 50%;
|
|
98
|
-
margin-right: 5px;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ElPlusFormStatus-panel">
|
|
3
|
+
<i :style="iconStyle" />
|
|
4
|
+
<div :class="desc.class" :style="desc.style">
|
|
5
|
+
{{ formatValue }}
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
</template>
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
export default {
|
|
11
|
+
name: 'ElPlusFormStatus',
|
|
12
|
+
inheritAttrs: false,
|
|
13
|
+
typeName: 'status',
|
|
14
|
+
customOptions: {}
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
<script lang="ts" setup>
|
|
18
|
+
import { isEqual } from 'lodash'
|
|
19
|
+
import { ref, reactive, watch, computed, inject } from 'vue'
|
|
20
|
+
|
|
21
|
+
const globalData = inject('globalData') as any
|
|
22
|
+
const format = inject('format') as any
|
|
23
|
+
|
|
24
|
+
const props = defineProps<{
|
|
25
|
+
modelValue?: string | number | '' | null
|
|
26
|
+
field: string
|
|
27
|
+
desc: { [key: string]: any }
|
|
28
|
+
formData: { [key: string]: any }
|
|
29
|
+
}>()
|
|
30
|
+
|
|
31
|
+
const emits = defineEmits(['update:modelValue'])
|
|
32
|
+
const currentValue = ref(props.modelValue)
|
|
33
|
+
emits('update:modelValue', currentValue)
|
|
34
|
+
|
|
35
|
+
const options = reactive([] as any[])
|
|
36
|
+
const formatValue = ref('' as any)
|
|
37
|
+
|
|
38
|
+
// icon 样式
|
|
39
|
+
const iconStyle = computed(() => {
|
|
40
|
+
if (props.desc.icolor) {
|
|
41
|
+
if (typeof props.desc.icolor === 'function') {
|
|
42
|
+
return { background: props.desc.icolor(props.formData) || '#909399' }
|
|
43
|
+
}
|
|
44
|
+
return { background: props.desc.icolor || '#909399' }
|
|
45
|
+
}
|
|
46
|
+
const optionsItem = options.find((item: any) => (item.value || item.v) == currentValue.value) || {}
|
|
47
|
+
return { background: optionsItem.c || optionsItem.color || '#909399' }
|
|
48
|
+
})
|
|
49
|
+
|
|
50
|
+
watch(
|
|
51
|
+
() => props.desc.options,
|
|
52
|
+
async (data) => {
|
|
53
|
+
if (typeof data === 'string') {
|
|
54
|
+
// 从全局数据中获取options
|
|
55
|
+
options.splice(0, options.length, ...(globalData[data] || []))
|
|
56
|
+
} else if (typeof data === 'function') {
|
|
57
|
+
options.splice(0, options.length, ...(await data(props.formData)))
|
|
58
|
+
} else if (Array.isArray(data)) {
|
|
59
|
+
if (data && options && !isEqual(data, options)) {
|
|
60
|
+
options.splice(0, options.length, ...data)
|
|
61
|
+
}
|
|
62
|
+
} else {
|
|
63
|
+
options.splice(0, options.length)
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
{ immediate: true }
|
|
67
|
+
)
|
|
68
|
+
|
|
69
|
+
watch(
|
|
70
|
+
() => props.modelValue,
|
|
71
|
+
async () => {
|
|
72
|
+
if (!props.desc.format) {
|
|
73
|
+
formatValue.value = props.modelValue === '' ? props.desc.default ?? '—' : props.modelValue ?? props.desc.default ?? '—'
|
|
74
|
+
} else {
|
|
75
|
+
if (typeof props.desc.format === 'function') {
|
|
76
|
+
// 如果有方法类型的判断，则需要启用动态监测
|
|
77
|
+
formatValue.value = await props.desc.format(props.modelValue, props.formData, props.field)
|
|
78
|
+
} else if (typeof props.desc.format === 'string') {
|
|
79
|
+
formatValue.value = format[props.desc.format] ? format[props.desc.format](props.modelValue, props.formData, props.field) : '--'
|
|
80
|
+
} else {
|
|
81
|
+
formatValue.value = props.modelValue || '—'
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{ immediate: true }
|
|
86
|
+
)
|
|
87
|
+
</script>
|
|
88
|
+
<style lang="scss" scoped>
|
|
89
|
+
.ElPlusFormStatus-panel {
|
|
90
|
+
display: flex;
|
|
91
|
+
line-height: 25px;
|
|
92
|
+
align-items: center;
|
|
93
|
+
i {
|
|
94
|
+
display: inline-block;
|
|
95
|
+
min-width: 10px;
|
|
96
|
+
min-height: 10px;
|
|
97
|
+
border-radius: 50%;
|
|
98
|
+
margin-right: 5px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
</style>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<el-time-picker v-if="isInit" class="ElPlusFormTime-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" :disabled="disabled" />
|
|
3
|
+
</template>
|
|
4
|
+
<script lang="ts">
|
|
5
|
+
export default {
|
|
6
|
+
name: 'ElPlusFormTime',
|
|
7
|
+
inheritAttrs: false,
|
|
8
|
+
typeName: 'time',
|
|
9
|
+
customOptions: {}
|
|
10
|
+
}
|
|
11
|
+
</script>
|
|
12
|
+
<script lang="ts" setup>
|
|
13
|
+
import { ref, useAttrs, onBeforeMount } from 'vue'
|
|
14
|
+
import { getAttrs, getEvents } from '../mixins'
|
|
15
|
+
|
|
16
|
+
const props = defineProps<{
|
|
17
|
+
modelValue?: Array<string> | Date | null
|
|
18
|
+
field: string
|
|
19
|
+
desc: { [key: string]: any }
|
|
20
|
+
formData: { [key: string]: any }
|
|
21
|
+
disabled?: boolean
|
|
22
|
+
}>()
|
|
23
|
+
|
|
24
|
+
const emits = defineEmits(['update:modelValue'])
|
|
25
|
+
const currentValue = ref(props.modelValue)
|
|
26
|
+
const attrs = ref({} as any)
|
|
27
|
+
const isInit = ref(false)
|
|
28
|
+
const onEvents = ref(getEvents(props))
|
|
29
|
+
|
|
30
|
+
emits('update:modelValue', currentValue)
|
|
31
|
+
|
|
32
|
+
onBeforeMount(async () => {
|
|
33
|
+
attrs.value = await getAttrs(props, { ...useAttrs() })
|
|
34
|
+
isInit.value = true
|
|
35
|
+
})
|
|
36
|
+
</script>
|
|
37
|
+
<style lang="scss" scoped>
|
|
38
|
+
.ElPlusFormTime-panel {
|
|
39
|
+
display: flex;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
package/lib/components-list.ts
CHANGED
|
@@ -29,6 +29,7 @@ import ElPlusFormSwitch from './components/el-plus-form/components/ElPlusFormSwi
|
|
|
29
29
|
import ElPlusFormTag from './components/el-plus-form/components/ElPlusFormTag.vue'
|
|
30
30
|
import ElPlusFormText from './components/el-plus-form/components/ElPlusFormText.vue'
|
|
31
31
|
import ElPlusFormTextarea from './components/el-plus-form/components/ElPlusFormTextarea.vue'
|
|
32
|
+
import ElPlusFormTime from './components/el-plus-form/components/ElPlusFormTime.vue'
|
|
32
33
|
import ElPlusFormTransfer from './components/el-plus-form/components/ElPlusFormTransfer.vue'
|
|
33
34
|
import ElPlusFormTree from './components/el-plus-form/components/ElPlusFormTree.vue'
|
|
34
35
|
import ElPlusFormTreeSelect from './components/el-plus-form/components/ElPlusFormTreeSelect.vue'
|
|
@@ -67,6 +68,7 @@ export default [
|
|
|
67
68
|
ElPlusFormTag,
|
|
68
69
|
ElPlusFormText,
|
|
69
70
|
ElPlusFormTextarea,
|
|
71
|
+
ElPlusFormTime,
|
|
70
72
|
ElPlusFormTransfer,
|
|
71
73
|
ElPlusFormTree,
|
|
72
74
|
ElPlusFormTreeSelect,
|