feat:完成团计划全部迁移 zustand;

增加分页中英文;
feature/price_manager
Jimmy Liow 1 year ago
parent 5913970154
commit bff5197765

@ -18,6 +18,7 @@
"Download": "Download",
"Upload": "Upload",
"preview": "Preview",
"Total": "Total",
"Login": "Login",
"Username": "Username",

@ -18,6 +18,7 @@
"Download": "下载",
"Upload": "上传",
"preview": "预览",
"Total": "总数",
"Login": "登录",
"Username": "账号",

@ -1,4 +1,3 @@
import { makeAutoObservable, runInAction } from "mobx"
import { create } from 'zustand'
import { fetchJSON, postForm } from '@/utils/request'
import { HT_HOST } from "@/config"
@ -211,88 +210,65 @@ const useReservationStore = create((set, get) => ({
return json
}
});
}
}))
},
setupCityGuide: (cityId, guideId) => {
const { selectedReservation } = get()
const { userId, travelAgencyId } = usingStorage()
const formData = new FormData()
formData.append('GRI_SN', selectedReservation.reservationId)
formData.append('VEI_SN', travelAgencyId)
formData.append('TGI_SN', guideId)
formData.append('CII_SN', cityId)
formData.append('GetDate', selectedReservation.reservationDate)
formData.append('LMI_SN', userId)
const postUrl = HT_HOST + '/service-cusservice/PTAddGuide'
export default useReservationStore
return postForm(postUrl, formData)
.then(json => {
if (json.errcode != 0) {
throw new Error(json.errmsg + ': ' + json.errcode)
}
});
},
export class Reservation {
constructor(root) {
makeAutoObservable(this, { rootStore: false });
this.root = root;
}
updateReservationGuide() {
updateReservationGuide: () => {
const { selectedReservation } = get()
const { travelAgencyId } = usingStorage()
const fetchUrl = prepareUrl(HT_HOST + '/service-cusservice/PTGetCityGuide')
.append('VEI_SN', this.root.authStore.login.travelAgencyId)
.append('GRI_SN', this.selectedReservation.reservationId)
.append('VEI_SN', travelAgencyId)
.append('GRI_SN', selectedReservation.reservationId)
.append('LGC', 1)
.append("token", this.root.authStore.login.token)
.build();
return fetchJSON(fetchUrl)
.then(json => {
if (json.errcode == 0) {
const reservationGuide = (json?.Result??[]).filter((data) => {
return data.TGI_SN != 0;
return data.TGI_SN != 0
}).map((data) => {
return data.GuideName;
}).join(',');
return data.GuideName
}).join(',')
runInAction(() => {
this.selectedReservation.guide = reservationGuide;
});
return reservationGuide;
} else {
throw new Error(json.errmsg + ': ' + json.errcode);
}
});
}
selectedReservation.guide = reservationGuide
})
setupCityGuide(cityId, guideId) {
let formData = new FormData();
formData.append('GRI_SN', this.selectedReservation.reservationId);
formData.append('VEI_SN', this.root.authStore.login.travelAgencyId);
formData.append('TGI_SN', guideId);
formData.append('CII_SN', cityId);
formData.append('GetDate', this.selectedReservation.reservationDate);
formData.append('LMI_SN', this.root.authStore.login.userId);
formData.append("token", this.root.authStore.login.token);
const postUrl = HT_HOST + '/service-cusservice/PTAddGuide';
set((state) => ({
selectedReservation: {
...state.selectedReservation,
guide: reservationGuide,
},
}))
return postForm(postUrl, formData)
.then(json => {
if (json.errcode != 0) {
throw new Error(json.errmsg + ': ' + json.errcode);
return reservationGuide
} else {
throw new Error(json.errmsg + ': ' + json.errcode)
}
});
}
updatePropertyValue(name, value) {
runInAction(() => {
this[name] = value;
});
}
cityList = [];
selectedReservation = null;
selectedConfirmation = null;
arrivalDateRange = [];
referenceNo = '';
reservationList = [];
reservationDetail = {
referenceNumber: '', arrivalDate: '', tourGuide: ''
};
reservationPage = {
current: 1,
size: 10,
total: 0
})
}
}))
confirmationList = [
];
}
export default useReservationStore

