refactor: 移除验证码组件并添加自定义表单组件支持
- 移除未使用的 Verify 验证码组件及其相关文件 - 在组件适配器中添加自定义表单组件的注册支持 - 扩展 ComponentType 类型以支持自定义组件类型pull/48/head
chenminjie
parent
0fed947230
commit
23bcf4f61b
|
|
@ -5,6 +5,8 @@
|
|||
|
||||
import type { BaseFormComponentType } from '@vben/common-ui';
|
||||
|
||||
import type { CustomComponentType } from '#/components/form/types';
|
||||
|
||||
import type { Component, SetupContext } from 'vue';
|
||||
import { h } from 'vue';
|
||||
|
||||
|
|
@ -36,6 +38,8 @@ import {
|
|||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { registerComponent as registerCustomFormComponent } from '#/components/form/component-map';
|
||||
|
||||
const withDefaultPlaceholder = <T extends Component>(
|
||||
component: T,
|
||||
type: 'input' | 'select',
|
||||
|
|
@ -70,7 +74,8 @@ export type ComponentType =
|
|||
| 'TimePicker'
|
||||
| 'TreeSelect'
|
||||
| 'Upload'
|
||||
| BaseFormComponentType;
|
||||
| BaseFormComponentType
|
||||
| CustomComponentType;
|
||||
|
||||
async function initComponentAdapter() {
|
||||
const components: Partial<Record<ComponentType, Component>> = {
|
||||
|
|
@ -108,6 +113,9 @@ async function initComponentAdapter() {
|
|||
Upload,
|
||||
};
|
||||
|
||||
// 注册自定义组件
|
||||
registerCustomFormComponent(components);
|
||||
|
||||
// 将组件注册到全局共享状态中
|
||||
globalShareState.setComponents(components);
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export { default as Verify } from './src/Verify.vue';
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
<script type="text/babel">
|
||||
/**
|
||||
* Verify 验证码组件
|
||||
* @description 分发验证码使用
|
||||
*/
|
||||
import { computed, ref, toRefs, watchEffect } from 'vue';
|
||||
|
||||
// import { $t } from '@vben/locales';
|
||||
|
||||
import VerifyPoints from './Verify/VerifyPoints.vue';
|
||||
import VerifySlide from './Verify/VerifySlide.vue';
|
||||
|
||||
import './style/verify.css';
|
||||
|
||||
export default {
|
||||
name: 'Vue3Verify',
|
||||
components: {
|
||||
VerifyPoints,
|
||||
VerifySlide,
|
||||
},
|
||||
props: {
|
||||
arith: {
|
||||
default: 0,
|
||||
type: Number,
|
||||
},
|
||||
barSize: {
|
||||
default: () => {
|
||||
return {
|
||||
height: '40px',
|
||||
width: '310px',
|
||||
};
|
||||
},
|
||||
type: Object,
|
||||
},
|
||||
blockSize: {
|
||||
default() {
|
||||
return {
|
||||
height: '50px',
|
||||
width: '50px',
|
||||
};
|
||||
},
|
||||
type: Object,
|
||||
},
|
||||
captchaType: {
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
explain: {
|
||||
default: '',
|
||||
type: String,
|
||||
},
|
||||
figure: {
|
||||
default: 0,
|
||||
type: Number,
|
||||
},
|
||||
imgSize: {
|
||||
default() {
|
||||
return {
|
||||
height: '155px',
|
||||
width: '310px',
|
||||
};
|
||||
},
|
||||
type: Object,
|
||||
},
|
||||
mode: {
|
||||
default: 'pop',
|
||||
type: String,
|
||||
},
|
||||
vSpace: {
|
||||
default: 5,
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { captchaType, mode } = toRefs(props);
|
||||
const clickShow = ref(false);
|
||||
const verifyType = ref(undefined);
|
||||
const componentType = ref(undefined);
|
||||
|
||||
const instance = ref({});
|
||||
|
||||
const showBox = computed(() => {
|
||||
return mode.value === 'pop' ? clickShow.value : true;
|
||||
});
|
||||
/**
|
||||
* refresh
|
||||
* @description 刷新
|
||||
*/
|
||||
const refresh = () => {
|
||||
if (instance.value.refresh) instance.value.refresh();
|
||||
};
|
||||
const closeBox = () => {
|
||||
clickShow.value = false;
|
||||
refresh();
|
||||
};
|
||||
const show = () => {
|
||||
if (mode.value === 'pop') clickShow.value = true;
|
||||
};
|
||||
watchEffect(() => {
|
||||
switch (captchaType.value) {
|
||||
case 'blockPuzzle': {
|
||||
verifyType.value = '2';
|
||||
componentType.value = 'VerifySlide';
|
||||
break;
|
||||
}
|
||||
case 'clickWord': {
|
||||
verifyType.value = '';
|
||||
componentType.value = 'VerifyPoints';
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
clickShow,
|
||||
closeBox,
|
||||
componentType,
|
||||
instance,
|
||||
show,
|
||||
showBox,
|
||||
verifyType,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="showBox" :class="mode === 'pop' ? 'mask' : ''">
|
||||
<div
|
||||
:class="mode === 'pop' ? 'verifybox' : ''"
|
||||
:style="{ 'max-width': `${parseInt(imgSize.width) + 20}px` }"
|
||||
>
|
||||
<div v-if="mode === 'pop'" class="verifybox-top">
|
||||
请完成安全验证
|
||||
<span class="verifybox-close" @click="closeBox">
|
||||
<i class="iconfont icon-close"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
:style="{ padding: mode === 'pop' ? '10px' : '0' }"
|
||||
class="verifybox-bottom"
|
||||
>
|
||||
<!-- 验证码容器 -->
|
||||
<component
|
||||
:is="componentType"
|
||||
v-if="componentType"
|
||||
ref="instance"
|
||||
:arith="arith"
|
||||
:bar-size="barSize"
|
||||
:block-size="blockSize"
|
||||
:captcha-type="captchaType"
|
||||
:explain="explain"
|
||||
:figure="figure"
|
||||
:img-size="imgSize"
|
||||
:mode="mode"
|
||||
:type="verifyType"
|
||||
:v-space="vSpace"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { default as Description } from './description.vue';
|
||||
export type * from './types';
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
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];
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import type { CustomComponentType } from './types';
|
||||
|
||||
import type { Component } from 'vue';
|
||||
|
||||
import { 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(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 };
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<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 },
|
||||
);
|
||||
</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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, type PropType } from 'vue';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
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 requestClient.post('/sys/dict/getByDictType', {
|
||||
dictType: props.code,
|
||||
...props.params,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<DictComponent :api="props.code ? fetch : props.api" />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<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 },
|
||||
);
|
||||
</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>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<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 },
|
||||
);
|
||||
</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>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
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';
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export type CustomComponentType =
|
||||
| 'ApiCheckboxGroup'
|
||||
| 'ApiDict'
|
||||
| 'ApiRadioGroup'
|
||||
| 'ApiSelect'
|
||||
| 'ApiTreeSelect';
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
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 };
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import ApiSelect from './api-select.vue';
|
||||
</script>
|
||||
<template>
|
||||
<ApiSelect />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import ApiSelect from './api-select.vue';
|
||||
</script>
|
||||
<template>
|
||||
<ApiSelect />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<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