refactor: Feedback index

src/stores/Feedback.js

@@ -4,7 +4,66 @@ import { prepareUrl, groupBy } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
 
-class Feedback {
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+const { HT_HOST } = config;
+
+const initialState = {
+  loading: false,
+  search_date_start: dayjs().subtract(2, 'M').startOf('M'),
+  search_date_end: dayjs().endOf('M'),
+  feedbackList: [], //反馈列表
+  feedbackImages: [], //图片列表
+  feedbackRate: [], //反馈评分
+  feedbackReview: [], //站外好评
+  feedbackInfo: [], //地接社反馈的信息
+  feedbackServiceRate: {}, // 反馈评分, 含细项的版本
+};
+
+const useFeedbackStore = create(
+  devtools((set, get) => ({
+    ...initialState,
+    reset: () => set(initialState),
+
+    setState: (state) => set(state),
+    setLoading: (loading) => set({ loading }),
+    setFeedbackList: (feedbackList) => set({ feedbackList }),
+    setFeedbackImages: (feedbackImages) => set({ feedbackImages }),
+    setFeedbackRate: (feedbackRate) => set({ feedbackRate }),
+    setFeedbackReview: (feedbackReview) => set({ feedbackReview }),
+    setFeedbackInfo: (feedbackInfo) => set({ feedbackInfo }),
+    setFeedbackServiceRate: (feedbackServiceRate) => set({ feedbackServiceRate }),
+
+    async fetchFeedbackList(veisn, EOI_Group_Name, TimeStart, TimeEnd) {
+      const { setLoading, setFeedbackList } = get();
+      const searchParams = {
+        PageSize: 2000,
+        PageIndex: 1,
+        PageTotal: 0,
+        veisn: veisn,
+        GruopNo: EOI_Group_Name,
+        TimeStart,
+        TimeEnd,
+      };
+      const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/SearchFeedbackList`, searchParams);
+      const _result = errcode !== 0 ? [] : Result;
+      // 反馈表, 有新版就用新版
+      const allGroup = groupBy(_result, 'EOI_GRI_SN');
+      const filterV = Object.keys(allGroup).reduce((r, gsn) => {
+        const v2 = allGroup[gsn].filter((v) => v.EOI_CII_SN);
+        const withAllGuide = allGroup[gsn].map((row) => ({ ...row, CityGuide: row.GriName_AsJOSN.map((rg) => `${rg.GuideCity}: ${rg.GuideName}`).join(' ; ') }));
+        return r.concat(v2.length > 0 ? v2 : withAllGuide);
+      }, []);
+      setFeedbackList(filterV);
+      setLoading(false);
+    },
+  }))
+);
+
+export default useFeedbackStore;
+
+export class Feedback {
 	constructor(root) {
 		makeAutoObservable(this, { rootStore: false });
 		this.root = root;
@@ -198,4 +257,4 @@ class Feedback {
 	}
 }
 
-export default Feedback;
+// export default Feedback;

src/stores/Invoice.js

@@ -6,7 +6,39 @@ import { json } from "react-router-dom";
 import * as config from "@/config";
 import dayjs from "dayjs";
 
-class Invoice {
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+
+const initialState = {
+  invoiceList: [], //账单列表
+  invoicekImages: [], //图片列表
+  invoiceGroupInfo: {}, //账单详细
+  invoiceProductList: [], //账单细项
+  invoiceZDDetail: [], //报账信息
+  invoiceCurrencyList: [], //币种
+  invoicePicList: [], //多账单图片列表数组
+  invoiceFormData: { info_money: 0, info_Currency: '', info_date: '' }, //存储form数据
+
+  invoicePaid: [], //支付账单列表
+  invoicePaidDetail: [], //每期账单详细
+
+  loading: false,
+};
+const useInvoiceStore = create(
+  devtools((set, get) => ({
+    // 初始化状态
+    ...initialState,
+    reset: () => set(initialState),
+
+    setInvoiceList: (invoiceList) => set(() => ({ invoiceList })),
+
+  }))
+);
+
+export default useInvoiceStore;
+
+export class Invoice {
 	constructor(root) {
 		makeAutoObservable(this, { rootStore: false });
 		this.root = root;
@@ -367,4 +399,4 @@ class Invoice {
 	];
 }
 
-export default Invoice;
+// export default Invoice;

src/stores/Root.js

@@ -1,8 +1,8 @@
 import { makeAutoObservable } from "mobx";
 import { Reservation } from "./Reservation";
-import Feedback from "./Feedback";
+import {Feedback} from "./Feedback";
 import { Auth } from "./Auth";
-import Invoice from "./Invoice";
+import {Invoice} from "./Invoice";
 import Report from "./Report";
 
 class Root {

src/views/feedback/Index.jsx

@@ -1,52 +1,57 @@
-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 = [
   {
-		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}
+      </NavLink>
+    ),
   },
   {
-		title: "Arrival Date",
+    title: 'Arrival Date',
-		dataIndex: "EOI_Date",
+    dataIndex: 'EOI_Date',
     render: (text, record) => text,
     sorter: (a, b) => b.EOI_Date - a.EOI_Date,
   },
   {
-		title: "Cities",
+    title: 'Cities',
-		key: "City",
+    key: 'City',
-		dataIndex: "City",
+    dataIndex: 'City',
   },
   {
-		title: "Guides",
+    title: 'Guides',
-		dataIndex: "CityGuide",
+    dataIndex: 'CityGuide',
   },
   {
-		title: "Post Survey",
+    title: 'Post Survey',
-		dataIndex: "Average",
+    dataIndex: 'Average',
-		render: (text, record) => `${(record.EOI_CII_SN && record.feedback_Filled ? "✔" : "")} ${(text ? text : "")}`, //为0显示为空
+    render: (text, record) => `${record.EOI_CII_SN && record.feedback_Filled ? '✔' : ''} ${text ? text : ''}`, //为0显示为空
     sorter: (a, b) => b.Average - a.Average,
   },
   {
-		title: "External Reviews",
+    title: 'External Reviews',
-		dataIndex: "TAGood",
+    dataIndex: 'TAGood',
   },
 ];
 
 function Index() {
+  const { t } = useTranslation();
   const { notification } = App.useApp();
   const { feedbackStore, authStore } = useStore();
-	const { feedbackList, search_date_start, search_date_end } = feedbackStore;
+
-	const [referenceNo, onNumberChange] = useState("");
+  const [feedbackList, fetchFeedbackList] = useFeedbackStore((state) => [state.feedbackList, state.fetchFeedbackList]);
-	const showTotal = total => `Total ${feedbackList.length} items`;
+
+  const showTotal = (total) => `Total ${total} items`;
 
   useEffect(() => {
     // feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59").catch(ex => {
@@ -61,44 +66,24 @@ function Index() {
   }, []);
 
   return (
-		<Space direction="vertical" style={{ width: "100%" }}>
+    <Space direction='vertical' style={{ width: '100%' }}>
-			<Title level={3}></Title>
+      <SearchForm
-
+        initialValue={{
-			<Row gutter={16}>
+          dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
-				<Col md={24} lg={6} xxl={4}>
+        }}
-					<Input
+        defaultValue={{
-						placeholder="Reference Number"
+          shows: ['referenceNo', 'dates'],
-						onChange={e => {
+          fieldProps: {
-							onNumberChange(e.target.value);
+            dates: { label: t('group:ArrivalDate') },
+          },
+        }}
+        onSubmit={(err, formVal, filedsVal) => {
+          fetchFeedbackList(authStore.login.travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.endtime);
         }}
       />
-				</Col>
-				<Col md={24} lg={8} xxl={6}>
-					<Space direction="horizontal">
-						Arrival Date
-						<DatePicker.RangePicker
-							format={config.DATE_FORMAT}
-							allowClear={false}
-							style={{ width: "100%" }}
-							value={[search_date_start, search_date_end]}
-							presets={usePresets()}
-							onChange={feedbackStore.onDateRangeChange}
-						/>
-					</Space>
-				</Col>
-				<Col md={24} lg={4} xxl={4}>
-					<Button
-						type="primary"
-						loading={feedbackStore.loading}
-						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>
-				</Col>
-			</Row>
-			<Title level={3}></Title>
       <Row>
         <Col md={24} lg={24} xxl={24}>
-					<Table bordered={true} columns={feedbackListColumns} dataSource={toJS(feedbackList)} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
+          <Table bordered={true} columns={feedbackListColumns} dataSource={feedbackList} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
         </Col>
         <Col md={24} lg={24} xxl={24}></Col>
       </Row>
@@ -106,4 +91,4 @@ function Index() {
   );
 }
 
-export default observer(Index);
+export default Index;