lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: Form改造中

Browse Source
This commit is contained in:
kailong321200875
2023-04-27 17:44:43 +08:00
parent 89844e441d
commit 1d0f4b4c39
6 changed files with 221 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/views/Components/Form/DefaultForm.vue
View File

@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup lang="tsx">
import { Form } from '@/components/Form'
import { reactive, ref, onMounted, computed, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
@@ -25,6 +25,17 @@ const querySearch = (queryString: string, cb: Fn) => {
// call callback function to return suggestions
cb(results)
}
let timeout: NodeJS.Timeout
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
const results = queryString
? restaurants.value.filter(createFilter(queryString))
: restaurants.value
clearTimeout(timeout)
timeout = setTimeout(() => {
cb(results)
}, 3000 * Math.random())
}
const createFilter = (queryString: string) => {
return (restaurant: Recordable) => {
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
@@ -359,7 +370,11 @@ const schema = reactive<FormSchema[]>([
{
field: 'field2',
label: t('formDemo.default'),
component: 'Input'
component: 'Input',
componentProps: {
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value) => value.replace(/\$\s?|(,*)/g, '')
}
},
{
field: 'field3',
@@ -378,7 +393,7 @@ const schema = reactive<FormSchema[]>([
component: 'Input',
componentProps: {
slots: {
suffix: (data: any) => {
suffix: (_, data: any) => {
return unref(toggle) && data.field4
? useIcon({ icon: 'ep:calendar' })
: useIcon({ icon: 'ep:share' })
@@ -394,12 +409,20 @@ const schema = reactive<FormSchema[]>([
componentProps: {
slots: {
prepend: useIcon({ icon: 'ep:calendar' }),
append: (data: any) => {
append: (_, data: any) => {
return data.field5 ? useIcon({ icon: 'ep:calendar' }) : useIcon({ icon: 'ep:share' })
}
}
}
},
{
field: 'input-field7',
label: t('formDemo.password'),
component: 'Input',
componentProps: {
showPassword: true
}
},
{
field: 'field6',
label: t('formDemo.textarea'),
@@ -408,54 +431,76 @@ const schema = reactive<FormSchema[]>([
type: 'textarea',
rows: 2
}
},
{
field: 'field7',
label: t('formDemo.autocomplete'),
component: 'Divider'
},
{
field: 'field8',
label: t('formDemo.default'),
component: 'Autocomplete',
componentProps: {
fetchSuggestions: querySearch,
on: {
select: handleSelect
}
}
},
{
field: 'field9',
label: t('formDemo.slot'),
component: 'Autocomplete',
componentProps: {
fetchSuggestions: querySearch,
on: {
select: handleSelect
},
slots: {
default: (item: any) => {
return (
<>
<div class="value">{item.value}</div>
<span class="link">{item.link}</span>
</>
)
}
}
}
},
{
field: 'autocomplete-field10',
label: t('formDemo.remoteSearch'),
component: 'Autocomplete',
componentProps: {
fetchSuggestions: querySearchAsync,
on: {
select: handleSelect
}
}
},
{
field: 'field10',
component: 'Divider',
label: t('formDemo.inputNumber')
},
{
field: 'field11',
label: t('formDemo.default'),
component: 'InputNumber',
value: 0
},
{
field: 'field12',
label: t('formDemo.position'),
component: 'InputNumber',
componentProps: {
controlsPosition: 'right'
},
value: 10
}
// {
// field: 'field7',
// label: t('formDemo.autocomplete'),
// component: 'Divider'
// },
// {
// field: 'field8',
// label: t('formDemo.default'),
// component: 'Autocomplete',
// componentProps: {
// fetchSuggestions: querySearch,
// onSelect: handleSelect
// }
// },
// {
// field: 'field9',
// label: t('formDemo.slot'),
// component: 'Autocomplete',
// componentProps: {
// fetchSuggestions: querySearch,
// onSelect: handleSelect,
// slots: {
// default: true
// }
// }
// },
// {
// field: 'field10',
// component: 'Divider',
// label: t('formDemo.inputNumber')
// },
// {
// field: 'field11',
// label: t('formDemo.default'),
// component: 'InputNumber',
// value: 0
// },
// {
// field: 'field12',
// label: t('formDemo.position'),
// component: 'InputNumber',
// componentProps: {
// controlsPosition: 'right'
// },
// value: 0
// },
// {
// field: 'field13',
// label: t('formDemo.select'),
// component: 'Divider'