reactor:统一 Description 命名为 Descriptions
parent
5ec4d8ab82
commit
e3e3c2e968
|
@ -29,8 +29,8 @@ const Description = defineComponent({
|
|||
},
|
||||
|
||||
setup(props: DescriptionsOptions) {
|
||||
// TODO @puhui999:每个 field 的 slot 的考虑
|
||||
// TODO @puhui999:from 5.0:extra: () => getSlot(slots, 'extra')
|
||||
// TODO @xingyu:每个 field 的 slot 的考虑
|
||||
// TODO @xingyu:from 5.0:extra: () => getSlot(slots, 'extra')
|
||||
/** 过滤掉不需要展示的 */
|
||||
const shouldShowItem = (item: DescriptionItemSchema) => {
|
||||
if (item.hidden === undefined) return true;
|
||||
|
@ -75,6 +75,6 @@ const Description = defineComponent({
|
|||
},
|
||||
});
|
||||
|
||||
// TODO @puhui999:from 5.0:emits: ['register'] 事件
|
||||
// TODO @xingyu:from 5.0:emits: ['register'] 事件
|
||||
export default Description;
|
||||
</script>
|
||||
|
|
|
@ -2,9 +2,9 @@ import type { DescriptionsProps } from 'ant-design-vue';
|
|||
|
||||
import type { CSSProperties, VNode } from 'vue';
|
||||
|
||||
// TODO @puhui999:【content】这个纠结下;1)vben2.0 是 render;https://doc.vvbin.cn/components/desc.html#usage 2)
|
||||
// TODO @puhui999:vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
|
||||
// TODO @puhui999:【hidden】这个纠结下;1)vben2.0 是 show;
|
||||
// TODO @xingyu:【content】这个纠结下;1)vben2.0 是 render;https://doc.vvbin.cn/components/desc.html#usage 2)
|
||||
// TODO @xingyu:vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
|
||||
// TODO @xingyu:【hidden】这个纠结下;1)vben2.0 是 show;
|
||||
export interface DescriptionItemSchema {
|
||||
label: string | VNode; // 内容的描述
|
||||
field?: string; // 对应 data 中的字段名
|
||||
|
@ -15,11 +15,11 @@ export interface DescriptionItemSchema {
|
|||
hidden?: ((data: any) => boolean) | boolean; // 是否显示
|
||||
}
|
||||
|
||||
// TODO @puhui999:vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
|
||||
// TODO @puhui999:from 5.0:bordered 默认为 true
|
||||
// TODO @puhui999:from 5.0:column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
|
||||
// TODO @puhui999:from 5.0:size 默认为 small;有 'default', 'middle', 'small', undefined
|
||||
// TODO @puhui999:from 5.0:useCollapse 默认为 true
|
||||
// TODO @xingyu:vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
|
||||
// TODO @xingyu:from 5.0:bordered 默认为 true
|
||||
// TODO @xingyu:from 5.0:column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
|
||||
// TODO @xingyu:from 5.0:size 默认为 small;有 'default', 'middle', 'small', undefined
|
||||
// TODO @xingyu:from 5.0:useCollapse 默认为 true
|
||||
export interface DescriptionsOptions {
|
||||
data?: Record<string, any>; // 数据
|
||||
schema?: DescriptionItemSchema[]; // 描述项配置
|
||||
|
|
|
@ -16,7 +16,7 @@ class DescriptionApi {
|
|||
return this.state as DescriptionsOptions;
|
||||
}
|
||||
|
||||
// TODO @puhui999:【setState】纠结下:1)vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage;
|
||||
// TODO @xingyu:【setState】纠结下:1)vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage;
|
||||
setState(newState: Partial<DescriptionsOptions>) {
|
||||
this.state = { ...this.state, ...newState };
|
||||
}
|
||||
|
@ -27,7 +27,7 @@ export type ExtendedDescriptionApi = DescriptionApi;
|
|||
export function useDescription(options: DescriptionsOptions) {
|
||||
const IS_REACTIVE = isReactive(options);
|
||||
const api = new DescriptionApi(options);
|
||||
// 扩展API
|
||||
// 扩展 API
|
||||
const extendedApi: ExtendedDescriptionApi = api as never;
|
||||
const Desc = defineComponent({
|
||||
name: 'UseDescription',
|
||||
|
|
|
@ -12,7 +12,7 @@ defineProps<{
|
|||
business: CrmBusinessApi.Business; // 商机信息
|
||||
}>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
const [BaseDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
|
|||
schema: useDetailBaseSchema(),
|
||||
});
|
||||
|
||||
const [SystemDescription] = useDescription({
|
||||
const [SystemDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '系统信息',
|
||||
bordered: false,
|
||||
|
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
|
|||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseDescription :data="business" />
|
||||
<BaseDescriptions :data="business" />
|
||||
<Divider />
|
||||
<SystemDescription :data="business" />
|
||||
<SystemDescriptions :data="business" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -40,7 +40,7 @@ const business = ref<CrmBusinessApi.Business>({} as CrmBusinessApi.Business);
|
|||
const businessLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
|
||||
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 4,
|
||||
|
@ -134,7 +134,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</template>
|
||||
<Card class="min-h-[10%]">
|
||||
<Description :data="business" />
|
||||
<Descriptions :data="business" />
|
||||
</Card>
|
||||
<Card class="mt-4 min-h-[60%]">
|
||||
<Tabs>
|
||||
|
|
|
@ -12,7 +12,7 @@ defineProps<{
|
|||
clue: CrmClueApi.Clue; // 线索信息
|
||||
}>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
const [BaseDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
|
|||
schema: useDetailBaseSchema(),
|
||||
});
|
||||
|
||||
const [SystemDescription] = useDescription({
|
||||
const [SystemDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '系统信息',
|
||||
bordered: false,
|
||||
|
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
|
|||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseDescription :data="clue" />
|
||||
<BaseDescriptions :data="clue" />
|
||||
<Divider />
|
||||
<SystemDescription :data="clue" />
|
||||
<SystemDescriptions :data="clue" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -42,7 +42,7 @@ const validateOwnerUser = computed(
|
|||
);
|
||||
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 4,
|
||||
|
@ -151,7 +151,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</template>
|
||||
<Card class="min-h-[10%]">
|
||||
<Description :data="clue" />
|
||||
<Descriptions :data="clue" />
|
||||
</Card>
|
||||
<Card class="mt-4 min-h-[60%]">
|
||||
<Tabs>
|
||||
|
|
|
@ -12,7 +12,7 @@ defineProps<{
|
|||
contact: CrmContactApi.Contact; // 联系人信息
|
||||
}>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
const [BaseDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
|
|||
schema: useDetailBaseSchema(),
|
||||
});
|
||||
|
||||
const [SystemDescription] = useDescription({
|
||||
const [SystemDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '系统信息',
|
||||
bordered: false,
|
||||
|
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
|
|||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseDescription :data="contact" />
|
||||
<BaseDescriptions :data="contact" />
|
||||
<Divider />
|
||||
<SystemDescription :data="contact" />
|
||||
<SystemDescriptions :data="contact" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -34,7 +34,7 @@ const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact);
|
|||
const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
|
||||
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 4,
|
||||
|
@ -113,7 +113,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</template>
|
||||
<Card class="min-h-[10%]">
|
||||
<Description :data="contact" />
|
||||
<Descriptions :data="contact" />
|
||||
</Card>
|
||||
<Card class="mt-4 min-h-[60%]">
|
||||
<Tabs>
|
||||
|
|
|
@ -12,7 +12,7 @@ defineProps<{
|
|||
contract: CrmContractApi.Contract; // 合同信息
|
||||
}>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
const [BaseDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
|
|||
schema: useDetailBaseSchema(),
|
||||
});
|
||||
|
||||
const [SystemDescription] = useDescription({
|
||||
const [SystemDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '系统信息',
|
||||
bordered: false,
|
||||
|
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
|
|||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseDescription :data="contract" />
|
||||
<BaseDescriptions :data="contract" />
|
||||
<Divider />
|
||||
<SystemDescription :data="contract" />
|
||||
<SystemDescriptions :data="contract" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -45,7 +45,7 @@ const validateOwnerUser = computed(
|
|||
);
|
||||
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 4,
|
||||
|
@ -125,7 +125,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</template>
|
||||
<Card class="min-h-[10%]">
|
||||
<Description :data="contract" />
|
||||
<Descriptions :data="contract" />
|
||||
</Card>
|
||||
<Card class="mt-4 min-h-[60%]">
|
||||
<Tabs>
|
||||
|
|
|
@ -12,7 +12,7 @@ defineProps<{
|
|||
customer: CrmCustomerApi.Customer; // 客户信息
|
||||
}>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
const [BaseDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
|
|||
schema: useDetailBaseSchema(),
|
||||
});
|
||||
|
||||
const [SystemDescription] = useDescription({
|
||||
const [SystemDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '系统信息',
|
||||
bordered: false,
|
||||
|
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
|
|||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseDescription :data="customer" />
|
||||
<BaseDescriptions :data="customer" />
|
||||
<Divider />
|
||||
<SystemDescription :data="customer" />
|
||||
<SystemDescriptions :data="customer" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -51,7 +51,7 @@ const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer);
|
|||
const customerLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
|
||||
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 4,
|
||||
|
@ -269,7 +269,7 @@ onMounted(() => {
|
|||
/>
|
||||
</template>
|
||||
<Card class="min-h-[10%]">
|
||||
<Description :data="customer" />
|
||||
<Descriptions :data="customer" />
|
||||
</Card>
|
||||
<Card class="mt-4 min-h-[60%]">
|
||||
<Tabs>
|
||||
|
|
|
@ -9,7 +9,7 @@ defineProps<{
|
|||
product: CrmProductApi.Product; // 产品信息
|
||||
}>();
|
||||
|
||||
const [ProductDescription] = useDescription({
|
||||
const [ProductDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -22,6 +22,6 @@ const [ProductDescription] = useDescription({
|
|||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<ProductDescription :data="product" />
|
||||
<ProductDescriptions :data="product" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -30,7 +30,7 @@ const productId = ref(0);
|
|||
const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product);
|
||||
const productLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 4,
|
||||
|
@ -73,7 +73,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</template>
|
||||
<Card class="min-h-[10%]">
|
||||
<Description :data="product" />
|
||||
<Descriptions :data="product" />
|
||||
</Card>
|
||||
<Card class="mt-4 min-h-[60%]">
|
||||
<Tabs>
|
||||
|
|
|
@ -12,7 +12,7 @@ defineProps<{
|
|||
receivable: CrmReceivableApi.Receivable; // 收款信息
|
||||
}>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
const [BaseDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
|
|||
schema: useDetailBaseSchema(),
|
||||
});
|
||||
|
||||
const [SystemDescription] = useDescription({
|
||||
const [SystemDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '系统信息',
|
||||
bordered: false,
|
||||
|
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
|
|||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseDescription :data="receivable" />
|
||||
<BaseDescriptions :data="receivable" />
|
||||
<Divider />
|
||||
<SystemDescription :data="receivable" />
|
||||
<SystemDescriptions :data="receivable" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -39,7 +39,7 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
|
|||
// 校验编辑权限
|
||||
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 4,
|
||||
|
@ -105,7 +105,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</template>
|
||||
<Card class="min-h-[10%]">
|
||||
<Description :data="receivable" />
|
||||
<Descriptions :data="receivable" />
|
||||
</Card>
|
||||
<Card class="mt-4 min-h-[60%]">
|
||||
<Tabs>
|
||||
|
|
|
@ -12,7 +12,7 @@ defineProps<{
|
|||
receivablePlan: CrmReceivablePlanApi.Plan; // 收款计划信息
|
||||
}>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
const [BaseDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
|
|||
schema: useDetailBaseSchema(),
|
||||
});
|
||||
|
||||
const [SystemDescription] = useDescription({
|
||||
const [SystemDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '系统信息',
|
||||
bordered: false,
|
||||
|
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
|
|||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseDescription :data="receivablePlan" />
|
||||
<BaseDescriptions :data="receivablePlan" />
|
||||
<Divider />
|
||||
<SystemDescription :data="receivablePlan" />
|
||||
<SystemDescriptions :data="receivablePlan" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -39,7 +39,7 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
|
|||
// 校验编辑权限
|
||||
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 4,
|
||||
|
@ -109,7 +109,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</template>
|
||||
<Card class="min-h-[10%]">
|
||||
<Description :data="receivablePlan" />
|
||||
<Descriptions :data="receivablePlan" />
|
||||
</Card>
|
||||
<Card class="mt-4 min-h-[60%]">
|
||||
<Tabs>
|
||||
|
|
|
@ -19,7 +19,7 @@ withDefaults(
|
|||
},
|
||||
);
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
class: 'mx-4',
|
||||
|
@ -72,7 +72,7 @@ const [Description] = useDescription({
|
|||
<template #extra>
|
||||
<slot name="extra"></slot>
|
||||
</template>
|
||||
<Description
|
||||
<Descriptions
|
||||
:column="mode === 'member' ? 2 : 1"
|
||||
:data="{
|
||||
...user,
|
||||
|
|
|
@ -18,7 +18,7 @@ withDefaults(
|
|||
},
|
||||
);
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
class: 'mx-4',
|
||||
|
@ -85,12 +85,12 @@ const [Description] = useDescription({
|
|||
<Avatar :size="140" shape="square" :src="user.avatar" />
|
||||
</Col>
|
||||
<Col :span="20">
|
||||
<Description :column="2" :data="user" />
|
||||
<Descriptions :column="2" :data="user" />
|
||||
</Col>
|
||||
</Row>
|
||||
<template v-else-if="mode === 'kefu'">
|
||||
<Avatar :size="140" shape="square" :src="user.avatar" />
|
||||
<Description :column="1" :data="user" />
|
||||
<Descriptions :column="1" :data="user" />
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
|
@ -12,7 +12,7 @@ import { useDetailSchema } from '../data';
|
|||
|
||||
const detailData = ref<PayOrderApi.Order>();
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 2,
|
||||
|
@ -48,6 +48,6 @@ const [Modal, modalApi] = useVbenModal({
|
|||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<Description :data="detailData" />
|
||||
<Descriptions :data="detailData" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
@ -14,7 +14,7 @@ import { useBaseDetailSchema, useChannelDetailSchema } from '../data';
|
|||
|
||||
const formData = ref<PayRefundApi.Refund>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
const [BaseDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 2,
|
||||
|
@ -23,7 +23,7 @@ const [BaseDescription] = useDescription({
|
|||
schema: useBaseDetailSchema(),
|
||||
});
|
||||
|
||||
const [ChannelDescription] = useDescription({
|
||||
const [ChannelDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
bordered: false,
|
||||
column: 2,
|
||||
|
@ -60,8 +60,8 @@ const [Modal, modalApi] = useVbenModal({
|
|||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<BaseDescription :data="formData" />
|
||||
<BaseDescriptions :data="formData" />
|
||||
<Divider />
|
||||
<ChannelDescription :data="formData" />
|
||||
<ChannelDescriptions :data="formData" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
@ -32,7 +32,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
},
|
||||
});
|
||||
|
||||
const [Description] = useDescription({
|
||||
const [Descriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
bordered: false,
|
||||
|
@ -50,6 +50,6 @@ const [Description] = useDescription({
|
|||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<Description :data="formData" />
|
||||
<Descriptions :data="formData" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue