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

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

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

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

@ -30,7 +30,7 @@ const props = defineProps({
labelField: propTypes.string.def('label'),
valueField: propTypes.string.def('value'),
immediate: propTypes.bool.def(true),
alwaysLoad: propTypes.bool.def(false),
alwaysLoad: propTypes.bool.def(true),
})
const emit = defineEmits(['optionsChange', 'change', 'update:value'])
@ -129,7 +129,8 @@ function handleChange(_, ...args) {
</script>
<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">
<slot :name="item" v-bind="data || {}" />
</template>

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

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

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

@ -11,10 +11,11 @@ defineOptions({ name: 'ApiTree' })
const props = defineProps({
api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
params: { type: Object },
immediate: { type: Boolean, default: true },
immediate: propTypes.bool.def(true),
resultField: propTypes.string.def(''),
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 attrs = useAttrs()
@ -37,7 +38,11 @@ function handleChange(...args) {
watch(
() => props.params,
() => {
!unref(isFirstLoaded) && fetch()
if (props.alwaysLoad)
!unref(isFirstLoaded) && fetch()
else
fetch()
},
{ deep: true },
)
@ -45,7 +50,11 @@ watch(
watch(
() => props.immediate,
(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 },
parentLabel: { type: String, default: '' },
parentFiled: { type: String, default: 'name' },
alwaysLoad: propTypes.bool.def(true),
})
const emit = defineEmits(['optionsChange', 'change'])
const attrs = useAttrs()
@ -39,7 +40,11 @@ function handleChange(...args) {
watch(
() => props.params,
() => {
!unref(isFirstLoaded) && fetch()
if (props.alwaysLoad)
!unref(isFirstLoaded) && fetch()
else
fetch()
},
{ deep: true },
)
@ -47,7 +52,11 @@ watch(
watch(
() => props.immediate,
(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">
<Draggable
v-model="formConfig.schemas"
class="list-main ant-row"
class="ant-row list-main"
group="form-draggable"
:component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
ghost-class="moving"