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