lj
/
vogocm-web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add shape list page

dev
powersir 1 year ago
parent
6d73761ab0
commit
bb7f65115f
8 changed files with 8404 additions and 8 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +41
    -0
      mock/findDiySpecimenPage.json
  2. +202
    -0
      mock/findSpecimensByPrototypeId.json
  3. +7902
    -0
      mock/productListPage.json
  4. +0
    -0
      mock/selectAllMaterialClassify.json
  5. +1
    -0
      package.json
  6. +52
    -4
      src/pages/custom/product/material/index.tsx
  7. +131
    -4
      src/pages/custom/product/shape/index.tsx
  8. +75
    -0
      src/pages/custom/product/shape/shape.data.ts

+ 41
- 0
mock/findDiySpecimenPage.json View File

@@ -0,0 +1,41 @@
[
{
"id": 89,
"createTime": "2023-08-21 11:43:46",
"spuCode": "1-28X7LF",
"categoryId": 1272,
"prototypeName": "TEST男装",
"createId": 1,
"categoryName": "男士短裤",
"createName": "admin",
"oneImgUrl": "https://test.vogocm.com:9010/eshop/eshop_img/2023/8/21/20230821114346A056.jpg",
"specimenNumber": 1,
"dictDetails": []
},
{
"id": 88,
"createTime": "2023-08-21 10:43:22",
"spuCode": "1-12EX35",
"categoryId": 1266,
"prototypeName": "男装",
"createId": 1,
"categoryName": "男士西装",
"createName": "admin",
"oneImgUrl": "https://test.vogocm.com:9010/eshop/eshop_img/2023/8/21/20230821104322A043.jpg",
"specimenNumber": 4,
"dictDetails": []
},
{
"id": 79,
"createTime": "2023-08-03 17:12:01",
"spuCode": "2-89HO5A",
"categoryId": 4851,
"prototypeName": "kfc-test",
"createId": 2,
"categoryName": "短袖T恤",
"createName": "陈相荣✨",
"oneImgUrl": "https://test.vogocm.com:9010/eshop/eshop_img/2023/8/03/20230803171204A003.jpg",
"specimenNumber": 7,
"dictDetails": []
}
]

+ 202
- 0
mock/findSpecimensByPrototypeId.json View File

