el-plus-crud 0.0.38 → 0.0.39
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.
- package/.eslintrc.js +78 -78
- package/.prettierrc.js +39 -39
- package/CHANGELOG.md +7 -5
- package/build.js +31 -31
- package/dist/el-plus-crud.mjs +2750 -2722
- package/dist/el-plus-crud.umd.js +14 -14
- package/dist/style.css +1 -1
- package/example/App.vue +67 -67
- package/example/main.js +18 -18
- package/index.html +13 -13
- package/lib/components/el-plus-form/ElPlusForm.vue +774 -772
- package/lib/components/el-plus-form/ElPlusFormDialog.vue +90 -90
- package/lib/components/el-plus-form/ElPlusFormGroup.vue +116 -116
- package/lib/components/el-plus-form/components/ElPlusFormArea.vue +61 -61
- package/lib/components/el-plus-form/components/ElPlusFormAutocomplete.vue +49 -49
- package/lib/components/el-plus-form/components/ElPlusFormBtn.vue +102 -102
- package/lib/components/el-plus-form/components/ElPlusFormBtns.vue +133 -133
- package/lib/components/el-plus-form/components/ElPlusFormCascader.vue +63 -63
- package/lib/components/el-plus-form/components/ElPlusFormCascaderPanel.vue +53 -51
- package/lib/components/el-plus-form/components/ElPlusFormCheckbox.vue +44 -42
- package/lib/components/el-plus-form/components/ElPlusFormCheckboxButton.vue +44 -42
- package/lib/components/el-plus-form/components/ElPlusFormColor.vue +38 -38
- package/lib/components/el-plus-form/components/ElPlusFormDate.vue +39 -39
- package/lib/components/el-plus-form/components/ElPlusFormDaterange.vue +46 -44
- package/lib/components/el-plus-form/components/ElPlusFormDatetime.vue +40 -38
- package/lib/components/el-plus-form/components/ElPlusFormDatetimerange.vue +3 -1
- package/lib/components/el-plus-form/components/ElPlusFormFile.vue +47 -47
- package/lib/components/el-plus-form/components/ElPlusFormImage.vue +113 -113
- package/lib/components/el-plus-form/components/ElPlusFormInput.vue +3 -1
- package/lib/components/el-plus-form/components/ElPlusFormLink.vue +281 -281
- package/lib/components/el-plus-form/components/ElPlusFormLkuser.vue +489 -489
- package/lib/components/el-plus-form/components/ElPlusFormNbinput.vue +53 -51
- package/lib/components/el-plus-form/components/ElPlusFormNumber.vue +146 -144
- package/lib/components/el-plus-form/components/ElPlusFormPassword.vue +3 -1
- package/lib/components/el-plus-form/components/ElPlusFormQuickInput.vue +94 -92
- package/lib/components/el-plus-form/components/ElPlusFormRadio.vue +42 -42
- package/lib/components/el-plus-form/components/ElPlusFormRate.vue +38 -38
- package/lib/components/el-plus-form/components/ElPlusFormSelect.vue +161 -161
- package/lib/components/el-plus-form/components/ElPlusFormSlider.vue +38 -38
- package/lib/components/el-plus-form/components/ElPlusFormSwitch.vue +38 -38
- package/lib/components/el-plus-form/components/ElPlusFormTag.vue +78 -78
- package/lib/components/el-plus-form/components/ElPlusFormText.vue +99 -99
- package/lib/components/el-plus-form/components/ElPlusFormTextarea.vue +49 -47
- package/lib/components/el-plus-form/components/ElPlusFormTransfer.vue +44 -44
- package/lib/components/el-plus-form/components/ElPlusFormTree.vue +76 -76
- package/lib/components/el-plus-form/components/ElPlusFormTreeSelect.vue +59 -59
- package/lib/components/el-plus-form/components/ElPlusFormUpload.vue +368 -368
- package/lib/components/el-plus-form/components/components/file-icons/FileIcons.vue +135 -135
- package/lib/components/el-plus-form/components/components/file-icons/data/index.ts +27 -27
- package/lib/components/el-plus-form/components/components/file-icons/images/doc.svg +12 -12
- package/lib/components/el-plus-form/components/components/file-icons/images/file.svg +18 -18
- package/lib/components/el-plus-form/components/components/file-icons/images/jpg.svg +13 -13
- package/lib/components/el-plus-form/components/components/file-icons/images/pdf.svg +12 -12
- package/lib/components/el-plus-form/components/components/file-icons/images/png.svg +12 -12
- package/lib/components/el-plus-form/components/components/file-icons/images/ppt.svg +12 -12
- package/lib/components/el-plus-form/components/components/file-icons/images/xls.svg +12 -12
- package/lib/components/el-plus-form/components/index.ts +17 -17
- package/lib/components/el-plus-form/data/file.ts +74 -74
- package/lib/components/el-plus-form/mixins/index.ts +113 -113
- package/lib/components/el-plus-form/util/index.ts +257 -257
- package/lib/components/el-plus-form/util/validate.ts +332 -332
- package/lib/components/el-plus-table/components/columnItem.vue +205 -205
- package/lib/components/el-plus-table/components/header.vue +240 -240
- package/lib/components/el-plus-table/components/statisticInfo.vue +47 -47
- package/lib/components/el-plus-table/util/index.ts +147 -147
- package/lib/config/index.ts +30 -30
- package/lib/index.d.ts +4 -4
- package/lib/index.ts +51 -51
- package/package.json +1 -1
- package/types/axios.d.ts +13 -13
- package/types/formList.d.ts +440 -440
- package/types/layout.d.ts +57 -57
- package/types/mitt.d.ts +38 -38
- package/types/pinia.d.ts +149 -149
- package/types/views.d.ts +329 -329
- package/vite.config.ts +78 -78
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-radio-group class="ElPlusFormRadio-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue">
|
|
3
|
-
<el-radio v-for="option of attrs.options" :key="option.value" :label="option.value">
|
|
4
|
-
{{ option.l || option.label }}
|
|
5
|
-
</el-radio>
|
|
6
|
-
</el-radio-group>
|
|
7
|
-
</template>
|
|
8
|
-
<script lang="ts">
|
|
9
|
-
export default {
|
|
10
|
-
name: 'ElPlusFormRadio',
|
|
11
|
-
inheritAttrs: false,
|
|
12
|
-
typeName: 'radio',
|
|
13
|
-
customOptions: {}
|
|
14
|
-
}
|
|
15
|
-
</script>
|
|
16
|
-
<script lang="ts" setup>
|
|
17
|
-
import { ref, useAttrs, onBeforeMount } from 'vue'
|
|
18
|
-
import { getAttrs, getEvents } from '../mixins'
|
|
19
|
-
|
|
20
|
-
const props = defineProps<{
|
|
21
|
-
modelValue?: string | number | '' | null
|
|
22
|
-
field: string
|
|
23
|
-
desc: { [key: string]: any }
|
|
24
|
-
formData: { [key: string]: any }
|
|
25
|
-
}>()
|
|
26
|
-
|
|
27
|
-
const emits = defineEmits(['update:modelValue'])
|
|
28
|
-
const currentValue = ref(props.modelValue)
|
|
29
|
-
emits('update:modelValue', currentValue)
|
|
30
|
-
|
|
31
|
-
const attrs = ref({} as any)
|
|
32
|
-
const onEvents = ref(getEvents(props))
|
|
33
|
-
|
|
34
|
-
onBeforeMount(async () => {
|
|
35
|
-
attrs.value = await getAttrs(props, { ...useAttrs() })
|
|
36
|
-
})
|
|
37
|
-
</script>
|
|
38
|
-
<style lang="scss" scoped>
|
|
39
|
-
.ElPlusFormRadio-panel {
|
|
40
|
-
display: flex;
|
|
41
|
-
}
|
|
42
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<el-radio-group class="ElPlusFormRadio-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue">
|
|
3
|
+
<el-radio v-for="option of attrs.options" :key="option.value" :label="option.value">
|
|
4
|
+
{{ option.l || option.label }}
|
|
5
|
+
</el-radio>
|
|
6
|
+
</el-radio-group>
|
|
7
|
+
</template>
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
export default {
|
|
10
|
+
name: 'ElPlusFormRadio',
|
|
11
|
+
inheritAttrs: false,
|
|
12
|
+
typeName: 'radio',
|
|
13
|
+
customOptions: {}
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
<script lang="ts" setup>
|
|
17
|
+
import { ref, useAttrs, onBeforeMount } from 'vue'
|
|
18
|
+
import { getAttrs, getEvents } from '../mixins'
|
|
19
|
+
|
|
20
|
+
const props = defineProps<{
|
|
21
|
+
modelValue?: string | number | '' | null
|
|
22
|
+
field: string
|
|
23
|
+
desc: { [key: string]: any }
|
|
24
|
+
formData: { [key: string]: any }
|
|
25
|
+
}>()
|
|
26
|
+
|
|
27
|
+
const emits = defineEmits(['update:modelValue'])
|
|
28
|
+
const currentValue = ref(props.modelValue)
|
|
29
|
+
emits('update:modelValue', currentValue)
|
|
30
|
+
|
|
31
|
+
const attrs = ref({} as any)
|
|
32
|
+
const onEvents = ref(getEvents(props))
|
|
33
|
+
|
|
34
|
+
onBeforeMount(async () => {
|
|
35
|
+
attrs.value = await getAttrs(props, { ...useAttrs() })
|
|
36
|
+
})
|
|
37
|
+
</script>
|
|
38
|
+
<style lang="scss" scoped>
|
|
39
|
+
.ElPlusFormRadio-panel {
|
|
40
|
+
display: flex;
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-rate class="ElPlusFormRate-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
|
|
3
|
-
</template>
|
|
4
|
-
<script lang="ts">
|
|
5
|
-
export default {
|
|
6
|
-
name: 'ElPlusFormRate',
|
|
7
|
-
inheritAttrs: false,
|
|
8
|
-
typeName: 'rate',
|
|
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?: string | number | '' | null
|
|
18
|
-
field: string
|
|
19
|
-
desc: { [key: string]: any }
|
|
20
|
-
formData: { [key: string]: any }
|
|
21
|
-
}>()
|
|
22
|
-
|
|
23
|
-
const emits = defineEmits(['update:modelValue'])
|
|
24
|
-
const currentValue = ref(props.modelValue)
|
|
25
|
-
emits('update:modelValue', currentValue)
|
|
26
|
-
|
|
27
|
-
const attrs = ref({} as any)
|
|
28
|
-
const onEvents = ref(getEvents(props))
|
|
29
|
-
|
|
30
|
-
onBeforeMount(async () => {
|
|
31
|
-
attrs.value = await getAttrs(props, { ...useAttrs() })
|
|
32
|
-
})
|
|
33
|
-
</script>
|
|
34
|
-
<style lang="scss" scoped>
|
|
35
|
-
.ElPlusFormRate-panel {
|
|
36
|
-
display: flex;
|
|
37
|
-
}
|
|
38
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<el-rate class="ElPlusFormRate-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
|
|
3
|
+
</template>
|
|
4
|
+
<script lang="ts">
|
|
5
|
+
export default {
|
|
6
|
+
name: 'ElPlusFormRate',
|
|
7
|
+
inheritAttrs: false,
|
|
8
|
+
typeName: 'rate',
|
|
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?: string | number | '' | null
|
|
18
|
+
field: string
|
|
19
|
+
desc: { [key: string]: any }
|
|
20
|
+
formData: { [key: string]: any }
|
|
21
|
+
}>()
|
|
22
|
+
|
|
23
|
+
const emits = defineEmits(['update:modelValue'])
|
|
24
|
+
const currentValue = ref(props.modelValue)
|
|
25
|
+
emits('update:modelValue', currentValue)
|
|
26
|
+
|
|
27
|
+
const attrs = ref({} as any)
|
|
28
|
+
const onEvents = ref(getEvents(props))
|
|
29
|
+
|
|
30
|
+
onBeforeMount(async () => {
|
|
31
|
+
attrs.value = await getAttrs(props, { ...useAttrs() })
|
|
32
|
+
})
|
|
33
|
+
</script>
|
|
34
|
+
<style lang="scss" scoped>
|
|
35
|
+
.ElPlusFormRate-panel {
|
|
36
|
+
display: flex;
|
|
37
|
+
}
|
|
38
|
+
</style>
|
|
@@ -1,161 +1,161 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-select v-if="isInit" class="el-plus-form-select" :class="desc.class" :style="desc.style" v-bind="attrs" v-model="currentValue" :loading="loading" v-on="onEvents">
|
|
3
|
-
<el-option v-for="option in options" :key="option.value || option.v" v-bind="option">
|
|
4
|
-
<div class="el-plus-form-select-options">
|
|
5
|
-
<span>{{ option.label || option.l }}</span>
|
|
6
|
-
<div v-if="desc.optionTip">{{ tip(option) }}</div>
|
|
7
|
-
</div>
|
|
8
|
-
</el-option>
|
|
9
|
-
</el-select>
|
|
10
|
-
</template>
|
|
11
|
-
<script lang="ts">
|
|
12
|
-
export default {
|
|
13
|
-
name: 'ElPlusFormSelect',
|
|
14
|
-
inheritAttrs: false,
|
|
15
|
-
typeName: 'select',
|
|
16
|
-
customOptions: {}
|
|
17
|
-
}
|
|
18
|
-
</script>
|
|
19
|
-
<script lang="ts" setup>
|
|
20
|
-
import { ref, reactive, computed, onBeforeMount, useAttrs, watch, inject } from 'vue'
|
|
21
|
-
import { ElMessage } from 'element-plus'
|
|
22
|
-
import { getAttrs } from '../mixins'
|
|
23
|
-
import { isEqual } from 'lodash'
|
|
24
|
-
|
|
25
|
-
const defaultConf = inject('defaultConf') as ICRUDConfig
|
|
26
|
-
const globalData = inject('globalData') as any
|
|
27
|
-
|
|
28
|
-
const props = defineProps<{
|
|
29
|
-
modelValue?: number | string | Array<string>
|
|
30
|
-
field: string
|
|
31
|
-
loading?: boolean
|
|
32
|
-
desc: { [key: string]: any }
|
|
33
|
-
formData: { [key: string]: any }
|
|
34
|
-
rowIndex?: number
|
|
35
|
-
}>()
|
|
36
|
-
const emits = defineEmits(['update:modelValue'])
|
|
37
|
-
|
|
38
|
-
const currentValue = ref(props.modelValue || (props.desc.multiple ? [] : ''))
|
|
39
|
-
emits('update:modelValue', currentValue)
|
|
40
|
-
|
|
41
|
-
const attrs = ref({} as any)
|
|
42
|
-
const options = reactive([] as any[])
|
|
43
|
-
const oldQuery = ref(null) as any
|
|
44
|
-
const tempAttr = { clearable: true, ...useAttrs() } as any
|
|
45
|
-
const isInit = ref(false)
|
|
46
|
-
|
|
47
|
-
if (props.desc.allowCreate) {
|
|
48
|
-
tempAttr.filterable = true
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// 如果是远程加载
|
|
52
|
-
if (props.desc.remote) {
|
|
53
|
-
tempAttr.remote = true
|
|
54
|
-
tempAttr.filterable = true
|
|
55
|
-
tempAttr.remoteShowSuffix = true
|
|
56
|
-
tempAttr.loadingText = '远程查询中...'
|
|
57
|
-
tempAttr.remoteMethod = async (query: string) => {
|
|
58
|
-
if (query !== undefined && query !== null) {
|
|
59
|
-
if (oldQuery.value !== query) {
|
|
60
|
-
oldQuery.value = query
|
|
61
|
-
options.splice(0, options.length, ...(await props.desc.remote(query)))
|
|
62
|
-
if (query === '') {
|
|
63
|
-
// 判断是否有默认选项
|
|
64
|
-
if (props.desc.defaultItem) {
|
|
65
|
-
// 这里需要判断下默认值是否已经出现在了options中,如果存在,则需要删除
|
|
66
|
-
const index = options.findIndex((item) => item.value === props.desc.defaultItem.value)
|
|
67
|
-
if (index >= 0) {
|
|
68
|
-
options.splice(index, 1)
|
|
69
|
-
}
|
|
70
|
-
options.unshift(props.desc.defaultItem)
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* 这里单独处理下事件
|
|
80
|
-
*/
|
|
81
|
-
const onEvents = computed(() => {
|
|
82
|
-
const tempOn = {} as any
|
|
83
|
-
if (props.desc?.on) {
|
|
84
|
-
Object.keys(props.desc.on).map((key: string) => {
|
|
85
|
-
tempOn[key] = () => {
|
|
86
|
-
props.desc.on[key](
|
|
87
|
-
props.formData,
|
|
88
|
-
options.find((item) => item.value === currentValue.value),
|
|
89
|
-
props.rowIndex
|
|
90
|
-
)
|
|
91
|
-
}
|
|
92
|
-
})
|
|
93
|
-
}
|
|
94
|
-
return tempOn
|
|
95
|
-
})
|
|
96
|
-
|
|
97
|
-
// 如果options为空,则默认执行一次查询
|
|
98
|
-
if (options.length <= 0 && props.desc.remote && (props.desc.initLoad ?? true)) {
|
|
99
|
-
tempAttr.remoteMethod('')
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// 这里处理下tip
|
|
103
|
-
const tip = computed(() => (optionItem: any) => {
|
|
104
|
-
return props.desc.optionTip(optionItem)
|
|
105
|
-
})
|
|
106
|
-
|
|
107
|
-
onBeforeMount(async () => {
|
|
108
|
-
attrs.value = await getAttrs(props, tempAttr)
|
|
109
|
-
isInit.value = true
|
|
110
|
-
})
|
|
111
|
-
|
|
112
|
-
watch(
|
|
113
|
-
() => props.desc.options,
|
|
114
|
-
async (data) => {
|
|
115
|
-
if (typeof data === 'string') {
|
|
116
|
-
// 从全局数据中获取options
|
|
117
|
-
options.splice(0, options.length, ...(globalData[data] || []))
|
|
118
|
-
} else if (typeof data === 'function') {
|
|
119
|
-
options.splice(0, options.length, ...(await data(props.formData)))
|
|
120
|
-
} else if (Array.isArray(data)) {
|
|
121
|
-
if (data && options && !isEqual(data, options)) {
|
|
122
|
-
options.splice(0, options.length, ...data)
|
|
123
|
-
}
|
|
124
|
-
} else {
|
|
125
|
-
options.splice(0, options.length)
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
{ immediate: true }
|
|
129
|
-
)
|
|
130
|
-
|
|
131
|
-
watch(
|
|
132
|
-
() => currentValue.value,
|
|
133
|
-
(val: any) => {
|
|
134
|
-
if (attrs.value.allowCreate) {
|
|
135
|
-
if (val && Array.isArray(val) && (val as Array<any>).some((item) => typeof item === 'string' && item.length > (defaultConf.form?.leng.input || 20))) {
|
|
136
|
-
ElMessage.warning('最大长度为: ' + (defaultConf.form?.leng.input || 20))
|
|
137
|
-
currentValue.value = (val as Array<string>).filter((item) => typeof item !== 'string' || item.length <= (defaultConf.form?.leng.input || 20))
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
)
|
|
142
|
-
</script>
|
|
143
|
-
<style lang="scss">
|
|
144
|
-
.el-plus-form-select-options {
|
|
145
|
-
width: 100%;
|
|
146
|
-
display: flex;
|
|
147
|
-
justify-content: space-between;
|
|
148
|
-
align-items: center;
|
|
149
|
-
& > div {
|
|
150
|
-
// text-align: right;
|
|
151
|
-
color: #aaaaaa;
|
|
152
|
-
max-width: 40%;
|
|
153
|
-
font-size: 12px;
|
|
154
|
-
word-break: break-all;
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
.el-select-dropdown__item {
|
|
158
|
-
height: auto;
|
|
159
|
-
white-space: break-spaces;
|
|
160
|
-
}
|
|
161
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<el-select v-if="isInit" class="el-plus-form-select" :class="desc.class" :style="desc.style" v-bind="attrs" v-model="currentValue" :loading="loading" v-on="onEvents">
|
|
3
|
+
<el-option v-for="option in options" :key="option.value || option.v" v-bind="option">
|
|
4
|
+
<div class="el-plus-form-select-options">
|
|
5
|
+
<span>{{ option.label || option.l }}</span>
|
|
6
|
+
<div v-if="desc.optionTip">{{ tip(option) }}</div>
|
|
7
|
+
</div>
|
|
8
|
+
</el-option>
|
|
9
|
+
</el-select>
|
|
10
|
+
</template>
|
|
11
|
+
<script lang="ts">
|
|
12
|
+
export default {
|
|
13
|
+
name: 'ElPlusFormSelect',
|
|
14
|
+
inheritAttrs: false,
|
|
15
|
+
typeName: 'select',
|
|
16
|
+
customOptions: {}
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
<script lang="ts" setup>
|
|
20
|
+
import { ref, reactive, computed, onBeforeMount, useAttrs, watch, inject } from 'vue'
|
|
21
|
+
import { ElMessage } from 'element-plus'
|
|
22
|
+
import { getAttrs } from '../mixins'
|
|
23
|
+
import { isEqual } from 'lodash'
|
|
24
|
+
|
|
25
|
+
const defaultConf = inject('defaultConf') as ICRUDConfig
|
|
26
|
+
const globalData = inject('globalData') as any
|
|
27
|
+
|
|
28
|
+
const props = defineProps<{
|
|
29
|
+
modelValue?: number | string | Array<string>
|
|
30
|
+
field: string
|
|
31
|
+
loading?: boolean
|
|
32
|
+
desc: { [key: string]: any }
|
|
33
|
+
formData: { [key: string]: any }
|
|
34
|
+
rowIndex?: number
|
|
35
|
+
}>()
|
|
36
|
+
const emits = defineEmits(['update:modelValue'])
|
|
37
|
+
|
|
38
|
+
const currentValue = ref(props.modelValue || (props.desc.multiple ? [] : ''))
|
|
39
|
+
emits('update:modelValue', currentValue)
|
|
40
|
+
|
|
41
|
+
const attrs = ref({} as any)
|
|
42
|
+
const options = reactive([] as any[])
|
|
43
|
+
const oldQuery = ref(null) as any
|
|
44
|
+
const tempAttr = { clearable: true, ...useAttrs() } as any
|
|
45
|
+
const isInit = ref(false)
|
|
46
|
+
|
|
47
|
+
if (props.desc.allowCreate) {
|
|
48
|
+
tempAttr.filterable = true
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// 如果是远程加载
|
|
52
|
+
if (props.desc.remote) {
|
|
53
|
+
tempAttr.remote = true
|
|
54
|
+
tempAttr.filterable = true
|
|
55
|
+
tempAttr.remoteShowSuffix = true
|
|
56
|
+
tempAttr.loadingText = '远程查询中...'
|
|
57
|
+
tempAttr.remoteMethod = async (query: string) => {
|
|
58
|
+
if (query !== undefined && query !== null) {
|
|
59
|
+
if (oldQuery.value !== query) {
|
|
60
|
+
oldQuery.value = query
|
|
61
|
+
options.splice(0, options.length, ...(await props.desc.remote(query)))
|
|
62
|
+
if (query === '') {
|
|
63
|
+
// 判断是否有默认选项
|
|
64
|
+
if (props.desc.defaultItem) {
|
|
65
|
+
// 这里需要判断下默认值是否已经出现在了options中,如果存在,则需要删除
|
|
66
|
+
const index = options.findIndex((item) => item.value === props.desc.defaultItem.value)
|
|
67
|
+
if (index >= 0) {
|
|
68
|
+
options.splice(index, 1)
|
|
69
|
+
}
|
|
70
|
+
options.unshift(props.desc.defaultItem)
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* 这里单独处理下事件
|
|
80
|
+
*/
|
|
81
|
+
const onEvents = computed(() => {
|
|
82
|
+
const tempOn = {} as any
|
|
83
|
+
if (props.desc?.on) {
|
|
84
|
+
Object.keys(props.desc.on).map((key: string) => {
|
|
85
|
+
tempOn[key] = () => {
|
|
86
|
+
props.desc.on[key](
|
|
87
|
+
props.formData,
|
|
88
|
+
options.find((item) => item.value === currentValue.value),
|
|
89
|
+
props.rowIndex
|
|
90
|
+
)
|
|
91
|
+
}
|
|
92
|
+
})
|
|
93
|
+
}
|
|
94
|
+
return tempOn
|
|
95
|
+
})
|
|
96
|
+
|
|
97
|
+
// 如果options为空,则默认执行一次查询
|
|
98
|
+
if (options.length <= 0 && props.desc.remote && (props.desc.initLoad ?? true)) {
|
|
99
|
+
tempAttr.remoteMethod('')
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// 这里处理下tip
|
|
103
|
+
const tip = computed(() => (optionItem: any) => {
|
|
104
|
+
return props.desc.optionTip(optionItem)
|
|
105
|
+
})
|
|
106
|
+
|
|
107
|
+
onBeforeMount(async () => {
|
|
108
|
+
attrs.value = await getAttrs(props, tempAttr)
|
|
109
|
+
isInit.value = true
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
watch(
|
|
113
|
+
() => props.desc.options,
|
|
114
|
+
async (data) => {
|
|
115
|
+
if (typeof data === 'string') {
|
|
116
|
+
// 从全局数据中获取options
|
|
117
|
+
options.splice(0, options.length, ...(globalData[data] || []))
|
|
118
|
+
} else if (typeof data === 'function') {
|
|
119
|
+
options.splice(0, options.length, ...(await data(props.formData)))
|
|
120
|
+
} else if (Array.isArray(data)) {
|
|
121
|
+
if (data && options && !isEqual(data, options)) {
|
|
122
|
+
options.splice(0, options.length, ...data)
|
|
123
|
+
}
|
|
124
|
+
} else {
|
|
125
|
+
options.splice(0, options.length)
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
{ immediate: true }
|
|
129
|
+
)
|
|
130
|
+
|
|
131
|
+
watch(
|
|
132
|
+
() => currentValue.value,
|
|
133
|
+
(val: any) => {
|
|
134
|
+
if (attrs.value.allowCreate) {
|
|
135
|
+
if (val && Array.isArray(val) && (val as Array<any>).some((item) => typeof item === 'string' && item.length > (defaultConf.form?.leng.input || 20))) {
|
|
136
|
+
ElMessage.warning('最大长度为: ' + (defaultConf.form?.leng.input || 20))
|
|
137
|
+
currentValue.value = (val as Array<string>).filter((item) => typeof item !== 'string' || item.length <= (defaultConf.form?.leng.input || 20))
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
</script>
|
|
143
|
+
<style lang="scss">
|
|
144
|
+
.el-plus-form-select-options {
|
|
145
|
+
width: 100%;
|
|
146
|
+
display: flex;
|
|
147
|
+
justify-content: space-between;
|
|
148
|
+
align-items: center;
|
|
149
|
+
& > div {
|
|
150
|
+
// text-align: right;
|
|
151
|
+
color: #aaaaaa;
|
|
152
|
+
max-width: 40%;
|
|
153
|
+
font-size: 12px;
|
|
154
|
+
word-break: break-all;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
.el-select-dropdown__item {
|
|
158
|
+
height: auto;
|
|
159
|
+
white-space: break-spaces;
|
|
160
|
+
}
|
|
161
|
+
</style>
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-slider class="ElPlusFormSlider-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
|
|
3
|
-
</template>
|
|
4
|
-
<script lang="ts">
|
|
5
|
-
export default {
|
|
6
|
-
name: 'ElPlusFormSlider',
|
|
7
|
-
inheritAttrs: false,
|
|
8
|
-
typeName: 'slider',
|
|
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?: string | number | '' | null
|
|
18
|
-
field: string
|
|
19
|
-
desc: { [key: string]: any }
|
|
20
|
-
formData: { [key: string]: any }
|
|
21
|
-
}>()
|
|
22
|
-
|
|
23
|
-
const emits = defineEmits(['update:modelValue'])
|
|
24
|
-
const currentValue = ref(props.modelValue)
|
|
25
|
-
emits('update:modelValue', currentValue)
|
|
26
|
-
|
|
27
|
-
const attrs = ref({} as any)
|
|
28
|
-
const onEvents = ref(getEvents(props))
|
|
29
|
-
|
|
30
|
-
onBeforeMount(async () => {
|
|
31
|
-
attrs.value = await getAttrs(props, { ...useAttrs() })
|
|
32
|
-
})
|
|
33
|
-
</script>
|
|
34
|
-
<style lang="scss" scoped>
|
|
35
|
-
.ElPlusFormSlider-panel {
|
|
36
|
-
display: flex;
|
|
37
|
-
}
|
|
38
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<el-slider class="ElPlusFormSlider-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
|
|
3
|
+
</template>
|
|
4
|
+
<script lang="ts">
|
|
5
|
+
export default {
|
|
6
|
+
name: 'ElPlusFormSlider',
|
|
7
|
+
inheritAttrs: false,
|
|
8
|
+
typeName: 'slider',
|
|
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?: string | number | '' | null
|
|
18
|
+
field: string
|
|
19
|
+
desc: { [key: string]: any }
|
|
20
|
+
formData: { [key: string]: any }
|
|
21
|
+
}>()
|
|
22
|
+
|
|
23
|
+
const emits = defineEmits(['update:modelValue'])
|
|
24
|
+
const currentValue = ref(props.modelValue)
|
|
25
|
+
emits('update:modelValue', currentValue)
|
|
26
|
+
|
|
27
|
+
const attrs = ref({} as any)
|
|
28
|
+
const onEvents = ref(getEvents(props))
|
|
29
|
+
|
|
30
|
+
onBeforeMount(async () => {
|
|
31
|
+
attrs.value = await getAttrs(props, { ...useAttrs() })
|
|
32
|
+
})
|
|
33
|
+
</script>
|
|
34
|
+
<style lang="scss" scoped>
|
|
35
|
+
.ElPlusFormSlider-panel {
|
|
36
|
+
display: flex;
|
|
37
|
+
}
|
|
38
|
+
</style>
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="el-plus-form-switch">
|
|
3
|
-
<el-switch v-if="isInit" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
|
|
4
|
-
</div>
|
|
5
|
-
</template>
|
|
6
|
-
<script lang="ts">
|
|
7
|
-
export default {
|
|
8
|
-
name: 'ElPlusFormSwitch',
|
|
9
|
-
inheritAttrs: false,
|
|
10
|
-
typeName: 'switch',
|
|
11
|
-
customOptions: {}
|
|
12
|
-
}
|
|
13
|
-
</script>
|
|
14
|
-
<script lang="ts" setup>
|
|
15
|
-
import { ref, useAttrs, onBeforeMount } from 'vue'
|
|
16
|
-
import { getAttrs, getEvents } from '../mixins'
|
|
17
|
-
|
|
18
|
-
const props = defineProps<{
|
|
19
|
-
modelValue?: number | null
|
|
20
|
-
field: string
|
|
21
|
-
loading?: boolean
|
|
22
|
-
desc: { [key: string]: any }
|
|
23
|
-
formData: { [key: string]: any }
|
|
24
|
-
}>()
|
|
25
|
-
const emits = defineEmits(['update:modelValue'])
|
|
26
|
-
|
|
27
|
-
const currentValue = ref(props.modelValue)
|
|
28
|
-
emits('update:modelValue', currentValue)
|
|
29
|
-
|
|
30
|
-
const isInit = ref(false)
|
|
31
|
-
const attrs = ref({} as any)
|
|
32
|
-
const onEvents = ref(getEvents(props))
|
|
33
|
-
|
|
34
|
-
onBeforeMount(async () => {
|
|
35
|
-
attrs.value = await getAttrs(props, { activeValue: 1, inactiveValue: 0, clearable: true, ...useAttrs() })
|
|
36
|
-
isInit.value = true
|
|
37
|
-
})
|
|
38
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="el-plus-form-switch">
|
|
3
|
+
<el-switch v-if="isInit" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
|
|
4
|
+
</div>
|
|
5
|
+
</template>
|
|
6
|
+
<script lang="ts">
|
|
7
|
+
export default {
|
|
8
|
+
name: 'ElPlusFormSwitch',
|
|
9
|
+
inheritAttrs: false,
|
|
10
|
+
typeName: 'switch',
|
|
11
|
+
customOptions: {}
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
14
|
+
<script lang="ts" setup>
|
|
15
|
+
import { ref, useAttrs, onBeforeMount } from 'vue'
|
|
16
|
+
import { getAttrs, getEvents } from '../mixins'
|
|
17
|
+
|
|
18
|
+
const props = defineProps<{
|
|
19
|
+
modelValue?: number | null
|
|
20
|
+
field: string
|
|
21
|
+
loading?: boolean
|
|
22
|
+
desc: { [key: string]: any }
|
|
23
|
+
formData: { [key: string]: any }
|
|
24
|
+
}>()
|
|
25
|
+
const emits = defineEmits(['update:modelValue'])
|
|
26
|
+
|
|
27
|
+
const currentValue = ref(props.modelValue)
|
|
28
|
+
emits('update:modelValue', currentValue)
|
|
29
|
+
|
|
30
|
+
const isInit = ref(false)
|
|
31
|
+
const attrs = ref({} as any)
|
|
32
|
+
const onEvents = ref(getEvents(props))
|
|
33
|
+
|
|
34
|
+
onBeforeMount(async () => {
|
|
35
|
+
attrs.value = await getAttrs(props, { activeValue: 1, inactiveValue: 0, clearable: true, ...useAttrs() })
|
|
36
|
+
isInit.value = true
|
|
37
|
+
})
|
|
38
|
+
</script>
|