Skip to content

Commit

Permalink
更新页面
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhoubichuan
zhoubichuan committed Dec 31, 2023
1 parent 1c6a839 commit 292b3a6
Show file tree
Hide file tree
Showing 23 changed files with 4,581 additions and 168 deletions.
26 changes: 26 additions & 0 deletions config/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,19 @@
path: '/list/table-list4',
component: './list/table-list4',
},
{
name: '路由页面',
icon: 'smile',
path: '/list/page',
redirect: '/list/page/1',
},
{
name: '',
icon: 'smile',
path: '/list/page/:id',
menuRender: false, // 不渲染菜单
component: './list/list',
},
{
name: 'list10',
icon: 'smile',
Expand Down Expand Up @@ -209,6 +222,19 @@
menuRender: false, // 不渲染菜单
component: './list/list',
},
{
name: 'list27',
icon: 'smile',
path: '/list/author',
redirect: '/list/author/1',
},
{
name: '',
icon: 'smile',
path: '/list/author/:id',
menuRender: false, // 不渲染菜单
component: './list/list',
},
{
name: 'list6',
icon: 'smile',
Expand Down
25 changes: 24 additions & 1 deletion src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import RightContent from '@/components/RightContent';
import Footer from '@/components/Footer';
import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
import { BookOutlined, LinkOutlined } from '@ant-design/icons';

// import meuns from '../config/routes';
// import { list as listRequest } from './pages/list/search/service';
const isDev = process.env.NODE_ENV === 'development';
const loginPath = '/user/login';

Expand Down Expand Up @@ -163,5 +164,27 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
// 自定义 403 页面
// unAccessible: <div>unAccessible</div>,
...initialState?.settings,
// menu: {
// params: initialState,
// request: async (params, defaultMenuData) => {
// const result:any = await listRequest('page/1', {}, {});
// result.data.forEach((item: any) => {
// // meuns[3].routes?.push({
// // name: item.name,
// // icon: 'smile',
// // path: '/list/'+item.type,
// // redirect: '/list/'+item.type+'/1',
// // });
// meuns[3].routes?.push({
// name: '',
// icon: 'smile',
// path: `/list/${item.type}/:id`,
// menuRender: false, // 不渲染菜单
// component: './list/list',
// });
// });
// return meuns;
// },
// },
};
};
1 change: 1 addition & 0 deletions src/locales/zh-CN/menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export default {
'menu.list.list5': '模板列表',
'menu.list.list6': '数据列表',
'menu.list.list7': '字段列表',
'menu.list.list27': '用户列表',
'menu.list.list8': '类型列表',
'menu.list.list9': '后端列表',
'menu.list.list10': '项目列表',
Expand Down
12 changes: 11 additions & 1 deletion src/pages/list/card-list/data.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export type Member = {
export type CardListItemDataType = {
id: string;
owner: string;
author: string;
name: string;
images: array;
cover: string;
status: 'normal' | 'exception' | 'active' | 'success';
Expand All @@ -27,3 +27,13 @@ export type CardListItemDataType = {
content: string;
members: Member[];
};
export type TableListItem = {
id: string;
updatedAt: Date;
createdAt: Date;
type: string;
ip: string;
value: string;
latitude: string;
longitude: string;
};
49 changes: 47 additions & 2 deletions src/pages/list/card-list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,16 @@ import { queryFakeList } from './service';
import type { CardListItemDataType } from './data.d';
import styles from './style.less';
import classNames from 'classnames';
import type { TableListItem } from './data';
import { useState } from 'react';
import { list as listRequest, getTemplate } from '../search/service';
import SliderPart from '../list/SliderPart';
const { Paragraph } = Typography;

const CardList = () => {
const [currentRow, setCurrentRow] = useState<TableListItem>();
const [templateData, setTemplateData] = useState<any>([]);
const [showDetail, setShowDetail] = useState<boolean>(false);
const { data, loading } = useRequest(() => {
return queryFakeList({
current: 1,
Expand All @@ -17,6 +24,29 @@ const CardList = () => {
});
const list: any = data || [];
const nullData: Partial<CardListItemDataType> = {};
const viewDetail = async (name: any) => {
let template: any = [];
const result = await getTemplate('1', 'data');
template = result.data;
let data2: any = [];
const result2 = await listRequest('data/1', {}, { author: name });
data2 = result2.data;
setCurrentRow(data2);
for (let i = 0; i < template.length; i++) {
const item = template[i];
Object.keys(item).forEach((field: any) => {
if (typeof item[field] === 'string') {
if (item[field].includes('{}')) {
template[i][field] = false;
} else if (item[field].includes('{')) {
template[i][field] = JSON.parse(item[field]);
}
}
});
}
setTemplateData(template);
setShowDetail(true);
};
return (
<PageContainer className={classNames('pro-container', styles['pro-container'])}>
<div className={styles.cardList}>
Expand All @@ -40,11 +70,16 @@ const CardList = () => {
<Card
hoverable
className={styles.card}
actions={[<a key="option1">编辑</a>, <a key="option2">查看详情</a>]}
actions={[
<a key="option1">编辑</a>,
<a key="option2" onClick={() => viewDetail(item.name)}>
查看详情
</a>,
]}
>
<Card.Meta
avatar={<img alt="" className={styles.cardAvatar} src={item.images[0]} />}
title={<a>{item.author}</a>}
title={<a>{item.name}</a>}
description={
<Paragraph className={styles.item} ellipsis={{ rows: 3 }}>
{item.descript}
Expand All @@ -65,6 +100,16 @@ const CardList = () => {
}}
/>
</div>
{showDetail && templateData && (
<SliderPart
template={templateData}
data={currentRow}
onClose={() => {
setCurrentRow(undefined);
setShowDetail(false);
}}
/>
)}
</PageContainer>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/pages/list/card-list/service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export async function queryFakeList(params: {
current: number;
pageSize: number;
}): Promise<{ data: { list: CardListItemDataType[] } }> {
return request('/api/list/data/1', {
return request('/api/list/author/1', {
params,
});
}
97 changes: 49 additions & 48 deletions src/pages/list/list/CreatePart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
} from '@ant-design/pro-form';
import { addList } from './service';
import type { TableListItem } from './data';
import classNames from 'classnames';
import styles from './index.less';
export type CreatePartProps = {
onVisibleChange: (e?: any) => void;
onFinish: (e?: any) => void;
Expand Down Expand Up @@ -50,61 +52,60 @@ const CreatePart: React.FC<CreatePartProps> = (props) => {
visible={createModalVisible}
onVisibleChange={onVisibleChange}
onFinish={async (value) => {
if (value.images) {
value.images = [value.images];
}
const success = await handleAdd(value as TableListItem);
if (success) {
onFinish();
handleModalVisible(false);
}
}}
>
{template
.filter((item: any) => item.create && JSON.stringify(item.create) !== '{}')
.map((item: any) => {
let form = <ProFormText {...item.create} label={item.title} name={item.dataIndex} />;
switch (item.create ? item.create.type || '' : '') {
case 'input':
form = <ProFormText {...item.create} label={item.title} name={item.dataIndex} />;
break;
case 'textArea':
form = (
<ProFormTextArea
{...item.create}
label={item.title}
name={item.dataIndex}
colProps={{ span: 24 }}
/>
);
break;
case 'select':
form = <ProFormSelect {...item.create} label={item.title} name={item.dataIndex} />;
break;
case 'radio':
form = (
<ProFormRadio.Group {...item.create} label={item.title} name={item.dataIndex} />
);
break;
case 'switch':
form = <ProFormSwitch {...item.create} label={item.title} name={item.dataIndex} />;
// case 'image':
// form = (
// <ProFormUploadButton
// fieldProps={{
// name: 'file',
// listType: 'picture-card',
// }}
// action="/upload.do"
// {...item.create}
// label={item.title}
// name={item.dataIndex}
// />
// );
// break;
}
return form;
})}
<div className={classNames('dialog-part', styles['dialog-part'])}>
{template
.filter((item: any) => item.create && JSON.stringify(item.create) !== '{}')
.map((item: any) => {
let form = <ProFormText {...item.create} label={item.title} name={item.dataIndex} />;
switch (item.create ? item.create.type || '' : '') {
case 'input':
form = <ProFormText {...item.create} label={item.title} name={item.dataIndex} />;
break;
case 'textArea':
form = (
<ProFormTextArea
{...item.create}
label={item.title}
name={item.dataIndex}
colProps={{ span: 24 }}
/>
);
break;
case 'select':
form = <ProFormSelect {...item.create} label={item.title} name={item.dataIndex} />;
break;
case 'radio':
form = (
<ProFormRadio.Group {...item.create} label={item.title} name={item.dataIndex} />
);
break;
case 'switch':
form = <ProFormSwitch {...item.create} label={item.title} name={item.dataIndex} />;
// case 'image':
// form = (
// <ProFormUploadButton
// fieldProps={{
// name: 'file',
// listType: 'picture-card',
// }}
// action="/upload.do"
// {...item.create}
// label={item.title}
// name={item.dataIndex}
// />
// );
// break;
}
return form;
})}
</div>
</ModalForm>
);
};
Expand Down
55 changes: 40 additions & 15 deletions src/pages/list/list/SliderPart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,33 @@ const SliderPart: React.FC<SliderPartProps> = (props) => {
render: (text: any) => {
if (item.view && item.view.type === 'image') {
if (Array.isArray(text)) {
return text.map((i: any) => <Image height={300} src={i} />);
return text.map((i: any) => {
if (i.includes('.mp4')) {
return (
<video
controls
style={{ objectFit: 'contain', maxHeight: '300px', display: 'inline-block' }}
>
<source src={i} type="video/mp4" />
</video>
);
} else {
return <Image style={{ objectFit: 'contain', maxHeight: '300px' }} src={i} />;
}
});
} else {
return <Image height={300} src={text} />;
if (text.includes('.mp4')) {
return <video style={{ objectFit: 'contain', maxHeight: '300px' }} src={text} />;
} else {
return <Image style={{ objectFit: 'contain', maxHeight: '300px' }} src={text} />;
}
}
}
if (item.view && item.view.type === 'video') {
if (Array.isArray(text)) {
return text.map((i: any) => <video height={300} src={i} />);
} else {
return <video height={300} src={text} />;
}
}
if (item.view && item.view.type === 'time') {
Expand All @@ -42,26 +66,27 @@ const SliderPart: React.FC<SliderPartProps> = (props) => {

return (
<Drawer
title={data?.id}
title={data[0]?.id}
destroyOnClose
closable={true}
closeIcon={<CloseOutlined />}
width={'80%'}
open={true}
onClose={onClose}
>
{data?.id && (
<ProDescriptions<TableListItem>
column={2}
request={async () => ({
data: data || {},
})}
params={{
id: data?.id,
}}
columns={descriptions as ProDescriptionsItemProps<TableListItem>[]}
/>
)}
{Array.isArray(data) &&
data.map((d) => (
<ProDescriptions<TableListItem>
column={2}
request={async () => ({
data: d || {},
})}
params={{
id: d?.id,
}}
columns={descriptions as ProDescriptionsItemProps<TableListItem>[]}
/>
))}
</Drawer>
);
};
Expand Down
Loading

0 comments on commit 292b3a6

Please sign in to comment.