feat(@vben/web-antdv-next): 替换 antdv-next 中不可用的 List 组件，手动迁移为 div 结构，后续组件库新增 Listy 组件在进行替换
XuZhiqiang
parent
40f0ba71f5
commit
06f776d1ef
|
|
@ -4,7 +4,6 @@ import { computed, onActivated, onMounted, ref } from 'vue';
|
|||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Badge, Card } from 'antdv-next';
|
||||
// TODO: List component not available in antdv-next, needs manual migration
|
||||
|
||||
import { getFollowClueCount } from '#/api/crm/clue';
|
||||
import {
|
||||
|
|
@ -96,27 +95,22 @@ onMounted(() => {
|
|||
<Page auto-content-height>
|
||||
<div class="flex h-full w-full">
|
||||
<Card class="w-1/5">
|
||||
<List item-layout="horizontal" :data-source="leftSides">
|
||||
<template #renderItem="{ item }">
|
||||
<List.Item
|
||||
@click="sideClick(item)"
|
||||
class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<List.Item.Meta>
|
||||
<template #title>
|
||||
{{ item.name }}
|
||||
</template>
|
||||
</List.Item.Meta>
|
||||
<template #extra>
|
||||
<Badge
|
||||
v-if="item.count.value > 0"
|
||||
:color="item.menu === leftMenu ? 'blue' : 'red'"
|
||||
:count="item.count.value"
|
||||
/>
|
||||
</template>
|
||||
</List.Item>
|
||||
</template>
|
||||
</List>
|
||||
<!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
|
||||
<div>
|
||||
<div
|
||||
v-for="item in leftSides"
|
||||
:key="item.menu"
|
||||
class="flex cursor-pointer items-center justify-between px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
@click="sideClick(item)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<Badge
|
||||
v-if="item.count.value > 0"
|
||||
:color="item.menu === leftMenu ? 'blue' : 'red'"
|
||||
:count="item.count.value"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<component class="ml-4 w-4/5" :is="currentComponent" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { computed } from 'vue';
|
|||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Popover } from 'antdv-next';
|
||||
// TODO: List component not available in antdv-next, needs manual migration
|
||||
|
||||
import { useEmoji } from './emoji';
|
||||
|
||||
|
|
@ -27,7 +26,8 @@ function handleSelect(item: Emoji) {
|
|||
<template>
|
||||
<Popover placement="top" trigger="click">
|
||||
<template #content>
|
||||
<List height="300px" class="w-[500px]">
|
||||
<!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
|
||||
<div class="h-[300px] w-[500px] overflow-auto">
|
||||
<ul class="ml-2 flex flex-wrap px-2">
|
||||
<li
|
||||
v-for="(item, index) in emojiList"
|
||||
|
|
@ -39,7 +39,7 @@ function handleSelect(item: Emoji) {
|
|||
<img :src="item.url" class="size-4" />
|
||||
</li>
|
||||
</ul>
|
||||
</List>
|
||||
</div>
|
||||
</template>
|
||||
<IconifyIcon
|
||||
class="ml-2.5 size-6 cursor-pointer"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ import {
|
|||
import { fenToYuan } from '@vben/utils';
|
||||
|
||||
import { Image, Tag } from 'antdv-next';
|
||||
// TODO: List component not available in antdv-next, needs manual migration
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getOrderPage } from '#/api/mall/trade/order';
|
||||
|
|
@ -109,37 +108,38 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
<RemarkFormModal @success="handleRefresh" />
|
||||
<Grid table-title="订单列表">
|
||||
<template #expand_content="{ row }">
|
||||
<List item-layout="vertical" :data-source="row.items">
|
||||
<template #renderItem="{ item }">
|
||||
<List.Item>
|
||||
<List.Item.Meta>
|
||||
<template #title>
|
||||
{{ item.spuName }}
|
||||
<Tag
|
||||
color="blue"
|
||||
v-for="property in item.properties"
|
||||
:key="property.propertyId"
|
||||
>
|
||||
{{ property.propertyName }} : {{ property.valueName }}
|
||||
</Tag>
|
||||
</template>
|
||||
<template #avatar>
|
||||
<Image :src="item.picUrl" :width="40" :height="40" />
|
||||
</template>
|
||||
<template #description>
|
||||
{{
|
||||
`原价：${fenToYuan(item.price)} 元 / 数量：${item.count} 个`
|
||||
}}
|
||||
|
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
|
||||
:value="item.afterSaleStatus"
|
||||
/>
|
||||
</template>
|
||||
</List.Item.Meta>
|
||||
</List.Item>
|
||||
</template>
|
||||
</List>
|
||||
<!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
|
||||
<div>
|
||||
<div
|
||||
v-for="item in row.items"
|
||||
:key="item.id"
|
||||
class="flex items-start gap-3 border-b border-gray-100 py-3 last:border-b-0"
|
||||
>
|
||||
<Image :src="item.picUrl" :width="40" :height="40" />
|
||||
<div class="flex-1">
|
||||
<div>
|
||||
{{ item.spuName }}
|
||||
<Tag
|
||||
color="blue"
|
||||
v-for="property in item.properties"
|
||||
:key="property.propertyId"
|
||||
>
|
||||
{{ property.propertyName }} : {{ property.valueName }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div class="text-gray-500">
|
||||
{{
|
||||
`原价：${fenToYuan(item.price!)} 元 / 数量：${item.count} 个`
|
||||
}}
|
||||
|
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
|
||||
:value="item.afterSaleStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import { DICT_TYPE } from '@vben/constants';
|
|||
import { fenToYuan } from '@vben/utils';
|
||||
|
||||
import { Image, Tag } from 'antdv-next';
|
||||
// TODO: List component not available in antdv-next, needs manual migration
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getOrderPage } from '#/api/mall/trade/order';
|
||||
|
|
@ -80,37 +79,38 @@ const [Grid] = useVbenVxeGrid({
|
|||
<template>
|
||||
<Grid table-title="订单列表">
|
||||
<template #expand_content="{ row }">
|
||||
<List item-layout="vertical" :data-source="row.items">
|
||||
<template #renderItem="{ item }">
|
||||
<List.Item>
|
||||
<List.Item.Meta>
|
||||
<template #title>
|
||||
{{ item.spuName }}
|
||||
<Tag
|
||||
color="blue"
|
||||
v-for="property in item.properties"
|
||||
:key="property.propertyId"
|
||||
>
|
||||
{{ property.propertyName }} : {{ property.valueName }}
|
||||
</Tag>
|
||||
</template>
|
||||
<template #avatar>
|
||||
<Image :src="item.picUrl" :width="40" :height="40" />
|
||||
</template>
|
||||
<template #description>
|
||||
{{
|
||||
`原价：${fenToYuan(item.price)} 元 / 数量：${item.count} 个`
|
||||
}}
|
||||
|
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
|
||||
:value="item.afterSaleStatus"
|
||||
/>
|
||||
</template>
|
||||
</List.Item.Meta>
|
||||
</List.Item>
|
||||
</template>
|
||||
</List>
|
||||
<!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
|
||||
<div>
|
||||
<div
|
||||
v-for="item in row.items"
|
||||
:key="item.id"
|
||||
class="flex items-start gap-3 border-b border-gray-100 py-3 last:border-b-0"
|
||||
>
|
||||
<Image :src="item.picUrl" :width="40" :height="40" />
|
||||
<div class="flex-1">
|
||||
<div>
|
||||
{{ item.spuName }}
|
||||
<Tag
|
||||
color="blue"
|
||||
v-for="property in item.properties"
|
||||
:key="property.propertyId"
|
||||
>
|
||||
{{ property.propertyName }} : {{ property.valueName }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div class="text-gray-500">
|
||||
{{
|
||||
`原价：${fenToYuan(item.price!)} 元 / 数量：${item.count} 个`
|
||||
}}
|
||||
|
|
||||
<DictTag
|
||||
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
|
||||
:value="item.afterSaleStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
|
|
|
|||
Loading…
Reference in New Issue