Skip to content

C
center-book
提交 a44985f9 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

refactor: 重构意见反馈页面

上级 228cd6c0
隐藏空白字符变更
内嵌 并排
正在显示 包含 33 行增加 和 256 行删除
src/pages/setting/feedback/index.jsx
浏览文件 @ a44985f9
import React, { useEffect, useState } from 'react';
import {
Table,
Input,
Button,
Row,
Col,
Space,
DatePicker,
Popover,
Drawer,
Form,
Modal,
Image,
} from 'antd';
import { Input, DatePicker, Popover } from 'antd';
import AppList from '@/components/AppList';
import { getList } from './api';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
import PaginationCom from '@/common/Pagination';
import { getList } from '../point-management/request';
import dayjs from 'dayjs';
import reload from '@/assets/images/icon/reload.png';
import reset from '@/assets/images/icon/reset.png';
import filter from '@/assets/images/icon/filter.png';
import coupon from '@/assets/images/icon/coupon.png';
import TableCom from '@/common/TableCom/index';
const FeedBack = () => {
const [data, setData] = useState([]);
const [page_size, setpage_size] = useState(10);
const [page, setPage] = useState(1);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(true);
const [isEdit, setIsEdit] = useState(false);
const [delMoadal, setDelModal] = useState(false);
const [form] = Form.useForm();
const [filterObj, setfilterObj] = useState({
name: '',
phone: '',
start_time: '',
end_time: '',
});
const [dateTime, setDateTime] = useState('');
const handleReset = () => {
setfilterObj({
name: '',
phone: '',
start_time: '',
end_time: '',
});
setDateTime('');
init();
};
const onClose = () => {
setIsEdit(false);
};
const submitForm = (obj) => {
console.log(obj);
};
const delSuccess = () => {
setDelModal(false);
};
// 过滤
const handleFilter = (flag, val) => {
if (flag == 'startandend') {
let val2 = val || [];
filterObj['start_time'] = parseInt(
new Date(dayjs(val2[0]).format('YYYY-MM-DD') + ' 00:00:00').getTime() / 1000,
);
const endDate = new Date(dayjs(val2[1])).getDate();
const endTime = parseInt(
new Date(dayjs(val2[1]).format('YYYY-MM-') + endDate + ' 23:59:59').getTime() / 1000,
);
filterObj['end_time'] = endTime;
setDateTime(val);
if (!val2.length) {
delete filterObj['start_time'];
delete filterObj['end_time'];
}
} else {
filterObj[flag] = val;
}
for (const key in filterObj) {
if (!filterObj[key]) {
delete filterObj[key];
export default function FeedBack() {
const remote = {
request: getList,
beforeRequest(params) {
const { time, ...rest } = params;
if (time) {
rest.start_time = new Date(time[0]).getTime() / 1000;
rest.end_time = new Date(time[1]).getTime() / 1000;
}
}
setfilterObj({ ...filterObj });
if (!val) init(filterObj);
};
const init = async (obj = {}) => {
setLoading(true);
const { total, list } = await getList({ page, page_size, ...obj });
setTotal(total);
setData(list);
setLoading(false);
return rest;
},
};
const filters = [
{
label: '用户名称',
name: 'name',
element: <Input placeholder='请输入用户名称' allowClear />,
},
{
label: '手机号',
name: 'phone',
element: <Input placeholder='请输入手机号' allowClear />,
},
{
label: '反馈时间',
name: 'time',
element: <RangePicker allowClear />,
},
];
const columns = [
{
title: 'ID',
......@@ -141,168 +80,6 @@ const FeedBack = () => {
),
},
];
return (
<div className='classify'>
<Row justify={'space-between'}>
<Col className='form-devices-inline'>
<Form layout='inline'>
<Form.Item label='用户名称'>
<Input
autoComplete='off'
allowClear
placeholder='请输入用户名称'
value={filterObj.name}
onChange={(ev) => handleFilter('name', ev.target.value)}
id='name'
></Input>
</Form.Item>
<Form.Item label='手机号'>
<Input
autoComplete='off'
allowClear
placeholder='请输入手机号'
value={filterObj.phone}
onChange={(ev) => handleFilter('phone', ev.target.value)}
id='phone'
></Input>
</Form.Item>
<Form.Item label='反馈时间'>
<RangePicker
id='time'
value={dateTime}
onChange={(ev) => handleFilter('startandend', ev)}
/>
</Form.Item>
<Space>
<Button
type='primary'
ghost
icon={
<span
style={{
display: 'inline-block',
width: '11px',
height: '10px',
pointerEvents: 'none',
}}
>
<Image src={reset} />
</span>
}
onClick={handleReset}
>
重置
</Button>
<Button
type='primary'
icon={
<span
style={{
display: 'inline-block',
width: '13px',
height: '12px',
pointerEvents: 'none',
}}
>
<Image src={filter} />
</span>
}
ghost
onClick={() => {
setPage(1);
Object.values(filterObj).some((item) => item) ? init(filterObj) : init();
}}
>
筛选
</Button>
<Button
type='primary'
ghost
icon={
<span
style={{
display: 'inline-block',
width: '10px',
height: '12px',
pointerEvents: 'none',
}}
>
<Image src={reload} />
</span>
}
onClick={() =>
Object.values(filterObj).some((item) => item) ? init(filterObj) : init()
}
>
刷新
</Button>
</Space>
</Form>
</Col>
</Row>
<br />
{TableCom({ columns, loading, data })}
<Modal
mask={false}
centered
open={delMoadal}
onOk={delSuccess}
onCancel={() => setDelModal(false)}
footer={(_, { OkBtn, CancelBtn }) => {
return (
<Row justify={'center'} className='delModal' style={{ marginBottom: '30px' }}>
<Space size={20}>
<CancelBtn className='cancel' />
<OkBtn className='true' />
</Space>
</Row>
);
}}
okText='确认'
>
<p style={{ textAlign: 'center', padding: '30px 0 18px', fontSize: 16 }}>
分类将永久删除，是否继续?
</p>
</Modal>
<br />
<PaginationCom
total={total}
page_size={page_size}
setpage_size={setpage_size}
page={page}
init={init}
setPage={setPage}
filterObj={filterObj}
/>
<Drawer placement='right' onClose={onClose} open={isEdit} mask={false}>
<Form form={form} onFinish={submitForm} labelCol={{ span: 5 }}>
<Form.Item label='版本号' rules={[{ required: true, message: '请输入版本号' }]}>
<Input autoComplete='off' placeholder='请输入版本号'></Input>
</Form.Item>
<Form.Item label='下载地址' rules={[{ required: true, message: '请输入下载地址' }]}>
<Input autoComplete='off' placeholder='请输入下载地址'></Input>
</Form.Item>
<Form.Item label='更新介绍' rules={[{ required: true, message: '请输入更新介绍' }]}>
<TextArea
placeholder='请输入更新介绍'
autoSize={{
minRows: 3,
maxRows: 5,
}}
></TextArea>
</Form.Item>
<Form.Item wrapperCol={{ offset: 5, span: 16 }} style={{ textAlign: 'center' }}>
<Space>
<Button className='cancel'>取消</Button>
<Button className='submit' htmlType='submit'>
提交
</Button>
</Space>
</Form.Item>
</Form>
</Drawer>
</div>
);
};
export default FeedBack;
return <AppList {...{ remote, filters, columns }}></AppList>;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论