@@ -0,0 +1,202 @@
[
{
"id": 23,
"prototypeId": 88,
"sdParamId": 3,
"styleProductId": 117788,
"product": {
"id": 117788,
"spuCode": "1-81PF1T",
"classifyId": 12,
"sourceType": 4,
"productStatus": 2,
"creatorId": 1,
"createTime": "2023-08-21 10:52:02",
"base": {
"productName": "男装"
},
"classify": {
"id": 12
},
"attrs": [],
"productImgs": [
{
"imgId": 1990256,
"imgUrl": "https://test.vogocm.com:9010/eshop/eshop_img/2023/8/21/20230821104322A043.jpg"
}
],
"productSkus": [],
"creatorName": "admin"
},
"sdParamEmplate": {
"id": 3,
"createTime": "2023-07-10 15:47:38",
"prompt": "Grass with a small barn in background and blue sky，house，Front direction, front position, photos, bright colors, far scenes.Head-up shooting, high definition，focus",
"negativePrompt": "characters, hands, limbs, low quality, text, clutter，nsfw, lowres,bad anatomy,bad hands,text,error,missing fingers,extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature,watermark,username，human，pedestrian，sun",
"type": 1,
"maskBlur": 0,
"inpaintFullResPadding": 0,
"steps": 45,
"styles": "DPM++2M SDE Karras",
"imageCfgScale": 1,
"cfgScale": 12,
"module": "canny",
"model": "control_v11p_sd15_canny_fp16 [b18e0966]",
"inpaintingFill": 0,
"denoisingStrength": "",
"chinaName": "农村",
"isDelete": 2,
"niter": 2
}
},
{
"id": 24,
"prototypeId": 88,
"sdParamId": 5,
"styleProductId": 117789,
"product": {
"id": 117789,
"spuCode": "1-35XWIM",
"classifyId": 12,
"sourceType": 4,
"productStatus": 2,
"creatorId": 1,
"createTime": "2023-08-21 10:52:02",
"base": {
"productName": "男装"
},
"classify": {
"id": 12
},
"attrs": [],
"productImgs": [
{
"imgId": 1990256,
"imgUrl": "https://test.vogocm.com:9010/eshop/eshop_img/2023/8/21/20230821104322A043.jpg"
}
],
"productSkus": [],
"creatorName": "admin"
},
"sdParamEmplate": {
"id": 5,
"createTime": "2023-07-10 15:47:38",
"prompt": "strange shaped mountains and rocks, in the style of marvel，Front direction, front position, photos, bright colors, far scenes.Head-up shooting, high definition，focus",
"negativePrompt": "characters, hands, limbs, low quality, text, clutter，nsfw, lowres,bad anatomy,bad hands,text,error,missing fingers,extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature,watermark,username，human，pedestrian",
"type": 1,
"maskBlur": 0,
"inpaintFullResPadding": 0,
"steps": 45,
"styles": "DPM++2M SDE Karras",
"imageCfgScale": 1,
"cfgScale": 13,
"module": "canny",
"model": "control_v11p_sd15_canny_fp16 [b18e0966]",
"inpaintingFill": 0,
"denoisingStrength": "",
"chinaName": "山脉",
"isDelete": 2,
"niter": 2
}
},
{
"id": 25,
"prototypeId": 88,
"sdParamId": 7,
"styleProductId": 117889,
"product": {
"id": 117889,
"spuCode": "1-31FOZN",
"classifyId": 12,
"sourceType": 4,
"productStatus": 2,
"creatorId": 1,
"createTime": "2023-08-21 11:16:28",
"base": {
"productName": "男装"
},
"classify": {
"id": 12
},
"attrs": [],
"productImgs": [
{
"imgId": 1990256,
"imgUrl": "https://test.vogocm.com:9010/eshop/eshop_img/2023/8/21/20230821104322A043.jpg"
}
],
"productSkus": [],
"creatorName": "admin"
},
"sdParamEmplate": {
"id": 7,
"createTime": "2023-07-10 15:47:38",
"prompt": "White fence, brick pavement，Front direction, front position, photos, bright colors, far scenes.Head-up shooting, high definition",
"negativePrompt": "characters, hands, limbs, low quality, text, clutter，nsfw, lowres,bad anatomy,bad hands,text,error,missing fingers,extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature,watermark,username,blurry，tennis racket",
"type": 1,
"maskBlur": 0,
"inpaintFullResPadding": 0,
"steps": 45,
"styles": "DPM++2M SDE Karras",
"imageCfgScale": 1,
"cfgScale": 13,
"module": "canny",
"model": "control_v11p_sd15_canny_fp16 [b18e0966]",
"inpaintingFill": 0,
"denoisingStrength": "",
"chinaName": "巷子",
"isDelete": 2,
"niter": 2
}
},
{
"id": 26,
"prototypeId": 88,
"sdParamId": 18,
"styleProductId": 117890,
"product": {
"id": 117890,
"spuCode": "1-57F3LS",
"classifyId": 12,
"sourceType": 4,
"productStatus": 2,
"creatorId": 1,
"createTime": "2023-08-21 11:36:59",
"base": {
"productName": "男装"
},
"classify": {
"id": 12
},
"attrs": [],
"productImgs": [
{
"imgId": 1990256,
"imgUrl": "https://test.vogocm.com:9010/eshop/eshop_img/2023/8/21/20230821104322A043.jpg"
}
],
"productSkus": [],
"creatorName": "admin"
},
"sdParamEmplate": {
"id": 18,
"createTime": "2023-07-10 16:12:54",
"prompt": "Next to the railway station, maple leaf forest，Front direction, front position, photos, bright colors, far scenes.Head-up shooting, high definition，focus",
"negativePrompt": "characters, hands, limbs, low quality, text, clutter，nsfw, lowres,bad anatomy,bad hands,text,error,missing fingers,extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature,watermark,username，human，pedestrian",
"type": 1,
"maskBlur": 0,
"inpaintFullResPadding": 0,
"steps": 45,
"styles": "DPM++2M SDE Karras",
"imageCfgScale": 1,
"cfgScale": 12,
"module": "canny",
"model": "control_v11p_sd15_canny_fp16 [b18e0966]",
"inpaintingFill": 0,
"denoisingStrength": "",
"chinaName": "轨道",
"isDelete": 2,
"niter": 2
}
}
]

