refactor: remove unused description and form components
chenminjie
parent
eb100d9dfc
commit
301bc036c6
|
|
@ -1,77 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DescItem } from './types';
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
||||
|
||||
import { componentMap } from '#/components/view/component-map';
|
||||
|
||||
defineProps({
|
||||
title: { type: String, default: '' },
|
||||
bordered: { type: Boolean, default: true },
|
||||
size: {
|
||||
type: String as PropType<'default' | 'middle' | 'small'>,
|
||||
default: undefined,
|
||||
},
|
||||
column: {
|
||||
type: [Number, Object],
|
||||
default: () => {
|
||||
// return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
|
||||
return 12;
|
||||
},
|
||||
},
|
||||
labelStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '120px',
|
||||
};
|
||||
},
|
||||
},
|
||||
contentStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '0px',
|
||||
};
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
type: Array as PropType<DescItem[]>,
|
||||
default: () => [],
|
||||
},
|
||||
data: { type: Object, default: undefined },
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Descriptions
|
||||
:bordered="bordered"
|
||||
:column="column"
|
||||
:content-style="contentStyle"
|
||||
:label-style="labelStyle"
|
||||
:size="size"
|
||||
:title="title ? title : undefined"
|
||||
>
|
||||
<template v-for="item in schema" :key="item.field">
|
||||
<DescriptionsItem :label="item.label" :span="item.span">
|
||||
<component
|
||||
:is="(componentMap as Map<String, any>).get(item.component)"
|
||||
v-if="(componentMap as Map<String, any>).has(item.component)"
|
||||
:value="data?.[item.field]"
|
||||
v-bind="{ ...item.componentProps }"
|
||||
/>
|
||||
<component
|
||||
:is="item.render(data?.[item.field], data)"
|
||||
v-else-if="
|
||||
!(componentMap as Map<String, any>).has(item.component) &&
|
||||
item.render
|
||||
"
|
||||
:value="data?.[item.field]"
|
||||
v-bind="{ ...item.componentProps }"
|
||||
/>
|
||||
<template v-else>{{ data?.[item.field] }}</template>
|
||||
</DescriptionsItem>
|
||||
</template>
|
||||
</Descriptions>
|
||||
</template>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { default as Description } from './description.vue';
|
||||
export type * from './types';
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import type { CollapseContainerOptions } from '@/components/Container';
|
||||
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
|
||||
|
||||
import type { CSSProperties, VNode } from 'vue';
|
||||
|
||||
export interface DescItem {
|
||||
labelMinWidth?: number;
|
||||
contentMinWidth?: number;
|
||||
labelStyle?: CSSProperties;
|
||||
field: string;
|
||||
label: JSX.Element | string | VNode;
|
||||
// Merge column
|
||||
span?: number;
|
||||
show?: (...arg: any) => boolean;
|
||||
// render
|
||||
render?: (
|
||||
val: any,
|
||||
data: Recordable,
|
||||
) => Element | JSX.Element | number | string | undefined | VNode;
|
||||
component: string;
|
||||
componentProps?: any;
|
||||
children?: DescItem[];
|
||||
}
|
||||
|
||||
export interface DescriptionProps extends DescriptionsProps {
|
||||
// Whether to include the collapse component
|
||||
useCollapse?: boolean;
|
||||
/**
|
||||
* item configuration
|
||||
* @type DescItem
|
||||
*/
|
||||
schema: DescItem[];
|
||||
/**
|
||||
* 数据
|
||||
* @type object
|
||||
*/
|
||||
data: Recordable;
|
||||
/**
|
||||
* Built-in CollapseContainer component configuration
|
||||
* @type CollapseContainerOptions
|
||||
*/
|
||||
collapseOptions?: CollapseContainerOptions;
|
||||
}
|
||||
|
||||
export interface DescInstance {
|
||||
setDescProps(descProps: Partial<DescriptionProps>): void;
|
||||
}
|
||||
|
||||
export type Register = (descInstance: DescInstance) => void;
|
||||
|
||||
/**
|
||||
* @description:
|
||||
*/
|
||||
export type UseDescReturnType = [Register, DescInstance];
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import type { CustomComponentType } from './types';
|
||||
|
||||
import type { Component } from 'vue';
|
||||
|
||||
import { capitalizeFirstLetter, kebabToCamelCase } from '@vben/utils';
|
||||
|
||||
const componentMap = new Map<CustomComponentType | string, Component>();
|
||||
// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
|
||||
const modules = import.meta.glob('./components/**/*.vue', { eager: true });
|
||||
// 加入到路由集合中
|
||||
Object.keys(modules).forEach((key) => {
|
||||
if (!key.includes('-ignore')) {
|
||||
const mod = (modules as any)[key].default || {};
|
||||
// ./components/ApiDict.vue
|
||||
// 获取ApiDict
|
||||
const compName = key.replace('./components/', '').replace('.vue', '');
|
||||
componentMap.set(capitalizeFirstLetter(kebabToCamelCase(compName)), mod);
|
||||
}
|
||||
});
|
||||
|
||||
export function add(compName: string, component: Component) {
|
||||
componentMap.set(compName, component);
|
||||
}
|
||||
|
||||
export function del(compName: string) {
|
||||
componentMap.delete(compName);
|
||||
}
|
||||
/**
|
||||
* 注册组件
|
||||
* @param components
|
||||
*/
|
||||
export const registerComponent = (components: any) => {
|
||||
componentMap.forEach((value, key) => {
|
||||
components[key] = value as Component;
|
||||
});
|
||||
};
|
||||
export { componentMap };
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { CheckboxValueType } from 'ant-design-vue/es/checkbox/interface';
|
||||
|
||||
import { computed, type PropType, ref, watch, watchEffect } from 'vue';
|
||||
|
||||
import { getNestedValue, isFunction } from '@vben/utils';
|
||||
|
||||
import { objectOmit, useVModel } from '@vueuse/core';
|
||||
import { CheckboxGroup, Spin } from 'ant-design-vue';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
type OptionsItem = { disabled?: boolean; label: string; value: string };
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: [Array] as PropType<CheckboxValueType[]>,
|
||||
default: undefined,
|
||||
},
|
||||
numberToString: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
api: {
|
||||
type: [Function, String] as PropType<
|
||||
(arg?: any) => Promise<OptionsItem[]> | String
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
// api params
|
||||
params: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => ({}),
|
||||
},
|
||||
requestMethod: {
|
||||
// 请求方法
|
||||
type: String,
|
||||
default: 'post',
|
||||
},
|
||||
// support xxx.xxx.xx
|
||||
resultField: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
labelField: {
|
||||
type: String,
|
||||
default: 'label',
|
||||
},
|
||||
valueField: {
|
||||
type: String,
|
||||
default: 'value',
|
||||
},
|
||||
immediate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:value', 'optionsChange']);
|
||||
const mValue = useVModel(props, 'value', emits, {
|
||||
defaultValue: props.value,
|
||||
passive: true,
|
||||
});
|
||||
const options = ref<OptionsItem[]>([]);
|
||||
const loading = ref(false);
|
||||
const isFirstLoad = ref(true);
|
||||
const getOptions = computed(() => {
|
||||
const { labelField, valueField, numberToString } = props;
|
||||
const res: OptionsItem[] = [];
|
||||
options.value.forEach((item: any) => {
|
||||
const value = item[valueField];
|
||||
res.push({
|
||||
...objectOmit(item, [labelField, valueField]),
|
||||
label: item[labelField],
|
||||
value: numberToString ? `${value}` : value,
|
||||
disabled: item.disabled || false,
|
||||
});
|
||||
});
|
||||
return res;
|
||||
});
|
||||
|
||||
const fetch = async () => {
|
||||
const api: any =
|
||||
typeof props.api === 'string' && props.api
|
||||
? (params: any) => {
|
||||
return (requestClient as any)[props.requestMethod](
|
||||
props.api as any,
|
||||
params,
|
||||
);
|
||||
}
|
||||
: props.api;
|
||||
if (!api || !isFunction(api)) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const params =
|
||||
props.requestMethod === 'get' ? { params: props.params } : props.params;
|
||||
const res = await api(params);
|
||||
if (Array.isArray(res)) {
|
||||
options.value = res;
|
||||
emits('optionsChange', options.value);
|
||||
} else {
|
||||
options.value = props.resultField
|
||||
? getNestedValue(res, props.resultField)
|
||||
: [];
|
||||
emits('optionsChange', options.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
watchEffect(() => {
|
||||
props.immediate && fetch();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.params,
|
||||
() => {
|
||||
!isFirstLoad.value && fetch();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 监听 value 的变化，确保 mValue 的类型与 options 中的 value 类型一致
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
if (props.numberToString && Array.isArray(mValue.value)) {
|
||||
mValue.value = mValue.value.map((item) => `${item}`);
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Spin :spinning="loading" style="margin-left: 20px">
|
||||
<CheckboxGroup
|
||||
v-bind="$attrs"
|
||||
v-model:value="mValue"
|
||||
:options="getOptions"
|
||||
class="w-full"
|
||||
>
|
||||
<template v-for="item in Object.keys($slots)" #[item]="data">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
</CheckboxGroup>
|
||||
</Spin>
|
||||
</template>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, type PropType } from 'vue';
|
||||
|
||||
import { useDictStore } from '@vben/stores';
|
||||
|
||||
import { ApiCheckboxGroup, ApiRadioGroup, ApiSelect } from '..';
|
||||
|
||||
type OptionsItem = { disabled?: boolean; label: string; value: string };
|
||||
|
||||
const props = defineProps({
|
||||
renderType: {
|
||||
type: String as PropType<'CheckboxGroup' | 'RadioGroup' | 'Select'>,
|
||||
default: 'Select',
|
||||
},
|
||||
api: {
|
||||
type: [Function, String] as PropType<
|
||||
(arg?: any) => Promise<OptionsItem[]> | String
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
requestMethod: {
|
||||
// 请求方法
|
||||
type: String,
|
||||
default: 'post',
|
||||
},
|
||||
// api params
|
||||
params: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => ({}),
|
||||
},
|
||||
code: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
});
|
||||
const DictComponent = computed(() => {
|
||||
if (props.renderType === 'RadioGroup') {
|
||||
return ApiRadioGroup;
|
||||
} else if (props.renderType === 'CheckboxGroup') {
|
||||
return ApiCheckboxGroup;
|
||||
}
|
||||
return ApiSelect;
|
||||
});
|
||||
const fetch = () => {
|
||||
return new Promise<OptionsItem[]>((resolve) => {
|
||||
const dict = useDictStore().getDictOptions(props.code!);
|
||||
const options: OptionsItem[] = dict as OptionsItem[];
|
||||
resolve(options);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<DictComponent :api="props.code ? fetch : props.api" />
|
||||
</template>
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
||||
|
||||
import { computed, type PropType, ref, watch, watchEffect } from 'vue';
|
||||
|
||||
import { getNestedValue, isFunction } from '@vben/utils';
|
||||
|
||||
import { objectOmit, useVModel } from '@vueuse/core';
|
||||
import { RadioGroup, Spin } from 'ant-design-vue';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
type OptionsItem = { disabled?: boolean; label: string; value: string };
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: [String, Number, Array] as PropType<SelectValue>,
|
||||
default: undefined,
|
||||
},
|
||||
numberToString: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
api: {
|
||||
type: [Function, String] as PropType<
|
||||
(arg?: any) => Promise<OptionsItem[]> | String
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
requestMethod: {
|
||||
// 请求方法
|
||||
type: String,
|
||||
default: 'post',
|
||||
},
|
||||
// api params
|
||||
params: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => ({}),
|
||||
},
|
||||
// support xxx.xxx.xx
|
||||
resultField: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
labelField: {
|
||||
type: String,
|
||||
default: 'label',
|
||||
},
|
||||
valueField: {
|
||||
type: String,
|
||||
default: 'value',
|
||||
},
|
||||
immediate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isBtn: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:value', 'optionsChange']);
|
||||
const mValue = useVModel(props, 'value', emits, {
|
||||
defaultValue: props.value,
|
||||
passive: true,
|
||||
});
|
||||
const options = ref<OptionsItem[]>([]);
|
||||
const loading = ref(false);
|
||||
const isFirstLoad = ref(true);
|
||||
const getOptions = computed(() => {
|
||||
const { labelField, valueField, numberToString } = props;
|
||||
const res: OptionsItem[] = [];
|
||||
options.value.forEach((item: any) => {
|
||||
const value = item[valueField];
|
||||
res.push({
|
||||
...objectOmit(item, [labelField, valueField]),
|
||||
label: item[labelField],
|
||||
value: numberToString ? `${value}` : value,
|
||||
disabled: item.disabled || false,
|
||||
});
|
||||
});
|
||||
return res;
|
||||
});
|
||||
|
||||
const fetch = async () => {
|
||||
const api: any =
|
||||
typeof props.api === 'string' && props.api
|
||||
? (params: any) => {
|
||||
return (requestClient as any)[props.requestMethod](
|
||||
props.api as any,
|
||||
params,
|
||||
);
|
||||
}
|
||||
: props.api;
|
||||
if (!api || !isFunction(api)) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const params =
|
||||
props.requestMethod === 'get' ? { params: props.params } : props.params;
|
||||
const res = await api(params);
|
||||
if (Array.isArray(res)) {
|
||||
options.value = res;
|
||||
emits('optionsChange', options.value);
|
||||
} else {
|
||||
options.value = props.resultField
|
||||
? getNestedValue(res, props.resultField)
|
||||
: [];
|
||||
emits('optionsChange', options.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
watchEffect(() => {
|
||||
props.immediate && fetch();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.params,
|
||||
() => {
|
||||
!isFirstLoad.value && fetch();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 监听 value 的变化，确保 mValue 的类型与 options 中的 value 类型一致
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
if (props.numberToString && typeof mValue.value === 'number') {
|
||||
mValue.value = `${mValue.value}`;
|
||||
}
|
||||
if (props.numberToString && Array.isArray(mValue.value)) {
|
||||
mValue.value = mValue.value.map((item) => `${item}`);
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Spin :spinning="loading" style="margin-left: 20px">
|
||||
<RadioGroup
|
||||
v-bind="$attrs"
|
||||
v-model:value="mValue"
|
||||
:button-style="isBtn ? 'solid' : 'outline'"
|
||||
:option-type="isBtn ? 'button' : 'default'"
|
||||
:options="getOptions"
|
||||
class="w-full"
|
||||
>
|
||||
<template v-for="item in Object.keys($slots)" #[item]="data">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
</RadioGroup>
|
||||
</Spin>
|
||||
</template>
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
||||
|
||||
import { computed, type PropType, ref, watch, watchEffect } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { getNestedValue, isFunction } from '@vben/utils';
|
||||
|
||||
import { objectOmit, useVModel } from '@vueuse/core';
|
||||
import { Select } from 'ant-design-vue';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
type OptionsItem = { disabled?: boolean; label: string; value: string };
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: [String, Number, Array] as PropType<SelectValue>,
|
||||
default: undefined,
|
||||
},
|
||||
numberToString: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
api: {
|
||||
type: [Function, String] as PropType<
|
||||
(arg?: any) => Promise<OptionsItem[]> | String
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
requestMethod: {
|
||||
type: String,
|
||||
default: 'post',
|
||||
},
|
||||
// api params
|
||||
params: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => ({}),
|
||||
},
|
||||
// support xxx.xxx.xx
|
||||
resultField: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
labelField: {
|
||||
type: String,
|
||||
default: 'label',
|
||||
},
|
||||
valueField: {
|
||||
type: String,
|
||||
default: 'value',
|
||||
},
|
||||
immediate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:value', 'optionsChange']);
|
||||
const mValue = useVModel(props, 'value', emits, {
|
||||
defaultValue: props.value,
|
||||
passive: true,
|
||||
});
|
||||
const options = ref<OptionsItem[]>([]);
|
||||
const loading = ref(false);
|
||||
const isFirstLoad = ref(true);
|
||||
const getOptions = computed(() => {
|
||||
const { labelField, valueField, numberToString } = props;
|
||||
const res: OptionsItem[] = [];
|
||||
options.value.forEach((item: any) => {
|
||||
const value = item[valueField];
|
||||
res.push({
|
||||
...objectOmit(item, [labelField, valueField]),
|
||||
label: item[labelField],
|
||||
value: numberToString ? `${value}` : value,
|
||||
disabled: item.disabled || false,
|
||||
});
|
||||
});
|
||||
return res;
|
||||
});
|
||||
|
||||
const fetch = async () => {
|
||||
const api: any =
|
||||
typeof props.api === 'string' && props.api
|
||||
? (params: any) => {
|
||||
return (requestClient as any)[props.requestMethod](
|
||||
props.api as any,
|
||||
params,
|
||||
);
|
||||
}
|
||||
: props.api;
|
||||
if (!api || !isFunction(api)) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const params =
|
||||
props.requestMethod === 'get' ? { params: props.params } : props.params;
|
||||
const res = await api(params);
|
||||
if (Array.isArray(res)) {
|
||||
options.value = res;
|
||||
emits('optionsChange', options.value);
|
||||
} else {
|
||||
options.value = props.resultField
|
||||
? getNestedValue(res, props.resultField)
|
||||
: [];
|
||||
emits('optionsChange', options.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
async function handleFetch() {
|
||||
if (!props.immediate && isFirstLoad.value) {
|
||||
await fetch();
|
||||
isFirstLoad.value = false;
|
||||
}
|
||||
}
|
||||
watchEffect(() => {
|
||||
props.immediate && fetch();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.params,
|
||||
() => {
|
||||
!isFirstLoad.value && fetch();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 监听 value 的变化，确保 mValue 的类型与 options 中的 value 类型一致
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
if (props.numberToString && typeof mValue.value === 'number') {
|
||||
mValue.value = `${mValue.value}`;
|
||||
}
|
||||
if (props.numberToString && Array.isArray(mValue.value)) {
|
||||
mValue.value = mValue.value.map((item) => `${item}`);
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Select
|
||||
v-model:value="mValue"
|
||||
:options="getOptions"
|
||||
class="w-full"
|
||||
@dropdown-visible-change="handleFetch"
|
||||
>
|
||||
<template v-for="item in Object.keys($slots)" #[item]="data">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
<template v-if="loading" #suffixIcon>
|
||||
<IconifyIcon icon="ant-design:loading-outlined" spin />
|
||||
</template>
|
||||
<template v-if="loading" #notFoundContent>
|
||||
<span>
|
||||
<IconifyIcon icon="ant-design:loading-outlined" spin />
|
||||
请等待数据加载完成
|
||||
</span>
|
||||
</template>
|
||||
</Select>
|
||||
</template>
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
||||
|
||||
import { computed, type PropType, ref, watch, watchEffect } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { getNestedValue, isFunction } from '@vben/utils';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { TreeSelect } from 'ant-design-vue';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: [String, Number, Array] as PropType<SelectValue>,
|
||||
default: undefined,
|
||||
},
|
||||
api: {
|
||||
type: [Function, String] as PropType<(arg?: any) => Promise<any> | String>,
|
||||
default: null,
|
||||
},
|
||||
requestMethod: {
|
||||
// 请求方法
|
||||
type: String,
|
||||
default: 'post',
|
||||
},
|
||||
// api params
|
||||
params: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => ({}),
|
||||
},
|
||||
// support xxx.xxx.xx
|
||||
resultField: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
labelField: {
|
||||
type: String,
|
||||
default: 'title',
|
||||
},
|
||||
valueField: {
|
||||
type: String,
|
||||
default: 'value',
|
||||
},
|
||||
childrenField: {
|
||||
type: String,
|
||||
default: 'children',
|
||||
},
|
||||
immediate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:value', 'treeDataChange']);
|
||||
const mValue = useVModel(props, 'value', emits, {
|
||||
defaultValue: props.value,
|
||||
passive: true,
|
||||
});
|
||||
const treeData = ref<any>([]);
|
||||
const loading = ref(false);
|
||||
const isFirstLoad = ref(true);
|
||||
const fieldNames = computed(() => {
|
||||
return {
|
||||
label: props.labelField,
|
||||
value: props.valueField,
|
||||
children: props.childrenField,
|
||||
};
|
||||
});
|
||||
const getTreeData = computed(() => {
|
||||
return treeData.value;
|
||||
});
|
||||
|
||||
const fetch = async () => {
|
||||
const api: any =
|
||||
typeof props.api === 'string' && props.api
|
||||
? (params: any) => {
|
||||
return (requestClient as any)[props.requestMethod](
|
||||
props.api as any,
|
||||
params,
|
||||
);
|
||||
}
|
||||
: props.api;
|
||||
if (!api || !isFunction(api)) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const params =
|
||||
props.requestMethod === 'get' ? { params: props.params } : props.params;
|
||||
const res = await api(params);
|
||||
if (Array.isArray(res)) {
|
||||
treeData.value = res;
|
||||
emits('treeDataChange', treeData.value);
|
||||
} else {
|
||||
treeData.value = props.resultField
|
||||
? getNestedValue(res, props.resultField)
|
||||
: [];
|
||||
emits('treeDataChange', treeData.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
async function handleFetch() {
|
||||
if (!props.immediate && isFirstLoad.value) {
|
||||
await fetch();
|
||||
isFirstLoad.value = false;
|
||||
}
|
||||
}
|
||||
watchEffect(() => {
|
||||
props.immediate && fetch();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.params,
|
||||
() => {
|
||||
!isFirstLoad.value && fetch();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TreeSelect
|
||||
v-model:value="mValue"
|
||||
:field-names="fieldNames"
|
||||
:tree-data="getTreeData"
|
||||
:tree-node-filter-prop="labelField"
|
||||
class="w-full"
|
||||
@dropdown-visible-change="handleFetch"
|
||||
>
|
||||
<template v-for="item in Object.keys($slots)" #[item]="data">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
<template v-if="loading" #suffixIcon>
|
||||
<IconifyIcon icon="ant-design:loading-outlined" spin />
|
||||
</template>
|
||||
</TreeSelect>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export { default as ApiCheckboxGroup } from './components/api-checkbox-group.vue';
|
||||
export { default as ApiDict } from './components/api-dict.vue';
|
||||
export { default as ApiRadioGroup } from './components/api-radio-group.vue';
|
||||
export { default as ApiSelect } from './components/api-select.vue';
|
||||
export { default as ApiTreeSelect } from './components/api-tree-select.vue';
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export type CustomComponentType =
|
||||
| 'ApiCheckboxGroup'
|
||||
| 'ApiDict'
|
||||
| 'ApiRadioGroup'
|
||||
| 'ApiSelect'
|
||||
| 'ApiTreeSelect';
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import type { Component } from 'vue';
|
||||
|
||||
import { toPascalCase } from '#/util/tool';
|
||||
|
||||
const componentMap = new Map<string, Component>();
|
||||
// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
|
||||
const modules = import.meta.glob('./components/**/*.vue', { eager: true });
|
||||
// 加入到路由集合中
|
||||
Object.keys(modules).forEach((key) => {
|
||||
if (!key.includes('-ignore')) {
|
||||
const mod = (modules as any)[key].default || {};
|
||||
// ./components/ApiDict.vue
|
||||
// 获取ApiDict
|
||||
const compName = key.replace('./components/', '').replace('.vue', '');
|
||||
componentMap.set(toPascalCase(compName), mod);
|
||||
}
|
||||
});
|
||||
|
||||
export function add(compName: string, component: Component) {
|
||||
componentMap.set(compName, component);
|
||||
}
|
||||
|
||||
export function del(compName: string) {
|
||||
componentMap.delete(compName);
|
||||
}
|
||||
|
||||
export { componentMap };
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import ApiSelect from './api-select.vue';
|
||||
</script>
|
||||
<template>
|
||||
<ApiSelect />
|
||||
</template>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { type DictItem, useDictStore } from '@vben/stores';
|
||||
|
||||
const props = defineProps({
|
||||
code: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
value: {
|
||||
// 值
|
||||
type: [String, Number, Array],
|
||||
default: undefined,
|
||||
},
|
||||
split: {
|
||||
// 分割符
|
||||
type: String,
|
||||
default: ',',
|
||||
},
|
||||
join: {
|
||||
// 连接符
|
||||
type: String,
|
||||
default: ',',
|
||||
},
|
||||
});
|
||||
const dictStore = useDictStore();
|
||||
const cValue = computed(() => {
|
||||
if (!props.value && props.value !== 0) {
|
||||
return '';
|
||||
}
|
||||
const arr: Array<any> = [];
|
||||
if (Array.isArray(props.value)) {
|
||||
arr.push(...props.value);
|
||||
} else {
|
||||
arr.push(...props.value.toString().split(props.split));
|
||||
}
|
||||
const dictData = dictStore.getDictData(props.code as string) as DictItem[];
|
||||
const res: Array<any> = [];
|
||||
arr.forEach((item) => {
|
||||
for (let i = 0; i < dictData.length; i++) {
|
||||
if (dictData[i]?.value?.toString() === item?.toString()) {
|
||||
res.push(dictData[i]?.label);
|
||||
break;
|
||||
}
|
||||
if (i === dictData.length - 1) {
|
||||
res.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return res.join(props.join);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>{{ cValue }}</div>
|
||||
</template>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import ApiSelect from './api-select.vue';
|
||||
</script>
|
||||
<template>
|
||||
<ApiSelect />
|
||||
</template>
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, onMounted, type PropType, watch } from 'vue';
|
||||
|
||||
import { type DictItem, useDictStore } from '@vben/stores';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
const props = defineProps({
|
||||
code: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
value: {
|
||||
// 值
|
||||
type: [String, Number, Array],
|
||||
default: undefined,
|
||||
},
|
||||
split: {
|
||||
// 分割符
|
||||
type: String,
|
||||
default: ',',
|
||||
},
|
||||
join: {
|
||||
// 连接符
|
||||
type: String,
|
||||
default: ',',
|
||||
},
|
||||
api: {
|
||||
// 接口请求对象
|
||||
type: [Function, String] as PropType<
|
||||
((...arg: any) => Promise<any>) | String
|
||||
>,
|
||||
default() {
|
||||
return () => {
|
||||
return new Promise((resolve) => {
|
||||
resolve([]);
|
||||
});
|
||||
};
|
||||
},
|
||||
},
|
||||
params: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
cacheKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
requestMethod: {
|
||||
type: String,
|
||||
default: 'post',
|
||||
},
|
||||
});
|
||||
const dictStore = useDictStore();
|
||||
/**
|
||||
* 获取包含的id
|
||||
*/
|
||||
const getIncludeIds = () => {
|
||||
if (!props.value && props.value !== 0) {
|
||||
return [];
|
||||
}
|
||||
const arr: Array<any> = [];
|
||||
if (Array.isArray(props.value)) {
|
||||
arr.push(...props.value);
|
||||
} else {
|
||||
arr.push(...props.value.toString().split(props.split));
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
/**
|
||||
* 获取缓存key
|
||||
*/
|
||||
const getCacheKey = () => {
|
||||
let cacheKey = props.cacheKey;
|
||||
if (typeof props.api === 'string' && !cacheKey) {
|
||||
cacheKey = props.api as string;
|
||||
}
|
||||
return cacheKey;
|
||||
};
|
||||
const cValue = computed(() => {
|
||||
if (!props.value && props.value !== 0) {
|
||||
return '';
|
||||
}
|
||||
const arr: Array<any> = getIncludeIds();
|
||||
const cacheKey = getCacheKey();
|
||||
const dictData = dictStore.getDictData(cacheKey) as DictItem[];
|
||||
const res: Array<any> = [];
|
||||
arr.forEach((item) => {
|
||||
for (let i = 0; i < dictData.length; i++) {
|
||||
if (dictData[i]?.value?.toString() === item?.toString()) {
|
||||
res.push(dictData[i]?.label);
|
||||
break;
|
||||
}
|
||||
if (i === dictData.length - 1) {
|
||||
res.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return res.join(props.join);
|
||||
});
|
||||
const requestData = () => {
|
||||
const api: (...arg: any) => Promise<any> =
|
||||
typeof props.api === 'string'
|
||||
? (params: any) => {
|
||||
return (requestClient as any)[props.requestMethod](
|
||||
props.api as any,
|
||||
params,
|
||||
);
|
||||
}
|
||||
: (props.api as (...arg: any) => Promise<any>);
|
||||
const cacheKey = getCacheKey();
|
||||
const params =
|
||||
props.requestMethod === 'get'
|
||||
? {
|
||||
params: {
|
||||
...props.params,
|
||||
dictType: cacheKey,
|
||||
includeType: 2,
|
||||
includeIds: getIncludeIds(),
|
||||
},
|
||||
}
|
||||
: {
|
||||
data: {
|
||||
...props.params,
|
||||
dictType: cacheKey,
|
||||
includeType: 2,
|
||||
includeIds: getIncludeIds(),
|
||||
},
|
||||
};
|
||||
dictStore.setDictCacheByApi(api, params);
|
||||
};
|
||||
onMounted(() => {
|
||||
requestData();
|
||||
});
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
requestData();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<div>{{ cValue }}</div>
|
||||
</template>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, onMounted, type PropType, ref } from 'vue';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
value: {
|
||||
// 值
|
||||
type: [String, Number, Array],
|
||||
default: undefined,
|
||||
},
|
||||
api: {
|
||||
// 接口请求对象
|
||||
type: [Function, String] as PropType<
|
||||
((...arg: any) => Promise<any>) | String
|
||||
>,
|
||||
default() {
|
||||
return () => {
|
||||
return new Promise((resolve) => {
|
||||
resolve([]);
|
||||
});
|
||||
};
|
||||
},
|
||||
},
|
||||
params: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
cacheKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
requestMethod: {
|
||||
type: String,
|
||||
default: 'post',
|
||||
},
|
||||
valueField: {
|
||||
type: String,
|
||||
default: 'id',
|
||||
},
|
||||
labelField: {
|
||||
type: String,
|
||||
default: 'name',
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const currentData = ref({});
|
||||
const cValue = computed(() => {
|
||||
return (currentData.value as any)[props.labelField] || props.value;
|
||||
});
|
||||
onMounted(() => {
|
||||
const api: (...arg: any) => Promise<any> =
|
||||
typeof props.api === 'string'
|
||||
? (params: any) => {
|
||||
return (requestClient as any)[props.requestMethod](
|
||||
props.api as any,
|
||||
params,
|
||||
);
|
||||
}
|
||||
: (props.api as (...arg: any) => Promise<any>);
|
||||
const searchType = props.multiple ? 'IN' : 'EQ';
|
||||
const params =
|
||||
props.requestMethod === 'get'
|
||||
? {
|
||||
params: {
|
||||
...props.params,
|
||||
[`m_${searchType}_${props.valueField}`]: props.value,
|
||||
},
|
||||
}
|
||||
: {
|
||||
...props.params,
|
||||
[`m_${searchType}_${props.valueField}`]: props.value,
|
||||
};
|
||||
api(params).then((res) => {
|
||||
if (res.length > 0) {
|
||||
currentData.value = res[0];
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>{{ cValue }}</div>
|
||||
</template>
|
||||
<style lang="less" scoped></style>
|
||||
Loading…
Reference in New Issue