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