+ 7902
- 0
mock/productListPage.json
File diff suppressed because it is too large
View File


+ 0
- 0
mock/selectAllMaterialClassify.json View File


+ 1
- 0
package.json View File

@@ -24,6 +24,7 @@
"antd-img-crop": "^4.12.2", "antd-img-crop": "^4.12.2",
"await-to-js": "^3.0.0", "await-to-js": "^3.0.0",
"axios": "^1.4.0", "axios": "^1.4.0",
"classnames": "^2.3.2",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"i18next": "^22.4.15", "i18next": "^22.4.15",
"jsencrypt": "^3.3.2", "jsencrypt": "^3.3.2",


+ 52
- 4
src/pages/custom/product/material/index.tsx View File

@@ -5,6 +5,7 @@ import { IconBuguang } from '@/assets/icons/buguang';
import React, { useState } from 'react'; import React, { useState } from 'react';
import type { TableRowSelection } from 'antd/es/table/interface'; import type { TableRowSelection } from 'antd/es/table/interface';
import mData from '../../../../../mock/findMaterialPage.json' import mData from '../../../../../mock/findMaterialPage.json'
import { PlusOutlined } from '@ant-design/icons';




// { // {
@@ -76,6 +77,52 @@ const TablePage: React.FC = () => {
dataIndex: ['classify', 'classifyName'], dataIndex: ['classify', 'classifyName'],
key: 'classify', key: 'classify',
width: 80, width: 80,
filters: [
{
text: '全部素材',
value: '1',
},
{
text: '卡通',
value: '2',
children: [
{
text: '海贼王',
value: '20',
},
{
text: '火影忍者',
value: '21',
},
{
text: '死神',
value: '22',
},
],
},
{
text: '风景',
value: '3',
},
{
text: '插图',
value: '4',
},
{
text: '模型',
value: '5',
},
{
text: '图标',
value: '6',
},
{
text: '其他',
value: '52',
},
],
filterMode: 'tree',
filterSearch: false,
}, },
{ {
title:'描述', title:'描述',
@@ -185,12 +232,13 @@ const TablePage: React.FC = () => {




return ( return (
<div>
<div className="dark:bg-[rgb(33,41,70)] rounded-md">
<Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent'
<div className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'>
<div className="py-[8px]">
<Button className="ml-5" type='primary' size='large' icon={<PlusOutlined/>}> 新增素材 </Button>
</div>
<Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent'
pagination={{ position: ['bottomRight'] }} pagination={{ position: ['bottomRight'] }}
/> />
</div>
</div> </div>
); );
}; };


+ 131
- 4
src/pages/custom/product/shape/index.tsx View File

@@ -1,9 +1,136 @@
import { Empty } from 'antd';
import { Space, Table, Button, Image, Divider } from 'antd';
import type { TableColumnsType } from 'antd';
import { t } from '@/utils/i18n';
import { IconBuguang } from '@/assets/icons/buguang';
import React, { useState } from 'react';
import mData from '../../../../../mock/findDiySpecimenPage.json'
import shapeData from '../../../../../mock/findSpecimensByPrototypeId.json'
import { PlusOutlined } from '@ant-design/icons';
import type { ShapeProperty, Shape, ProductImage } from './shape.data'

const ShapePage: React.FC = () => {
const columns: TableColumnsType<ShapeProperty> = [
{
title: '示例图',
dataIndex: 'oneImgUrl',
key: 'oneImgUrl',
render: (value: string) => (
<div className='flex justify-center'>
<Image className='bg-[gold] align-middle flex items-center justify-center w-[40px] h-[40px]' src={value}/>
</div>
),
align: 'center',
width: 130,
},
{
title: 'SPU编码',
dataIndex: 'spuCode',
key: 'spuCode',
width: 150,
},
{
title: '样机名称',
dataIndex: 'prototypeName',
key: 'prototypeName',
width: 150,
},
{
title:'类目',
key: 'categoryName',
dataIndex: 'categoryName'
},
{
title: '款式数量',
key: 'specimenNumber',
dataIndex: 'specimenNumber',
width: 100,
render:(value: number) => (<>{value}</>)
},
{
title: '创建人',
dataIndex: 'createName',
key: 'createName',
width: 150,
},
{
title:'创建时间',
key: 'createTime',
dataIndex: 'createTime',
width: 200,
},
{
title: t("QkOmYwne" /* 操作 */),
key: 'action',
render: (_, record) => (
<Space size="middle" split={(
<Divider type='vertical' />
)}>
<a
onClick={() => {

}}>
添加款式
</a>
</Space>
),
width: 150,
},
];

const expandedColumnsRender = (item: ShapeProperty) => {
const expandedColumns: TableColumnsType<Shape> = [
{ title: '序号', key: 'index', align: 'center', render:(data, _ ,index)=>(<>{index}</>)},
{ title: '主图', dataIndex: ['product', 'productImgs'], key: 'productImgs', width: 100, render: (value: ProductImage[]) => (
value.length > 0 && <Image className='bg-[gold] align-middle flex items-center justify-center w-[40px] h-[40px]' src={value[0].imgUrl}/>
)},
{ title: 'SPU', dataIndex: ['product', 'spuCode'], key: 'spuCode' },
{ title: '商品标题', dataIndex: ['product', 'base', 'productName'], key: 'productName' },
{ title: '背景词', dataIndex: ['sdParamEmplate','chinaName'], key: 'chinaName' },
{ title: '商品状态', dataIndex: 'upgradeNum', key: 'status' },
{ title: '数据来源', dataIndex: ['product', 'sourceType'], key: 'sourceType', render: (value: number) => (<>diy导入</>)},
{ title: '创建人', dataIndex: ['product', 'creatorName'], key: 'creatorName' },
{
title: t("QkOmYwne" /* 操作 */),
key: 'operation',
render: () => (
<Space size="middle">
<a>审核</a>
<a>编辑</a>
<a>删除</a>
</Space>
),
},
];
const data: Array<Shape> = shapeData as Array<Shape>;
return <Table columns={expandedColumns} dataSource={data} pagination={false} />;
}



const data: Array<ShapeProperty> = mData as Array<ShapeProperty>;

const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
console.log('selectedRowKeys changed: ', newSelectedRowKeys);
setSelectedRowKeys(newSelectedRowKeys);
};



const CustomMade = () => {
return ( return (
<Empty />
<div className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'>
<div className="py-[8px]">
<Button className="ml-5" type='primary' size='large' icon={<PlusOutlined/>}> 新增款式 </Button>
</div>
<Table rowKey="id"
scroll={{ x: true }}
columns={columns}
expandable={{ expandedRowRender: expandedColumnsRender, defaultExpandedRowKeys: ['0'] }}
dataSource={data}
className='bg-transparent'
pagination={{ position: ['bottomRight'] }}/>
</div>
); );
}; };


