Browse Source

feat: add alwaysLoad

main
xingyu 2 years ago
parent
commit
bcc16e85ca
  1. 17
      src/components/Form/src/components/ApiCascader.vue
  2. 7
      src/components/Form/src/components/ApiRadioGroup.vue
  3. 5
      src/components/Form/src/components/ApiSelect.vue
  4. 16
      src/components/Form/src/components/ApiTransfer.vue
  5. 17
      src/components/Form/src/components/ApiTree.vue
  6. 13
      src/components/Form/src/components/ApiTreeSelect.vue
  7. 2
      src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue

17
src/components/Form/src/components/ApiCascader.vue

@ -38,6 +38,7 @@ const props = defineProps({
displayRenderArray: { displayRenderArray: {
type: Array, type: Array,
}, },
alwaysLoad: propTypes.bool.def(true),
}) })
const emit = defineEmits(['change', 'defaultChange']) const emit = defineEmits(['change', 'defaultChange'])
@ -148,7 +149,11 @@ watchEffect(() => {
watch( watch(
() => props.initFetchParams, () => props.initFetchParams,
() => { () => {
!unref(isFirstLoad) && initialFetch() if (props.alwaysLoad)
!unref(isFirstLoad) && initialFetch()
else
initialFetch()
}, },
{ deep: true }, { deep: true },
) )
@ -170,14 +175,8 @@ function handleRenderDisplay({ labels, selectedOptions }) {
</script> </script>
<template> <template>
<Cascader <Cascader v-model:value="state" :options="options" :load-data="loadData" change-on-select
v-model:value="state" :display-render="handleRenderDisplay" @change="handleChange">
:options="options"
:load-data="loadData"
change-on-select
:display-render="handleRenderDisplay"
@change="handleChange"
>
<template v-if="loading" #suffixIcon> <template v-if="loading" #suffixIcon>
<LoadingOutlined spin /> <LoadingOutlined spin />
</template> </template>

7
src/components/Form/src/components/ApiRadioGroup.vue

@ -29,6 +29,7 @@ const props = defineProps({
labelField: propTypes.string.def('label'), labelField: propTypes.string.def('label'),
valueField: propTypes.string.def('value'), valueField: propTypes.string.def('value'),
immediate: propTypes.bool.def(true), immediate: propTypes.bool.def(true),
alwaysLoad: propTypes.bool.def(true),
}) })
const emit = defineEmits(['optionsChange', 'change']) const emit = defineEmits(['optionsChange', 'change'])
const RadioButton = Radio.Button const RadioButton = Radio.Button
@ -68,7 +69,11 @@ watchEffect(() => {
watch( watch(
() => props.params, () => props.params,
() => { () => {
!unref(isFirstLoad) && fetch() if (props.alwaysLoad)
!unref(isFirstLoad) && fetch()
else
fetch()
}, },
{ deep: true }, { deep: true },
) )

5
src/components/Form/src/components/ApiSelect.vue

@ -30,7 +30,7 @@ const props = defineProps({
labelField: propTypes.string.def('label'), labelField: propTypes.string.def('label'),
valueField: propTypes.string.def('value'), valueField: propTypes.string.def('value'),
immediate: propTypes.bool.def(true), immediate: propTypes.bool.def(true),
alwaysLoad: propTypes.bool.def(false), alwaysLoad: propTypes.bool.def(true),
}) })
const emit = defineEmits(['optionsChange', 'change', 'update:value']) const emit = defineEmits(['optionsChange', 'change', 'update:value'])
@ -129,7 +129,8 @@ function handleChange(_, ...args) {
</script> </script>
<template> <template>
<Select v-bind="$attrs" v-model:value="state" :options="getOptions" @dropdown-open-change="handleFetch" @change="handleChange"> <Select v-bind="$attrs" v-model:value="state" :options="getOptions" @dropdown-open-change="handleFetch"
@change="handleChange">
<template v-for="item in Object.keys($slots)" #[item]="data"> <template v-for="item in Object.keys($slots)" #[item]="data">
<slot :name="item" v-bind="data || {}" /> <slot :name="item" v-bind="data || {}" />
</template> </template>

16
src/components/Form/src/components/ApiTransfer.vue

@ -17,7 +17,7 @@ const props = defineProps({
params: { type: Object }, params: { type: Object },
dataSource: { type: Array as PropType<Array<TransferItem>> }, dataSource: { type: Array as PropType<Array<TransferItem>> },
immediate: propTypes.bool.def(true), immediate: propTypes.bool.def(true),
alwaysLoad: propTypes.bool.def(false), alwaysLoad: propTypes.bool.def(true),
afterFetch: { type: Function as PropType<Fn> }, afterFetch: { type: Function as PropType<Fn> },
resultField: propTypes.string.def(''), resultField: propTypes.string.def(''),
labelField: propTypes.string.def('title'), labelField: propTypes.string.def('title'),
@ -114,15 +114,7 @@ function emitChange() {
</script> </script>
<template> <template>
<Transfer <Transfer v-bind="getAttrs" :data-source="getdataSource" :filter-option="filterOption" :render="(item) => item.title"
v-bind="getAttrs" :show-select-all="showSelectAll" :selected-keys="selectedKeys" :target-keys="getTargetKeys" :show-search="showSearch"
:data-source="getdataSource" @change="handleChange" />
:filter-option="filterOption"
:render="(item) => item.title"
:show-select-all="showSelectAll"
:selected-keys="selectedKeys"
:target-keys="getTargetKeys"
:show-search="showSearch"
@change="handleChange"
/>
</template> </template>

17
src/components/Form/src/components/ApiTree.vue

@ -11,10 +11,11 @@ defineOptions({ name: 'ApiTree' })
const props = defineProps({ const props = defineProps({
api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> }, api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
params: { type: Object }, params: { type: Object },
immediate: { type: Boolean, default: true }, immediate: propTypes.bool.def(true),
resultField: propTypes.string.def(''), resultField: propTypes.string.def(''),
afterFetch: { type: Function as PropType<Fn> }, afterFetch: { type: Function as PropType<Fn> },
handleTree: { type: String, default: '' }, handleTree: propTypes.string.def(''),
alwaysLoad: propTypes.bool.def(true),
}) })
const emit = defineEmits(['optionsChange', 'change']) const emit = defineEmits(['optionsChange', 'change'])
const attrs = useAttrs() const attrs = useAttrs()
@ -37,7 +38,11 @@ function handleChange(...args) {
watch( watch(
() => props.params, () => props.params,
() => { () => {
!unref(isFirstLoaded) && fetch() if (props.alwaysLoad)
!unref(isFirstLoaded) && fetch()
else
fetch()
}, },
{ deep: true }, { deep: true },
) )
@ -45,7 +50,11 @@ watch(
watch( watch(
() => props.immediate, () => props.immediate,
(v) => { (v) => {
v && !isFirstLoaded.value && fetch() if (props.alwaysLoad)
v && !isFirstLoaded.value && fetch()
else
v && fetch()
}, },
) )

13
src/components/Form/src/components/ApiTreeSelect.vue

@ -18,6 +18,7 @@ const props = defineProps({
parentId: { type: Number, default: 0 }, parentId: { type: Number, default: 0 },
parentLabel: { type: String, default: '' }, parentLabel: { type: String, default: '' },
parentFiled: { type: String, default: 'name' }, parentFiled: { type: String, default: 'name' },
alwaysLoad: propTypes.bool.def(true),
}) })
const emit = defineEmits(['optionsChange', 'change']) const emit = defineEmits(['optionsChange', 'change'])
const attrs = useAttrs() const attrs = useAttrs()
@ -39,7 +40,11 @@ function handleChange(...args) {
watch( watch(
() => props.params, () => props.params,
() => { () => {
!unref(isFirstLoaded) && fetch() if (props.alwaysLoad)
!unref(isFirstLoaded) && fetch()
else
fetch()
}, },
{ deep: true }, { deep: true },
) )
@ -47,7 +52,11 @@ watch(
watch( watch(
() => props.immediate, () => props.immediate,
(v) => { (v) => {
v && !isFirstLoaded.value && fetch() if (props.alwaysLoad)
v && !isFirstLoaded.value && fetch()
else
v && fetch()
}, },
) )

2
src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue

@ -70,7 +70,7 @@ export default defineComponent({
<div class="draggable-box"> <div class="draggable-box">
<Draggable <Draggable
v-model="formConfig.schemas" v-model="formConfig.schemas"
class="list-main ant-row" class="ant-row list-main"
group="form-draggable" group="form-draggable"
:component-data="{ name: 'list', tag: 'div', type: 'transition-group' }" :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
ghost-class="moving" ghost-class="moving"