diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-designer.scss b/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-designer.scss index 9649244e0..f35e1ee5b 100644 --- a/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-designer.scss +++ b/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-designer.scss @@ -18,23 +18,23 @@ width: 100%; min-height: 36px; - .el-button { + .ant-button { text-align: center; } - .el-button-group { + .ant-button-group { margin: 4px; } - .el-tooltip__popper { - .el-button { + .ant-tooltip__popper { + .ant-button { width: 100%; padding-right: 8px; padding-left: 8px; text-align: left; } - .el-button:hover { + .ant-button:hover { color: #fff; background: rgb(64 158 255 / 80%); } @@ -175,7 +175,6 @@ pre { } .hljs { - word-break: break-word; white-space: pre-wrap; } diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-panel.scss b/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-panel.scss index d7e8cfbcd..1fbe34e1e 100644 --- a/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-panel.scss +++ b/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-panel.scss @@ -59,7 +59,7 @@ line-height: 32px; } - .el-form-item { + .ant-form-item { width: 100%; padding-bottom: 18px; margin-bottom: 0; @@ -106,22 +106,22 @@ margin-top: 8px; } -.element-drawer__button > .el-button { +.element-drawer__button > .ant-button { width: 100%; } -.el-collapse-item__content { +.ant-collapse-item__content { padding-bottom: 0; } -.el-input.is-disabled .el-input__inner { +.ant-input.is-disabled .ant-input__inner { color: #999; } -.el-form-item.el-form-item--mini { +.ant-form-item.ant-form-item--mini { margin-bottom: 0; - & + .el-form-item { + & + .ant-form-item { margin-top: 16px; } } diff --git a/apps/web-antd/src/views/iot/device/device/index.vue b/apps/web-antd/src/views/iot/device/device/index.vue index 247407ca8..06e34ac5e 100644 --- a/apps/web-antd/src/views/iot/device/device/index.vue +++ b/apps/web-antd/src/views/iot/device/device/index.vue @@ -154,7 +154,7 @@ async function handleDelete(row: any) { }); try { await deleteDevice(row.id); - message.success($t('common.delSuccess')); + message.success($t('ui.actionMessage.deleteSuccess')); handleRefresh(); } finally { hideLoading(); @@ -175,7 +175,7 @@ async function handleDeleteBatch() { try { const ids = checkedRows.map((row: any) => row.id); await deleteDeviceList(ids); - message.success($t('common.delSuccess')); + message.success($t('ui.actionMessage.deleteSuccess')); handleRefresh(); } finally { hideLoading(); diff --git a/apps/web-antd/src/views/iot/home/data.ts b/apps/web-antd/src/views/iot/home/data.ts index 2fef51830..a91d606a0 100644 --- a/apps/web-antd/src/views/iot/home/data.ts +++ b/apps/web-antd/src/views/iot/home/data.ts @@ -102,7 +102,7 @@ export function useIotHome() { } /** 格式化数字 - 大数字显示为 K/M */ -export const formatNumber = (num: number): string => { +export function formatNumber(num: number): string { if (num >= 1_000_000) { return `${(num / 1_000_000).toFixed(1)}M`; } @@ -110,4 +110,4 @@ export const formatNumber = (num: number): string => { return `${(num / 1000).toFixed(1)}K`; } return num.toString(); -}; +} diff --git a/apps/web-antd/src/views/iot/ota/firmware/data.ts b/apps/web-antd/src/views/iot/ota/firmware/data.ts index 7d93d2166..c3e44ec47 100644 --- a/apps/web-antd/src/views/iot/ota/firmware/data.ts +++ b/apps/web-antd/src/views/iot/ota/firmware/data.ts @@ -1,12 +1,7 @@ import type { VbenFormSchema } from '#/adapter/form'; import type { VxeTableGridOptions } from '#/adapter/vxe-table'; -import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware'; -import { message } from 'ant-design-vue'; - -import { deleteOtaFirmware, getOtaFirmwarePage } from '#/api/iot/ota/firmware'; import { getSimpleProductList } from '#/api/iot/product/product'; -import { $t } from '#/locales'; import { getRangePickerDefaultProps } from '#/utils'; /** 新增/修改固件的表单 */ @@ -157,51 +152,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { }, ]; } - -/** Grid 配置项 */ -export function useGridOptions(): VxeTableGridOptions { - return { - columns: useGridColumns(), - height: 'auto', - keepSource: true, - proxyConfig: { - ajax: { - query: async ({ page }, formValues) => { - return await getOtaFirmwarePage({ - pageNo: page.currentPage, - pageSize: page.pageSize, - ...formValues, - }); - }, - }, - }, - rowConfig: { - keyField: 'id', - isHover: true, - }, - toolbarConfig: { - refresh: true, - search: true, - }, - }; -} - -/** 删除固件 */ -export async function handleDeleteFirmware( - row: IoTOtaFirmwareApi.Firmware, - onSuccess: () => void, -) { - const hideLoading = message.loading({ - content: $t('ui.actionMessage.deleting', [row.name]), - duration: 0, - }); - try { - await deleteOtaFirmware(row.id as number); - message.success({ - content: $t('ui.actionMessage.deleteSuccess', [row.name]), - }); - onSuccess(); - } finally { - hideLoading(); - } -} diff --git a/apps/web-antd/src/views/iot/ota/firmware/index.vue b/apps/web-antd/src/views/iot/ota/firmware/index.vue index adffe6bc9..249578653 100644 --- a/apps/web-antd/src/views/iot/ota/firmware/index.vue +++ b/apps/web-antd/src/views/iot/ota/firmware/index.vue @@ -1,17 +1,17 @@ diff --git a/apps/web-antd/src/views/iot/ota/modules/detail/index.vue b/apps/web-antd/src/views/iot/ota/modules/detail/index.vue index e4d89c07a..8bd43420c 100644 --- a/apps/web-antd/src/views/iot/ota/modules/detail/index.vue +++ b/apps/web-antd/src/views/iot/ota/modules/detail/index.vue @@ -27,17 +27,17 @@ const firmwareStatisticsLoading = ref(false); const firmwareStatistics = ref>({}); /** 获取固件信息 */ -const getFirmwareInfo = async () => { +async function getFirmwareInfo() { firmwareLoading.value = true; try { firmware.value = await IoTOtaFirmwareApi.getOtaFirmware(firmwareId.value); } finally { firmwareLoading.value = false; } -}; +} /** 获取升级统计 */ -const getStatistics = async () => { +async function getStatistics() { firmwareStatisticsLoading.value = true; try { firmwareStatistics.value = @@ -47,7 +47,7 @@ const getStatistics = async () => { } finally { firmwareStatisticsLoading.value = false; } -}; +} /** 初始化 */ onMounted(() => { diff --git a/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue b/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue index e4d89c07a..8bd43420c 100644 --- a/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue +++ b/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue @@ -27,17 +27,17 @@ const firmwareStatisticsLoading = ref(false); const firmwareStatistics = ref>({}); /** 获取固件信息 */ -const getFirmwareInfo = async () => { +async function getFirmwareInfo() { firmwareLoading.value = true; try { firmware.value = await IoTOtaFirmwareApi.getOtaFirmware(firmwareId.value); } finally { firmwareLoading.value = false; } -}; +} /** 获取升级统计 */ -const getStatistics = async () => { +async function getStatistics() { firmwareStatisticsLoading.value = true; try { firmwareStatistics.value = @@ -47,7 +47,7 @@ const getStatistics = async () => { } finally { firmwareStatisticsLoading.value = false; } -}; +} /** 初始化 */ onMounted(() => { diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue index 50c434af3..8a19d63d7 100644 --- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue +++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue @@ -113,7 +113,7 @@ const columns: TableColumnsType = [ const [ModalComponent, modalApi] = useVbenModal(); /** 获取任务详情 */ -const getTaskInfo = async () => { +async function getTaskInfo() { if (!taskId.value) { return; } @@ -123,10 +123,10 @@ const getTaskInfo = async () => { } finally { taskLoading.value = false; } -}; +} /** 获取统计数据 */ -const getStatistics = async () => { +async function getStatistics() { if (!taskId.value) { return; } @@ -140,10 +140,10 @@ const getStatistics = async () => { } finally { taskStatisticsLoading.value = false; } -}; +} /** 获取升级记录列表 */ -const getRecordList = async () => { +async function getRecordList() { if (!taskId.value) { return; } @@ -156,26 +156,26 @@ const getRecordList = async () => { } finally { recordLoading.value = false; } -}; +} /** 切换标签 */ -const handleTabChange = (tabKey: number | string) => { +function handleTabChange(tabKey: number | string) { activeTab.value = String(tabKey); queryParams.pageNo = 1; queryParams.status = activeTab.value === '' ? undefined : Number.parseInt(String(tabKey)); getRecordList(); -}; +} /** 分页变化 */ -const handleTableChange = (pagination: any) => { +function handleTableChange(pagination: any) { queryParams.pageNo = pagination.current; queryParams.pageSize = pagination.pageSize; getRecordList(); -}; +} /** 取消升级 */ -const handleCancelUpgrade = async (record: OtaTaskRecord) => { +async function handleCancelUpgrade(record: OtaTaskRecord) { Modal.confirm({ title: '确认取消', content: '确认要取消该设备的升级任务吗?', @@ -192,10 +192,10 @@ const handleCancelUpgrade = async (record: OtaTaskRecord) => { } }, }); -}; +} /** 打开弹窗 */ -const open = (id: number) => { +function open(id: number) { modalApi.open(); taskId.value = id; activeTab.value = ''; @@ -206,7 +206,7 @@ const open = (id: number) => { getTaskInfo(); getStatistics(); getRecordList(); -}; +} /** 暴露方法 */ defineExpose({ open }); diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue index 5b24d05f7..0971ac2ef 100644 --- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue +++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue @@ -1,5 +1,5 @@ diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue index 6c98bd692..bbe90796e 100644 --- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue +++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue @@ -40,7 +40,7 @@ const taskFormRef = ref(); // 任务表单引用 const taskDetailRef = ref(); // 任务详情引用 /** 获取任务列表 */ -const getTaskList = async () => { +async function getTaskList() { taskLoading.value = true; try { const data = await IoTOtaTaskApi.getOtaTaskPage(queryParams); @@ -49,32 +49,32 @@ const getTaskList = async () => { } finally { taskLoading.value = false; } -}; +} /** 搜索 */ -const handleQuery = () => { +function handleQuery() { queryParams.pageNo = 1; getTaskList(); -}; +} /** 打开任务表单 */ -const openTaskForm = () => { +function openTaskForm() { taskFormRef.value?.open(); -}; +} /** 处理任务创建成功 */ -const handleTaskCreateSuccess = () => { +function handleTaskCreateSuccess() { getTaskList(); emit('success'); -}; +} /** 查看任务详情 */ -const handleTaskDetail = (id: number) => { +function handleTaskDetail(id: number) { taskDetailRef.value?.open(id); -}; +} /** 取消任务 */ -const handleCancelTask = async (id: number) => { +async function handleCancelTask(id: number) { Modal.confirm({ title: '确认取消', content: '确认要取消该升级任务吗?', @@ -88,20 +88,20 @@ const handleCancelTask = async (id: number) => { } }, }); -}; +} /** 刷新数据 */ -const refresh = async () => { +async function refresh() { await getTaskList(); emit('success'); -}; +} /** 分页变化 */ -const handleTableChange = (pagination: any) => { +function handleTableChange(pagination: any) { queryParams.pageNo = pagination.current; queryParams.pageSize = pagination.pageSize; getTaskList(); -}; +} /** 表格列配置 */ const columns: TableColumnsType = [ diff --git a/apps/web-antd/src/views/iot/product/category/data.ts b/apps/web-antd/src/views/iot/product/category/data.ts index 57c5b311d..16806ac00 100644 --- a/apps/web-antd/src/views/iot/product/category/data.ts +++ b/apps/web-antd/src/views/iot/product/category/data.ts @@ -1,19 +1,10 @@ import type { VbenFormSchema } from '#/adapter/form'; import type { VxeTableGridOptions } from '#/adapter/vxe-table'; -import type { IotProductCategoryApi } from '#/api/iot/product/category'; import { DICT_TYPE } from '@vben/constants'; -import { handleTree } from '@vben/utils'; - -import { message } from 'ant-design-vue'; import { z } from '#/adapter/form'; -import { - deleteProductCategory, - getProductCategoryPage, - getSimpleProductCategoryList, -} from '#/api/iot/product/category'; -import { $t } from '#/locales'; +import { getSimpleProductCategoryList } from '#/api/iot/product/category'; /** 新增/修改产品分类的表单 */ export function useFormSchema(): VbenFormSchema[] { @@ -160,35 +151,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { }, ]; } - -/** 删除分类 */ -export async function handleDeleteCategory( - row: IotProductCategoryApi.ProductCategory, - onSuccess?: () => void, -) { - const hideLoading = message.loading({ - content: $t('ui.actionMessage.deleting', [row.name]), - duration: 0, - }); - try { - await deleteProductCategory(row.id!); - message.success($t('ui.actionMessage.deleteSuccess', [row.name])); - onSuccess?.(); - } finally { - hideLoading(); - } -} - -/** 查询分类列表 */ -export async function queryProductCategoryList({ page }: any, formValues: any) { - const data = await getProductCategoryPage({ - pageNo: page.currentPage, - pageSize: page.pageSize, - ...formValues, - }); - // 转换为树形结构 - return { - ...data, - list: handleTree(data.list, 'id', 'parentId'), - }; -} diff --git a/apps/web-antd/src/views/iot/product/category/index.vue b/apps/web-antd/src/views/iot/product/category/index.vue index 82ec7a8c7..7344bd5de 100644 --- a/apps/web-antd/src/views/iot/product/category/index.vue +++ b/apps/web-antd/src/views/iot/product/category/index.vue @@ -3,16 +3,18 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { IotProductCategoryApi } from '#/api/iot/product/category'; import { Page, useVbenModal } from '@vben/common-ui'; +import { handleTree } from '@vben/utils'; + +import { message } from 'ant-design-vue'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; +import { + deleteProductCategory, + getProductCategoryPage, +} from '#/api/iot/product/category'; import { $t } from '#/locales'; -import { - handleDeleteCategory, - queryProductCategoryList, - useGridColumns, - useGridFormSchema, -} from './data'; +import { useGridColumns, useGridFormSchema } from './data'; import Form from './modules/ProductCategoryForm.vue'; defineOptions({ name: 'IoTProductCategory' }); @@ -39,7 +41,17 @@ function handleEdit(row: IotProductCategoryApi.ProductCategory) { /** 删除分类 */ async function handleDelete(row: IotProductCategoryApi.ProductCategory) { - await handleDeleteCategory(row, handleRefresh); + const hideLoading = message.loading({ + content: $t('ui.actionMessage.deleting', [row.name]), + duration: 0, + }); + try { + await deleteProductCategory(row.id!); + message.success($t('ui.actionMessage.deleteSuccess', [row.name])); + handleRefresh(); + } finally { + hideLoading(); + } } const [Grid, gridApi] = useVbenVxeGrid({ @@ -57,7 +69,18 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, proxyConfig: { ajax: { - query: queryProductCategoryList, + query: async ({ page }, formValues) => { + const data = await getProductCategoryPage({ + pageNo: page.currentPage, + pageSize: page.pageSize, + ...formValues, + }); + // 转换为树形结构 + return { + ...data, + list: handleTree(data.list, 'id', 'parentId'), + }; + }, }, }, rowConfig: { diff --git a/apps/web-antd/src/views/iot/product/product/data.ts b/apps/web-antd/src/views/iot/product/product/data.ts index cd12f38b2..68fd51b46 100644 --- a/apps/web-antd/src/views/iot/product/product/data.ts +++ b/apps/web-antd/src/views/iot/product/product/data.ts @@ -5,17 +5,10 @@ import { ref } from 'vue'; import { DICT_TYPE } from '@vben/constants'; import { getDictOptions } from '@vben/hooks'; -import { downloadFileFromBlobPart } from '@vben/utils'; - -import { message } from 'ant-design-vue'; import { z } from '#/adapter/form'; import { getSimpleProductCategoryList } from '#/api/iot/product/category'; -import { - deleteProduct, - exportProduct, - getProductPage, -} from '#/api/iot/product/product'; +import { getProductPage } from '#/api/iot/product/product'; /** 新增/修改产品的表单 */ export function useFormSchema(): VbenFormSchema[] { @@ -208,38 +201,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { ]; } -/** 加载产品分类列表 */ -export async function loadCategoryList() { - return await getSimpleProductCategoryList(); -} - -/** 获取分类名称 */ -export function getCategoryName(categoryList: any[], categoryId: number) { - const category = categoryList.find((c: any) => c.id === categoryId); - return category?.name || '未分类'; -} - -/** 删除产品 */ -export async function handleDeleteProduct(row: any, onSuccess?: () => void) { - const hideLoading = message.loading({ - content: `正在删除 ${row.name}...`, - duration: 0, - }); - try { - await deleteProduct(row.id); - message.success(`删除 ${row.name} 成功`); - onSuccess?.(); - } finally { - hideLoading(); - } -} - -/** 导出产品 */ -export async function handleExportProduct(searchParams: any) { - const data = await exportProduct(searchParams); - downloadFileFromBlobPart({ fileName: '产品列表.xls', source: data }); -} - /** 查询产品列表 */ export async function queryProductList({ page }: any, searchParams: any) { return await getProductPage({ diff --git a/apps/web-antd/src/views/iot/product/product/index.vue b/apps/web-antd/src/views/iot/product/product/index.vue index 959700428..ad056a811 100644 --- a/apps/web-antd/src/views/iot/product/product/index.vue +++ b/apps/web-antd/src/views/iot/product/product/index.vue @@ -6,21 +6,20 @@ import { useRouter } from 'vue-router'; import { Page, useVbenModal } from '@vben/common-ui'; import { IconifyIcon } from '@vben/icons'; +import { downloadFileFromBlobPart } from '@vben/utils'; -import { Button, Card, Image, Input, Space } from 'ant-design-vue'; +import { Button, Card, Image, Input, message, Space } from 'ant-design-vue'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; +import { + deleteProduct, + exportProduct, + getProductPage, +} from '#/api/crm/product'; +import { getSimpleProductCategoryList } from '#/api/iot/product/category'; import { $t } from '#/locales'; -import { - getCategoryName, - handleDeleteProduct, - handleExportProduct, - loadCategoryList, - queryProductList, - useGridColumns, - useImagePreview, -} from './data'; +import { useGridColumns, useImagePreview } from './data'; // @ts-ignore import ProductCardView from './modules/ProductCardView.vue'; import ProductForm from './modules/ProductForm.vue'; @@ -47,14 +46,15 @@ const [FormModal, formModalApi] = useVbenModal({ }); // 加载产品分类列表 -const loadCategories = async () => { - categoryList.value = await loadCategoryList(); -}; +async function loadCategories() { + categoryList.value = await getSimpleProductCategoryList(); +} // 获取分类名称 -const getCategoryNameByValue = (categoryId: number) => { - return getCategoryName(categoryList.value, categoryId); -}; +function getCategoryNameByValue(categoryId: number) { + const category = categoryList.value.find((c: any) => c.id === categoryId); + return category?.name || '未分类'; +} /** 搜索 */ function handleSearch() { @@ -84,7 +84,8 @@ function handleRefresh() { /** 导出表格 */ async function handleExport() { - await handleExportProduct(searchParams.value); + const data = await exportProduct(searchParams.value); + await downloadFileFromBlobPart({ fileName: '产品列表.xls', source: data }); } /** 打开产品详情 */ @@ -116,7 +117,17 @@ function handleEdit(row: any) { /** 删除产品 */ async function handleDelete(row: any) { - await handleDeleteProduct(row, handleRefresh); + const hideLoading = message.loading({ + content: `正在删除 ${row.name}...`, + duration: 0, + }); + try { + await deleteProduct(row.id); + message.success(`删除 ${row.name} 成功`); + handleRefresh(); + } finally { + hideLoading(); + } } const [Grid, gridApi] = useVbenVxeGrid({ @@ -129,7 +140,13 @@ const [Grid, gridApi] = useVbenVxeGrid({ keepSource: true, proxyConfig: { ajax: { - query: ({ page }) => queryProductList({ page }, searchParams.value), + query: async ({ page }) => { + return await getProductPage({ + pageNo: page.currentPage, + pageSize: page.pageSize, + ...searchParams.value, + }); + }, }, }, rowConfig: { @@ -336,6 +353,6 @@ onMounted(() => { } .ant-image-preview-operations { - background: rgba(0, 0, 0, 0.7) !important; + background: rgb(0 0 0 / 70%) !important; } diff --git a/apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue b/apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue index 7be74188a..124428fb9 100644 --- a/apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue +++ b/apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue @@ -48,13 +48,13 @@ const queryParams = ref({ }); // 获取分类名称 -const getCategoryName = (categoryId: number) => { +function getCategoryName(categoryId: number) { const category = props.categoryList.find((c: any) => c.id === categoryId); return category?.name || '未分类'; -}; +} // 获取产品列表 -const getList = async () => { +async function getList() { loading.value = true; try { const data = await getProductPage({ @@ -66,23 +66,23 @@ const getList = async () => { } finally { loading.value = false; } -}; +} // 处理页码变化 -const handlePageChange = (page: number, pageSize: number) => { +function handlePageChange(page: number, pageSize: number) { queryParams.value.pageNo = page; queryParams.value.pageSize = pageSize; getList(); -}; +} // 获取设备类型颜色 -const getDeviceTypeColor = (deviceType: number) => { +function getDeviceTypeColor(deviceType: number) { const colors: Record = { 0: 'blue', 1: 'green', }; return colors[deviceType] || 'default'; -}; +} onMounted(() => { getList(); @@ -131,9 +131,9 @@ defineExpose({
产品分类 - {{ - getCategoryName(item.categoryId) - }} + + {{ getCategoryName(item.categoryId) }} +
产品类型 @@ -152,9 +152,9 @@ defineExpose({
产品标识 - {{ - item.productKey || item.id - }} + + {{ item.productKey || item.id }} +
@@ -236,44 +236,44 @@ defineExpose({ .product-card-view { .product-card { height: 100%; - transition: all 0.3s ease; + overflow: hidden; border: 1px solid #e8e8e8; border-radius: 8px; - overflow: hidden; + transition: all 0.3s ease; &:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border-color: #d9d9d9; + box-shadow: 0 4px 16px rgb(0 0 0 / 8%); transform: translateY(-2px); } :deep(.ant-card-body) { - height: 100%; display: flex; flex-direction: column; + height: 100%; } // 产品图标 .product-icon { - width: 48px; - height: 48px; display: flex; + flex-shrink: 0; align-items: center; justify-content: center; + width: 48px; + height: 48px; + color: white; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; - color: white; - flex-shrink: 0; } // 产品标题 .product-title { - font-size: 16px; - font-weight: 600; - color: #1f2937; - line-height: 1.5; overflow: hidden; text-overflow: ellipsis; + font-size: 16px; + font-weight: 600; + line-height: 1.5; + color: #1f2937; white-space: nowrap; } @@ -290,16 +290,16 @@ defineExpose({ } .info-label { - color: #6b7280; - margin-right: 8px; flex-shrink: 0; + margin-right: 8px; + color: #6b7280; } .info-value { - color: #1f2937; - font-weight: 500; overflow: hidden; text-overflow: ellipsis; + font-weight: 500; + color: #1f2937; white-space: nowrap; &.text-primary { @@ -308,15 +308,15 @@ defineExpose({ } .product-key { - font-family: 'Courier New', monospace; - font-size: 12px; - color: #374151; display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; + font-family: 'Courier New', monospace; + font-size: 12px; vertical-align: middle; + color: #374151; + white-space: nowrap; cursor: help; } @@ -328,15 +328,15 @@ defineExpose({ // 3D 图标 .product-3d-icon { - width: 100px; - height: 100px; display: flex; + flex-shrink: 0; align-items: center; justify-content: center; + width: 100px; + height: 100px; + color: #667eea; background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border-radius: 8px; - flex-shrink: 0; - color: #667eea; } // 按钮组 @@ -344,8 +344,8 @@ defineExpose({ display: flex; gap: 8px; padding-top: 12px; - border-top: 1px solid #f0f0f0; margin-top: auto; + border-top: 1px solid #f0f0f0; .action-btn { flex: 1; @@ -359,8 +359,8 @@ defineExpose({ border-color: #1890ff; &:hover { - background: #1890ff; color: white; + background: #1890ff; } } @@ -369,8 +369,8 @@ defineExpose({ border-color: #52c41a; &:hover { - background: #52c41a; color: white; + background: #52c41a; } } @@ -379,8 +379,8 @@ defineExpose({ border-color: #722ed1; &:hover { - background: #722ed1; color: white; + background: #722ed1; } } diff --git a/apps/web-antd/src/views/iot/product/product/modules/components/ProductTableSelect.vue b/apps/web-antd/src/views/iot/product/product/modules/components/ProductTableSelect.vue index 82b7de179..8e95973b3 100644 --- a/apps/web-antd/src/views/iot/product/product/modules/components/ProductTableSelect.vue +++ b/apps/web-antd/src/views/iot/product/product/modules/components/ProductTableSelect.vue @@ -5,8 +5,9 @@ import type { IotProductApi } from '#/api/iot/product/product'; import { reactive, ref } from 'vue'; import { useVbenModal } from '@vben/common-ui'; +import { IconifyIcon } from '@vben/icons'; -import { message } from 'ant-design-vue'; +import { Button, Form, Input, message } from 'ant-design-vue'; import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { getProductPage } from '#/api/iot/product/product'; @@ -101,24 +102,24 @@ const [Grid, gridApi] = useVbenVxeGrid({ }); // 打开选择器 -const open = async () => { +async function open() { selectedProducts.value = []; selectedRowKeys.value = []; modalApi.open(); gridApi.reload(); -}; +} // 搜索 -const handleSearch = () => { +function handleSearch() { gridApi.reload(); -}; +} // 重置搜索 -const handleReset = () => { +function handleReset() { queryParams.name = ''; queryParams.productKey = ''; gridApi.reload(); -}; +} // 确认选择 async function handleConfirm() { @@ -151,40 +152,40 @@ defineExpose({ open });