export default CustomMade;
export default ShapePage;

+ 75
- 0
src/pages/custom/product/shape/shape.data.ts View File

@@ -0,0 +1,75 @@

export interface ShapeProperty {
id: number;
createTime: string;
spuCode: string;
categoryId: number;
createId: number;
categoryName: string;
createName: string;
oneImgUrl: string;
specimenNumber: number;
dictDetails: string[];
}


export interface Shape {
id: number;
prototypeId: number;
sdParamId: number;
styleProductId: number;
product: Product;
sdParamEmplate: SdParamEmplate
}


export interface ProductBase {
productName: string;
}

export interface ProductClassify {
id: number;
}

export interface ProductImage {
imgId: number;
imgUrl:string;
}

export interface Product {
id: number;
spuCode: string;
classifyId: number;
sourceType: number;
productStatus: number;
creatorId: number;
createTime: string;
base: ProductBase;
classify: ProductClassify;
attrs: string[];
productImgs: ProductImage[];
productSkus: string[];
creatorName: string;
}


export interface SdParamEmplate {
id: number;
createTime: string;
prompt: string;
negativePrompt: string;
type: number;
maskBlur: number;
inpaintFullResPadding: number;
step?: number;
styles: string;
imageCfgScale: number;
cfgScale: number;
module: string;
model: string;
inpaintingFill: number;
denoisingStrength: string;
chinaName: string;
isDelete: number;
niter: number;
}

Write Preview
Loading…
Cancel
Save