feat(产品管理): 修改产品管理Card

src/components/ProTableCard/CardItems/device.tsx

@@ -47,34 +47,5 @@ export default (props: DeviceCardProps) => {
         </div>
       </div>
     </TableCard>
-    // <Card style={{ width: '100%' }} cover={null} actions={props.actions}>
-    //   <div className={'pro-table-card-item'}>
-    //     <div className={'card-item-avatar'}>
-    //       <Avatar size={props.avatarSize || 64} src={props.photoUrl} />
-    //     </div>
-    //     <div className={'card-item-body'}>
-    //       <div className={'card-item-header'}>
-    //         <span className={'card-item-header-name ellipsis'}>{props.name}</span>
-    //         <BadgeStatus
-    //           status={props.state.value}
-    //           text={props.state.text}
-    //           statusNames={{
-    //             online: StatusColorEnum.success,
-    //             offline: StatusColorEnum.error,
-    //             notActive: StatusColorEnum.processing,
-    //           }}
-    //         />
-    //       </div>
-    //       <div className={'card-item-content'}>
-    //         <label>设备类型：</label>
-    //         <span className={'ellipsis'}>{props.deviceType ? props.deviceType.text : '--'}</span>
-    //       </div>
-    //       <div className={'card-item-content'}>
-    //         <label>产品名称：</label>
-    //         <span className={'ellipsis'}>{props.productName || '--'}</span>
-    //       </div>
-    //     </div>
-    //   </div>
-    // </Card>
   );
 };

src/components/ProTableCard/CardItems/product.tsx

@@ -1,62 +1,54 @@
-import { Avatar, Card } from 'antd';
 import React from 'react';
 import type { ProductItem } from '@/pages/device/Product/typings';
-import { BadgeStatus } from '@/components';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
-import { ModelEnum } from '@/pages/device/Product/Detail';
-import { Link, useIntl } from 'umi';
+import { useIntl } from 'umi';
+import { TableCard } from '@/components';
+import '@/style/common.less';
 import '../index.less';
 
 export interface ProductCardProps extends ProductItem {
+  detail?: React.ReactNode;
   actions?: React.ReactNode[];
   avatarSize?: number;
 }
+const defaultImage = require('/public/images/device-type-3-big.png');
 
 export default (props: ProductCardProps) => {
   const intl = useIntl();
-
   return (
-    <Card style={{ width: '100%' }} cover={null} actions={props.actions}>
+    <TableCard
+      detail={props.detail}
+      actions={props.actions}
+      status={props.state}
+      statusText={intl.formatMessage({
+        id: `pages.system.tenant.assetInformation.${props.state ? 'published' : 'unpublished'}`,
+        defaultMessage: '已发布',
+      })}
+      statusNames={{
+        0: StatusColorEnum.error,
+        1: StatusColorEnum.processing,
+      }}
+    >
       <div className={'pro-table-card-item'}>
         <div className={'card-item-avatar'}>
-          <Avatar size={props.avatarSize || 64} src={props.photoUrl} />
+          <img width={88} height={88} src={props.photoUrl || defaultImage} alt={''} />
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
             <span className={'card-item-header-name ellipsis'}>{props.name}</span>
-            <BadgeStatus
-              status={props.state}
-              text={intl.formatMessage({
-                id: `pages.system.tenant.assetInformation.${
-                  props.state ? 'published' : 'unpublished'
-                }`,
-                defaultMessage: '已发布',
-              })}
-              statusNames={{
-                0: StatusColorEnum.error,
-                1: StatusColorEnum.processing,
-              }}
-            />
-          </div>
-          <div className={'card-item-content'}>
-            <label>设备类型：</label>
-            <span className={'ellipsis'}>{props.deviceType ? props.deviceType.text : '--'}</span>
           </div>
           <div className={'card-item-content'}>
-            <label>接入方式：</label>
-            <span className={'ellipsis'}>
-              <Link
-                to={`${getMenuPathByParams(MENUS_CODE['device/Product/Detail'], props.id)}?type=${
-                  ModelEnum.access
-                }`}
-              >
-                {props.transportProtocol || '--'}
-              </Link>
-            </span>
+            <div>
+              <label>设备类型</label>
+              <div className={'ellipsis'}>{props.deviceType ? props.deviceType.text : '--'}</div>
+            </div>
+            <div>
+              <label>接入方式</label>
+              <div className={'ellipsis'}>{props.transportProtocol || '--'}</div>
+            </div>
           </div>
         </div>
       </div>
-    </Card>
+    </TableCard>
   );
 };

