refactor: Feedback index
Lei OT
1 year ago
parent
66c7ba9574
commit
65eaf11d42
@ -1,109 +1,94 @@
|
|||||||
import { NavLink } from "react-router-dom";
|
import { NavLink } from 'react-router-dom';
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect } from 'react';
|
||||||
import { observer } from "mobx-react";
|
import { Row, Col, Space, Table, App } from 'antd';
|
||||||
import { toJS } from "mobx";
|
import { useStore } from '@/stores/StoreContext.js';
|
||||||
import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, App } from "antd";
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useStore } from "@/stores/StoreContext.js";
|
import SearchForm from '@/components/SearchForm';
|
||||||
import * as config from "@/config";
|
import useFeedbackStore from '@/stores/Feedback';
|
||||||
import usePresets from '@/hooks/usePresets';
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
const { Title } = Typography;
|
|
||||||
const feedbackListColumns = [
|
const feedbackListColumns = [
|
||||||
{
|
{
|
||||||
title: "Ref.No",
|
title: 'Ref.No',
|
||||||
dataIndex: "EOI_Group_Name",
|
dataIndex: 'EOI_Group_Name',
|
||||||
render: (text, record) => <NavLink to={record.EOI_CII_SN ? `/feedback/${record.EOI_GRI_SN}/${record.EOI_CII_SN}/${record.EOI_Group_Name}` : `/feedback/${record.EOI_GRI_SN}/${record.EOI_Group_Name}`}>{text}</NavLink>,
|
render: (text, record) => (
|
||||||
},
|
<NavLink to={record.EOI_CII_SN ? `/feedback/${record.EOI_GRI_SN}/${record.EOI_CII_SN}/${record.EOI_Group_Name}` : `/feedback/${record.EOI_GRI_SN}/${record.EOI_Group_Name}`}>
|
||||||
{
|
{text}
|
||||||
title: "Arrival Date",
|
</NavLink>
|
||||||
dataIndex: "EOI_Date",
|
),
|
||||||
render: (text, record) => text,
|
},
|
||||||
sorter: (a, b) => b.EOI_Date - a.EOI_Date,
|
{
|
||||||
},
|
title: 'Arrival Date',
|
||||||
{
|
dataIndex: 'EOI_Date',
|
||||||
title: "Cities",
|
render: (text, record) => text,
|
||||||
key: "City",
|
sorter: (a, b) => b.EOI_Date - a.EOI_Date,
|
||||||
dataIndex: "City",
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Cities',
|
||||||
title: "Guides",
|
key: 'City',
|
||||||
dataIndex: "CityGuide",
|
dataIndex: 'City',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Post Survey",
|
title: 'Guides',
|
||||||
dataIndex: "Average",
|
dataIndex: 'CityGuide',
|
||||||
render: (text, record) => `${(record.EOI_CII_SN && record.feedback_Filled ? "✔" : "")} ${(text ? text : "")}`, //为0显示为空
|
},
|
||||||
sorter: (a, b) => b.Average - a.Average,
|
{
|
||||||
},
|
title: 'Post Survey',
|
||||||
{
|
dataIndex: 'Average',
|
||||||
title: "External Reviews",
|
render: (text, record) => `${record.EOI_CII_SN && record.feedback_Filled ? '✔' : ''} ${text ? text : ''}`, //为0显示为空
|
||||||
dataIndex: "TAGood",
|
sorter: (a, b) => b.Average - a.Average,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'External Reviews',
|
||||||
|
dataIndex: 'TAGood',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
function Index() {
|
function Index() {
|
||||||
const { notification } = App.useApp();
|
const { t } = useTranslation();
|
||||||
const { feedbackStore, authStore } = useStore();
|
const { notification } = App.useApp();
|
||||||
const { feedbackList, search_date_start, search_date_end } = feedbackStore;
|
const { feedbackStore, authStore } = useStore();
|
||||||
const [referenceNo, onNumberChange] = useState("");
|
|
||||||
const showTotal = total => `Total ${feedbackList.length} items`;
|
|
||||||
|
|
||||||
useEffect(() => {
|
const [feedbackList, fetchFeedbackList] = useFeedbackStore((state) => [state.feedbackList, state.fetchFeedbackList]);
|
||||||
// feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59").catch(ex => {
|
|
||||||
// // notification.error({
|
|
||||||
// // message: `Error`,
|
|
||||||
// // description: ex.message,
|
|
||||||
// // placement: 'top',
|
|
||||||
// // duration: 4,
|
|
||||||
// // });
|
|
||||||
// console.log(ex.message);
|
|
||||||
// });
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
const showTotal = (total) => `Total ${total} items`;
|
||||||
<Space direction="vertical" style={{ width: "100%" }}>
|
|
||||||
<Title level={3}></Title>
|
|
||||||
|
|
||||||
<Row gutter={16}>
|
useEffect(() => {
|
||||||
<Col md={24} lg={6} xxl={4}>
|
// feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59").catch(ex => {
|
||||||
<Input
|
// // notification.error({
|
||||||
placeholder="Reference Number"
|
// // message: `Error`,
|
||||||
onChange={e => {
|
// // description: ex.message,
|
||||||
onNumberChange(e.target.value);
|
// // placement: 'top',
|
||||||
}}
|
// // duration: 4,
|
||||||
/>
|
// // });
|
||||||
</Col>
|
// console.log(ex.message);
|
||||||
<Col md={24} lg={8} xxl={6}>
|
// });
|
||||||
<Space direction="horizontal">
|
}, []);
|
||||||
Arrival Date
|
|
||||||
<DatePicker.RangePicker
|
return (
|
||||||
format={config.DATE_FORMAT}
|
<Space direction='vertical' style={{ width: '100%' }}>
|
||||||
allowClear={false}
|
<SearchForm
|
||||||
style={{ width: "100%" }}
|
initialValue={{
|
||||||
value={[search_date_start, search_date_end]}
|
dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
|
||||||
presets={usePresets()}
|
}}
|
||||||
onChange={feedbackStore.onDateRangeChange}
|
defaultValue={{
|
||||||
/>
|
shows: ['referenceNo', 'dates'],
|
||||||
</Space>
|
fieldProps: {
|
||||||
</Col>
|
dates: { label: t('group:ArrivalDate') },
|
||||||
<Col md={24} lg={4} xxl={4}>
|
},
|
||||||
<Button
|
}}
|
||||||
type="primary"
|
onSubmit={(err, formVal, filedsVal) => {
|
||||||
loading={feedbackStore.loading}
|
fetchFeedbackList(authStore.login.travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.endtime);
|
||||||
onClick={() => feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59")}>
|
}}
|
||||||
Search
|
/>
|
||||||
</Button>
|
<Row>
|
||||||
</Col>
|
<Col md={24} lg={24} xxl={24}>
|
||||||
</Row>
|
<Table bordered={true} columns={feedbackListColumns} dataSource={feedbackList} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
|
||||||
<Title level={3}></Title>
|
</Col>
|
||||||
<Row>
|
<Col md={24} lg={24} xxl={24}></Col>
|
||||||
<Col md={24} lg={24} xxl={24}>
|
</Row>
|
||||||
<Table bordered={true} columns={feedbackListColumns} dataSource={toJS(feedbackList)} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
|
</Space>
|
||||||
</Col>
|
);
|
||||||
<Col md={24} lg={24} xxl={24}></Col>
|
|
||||||
</Row>
|
|
||||||
</Space>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default observer(Index);
|
export default Index;
|
||||||
|
|||||||
Loading…
Reference in New Issue