@ -1,11 +1,9 @@
import { makeAutoObservable } from "mobx";
import { Reservation } from "./Reservation";
import { Auth } from "./Auth";
import {Invoice} from "./Invoice";
class Root {
constructor() {
this.reservationStore = new Reservation(this);
this.authStore = new Auth(this);
this.invoiceStore = new Invoice(this);
makeAutoObservable(this);

@ -147,9 +147,9 @@ function App() {
items: [...[
{ label: <Link to='/account/change-password'>{t('ChangePassword')}</Link>, key: '0' },
{ label: <Link to='/account/profile'>{t('Profile')}</Link>, key: '1' },
{ label: <Link to='/account/management'>{t('account:management.tile')}</Link>, key: '1' },
{ label: <Link to='/account/management'>{t('account:management.tile')}</Link>, key: '3' },
{ type: 'divider' },
{ label: <Link to='/logout'>{t('Logout')}</Link>, key: '3' },
{ label: <Link to='/logout'>{t('Logout')}</Link>, key: '4' },
],
{ type: 'divider' },
{ label: <>v{BUILD_VERSION}</>, key: 'BUILD_VERSION' },

@ -1,42 +1,37 @@
import { Outlet, Link, useHref, useLocation } from "react-router-dom";
import { useEffect } from "react";
import { observer } from "mobx-react";
import { Layout, Menu, ConfigProvider, theme, Typography, Space, Row, Col, Alert, App as AntApp } from "antd";
import { DownOutlined } from "@ant-design/icons";
import "antd/dist/reset.css";
import AppLogo from "@/assets/logo-gh.png";
import { useStore } from "@/stores/StoreContext.js";
import Language from "../i18n/LanguageSwitcher";
import { Outlet } from 'react-router-dom'
import { Layout, ConfigProvider, theme, Typography, Row, Col, App as AntApp } from 'antd'
import 'antd/dist/reset.css'
import AppLogo from '@/assets/logo-gh.png'
import Language from '../i18n/LanguageSwitcher'
const { Title } = Typography;
const { Header, Content, Footer } = Layout;
const { Title } = Typography
const { Header, Content, Footer } = Layout
function Standlone() {
const { authStore } = useStore();
const {
token: { colorBgContainer },
} = theme.useToken();
} = theme.useToken()
return (
<ConfigProvider
theme={{
token: {
colorPrimary: "#00b96b",
colorPrimary: '#00b96b',
},
algorithm: theme.defaultAlgorithm,
}}>
<AntApp>
<Layout
style={{
minHeight: "100vh",
minHeight: '100vh',
}}>
<Header className="header" style={{ position: "sticky", top: 0, zIndex: 1, width: "100%" }}>
<Row gutter={{ md: 24 }} justify="center">
<Header className='header' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
<Row gutter={{ md: 24 }} justify='center'>
<Col span={4}>
<img src={AppLogo} className="logo" alt="App logo" />
<img src={AppLogo} className='logo' alt='App logo' />
</Col>
<Col span={18}><Title style={{ color: "white", marginTop: "3.5px" }}>Global Highlights Hub</Title></Col>
<Col span={18}><Title style={{ color: 'white', marginTop: '3.5px' }}>Global Highlights Hub</Title></Col>
<Col span={2}>
<Language />
</Col>
@ -55,7 +50,7 @@ function Standlone() {
</Layout>
</AntApp>
</ConfigProvider>
);
)
}
export default observer(Standlone);
export default Standlone

@ -120,7 +120,7 @@ function Management() {
)
}
const onPermissionChange = (newValue) => {
const onPermissionChange = (newValue) => {
console.log('onChange ', newValue);
setPermissionValue(newValue);
}
@ -205,7 +205,7 @@ function Management() {
}
//
const onSearchClick = (current=1, status=null) => {
const onSearchClick = (current = 1, status = null) => {
}
const showDisableConfirm = () => {
@ -243,65 +243,65 @@ function Management() {
open={isAccountModalOpen} onOk={handleAccountOk} onCancel={handleAccountCancel}
>
<Form
name='basic'
form={editAccountForm}
layout='vertical'
size='large'
style={{
maxWidth: 600,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete='off'
>
<Form.Item><Title level={2}>{t('account:management.newAccount')}</Title></Form.Item>
<Form.Item
label={t('account:management.username')}
name='username'
rules={[
{
required: true,
message: t('account:Validation.username'),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t('account:management.realname')}
name='realname'
rules={[
{
required: true,
message: t('account:Validation.realname'),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t('account:management.email')}
name='email'
rules={[
{
required: true,
message: t('account:Validation.email'),
},
]}
name='basic'
form={editAccountForm}
layout='vertical'
size='large'
style={{
maxWidth: 600,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete='off'
>
<Input />
</Form.Item>
<Form.Item label={t('account:management.role')}>
<Select>
<Select.Option value='1'>客服组</Select.Option>
<Select.Option value='2'>产品组</Select.Option>
<Select.Option value='3'>国内供应商</Select.Option>
<Select.Option value='4'>海外供应商</Select.Option>
<Select.Option value='5'>技术研发部</Select.Option>
<Select.Option value='0' disabled>系统管理员</Select.Option>
</Select>
</Form.Item>
</Form>
<Form.Item><Title level={2}>{t('account:management.newAccount')}</Title></Form.Item>
<Form.Item
label={t('account:management.username')}
name='username'
rules={[
{
required: true,
message: t('account:Validation.username'),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t('account:management.realname')}
name='realname'
rules={[
{
required: true,
message: t('account:Validation.realname'),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t('account:management.email')}
name='email'
rules={[
{
required: true,
message: t('account:Validation.email'),
},
]}
>
<Input />
</Form.Item>
<Form.Item label={t('account:management.role')}>
<Select>
<Select.Option value='1'>客服组</Select.Option>
<Select.Option value='2'>产品组</Select.Option>
<Select.Option value='3'>国内供应商</Select.Option>
<Select.Option value='4'>海外供应商</Select.Option>
<Select.Option value='5'>技术研发部</Select.Option>
<Select.Option value='0' disabled>系统管理员</Select.Option>
</Select>
</Form.Item>
</Form>
</Modal>
{/* Role Edit */}
<Modal
@ -309,51 +309,51 @@ function Management() {
open={isRoleModalOpen} onOk={handleRoleOk} onCancel={handleRoleCancel}
>
<Form
name='basic'
form={editRoleForm}
layout='vertical'
size='large'
style={{
maxWidth: 600,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete='off'
>
<Form.Item><Title level={2}>{t('account:management.newRole')}</Title></Form.Item>
<Form.Item
label={t('account:management.roleName')}
name='roleName'
rules={[
{
required: true,
message: t('account:Validation.roleName'),
},
]}
name='basic'
form={editRoleForm}
layout='vertical'
size='large'
style={{
maxWidth: 600,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete='off'
>
<Input />
</Form.Item>
<Form.Item label={t('account:management.permission')}>
<TreeSelect treeData={permissionData} value={permissionValue}
dropdownStyle={{
maxHeight: 500,
overflow: 'auto',
}}
placement='bottomLeft'
showSearch
allowClear
multiple
treeDefaultExpandAll
treeLine={true}
onChange={onPermissionChange}
treeCheckable={true}
showCheckedStrategy={TreeSelect.SHOW_CHILD}
placeholder={'Please select'}
style={{
width: '100%',
}} />
</Form.Item>
</Form>
<Form.Item><Title level={2}>{t('account:management.newRole')}</Title></Form.Item>
<Form.Item
label={t('account:management.roleName')}
name='roleName'
rules={[
{
required: true,
message: t('account:Validation.roleName'),
},
]}
>
<Input />
</Form.Item>
<Form.Item label={t('account:management.permission')}>
<TreeSelect treeData={permissionData} value={permissionValue}
dropdownStyle={{
maxHeight: 500,
overflow: 'auto',
}}
placement='bottomLeft'
showSearch
allowClear
multiple
treeDefaultExpandAll
treeLine={true}
onChange={onPermissionChange}
treeCheckable={true}
showCheckedStrategy={TreeSelect.SHOW_CHILD}
placeholder={'Please select'}
style={{
width: '100%',
}} />
</Form.Item>
</Form>
</Modal>
<Space direction='vertical' style={{ width: '100%' }}>
<Title level={3}>{t('account:management.tile')}</Title>
@ -401,9 +401,9 @@ function Management() {
showQuickJumper: true,
showLessItems: true,
showSizeChanger: true,
showTotal: (total) => { return `总数${total}` }
showTotal: (total) => { return t('Total') + `${total}` }
}}
onChange={(pagination) => {onSearchClick(pagination.current)}}
onChange={(pagination) => { onSearchClick(pagination.current) }}
columns={accountListColumns} dataSource={accountList}
/>
</Col>

@ -82,7 +82,7 @@ function Newest() {
optionFilterProp='children'
defaultValue={(guideSelectOptions.length == 0 || city.tourGuideId == 0) ? null : city.tourGuideId}
onChange={(guideId) => {
reservationStore.setupCityGuide(city.cityId, guideId);
setupCityGuide(city.cityId, guideId);
}}
onSearch={(value) => {
// console.log('search:', value);
@ -102,9 +102,9 @@ function Newest() {
const formValuesToSub = useFormStore((state) => state.formValuesToSub)
const [fetchAllGuideList, fetchReservationList, reservationList, reservationPage, cityList, selectReservation, getCityListByReservationId] =
const [fetchAllGuideList, fetchReservationList, reservationList, reservationPage, cityList, selectReservation, getCityListByReservationId, setupCityGuide, updateReservationGuide] =
useReservationStore((state) =>
[state.fetchAllGuideList, state.fetchReservationList, state.reservationList, state.reservationPage, state.cityList, state.selectReservation, state.getCityListByReservationId])
[state.fetchAllGuideList, state.fetchReservationList, state.reservationList, state.reservationPage, state.cityList, state.selectReservation, state.getCityListByReservationId, state.setupCityGuide, state.updateReservationGuide])
const { notification } = App.useApp()
@ -143,7 +143,7 @@ function Newest() {
})
}
const handleOk = () => {
reservationStore.updateReservationGuide()
updateReservationGuide()
.finally(() => {
setIsModalOpen(false);
setDataLoading(false);

Loading…
Cancel
Save