src/components/ProTableCard/TableCard.tsx

@@ -35,16 +35,16 @@ function getAction(actions: React.ReactNode[]) {
 export default (props: TableCardProps) => {
   const [maskShow, setMaskShow] = useState(false);
 
-  const handleStatusColor = (): StatusColorType | undefined => {
-    if ('statusNames' in props && props.status) {
-      return props.statusNames![props.status];
+  const handleStatusColor = (data: TableCardProps): StatusColorType | undefined => {
+    if ('statusNames' in data && data.status !== undefined) {
+      return data.statusNames![data.status];
     }
     return StatusColorEnum.default;
   };
 
   const statusNode =
     props.showStatus === false ? null : (
-      <div className={classNames('card-state', handleStatusColor())}>
+      <div className={classNames('card-state', handleStatusColor(props))}>
         <div className={'card-state-content'}>
           <BadgeStatus
             status={props.status !== undefined ? props.status : ''}

src/pages/device/Product/index.tsx

@@ -343,7 +343,98 @@ const Product = observer(() => {
             <Button style={{ marginLeft: 12 }}>导入</Button>
           </Upload>,
         ]}
-        cardRender={(record) => <ProductCard {...record} actions={tools(record)} />}
+        cardRender={(record) => (
+          <ProductCard
+            {...record}
+            detail={
+              <div
+                style={{ fontSize: 18, padding: 8 }}
+                onClick={() => {
+                  productModel.current = record;
+                  history.push(
+                    `${getMenuPathByParams(MENUS_CODE['device/Product/Detail'], record.id)}`,
+                  );
+                }}
+              >
+                <EyeOutlined />
+              </div>
+            }
+            actions={[
+              <Button
+                key="edit"
+                onClick={() => {
+                  setCurrent(record);
+                  setVisible(true);
+                }}
+                type={'link'}
+                style={{ padding: 0 }}
+              >
+                <EditOutlined />
+                {intl.formatMessage({
+                  id: 'pages.data.option.edit',
+                  defaultMessage: '编辑',
+                })}
+              </Button>,
+              <Button type={'link'} key={'download'} style={{ padding: 0 }}>
+                <DownloadOutlined
+                  onClick={async () => {
+                    downloadObject(
+                      record,
+                      intl.formatMessage({
+                        id: 'pages.device.product',
+                        defaultMessage: '产品',
+                      }),
+                    );
+                    message.success('操作成功');
+                  }}
+                />
+                {intl.formatMessage({
+                  id: 'pages.data.option.download',
+                  defaultMessage: '下载',
+                })}
+              </Button>,
+              <Popconfirm
+                key={'state'}
+                title={intl.formatMessage({
+                  id: `pages.data.option.${record.state ? 'disabled' : 'enabled'}.tips`,
+                  defaultMessage: '是否启用?',
+                })}
+                onConfirm={() => {
+                  changeDeploy(record.id, record.state ? 'undeploy' : 'deploy');
+                }}
+              >
+                <Button style={{ padding: 0 }} type={'link'}>
+                  {record.state ? <StopOutlined /> : <PlayCircleOutlined />}
+                  {intl.formatMessage({
+                    id: `pages.data.option.${record.state ? 'disabled' : 'enabled'}`,
+                    defaultMessage: record.state ? '禁用' : '启用',
+                  })}
+                </Button>
+              </Popconfirm>,
+              <Popconfirm
+                key="delete"
+                title={intl.formatMessage({
+                  id:
+                    record.state === 1
+                      ? 'pages.device.productDetail.deleteTip'
+                      : 'page.table.isDelete',
+                  defaultMessage: '是否删除?',
+                })}
+                onConfirm={async () => {
+                  if (record.state === 0) {
+                    await deleteItem(record.id);
+                  } else {
+                    message.error('已发布的产品不能进行删除操作');
+                  }
+                }}
+              >
+                <Button type={'link'} style={{ padding: 0 }}>
+                  <DeleteOutlined />
+                </Button>
+              </Popconfirm>,
+            ]}
+          />
+        )}
       />
       <Save
         model={!current ? 'add' : 'edit'}