Compare commits
No commits in common. 'main' and 'dev/i18n' have entirely different histories.
@ -1,15 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
|
||||
'no-unused-vars': ['warn', { args: 'after-used', vars: 'all' }],
|
||||
'react/prop-types': 'off',
|
||||
'react-hooks/rules-of-hooks': 'warn',
|
||||
},
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
npm version patch
|
||||
@ -1 +0,0 @@
|
||||
npm version prerelease
|
||||
@ -1,92 +0,0 @@
|
||||
CREATE TABLE auth_role
|
||||
(
|
||||
[role_id] [int] IDENTITY(1,1) NOT NULL,
|
||||
[role_name] [nvarchar](255) NOT NULL,
|
||||
[created_on] [datetime] NOT NULL,
|
||||
CONSTRAINT [PK_auth_role] PRIMARY KEY CLUSTERED
|
||||
(
|
||||
[role_id] ASC
|
||||
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
|
||||
) ON [PRIMARY]
|
||||
|
||||
ALTER TABLE auth_role ADD CONSTRAINT [DF_auth_role_created_on] DEFAULT (getdate()) FOR [created_on]
|
||||
|
||||
CREATE TABLE auth_permission
|
||||
(
|
||||
[role_id] [int] NOT NULL,
|
||||
[res_id] [int] NOT NULL
|
||||
) ON [PRIMARY]
|
||||
|
||||
CREATE TABLE auth_resource
|
||||
(
|
||||
[res_id] [int] IDENTITY(1,1) NOT NULL,
|
||||
[res_name] [nvarchar](255) NOT NULL,
|
||||
[res_pattern] [nvarchar](255) NOT NULL,
|
||||
[res_category] [nvarchar](255) NOT NULL,
|
||||
CONSTRAINT [PK_auth_resource] PRIMARY KEY CLUSTERED
|
||||
(
|
||||
[res_id] ASC
|
||||
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
|
||||
) ON [PRIMARY]
|
||||
|
||||
INSERT INTO [dbo].[auth_role] ([role_name])
|
||||
VALUES ('系统管理员')
|
||||
INSERT INTO [dbo].[auth_role] ([role_name])
|
||||
VALUES ('国内供应商')
|
||||
INSERT INTO [dbo].[auth_role] ([role_name])
|
||||
VALUES ('海外供应商')
|
||||
INSERT INTO [dbo].[auth_role] ([role_name])
|
||||
VALUES ('客服组')
|
||||
INSERT INTO [dbo].[auth_role] ([role_name])
|
||||
VALUES ('产品组')
|
||||
INSERT INTO [dbo].[auth_role] ([role_name])
|
||||
VALUES ('技术研发部')
|
||||
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('所有权限', '*', 'system')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('管理账号', '/account/management', 'system')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('新增账号', '/account/new', 'system')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('禁用账号', '/account/disable', 'system')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('重置密码', '/account/reset-password', 'system')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('管理角色', '/account/role-new', 'system')
|
||||
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('所有海外功能', '/oversea/all', 'oversea')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('所有国内功能', '/domestic/all', 'domestic')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('所有机票功能', '/air-ticket/all', 'air-ticket')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('所有火车票功能', '/train-ticket/all', 'train-ticket')
|
||||
|
||||
-- 价格管理
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('管理产品', '/products/*', 'products')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('新增产品', '/products/new', 'products')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('审核信息', '/products/info/audit', 'products')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('录入信息', '/products/info/put', 'products')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('审核价格', '/products/offer/audit', 'products')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('录入价格', '/products/offer/put', 'products')
|
||||
|
||||
-- 默认页面
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('最新计划', 'route=/reservation/newest', 'page')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('机票订票', 'route=/airticket', 'page')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('产品管理(客服)', 'route=/products', 'page')
|
||||
INSERT INTO [dbo].[auth_resource] ([res_name] ,[res_pattern], [res_category])
|
||||
VALUES ('产品管理(供应商)', 'route=/products/edit', 'page')
|
||||
|
||||
INSERT INTO [dbo].[auth_permission] ([role_id] ,[res_id])
|
||||
VALUES (1, 1)
|
||||
Binary file not shown.
@ -1,49 +1,32 @@
|
||||
{
|
||||
"name": "global-highlights-hub",
|
||||
"name": "global.highlights.hub",
|
||||
"private": true,
|
||||
"version": "2.0.20",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"4test": "vite build --mode test",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.5.1",
|
||||
"@react-pdf/renderer": "^3.4.0",
|
||||
"antd": "^5.17.2",
|
||||
"dayjs": "^1.11.13",
|
||||
"docx": "^8.5.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"antd": "^5.4.2",
|
||||
"i18next": "^23.11.5",
|
||||
"i18next-browser-languagedetector": "^8.0.0",
|
||||
"i18next-http-backend": "^2.5.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"mobx": "^6.9.0",
|
||||
"mobx-react": "^7.6.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^14.1.2",
|
||||
"react-router-dom": "^6.10.0",
|
||||
"react-to-pdf": "^1.0.1",
|
||||
"xlsx": "https://cdn.sheetjs.com/xlsx-0.18.11/xlsx-0.18.11.tgz",
|
||||
"zustand": "^4.5.2"
|
||||
"react-to-pdf": "^1.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-legacy": "^4.0.2",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-react-app": "^7.0.1",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"vite": "^4.2.0",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-plugin-windicss": "^1.9.3",
|
||||
"windicss": "^3.5.6"
|
||||
"vite": "^4.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
{
|
||||
"CurrentPassword": "Current password",
|
||||
"NewPassword": "New password",
|
||||
"ReenterPassword": "Reenter password",
|
||||
"Validation": {
|
||||
"Success": "Your password has been successfully updated.",
|
||||
"Fail": "Failed to change password. Please try again.",
|
||||
"CurrentPassword": "Please input your password.",
|
||||
"NewPassword": "Please input your new password.",
|
||||
"ReenterPassword": "Please reenter your password.",
|
||||
"username": "请重复输入用户名。",
|
||||
"realname": "请重复输入真实姓名。",
|
||||
"email": "请重复输入邮箱。",
|
||||
"travelAgency": "请重复输供应商。",
|
||||
"role": "请重复输入角色。",
|
||||
"roleName": "请重复输入角色名称。"
|
||||
},
|
||||
"createdOn": "Created on",
|
||||
"action": "Action",
|
||||
"action.edit": "Edit",
|
||||
"action.enable": "Enable",
|
||||
"action.disable": "Disable",
|
||||
"action.enable.title": "Do you want to enable account?",
|
||||
"action.disable.title": "Do you want to disable account?",
|
||||
"action.resetPassword": "Reset Password",
|
||||
"action.resetPassword.tile": "Do you want to reset password?",
|
||||
|
||||
"accountList": "Account List",
|
||||
"newAccount": "New Account",
|
||||
"detail": "Detail",
|
||||
"username": "Username",
|
||||
"realname": "Realname",
|
||||
"travelAgency": "Travel Agency",
|
||||
"travelAgencyName": "Travel Agency Name",
|
||||
"email": "Email",
|
||||
"lastLogin": "Last Login",
|
||||
|
||||
"roleList": "Role List",
|
||||
"newRole": "New Role",
|
||||
"roleName": "Role Name",
|
||||
"permission": "Permission"
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"report": {
|
||||
"GetReport": "Get Report"
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
{
|
||||
"CurrentPassword": "当前密码",
|
||||
"NewPassword": "新密码",
|
||||
"ReenterPassword": "重复输入密码",
|
||||
"Validation": {
|
||||
"Success": "密码更新成功",
|
||||
"Fail": "密码更新失败",
|
||||
"CurrentPassword": "请输入密码。",
|
||||
"NewPassword": "请输入新密码。",
|
||||
"ReenterPassword": "请重复输入密码。",
|
||||
"username": "请重复输入用户名。",
|
||||
"realname": "请重复输入真实姓名。",
|
||||
"email": "请重复输入邮箱。",
|
||||
"travelAgency": "请重复输供应商。",
|
||||
"role": "请重复输入角色。",
|
||||
"roleName": "请重复输入角色名称。"
|
||||
},
|
||||
"createdOn": "创建时间",
|
||||
"action": "操作",
|
||||
"action.edit": "编辑",
|
||||
"action.enable": "启用",
|
||||
"action.disable": "禁用",
|
||||
"action.enable.title": "确定启用该账号吗？",
|
||||
"action.disable.title": "确定禁用该账号吗？",
|
||||
"action.resetPassword": "重置密码",
|
||||
"action.resetPassword.tile": "确定重置账号密码吗？",
|
||||
|
||||
"accountList": "管理账号",
|
||||
"newAccount": "新增账号",
|
||||
"detail": "详细信息",
|
||||
"username": "用户名",
|
||||
"realname": "姓名",
|
||||
"travelAgency": "供应商",
|
||||
"travelAgencyName": "供应商名称",
|
||||
"email": "邮箱地址",
|
||||
"lastLogin": "最后登陆时间",
|
||||
|
||||
"roleList": "管理角色",
|
||||
"newRole": "新增角色",
|
||||
"roleName": "角色名称",
|
||||
"permission": "权限"
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"report": {
|
||||
"GetReport": "获取报告"
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,19 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
.ant-table-wrapper.border-collapse table {
|
||||
border-collapse: collapse;
|
||||
.logo {
|
||||
float: left;
|
||||
height: 36px;
|
||||
margin: 16px 24px 16px 0;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.reservation-highlight {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
#error-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import { Select } from 'antd';
|
||||
import { useProductsAuditStates } from '@/hooks/useProductsSets';
|
||||
|
||||
const AuditStateSelector = ({ ...props }) => {
|
||||
const states = useProductsAuditStates();
|
||||
return (
|
||||
<>
|
||||
<Select labelInValue allowClear options={states} {...props}/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default AuditStateSelector;
|
||||
@ -1,16 +0,0 @@
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from 'antd';
|
||||
import { isNotEmpty } from '@/utils/commons';
|
||||
|
||||
const BackBtn = ({to, ...props}) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<>
|
||||
{isNotEmpty(to) ? <Link to={to} className='px-4'>{t('Back')}</Link> : <Button type='link' onClick={() => navigate(-1)}>{t('Back')}</Button>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default BackBtn;
|
||||
@ -1,29 +0,0 @@
|
||||
import { createContext, useEffect, useState } from 'react';
|
||||
import {} from 'antd';
|
||||
import SearchInput from './SearchInput';
|
||||
import { fetchJSON } from '@/utils/request';
|
||||
import { HT_HOST } from '@/config';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
//供应商列表
|
||||
export const fetchCityList = async (q) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/search_cities`, { q });
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
const CitySelector = ({ ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<SearchInput
|
||||
placeholder={t('products:City')}
|
||||
mode={null}
|
||||
maxTagCount={0}
|
||||
{...props}
|
||||
fetchOptions={fetchCityList}
|
||||
map={{ city_name: 'label', city_id: 'value' }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default CitySelector;
|
||||
@ -1,94 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Tag, Button, message } from 'antd';
|
||||
import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import { utils, writeFile } from "xlsx";
|
||||
import { isEmpty, getNestedValue } from "../utils/commons";
|
||||
|
||||
/**
|
||||
* @property diffPercent
|
||||
* @property diffData
|
||||
* @property data1
|
||||
* @property data2
|
||||
*/
|
||||
export const VSTag = (props) => {
|
||||
const { diffPercent, diffData, data1, data2 } = props;
|
||||
const CaretIcon = parseInt(diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined;
|
||||
const tagColor = parseInt(diffPercent) < 0 ? 'gold' : 'lime';
|
||||
return parseInt(diffPercent) === 0 ? (
|
||||
'-'
|
||||
) : (
|
||||
<span>
|
||||
{/* <div>
|
||||
{data1} vs {data2}
|
||||
</div> */}
|
||||
<Tag icon={<CaretIcon />} color={tagColor}>
|
||||
{diffPercent}<span>%</span>{' '}<span>{diffData}</span>
|
||||
</Tag>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出表格数据存为xlsx
|
||||
*/
|
||||
export const TableExportBtn = (props) => {
|
||||
const output_name = `${props.label}`;
|
||||
const [columnsMap, setColumnsMap] = useState([]);
|
||||
const [summaryRow, setSummaryRow] = useState({});
|
||||
useEffect(() => {
|
||||
const r1 = props.columns.reduce((r, v) => ({
|
||||
...r,
|
||||
...(v.children ? v.children.reduce((rc, vc, ci) => ({
|
||||
...rc,
|
||||
...(vc?.titleX ? {[`${v?.titleX || v.title},${vc.titleX}`]: vc.titleX } : {[(v?.titleX || v.title) + (ci || '')]: `${vc?.titleX || vc?.title || ''}`}),
|
||||
}), {}) : {})
|
||||
}), {});
|
||||
const flatCols = props.columns.flatMap((v, k) =>
|
||||
v.children ? v.children.map((vc, ci) => ({ ...vc, title: `${v?.titleX || v.title}` + (vc?.titleX ? `,${vc.titleX}` : (ci || '')) })) : {...v, title: `${v?.titleX || v.title}`}
|
||||
);
|
||||
// .filter((c) => c.dataIndex)
|
||||
// !['string', 'number'].includes(typeof vc.title) ? `${v?.titleX || v.title}` : `${v?.titleX || v.title}-${vc.title || ''}`
|
||||
;
|
||||
setColumnsMap(flatCols);
|
||||
// console.log('flatCols', flatCols);
|
||||
|
||||
setSummaryRow(r1);
|
||||
// console.log('summaryRow', r1);
|
||||
|
||||
return () => {};
|
||||
}, [props.columns]);
|
||||
|
||||
const onExport = () => {
|
||||
if (isEmpty(props.dataSource)) {
|
||||
message.warning('无结果.');
|
||||
return false;
|
||||
}
|
||||
const data = props.dataSource.map((item) => {
|
||||
const itemMapped = columnsMap.reduce((sv, kset) => {
|
||||
const render_val = typeof kset?.render === 'function' ? kset.render('', item) : null;
|
||||
const data_val = kset?.dataIndex ? (Array.isArray(kset.dataIndex) ? getNestedValue(item, kset.dataIndex) : item[kset.dataIndex]) : undefined;
|
||||
const x_val = item[`${kset.dataIndex}_X`];
|
||||
// const _title = kset.title.replace('-[object Object]', '');
|
||||
const v = { [kset.title]: x_val || data_val || render_val };
|
||||
return { ...sv, ...v };
|
||||
}, {});
|
||||
return itemMapped;
|
||||
});
|
||||
const ws = utils.json_to_sheet([].concat(isEmpty(summaryRow) ? [] : [summaryRow], data), { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) });
|
||||
const wb = utils.book_new();
|
||||
utils.book_append_sheet(wb, ws, 'sheet');
|
||||
writeFile(wb, `${output_name}.xlsx`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
type="link"
|
||||
icon={<DownloadOutlined />}
|
||||
size="small"
|
||||
disabled={false}
|
||||
onClick={onExport}
|
||||
>
|
||||
{props.btnTxt || '导出excel'}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
@ -1,60 +0,0 @@
|
||||
import { Component } from 'react';
|
||||
import { Select } from 'antd';
|
||||
// import { groups, leafGroup } from '../../libs/ht';
|
||||
|
||||
/**
|
||||
* 小组
|
||||
*/
|
||||
export const groups = [
|
||||
{ value: '1,2,28,7,33', key: '1,2,28,7,33', label: 'GH事业部', code: 'GH', children: [1, 2, 28, 7, 33] },
|
||||
{ value: '8,9,11,12,20,21', key: '8,9,11,12,20,21', label: '国际事业部', code: 'INT', children: [8, 9, 11, 12, 20, 21] },
|
||||
{ value: '10,18,16,30', key: '10,18,16,30', label: '孵化学院', code: '', children: [10, 18, 16, 30] },
|
||||
{ value: '1', key: '1', label: 'CH直销', code: '', children: [] },
|
||||
{ value: '2', key: '2', label: 'CH大客户', code: '', children: [] },
|
||||
{ value: '28', key: '28', label: 'AH亚洲项目组', code: 'AH', children: [] },
|
||||
{ value: '33', key: '33', label: 'GH项目组', code: '', children: [] },
|
||||
{ value: '7', key: '7', label: '市场推广', code: '', children: [] },
|
||||
{ value: '8', key: '8', label: '德语', code: '', children: [] },
|
||||
{ value: '9', key: '9', label: '日语', code: '', children: [] },
|
||||
{ value: '11', key: '11', label: '法语', code: '', children: [] },
|
||||
{ value: '12', key: '12', label: '西语', code: '', children: [] },
|
||||
{ value: '20', key: '20', label: '俄语', code: '', children: [] },
|
||||
{ value: '21', key: '21', label: '意语', code: '', children: [] },
|
||||
{ value: '10', key: '10', label: '商旅', code: '', children: [] },
|
||||
{ value: '18', key: '18', label: 'CT', code: 'CT', children: [] },
|
||||
{ value: '16', key: '16', label: 'APP', code: 'APP', children: [] },
|
||||
{ value: '30', key: '30', label: 'Trippest', code: 'TP', children: [] },
|
||||
{ value: '31', key: '31', label: '花梨鹰', code: '', children: [] },
|
||||
];
|
||||
export const groupsMappedByCode = groups.reduce((a, c) => ({ ...a, [String(c.code || c.key)]: c }), {});
|
||||
export const groupsMappedByKey = groups.reduce((a, c) => ({ ...a, [String(c.key)]: c }), {});
|
||||
export const leafGroup = groups.slice(3);
|
||||
export const overviewGroup = groups.slice(0, 3); // todo: 花梨鹰 APP Trippest
|
||||
|
||||
export const DeptSelector = ({show_all, isLeaf,...props}) => {
|
||||
const _show_all = ['tags', 'multiple'].includes(props.mode) ? false : show_all;
|
||||
const options = isLeaf===true ? leafGroup : groups;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Select
|
||||
mode={props.mode}
|
||||
placeholder="选择小组"
|
||||
labelInValue
|
||||
maxTagCount={1}
|
||||
allowClear={props.mode != null}
|
||||
{...props}
|
||||
options={options}
|
||||
/>
|
||||
{/* {_show_all ? (
|
||||
<Select.Option key="ALL" value="ALL">
|
||||
所有小组
|
||||
</Select.Option>
|
||||
) : (
|
||||
''
|
||||
)} */}
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
export default DeptSelector;
|
||||
@ -1,13 +0,0 @@
|
||||
import { useRouteError } from 'react-router-dom'
|
||||
import { Result } from 'antd'
|
||||
|
||||
export default function ErrorPage() {
|
||||
const errorResponse = useRouteError()
|
||||
return (
|
||||
<Result
|
||||
status='404'
|
||||
title='Sorry, an unexpected error has occurred.'
|
||||
subTitle={errorResponse?.message || errorResponse.error?.message}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { Select } from 'antd';
|
||||
import { useProductsTypes } from '@/hooks/useProductsSets';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const ProductsTypesSelector = ({...props}) => {
|
||||
const productsTypes = useProductsTypes();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Select labelInValue allowClear placeholder={t('products:ProductType')} options={productsTypes} {...props}/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductsTypesSelector;
|
||||
@ -1,22 +0,0 @@
|
||||
import { Result } from 'antd'
|
||||
import { usingStorage } from '@/hooks/usingStorage'
|
||||
import useAuthStore from '@/stores/Auth'
|
||||
|
||||
export default function RequireAuth({ children, ...props }) {
|
||||
|
||||
const [isPermitted, currentUser] = useAuthStore(state => [state.isPermitted, state.currentUser])
|
||||
const { userId } = usingStorage()
|
||||
|
||||
if (isPermitted(props.subject)) {
|
||||
// if (props.subject === '/account/management1') {
|
||||
return children
|
||||
} else if (props.result) {
|
||||
return (
|
||||
<Result
|
||||
status='403'
|
||||
title='403'
|
||||
subTitle={`抱歉，你(${currentUser.username})没有权限使用该功能(${props.subject})。`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
import React, { useMemo, useRef, useState } from 'react';
|
||||
import { Select, Spin } from 'antd';
|
||||
import { debounce, objectMapper } from '@/utils/commons';
|
||||
|
||||
function DebounceSelect({ fetchOptions, debounceTimeout = 800, ...props }) {
|
||||
const [fetching, setFetching] = useState(false);
|
||||
const [options, setOptions] = useState([]);
|
||||
const fetchRef = useRef(0);
|
||||
const debounceFetcher = useMemo(() => {
|
||||
const loadOptions = (value) => {
|
||||
fetchRef.current += 1;
|
||||
const fetchId = fetchRef.current;
|
||||
setOptions([]);
|
||||
setFetching(true);
|
||||
fetchOptions(value).then((newOptions) => {
|
||||
const mapperOptions = newOptions.map(ele => objectMapper(ele, props.map));
|
||||
if (fetchId !== fetchRef.current) {
|
||||
// for fetch callback order
|
||||
return;
|
||||
}
|
||||
setOptions(mapperOptions);
|
||||
setFetching(false);
|
||||
});
|
||||
};
|
||||
return debounce(loadOptions, debounceTimeout);
|
||||
}, [fetchOptions, debounceTimeout]);
|
||||
return (
|
||||
<Select
|
||||
labelInValue
|
||||
filterOption={false}
|
||||
showSearch
|
||||
allowClear
|
||||
maxTagCount={1}
|
||||
dropdownStyle={{width: '20rem'}}
|
||||
{...props}
|
||||
onSearch={debounceFetcher}
|
||||
notFoundContent={fetching ? <Spin size='small' /> : null}
|
||||
optionFilterProp='label'
|
||||
>
|
||||
{options.map((d) => (
|
||||
<Select.Option key={d.value} title={d.label}>
|
||||
{d.label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
export default DebounceSelect;
|
||||
@ -1,31 +0,0 @@
|
||||
import { Outlet, useNavigate } from 'react-router-dom';
|
||||
import { Layout, Flex, theme, Spin, Divider } from 'antd';
|
||||
import BackBtn from './BackBtn';
|
||||
|
||||
const { Content, Header } = Layout;
|
||||
const HeaderWrapper = ({ children, header, loading, backTo, ...props }) => {
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
return (
|
||||
<>
|
||||
<Spin spinning={loading || false} wrapperClassName='h-full [&_.ant-spin-container]:h-full' >
|
||||
<Layout className=' bg-white h-full'>
|
||||
<Header className='header px-6 h-10 ' style={{ background: 'white' }}>
|
||||
<Flex justify={'space-between'} align={'center'} className='h-full'>
|
||||
{/* {header} */}
|
||||
<div className='grow h-full'>{header}</div>
|
||||
{backTo!==false && <BackBtn to={backTo} />}
|
||||
</Flex>
|
||||
</Header>
|
||||
<Divider className='my-2' />
|
||||
<Content className='overflow-auto' style={{ backgroundColor: colorBgContainer }}>
|
||||
{children || <Outlet />}
|
||||
</Content>
|
||||
</Layout>
|
||||
</Spin>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default HeaderWrapper;
|
||||
@ -1,29 +0,0 @@
|
||||
import { createContext, useEffect, useState } from 'react';
|
||||
import {} from 'antd';
|
||||
import SearchInput from './SearchInput';
|
||||
import { fetchJSON } from '@/utils/request';
|
||||
import { HT_HOST } from '@/config';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
//供应商列表
|
||||
export const fetchVendorList = async (q) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/VendorList`, { q });
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
const VendorSelector = ({ ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<SearchInput
|
||||
placeholder={t('products:Vendor')}
|
||||
mode={'multiple'}
|
||||
maxTagCount={0}
|
||||
{...props}
|
||||
fetchOptions={fetchVendorList}
|
||||
map={{ travel_agency_name: 'label', travel_agency_id: 'value' }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default VendorSelector;
|
||||
@ -1,76 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import dayjs from "dayjs";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import i18n from '@/i18n';
|
||||
|
||||
export const useDatePresets = () => {
|
||||
const [presets, setPresets] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const newPresets = [
|
||||
{
|
||||
label: t("datetime.thisWeek"),
|
||||
value: [dayjs().startOf("w"), dayjs().endOf("w")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastWeek"),
|
||||
value: [dayjs().startOf("w").subtract(7, "days"), dayjs().endOf("w").subtract(7, "days")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.thisMonth"),
|
||||
value: [dayjs().startOf("M"), dayjs().endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastMonth"),
|
||||
value: [dayjs().subtract(1, "M").startOf("M"), dayjs().subtract(1, "M").endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.nextMonth"),
|
||||
value: [dayjs().add(1, "M").startOf("M"), dayjs().add(1, "M").endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastThreeMonth"),
|
||||
value: [dayjs().subtract(2, "M").startOf("M"), dayjs().endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.nextThreeMonth"),
|
||||
value: [dayjs().startOf("M"), dayjs().add(3,"M").endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.firstHalfYear"),
|
||||
value: [dayjs().startOf("y"), dayjs().endOf("y").subtract(6, "M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.latterHalfYear"),
|
||||
value: [dayjs().startOf("y").add(6,"M"), dayjs().endOf("y")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.thisYear"),
|
||||
value: [dayjs().startOf("y"), dayjs().endOf("y")],
|
||||
},
|
||||
];
|
||||
setPresets(newPresets);
|
||||
}, [i18n.language]);
|
||||
|
||||
return presets;
|
||||
}
|
||||
|
||||
export const useWeekdays = () => {
|
||||
const [data, setData] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
useEffect(() => {
|
||||
const newData = [
|
||||
{ value: '1', label: t('weekdays.1') },
|
||||
{ value: '2', label: t('weekdays.2') },
|
||||
{ value: '3', label: t('weekdays.3') },
|
||||
{ value: '4', label: t('weekdays.4') },
|
||||
{ value: '5', label: t('weekdays.5') },
|
||||
{ value: '6', label: t('weekdays.6') },
|
||||
{ value: '7', label: t('weekdays.7') },
|
||||
];
|
||||
setData(newData);
|
||||
return () => {};
|
||||
}, [i18n.language]);
|
||||
return data;
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
export const useHTLanguageSets = () => {
|
||||
const newData = [
|
||||
{ key: '1', value: '1', label: 'English' },
|
||||
{ key: '2', value: '2', label: 'Chinese (中文)' },
|
||||
{ key: '3', value: '3', label: 'Japanese (日本語)' },
|
||||
{ key: '4', value: '4', label: 'German (Deutsch)' },
|
||||
{ key: '5', value: '5', label: 'French (Français)' },
|
||||
{ key: '6', value: '6', label: 'Spanish (Español)' },
|
||||
{ key: '7', value: '7', label: 'Russian (Русский)' },
|
||||
{ key: '8', value: '8', label: 'Italian (Italiano)' },
|
||||
];
|
||||
|
||||
return newData;
|
||||
};
|
||||
|
||||
export const useHTLanguageSetsMapVal = () => {
|
||||
const stateSets = useHTLanguageSets();
|
||||
const stateMapVal = stateSets.reduce((r, c) => ({ ...r, [`${c.value}`]: c }), {});
|
||||
return stateMapVal;
|
||||
};
|
||||
@ -0,0 +1,42 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import dayjs from "dayjs";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const usePresets = () => {
|
||||
const [presets, setPresets] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const newPresets = [
|
||||
{
|
||||
label: t("datetime.thisWeek"),
|
||||
value: [dayjs().startOf("w"), dayjs().endOf("w")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastWeek"),
|
||||
value: [dayjs().startOf("w").subtract(7, "days"), dayjs().endOf("w").subtract(7, "days")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.thisMonth"),
|
||||
value: [dayjs().startOf("M"), dayjs().endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastMonth"),
|
||||
value: [dayjs().subtract(1, "M").startOf("M"), dayjs().subtract(1, "M").endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.lastThreeMonth"),
|
||||
value: [dayjs().subtract(2, "M").startOf("M"), dayjs().endOf("M")],
|
||||
},
|
||||
{
|
||||
label: t("datetime.thisYear"),
|
||||
value: [dayjs().startOf("y"), dayjs().endOf("y")],
|
||||
},
|
||||
];
|
||||
setPresets(newPresets);
|
||||
}, [i18n.language]);
|
||||
|
||||
return presets;
|
||||
}
|
||||
|
||||
export default usePresets;
|
||||
@ -1,184 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import useAuthStore from '@/stores/Auth';
|
||||
import { PERM_OVERSEA, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT } from '@/config';
|
||||
import { isEmpty } from '@/utils/commons';
|
||||
|
||||
/**
|
||||
* 产品管理 相关的预设数据
|
||||
* 项目类型
|
||||
* * 酒店预定 1
|
||||
* * 火车 2
|
||||
* * 飞机票务 3
|
||||
* * 游船 4
|
||||
* * 快巴 5
|
||||
* * 旅行社(综费) 6
|
||||
* * 景点 7
|
||||
* * 特殊项目 8
|
||||
* * 其他 9
|
||||
* * 酒店 A
|
||||
* * 超公里 B
|
||||
* * 餐费 C
|
||||
* * 小包价 D // 包价线路
|
||||
* * 站 X
|
||||
* * 购物 S
|
||||
* * 餐 R (餐厅)
|
||||
* * 娱乐 E
|
||||
* * 精华线路 T
|
||||
* * 客人testimonial F
|
||||
* * 线路订单 O
|
||||
* * 省 P
|
||||
* * 信息 I
|
||||
* * 国家 G
|
||||
* * 城市 K
|
||||
* * 图片 H
|
||||
* * 地图 M
|
||||
* * 包价线路 L (已废弃)
|
||||
* * 节日节庆 V
|
||||
* * 火车站 N
|
||||
* * 手机租赁 Z
|
||||
* * ---- webht 类型, 20240624 新增HT类型 ----
|
||||
* * 导游 Q
|
||||
* * 车费 J
|
||||
*/
|
||||
|
||||
export const useProductsTypes = (showAll = false) => {
|
||||
const [types, setTypes] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const allItem = [{ label: t('All'), value: '', key: '' }];
|
||||
const newData = [
|
||||
{ label: t('products:type.Experience'), value: '6', key: '6' },
|
||||
{ label: t('products:type.UltraService'), value: 'B', key: 'B' },
|
||||
{ label: t('products:type.Car'), value: 'J', key: 'J' },
|
||||
{ label: t('products:type.Guide'), value: 'Q', key: 'Q' },
|
||||
{ label: t('products:type.Attractions'), value: '7', key: '7' }, // landscape
|
||||
{ label: t('products:type.Meals'), value: 'R', key: 'R' },
|
||||
{ label: t('products:type.Extras'), value: '8', key: '8' },
|
||||
{ label: t('products:type.Package'), value: 'D', key: 'D' },
|
||||
];
|
||||
const res = showAll ? [...allItem, ...newData] : newData;
|
||||
setTypes(res);
|
||||
}, [i18n.language]);
|
||||
|
||||
return types;
|
||||
};
|
||||
export const useProductsTypesMapVal = (value) => {
|
||||
const stateSets = useProductsTypes();
|
||||
const stateMapVal = stateSets.reduce((r, c) => ({ ...r, [`${c.value}`]: c }), {});
|
||||
return stateMapVal;
|
||||
};
|
||||
|
||||
export const useProductsAuditStates = () => {
|
||||
const [types, setTypes] = useState([]);
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const newData = [
|
||||
{ key: '-1', value: '-1', label: t('products:auditState.New'), color: 'muted' },
|
||||
{ key: '0', value: '0', label: t('products:auditState.Pending'), color: '' },
|
||||
{ key: '2', value: '2', label: t('products:auditState.Approved'), color: 'primary' },
|
||||
{ key: '3', value: '3', label: t('products:auditState.Rejected'), color: 'danger' },
|
||||
{ key: '1', value: '1', label: t('products:auditState.Published'), color: 'primary' },
|
||||
// ELSE 未知
|
||||
];
|
||||
setTypes(newData);
|
||||
}, [i18n.language]);
|
||||
|
||||
return types;
|
||||
};
|
||||
|
||||
export const useProductsAuditStatesMapVal = (value) => {
|
||||
const stateSets = useProductsAuditStates();
|
||||
const stateMapVal = stateSets.reduce((r, c) => ({ ...r, [`${c.value}`]: c }), {});
|
||||
return stateMapVal;
|
||||
};
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
export const useProductsTypesFieldsets = (type) => {
|
||||
const [isPermitted] = useAuthStore((state) => [state.isPermitted]);
|
||||
const infoDefault = [['city'], ['title']];
|
||||
const infoAdmin = ['title', 'product_title', 'code', 'remarks', 'dept']; // 'display_to_c'
|
||||
const infoDisplay = isPermitted(PERM_PRODUCTS_MANAGEMENT) ? ['display_to_c'] : [];
|
||||
const infoRecDisplay = isPermitted(PERM_PRODUCTS_MANAGEMENT) ? ['recommends_rate'] : [];
|
||||
const infoTypesMap = {
|
||||
'6': [[...infoDisplay], []],
|
||||
'B': [['km', ...infoDisplay], []],
|
||||
'J': [[...infoRecDisplay, 'duration', ...infoDisplay], ['description']],
|
||||
'Q': [[...infoRecDisplay, 'duration', ...infoDisplay], ['description']],
|
||||
'D': [[...infoRecDisplay, 'duration', ...infoDisplay], ['description']],
|
||||
'7': [[...infoRecDisplay, 'duration', 'open_weekdays', ...infoDisplay], ['description']],
|
||||
'R': [[...infoDisplay], ['description']],
|
||||
'8': [[...infoDisplay], []],
|
||||
};
|
||||
const thisTypeFieldset = (_type) => {
|
||||
if (isEmpty(_type)) {
|
||||
return infoDefault;
|
||||
}
|
||||
const adminSet = isPermitted(PERM_PRODUCTS_MANAGEMENT) ? infoAdmin : [];
|
||||
return [
|
||||
[...infoDefault[0], ...infoTypesMap[_type][0], ...adminSet],
|
||||
[...infoDefault[1], ...infoTypesMap[_type][1]],
|
||||
];
|
||||
};
|
||||
return thisTypeFieldset(type);
|
||||
};
|
||||
|
||||
export const useNewProductRecord = () => {
|
||||
return {
|
||||
info: {
|
||||
'id': '',
|
||||
'htid': 0,
|
||||
'title': '',
|
||||
'code': '',
|
||||
'product_type_id': '',
|
||||
'product_type_name': '',
|
||||
'remarks': '',
|
||||
'duration': 0,
|
||||
'duration_unit': 'h',
|
||||
'open_weekdays': ['1', '2', '3', '4', '5', '6', '7'],
|
||||
'recommends_rate': 0,
|
||||
'dept_id': 0,
|
||||
'dept_name': '',
|
||||
'display_to_c': '0',
|
||||
'km': 0,
|
||||
'city_id': 0,
|
||||
'city_name': '',
|
||||
'open_hours': '',
|
||||
'lastedit_changed': '',
|
||||
'create_date': '',
|
||||
'created_by': '',
|
||||
'edit_status': 2,
|
||||
},
|
||||
lgc_details: [
|
||||
{
|
||||
'title': '',
|
||||
'descriptions': '',
|
||||
'lgc': 1,
|
||||
'id': '',
|
||||
'edit_status': 2,
|
||||
},
|
||||
],
|
||||
quotation: [
|
||||
{
|
||||
'id': '',
|
||||
'adult_cost': 0,
|
||||
'child_cost': 0,
|
||||
'currency': 'RMB',
|
||||
'unit_id': '1',
|
||||
'unit_name': '每团',
|
||||
'group_size_min': 1,
|
||||
'group_size_max': 2,
|
||||
'use_dates_start': '',
|
||||
'use_dates_end': '',
|
||||
'weekdays': '',
|
||||
'audit_state_id': -1,
|
||||
'audit_state_name': '',
|
||||
'lastedit_changed': 'new',
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
@ -1,86 +0,0 @@
|
||||
const persistObject = {}
|
||||
|
||||
/**
|
||||
* G-INT:USER_ID -> userId = 456
|
||||
* G-STR:LOGIN_TOKEN -> loginToken = 'E6779386E7D64DF0ADD0F97767E00D8B'
|
||||
* G-JSON:LOGIN_USER -> loginUser = { username: 'test-username' }
|
||||
*/
|
||||
export function usingStorage() {
|
||||
|
||||
const getStorage = () => {
|
||||
if (import.meta.env.DEV && window.localStorage) {
|
||||
return window.localStorage
|
||||
} else if (window.sessionStorage) {
|
||||
return window.sessionStorage
|
||||
} else {
|
||||
console.error('browser not support localStorage and sessionStorage.')
|
||||
}
|
||||
}
|
||||
|
||||
const setProperty = (key, value) => {
|
||||
const webStorage = getStorage()
|
||||
const typeAndKey = key.split(':')
|
||||
if (typeAndKey.length === 2) {
|
||||
const propName = camelCasedWords(typeAndKey[1])
|
||||
persistObject[propName] = value
|
||||
if (typeAndKey[0] === 'G-JSON') {
|
||||
webStorage.setItem(key, JSON.stringify(value))
|
||||
} else {
|
||||
webStorage.setItem(key, value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// USER_ID -> userId
|
||||
const camelCasedWords = (string) => {
|
||||
if (typeof string !== 'string' || string.length === 0) {
|
||||
return string;
|
||||
}
|
||||
return string.split('_').map((word, index) => {
|
||||
if (index === 0) {
|
||||
return word.toLowerCase()
|
||||
} else {
|
||||
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
|
||||
}
|
||||
}).join('')
|
||||
}
|
||||
|
||||
if (Object.keys(persistObject).length == 0) {
|
||||
|
||||
const webStorage = getStorage()
|
||||
|
||||
for (let i = 0; i < webStorage.length; i++) {
|
||||
const key = webStorage.key(i)
|
||||
const typeAndKey = key.split(':')
|
||||
|
||||
if (typeAndKey.length === 2) {
|
||||
const value = webStorage.getItem(key)
|
||||
const propName = camelCasedWords(typeAndKey[1])
|
||||
if (typeAndKey[0] === 'G-INT') {
|
||||
persistObject[propName] = parseInt(value, 10)
|
||||
} else if (typeAndKey[0] === 'G-JSON') {
|
||||
try {
|
||||
persistObject[propName] = JSON.parse(value)
|
||||
} catch (e) {
|
||||
// 如果解析失败，保留原始字符串值
|
||||
persistObject[propName] = value
|
||||
console.error('解析 JSON 失败。')
|
||||
}
|
||||
} else {
|
||||
persistObject[propName] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...persistObject,
|
||||
setStorage: (key, value) => {
|
||||
setProperty(key, value)
|
||||
},
|
||||
clearStorage: () => {
|
||||
getStorage().clear()
|
||||
Object.assign(persistObject, {})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,132 +1,86 @@
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import React from "react";
|
||||
import { configure } from "mobx";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import {
|
||||
createBrowserRouter,
|
||||
RouterProvider,
|
||||
} from 'react-router-dom'
|
||||
import '@/assets/global.css'
|
||||
import App from '@/views/App'
|
||||
import Standlone from '@/views/Standlone'
|
||||
import Login from '@/views/Login'
|
||||
import Logout from '@/views/Logout'
|
||||
import ErrorPage from '@/components/ErrorPage'
|
||||
import RequireAuth from '@/components/RequireAuth'
|
||||
import ReservationNewest from '@/views/reservation/Newest'
|
||||
import ReservationDetail from '@/views/reservation/Detail'
|
||||
import ChangePassword from '@/views/account/ChangePassword'
|
||||
import AccountProfile from '@/views/account/Profile'
|
||||
import AccountManagement from '@/views/account/Management'
|
||||
import RoleList from '@/views/account/RoleList'
|
||||
import FeedbackIndex from '@/views/feedback/Index'
|
||||
import FeedbackDetail from '@/views/feedback/Detail'
|
||||
import FeedbackCustomerDetail from '@/views/feedback/CustomerDetail'
|
||||
import ReportIndex from '@/views/report/Index'
|
||||
import NoticeIndex from '@/views/notice/Index'
|
||||
import NoticeDetail from '@/views/notice/Detail'
|
||||
import InvoiceIndex from '@/views/invoice/Index'
|
||||
import InvoiceDetail from '@/views/invoice/Detail'
|
||||
import InvoiceHistory from '@/views/invoice/History'
|
||||
import InvoicePaid from '@/views/invoice/Paid'
|
||||
import InvoicePaidDetail from '@/views/invoice/PaidDetail'
|
||||
import Airticket from '@/views/airticket/Index'
|
||||
import AirticketPlan from '@/views/airticket/Plan'
|
||||
import AirticketInvoice from '@/views/airticket/Invoice'
|
||||
import AirticketInvoicePaid from '@/views/airticket/InvoicePaid'
|
||||
|
||||
import Trainticket from '@/views/trainticket/index'
|
||||
import TrainticketPlan from '@/views/trainticket/plan'
|
||||
import TrainticketInvoice from '@/views/trainticket/invoice'
|
||||
import TrainticketInvoicePaid from '@/views/trainticket/invoicePaid'
|
||||
|
||||
import { ThemeContext } from '@/stores/ThemeContext'
|
||||
import { usingStorage } from '@/hooks/usingStorage'
|
||||
import useAuthStore from './stores/Auth'
|
||||
import { isNotEmpty } from '@/utils/commons'
|
||||
|
||||
import ProductsManage from '@/views/products/Manage';
|
||||
import ProductsDetail from '@/views/products/Detail';
|
||||
import ProductsAudit from '@/views/products/Audit';
|
||||
import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA,PERM_TRAIN_TICKET, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_PUT } from '@/config'
|
||||
|
||||
import './i18n'
|
||||
|
||||
const initRouter = async () => {
|
||||
return createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <App />,
|
||||
errorElement: <ErrorPage />,
|
||||
children: [
|
||||
{ index: true, element: <NoticeIndex /> },
|
||||
{ path: 'account/change-password', element: <ChangePassword />},
|
||||
{ path: 'account/profile', element: <AccountProfile />},
|
||||
{ path: 'account/management', element: <RequireAuth subject={PERM_ACCOUNT_MANAGEMENT} result={true}><AccountManagement /></RequireAuth>},
|
||||
{ path: 'account/role-list', element: <RequireAuth subject={PERM_ROLE_NEW} result={true}><RoleList /></RequireAuth>},
|
||||
{ path: 'reservation/newest', element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReservationNewest /></RequireAuth>},
|
||||
{ path: 'reservation/:reservationId', element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReservationDetail /></RequireAuth>},
|
||||
{ path: 'feedback', element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackIndex /></RequireAuth>},
|
||||
{ path: 'feedback/:GRI_SN/:CII_SN/:RefNo', element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackCustomerDetail /></RequireAuth>},
|
||||
{ path: 'feedback/:GRI_SN/:RefNo', element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackDetail /></RequireAuth>},
|
||||
{ path: 'report', element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReportIndex /></RequireAuth>},
|
||||
{ path: 'notice', element: <NoticeIndex />},
|
||||
{ path: 'notice/:CCP_BLID', element: <NoticeDetail />},
|
||||
{ path: 'invoice',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceIndex /></RequireAuth>},
|
||||
{ path: 'invoice/detail/:GMDSN/:GSN',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceDetail /></RequireAuth>},
|
||||
{ path: 'invoice/history/:GMDSN/:GSN',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceHistory /></RequireAuth>},
|
||||
{ path: 'invoice/paid',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaid /></RequireAuth>},
|
||||
{ path: 'invoice/paid/detail/:flid', element: <RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaidDetail /></RequireAuth>},
|
||||
{ path: 'airticket',element: <RequireAuth subject={PERM_AIR_TICKET} result={true}><Airticket /></RequireAuth>},
|
||||
{ path: 'airticket/plan/:coli_sn/:gri_sn',element:<RequireAuth subject={PERM_AIR_TICKET} result={true}><AirticketPlan /></RequireAuth>},
|
||||
{ path: 'airticket/invoice',element:<RequireAuth subject={PERM_AIR_TICKET} result={true}><AirticketInvoice /></RequireAuth>},
|
||||
{ path: 'airticket/invoicepaid',element:<RequireAuth subject={PERM_AIR_TICKET} result={true}><AirticketInvoicePaid /></RequireAuth>},
|
||||
|
||||
{ path: 'trainticket',element: <RequireAuth subject={PERM_TRAIN_TICKET} result={true}><Trainticket /></RequireAuth>},
|
||||
{ path: 'trainticket/plan/:coli_sn/:gri_sn',element:<RequireAuth subject={PERM_TRAIN_TICKET} result={true}><TrainticketPlan /></RequireAuth>},
|
||||
{ path: 'trainticket/invoice',element:<RequireAuth subject={PERM_TRAIN_TICKET} result={true}><TrainticketInvoice /></RequireAuth>},
|
||||
{ path: 'trainticket/invoicepaid',element:<RequireAuth subject={PERM_TRAIN_TICKET} result={true}><TrainticketInvoicePaid /></RequireAuth>},
|
||||
|
||||
{ path: "products",element: <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT} result={true}><ProductsManage /></RequireAuth>},
|
||||
{ path: "products/:travel_agency_id/:use_year/:audit_state/audit",element:<RequireAuth subject={PERM_PRODUCTS_MANAGEMENT} result={true}><ProductsAudit /></RequireAuth>},
|
||||
|
||||
{ path: "products/:travel_agency_id/:use_year/:audit_state/edit",element:<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT} result={true}><ProductsDetail /></RequireAuth>},
|
||||
|
||||
{ path: "products/audit",element:<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT} result={true}><ProductsAudit /></RequireAuth>},
|
||||
|
||||
{ path: "products/edit",element:<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT} result={true}><ProductsDetail /></RequireAuth>},
|
||||
]
|
||||
},
|
||||
{
|
||||
element: <Standlone />,
|
||||
children: [
|
||||
{ path: '/login', element: <Login /> },
|
||||
{ path: '/logout', element: <Logout /> },
|
||||
]
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const initAppliction = async () => {
|
||||
|
||||
const { loginToken, userId } = usingStorage()
|
||||
|
||||
if (isNotEmpty(userId) && isNotEmpty(loginToken)) {
|
||||
await useAuthStore.getState().initAuth()
|
||||
} from "react-router-dom";
|
||||
import RootStore from "@/stores/Root";
|
||||
import { StoreContext } from '@/stores/StoreContext';
|
||||
import "@/assets/global.css";
|
||||
import App from "@/views/App";
|
||||
import Standlone from "@/views/Standlone";
|
||||
import Login from "@/views/Login";
|
||||
import Index from "@/views/index";
|
||||
import ErrorPage from "@/views/error-page";
|
||||
import ReservationNewest from "@/views/reservation/Newest";
|
||||
import ReservationDetail from "@/views/reservation/Detail";
|
||||
import ChangePassword from "@/views/account/ChangePassword";
|
||||
import AccountProfile from "@/views/account/Profile";
|
||||
import FeedbackIndex from "@/views/feedback/Index";
|
||||
import FeedbackDetail from "@/views/feedback/Detail";
|
||||
import FeedbackCustomerDetail from "@/views/feedback/CustomerDetail";
|
||||
import ReportIndex from "@/views/report/Index";
|
||||
import NoticeIndex from "@/views/notice/Index";
|
||||
import NoticeDetail from "@/views/notice/Detail";
|
||||
import InvoiceIndex from "@/views/invoice/Index";
|
||||
import InvoiceDetail from "@/views/invoice/Detail";
|
||||
import InvoicePaid from "@/views/invoice/Paid";
|
||||
import InvoicePaidDetail from "@/views/invoice/PaidDetail";
|
||||
import ChangeVendor from "@/views/account/ChangeVendor";
|
||||
|
||||
import './i18n';
|
||||
|
||||
configure({
|
||||
useProxies: "ifavailable",
|
||||
enforceActions: "observed",
|
||||
computedRequiresReaction: true,
|
||||
observableRequiresReaction: false,
|
||||
reactionRequiresObservable: true,
|
||||
disableErrorBoundaries: process.env.NODE_ENV == "production"
|
||||
});
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <App />,
|
||||
errorElement: <ErrorPage />,
|
||||
children: [
|
||||
{ index: true, element: <Index /> },
|
||||
{ path: "reservation/newest", element: <ReservationNewest />},
|
||||
{ path: "reservation/:reservationId", element: <ReservationDetail />},
|
||||
{ path: "account/change-password", element: <ChangePassword />},
|
||||
{ path: "account/profile", element: <AccountProfile />},
|
||||
{ path: "feedback", element: <FeedbackIndex />},
|
||||
{ path: "feedback/:GRI_SN/:RefNo", element: <FeedbackDetail />},
|
||||
{ path: "feedback/:GRI_SN/:CII_SN/:RefNo", element: <FeedbackCustomerDetail />},
|
||||
{ path: "report", element: <ReportIndex />},
|
||||
{ path: "notice", element: <NoticeIndex />},
|
||||
{ path: "notice/:CCP_BLID", element: <NoticeDetail />},
|
||||
{ path: "invoice",element:<InvoiceIndex />},
|
||||
{ path: "invoice/detail/:GMDSN/:GSN",element:<InvoiceDetail />},
|
||||
{ path: "invoice/paid",element:<InvoicePaid />},
|
||||
{ path: "invoice/paid/detail/:flid",element:<InvoicePaidDetail />},
|
||||
{ path: "account/change-vendor",element:<ChangeVendor />},
|
||||
]
|
||||
},
|
||||
{
|
||||
element: <Standlone />,
|
||||
children: [
|
||||
{ path: "/login", element: <Login /> },
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const router = await initRouter()
|
||||
const root = document.getElementById('root')
|
||||
|
||||
if (!root) throw new Error('No root element found')
|
||||
const rootStore = new RootStore();
|
||||
|
||||
createRoot(root).render(
|
||||
//<React.StrictMode>
|
||||
<ThemeContext.Provider value={{ colorPrimary: '#00b96b', borderRadius: 4 }}>
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
//<React.StrictMode>
|
||||
<StoreContext.Provider value={rootStore}>
|
||||
<RouterProvider
|
||||
router={router}
|
||||
fallbackElement={() => <div>Loading...</div>}
|
||||
/>
|
||||
</ThemeContext.Provider>
|
||||
//</React.StrictMode>
|
||||
)
|
||||
}
|
||||
|
||||
initAppliction()
|
||||
</StoreContext.Provider>
|
||||
//</React.StrictMode>
|
||||
);
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
import { loadScript } from '@/utils/commons';
|
||||
import { PROJECT_NAME, BUILD_VERSION } from '@/config';
|
||||
|
||||
export const loadPageSpy = (title) => {
|
||||
|
||||
if (import.meta.env.DEV || window.$pageSpy) return
|
||||
|
||||
const PageSpyConfig = { api: 'page-spy.mycht.cn', project: PROJECT_NAME, title: title, autoRender: false };
|
||||
const PageSpySrc = [
|
||||
'https://page-spy.mycht.cn/page-spy/index.min.js'+`?${BUILD_VERSION}`,
|
||||
'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js'+`?${BUILD_VERSION}`,
|
||||
'https://page-spy.mycht.cn/plugin/rrweb/index.min.js'+`?${BUILD_VERSION}`,
|
||||
];
|
||||
|
||||
Promise.all(PageSpySrc.map((src) => loadScript(src))).then(() => {
|
||||
// 注册插件
|
||||
window.$harbor = new DataHarborPlugin();
|
||||
window.$rrweb = new RRWebPlugin();
|
||||
[window.$harbor, window.$rrweb].forEach(p => {
|
||||
PageSpy.registerPlugin(p)
|
||||
})
|
||||
window.$pageSpy = new PageSpy(PageSpyConfig);
|
||||
});
|
||||
};
|
||||
|
||||
export const uploadPageSpyLog = async () => {
|
||||
// window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
|
||||
if (window.$pageSpy) {
|
||||
await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
|
||||
alert('Success')
|
||||
} else {
|
||||
alert('Failure')
|
||||
}
|
||||
}
|
||||
|
||||
export const PageSpyLog = () => {
|
||||
return (
|
||||
<>
|
||||
{window.$pageSpy && (
|
||||
<a
|
||||
className='text-primary'
|
||||
onClick={() => {
|
||||
window.$pageSpy.triggerPlugins('onOfflineLog', 'download');
|
||||
window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
|
||||
}}>
|
||||
上传Debug日志 ({window.$pageSpy.address.substring(0, 4)})
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,191 +0,0 @@
|
||||
import { create } from 'zustand'
|
||||
import { devtools } from 'zustand/middleware'
|
||||
import { fetchJSON, postForm } from '@/utils/request'
|
||||
import { isEmpty, isNotEmpty } from '@/utils/commons'
|
||||
import { HT_HOST } from "@/config"
|
||||
import { usingStorage } from '@/hooks/usingStorage'
|
||||
|
||||
export const postAccountStatus = async (formData) => {
|
||||
|
||||
const { errcode, result } = await postForm(
|
||||
`${HT_HOST}/service-CooperateSOA/set_account_status`, formData)
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const postAccountPassword = async (formData) => {
|
||||
|
||||
const { errcode, result } = await postForm(
|
||||
`${HT_HOST}/service-CooperateSOA/reset_account_password`, formData)
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const fetchAccountList = async (params) => {
|
||||
|
||||
const { errcode, result } = await fetchJSON(
|
||||
`${HT_HOST}/service-CooperateSOA/search_account`, params)
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const postAccountForm = async (formData) => {
|
||||
|
||||
const { errcode, result } = await postForm(
|
||||
`${HT_HOST}/service-CooperateSOA/new_or_update_account`, formData)
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const postRoleForm = async (formData) => {
|
||||
|
||||
const { errcode, result } = await postForm(
|
||||
`${HT_HOST}/service-CooperateSOA/new_or_update_role`, formData)
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const fetchRoleList = async () => {
|
||||
|
||||
const { errcode, result } = await fetchJSON(
|
||||
`${HT_HOST}/service-CooperateSOA/get_role_list`)
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const fetchPermissionList = async () => {
|
||||
|
||||
const { errcode, result } = await fetchJSON(
|
||||
`${HT_HOST}/service-CooperateSOA/get_all_permission_list`)
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const fetchPermissionListByRoleId = async (params) => {
|
||||
|
||||
const { errcode, result } = await fetchJSON(
|
||||
`${HT_HOST}/service-CooperateSOA/get_role_permission_list`, params)
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const fetchTravelAgencyByName = async (name) => {
|
||||
|
||||
const { errcode, result } = await fetchJSON(
|
||||
`${HT_HOST}/Service_BaseInfoWeb/VendorList`, {q: name})
|
||||
return errcode !== 0 ? {} : result
|
||||
}
|
||||
|
||||
export const genRandomPassword = () => {
|
||||
let result = ''
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
|
||||
const charactersLength = characters.length
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength))
|
||||
}
|
||||
|
||||
result += '@' + (Math.floor(Math.random() * 900) + 100)
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const useAccountStore = create(devtools((set) => ({
|
||||
|
||||
accountList: [],
|
||||
|
||||
toggleAccountStatus: async (userId, status) => {
|
||||
|
||||
const statusValue = status ? 'enable' : 'disable'
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('lmi_sn', userId)
|
||||
formData.append('account_status', statusValue)
|
||||
|
||||
return postAccountStatus(formData)
|
||||
},
|
||||
|
||||
resetAccountPassword: async (userId, password) => {
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('lmi_sn', userId)
|
||||
formData.append('newPassword', password)
|
||||
|
||||
return postAccountPassword(formData)
|
||||
},
|
||||
|
||||
newEmptyRole: () => ({
|
||||
role_id: null,
|
||||
role_name: '',
|
||||
role_ids: ''
|
||||
}),
|
||||
|
||||
newEmptyAccount: () => {
|
||||
return {
|
||||
accountId: null,
|
||||
userId: null,
|
||||
lmi2_sn: null,
|
||||
username: '',
|
||||
realname: '',
|
||||
email: '',
|
||||
travelAgencyId: null,
|
||||
roleId: ''
|
||||
}
|
||||
},
|
||||
|
||||
saveOrUpdateRole: async (formValues) => {
|
||||
const formData = new FormData()
|
||||
formData.append('role_id', formValues.role_id)
|
||||
formData.append('role_name', formValues.role_name)
|
||||
formData.append('res_ids', formValues.res_array.join(','))
|
||||
|
||||
return postRoleForm(formData)
|
||||
},
|
||||
|
||||
saveOrUpdateAccount: async (formValues) => {
|
||||
const { userId } = usingStorage()
|
||||
const formData = new FormData()
|
||||
formData.append('wu_id', formValues.accountId)
|
||||
formData.append('lmi_sn', formValues.userId)
|
||||
formData.append('lmi2_sn', formValues.lmi2_sn)
|
||||
formData.append('user_name', formValues.username)
|
||||
formData.append('real_name', formValues.realname)
|
||||
formData.append('email', formValues.email)
|
||||
formData.append('travel_agency_id', formValues.travelAgencyId)
|
||||
formData.append('roles', formValues.roleId)
|
||||
|
||||
formData.append('opi_sn', userId)
|
||||
|
||||
return postAccountForm(formData)
|
||||
},
|
||||
|
||||
searchAccountByCriteria: async (formValues) => {
|
||||
let travel_agency_ids = null
|
||||
if (isNotEmpty(formValues.agency)) {
|
||||
travel_agency_ids = formValues.agency.map((ele) => ele.key).join(',')
|
||||
}
|
||||
const searchParams = {
|
||||
username: formValues.username,
|
||||
travel_agency_ids: travel_agency_ids,
|
||||
lgc: 2
|
||||
}
|
||||
|
||||
const resultArray = await fetchAccountList(searchParams)
|
||||
|
||||
const mapAccoutList = resultArray.map((r) => {
|
||||
return {
|
||||
accountId: r.wu_id,
|
||||
userId: r.lmi_sn,
|
||||
lmi2_sn: r.lmi2_sn,
|
||||
username: r.user_name,
|
||||
realname: r.real_name,
|
||||
email: r.email,
|
||||
lastLogin: r.wu_lastlogindate,
|
||||
travelAgencyName: r.travel_agency_name,
|
||||
travelAgencyId: r.travel_agency_id,
|
||||
disabled: r.wu_limitsign,
|
||||
// 数据库支持逗号分隔多角色(5,6,7)，目前界面只需单个。
|
||||
roleId: isEmpty(r.roles) ? 0 : parseInt(r.roles),
|
||||
role: r.roles_name,
|
||||
}
|
||||
})
|
||||
|
||||
set(() => ({
|
||||
accountList: mapAccoutList
|
||||
}))
|
||||
},
|
||||
}), { name: 'accountStore' }))
|
||||
|
||||
export default useAccountStore
|
||||
@ -1,12 +0,0 @@
|
||||
import { create } from 'zustand';
|
||||
import { devtools } from 'zustand/middleware';
|
||||
|
||||
export const useFormStore = create(
|
||||
devtools((set, get) => ({
|
||||
formValues: {},
|
||||
setFormValues: (values) => set((state) => ({ formValues: { ...state.formValues, ...values } })),
|
||||
formValuesToSub: {},
|
||||
setFormValuesToSub: (values) => set((state) => ({ formValuesToSub: { ...state.formValuesToSub, ...values } })),
|
||||
}), { name: 'formStore' })
|
||||
);
|
||||
export default useFormStore;
|
||||
@ -1,135 +1,370 @@
|
||||
import { makeAutoObservable, runInAction } from "mobx";
|
||||
import { fetchJSON, postForm } from "@/utils/request";
|
||||
import { prepareUrl, isNotEmpty } from "@/utils/commons";
|
||||
import { HT_HOST } from "@/config";
|
||||
import { json } from "react-router-dom";
|
||||
import * as config from "@/config";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import { create } from 'zustand';
|
||||
import { devtools } from 'zustand/middleware';
|
||||
|
||||
export const fetchInvoiceDetail = async (VEI_SN, GMD_SN, GRI_SN) => {
|
||||
const { errcode, ...json } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetZDDetail`, { VEI_SN, GMD_SN, GRI_SN, LGC: 1, Bill: 1 });
|
||||
return errcode !== 0 ? {} : { invoiceGroupInfo: json.GroupInfo[0], invoiceProductList: json.ProductList, invoiceCurrencyList: json.CurrencyList, invoiceZDDetail: json.ZDDetail };
|
||||
};
|
||||
|
||||
export const getInvoicekImages = async (VEI_SN, GRI_SN) => {
|
||||
const { errcode, result, ...json } = await fetchJSON(`${HT_HOST}/service-fileServer/ListFile`, { VEI_SN, GRI_SN, FilePathName: 'invoice' });
|
||||
return errcode !== 0 ? [] : result.map((data, index) => {
|
||||
return {
|
||||
uid: -index, //用负数，防止添加删除的时候错误
|
||||
name: data.file_name,
|
||||
status: "done",
|
||||
url: data.file_url,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const postEditInvoiceDetail = async (LMI_SN, GMD_SN, Currency, Cost, PayDate, Pic, Memo) => {
|
||||
const postbody = { LMI_SN, GMD_SN, Currency, Cost, PayDate, Pic, Memo };
|
||||
const formData = new FormData();
|
||||
Object.keys(postbody).forEach((key) => {
|
||||
formData.append(key, postbody[key]);
|
||||
});
|
||||
const res = await postForm(`${HT_HOST}/service-cusservice/EditSupplierFK`, formData);
|
||||
return res;
|
||||
};
|
||||
|
||||
export const postAddInvoice = async (LMI_SN, VEI_SN, GRI_SN, Currency, Cost, PayDate, Pic, Memo) => {
|
||||
const postbody = { LMI_SN, VEI_SN, GRI_SN, Currency, Cost, PayDate, Pic, Memo };
|
||||
const formData = new FormData();
|
||||
Object.keys(postbody).forEach((key) => {
|
||||
formData.append(key, postbody[key]);
|
||||
});
|
||||
const res = await postForm(`${HT_HOST}/service-cusservice/AddSupplierFK`, formData);
|
||||
return res;
|
||||
};
|
||||
|
||||
export const getInvoicePaid = async (VEI_SN, GroupNo, DateStart, DateEnd) => {
|
||||
const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetInvoicePaid`, {VEI_SN, GroupNo, DateStart, DateEnd});
|
||||
return errcode !== 0 ? [] : (Result || []).map((data, index) => ({ ...data, key: data.fl_id, }));
|
||||
};
|
||||
|
||||
export const fetchInvoicePaidDetail = async (VEI_SN, FLID) => {
|
||||
const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetInvoicePaidDetail`, { VEI_SN, fl_id: FLID });
|
||||
return errcode !== 0 ? [] : (Result || []).map((data, index) => ({ ...data, key: data.fl2_id, }));
|
||||
};
|
||||
|
||||
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),
|
||||
|
||||
setLoading: (loading) => set(() => ({ loading })),
|
||||
|
||||
setInvoiceList: (invoiceList) => set(() => ({ invoiceList })),
|
||||
setInvoicePaid: (invoicePaid) => set(() => ({ invoicePaid })),
|
||||
|
||||
async fetchInvoiceList(VEI_SN, GroupNo, DateStart, DateEnd,OrderType){
|
||||
const { setLoading, setInvoiceList } = get();
|
||||
setLoading(true);
|
||||
const searchParams = {
|
||||
VEI_SN,
|
||||
GroupNo,
|
||||
DateStart,
|
||||
DateEnd,
|
||||
OrderType: 0,
|
||||
TimeType: 0,
|
||||
limitmarket: '',
|
||||
mddgroup: '',
|
||||
SecuryGroup: '',
|
||||
TotalNum: 0,
|
||||
PageSize: 2000,
|
||||
PageIndex: 1,
|
||||
PayState: OrderType,
|
||||
};
|
||||
const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTSearchGMBPageList`, searchParams);
|
||||
const _result = errcode !== 0 ? [] : (Result || []).map((data, index) => {
|
||||
return {
|
||||
key: data.GMDSN,
|
||||
gmd_gri_sn: data.GMD_GRI_SN,
|
||||
gmd_vei_sn: data.GMD_VEI_SN,
|
||||
GetGDate: data.GetGDate,
|
||||
GMD_FillWorkers_SN: data.GMD_FillWorkers_SN,
|
||||
GMD_FWks_LastEditTime: data.GMD_FWks_LastEditTime,
|
||||
GMD_VerifyUser_SN: data.GMD_VerifyUser_SN,
|
||||
GMD_Dealed: data.GMD_Dealed,
|
||||
GMD_VRequestVerify: data.GMD_VRequestVerify,
|
||||
LeftGDate: data.LeftGDate,
|
||||
GMD_FillWorkers_Name: data.GMD_FillWorkers_Name,
|
||||
GroupName: data.GroupName,
|
||||
AllMoney: data.AllMoney,
|
||||
PersonNum: data.PersonNum,
|
||||
GMD_Currency: data.GMD_Currency,
|
||||
VName: data.VName,
|
||||
FKState: data.FKState,
|
||||
};
|
||||
});
|
||||
setInvoiceList(_result);
|
||||
setLoading(false);
|
||||
},
|
||||
|
||||
async fetchInvoicePaid(VEI_SN, GroupNo, DateStart, DateEnd){
|
||||
const { setLoading, setInvoicePaid } = get();
|
||||
setLoading(true);
|
||||
const res = await getInvoicePaid(VEI_SN, GroupNo, DateStart, DateEnd);
|
||||
setInvoicePaid(res);
|
||||
setLoading(false);
|
||||
},
|
||||
|
||||
}), { name: 'invoiceStore'})
|
||||
);
|
||||
|
||||
export default useInvoiceStore;
|
||||
class Invoice {
|
||||
constructor(root) {
|
||||
makeAutoObservable(this, { rootStore: false });
|
||||
this.root = root;
|
||||
}
|
||||
|
||||
invoiceList = []; //账单列表
|
||||
invoicekImages = []; //图片列表
|
||||
invoiceGroupInfo = {}; //账单详细
|
||||
invoiceProductList = []; //账单细项
|
||||
invoiceZDDetail = []; //报账信息
|
||||
invoiceCurrencyList = []; //币种
|
||||
invoicePicList = []; //多账单图片列表数组
|
||||
invoiceFormData = { info_money: 0, info_Currency: "", info_date: "" }; //存储form数据
|
||||
|
||||
invoicePaid = [] ; //支付账单列表
|
||||
invoicePaidDetail = []; //每期账单详细
|
||||
|
||||
loading = false;
|
||||
search_date_start = dayjs().subtract(2, "M").startOf("M");
|
||||
search_date_end = dayjs().endOf("M");
|
||||
|
||||
onDateRangeChange = dates => {
|
||||
console.log(dates);
|
||||
this.search_date_start = dates==null? null: dates[0];
|
||||
this.search_date_end = dates==null? null: dates[1];
|
||||
};
|
||||
|
||||
fetchInvoiceList(VEI_SN, GroupNo, DateStart, DateEnd,OrderType) {
|
||||
this.loading = true;
|
||||
const fetchUrl = prepareUrl(HT_HOST + "/service-cusservice/PTSearchGMBPageList")
|
||||
.append("VEI_SN", VEI_SN)
|
||||
.append("OrderType", 0)
|
||||
.append("GroupNo", GroupNo.trim())
|
||||
.append("DateStart", DateStart)
|
||||
.append("DateEnd", DateEnd)
|
||||
.append("Orderbytype", 1)
|
||||
.append("TimeType", 0)
|
||||
.append("limitmarket", "")
|
||||
.append("mddgroup", "")
|
||||
.append("SecuryGroup", "")
|
||||
.append("TotalNum", 0)
|
||||
.append("PageSize", 2000)
|
||||
.append("PageIndex", 1)
|
||||
.append("PayState",OrderType)
|
||||
.append("token",this.root.authStore.login.token)
|
||||
.build();
|
||||
|
||||
return fetchJSON(fetchUrl).then(json => {
|
||||
runInAction(() => {
|
||||
this.loading = false;
|
||||
if (json.errcode == 0) {
|
||||
if (isNotEmpty(json.Result)) {
|
||||
this.invoiceList = json.Result.map((data, index) => {
|
||||
return {
|
||||
key: data.GMDSN,
|
||||
gmd_gri_sn: data.GMD_GRI_SN,
|
||||
gmd_vei_sn: data.GMD_VEI_SN,
|
||||
GetGDate: data.GetGDate,
|
||||
GMD_FillWorkers_SN: data.GMD_FillWorkers_SN,
|
||||
GMD_FWks_LastEditTime: data.GMD_FWks_LastEditTime,
|
||||
GMD_VerifyUser_SN: data.GMD_VerifyUser_SN,
|
||||
GMD_Dealed: data.GMD_Dealed,
|
||||
GMD_VRequestVerify: data.GMD_VRequestVerify,
|
||||
LeftGDate: data.LeftGDate,
|
||||
GMD_FillWorkers_Name: data.GMD_FillWorkers_Name,
|
||||
GroupName: data.GroupName,
|
||||
AllMoney: data.AllMoney,
|
||||
PersonNum: data.PersonNum,
|
||||
GMD_Currency: data.GMD_Currency,
|
||||
VName: data.VName,
|
||||
FKState: data.FKState,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
this.invoiceList = [];
|
||||
}
|
||||
} else {
|
||||
throw new Error(json.errmsg + ": " + json.errcode);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
fetchInvoiceDetail(GMDSN, GSN) {
|
||||
const fetchUrl = prepareUrl(HT_HOST + "/service-cusservice/PTGetZDDetail")
|
||||
.append("VEI_SN", this.root.authStore.login.travelAgencyId)
|
||||
.append("GRI_SN", GSN)
|
||||
.append("GMD_SN", GMDSN)
|
||||
.append("LGC", 1)
|
||||
.append("Bill", 1)
|
||||
.append("token",this.root.authStore.login.token)
|
||||
.build();
|
||||
|
||||
return fetchJSON(fetchUrl).then(json => {
|
||||
runInAction(() => {
|
||||
if (json.errcode == 0) {
|
||||
this.invoiceGroupInfo = json.GroupInfo[0];
|
||||
this.invoiceProductList = json.ProductList;
|
||||
this.invoiceCurrencyList = json.CurrencyList;
|
||||
this.invoiceZDDetail = json.ZDDetail;
|
||||
} else {
|
||||
throw new Error(json.errmsg + ": " + json.errcode);
|
||||
}
|
||||
});
|
||||
return json;
|
||||
});
|
||||
}
|
||||
|
||||
//获取供应商提交的图片
|
||||
getInvoicekImages(VEI_SN, GRI_SN) {
|
||||
let url = `/service-fileServer/ListFile`;
|
||||
url += `?GRI_SN=${GRI_SN}&VEI_SN=${VEI_SN}&FilePathName=invoice`;
|
||||
url += `&token=${this.root.authStore.login.token}`;
|
||||
fetch(config.HT_HOST + url)
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
console.log(json);
|
||||
runInAction(() => {
|
||||
this.invoicekImages = json.result.map((data, index) => {
|
||||
return {
|
||||
uid: -index, //用负数，防止添加删除的时候错误
|
||||
name: data.file_name,
|
||||
status: "done",
|
||||
url: data.file_url,
|
||||
};
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("fetch data failed", error);
|
||||
});
|
||||
}
|
||||
|
||||
//从数据库获取图片列表
|
||||
getInvoicekImages_fromData(jsonData) {
|
||||
let arrLen = jsonData.length;
|
||||
let arrPicList = jsonData.map((data, index) => {
|
||||
const GMD_Pic = data.GMD_Pic;
|
||||
let picList = [];
|
||||
if (isNotEmpty(GMD_Pic)) {
|
||||
let js_Pic = JSON.parse(GMD_Pic);
|
||||
picList = js_Pic.map((picData, pic_Index) => {
|
||||
return {
|
||||
uid: -pic_Index, //用负数，防止添加删除的时候错误
|
||||
name: "",
|
||||
status: "done",
|
||||
url: picData.url,
|
||||
};
|
||||
});
|
||||
}
|
||||
if (data.GMD_Dealed == false && arrLen == index + 1) {
|
||||
this.invoicekImages = picList;
|
||||
}
|
||||
return picList;
|
||||
});
|
||||
|
||||
runInAction(() => {
|
||||
this.invoicePicList = arrPicList;
|
||||
});
|
||||
}
|
||||
|
||||
//获取数据库的表单默认数据回填。
|
||||
getFormData(jsonData) {
|
||||
let arrLen = jsonData.length;
|
||||
return jsonData.map((data, index) => {
|
||||
if (data.GMD_Dealed == false && arrLen == index + 1) {
|
||||
//只有最后一条账单未审核通过才显示
|
||||
runInAction(() => {
|
||||
this.invoiceFormData = { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "" };
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
removeFeedbackImages(fileurl) {
|
||||
let url = `/service-fileServer/FileDelete`;
|
||||
url += `?fileurl=${fileurl}`;
|
||||
url += `&token=${this.root.authStore.login.token}`;
|
||||
return fetch(config.HT_HOST + url)
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
console.log(json);
|
||||
return json.Result;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("fetch data failed", error);
|
||||
});
|
||||
}
|
||||
|
||||
postEditInvoiceDetail(GMD_SN, Currency, Cost, PayDate, Pic, Memo) {
|
||||
let postUrl = HT_HOST + "/service-cusservice/EditSupplierFK";
|
||||
let formData = new FormData();
|
||||
formData.append("LMI_SN", this.root.authStore.login.userId);
|
||||
formData.append("GMD_SN", GMD_SN);
|
||||
formData.append("Currency", Currency);
|
||||
formData.append("Cost", Cost);
|
||||
formData.append("PayDate", isNotEmpty(PayDate) ? PayDate : "");
|
||||
formData.append("Pic", Pic);
|
||||
formData.append("Memo", Memo);
|
||||
formData.append("token",this.root.authStore.login.token);
|
||||
|
||||
return postForm(postUrl, formData).then(json => {
|
||||
console.info(json);
|
||||
return json;
|
||||
});
|
||||
}
|
||||
|
||||
postAddInvoice(GRI_SN, Currency, Cost, PayDate, Pic, Memo) {
|
||||
let postUrl = HT_HOST + "/service-cusservice/AddSupplierFK";
|
||||
let formData = new FormData();
|
||||
formData.append("LMI_SN", this.root.authStore.login.userId);
|
||||
formData.append("VEI_SN", this.root.authStore.login.travelAgencyId);
|
||||
formData.append("GRI_SN", GRI_SN);
|
||||
formData.append("Currency", Currency);
|
||||
formData.append("Cost", Cost);
|
||||
formData.append("PayDate", isNotEmpty(PayDate) ? PayDate : "");
|
||||
formData.append("Pic", Pic);
|
||||
formData.append("Memo", Memo);
|
||||
formData.append("token",this.root.authStore.login.token);
|
||||
return postForm(postUrl, formData).then(json => {
|
||||
console.info(json);
|
||||
return json;
|
||||
});
|
||||
}
|
||||
|
||||
//账单状态
|
||||
invoiceStatus(FKState) {
|
||||
switch (FKState - 1) {
|
||||
case 1:
|
||||
return "Submitted";
|
||||
break;
|
||||
case 2:
|
||||
return "Travel Advisor";
|
||||
break;
|
||||
case 3:
|
||||
return "Finance Dept";
|
||||
break;
|
||||
case 4:
|
||||
return "Paid";
|
||||
break;
|
||||
default:
|
||||
return "";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
fetchInvoicePaid(VEI_SN, GroupNo, DateStart, DateEnd) {
|
||||
this.loading = true;
|
||||
const fetchUrl = prepareUrl(HT_HOST + "/service-Cooperate/Cooperate/GetInvoicePaid")
|
||||
.append("VEI_SN", VEI_SN)
|
||||
.append("GroupNo", GroupNo)
|
||||
.append("DateStart", DateStart)
|
||||
.append("DateEnd", DateEnd)
|
||||
.append("token",this.root.authStore.login.token)
|
||||
.build();
|
||||
|
||||
return fetchJSON(fetchUrl).then(json => {
|
||||
runInAction(() => {
|
||||
this.loading = false;
|
||||
if (json.errcode == 0) {
|
||||
if (isNotEmpty(json.Result)) {
|
||||
this.invoicePaid = json.Result.map((data, index) => {
|
||||
return {
|
||||
key: data.fl_id,
|
||||
fl_finaceNo: data.fl_finaceNo,
|
||||
fl_vei_sn: data.fl_vei_sn,
|
||||
fl_year: data.fl_year,
|
||||
fl_month: data.fl_month,
|
||||
fl_memo: data.fl_memo,
|
||||
fl_adddate: data.fl_adddate,
|
||||
fl_addUserSn: data.fl_addUserSn,
|
||||
fl_updateUserSn: data.fl_updateUserSn,
|
||||
fl_updatetime: data.fl_updatetime,
|
||||
fl_state: data.fl_state,
|
||||
fl_paid: data.fl_paid,
|
||||
fl_pic: data.fl_pic,
|
||||
fcount: data.fcount,
|
||||
pSum: data.pSum,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
this.invoicePaid = [];
|
||||
}
|
||||
} else {
|
||||
throw new Error(json.errmsg + ": " + json.errcode);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
fetchInvoicePaidDetail(VEI_SN,FLID){
|
||||
this.loading = true;
|
||||
const fetchUrl = prepareUrl(HT_HOST + "/service-Cooperate/Cooperate/GetInvoicePaidDetail")
|
||||
.append("VEI_SN", VEI_SN)
|
||||
.append("fl_id", FLID)
|
||||
.append("token",this.root.authStore.login.token)
|
||||
.build();
|
||||
|
||||
return fetchJSON(fetchUrl).then(json => {
|
||||
runInAction(() => {
|
||||
this.loading = false;
|
||||
if (json.errcode == 0) {
|
||||
if (isNotEmpty(json.Result)) {
|
||||
this.invoicePaidDetail = json.Result.map((data, index) => {
|
||||
return {
|
||||
key: data.fl2_id,
|
||||
fl2_fl_id: data.fl2_fl_id,
|
||||
fl2_GroupName: data.fl2_GroupName,
|
||||
fl2_gri_sn: data.fl2_gri_sn,
|
||||
fl2_gmd_sn: data.fl2_gmd_sn,
|
||||
fl2_wl: data.fl2_wl,
|
||||
fl2_ArriveDate: data.fl2_ArriveDate,
|
||||
fl2_price: data.fl2_price,
|
||||
fl2_state: data.fl2_state,
|
||||
fl2_updatetime: data.fl2_updatetime,
|
||||
fl2_updateUserSn: data.fl2_updateUserSn,
|
||||
fl2_memo: data.fl2_memo,
|
||||
fl2_memo2: data.fl2_memo2,
|
||||
fl2_paid: data.fl2_paid,
|
||||
fl2_pic: data.fl2_pic,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
this.invoicePaidDetail = [];
|
||||
}
|
||||
} else {
|
||||
throw new Error(json.errmsg + ": " + json.errcode);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* 测试数据 */
|
||||
//账单列表范例数据
|
||||
testData = [
|
||||
{
|
||||
GSMSN: 449865,
|
||||
gmd_gri_sn: 334233,
|
||||
gmd_vei_sn: 628,
|
||||
GetDate: "2023-04-2 00:33:33",
|
||||
GMD_FillWorkers_SN: 8617,
|
||||
GMD_FWks_LastEditTime: "2023-04-26 12:33:33",
|
||||
GMD_VerifyUser_SN: 8928,
|
||||
GMD_Dealed: 1,
|
||||
GMD_VRequestVerify: 1,
|
||||
TotalCount: 22,
|
||||
LeftGDate: "2023-03-30 00:00:00",
|
||||
GMD_FillWorkers_Name: "",
|
||||
GroupName: " 中华游230501-CA230402033",
|
||||
AllMoney: 3539,
|
||||
FKState: 1,
|
||||
GMD_Currency: "",
|
||||
PersonNum: "1大1小",
|
||||
VName: "",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export default Invoice;
|
||||
|
||||
@ -1,453 +0,0 @@
|
||||
import { create } from 'zustand';
|
||||
import { devtools } from 'zustand/middleware';
|
||||
import dayjs from 'dayjs'
|
||||
import { fetchJSON, postForm, postJSON } from '@/utils/request';
|
||||
import { HT_HOST } from '@/config';
|
||||
import { groupBy, generateId, isNotEmpty } from '@/utils/commons';
|
||||
|
||||
export const searchAgencyAction = async (param) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/products_search`, param);
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索所有产品, 返回产品列表
|
||||
* ! 只有审核通过, 已发布的
|
||||
* @param {object} params { keyword, use_year, product_types, travel_agency_id, city }
|
||||
*/
|
||||
export const searchPublishedProductsAction = async (param) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/web_products_search`, param);
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
export const copyAgencyDataAction = async (postbody) => {
|
||||
const formData = new FormData();
|
||||
Object.keys(postbody).forEach((key) => {
|
||||
formData.append(key, postbody[key]);
|
||||
});
|
||||
const { errcode, result } = await postForm(`${HT_HOST}/Service_BaseInfoWeb/agency_products_copy`, formData);
|
||||
return errcode === 0 ? true : false;
|
||||
};
|
||||
|
||||
export const getAgencyProductsAction = async (param) => {
|
||||
const _param = { ...param, use_year: String(param.use_year || '').replace('all', ''), audit_state: String(param.audit_state || '').replace('all', '') };
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/travel_agency_products`, _param);
|
||||
return errcode !== 0 ? { agency: {}, products: [] } : result;
|
||||
};
|
||||
|
||||
export const getAgencyAllExtrasAction = async (param) => {
|
||||
const _param = { ...param, use_year: String(param.use_year || '').replace('all', ''), };
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_products_extras`, _param);
|
||||
const extrasMapped = result.reduce((acc, curr) => ({...acc, [curr.product_id]: curr.extras}), {});
|
||||
return errcode !== 0 ? {} : extrasMapped;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} body { id, travel_agency_id, extras: [{id, title, code}] }
|
||||
*/
|
||||
export const addProductExtraAction = async (body) => {
|
||||
// console.log('addProductExtraAction', body);
|
||||
// return true; // test: 先不更新到HT
|
||||
const { errcode, result } = await postJSON(`${HT_HOST}/Service_BaseInfoWeb/products_extras_add`, body);
|
||||
return errcode === 0 ? true : false;
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export const delProductExtrasAction = async (body) => {
|
||||
// return true; // test: 先不更新到HT
|
||||
const { errcode, result } = await postJSON(`${HT_HOST}/Service_BaseInfoWeb/products_extras_del`, body);
|
||||
return errcode === 0 ? true : false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取指定产品的附加项目
|
||||
* @param {object} param { id, travel_agency_id, use_year }
|
||||
*/
|
||||
export const getAgencyProductExtrasAction = async (param) => {
|
||||
const _param = { ...param, use_year: String(param.use_year || '').replace('all', '') };
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/products_extras`, _param);
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 审核一条价格
|
||||
*/
|
||||
export const postProductsQuoteAuditAction = async (auditState, quoteRow) => {
|
||||
const postbody = {
|
||||
audit_state: auditState,
|
||||
id: quoteRow.id,
|
||||
travel_agency_id: quoteRow.travel_agency_id,
|
||||
};
|
||||
const formData = new FormData();
|
||||
Object.keys(postbody).forEach((key) => {
|
||||
formData.append(key, postbody[key]);
|
||||
});
|
||||
const json = await postForm(`${HT_HOST}/Service_BaseInfoWeb/quotation_audit`, formData);
|
||||
return json;
|
||||
// return errcode !== 0 ? {} : result;
|
||||
};
|
||||
|
||||
export const postAgencyProductsAuditAction = async (auditState, agency) => {
|
||||
const postbody = {
|
||||
audit_state: auditState,
|
||||
travel_agency_id: agency.travel_agency_id,
|
||||
use_year: agency.use_year,
|
||||
};
|
||||
const formData = new FormData();
|
||||
Object.keys(postbody).forEach((key) => {
|
||||
formData.append(key, postbody[key]);
|
||||
});
|
||||
const json = await postForm(`${HT_HOST}/Service_BaseInfoWeb/agency_products_audit`, formData);
|
||||
return json;
|
||||
};
|
||||
|
||||
/**
|
||||
* 供应商提交审核
|
||||
*/
|
||||
export const postAgencyAuditAction = async (travel_agency_id, use_year) => {
|
||||
const postbody = {
|
||||
use_year,
|
||||
travel_agency_id,
|
||||
};
|
||||
const formData = new FormData();
|
||||
Object.keys(postbody).forEach((key) => {
|
||||
formData.append(key, postbody[key]);
|
||||
});
|
||||
const { errcode, result } = await postForm(`${HT_HOST}/Service_BaseInfoWeb/agency_submit`, formData);
|
||||
return { errcode, result, success: errcode === 0 };
|
||||
// const { errcode, result } = json;
|
||||
// return errcode !== 0 ? {} : result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存一个产品
|
||||
*/
|
||||
export const postProductsSaveAction = async (products) => {
|
||||
const { errcode, result } = await postJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_save`, products);
|
||||
return { errcode, result, success: errcode === 0 };
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除产品报价
|
||||
*/
|
||||
export const deleteQuotationAction = async (id) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_quotation_delete`, {id});
|
||||
return { errcode, result, success: errcode === 0 };
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取合同备注
|
||||
*/
|
||||
export const fetchRemarkList = async (params) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_memo_get`, params)
|
||||
return { errcode, result, success: errcode === 0 }
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取合同备注
|
||||
*/
|
||||
export const postRemarkList = async (params) => {
|
||||
const { errcode, result } = await postJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_memo_add`, params)
|
||||
return { errcode, result, success: errcode === 0 }
|
||||
}
|
||||
|
||||
const defaultRemarkList = [
|
||||
{id: 0, "product_type_id": "6","Memo": ""},
|
||||
{id: 0, "product_type_id": "B","Memo": ""},
|
||||
{id: 0, "product_type_id": "J","Memo": ""},
|
||||
{id: 0, "product_type_id": "Q","Memo": ""},
|
||||
{id: 0, "product_type_id": "7","Memo": ""},
|
||||
{id: 0, "product_type_id": "R","Memo": ""},
|
||||
{id: 0, "product_type_id": "D","Memo": ""}
|
||||
]
|
||||
|
||||
const initialState = {
|
||||
loading: false,
|
||||
searchValues: {}, // 客服首页: 搜索条件
|
||||
agencyList: [], // 客服首页: 搜索结果
|
||||
activeAgency: {}, // 审核/编辑 页: 当前的供应商
|
||||
activeAgencyState: null,
|
||||
agencyProducts: {}, // 审核/编辑 页: 供应商产品列表
|
||||
editingProduct: {}, // 编辑页: 当前编辑的产品
|
||||
quotationList: [], // 编辑页: 当前产品报价列表
|
||||
editing: false,
|
||||
switchParams: {}, // 头部切换参数
|
||||
}
|
||||
|
||||
export const useProductsStore = create(
|
||||
devtools((set, get) => ({
|
||||
// 初始化状态
|
||||
...initialState,
|
||||
|
||||
// state actions
|
||||
setLoading: (loading) => set({ loading }),
|
||||
setSearchValues: (searchValues) => set({ searchValues }),
|
||||
setAgencyList: (agencyList) => set({ agencyList }),
|
||||
setActiveAgency: (activeAgency) => set({ activeAgency }),
|
||||
setActiveAgencyState: (activeAgencyState) => set({ activeAgencyState }),
|
||||
setAgencyProducts: (agencyProducts) => set({ agencyProducts }),
|
||||
|
||||
setEditingProduct: (product) => {
|
||||
set(() => ({
|
||||
editingProduct: product,
|
||||
quotationList: (product?.quotation??[]).map(q => {
|
||||
return {
|
||||
...q,
|
||||
key: generateId(),
|
||||
fresh: false
|
||||
}
|
||||
})
|
||||
}))
|
||||
},
|
||||
setEditing: (editing) => set({ editing }),
|
||||
setSwitchParams: (switchParams) => set({ switchParams }),
|
||||
|
||||
appendNewProduct: (productItem) => {
|
||||
const { setActiveAgency, agencyProducts, setAgencyProducts } = get();
|
||||
const typeGroup = agencyProducts[productItem.info.product_type_id] || [];
|
||||
const newIndex = typeGroup.findIndex((item) => item.info.id === productItem.info.id);
|
||||
if (newIndex !== -1) {
|
||||
typeGroup.splice(newIndex, 1, productItem);
|
||||
} else {
|
||||
typeGroup.unshift(productItem);
|
||||
}
|
||||
return set({
|
||||
agencyProducts: { ...agencyProducts, [productItem.info.product_type_id]: typeGroup },
|
||||
});
|
||||
},
|
||||
|
||||
reset: () => set(initialState),
|
||||
|
||||
getRemarkList: async() => {
|
||||
const {switchParams} = get()
|
||||
const { result, success } = await fetchRemarkList({
|
||||
travel_agency_id: switchParams.travel_agency_id, use_year: switchParams.use_year
|
||||
})
|
||||
if (success) {
|
||||
const mapRemarkList = defaultRemarkList.map(remark => {
|
||||
const filterResult = result.filter(r => r.product_type_id === remark.product_type_id)
|
||||
if (filterResult.length > 0) return filterResult[0]
|
||||
else return remark
|
||||
})
|
||||
|
||||
return Promise.resolve(mapRemarkList)
|
||||
} else {
|
||||
return Promise.resolve('获取合同备注失败')
|
||||
}
|
||||
},
|
||||
|
||||
saveOrUpdateRemark: async(remarkList) => {
|
||||
const {switchParams} = get()
|
||||
|
||||
const mapRemarkList = remarkList.map(remark => {
|
||||
return {
|
||||
id: remark.id,
|
||||
travel_agency_id: switchParams.travel_agency_id,
|
||||
use_year: switchParams.use_year,
|
||||
product_type_id: remark.product_type_id,
|
||||
Memo: remark.Memo,
|
||||
}
|
||||
})
|
||||
|
||||
const { result, success } = await postRemarkList(mapRemarkList)
|
||||
if (success) {
|
||||
return Promise.resolve(result)
|
||||
} else {
|
||||
return Promise.resolve('保存合同备注失败')
|
||||
}
|
||||
},
|
||||
|
||||
newEmptyQuotation: () => ({
|
||||
id: null,
|
||||
adult_cost: 0,
|
||||
child_cost: 0,
|
||||
currency: 'RMB',
|
||||
unit_id: '0',
|
||||
group_size_min: 1,
|
||||
group_size_max: 10,
|
||||
use_dates: [
|
||||
dayjs().startOf('M'),
|
||||
dayjs().endOf('M')
|
||||
],
|
||||
weekdayList: [],
|
||||
fresh: true // 标识是否是新记录，新记录才用添加列表
|
||||
}),
|
||||
|
||||
appendQuotationList: (defList) => {
|
||||
const { activeAgency, editingProduct, quotationList } = get()
|
||||
const generatedList = []
|
||||
|
||||
defList.forEach(definition => {
|
||||
definition?.useDateList.map(useDateItem => {
|
||||
const mappedPriceList = definition?.priceList.map(price => {
|
||||
return {
|
||||
id: null,
|
||||
adult_cost: price.priceInput.audultPrice,
|
||||
child_cost: price.priceInput.childrenPrice,
|
||||
group_size_min: price.priceInput.numberStart,
|
||||
group_size_max: price.priceInput.numberEnd,
|
||||
|
||||
currency: definition.currency,
|
||||
unit_id: definition.unitId,
|
||||
// 保持和 API 返回格式一致，日期要转换为字符串
|
||||
use_dates_start: useDateItem.useDate[0].format('YYYY-MM-DD'),
|
||||
use_dates_end: useDateItem.useDate[1].format('YYYY-MM-DD'),
|
||||
weekdays: definition.weekend.join(','),
|
||||
WPI_SN: editingProduct.info.id,
|
||||
WPP_VEI_SN: activeAgency.travel_agency_id,
|
||||
lastedit_changed: '',
|
||||
audit_state_id: -1,
|
||||
key: generateId(),
|
||||
fresh: false
|
||||
}
|
||||
})
|
||||
generatedList.push(...mappedPriceList)
|
||||
})
|
||||
})
|
||||
|
||||
const mergedList = [...quotationList,...generatedList]
|
||||
set(() => ({
|
||||
quotationList: mergedList
|
||||
}))
|
||||
|
||||
return mergedList
|
||||
},
|
||||
|
||||
saveOrUpdateQuotation: (formValues) => {
|
||||
|
||||
const { activeAgency, editingProduct, quotationList } = get()
|
||||
let mergedList = []
|
||||
|
||||
formValues.WPI_SN = editingProduct.info.id
|
||||
formValues.WPP_VEI_SN = activeAgency.travel_agency_id
|
||||
formValues.use_dates_start = formValues.use_dates[0].format('YYYY-MM-DD')
|
||||
formValues.use_dates_end = formValues.use_dates[1].format('YYYY-MM-DD')
|
||||
formValues.weekdays = formValues.weekdayList.join(',')
|
||||
|
||||
if (formValues.fresh) {
|
||||
formValues.key = generateId()
|
||||
formValues.lastedit_changed = ''
|
||||
formValues.audit_state_id = -1 // 新增,
|
||||
formValues.fresh = false // 添加到列表后就不是新纪录，保存要修改原来记录
|
||||
mergedList = [...quotationList,...[formValues]]
|
||||
} else {
|
||||
mergedList = quotationList.map(prevQuotation => {
|
||||
if (prevQuotation.key === formValues.key) {
|
||||
const changedList = []
|
||||
for (const [key, value] of Object.entries(formValues)) {
|
||||
if (key === 'use_dates' || key === 'id' || key === 'key') continue
|
||||
|
||||
const preValue = prevQuotation[key]
|
||||
const hasChanged = preValue !== value
|
||||
|
||||
if (hasChanged) {
|
||||
changedList.push({
|
||||
[key]: preValue,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...prevQuotation,
|
||||
audit_state_id: -1,
|
||||
adult_cost: formValues.adult_cost,
|
||||
child_cost: formValues.child_cost,
|
||||
currency: formValues.currency,
|
||||
unit_id: formValues.unit_id,
|
||||
group_size_min: formValues.group_size_min,
|
||||
group_size_max: formValues.group_size_max,
|
||||
use_dates_start: formValues.use_dates_start,
|
||||
use_dates_end: formValues.use_dates_end,
|
||||
weekdays: formValues.weekdays,
|
||||
lastedit_changed: JSON.stringify(changedList, null, 2)
|
||||
}
|
||||
} else {
|
||||
return prevQuotation
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
set(() => ({
|
||||
quotationList: mergedList
|
||||
}))
|
||||
|
||||
return mergedList
|
||||
},
|
||||
|
||||
deleteQuotation: async(quotation) => {
|
||||
const { editingProduct, quotationList, agencyProducts } = get()
|
||||
const productTypeId = editingProduct.info.product_type_id;
|
||||
const quotationId = quotation.id
|
||||
const newQuotationList = quotationList.filter(q => {
|
||||
return q.key != quotation.key
|
||||
})
|
||||
|
||||
const newProductList = agencyProducts[productTypeId].map(p => {
|
||||
if (p.info.id == editingProduct.info.id) {
|
||||
return {
|
||||
...editingProduct,
|
||||
quotation: newQuotationList
|
||||
}
|
||||
} else {
|
||||
return p
|
||||
}
|
||||
})
|
||||
|
||||
set({
|
||||
agencyProducts: {
|
||||
...agencyProducts,
|
||||
[productTypeId]: newProductList
|
||||
},
|
||||
quotationList: newQuotationList
|
||||
})
|
||||
|
||||
let promiseDelete = Promise.resolve(newQuotationList)
|
||||
|
||||
if (isNotEmpty(quotationId)) {
|
||||
const { result, success } = await deleteQuotationAction(quotationId)
|
||||
if (!success) {
|
||||
promiseDelete = Promise.reject(result)
|
||||
}
|
||||
}
|
||||
|
||||
return promiseDelete
|
||||
},
|
||||
|
||||
// side effects
|
||||
searchAgency: async (param) => {
|
||||
const { setLoading, setAgencyList } = get();
|
||||
setLoading(true);
|
||||
const res = await searchAgencyAction(param);
|
||||
setAgencyList(res);
|
||||
setLoading(false);
|
||||
},
|
||||
|
||||
getAgencyProducts: async (param) => {
|
||||
const { setLoading, setActiveAgency, setActiveAgencyState, setAgencyProducts, editingProduct, setEditingProduct } = get();
|
||||
setLoading(true);
|
||||
setAgencyProducts({});
|
||||
// setEditingProduct({});
|
||||
const res = await getAgencyProductsAction(param);
|
||||
|
||||
const productsData = groupBy(res.products, (row) => row.info.product_type_id);
|
||||
setAgencyProducts(productsData);
|
||||
setActiveAgency(res.agency);
|
||||
setActiveAgencyState(res.agency.audit_state_id);
|
||||
if (editingProduct?.info?.id) {
|
||||
const item = (productsData[editingProduct.info.product_type_id] || []).find((item) => item.info.id === editingProduct.info.id);
|
||||
setEditingProduct(item);
|
||||
} else {
|
||||
setEditingProduct({});
|
||||
}
|
||||
setLoading(false);
|
||||
},
|
||||
|
||||
getAgencyProductExtras: async (param) => {
|
||||
const res = await getAgencyProductExtrasAction(param);
|
||||
// todo:
|
||||
},
|
||||
}), { name: 'productStore' })
|
||||
);
|
||||
export default useProductsStore;
|
||||
@ -1,69 +1,113 @@
|
||||
import { fetchJSON } from "@/utils/request";
|
||||
import { makeAutoObservable, runInAction } from "mobx";
|
||||
import { fetchJSON, postForm } from "@/utils/request";
|
||||
import { prepareUrl, isNotEmpty } from "@/utils/commons";
|
||||
import { HT_HOST } from "@/config";
|
||||
import { create } from 'zustand';
|
||||
import { devtools } from 'zustand/middleware';
|
||||
import { json } from "react-router-dom";
|
||||
import * as config from "@/config";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const initialState = {
|
||||
loading: false,
|
||||
vendorScoresData: [], //地接统计数据集，合计数据，每月数据，地接考核分数
|
||||
productScoresData: [], //产品体验分析 常用酒店分析, 导游接待情况
|
||||
commendScoresData: [], //表扬情况, 投诉情况, 评建议
|
||||
};
|
||||
export const useReportStore = create(
|
||||
devtools((set, get) => ({
|
||||
...initialState,
|
||||
reset: () => set(initialState),
|
||||
class Report {
|
||||
constructor(root) {
|
||||
makeAutoObservable(this, { rootStore: false });
|
||||
this.root = root;
|
||||
}
|
||||
|
||||
setLoading: (loading) => set({ loading }),
|
||||
setVendorScoresData: (vendorScoresData) => set({ vendorScoresData }),
|
||||
setProductScoresData: (productScoresData) => set({ productScoresData }),
|
||||
setCommendScoresData: (commendScoresData) => set({ commendScoresData }),
|
||||
vendorScoresData = []; //地接统计数据集，合计数据，每月数据，地接考核分数
|
||||
productScoresData = []; //产品体验分析 常用酒店分析, 导游接待情况
|
||||
commendScoresData = []; //表扬情况, 投诉情况, 评建议
|
||||
|
||||
async getHWVendorScores(VEI_SN, StartDate, EndDate) {
|
||||
const { setLoading, setVendorScoresData } = get();
|
||||
setLoading(true);
|
||||
const searchParams = {
|
||||
VEI_SN,
|
||||
StartDate,
|
||||
EndDate,
|
||||
StrDEI_SN: '(,-1,)',
|
||||
OrderType: '-1',
|
||||
GroupType: '-1',
|
||||
};
|
||||
const { errcode, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWVendorScores`, searchParams);
|
||||
setVendorScoresData(errcode === 0 ? Result : {});
|
||||
// setLoading(false);
|
||||
},
|
||||
async getHWProductScores(VEI_SN, StartDate, EndDate) {
|
||||
const { setLoading, setProductScoresData } = get();
|
||||
setLoading(true);
|
||||
const searchParams = {
|
||||
VEI_SN,
|
||||
StartDate,
|
||||
EndDate,
|
||||
StrDEI_SN: '(,-1,)',
|
||||
OrderType: '-1',
|
||||
GroupType: '-1',
|
||||
};
|
||||
const { errcode, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWProductScores`, searchParams);
|
||||
setProductScoresData(errcode === 0 ? Result : {});
|
||||
setLoading(false);
|
||||
},
|
||||
async getHWCommendScores(VEI_SN, StartDate, EndDate) {
|
||||
const { setLoading, setCommendScoresData } = get();
|
||||
setLoading(true);
|
||||
const searchParams = {
|
||||
VEI_SN,
|
||||
StartDate,
|
||||
EndDate,
|
||||
StrDEI_SN: '(,-1,)',
|
||||
OrderType: '-1',
|
||||
GroupType: '-1',
|
||||
};
|
||||
const { errcode, ...Result } = await fetchJSON(`${HT_HOST}/service-cusservice/PTGetHWCommendScores`, searchParams);
|
||||
setCommendScoresData(errcode === 0 ? Result : {});
|
||||
// setLoading(false);
|
||||
},
|
||||
}), { name: 'reportStore'})
|
||||
);
|
||||
export default useReportStore;
|
||||
loading = false;
|
||||
search_date_start = dayjs().month(0).startOf("month");
|
||||
search_date_end = dayjs().month(11).endOf("month");
|
||||
|
||||
onDateRangeChange = dates => {
|
||||
this.search_date_start = dates == null ? null : dates[0].startOf("month");
|
||||
this.search_date_end = dates == null ? null : dates[1].endOf("month");
|
||||
};
|
||||
|
||||
getHWVendorScores(VEI_SN, StartDate, EndDate) {
|
||||
this.loading = true;
|
||||
const fetchUrl = prepareUrl(HT_HOST +"/service-cusservice/PTGetHWVendorScores")
|
||||
.append("VEI_SN", VEI_SN)
|
||||
.append("StartDate", StartDate)
|
||||
.append("EndDate", EndDate)
|
||||
.append("StrDEI_SN", "(,-1,)")
|
||||
.append("OrderType", "-1")
|
||||
.append("GroupType", "-1")
|
||||
.append("token", this.root.authStore.login.token)
|
||||
.build();
|
||||
|
||||
return fetchJSON(fetchUrl).then(json => {
|
||||
runInAction(() => {
|
||||
this.loading = false;
|
||||
if (json.errcode == 0) {
|
||||
if (isNotEmpty(json)) {
|
||||
this.vendorScoresData = json;
|
||||
} else {
|
||||
this.vendorScoresData = [];
|
||||
}
|
||||
} else {
|
||||
throw new Error(json.errmsg + ": " + json.errcode);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getHWProductScores(VEI_SN, StartDate, EndDate) {
|
||||
this.loading = true;
|
||||
const fetchUrl = prepareUrl(HT_HOST +"/service-cusservice/PTGetHWProductScores")
|
||||
.append("VEI_SN", VEI_SN)
|
||||
.append("StartDate", StartDate)
|
||||
.append("EndDate", EndDate)
|
||||
.append("StrDEI_SN", "(,-1,)")
|
||||
.append("OrderType", "-1")
|
||||
.append("GroupType", "-1")
|
||||
.append("token", this.root.authStore.login.token)
|
||||
.build();
|
||||
|
||||
return fetchJSON(fetchUrl).then(json => {
|
||||
runInAction(() => {
|
||||
this.loading = false;
|
||||
if (json.errcode == 0) {
|
||||
if (isNotEmpty(json)) {
|
||||
this.productScoresData = json;
|
||||
} else {
|
||||
this.productScoresData = [];
|
||||
}
|
||||
} else {
|
||||
throw new Error(json.errmsg + ": " + json.errcode);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getHWCommendScores(VEI_SN, StartDate, EndDate) {
|
||||
this.loading = true;
|
||||
const fetchUrl = prepareUrl(HT_HOST +"/service-cusservice/PTGetHWCommendScores")
|
||||
.append("VEI_SN", VEI_SN)
|
||||
.append("StartDate", StartDate)
|
||||
.append("EndDate", EndDate)
|
||||
.append("StrDEI_SN", "(,-1,)")
|
||||
.append("OrderType", "-1")
|
||||
.append("GroupType", "-1")
|
||||
.append("token", this.root.authStore.login.token)
|
||||
.build();
|
||||
|
||||
return fetchJSON(fetchUrl).then(json => {
|
||||
runInAction(() => {
|
||||
this.loading = false;
|
||||
if (json.errcode == 0) {
|
||||
if (isNotEmpty(json)) {
|
||||
this.commendScoresData = json;
|
||||
} else {
|
||||
this.commendScoresData = [];
|
||||
}
|
||||
} else {
|
||||
throw new Error(json.errmsg + ": " + json.errcode);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Report;
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
import { makeAutoObservable } from "mobx";
|
||||
import Reservation from "./Reservation";
|
||||
import Feedback from "./Feedback";
|
||||
import Notice from "./Notice";
|
||||
import Auth from "./Auth";
|
||||
import Invoice from "./Invoice";
|
||||
import Report from "./Report";
|
||||
|
||||
class Root {
|
||||
constructor() {
|
||||
this.reservationStore = new Reservation(this);
|
||||
this.feedbackStore = new Feedback(this);
|
||||
this.noticeStore = new Notice(this);
|
||||
this.authStore = new Auth(this);
|
||||
this.invoiceStore = new Invoice(this);
|
||||
this.reportStore = new Report(this);
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
clearSession() {
|
||||
if (window.sessionStorage) {
|
||||
const sessionStorage = window.sessionStorage;
|
||||
sessionStorage.clear();
|
||||
} else {
|
||||
console.error('browser not support sessionStorage!');
|
||||
}
|
||||
}
|
||||
|
||||
getSession(key) {
|
||||
if (window.sessionStorage) {
|
||||
const sessionStorage = window.sessionStorage;
|
||||
return sessionStorage.getItem(key);
|
||||
} else {
|
||||
console.error('browser not support sessionStorage!');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
putSession(key, value) {
|
||||
if (window.sessionStorage) {
|
||||
const sessionStorage = window.sessionStorage;
|
||||
return sessionStorage.setItem(key, value);
|
||||
} else {
|
||||
console.error('browser not support sessionStorage!');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Root;
|
||||
@ -0,0 +1,7 @@
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
export const StoreContext = createContext();
|
||||
|
||||
export function useStore() {
|
||||
return useContext(StoreContext);
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { createContext, useContext } from 'react'
|
||||
|
||||
export const ThemeContext = createContext({})
|
||||
|
||||
export function useThemeContext() {
|
||||
return useContext(ThemeContext)
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
const initListener = []
|
||||
const authListener = []
|
||||
|
||||
export const addInitLinstener = (fn) => {
|
||||
initListener.push(fn)
|
||||
}
|
||||
|
||||
export const addAuthLinstener = (fn) => {
|
||||
authListener.push(fn)
|
||||
}
|
||||
|
||||
export const notifyInit = async () => {
|
||||
for (const listener of initListener) {
|
||||
await listener()
|
||||
}
|
||||
}
|
||||
|
||||
export const notifyAuth = async (obj) => {
|
||||
for (const listener of authListener) {
|
||||
await listener(obj)
|
||||
}
|
||||
}
|
||||
|
||||
// Zustand 中间件，用于订阅前端应用的生命周期，实验阶段。
|
||||
// 失败，无法同步调用异步方法！
|
||||
export const lifecycleware = (fn) => (set, get, store) => {
|
||||
|
||||
addInitLinstener(() => {
|
||||
if (store.getState().hasOwnProperty('onInit')) {
|
||||
store.getState().onInit()
|
||||
} else {
|
||||
console.info('store has no function: onInit.')
|
||||
}
|
||||
})
|
||||
|
||||
addAuthLinstener(() => {
|
||||
if (store.getState().hasOwnProperty('onAuth')) {
|
||||
store.getState().onAuth()
|
||||
} else {
|
||||
console.info('store has no function: onAuth.')
|
||||
}
|
||||
})
|
||||
|
||||
return fn(set, get, store)
|
||||
}
|
||||
@ -1,154 +1,69 @@
|
||||
|
||||
import { BUILD_VERSION } from '@/config'
|
||||
|
||||
const customHeaders = []
|
||||
|
||||
// 添加 HTTP Reuqest 自定义头部
|
||||
export function appendRequestHeader(n, v) {
|
||||
customHeaders.push({
|
||||
name: n,
|
||||
value: v
|
||||
})
|
||||
}
|
||||
|
||||
function getRequestHeader() {
|
||||
return customHeaders.reduce((acc, item) => {
|
||||
acc[item.name] = item.value;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
const initParams = [];
|
||||
export function appendRequestParams(n, v) {
|
||||
initParams.push({
|
||||
name: n,
|
||||
value: v
|
||||
})
|
||||
}
|
||||
function getRequestInitParams() {
|
||||
return initParams.reduce((acc, item) => {
|
||||
acc[item.name] = item.value;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function checkStatus(response) {
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
return response
|
||||
return response;
|
||||
} else {
|
||||
const message =
|
||||
'Fetch error: ' + response.url + ' ' + response.status + ' (' +
|
||||
response.statusText + ')'
|
||||
const error = new Error(message)
|
||||
error.response = response
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
function checkBizCode(responseJson) {
|
||||
if (responseJson.errcode === 0) {
|
||||
return responseJson;
|
||||
} else {
|
||||
throw new Error(responseJson.errmsg + ': ' + responseJson.errcode);
|
||||
response.statusText + ')';
|
||||
const error = new Error(message);
|
||||
error.response = response;
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export function fetchText(url) {
|
||||
const headerObj = getRequestHeader()
|
||||
return fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
}
|
||||
}).then(checkStatus)
|
||||
return fetch(url)
|
||||
.then(checkStatus)
|
||||
.then(response => response.text())
|
||||
.catch(error => {
|
||||
throw error
|
||||
})
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
export function fetchJSON(url, data = {}) {
|
||||
const initParams = getRequestInitParams();
|
||||
const params4get = Object.assign({}, initParams, data);
|
||||
const params = params4get ? new URLSearchParams(params4get).toString() : '';
|
||||
const ifp = url.includes('?') ? '&' : '?';
|
||||
const headerObj = getRequestHeader();
|
||||
const fUrl = params !== '' ? `${url}${ifp}${params}` : url;
|
||||
return fetch(fUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
}
|
||||
}).then(checkStatus)
|
||||
export function fetchJSON(url) {
|
||||
return fetch(url)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(checkBizCode)
|
||||
.catch(error => {
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
export function postForm(url, data) {
|
||||
const initParams = getRequestInitParams();
|
||||
Object.keys(initParams).forEach(key => {
|
||||
if (! data.has(key)) {
|
||||
data.append(key, initParams[key]);
|
||||
}
|
||||
});
|
||||
const headerObj = getRequestHeader()
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
headers: {
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
}
|
||||
body: data
|
||||
}).then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(checkBizCode)
|
||||
.catch(error => {
|
||||
throw error
|
||||
})
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
export function postJSON(url, obj) {
|
||||
const initParams = getRequestInitParams();
|
||||
const params4get = Object.assign({}, initParams);
|
||||
const params = new URLSearchParams(params4get).toString();
|
||||
const ifp = url.includes('?') ? '&' : '?';
|
||||
const fUrl = params !== '' ? `${url}${ifp}${params}` : url;
|
||||
|
||||
const headerObj = getRequestHeader()
|
||||
return fetch(fUrl, {
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(obj),
|
||||
headers: {
|
||||
'Content-type': 'application/json; charset=UTF-8',
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
'Content-type': 'application/json; charset=UTF-8'
|
||||
}
|
||||
}).then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(checkBizCode)
|
||||
.catch(error => {
|
||||
throw error
|
||||
})
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
export function postStream(url, obj) {
|
||||
const headerObj = getRequestHeader()
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(obj),
|
||||
headers: {
|
||||
'Content-type': 'application/octet-stream',
|
||||
'X-Web-Version': BUILD_VERSION,
|
||||
...headerObj
|
||||
'Content-type': 'application/octet-stream'
|
||||
}
|
||||
}).then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.catch(error => {
|
||||
throw error
|
||||
})
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
export default function Index() {
|
||||
return (
|
||||
<p id="zero-state">
|
||||
Global Highlights Hub
|
||||
<br />
|
||||
Check out{" "}
|
||||
<a href="https://www.chinahighlights.com">
|
||||
the docs at chinahighlights.com
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
@ -1,109 +1,120 @@
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useEffect } from 'react'
|
||||
import { Button, Form, Input, Row, Radio, App } from 'antd'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useAuthStore from '@/stores/Auth'
|
||||
import { appendRequestParams } from '@/utils/request'
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { useEffect } from 'react';
|
||||
import { Button, Checkbox, Form, Input, Row, App } from 'antd';
|
||||
import { useStore } from '@/stores/StoreContext.js';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function Login() {
|
||||
const [authenticate, loginStatus, defaultRoute] =
|
||||
useAuthStore((state) => [state.authenticate, state.loginStatus, state.defaultRoute])
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const { t, i18n } = useTranslation()
|
||||
const { notification } = App.useApp()
|
||||
const navigate = useNavigate()
|
||||
const [form] = Form.useForm()
|
||||
|
||||
const handleLngChange = (lng) => {
|
||||
appendRequestParams('lgc', lng === 'zh' ? 2 : 1)
|
||||
i18n.changeLanguage(lng)
|
||||
}
|
||||
|
||||
const defaultLng = i18n.language??'zh'
|
||||
appendRequestParams('lgc', defaultLng === 'zh' ? 2 : 1)
|
||||
const { authStore, noticeStore } = useStore();
|
||||
const { notification } = App.useApp();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect (() => {
|
||||
if (loginStatus === 302) {
|
||||
navigate(defaultRoute)
|
||||
if (location.search === '?out') {
|
||||
authStore.logout();
|
||||
navigate('/login');
|
||||
}
|
||||
}, [loginStatus])
|
||||
return () => {
|
||||
// unmount...
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onFinish = (values) => {
|
||||
authenticate(values.username, values.password)
|
||||
authStore.valdateUserPassword(values.username, values.password)
|
||||
.then((userId) => {
|
||||
noticeStore.getBulletinUnReadCount(userId);
|
||||
authStore.fetchUserDetail()
|
||||
.then((user) => {
|
||||
// navigate(-1) is equivalent to hitting the back button.
|
||||
navigate("/reservation/newest");
|
||||
})
|
||||
.catch(ex => {
|
||||
notification.error({
|
||||
message: `Notification`,
|
||||
description: 'Failed to get user information.',
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(ex => {
|
||||
console.error(ex)
|
||||
notification.error({
|
||||
message: t('Validation.Title'),
|
||||
description: t('Validation.LoginFailed'),
|
||||
message: `Notification`,
|
||||
description: 'Login failed. Incorrect username or password.',
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Row justify='center' align='middle' className='min-h-96'>
|
||||
<Row justify="center" align="middle" style={{ minHeight: 500 }}>
|
||||
<Form
|
||||
name='login'
|
||||
layout='vertical'
|
||||
name="basic"
|
||||
// layout="vertical"
|
||||
form={form}
|
||||
size='large'
|
||||
size="large"
|
||||
labelCol={{
|
||||
span: 8,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 24,
|
||||
span: 16,
|
||||
}}
|
||||
style={{
|
||||
maxWidth: 600,
|
||||
}}
|
||||
className='max-w-xl'
|
||||
initialValues={{
|
||||
language: defaultLng,
|
||||
remember: true,
|
||||
}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete='off'
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label={t('Username')}
|
||||
name='username'
|
||||
label={t("Username")}
|
||||
name="username"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('Validation.UsernameIsEmpty'),
|
||||
message: 'Please input your username!',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('Password')}
|
||||
name='password'
|
||||
label={t("Password")}
|
||||
name="password"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('Validation.PasswordIsEmpty'),
|
||||
message: 'Please input your password!',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
<Form.Item name='language'>
|
||||
<Radio.Group onChange={e => handleLngChange(e.target.value)}>
|
||||
<Radio value='zh'>中文</Radio>
|
||||
<Radio value='en'>English</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type='primary' htmlType='submit' className='w-full'>
|
||||
<Form.Item
|
||||
wrapperCol={{
|
||||
offset: 8,
|
||||
span: 16,
|
||||
}}
|
||||
>
|
||||
<Button type="primary" htmlType="submit" style={{width: "100%"}}>
|
||||
{t('Login')}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Row>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Login
|
||||
export default Login;
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import { Flex, Result, Spin } from 'antd'
|
||||
import { useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import useAuthStore from '@/stores/Auth'
|
||||
|
||||
function Logout() {
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const logout = useAuthStore(state => state.logout)
|
||||
|
||||
useEffect(() => {
|
||||
logout()
|
||||
navigate('/login')
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Flex justify='center' align='center' gap='middle' vertical>
|
||||
<Result
|
||||
status='success'
|
||||
title='退出成功'
|
||||
subTitle='正在跳转登陆页面'
|
||||
extra={[
|
||||
<Spin key='small-span' size='small' />
|
||||
]}
|
||||
/>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default Logout
|
||||
@ -1,37 +1,61 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { Layout, ConfigProvider, theme, Row, Col, App as AntApp } from "antd";
|
||||
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 { useThemeContext } from "@/stores/ThemeContext";
|
||||
import { BUILD_VERSION } from "@/config";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
import Language from "../i18n/LanguageSwitcher";
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Header, Content, Footer } = Layout;
|
||||
|
||||
function Standlone() {
|
||||
const { colorPrimary } = useThemeContext();
|
||||
const { authStore } = useStore();
|
||||
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: colorPrimary,
|
||||
colorPrimary: "#00b96b",
|
||||
},
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
}}>
|
||||
<AntApp>
|
||||
<Layout className="min-h-screen">
|
||||
<Header className="sticky top-0 z-10 w-full">
|
||||
<img src={AppLogo} className="float-left h-9 my-4 mr-6 ml-0 bg-white/30" alt="App logo" />
|
||||
<p className="text-white text-center">Global Highlights Hub</p>
|
||||
<Layout
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
}}>
|
||||
<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" />
|
||||
</Col>
|
||||
<Col span={18}><Title style={{ color: "white", marginTop: "3.5px" }}>Global Highlights Hub</Title></Col>
|
||||
<Col span={2}>
|
||||
<Language />
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
<Content className="p-6 m-0 min-h-72 bg-white">
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
}}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
<Footer>China Highlights International Travel Service Co., LTD, Version: {BUILD_VERSION}</Footer>
|
||||
<Footer></Footer>
|
||||
</Layout>
|
||||
</AntApp>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default Standlone;
|
||||
export default observer(Standlone);
|
||||
|
||||
@ -0,0 +1,113 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Button, Space, Form, Input, Row, Typography, App,Select } from "antd";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
function ChangeVendor() {
|
||||
const navigate = useNavigate();
|
||||
const { authStore,VendorList } = useStore();
|
||||
const { notification } = App.useApp();
|
||||
const [form] = Form.useForm();
|
||||
const { formVeiSn, onVeiSnChange } = useState();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
authStore.fetchVendorList();
|
||||
},[]);
|
||||
|
||||
//币种
|
||||
function bindVendor() {
|
||||
|
||||
let arr=[];
|
||||
arr = authStore.VendorList.map((data,index) =>{
|
||||
return {
|
||||
value: data.VEI_SN,
|
||||
label: data.VEI2_CompanyBN,
|
||||
}
|
||||
})
|
||||
return arr;
|
||||
|
||||
}
|
||||
|
||||
const onFinish = (values) => {
|
||||
if (values.VEISN == authStore.login.travelAgencyId){
|
||||
notification.error({
|
||||
message: `Notification`,
|
||||
description: "切换的供应商是当前供应商.",
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
return ;
|
||||
}
|
||||
// console.log(values);
|
||||
// console.log(authStore.login.travelAgencyId);
|
||||
|
||||
authStore.changeVendor(values.VEISN)
|
||||
.then(()=>{
|
||||
authStore.logout();
|
||||
})
|
||||
.catch(()=>{
|
||||
//console.log(json);
|
||||
notification.error({
|
||||
message: `Notification`,
|
||||
description: "切换的供应商错误，请重试！",
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log("Failed:", errorInfo);
|
||||
// form.resetFields();
|
||||
};
|
||||
|
||||
return (
|
||||
<Row justify="center" align="middle" style={{ minHeight: 500 }}>
|
||||
<Form
|
||||
name="basic"
|
||||
form={form}
|
||||
layout="vertical"
|
||||
size="large"
|
||||
style={{
|
||||
maxWidth: 600,
|
||||
}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item>
|
||||
<Title level={2}>Change your password</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="VEISN"
|
||||
label="供应商"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请选择需要切换的供应商!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择"
|
||||
onChange={onVeiSnChange}
|
||||
options={bindVendor()}
|
||||
></Select>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space size="middle">
|
||||
<Button type="primary" htmlType="submit">
|
||||
选 择
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(ChangeVendor);
|
||||
@ -1,24 +1,25 @@
|
||||
import { Descriptions, Col, Row } from 'antd'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useAuthStore from '@/stores/Auth'
|
||||
import { Descriptions, Col, Row } from 'antd';
|
||||
import { useStore } from '@/stores/StoreContext.js';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function Profile() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { t } = useTranslation()
|
||||
const currentUser = useAuthStore(state => state.currentUser)
|
||||
const { authStore } = useStore();
|
||||
const { login } = authStore;
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col span={12} offset={6}>
|
||||
<Descriptions title={t('userProfile')} layout="vertical" column={2}>
|
||||
<Descriptions.Item label={t("Username")}>{currentUser?.username}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Realname")}>{currentUser?.realname}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Email")}>{currentUser?.emailAddress}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Company")}>{currentUser?.travelAgencyName}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Username")}>{login.username}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Telephone")}>{login.telephone}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Email")}>{login.emailAddress}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Company")}>{login.travelAgencyName}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default Profile
|
||||
export default Profile;
|
||||
|
||||
@ -1,139 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Grid, Divider, Layout, Spin, Input, Col, Row, Space, List, Table, Button } from "antd";
|
||||
import { PhoneOutlined, CustomerServiceOutlined, AudioOutlined, AuditOutlined } from "@ant-design/icons";
|
||||
import { useParams, useHref, useNavigate, NavLink } from "react-router-dom";
|
||||
import { isEmpty, formatColonTime } from "@/utils/commons";
|
||||
import dayjs from "dayjs";
|
||||
import SearchForm from "@/components/SearchForm";
|
||||
import { DATE_FORMAT } from "@/config";
|
||||
import { TableExportBtn } from "@/components/Data";
|
||||
import airTicketStore from "@/stores/Airticket";
|
||||
import { usingStorage } from "@/hooks/usingStorage";
|
||||
|
||||
const planListColumns = [
|
||||
{
|
||||
title: "团名",
|
||||
key: "GRI_No",
|
||||
dataIndex: "GRI_No",
|
||||
// sorter: (a, b) => b.GRI_No - a.GRI_No,
|
||||
},
|
||||
{
|
||||
title: "组团人",
|
||||
key: "WL",
|
||||
dataIndex: "WL",
|
||||
},
|
||||
{
|
||||
title: "人数",
|
||||
dataIndex: "PersonNum",
|
||||
key: "PersonNum",
|
||||
},
|
||||
{
|
||||
title: "出发日期",
|
||||
key: "StartDate",
|
||||
dataIndex: "StartDate",
|
||||
sorter: (a, b) => {
|
||||
const dateA = new Date(a.StartDate);
|
||||
const dateB = new Date(b.StartDate);
|
||||
return dateB.getTime() - dateA.getTime();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "出发城市",
|
||||
key: "FromCity",
|
||||
dataIndex: "FromCity",
|
||||
},
|
||||
{
|
||||
title: "抵达城市",
|
||||
key: "ToCity",
|
||||
dataIndex: "ToCity",
|
||||
},
|
||||
{
|
||||
title: "航班",
|
||||
key: "FlightNo",
|
||||
dataIndex: "FlightNo",
|
||||
},
|
||||
{
|
||||
title: "起飞时间",
|
||||
key: "FlightStart",
|
||||
dataIndex: "FlightStart",
|
||||
render: text => formatColonTime(text),
|
||||
},
|
||||
{
|
||||
title: "落地时间",
|
||||
key: "FlightEnd",
|
||||
dataIndex: "FlightEnd",
|
||||
render: text => formatColonTime(text),
|
||||
},
|
||||
{
|
||||
title: "出票处理",
|
||||
key: "TicketIssued",
|
||||
dataIndex: "TicketIssued",
|
||||
render: (text, record) => record.TicketIssuedName,
|
||||
},
|
||||
{
|
||||
title: "计划状态",
|
||||
key: "FlightStatus",
|
||||
dataIndex: "FlightStatus",
|
||||
render: (text, record) => record.FlightStatusName,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "FlightInfo",
|
||||
dataIndex: "FlightInfo",
|
||||
render: (text, record) => <NavLink to={`/airticket/plan/${record.COLI_SN}/${record.GRI_SN}`}>{"编辑"}</NavLink>,
|
||||
},
|
||||
];
|
||||
|
||||
const Airticket = props => {
|
||||
const navigate = useNavigate();
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const [getPlanList, planList, loading] = airTicketStore(state => [state.getPlanList, state.planList, state.loading]);
|
||||
const showTotal = total => `合计 ${total} `;
|
||||
|
||||
useEffect(() => {
|
||||
!planList && getPlanList(travelAgencyId, "", dayjs().startOf("M").format(DATE_FORMAT), dayjs().add(3, "M").endOf("M").format(DATE_FORMAT), "-1", "-1");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row>
|
||||
<Col md={20} lg={20} xxl={20}>
|
||||
<SearchForm
|
||||
initialValue={{
|
||||
dates: [dayjs().startOf("M"), dayjs().add(3, "M").endOf("M")],
|
||||
}}
|
||||
fieldsConfig={{
|
||||
shows: ["referenceNo", "dates", "airticket_state", "plan_state"],
|
||||
fieldProps: {
|
||||
referenceNo: { label: "搜索计划" },
|
||||
dates: { label: "出发日期", col: 8 },
|
||||
},
|
||||
}}
|
||||
onSubmit={(err, formVal, filedsVal) => {
|
||||
getPlanList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.endtime, formVal.plan_state, formVal.airticket_state);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={4} lg={4} xxl={4}>
|
||||
<Space>
|
||||
<Button icon={<AuditOutlined />} onClick={() => navigate(`/airticket/invoice`)}>
|
||||
报账
|
||||
</Button>
|
||||
<Button icon={<AuditOutlined />} onClick={() => navigate(`/airticket/invoicepaid`)}>
|
||||
汇款记录
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table bordered={true} rowKey="id" columns={planListColumns} dataSource={planList} loading={loading} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
|
||||
<TableExportBtn btnTxt="导出计划" label={`机票计划`} {...{ columns: planListColumns, dataSource: planList }} />
|
||||
</Col>
|
||||
<Col md={24} lg={24} xxl={24}></Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
export default Airticket;
|
||||
@ -1,137 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Grid, Divider, Layout, Spin, Input, Col, Row, Space, Checkbox, Table, Button, App } from "antd";
|
||||
import { PhoneOutlined, CustomerServiceOutlined, FrownTwoTone, LikeTwoTone } from "@ant-design/icons";
|
||||
import { useParams, useHref, useNavigate, NavLink } from "react-router-dom";
|
||||
import { isEmpty, formatColonTime, formatDate, isNotEmpty } from "@/utils/commons";
|
||||
import { DATE_FORMAT } from "@/config";
|
||||
import dayjs from "dayjs";
|
||||
import SearchForm from "@/components/SearchForm";
|
||||
import BackBtn from "@/components/BackBtn";
|
||||
import { TableExportBtn } from "@/components/Data";
|
||||
import useInvoiceStore from "@/stores/Invoice";
|
||||
import { fetchInvoicePaidDetail } from "@/stores/Invoice";
|
||||
|
||||
import airTicketStore from "@/stores/Airticket";
|
||||
import { usingStorage } from "@/hooks/usingStorage";
|
||||
|
||||
const InvoicePaid = props => {
|
||||
const navigate = useNavigate();
|
||||
const { notification } = App.useApp();
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const [invoicePaidDetail, setInvoicePaidDetail] = useState([]);
|
||||
const [invoiceNO, setInvoiceNO] = useState([]); //显示账单编号
|
||||
const [loading, invoicePaid, fetchInvoicePaid] = useInvoiceStore(state => [state.loading, state.invoicePaid, state.fetchInvoicePaid]);
|
||||
const showTotal = total => `Total ${total} items`;
|
||||
const showTotal_detail = total => `Total ${total} items`;
|
||||
useEffect(() => {
|
||||
// fetchInvoicePaid(travelAgencyId, "", dayjs().subtract(2, "M").startOf("M").format(DATE_FORMAT), dayjs().endOf("M").format(DATE_FORMAT));
|
||||
}, []);
|
||||
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: "编号",
|
||||
dataIndex: "fl_finaceNo",
|
||||
key: "fl_finaceNo",
|
||||
},
|
||||
{
|
||||
title: "报账日期",
|
||||
key: "fl_adddate",
|
||||
dataIndex: "fl_adddate",
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
|
||||
},
|
||||
{
|
||||
title: "团数",
|
||||
key: "fcount",
|
||||
dataIndex: "fcount",
|
||||
},
|
||||
{
|
||||
title: "总额",
|
||||
key: "pSum",
|
||||
dataIndex: "pSum",
|
||||
//render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
|
||||
},
|
||||
{
|
||||
title: "查看",
|
||||
key: "pSum",
|
||||
dataIndex: "pSum",
|
||||
render: (text, record) => (
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
fetchInvoicePaidDetail(travelAgencyId, record.key).then(res => setInvoicePaidDetail(res));
|
||||
setInvoiceNO(record.fl_finaceNo);
|
||||
}}>
|
||||
查看明细
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const invoicePaidDetailColumns = [
|
||||
{
|
||||
title: "团号",
|
||||
dataIndex: "fl2_GroupName",
|
||||
key: "fl2_GroupName",
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
key: "fl2_price",
|
||||
dataIndex: "fl2_price",
|
||||
},
|
||||
{
|
||||
title: "报账日期",
|
||||
key: "fl2_ArriveDate",
|
||||
dataIndex: "fl2_ArriveDate",
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
|
||||
},
|
||||
{
|
||||
title: "顾问",
|
||||
dataIndex: "fl2_wl",
|
||||
key: "fl2_wl",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row>
|
||||
<Col md={20} lg={20} xxl={20}>
|
||||
<SearchForm
|
||||
initialValue={{
|
||||
dates: [dayjs().subtract(2, "M").startOf("M"), dayjs().endOf("M")],
|
||||
}}
|
||||
fieldsConfig={{
|
||||
shows: ["dates"],
|
||||
fieldProps: {
|
||||
dates: { col: 10, label: "报账日期" },
|
||||
},
|
||||
}}
|
||||
onSubmit={(err, formVal) => {
|
||||
fetchInvoicePaid(travelAgencyId, "", formVal.startdate, formVal.enddate);
|
||||
setInvoicePaidDetail([]);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={4} lg={4} xxl={4}>
|
||||
<BackBtn to={"/airticket"} />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={24} lg={16} xxl={16}>
|
||||
<Divider orientation="left">汇款列表</Divider>
|
||||
<Table bordered columns={invoicePaidColumns} dataSource={invoicePaid} loading={loading} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
|
||||
</Col>
|
||||
<Col md={24} lg={4} xxl={4}></Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={24} lg={20} xxl={20}>
|
||||
<Divider orientation="left">账单明细 {invoiceNO}</Divider>
|
||||
<Table bordered columns={invoicePaidDetailColumns} dataSource={invoicePaidDetail} pagination={{ defaultPageSize: 100, showTotal: showTotal_detail }} />
|
||||
<TableExportBtn btnTxt="导出账单明细" label={`机票账单`} {...{ columns: invoicePaidDetailColumns, dataSource: invoicePaidDetail }} />
|
||||
</Col>
|
||||
<Col md={24} lg={4} xxl={4}></Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
export default InvoicePaid;
|
||||
@ -0,0 +1,16 @@
|
||||
import { useRouteError } from "react-router-dom";
|
||||
|
||||
export default function ErrorPage() {
|
||||
const error = useRouteError();
|
||||
console.error(error);
|
||||
|
||||
return (
|
||||
<div id="error-page">
|
||||
<h1>Oops!</h1>
|
||||
<p>Sorry, an unexpected error has occurred.</p>
|
||||
<p>
|
||||
<i>{error.statusText || error.message}</i>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,206 +1,198 @@
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App, Card } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import * as config from '@/config';
|
||||
import { getFeedbackDetail, getCustomerFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';
|
||||
import BackBtn from '@/components/BackBtn';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { toJS, runInAction } from "mobx";
|
||||
import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App, Card } from "antd";
|
||||
import { useStore } from "../../stores/StoreContext.js";
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
import * as config from "@/config";
|
||||
|
||||
function Detail() {
|
||||
const navigate = useNavigate();
|
||||
const { GRI_SN, RefNo, CII_SN } = useParams();
|
||||
const {travelAgencyId, loginToken} = usingStorage();
|
||||
const desc = ['none', 'Unacceptable', 'Poor', 'Fair', 'Very Good', 'Excellent'];
|
||||
const { notification } = App.useApp();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [feedbackRate, setFeedbackRate] = useState({});
|
||||
const [feedbackReview, setFeedbackReview] = useState({});
|
||||
const [feedbackImages, setFeedbackImages] = useState([]);
|
||||
const [feedbackInfo, setFeedbackInfo] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
// console.info('Detail.useEffect: ' + GRI_SN);
|
||||
getFeedbackDetail(travelAgencyId, GRI_SN).then((res) => {
|
||||
// setFeedbackRate(res.feedbackRate);
|
||||
setFeedbackReview(res.feedbackReview);
|
||||
});
|
||||
getCustomerFeedbackDetail(travelAgencyId, GRI_SN, CII_SN).then((res) => setFeedbackRate(res));
|
||||
getFeedbackImages(travelAgencyId, GRI_SN).then((res) => setFeedbackImages(res));
|
||||
getFeedbackInfo(travelAgencyId, GRI_SN).then((v) => {
|
||||
form.setFieldsValue({ info_content: v.EEF_Content });
|
||||
setFeedbackInfo(v);
|
||||
});
|
||||
}, [GRI_SN]);
|
||||
|
||||
const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : [];
|
||||
const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : [];
|
||||
const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : [];
|
||||
const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : '';
|
||||
const signatureData = feedbackRate && feedbackRate.signatureData ? feedbackRate.signatureData : '';
|
||||
const PhotoPermission = feedbackRate?.PhotoPermission === 1;
|
||||
const cityName = feedbackRate?.cityName || '';
|
||||
const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : 'None';
|
||||
const fileList = feedbackImages;
|
||||
|
||||
const handleChange = (info) => {
|
||||
let newFileList = [...info.fileList];
|
||||
newFileList = newFileList.map((file) => {
|
||||
if (file.response && file.response.result) {
|
||||
file.url = file.response.result.file_url;
|
||||
}
|
||||
return file;
|
||||
});
|
||||
setFeedbackImages(newFileList);
|
||||
};
|
||||
|
||||
const handRemove = (info) => {
|
||||
return removeFeedbackImages(info.url);
|
||||
};
|
||||
|
||||
const onFinish = (values) => {
|
||||
// console.log("Success:", values);
|
||||
if (values) {
|
||||
postFeedbackInfo(feedbackInfo.EEF_VEI_SN, feedbackInfo.EEF_GRI_SN, feedbackInfo.EEF_EOI_SN, values.info_content).then(() => {
|
||||
notification.success({
|
||||
message: `Notification`,
|
||||
description: 'Submit Successful',
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}></Col>
|
||||
<Col span={4}>
|
||||
<BackBtn />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={18}>
|
||||
<Card
|
||||
type='inner'
|
||||
title={
|
||||
<Title level={4}>
|
||||
Post Survey {RefNo} in {cityName}
|
||||
</Title>
|
||||
}>
|
||||
<Form labelCol={{ span: 5 }}>
|
||||
<Divider orientation='left'>How satisfied were you with your tour guide?</Divider>
|
||||
{HWO_Guide.map((ele) => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className='ant-rate-text'>{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation='left'>How about the Driver and Car/Van?</Divider>
|
||||
{HWO_Driver.map((ele) => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className='ant-rate-text'>{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation='left'>General Experience with:</Divider>
|
||||
{HWO_Activity.map((ele) => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className='ant-rate-text'>{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation='left'>Would you like to give us permission to use the photos taken by the tour guide(s) during your trip which contain your portrait?</Divider>
|
||||
<Paragraph>
|
||||
{PhotoPermission ? (
|
||||
<>
|
||||
<Radio checked>Yes</Radio>
|
||||
<Radio disabled={true}>No</Radio>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Radio disabled={true}>Yes</Radio>
|
||||
<Radio checked>No</Radio>
|
||||
</>
|
||||
)}
|
||||
</Paragraph>
|
||||
<Divider orientation='left'>Other thoughts you want to share with us:</Divider>
|
||||
<Text>{OtherThoughts}</Text>
|
||||
<Divider orientation='left'>Signature:</Divider>
|
||||
{signatureData ? <img id='signature-img' alt='customer signature' title='customer signature' src={signatureData} /> : null}
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={4}></Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={18}>
|
||||
<Card type='inner' title={<Title level={4}>External Reviews</Title>}>
|
||||
<Text>{ECI_Content}</Text>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={4}></Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={18}>
|
||||
<Card type='inner' title={<Title level={4}>Feedback from local agent</Title>}>
|
||||
<Form name='feedback_detail_from' onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
|
||||
<Form.Item>
|
||||
<Upload
|
||||
name='ghhfile'
|
||||
// accept="image/*"
|
||||
multiple={true}
|
||||
action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${travelAgencyId}&token=${loginToken}`}
|
||||
fileList={fileList}
|
||||
listType='picture-card'
|
||||
onChange={handleChange}
|
||||
onRemove={handRemove}>
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div style={{ marginTop: 8 }}>Upload photos</div>
|
||||
</div>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name='info_content'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your messages!',
|
||||
},
|
||||
]}>
|
||||
<Input.TextArea rows={6} placeholder='Any feedback for this group you would like to send to Asia Highlights'></Input.TextArea>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={4}></Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
const navigate = useNavigate();
|
||||
const { GRI_SN, RefNo, CII_SN } = useParams();
|
||||
const { feedbackStore, authStore } = useStore();
|
||||
const { feedbackReview, feedbackImages, feedbackInfo, feedbackServiceRate: feedbackRate } = feedbackStore;
|
||||
const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
|
||||
const { notification } = App.useApp();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
console.info("Detail.useEffect: " + GRI_SN);
|
||||
feedbackStore.getFeedbackDetail(authStore.login.travelAgencyId, GRI_SN);
|
||||
feedbackStore.getCustomerFeedbackDetail(authStore.login.travelAgencyId, GRI_SN, CII_SN);
|
||||
feedbackStore.getFeedbackImages(authStore.login.travelAgencyId, GRI_SN);
|
||||
feedbackStore.getFeedbackInfo(authStore.login.travelAgencyId, GRI_SN).then(v => {
|
||||
form.setFieldsValue({ info_content: v.EEF_Content });
|
||||
});
|
||||
}, [GRI_SN]);
|
||||
|
||||
const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : [];
|
||||
const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : [];
|
||||
const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : [];
|
||||
const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
|
||||
const signatureData = feedbackRate && feedbackRate.signatureData ? feedbackRate.signatureData : "";
|
||||
const PhotoPermission = feedbackRate?.PhotoPermission === 1;
|
||||
const cityName = feedbackRate.cityName;
|
||||
const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";
|
||||
const fileList = toJS(feedbackImages);
|
||||
|
||||
const handleChange = info => {
|
||||
let newFileList = [...info.fileList];
|
||||
newFileList = newFileList.map(file => {
|
||||
if (file.response && file.response.result) {
|
||||
file.url = file.response.result.file_url;
|
||||
}
|
||||
return file;
|
||||
});
|
||||
runInAction(() => {
|
||||
feedbackStore.feedbackImages = newFileList;
|
||||
});
|
||||
};
|
||||
|
||||
const handRemove = info => {
|
||||
return feedbackStore.removeFeedbackImages(info.url);
|
||||
};
|
||||
|
||||
const onFinish = values => {
|
||||
console.log("Success:", values);
|
||||
if (values) {
|
||||
feedbackStore.postFeedbackInfo(feedbackInfo.EEF_VEI_SN, feedbackInfo.EEF_GRI_SN, feedbackInfo.EEF_EOI_SN, values.info_content).then(() => {
|
||||
notification.success({
|
||||
message: `Notification`,
|
||||
description: "Submit Successful",
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}>
|
||||
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Button type="link" onClick={() => navigate("/feedback")}>
|
||||
Back
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={18}>
|
||||
<Card type="inner" title={<Title level={4}>Post Survey {RefNo} in {cityName}</Title>}>
|
||||
<Form labelCol={{ span: 5 }}>
|
||||
<Divider orientation="left">How satisfied were you with your tour guide?</Divider>
|
||||
{HWO_Guide.map(ele => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className="ant-rate-text">{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation="left">How about the Driver and Car/Van?</Divider>
|
||||
{HWO_Driver.map(ele => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className="ant-rate-text">{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation="left">General Experience with:</Divider>
|
||||
{HWO_Activity.map(ele => (
|
||||
<Form.Item label={ele.Describe} key={ele.id}>
|
||||
<Space>
|
||||
<Rate disabled value={ele.rate} />
|
||||
<span className="ant-rate-text">{desc[ele.rate]}</span>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
|
||||
<Divider orientation="left">Would you like to give us permission to use the photos taken by the tour guide(s) during your trip which contain your portrait?</Divider>
|
||||
<Paragraph>
|
||||
{PhotoPermission ? (
|
||||
<>
|
||||
<Radio checked>Yes</Radio>
|
||||
<Radio disabled={true}>No</Radio>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Radio disabled={true}>Yes</Radio>
|
||||
<Radio checked>No</Radio>
|
||||
</>
|
||||
)}
|
||||
</Paragraph>
|
||||
<Divider orientation="left">Other thoughts you want to share with us:</Divider>
|
||||
<Text>{OtherThoughts}</Text>
|
||||
<Divider orientation="left">Signature:</Divider>
|
||||
{signatureData ? <img id="signature-img" alt="customer signature" title="customer signature" src={signatureData} /> : null}
|
||||
|
||||
</Form></Card>
|
||||
</Col>
|
||||
<Col span={4}></Col>
|
||||
</Row>
|
||||
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={18}>
|
||||
<Card type="inner" title={<Title level={4}>External Reviews</Title>}>
|
||||
<Text>{ECI_Content}</Text>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={4}></Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={18}>
|
||||
<Card type="inner" title={<Title level={4}>Feedback from local agent</Title>}>
|
||||
<Form name="feedback_detail_from" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
|
||||
<Form.Item>
|
||||
<Upload
|
||||
name="ghhfile"
|
||||
// accept="image/*"
|
||||
multiple={true}
|
||||
action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${authStore.login.travelAgencyId}&token=${authStore.login.token}`}
|
||||
fileList={fileList}
|
||||
listType="picture-card"
|
||||
onChange={handleChange}
|
||||
onRemove={handRemove}>
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div style={{ marginTop: 8 }}>Upload photos</div>
|
||||
</div>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="info_content"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "Please input your messages!",
|
||||
},
|
||||
]}>
|
||||
<Input.TextArea rows={6} placeholder="Any feedback for this group you would like to send to Asia Highlights"></Input.TextArea>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={4}></Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
export default Detail;
|
||||
export default observer(Detail);
|
||||
|
||||
@ -1,94 +1,108 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { useEffect } from 'react';
|
||||
import { Row, Col, Space, Table, App } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import SearchForm from '@/components/SearchForm';
|
||||
import useFeedbackStore from '@/stores/Feedback';
|
||||
import dayjs from 'dayjs';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { toJS } from "mobx";
|
||||
import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, App } from "antd";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
import * as config from "@/config";
|
||||
|
||||
const { Title } = Typography;
|
||||
const feedbackListColumns = [
|
||||
{
|
||||
title: 'Ref.No',
|
||||
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>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Arrival Date',
|
||||
dataIndex: 'EOI_Date',
|
||||
render: (text, record) => text,
|
||||
sorter: (a, b) => b.EOI_Date - a.EOI_Date,
|
||||
},
|
||||
{
|
||||
title: 'Cities',
|
||||
key: 'City',
|
||||
dataIndex: 'City',
|
||||
},
|
||||
{
|
||||
title: 'Guides',
|
||||
dataIndex: 'CityGuide',
|
||||
},
|
||||
{
|
||||
title: 'Post Survey',
|
||||
dataIndex: 'Average',
|
||||
render: (text, record) => `${record.EOI_CII_SN && record.feedback_Filled ? '✔' : ''} ${text ? text : ''}`, //为0显示为空
|
||||
sorter: (a, b) => b.Average - a.Average,
|
||||
},
|
||||
{
|
||||
title: 'External Reviews',
|
||||
dataIndex: 'TAGood',
|
||||
},
|
||||
{
|
||||
title: "Ref.No",
|
||||
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>,
|
||||
},
|
||||
{
|
||||
title: "Arrival Date",
|
||||
dataIndex: "EOI_Date",
|
||||
render: (text, record) => text,
|
||||
sorter: (a, b) => b.EOI_Date - a.EOI_Date,
|
||||
},
|
||||
{
|
||||
title: "Cities",
|
||||
key: "City",
|
||||
dataIndex: "City",
|
||||
},
|
||||
{
|
||||
title: "Guides",
|
||||
dataIndex: "CityGuide",
|
||||
},
|
||||
{
|
||||
title: "Post Survey",
|
||||
dataIndex: "Average",
|
||||
render: (text, record) => `${(record.EOI_CII_SN && record.feedback_Filled ? "✔" : "")} ${(text ? text : "")}`, //为0显示为空
|
||||
sorter: (a, b) => b.Average - a.Average,
|
||||
},
|
||||
{
|
||||
title: "External Reviews",
|
||||
dataIndex: "TAGood",
|
||||
},
|
||||
];
|
||||
|
||||
function Index() {
|
||||
const { t } = useTranslation();
|
||||
const { notification } = App.useApp();
|
||||
const { notification } = App.useApp();
|
||||
const { feedbackStore, authStore } = useStore();
|
||||
const { feedbackList, search_date_start, search_date_end } = feedbackStore;
|
||||
const [referenceNo, onNumberChange] = useState("");
|
||||
const showTotal = total => `Total ${feedbackList.length} items`;
|
||||
|
||||
const {travelAgencyId} = usingStorage();
|
||||
const [loading, feedbackList, fetchFeedbackList] = useFeedbackStore((state) => [state.loading, state.feedbackList, state.fetchFeedbackList]);
|
||||
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 => {
|
||||
// // notification.error({
|
||||
// // message: `Error`,
|
||||
// // description: ex.message,
|
||||
// // placement: 'top',
|
||||
// // duration: 4,
|
||||
// // });
|
||||
// console.log(ex.message);
|
||||
// });
|
||||
}, []);
|
||||
|
||||
const showTotal = (total) => `Total ${total} items`;
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Title level={3}></Title>
|
||||
|
||||
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 => {
|
||||
// // notification.error({
|
||||
// // message: `Error`,
|
||||
// // description: ex.message,
|
||||
// // placement: 'top',
|
||||
// // duration: 4,
|
||||
// // });
|
||||
// console.log(ex.message);
|
||||
// });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<SearchForm
|
||||
initialValue={{
|
||||
dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
|
||||
}}
|
||||
fieldsConfig={{
|
||||
shows: ['referenceNo', 'dates'],
|
||||
fieldProps: {
|
||||
dates: { label: t('group:ArrivalDate') },
|
||||
},
|
||||
}}
|
||||
onSubmit={(err, formVal, filedsVal) => {
|
||||
fetchFeedbackList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.endtime);
|
||||
}}
|
||||
/>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table bordered={true} columns={feedbackListColumns} dataSource={feedbackList} pagination={{ defaultPageSize: 20, showTotal: showTotal }} loading={loading} />
|
||||
</Col>
|
||||
<Col md={24} lg={24} xxl={24}></Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
<Row gutter={16}>
|
||||
<Col md={24} lg={6} xxl={4}>
|
||||
<Input
|
||||
placeholder="Reference Number"
|
||||
onChange={e => {
|
||||
onNumberChange(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</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={config.DATE_PRESETS}
|
||||
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 }} />
|
||||
</Col>
|
||||
<Col md={24} lg={24} xxl={24}></Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
export default observer(Index);
|
||||
|
||||
@ -1,130 +0,0 @@
|
||||
import { useParams, NavLink, useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Row, Col, Space, Table, Image,App } from "antd";
|
||||
import { formatDate, isNotEmpty } from "@/utils/commons";
|
||||
import SearchForm from "@/components/SearchForm";
|
||||
import dayjs from "dayjs";
|
||||
import BackBtn from "@/components/BackBtn";
|
||||
import { fetchInvoiceDetail } from "@/stores/Invoice";
|
||||
import useInvoiceStore from "@/stores/Invoice";
|
||||
import { usingStorage } from "@/hooks/usingStorage";
|
||||
|
||||
function History() {
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const { GMDSN, GSN } = useParams();
|
||||
const [dataLoading, setDataLoading] = useState(false);
|
||||
const [invoiceZDDetail, setInvoiceZDDetail] = useState([]);
|
||||
const { notification } = App.useApp();
|
||||
|
||||
useEffect(() => {
|
||||
defaultShow();
|
||||
}, [GMDSN, GSN]);
|
||||
|
||||
function defaultShow() {
|
||||
setDataLoading(true);
|
||||
|
||||
fetchInvoiceDetail(travelAgencyId, GMDSN, GSN)
|
||||
.then((json) => {
|
||||
//console.log("id:"+travelAgencyId+",gmdsn:"+GMDSN+",GSN:"+GSN+"#13"+json);
|
||||
setInvoiceZDDetail(json.invoiceZDDetail);
|
||||
})
|
||||
.catch((ex) => {
|
||||
notification.error({
|
||||
message: `Notification`,
|
||||
description: ex.message,
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setDataLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: "ID",
|
||||
dataIndex: "GMD_SN",
|
||||
key: "GMD_SN",
|
||||
},
|
||||
{
|
||||
title: "Due Date",
|
||||
key: "GMD_PayDate",
|
||||
dataIndex: "GMD_PayDate",
|
||||
render: (text, record) =>
|
||||
isNotEmpty(text) ? formatDate(new Date(text)) : "",
|
||||
},
|
||||
{
|
||||
title: "Amount",
|
||||
key: "GMD_Cost",
|
||||
dataIndex: "GMD_Cost",
|
||||
},
|
||||
{
|
||||
title: "Currency",
|
||||
key: "GMD_Currency",
|
||||
dataIndex: "GMD_Currency",
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
key: "FKState",
|
||||
dataIndex: "FKState",
|
||||
render: (text, record) => (isNotEmpty(record.FKState) ? invoiceStatus(record.FKState) : text),
|
||||
},
|
||||
{
|
||||
title: "Invoice",
|
||||
key: "GMD_Pic",
|
||||
dataIndex: "GMD_Pic",
|
||||
render: showPIc,
|
||||
},
|
||||
];
|
||||
|
||||
const invoiceStatus = (FKState) => {
|
||||
switch (FKState - 1) {
|
||||
case 1:
|
||||
return "Submitted";
|
||||
case 2:
|
||||
return "Travel Advisor";
|
||||
case 3:
|
||||
return "Finance Dept";
|
||||
case 4:
|
||||
return "Paid";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
function showPIc(text, record) {
|
||||
let strPic = record.GMD_Pic;
|
||||
//console.log(JSON.parse(strPic));
|
||||
if (isNotEmpty(strPic)) {
|
||||
return JSON.parse(strPic).map((item, index) => {
|
||||
return <Image key={index} width={90} src={item.url} />;
|
||||
});
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}></Col>
|
||||
<Col span={4}>
|
||||
<BackBtn />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table
|
||||
rowKey={"GMD_SN"}
|
||||
bordered
|
||||
columns={invoicePaidColumns}
|
||||
dataSource={invoiceZDDetail}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
export default History;
|
||||
@ -1,97 +1,120 @@
|
||||
import { NavLink, useNavigate } from 'react-router-dom';
|
||||
import { useEffect } from 'react';
|
||||
import { Row, Col, Space, Table, Image } from 'antd';
|
||||
import { formatDate, isNotEmpty } from '@/utils/commons';
|
||||
import SearchForm from '@/components/SearchForm';
|
||||
import dayjs from 'dayjs';
|
||||
import BackBtn from '@/components/BackBtn';
|
||||
import useInvoiceStore from '@/stores/Invoice';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { toJS } from "mobx";
|
||||
import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Image } from "antd";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
import * as config from "@/config";
|
||||
import { formatDate, isNotEmpty } from "@/utils/commons";
|
||||
const { Title } = Typography;
|
||||
|
||||
function Paid() {
|
||||
const {travelAgencyId, } = usingStorage();
|
||||
const [invoicePaid, fetchInvoicePaid] = useInvoiceStore((state) => [state.invoicePaid, state.fetchInvoicePaid]);
|
||||
const navigate = useNavigate();
|
||||
const showTotal = (total) => `Total ${total} items`;
|
||||
function Paid(){
|
||||
const { authStore, invoiceStore } = useStore();
|
||||
const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
|
||||
const [groupNo, onGroupNoChange] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const showTotal = total => `Total ${invoicePaid.length} items`;
|
||||
|
||||
useEffect(() => {
|
||||
fetchInvoicePaid(travelAgencyId, '', '', '');
|
||||
}, []);
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: 'Payment ref.NO',
|
||||
dataIndex: 'fl_finaceNo',
|
||||
key: 'fl_finaceNo',
|
||||
render: (text, record) => <NavLink to={`/invoice/paid/detail/${record.key}`}>{text}</NavLink>,
|
||||
},
|
||||
{
|
||||
title: 'Payment date',
|
||||
key: 'fl_adddate',
|
||||
dataIndex: 'fl_adddate',
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ''),
|
||||
},
|
||||
{
|
||||
title: 'Number of bills',
|
||||
key: 'fcount',
|
||||
dataIndex: 'fcount',
|
||||
},
|
||||
{
|
||||
title: 'Total amount',
|
||||
key: 'pSum',
|
||||
dataIndex: 'pSum',
|
||||
//render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
|
||||
},
|
||||
{
|
||||
title: 'Bank statement',
|
||||
key: 'fl_pic',
|
||||
dataIndex: 'fl_pic',
|
||||
render: showPIc,
|
||||
},
|
||||
];
|
||||
|
||||
function showPIc(text, record) {
|
||||
let strPic = record.fl_pic;
|
||||
//console.log(JSON.parse(strPic));
|
||||
if (isNotEmpty(strPic)) {
|
||||
return JSON.parse(strPic).map((item, index) => {
|
||||
return <Image key={index} width={90} src={item.url} />;
|
||||
});
|
||||
} else {
|
||||
return '';
|
||||
useEffect (() => {
|
||||
invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId,"","","");
|
||||
|
||||
},[]);
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: "Payment ref.NO",
|
||||
dataIndex: "fl_finaceNo",
|
||||
key: "fl_finaceNo",
|
||||
render: (text, record) => <NavLink to={`/invoice/paid/detail/${record.key}`}>{text}</NavLink>,
|
||||
},
|
||||
{
|
||||
title: "Payment date",
|
||||
key: "fl_adddate",
|
||||
dataIndex: "fl_adddate",
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
|
||||
},
|
||||
{
|
||||
title: "Number of bills",
|
||||
key: "fcount",
|
||||
dataIndex: "fcount",
|
||||
},
|
||||
{
|
||||
title: "Total amount",
|
||||
key: "pSum",
|
||||
dataIndex: "pSum",
|
||||
//render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
|
||||
},
|
||||
{
|
||||
title: "Bank statement",
|
||||
key: "fl_pic",
|
||||
dataIndex: "fl_pic",
|
||||
render: showPIc,
|
||||
},
|
||||
];
|
||||
|
||||
function showPIc(text,record) {
|
||||
let strPic = record.fl_pic;
|
||||
//console.log(JSON.parse(strPic));
|
||||
if (isNotEmpty(strPic)){
|
||||
return (
|
||||
|
||||
JSON.parse(strPic).map((item,index) => {
|
||||
return <Image key={index} width={90} src={item.url} />;
|
||||
})
|
||||
|
||||
);
|
||||
}else{
|
||||
return "";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}>
|
||||
<SearchForm
|
||||
initialValue={{
|
||||
dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
|
||||
}}
|
||||
fieldsConfig={{
|
||||
shows: ['referenceNo', 'dates'],
|
||||
fieldProps: {
|
||||
referenceNo: { col: 5 },
|
||||
dates: { col: 10, label: 'Date' },
|
||||
},
|
||||
}}
|
||||
onSubmit={(err, formVal, filedsVal) => {
|
||||
fetchInvoicePaid(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<BackBtn to={'/invoice'} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table bordered columns={invoicePaidColumns} dataSource={(invoicePaid)} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Button type="link" onClick={() => navigate("/invoice")}>
|
||||
Back
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Title level={3}></Title>
|
||||
<Row gutter={16}>
|
||||
<Col md={24} lg={6} xxl={4}>
|
||||
<Input
|
||||
placeholder="Reference Number"
|
||||
onChange={e => {
|
||||
onGroupNoChange(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={24} lg={8} xxl={6}>
|
||||
<Space direction="horizontal">
|
||||
Date
|
||||
<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={false} style={{ width: "100%" }} value={[search_date_start, search_date_end]} presets={config.DATE_PRESETS} onChange={invoiceStore.onDateRangeChange} />
|
||||
</Space>
|
||||
</Col>
|
||||
<Col md={24} lg={4} xxl={4}>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={invoiceStore.loading}
|
||||
onClick={() => invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId, groupNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT))}>
|
||||
Search
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Title level={3}></Title>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
export default (Paid);
|
||||
export default observer(Paid);
|
||||
|
||||
@ -1,63 +1,67 @@
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Row, Col, Space, Table, Typography } from 'antd';
|
||||
import { formatDate, isNotEmpty } from '@/utils/commons';
|
||||
import BackBtn from '@/components/BackBtn';
|
||||
import { fetchInvoicePaidDetail } from '@/stores/Invoice';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
|
||||
import { NavLink, useNavigate ,useParams} from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { toJS } from "mobx";
|
||||
import { Row, Col, Space, Button, Table, Typography } from "antd";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
import * as config from "@/config";
|
||||
import { formatDate, isNotEmpty } from "@/utils/commons";
|
||||
const { Title } = Typography;
|
||||
|
||||
function PaidDetail() {
|
||||
const navigate = useNavigate();
|
||||
const {travelAgencyId, } = usingStorage();
|
||||
const { flid } = useParams();
|
||||
function PaidDetail(){
|
||||
const navigate = useNavigate();
|
||||
const { authStore, invoiceStore } = useStore();
|
||||
const { invoicePaidDetail } = invoiceStore;
|
||||
const { flid } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
invoiceStore.fetchInvoicePaidDetail(authStore.login.travelAgencyId,flid);
|
||||
|
||||
const [invoicePaidDetail, setInvoicePaidDetail] = useState([]);
|
||||
useEffect(() => {
|
||||
fetchInvoicePaidDetail(travelAgencyId, flid).then(res => setInvoicePaidDetail(res));
|
||||
}, [flid]);
|
||||
},[flid]);
|
||||
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: 'Ref.NO',
|
||||
dataIndex: 'fl2_GroupName',
|
||||
key: 'fl2_GroupName',
|
||||
},
|
||||
{
|
||||
title: 'Arrival date',
|
||||
key: 'fl2_ArriveDate',
|
||||
dataIndex: 'fl2_ArriveDate',
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ''),
|
||||
},
|
||||
{
|
||||
title: 'Payment amount',
|
||||
key: 'fl2_price',
|
||||
dataIndex: 'fl2_price',
|
||||
},
|
||||
{
|
||||
title: 'Currency',
|
||||
key: 'fl2_memo',
|
||||
dataIndex: 'fl2_memo',
|
||||
},
|
||||
];
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: "Ref.NO",
|
||||
dataIndex: "fl2_GroupName",
|
||||
key: "fl2_GroupName",
|
||||
},
|
||||
{
|
||||
title: "Arrival date",
|
||||
key: "fl2_ArriveDate",
|
||||
dataIndex: "fl2_ArriveDate",
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
|
||||
},
|
||||
{
|
||||
title: "Payment amount",
|
||||
key: "fl2_price",
|
||||
dataIndex: "fl2_price",
|
||||
},
|
||||
{
|
||||
title: "Currency",
|
||||
key: "fl2_memo",
|
||||
dataIndex: "fl2_memo",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}></Col>
|
||||
<Col span={4}>
|
||||
<BackBtn />
|
||||
</Col>
|
||||
</Row>
|
||||
<Title level={3}></Title>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table bordered columns={invoicePaidColumns} dataSource={invoicePaidDetail} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Button type="link" onClick={() => navigate("/invoice/paid")}>
|
||||
Back
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Title level={3}></Title>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaidDetail)} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
export default PaidDetail;
|
||||
export default observer(PaidDetail);
|
||||
@ -1,44 +1,42 @@
|
||||
import { NavLink, useParams } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Row, Col, Space, Typography, Divider } from 'antd';
|
||||
import * as comm from '@/utils/commons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { fetchNoticeDetail } from '@/stores/Notice';
|
||||
import BackBtn from '@/components/BackBtn';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
import { NavLink, useParams } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { toJS } from "mobx";
|
||||
import { Row, Col, Space, Button, Table, Input, Typography, Badge, Divider } from "antd";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
import * as config from "@/config";
|
||||
import * as comm from "@/utils/commons";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
function Detail() {
|
||||
const { t } = useTranslation();
|
||||
const { CCP_BLID } = useParams();
|
||||
const {userId} = usingStorage();
|
||||
const { noticeStore, authStore } = useStore();
|
||||
const { noticeInfo } = noticeStore;
|
||||
const { CCP_BLID } = useParams();
|
||||
|
||||
const [noticeInfo, setNoticeInfo] = useState({});
|
||||
useEffect(() => {
|
||||
// console.info("notice detail .useEffect " + CCP_BLID);
|
||||
fetchNoticeDetail(userId, CCP_BLID).then((res) => {
|
||||
setNoticeInfo(res);
|
||||
});
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
console.info("notice detail .useEffect " + CCP_BLID);
|
||||
noticeStore.getNoticeDetail(authStore.login.userId, CCP_BLID);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={16}>
|
||||
<Title level={1}>{noticeInfo.CCP_BLTitle}</Title>
|
||||
<Divider orientation='right'>{noticeInfo.CCP_LastEditTime}</Divider>
|
||||
<Paragraph>
|
||||
<div dangerouslySetInnerHTML={{ __html: comm.escape2Html(noticeInfo.CCP_BLContent) }}></div>
|
||||
</Paragraph>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<BackBtn />
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}></Col>
|
||||
<Col span={16}>
|
||||
<Title level={1}>{noticeInfo.CCP_BLTitle}</Title>
|
||||
<Divider orientation="right">{noticeInfo.CCP_LastEditTime}</Divider>
|
||||
<Paragraph>
|
||||
<div dangerouslySetInnerHTML={{ __html: comm.escape2Html(noticeInfo.CCP_BLContent) }}></div>
|
||||
</Paragraph>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<NavLink to="/notice">Back</NavLink>
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
export default Detail;
|
||||
export default observer(Detail);
|
||||
|
||||
@ -1,200 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { App, Empty, Button, Collapse, Table, Space } from 'antd';
|
||||
import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
|
||||
import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import useProductsStore, { postProductsQuoteAuditAction, } from '@/stores/Products/Index';
|
||||
import { cloneDeep, isEmpty, isNotEmpty } from '@/utils/commons';
|
||||
import useAuthStore from '@/stores/Auth';
|
||||
import RequireAuth from '@/components/RequireAuth';
|
||||
import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
|
||||
import Header from './Detail/Header';
|
||||
import dayjs from 'dayjs';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
|
||||
const PriceTable = ({ productType, dataSource, refresh }) => {
|
||||
const { t } = useTranslation('products');
|
||||
const { travel_agency_id, use_year, audit_state } = useParams();
|
||||
const isPermitted = useAuthStore(state => state.isPermitted);
|
||||
const [loading, activeAgency] = useProductsStore((state) => [state.loading, state.activeAgency]);
|
||||
const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
|
||||
const { message, notification } = App.useApp();
|
||||
const stateMapVal = useProductsAuditStatesMapVal();
|
||||
|
||||
const [renderData, setRenderData] = useState(dataSource);
|
||||
|
||||
// console.log(dataSource);
|
||||
|
||||
const handleAuditPriceItem = (state, row, rowIndex) => {
|
||||
postProductsQuoteAuditAction(state, { id: row.id, travel_agency_id: activeAgency.travel_agency_id })
|
||||
.then((json) => {
|
||||
if (json.errcode === 0) {
|
||||
message.success(json.errmsg);
|
||||
|
||||
if (typeof refresh === 'function') {
|
||||
// refresh(); // debug: 不要刷新, 等太久
|
||||
// const newData = structuredClone(renderData);
|
||||
const newData = cloneDeep(renderData);
|
||||
newData.splice(rowIndex, 1, {...row, audit_state_id: state, });
|
||||
setRenderData(newData);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((ex) => {
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const rowStyle = (r, tri) => {
|
||||
const trCls = tri%2 !== 0 ? ' bg-stone-50' : ''; // 奇偶行
|
||||
const [infoI, quoteI] = r.rowSpanI;
|
||||
const bigTrCls = quoteI === 0 && tri !== 0 ? 'border-collapse border-double border-0 border-t-4 border-stone-300' : ''; // 合并行双下划线
|
||||
const editedCls = (r.audit_state_id <= 0 && isNotEmpty(r.lastedit_changed)) ? '!bg-red-100' : ''; // <=待审核, 变更: 红色
|
||||
const editedCls_ = isNotEmpty(r.lastedit_changed) ? (r.audit_state_id === 0 ? '!bg-red-100' : '!bg-sky-100') : '';
|
||||
return [trCls, bigTrCls, editedCls].join(' ');
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ key: 'title', dataIndex: ['info', 'title'], width: '16rem', title: t('Title'), onCell: (r, index) => ({ rowSpan: r.rowSpan, }), className: 'bg-white', render: (text, r) => {
|
||||
const title = text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '';
|
||||
const itemLink = isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? `/products/${travel_agency_id}/${use_year}/${audit_state}/edit` : isPermitted(PERM_PRODUCTS_OFFER_PUT) ? `/products/edit` : '';
|
||||
return isNotEmpty(itemLink) ? <span onClick={() => setEditingProduct({info: r.info})}><Link to={itemLink} >{title}</Link></span> : title;
|
||||
} },
|
||||
// ...(productType === 'B' ? [{ key: 'km', dataIndex: ['info', 'km'], title: t('KM')}] : []),
|
||||
{ key: 'adult', title: t('AgeType.Adult'), render: (_, { adult_cost, currency, unit_id, unit_name }) => `${adult_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}` },
|
||||
{ key: 'child', title: t('AgeType.Child'), render: (_, { child_cost, currency, unit_id, unit_name }) => `${child_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}` },
|
||||
// {key: 'unit', title: t('Unit'), },
|
||||
{
|
||||
key: 'groupSize',
|
||||
dataIndex: ['group_size_min'],
|
||||
title: t('group_size'),
|
||||
render: (_, { group_size_min, group_size_max }) => `${group_size_min} - ${group_size_max}`,
|
||||
},
|
||||
{
|
||||
key: 'useDates',
|
||||
dataIndex: ['use_dates_start'],
|
||||
title: t('use_dates'),
|
||||
render: (_, { use_dates_start, use_dates_end, weekdays }) => `${use_dates_start} ~ ${use_dates_end}`, // + (weekdays ? `, ${t('OnWeekdays')}${weekdays}` : ''),
|
||||
},
|
||||
{ key: 'weekdays', dataIndex: ['weekdays'], title: t('Weekdays'), render: (text, r) => text || t('Unlimited') },
|
||||
{
|
||||
key: 'state',
|
||||
title: t('State'),
|
||||
render: (_, r) => {
|
||||
const stateCls = ` text-${stateMapVal[`${r.audit_state_id}`]?.color} `;
|
||||
return <span className={stateCls}>{stateMapVal[`${r.audit_state_id}`]?.label}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
key: 'action',
|
||||
render: (_, r, ri) =>
|
||||
(Number(r.audit_state_id)) === 0 ? (
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
|
||||
<Space>
|
||||
<Button onClick={() => handleAuditPriceItem('2', r, ri)}>✔</Button>
|
||||
<Button onClick={() => handleAuditPriceItem('3', r, ri)}>✖</Button>
|
||||
</Space>
|
||||
</RequireAuth>
|
||||
) : null,
|
||||
},
|
||||
];
|
||||
return <Table size={'small'} className='border-collapse' rowHoverable={false} rowClassName={rowStyle} pagination={false} {...{ columns, }} dataSource={renderData} rowKey={(r) => r.id} />;
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
const TypesPanels = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const [loading, agencyProducts] = useProductsStore((state) => [state.loading, state.agencyProducts]);
|
||||
// console.log(agencyProducts);
|
||||
const productsTypes = useProductsTypes();
|
||||
const [activeKey, setActiveKey] = useState([]);
|
||||
const [showTypes, setShowTypes] = useState([]);
|
||||
useEffect(() => {
|
||||
// 只显示有产品的类型; 展开产品的价格表, 合并名称列; 转化为价格主表, 携带产品属性信息
|
||||
const hasDataTypes = Object.keys(agencyProducts);
|
||||
const _show = productsTypes
|
||||
.filter((kk) => hasDataTypes.includes(kk.value))
|
||||
.map((ele) => ({
|
||||
...ele,
|
||||
extra: t('Table.Total', { total: agencyProducts[ele.value].length }),
|
||||
children: (
|
||||
<PriceTable
|
||||
// loading={loading}
|
||||
productType={ele.value}
|
||||
dataSource={agencyProducts[ele.value].reduce(
|
||||
(r, c, ri) =>
|
||||
r.concat(
|
||||
c.quotation.map((q, i) => ({
|
||||
...q,
|
||||
weekdays: q.weekdays
|
||||
.split(',')
|
||||
.filter(Boolean)
|
||||
.map((w) => t(`weekdaysShort.${w}`))
|
||||
.join(', '),
|
||||
info: c.info,
|
||||
lgc_details: c.lgc_details.reduce((rlgc, clgc) => ({...rlgc, [clgc.lgc]: clgc}), {}),
|
||||
rowSpan: i === 0 ? c.quotation.length : 0,
|
||||
rowSpanI: [ri, i],
|
||||
}))
|
||||
),
|
||||
[]
|
||||
)}
|
||||
refresh={props.refresh}
|
||||
/>
|
||||
),
|
||||
}));
|
||||
setShowTypes(_show);
|
||||
|
||||
setActiveKey(isEmpty(_show) ? [] : [_show[0].key]);
|
||||
return () => {};
|
||||
}, [productsTypes, agencyProducts]);
|
||||
|
||||
const onCollapseChange = (_activeKey) => {
|
||||
setActiveKey(_activeKey);
|
||||
};
|
||||
return isEmpty(agencyProducts) ? <Empty /> : <Collapse items={showTypes} activeKey={activeKey} onChange={onCollapseChange} />;
|
||||
};
|
||||
|
||||
const Audit = ({ ...props }) => {
|
||||
const { notification, modal } = App.useApp()
|
||||
const isPermitted = useAuthStore(state => state.isPermitted);
|
||||
const { travel_agency_id, use_year, audit_state } = useParams();
|
||||
const [activeAgency, getAgencyProducts] = useProductsStore((state) => [state.activeAgency, state.getAgencyProducts]);
|
||||
const [loading, setLoading] = useProductsStore(state => [state.loading, state.setLoading]);
|
||||
const { travelAgencyId } = usingStorage();
|
||||
|
||||
const handleGetAgencyProducts = async ({pick_year, pick_agency, pick_state}={}) => {
|
||||
const year = pick_year || use_year || dayjs().year();
|
||||
const agency = pick_agency || travel_agency_id || travelAgencyId;
|
||||
const state = pick_state ?? audit_state;
|
||||
getAgencyProducts({ travel_agency_id: agency, use_year: year, audit_state: state }).catch(ex => {
|
||||
setLoading(false);
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SecondHeaderWrapper loading={loading} backTo={isPermitted(PERM_PRODUCTS_MANAGEMENT) ? `/products` : false} header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} />} >
|
||||
{/* <PrintContractPDF /> */}
|
||||
|
||||
<TypesPanels refresh={handleGetAgencyProducts} />
|
||||
</SecondHeaderWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Audit;
|
||||
@ -1,58 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { App, Divider, Empty, Flex } from 'antd';
|
||||
import { isEmpty } from '@/utils/commons';
|
||||
import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
|
||||
import Header from './Detail/Header';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import dayjs from 'dayjs';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
import ProductsTree from './Detail/ProductsTree';
|
||||
import ProductInfo from './Detail/ProductInfo';
|
||||
import NewProductModal from './Detail/NewProductModal';
|
||||
|
||||
function Detail() {
|
||||
const { notification, modal } = App.useApp();
|
||||
const { travel_agency_id, audit_state, use_year } = useParams();
|
||||
const [addProductVisible, setAddProductVisible] = useState(false);
|
||||
const [agencyProducts, switchParams] = useProductsStore((state) => [state.agencyProducts, state.switchParams]);
|
||||
const [getAgencyProducts, activeAgency] = useProductsStore((state) => [state.getAgencyProducts, state.activeAgency]);
|
||||
const [loading, setLoading] = useProductsStore((state) => [state.loading, state.setLoading]);
|
||||
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const handleGetAgencyProducts = async ({ pick_year, pick_agency, pick_state } = {}) => {
|
||||
const year = pick_year || use_year || switchParams.use_year || dayjs().year();
|
||||
const agency = pick_agency || travel_agency_id || travelAgencyId;
|
||||
const state = pick_state ?? audit_state;
|
||||
const param = { travel_agency_id: agency, use_year: year, audit_state: state };
|
||||
// setEditingProduct({});
|
||||
getAgencyProducts(param).catch((ex) => {
|
||||
setLoading(false);
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<SecondHeaderWrapper
|
||||
loading={loading}
|
||||
backTo={false}
|
||||
header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} handleNewProduct={() => setAddProductVisible(true)} />}>
|
||||
<>
|
||||
<Flex gap={10} className='h-full'>
|
||||
{/* onNodeSelect={handleNodeSelect} */}
|
||||
<ProductsTree className='basis-80 sticky top-0 overflow-y-auto shrink-0' style1={{ height: 'calc(100vh - 150px)' }} />
|
||||
<Divider type={'vertical'} className='mx-1 h-auto' />
|
||||
<div className=' flex-auto overflow-auto '>
|
||||
<ProductInfo />
|
||||
</div>
|
||||
</Flex>
|
||||
</>
|
||||
</SecondHeaderWrapper>
|
||||
);
|
||||
}
|
||||
export default Detail;
|
||||
@ -1,100 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Form, Modal, Input, Button, Flex, App } from 'antd'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useProductsStore from '@/stores/Products/Index'
|
||||
import { useProductsTypesMapVal } from '@/hooks/useProductsSets'
|
||||
import RequireAuth from '@/components/RequireAuth'
|
||||
import { PERM_PRODUCTS_OFFER_PUT } from '@/config'
|
||||
|
||||
export const ContractRemarksModal = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { notification } = App.useApp()
|
||||
const productsTypesMapVal = useProductsTypesMapVal()
|
||||
const [getRemarkList, saveOrUpdateRemark] = useProductsStore((state) => [
|
||||
state.getRemarkList, state.saveOrUpdateRemark
|
||||
])
|
||||
|
||||
const [isRemarksModalOpen, setRemarksModalOpen] = useState(false)
|
||||
const [remarksForm] = Form.useForm()
|
||||
|
||||
const onRemarksFinish = () => {
|
||||
const remarkList = remarksForm.getFieldsValue().remarkList
|
||||
saveOrUpdateRemark(remarkList)
|
||||
.then(() => {
|
||||
setRemarksModalOpen(false)
|
||||
notification.info({
|
||||
message: 'Notification',
|
||||
description: '合同备注保存成功',
|
||||
placement: 'top',
|
||||
})
|
||||
})
|
||||
.catch(ex => {
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleContractRemarks = () => {
|
||||
getRemarkList()
|
||||
.then(list => {
|
||||
remarksForm.setFieldsValue({remarkList:list})
|
||||
setRemarksModalOpen(true)
|
||||
})
|
||||
.catch(ex => {
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getFieldLabel = (field) => {
|
||||
const remarkList = remarksForm.getFieldsValue([['remarkList']]).remarkList
|
||||
return productsTypesMapVal[remarkList[field.key].product_type_id]?.label
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
|
||||
<Button size='small' onClick={handleContractRemarks}>{t('products:ContractRemarks')}</Button>
|
||||
</RequireAuth>
|
||||
|
||||
<Modal
|
||||
centered
|
||||
title={t('products:ContractRemarks')}
|
||||
width={'640px'}
|
||||
open={isRemarksModalOpen}
|
||||
onOk={() => onRemarksFinish()}
|
||||
onCancel={() => setRemarksModalOpen(false)}
|
||||
destroyOnClose
|
||||
forceRender
|
||||
>
|
||||
<Form
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
form={remarksForm}
|
||||
name='remarksForm'
|
||||
autoComplete='off'
|
||||
>
|
||||
<Form.List name='remarkList'>
|
||||
{(fields) => (
|
||||
<Flex gap='middle' vertical>
|
||||
{fields.map((field) => (
|
||||
<Form.Item label={getFieldLabel(field)} name={[field.name, 'Memo']} key={field.key}>
|
||||
<Input.TextArea rows={2}></Input.TextArea>
|
||||
</Form.Item>
|
||||
))}
|
||||
</Flex>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ContractRemarksModal
|
||||
@ -1,166 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { App, Form, Modal, DatePicker, Divider, Switch } from 'antd';
|
||||
import { isEmpty, objectMapper } from '@/utils/commons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import DeptSelector from '@/components/DeptSelector';
|
||||
import ProductsTypesSelector from '@/components/ProductsTypesSelector';
|
||||
import VendorSelector from '@/components/VendorSelector';
|
||||
import dayjs from 'dayjs';
|
||||
import arraySupport from 'dayjs/plugin/arraySupport';
|
||||
import { copyAgencyDataAction } from '@/stores/Products/Index';
|
||||
|
||||
import useAuthStore from '@/stores/Auth';
|
||||
import RequireAuth from '@/components/RequireAuth';
|
||||
import { PERM_PRODUCTS_MANAGEMENT } from '@/config';
|
||||
|
||||
dayjs.extend(arraySupport);
|
||||
|
||||
export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, source, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const isPermitted = useAuthStore((state) => state.isPermitted);
|
||||
|
||||
useEffect(() => {
|
||||
onFormInstanceReady(form);
|
||||
}, []);
|
||||
|
||||
const onValuesChange = (changeValues, allValues) => {};
|
||||
return (
|
||||
<Form layout='horizontal' form={form} name='form_in_modal' initialValues={initialValues} onValuesChange={onValuesChange} >
|
||||
{action === '#' && <Form.Item name='agency' label={`${t('products:CopyFormMsg.target')}${t('products:Vendor')}`} rules={[{ required: true, message: t('products:CopyFormMsg.requiredVendor') }]}>
|
||||
<VendorSelector mode={null} placeholder={t('products:Vendor')} />
|
||||
</Form.Item>}
|
||||
<Form.Item name={`products_types`} label={t('products:ProductType')} >
|
||||
<ProductsTypesSelector maxTagCount={1} mode={'multiple'} placeholder={t('All')} />
|
||||
</Form.Item>
|
||||
{action === '#' && <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
|
||||
<Form.Item name={`dept`} label={t('products:Dept')} rules={[{ required: false, message: t('products:CopyFormMsg.requiredDept') }]}>
|
||||
<DeptSelector isLeaf={true} />
|
||||
</Form.Item>
|
||||
</RequireAuth>}
|
||||
<Form.Item name={'source_use_year'} label={`${t('products:CopyFormMsg.Source')}${t('products:UseYear')}`} initialValue={dayjs([source.sourceYear, 1, 1])} rules={[{ required: true,}]}>
|
||||
<DatePicker picker='year' allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item name={'target_use_year'} label={`${t('products:CopyFormMsg.target')}${t('products:UseYear')}`} rules={[{ required: true,}]}>
|
||||
<DatePicker picker='year' allowClear />
|
||||
{/* disabledDate={(current) => current <= dayjs([source.sourceYear, 12, 31])} */}
|
||||
</Form.Item>
|
||||
<Form.Item name={'with_quote'} label={`${t('products:CopyFormMsg.withQuote')}`}>
|
||||
<Switch checkedChildren={'含报价金额'} unCheckedChildren={'仅人等+日期'} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
const formValuesMapper = (values) => {
|
||||
const destinationObject = {
|
||||
'agency': {
|
||||
key: 'target_agency',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'source_use_year': [{ key: 'source_use_year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
|
||||
'target_use_year': [{ key: 'target_use_year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
|
||||
'products_types': {
|
||||
key: 'products_types',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '-1';
|
||||
},
|
||||
},
|
||||
'dept': {
|
||||
key: 'dept',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'with_quote': { key: 'with_quote', transform: (value) => (value ? 1 : 0) },
|
||||
};
|
||||
let dest = {};
|
||||
const { agency, year, ...omittedValue } = values;
|
||||
dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
|
||||
for (const key in dest) {
|
||||
if (Object.prototype.hasOwnProperty.call(dest, key)) {
|
||||
dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
|
||||
}
|
||||
}
|
||||
// omit empty
|
||||
// Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
|
||||
return dest;
|
||||
};
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export const CopyProductsFormModal = ({ source, action = '#' | 'o', open, onSubmit, onCancel, initialValues, loading, copyModalVisible, setCopyModalVisible }) => {
|
||||
const { t } = useTranslation();
|
||||
const { notification, message } = App.useApp();
|
||||
const [formInstance, setFormInstance] = useState();
|
||||
|
||||
const [copyLoading, setCopyLoading] = useState(false);
|
||||
const handleCopyAgency = async (param) => {
|
||||
param.target_agency = isEmpty(param.target_agency) ? source.sourceAgency.travel_agency_id : param.target_agency;
|
||||
setCopyLoading(true);
|
||||
// console.log(param);
|
||||
// const toID = param.target_agency;
|
||||
const success = await copyAgencyDataAction({...param, source_agency: source.sourceAgency.travel_agency_id}).catch(ex => {
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
})
|
||||
});
|
||||
setCopyLoading(false);
|
||||
success ? message.success(t('Success')) : message.error(t('Failed'));
|
||||
|
||||
if (success && typeof onSubmit === 'function') {
|
||||
onSubmit(param);
|
||||
}
|
||||
// setCopyModalVisible(false);
|
||||
// navigate(`/products/${toID}/${searchValues.use_year || 'all'}/${searchValues.audit_state || 'all'}/edit`);
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
width={600}
|
||||
open={open}
|
||||
title={`${t('Copy')}${t('products:#')}${t('products:Offer')}`}
|
||||
okText='确认'
|
||||
// cancelText='Cancel'
|
||||
okButtonProps={{
|
||||
autoFocus: true,
|
||||
}}
|
||||
confirmLoading={copyLoading}
|
||||
onCancel={() => {
|
||||
onCancel();
|
||||
formInstance?.resetFields();
|
||||
}}
|
||||
destroyOnClose
|
||||
onOk={async () => {
|
||||
try {
|
||||
const values = await formInstance?.validateFields();
|
||||
// formInstance?.resetFields();
|
||||
const dest = formValuesMapper(values);
|
||||
handleCopyAgency(dest);
|
||||
} catch (error) {
|
||||
console.log('Failed:', error);
|
||||
}
|
||||
}}>
|
||||
<RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
|
||||
<div className='py-2'>
|
||||
{t('products:CopyFormMsg.Source')}: {source.sourceAgency.travel_agency_name}
|
||||
<Divider type={'vertical'} />
|
||||
{source.sourceYear}
|
||||
</div>
|
||||
</RequireAuth>
|
||||
<CopyProductsForm action={action}
|
||||
source={source}
|
||||
initialValues={initialValues}
|
||||
onFormInstanceReady={(instance) => {
|
||||
setFormInstance(instance);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
export default CopyProductsFormModal;
|
||||
@ -1,176 +0,0 @@
|
||||
import { useEffect, useState, useSyncExternalStore } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { App, Table, Button, Modal, Popconfirm } from 'antd';
|
||||
import { getAgencyProductExtrasAction, searchPublishedProductsAction, addProductExtraAction, delProductExtrasAction } from '@/stores/Products/Index';
|
||||
import { cloneDeep, pick } from '@/utils/commons';
|
||||
import SearchForm from '@/components/SearchForm';
|
||||
|
||||
import RequireAuth from '@/components/RequireAuth';
|
||||
import { PERM_PRODUCTS_MANAGEMENT } from '@/config';
|
||||
import { useProductsTypesMapVal } from '@/hooks/useProductsSets';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
|
||||
const NewAddonModal = ({ onPick, ...props }) => {
|
||||
// const { travel_agency_id, use_year } = useParams();
|
||||
const { t } = useTranslation();
|
||||
const { notification, message } = App.useApp();
|
||||
|
||||
const [{ travel_agency_id, use_year }] = useProductsStore((state) => [state.switchParams]);
|
||||
|
||||
const productsTypesMapVal = useProductsTypesMapVal();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false); // bind loading
|
||||
const [searchLoading, setSearchLoading] = useState(false);
|
||||
const [searchResult, setSearchResult] = useState([]);
|
||||
|
||||
const onSearchProducts = async (values) => {
|
||||
const copyObject = cloneDeep(values);
|
||||
const { starttime, endtime, year, ...param } = copyObject;
|
||||
setSearchLoading(true);
|
||||
setSearchResult([]);
|
||||
const search_year = year || use_year;
|
||||
const result = await searchPublishedProductsAction({ ...param, use_year: search_year, travel_agency_id });
|
||||
setSearchResult(result);
|
||||
setSearchLoading(false);
|
||||
};
|
||||
const handleAddExtras = async (item) => {
|
||||
if (typeof onPick === 'function') {
|
||||
onPick(item);
|
||||
}
|
||||
};
|
||||
|
||||
const searchResultColumns = [
|
||||
{ key: 'ptype', dataIndex: 'type', width: '6rem', title: t('products:ProductType'), render: (text, r) => productsTypesMapVal[text]?.label || text },
|
||||
{ key: 'code', dataIndex: 'code', width: '6rem', title: t('products:Code') },
|
||||
{ key: 'title', dataIndex: 'title', width: '16rem', title: t('products:Title') },
|
||||
// {
|
||||
// title: t('products:price'),
|
||||
// dataIndex: ['quotation', '0', 'adult_cost'],
|
||||
// width: '10rem',
|
||||
// render: (_, { quotation }) => `${quotation[0].adult_cost} ${quotation[0].currency} / ${quotation[0].unit_name}`,
|
||||
// },
|
||||
{
|
||||
key: 'action',
|
||||
title: '',
|
||||
width: 150,
|
||||
render: (_, record) => (
|
||||
<Button className='text-primary' onClick={() => handleAddExtras(record)}>
|
||||
绑定此项目
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
const paginationProps = {
|
||||
showTotal: (total) => t('Table.Total', { total }),
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Button type='primary' onClick={() => setOpen(true)} className='mt-2'>
|
||||
{t('New')} {t('products:EditComponents.Extras')}
|
||||
</Button>
|
||||
|
||||
<Modal width={'95%'} style={{ top: 20 }} open={open} title={'添加附加'} footer={false} onCancel={() => setOpen(false)} destroyOnClose>
|
||||
<SearchForm
|
||||
fieldsConfig={{
|
||||
shows: ['year', 'keyword', 'products_types', 'city'], // 'dates',
|
||||
fieldProps: {
|
||||
year: { rules: [{ required: true }] },
|
||||
keyword: { label: t('products:Title'), col: 4 },
|
||||
},
|
||||
// sort: { keyword: 100 },
|
||||
}}
|
||||
initialValue={
|
||||
{
|
||||
// dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
|
||||
// year: dayjs().add(1, 'year'),
|
||||
}
|
||||
}
|
||||
onSubmit={(err, formVal, filedsVal) => {
|
||||
onSearchProducts(formVal);
|
||||
}}
|
||||
/>
|
||||
<Table
|
||||
size={'small'}
|
||||
key={'searchProductsTable'}
|
||||
rowKey={'id'}
|
||||
loading={searchLoading}
|
||||
dataSource={searchResult}
|
||||
columns={searchResultColumns}
|
||||
pagination={searchResult.length <= 10 ? false : paginationProps}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
const Extras = ({ productId, onChange, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const { notification, message } = App.useApp();
|
||||
|
||||
// const { travel_agency_id, use_year } = useParams();
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const [{travel_agency_id, use_year}] = useProductsStore((state) => [state.switchParams]);
|
||||
|
||||
const [extrasData, setExtrasData] = useState([]);
|
||||
|
||||
const handleGetAgencyProductExtras = async () => {
|
||||
setExtrasData([]);
|
||||
// console.log('handleGetAgencyProductExtras', productId);
|
||||
const data = await getAgencyProductExtrasAction({ id: productId, travel_agency_id: travel_agency_id || travelAgencyId, use_year });
|
||||
setExtrasData(data);
|
||||
};
|
||||
|
||||
const handleNewAddOn = async (item) => {
|
||||
// setExtrasData(prev => [].concat(prev, [item]));
|
||||
// todo: 提交后端; 重复绑定同一个
|
||||
const _item = pick(item, ['id', 'title', 'code']);
|
||||
const newSuccess = await addProductExtraAction({ travel_agency_id, id: productId, extras: [_item] });
|
||||
newSuccess ? message.success(`${t('Success')}`) : message.error(`${t('Failed')}`);
|
||||
await handleGetAgencyProductExtras();
|
||||
}
|
||||
|
||||
const handleDelAddon = async (item) => {
|
||||
const delSuccess = await delProductExtrasAction({ travel_agency_id, id: productId, del_extras_ids: [item.id] });
|
||||
delSuccess ? message.success(`${t('Success')}`) : message.error(`${t('Failed')}`);
|
||||
await handleGetAgencyProductExtras();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (productId) handleGetAgencyProductExtras();
|
||||
|
||||
return () => {};
|
||||
}, [productId]);
|
||||
|
||||
const columns = [
|
||||
{ title: t('products:Title'), dataIndex: ['info', 'title'], width: '16rem', },
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'operation',
|
||||
width: '4rem',
|
||||
render: (_, r) => (
|
||||
<Popconfirm title={t('sureDelete')} onConfirm={(e) => handleDelAddon(r.info)} okText={t('Yes')} >
|
||||
<Button size='small' type='link' danger>
|
||||
{t('Delete')}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
|
||||
<h2>{t('products:EditComponents.Extras')}</h2>
|
||||
<Table dataSource={extrasData} columns={columns} bordered pagination={false} rowKey={(r) => r.info.id} />
|
||||
<NewAddonModal onPick={handleNewAddOn} />
|
||||
</RequireAuth>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Extras;
|
||||
@ -1,312 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, Link, useNavigate, useLocation } from "react-router-dom";
|
||||
import { App, Button, Divider, Popconfirm, Select } from "antd";
|
||||
import { ReloadOutlined } from "@ant-design/icons";
|
||||
import { useProductsAuditStatesMapVal } from "@/hooks/useProductsSets";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import useProductsStore, {
|
||||
postAgencyProductsAuditAction,
|
||||
postAgencyAuditAction,
|
||||
getAgencyAllExtrasAction,
|
||||
} from "@/stores/Products/Index";
|
||||
import { isEmpty, objectMapper } from "@/utils/commons";
|
||||
import useAuthStore from "@/stores/Auth";
|
||||
import RequireAuth from "@/components/RequireAuth";
|
||||
// import PrintContractPDF from './PrintContractPDF';
|
||||
import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from "@/config";
|
||||
import dayjs from "dayjs";
|
||||
import VendorSelector from "@/components/VendorSelector";
|
||||
import AuditStateSelector from "@/components/AuditStateSelector";
|
||||
import { usingStorage } from "@/hooks/usingStorage";
|
||||
|
||||
import AgencyContract from "../Print/AgencyContract";
|
||||
// import AgencyContract from "../Print/AgencyContract_v0903";
|
||||
import { saveAs } from "file-saver";
|
||||
import { Packer } from "docx";
|
||||
|
||||
const Header = ({ refresh, ...props }) => {
|
||||
const location = useLocation();
|
||||
const isEditPage = location.pathname.includes("edit");
|
||||
const showEditA = !location.pathname.includes("edit");
|
||||
const showAuditA = !location.pathname.includes("audit");
|
||||
const { travel_agency_id, use_year, audit_state } = useParams();
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const { t } = useTranslation();
|
||||
const isPermitted = useAuthStore((state) => state.isPermitted);
|
||||
const [activeAgency, setActiveAgency] = useProductsStore((state) => [
|
||||
state.activeAgency,
|
||||
state.setActiveAgency,
|
||||
]);
|
||||
const [switchParams, setSwitchParams] = useProductsStore((state) => [
|
||||
state.switchParams,
|
||||
state.setSwitchParams,
|
||||
]);
|
||||
// const [activeAgencyState] = useProductsStore((state) => [state.activeAgencyState]);
|
||||
const [agencyProducts] = useProductsStore((state) => [state.agencyProducts]);
|
||||
const stateMapVal = useProductsAuditStatesMapVal();
|
||||
const { message, notification } = App.useApp();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const yearOptions = [];
|
||||
const currentYear = switchParams.use_year || dayjs().year();
|
||||
const baseYear = use_year
|
||||
? Number(use_year === "all" ? currentYear : use_year)
|
||||
: currentYear;
|
||||
for (let i = currentYear - 5; i <= baseYear + 5; i++) {
|
||||
yearOptions.push({ label: i, value: i });
|
||||
}
|
||||
|
||||
const { getRemarkList } = useProductsStore((selector) => ({
|
||||
getRemarkList: selector.getRemarkList,
|
||||
}));
|
||||
|
||||
const [param, setParam] = useState({
|
||||
pick_year: baseYear,
|
||||
pick_agency: travel_agency_id,
|
||||
});
|
||||
const [pickYear, setPickYear] = useState(baseYear);
|
||||
const [pickAgency, setPickAgency] = useState({
|
||||
value: activeAgency.travel_agency_id,
|
||||
label: activeAgency.travel_agency_name,
|
||||
});
|
||||
const [pickAuditState, setPickAuditState] = useState();
|
||||
useEffect(() => {
|
||||
const _param = objectMapper(param, {
|
||||
pick_year: "use_year",
|
||||
pick_agency: "travel_agency_id",
|
||||
pick_state: "audit_state",
|
||||
});
|
||||
setSwitchParams({
|
||||
..._param,
|
||||
travel_agency_id: _param?.travel_agency_id || travelAgencyId,
|
||||
});
|
||||
refresh(param);
|
||||
|
||||
return () => {};
|
||||
}, [param]);
|
||||
|
||||
const emptyPickState = { value: "", label: t("products:State") };
|
||||
useEffect(() => {
|
||||
const baseState = audit_state
|
||||
? audit_state === "all"
|
||||
? emptyPickState
|
||||
: stateMapVal[`${audit_state}`]
|
||||
: emptyPickState;
|
||||
if (isEmpty(pickAuditState)) {
|
||||
setPickAuditState(baseState);
|
||||
}
|
||||
return () => {};
|
||||
}, [audit_state, stateMapVal]);
|
||||
|
||||
const handleYearChange = (value) => {
|
||||
setPickYear(value);
|
||||
setParam((pre) => ({ ...pre, ...{ pick_year: value } }));
|
||||
};
|
||||
const handleAuditStateChange = (labelValue) => {
|
||||
const { value } = labelValue || emptyPickState;
|
||||
setPickAuditState(labelValue || emptyPickState);
|
||||
setParam((pre) => ({ ...pre, ...{ pick_state: value } }));
|
||||
};
|
||||
|
||||
const handleAgencyChange = ({ label, value }) => {
|
||||
setPickAgency({ label, value });
|
||||
setActiveAgency({ travel_agency_id: value, travel_agency_name: label });
|
||||
setParam((pre) => ({ ...pre, ...{ pick_agency: value } }));
|
||||
};
|
||||
|
||||
const handleAuditAgency = (state) => {
|
||||
// const s = Object.keys(agencyProducts).map((typeKey) => {
|
||||
|
||||
// });
|
||||
postAgencyProductsAuditAction(state, {
|
||||
travel_agency_id: activeAgency.travel_agency_id,
|
||||
use_year: switchParams.use_year,
|
||||
})
|
||||
.then((json) => {
|
||||
if (json.errcode === 0) {
|
||||
message.success(json.errmsg);
|
||||
if (typeof refresh === "function") {
|
||||
refresh(param);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((ex) => {
|
||||
notification.error({
|
||||
message: "Notification",
|
||||
description: ex.message,
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitForAudit = () => {
|
||||
postAgencyAuditAction(activeAgency.travel_agency_id, switchParams.use_year)
|
||||
.then((json) => {
|
||||
if (json.errcode === 0) {
|
||||
message.success(t("Success"));
|
||||
if (typeof refresh === "function") {
|
||||
refresh(param);
|
||||
const auditPagePath = isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
|
||||
? `/products/${activeAgency.travel_agency_id}/${switchParams.use_year}/all/audit`
|
||||
: isPermitted(PERM_PRODUCTS_OFFER_PUT)
|
||||
? `/products/audit`
|
||||
: "";
|
||||
navigate(auditPagePath);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((ex) => {
|
||||
notification.error({
|
||||
message: "Notification",
|
||||
description: ex.message,
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownload = async () => {
|
||||
// await refresh();
|
||||
const agencyExtras = await getAgencyAllExtrasAction(switchParams);
|
||||
const remarks = await getRemarkList()
|
||||
const documentCreator = new AgencyContract();
|
||||
const doc = documentCreator.create([
|
||||
switchParams,
|
||||
activeAgency,
|
||||
agencyProducts,
|
||||
agencyExtras,
|
||||
remarks
|
||||
]);
|
||||
|
||||
const _d = dayjs().format("YYYYMMDD_HH.mm.ss.SSS"); // Date.now().toString(32)
|
||||
Packer.toBlob(doc).then((blob) => {
|
||||
saveAs(
|
||||
blob,
|
||||
`${activeAgency.travel_agency_name}${pickYear}年地接合同-${_d}.docx`
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-end items-center gap-4 h-full">
|
||||
<div className="grow">
|
||||
<h2 className="m-0 leading-tight">
|
||||
{isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? (
|
||||
<VendorSelector
|
||||
value={{
|
||||
label: activeAgency.travel_agency_name,
|
||||
value: activeAgency.travel_agency_id,
|
||||
}}
|
||||
onChange={handleAgencyChange}
|
||||
allowClear={false}
|
||||
mode={null}
|
||||
className="w-72"
|
||||
size="large"
|
||||
variant={"borderless"}
|
||||
/>
|
||||
) : (
|
||||
activeAgency.travel_agency_name
|
||||
)}
|
||||
<Divider type={"vertical"} />
|
||||
<Select
|
||||
options={yearOptions}
|
||||
variant={"borderless"}
|
||||
className="w-24"
|
||||
size="large"
|
||||
value={pickYear}
|
||||
onChange={handleYearChange}
|
||||
/>
|
||||
<Divider type={"vertical"} />
|
||||
<AuditStateSelector
|
||||
variant={"borderless"}
|
||||
className="w-32"
|
||||
size="large"
|
||||
value={pickAuditState}
|
||||
onChange={handleAuditStateChange}
|
||||
/>
|
||||
{/* <Divider type={'vertical'} />
|
||||
{(use_year || '').replace('all', '')} */}
|
||||
<Button
|
||||
onClick={() => refresh(param)}
|
||||
type="text"
|
||||
className="text-primary round-none"
|
||||
icon={<ReloadOutlined />}
|
||||
/>
|
||||
</h2>
|
||||
</div>
|
||||
{/* todo: export, 审核完成之后才能导出 */}
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
|
||||
<Button size="small" onClick={handleDownload}>
|
||||
{t("Export")} .docx
|
||||
</Button>
|
||||
{/* <PrintContractPDF /> */}
|
||||
</RequireAuth>
|
||||
{/* {activeAgencyState === 0 && ( */}
|
||||
<>
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
|
||||
<Popconfirm
|
||||
title={t("products:sureSubmitAudit")}
|
||||
onConfirm={handleSubmitForAudit}
|
||||
okText={t("Yes")}
|
||||
placement={"bottomLeft"}
|
||||
>
|
||||
<Button size="small" type={"primary"}>
|
||||
{t("Submit")}
|
||||
{t("Audit")}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</RequireAuth>
|
||||
</>
|
||||
{/* )} */}
|
||||
{showEditA && (
|
||||
<Link
|
||||
className="px-2"
|
||||
to={
|
||||
isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
|
||||
? `/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/edit`
|
||||
: `/products/edit`
|
||||
}
|
||||
>
|
||||
{t("Edit")}
|
||||
</Link>
|
||||
)}
|
||||
{showAuditA && (
|
||||
<Link
|
||||
className="px-2"
|
||||
to={
|
||||
isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
|
||||
? `/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/audit`
|
||||
: `/products/audit`
|
||||
}
|
||||
>
|
||||
{t("products:AuditRes")}
|
||||
</Link>
|
||||
)}
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
|
||||
<Button
|
||||
size="small"
|
||||
type={"primary"}
|
||||
onClick={() => handleAuditAgency("1")}
|
||||
>
|
||||
{t("products:auditStateAction.Published")}
|
||||
</Button>
|
||||
</RequireAuth>
|
||||
{/* <Button size='small' type={'primary'} ghost onClick={() => handleAuditAgency('2')}>
|
||||
{t('products:auditStateAction.Approved')}
|
||||
</Button> */}
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
|
||||
<Button
|
||||
size="small"
|
||||
type={"primary"}
|
||||
danger
|
||||
ghost
|
||||
onClick={() => handleAuditAgency("3")}
|
||||
>
|
||||
{t("products:auditStateAction.Rejected")}
|
||||
</Button>
|
||||
</RequireAuth>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
@ -1,135 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Form, Modal, Input, Button } from 'antd';
|
||||
import { objectMapper } from '@/utils/commons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import ProductsTypesSelector from '@/components/ProductsTypesSelector';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import { useNewProductRecord, useProductsTypesMapVal } from '@/hooks/useProductsSets';
|
||||
import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
|
||||
import RequireAuth from '@/components/RequireAuth';
|
||||
import { PERM_PRODUCTS_OFFER_PUT, PERM_PRODUCTS_NEW } from '@/config';
|
||||
|
||||
export const NewProductsForm = ({ initialValues, onFormInstanceReady, ...props }) => {
|
||||
const { t } = useTranslation('products');
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
onFormInstanceReady(form);
|
||||
}, []);
|
||||
|
||||
const [pickType, setPickType] = useState({ value: '6' });
|
||||
const onValuesChange = (changeValues, allValues) => {
|
||||
if ('products_type' in changeValues) {
|
||||
setPickType(changeValues.products_type);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form layout='horizontal' form={form} name='new_product_in_modal' initialValues={initialValues} onValuesChange={onValuesChange}>
|
||||
<Form.Item name={`products_type`} label={t('products:ProductType')} rules={[{ required: true }]} tooltip={false}>
|
||||
<ProductsTypesSelector maxTagCount={1} mode={null} placeholder={t('common:All')} />
|
||||
</Form.Item>
|
||||
<Form.Item name={`title`} label={t('products:Title')} rules={[{ required: true }]} tooltip={t(`FormTooltip.NewTitle.${pickType.value}`)} dependencies={['products_type']}>
|
||||
{/* ${pickType.value} */}
|
||||
<Input placeholder={t(`FormTooltip.NewTitle.${pickType.value}`)} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
const formValuesMapper = (values) => {
|
||||
const destinationObject = {
|
||||
'products_types': {
|
||||
key: 'products_types',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '-1';
|
||||
},
|
||||
},
|
||||
};
|
||||
let dest = {};
|
||||
const { ...omittedValue } = values;
|
||||
dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
|
||||
for (const key in dest) {
|
||||
if (Object.prototype.hasOwnProperty.call(dest, key)) {
|
||||
dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
|
||||
}
|
||||
}
|
||||
// omit empty
|
||||
// Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
|
||||
return dest;
|
||||
};
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export const NewProductModal = ({ initialValues }) => {
|
||||
const { t } = useTranslation();
|
||||
const [formInstance, setFormInstance] = useState();
|
||||
const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
|
||||
const [switchParams] = useProductsStore((state) => [state.switchParams]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [copyLoading, setCopyLoading] = useState(false);
|
||||
const productsTypesMapVal = useProductsTypesMapVal();
|
||||
const newProduct = useNewProductRecord();
|
||||
const { language } = useDefaultLgc();
|
||||
const handelAddProduct = (param) => {
|
||||
const copyNewProduct = structuredClone(newProduct);
|
||||
copyNewProduct.info.title = param.title;
|
||||
copyNewProduct.info.product_title = param.title;
|
||||
copyNewProduct.info.product_type_id = productsTypesMapVal[param.products_type.value].value;
|
||||
copyNewProduct.info.product_type_name = productsTypesMapVal[param.products_type.value].label;
|
||||
copyNewProduct.lgc_details[0].lgc = language;
|
||||
copyNewProduct.lgc_details[0].title = param.title;
|
||||
copyNewProduct.quotation[0].use_dates_start = `${switchParams.use_year}-01-01`;
|
||||
copyNewProduct.quotation[0].use_dates_end = `${switchParams.use_year}-12-31`;
|
||||
setEditingProduct(copyNewProduct);
|
||||
// if (typeof onSubmit === 'function') {
|
||||
// onSubmit();
|
||||
// }
|
||||
setOpen(false);
|
||||
return false;
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<RequireAuth subject={PERM_PRODUCTS_NEW}>
|
||||
<Button size='small' type={'primary'} onClick={() => setOpen(true)}>
|
||||
{t('New')}
|
||||
{t('products:#')}
|
||||
</Button>
|
||||
</RequireAuth>
|
||||
|
||||
<Modal
|
||||
width={600}
|
||||
open={open}
|
||||
title={`${t('common:New')}${t('products:#')}`}
|
||||
okButtonProps={{
|
||||
autoFocus: true,
|
||||
}}
|
||||
confirmLoading={copyLoading}
|
||||
onCancel={() => {
|
||||
// onCancel();
|
||||
setOpen(false);
|
||||
formInstance?.resetFields();
|
||||
}}
|
||||
destroyOnClose
|
||||
onOk={async () => {
|
||||
try {
|
||||
const values = await formInstance?.validateFields();
|
||||
// formInstance?.resetFields();
|
||||
const dest = formValuesMapper(values);
|
||||
handelAddProduct(dest);
|
||||
} catch (error) {
|
||||
console.log('Failed:', error);
|
||||
}
|
||||
}}>
|
||||
<NewProductsForm
|
||||
initialValues={initialValues}
|
||||
onFormInstanceReady={(instance) => {
|
||||
setFormInstance(instance);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default NewProductModal;
|
||||
@ -1,109 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Input, Space } from 'antd'
|
||||
|
||||
const PriceCompactInput = (props) => {
|
||||
const { id, value = {}, onChange } = props
|
||||
const [numberStart, setNumberStart] = useState(0)
|
||||
const [numberEnd, setNumberEnd] = useState(0)
|
||||
const [audultPrice, setAudultPrice] = useState(0)
|
||||
const [childrenPrice, setChildrenPrice] = useState(0)
|
||||
const triggerChange = (changedValue) => {
|
||||
onChange?.({
|
||||
numberStart,
|
||||
numberEnd,
|
||||
audultPrice,
|
||||
childrenPrice,
|
||||
...value,
|
||||
...changedValue,
|
||||
})
|
||||
}
|
||||
const onNumberStartChange = (e) => {
|
||||
const newNumber = parseInt(e.target.value || '0', 10)
|
||||
if (Number.isNaN(newNumber)) {
|
||||
return
|
||||
}
|
||||
if (!('numberStart' in value)) {
|
||||
setNumberStart(newNumber)
|
||||
}
|
||||
triggerChange({
|
||||
numberStart: newNumber,
|
||||
})
|
||||
}
|
||||
const onNumberEndChange = (e) => {
|
||||
const newNumber = parseInt(e.target.value || '0', 10)
|
||||
if (Number.isNaN(newNumber)) {
|
||||
return
|
||||
}
|
||||
if (!('numberEnd' in value)) {
|
||||
setNumberEnd(newNumber)
|
||||
}
|
||||
triggerChange({
|
||||
numberEnd: newNumber,
|
||||
})
|
||||
}
|
||||
const onAudultPriceChange = (e) => {
|
||||
const newNumber = parseInt(e.target.value || '0', 10)
|
||||
if (Number.isNaN(newNumber)) {
|
||||
return
|
||||
}
|
||||
if (!('audultPrice' in value)) {
|
||||
setAudultPrice(newNumber)
|
||||
}
|
||||
triggerChange({
|
||||
audultPrice: newNumber,
|
||||
})
|
||||
}
|
||||
const onChildrenPriceChange = (e) => {
|
||||
const newNumber = parseInt(e.target.value || '0', 10)
|
||||
if (Number.isNaN(newNumber)) {
|
||||
return
|
||||
}
|
||||
if (!('childrenPrice' in value)) {
|
||||
setChildrenPrice(newNumber)
|
||||
}
|
||||
triggerChange({
|
||||
childrenPrice: newNumber,
|
||||
})
|
||||
}
|
||||
return (
|
||||
<Space.Compact id={id}>
|
||||
<Input
|
||||
type='text'
|
||||
value={value.numberStart || numberStart}
|
||||
onChange={onNumberStartChange}
|
||||
style={{
|
||||
width: '20%',
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
value={value.numberEnd || numberEnd}
|
||||
onChange={onNumberEndChange}
|
||||
style={{
|
||||
width: '40%',
|
||||
}}
|
||||
addonBefore='~'
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
value={value.audultPrice || audultPrice}
|
||||
onChange={onAudultPriceChange}
|
||||
style={{
|
||||
width: '70%',
|
||||
}}
|
||||
addonBefore='成人价'
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
value={value.childrenPrice || childrenPrice}
|
||||
onChange={onChildrenPriceChange}
|
||||
style={{
|
||||
width: '70%',
|
||||
}}
|
||||
addonBefore='儿童价'
|
||||
/>
|
||||
</Space.Compact>
|
||||
)
|
||||
}
|
||||
|
||||
export default PriceCompactInput
|
||||
@ -1,150 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { App, Breadcrumb, Divider } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useProductsTypesMapVal, useNewProductRecord } from '@/hooks/useProductsSets';
|
||||
import useProductsStore, { postProductsSaveAction } from '@/stores/Products/Index';
|
||||
import useAuthStore from '@/stores/Auth';
|
||||
import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_PUT, PERM_PRODUCTS_INFO_PUT, PERM_PRODUCTS_NEW } from '@/config';
|
||||
import { isEmpty, pick } from '@/utils/commons';
|
||||
import ProductInfoForm from './ProductInfoForm';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
import Extras from './Extras';
|
||||
import NewProductModal from './NewProductModal';
|
||||
|
||||
const ProductInfo = ({ ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const { notification, message } = App.useApp();
|
||||
const { userId } = usingStorage();
|
||||
const isPermitted = useAuthStore((state) => state.isPermitted);
|
||||
const productsTypesMapVal = useProductsTypesMapVal();
|
||||
const newProductRecord = useNewProductRecord();
|
||||
|
||||
const [loading, setLoading, appendNewProduct] = useProductsStore((state) => [state.loading, state.setLoading, state.appendNewProduct]);
|
||||
const [activeAgency, editingProduct, setEditingProduct] = useProductsStore((state) => [state.activeAgency, state.editingProduct, state.setEditingProduct]);
|
||||
|
||||
const [extrasVisible, setExtrasVisible] = useState(false);
|
||||
const [editablePerm, setEditablePerm] = useState(false);
|
||||
const [infoEditable, setInfoEditable] = useState(false);
|
||||
const [priceEditable, setPriceEditable] = useState(false);
|
||||
useEffect(() => {
|
||||
const topPerm = isPermitted(PERM_PRODUCTS_MANAGEMENT); // 高级权限
|
||||
|
||||
const hasHT = (editingProduct?.info?.htid || 0) > 0;
|
||||
// const hasAuditPer = isPermitted(PERM_PRODUCTS_OFFER_AUDIT);
|
||||
const hasEditPer = isPermitted(PERM_PRODUCTS_INFO_PUT) || isPermitted(PERM_PRODUCTS_NEW); // || isPermitted(PERM_PRODUCTS_OFFER_PUT);
|
||||
|
||||
setEditablePerm(topPerm || hasEditPer);
|
||||
// setEditable(topPerm || (hasAuditPer ? true : (!hasHT && hasEditPer)));
|
||||
// setEditable(true); // debug: 0
|
||||
// console.log('editable', hasAuditPer, (notAudit && hasEditPer));
|
||||
setInfoEditable(topPerm || (!hasHT && hasEditPer));
|
||||
|
||||
const _priceEditable = [-1, 3].includes(activeAgency?.audit_state_id) || isEmpty(editingProduct?.info?.id);
|
||||
const hasPricePer = isPermitted(PERM_PRODUCTS_OFFER_PUT);
|
||||
// setPriceEditable(topPerm || (_priceEditable && hasPricePer));
|
||||
setPriceEditable(topPerm || (hasPricePer));
|
||||
// setPriceEditable(true); // debug: 0
|
||||
|
||||
const showExtras = topPerm && hasHT; // !isEmpty(editingProduct) &&
|
||||
setExtrasVisible(showExtras);
|
||||
|
||||
setLgcEdits({});
|
||||
setInfoEditStatus('');
|
||||
return () => {};
|
||||
}, [activeAgency, editingProduct]);
|
||||
|
||||
const [infoEditStatus, setInfoEditStatus] = useState('');
|
||||
const [lgcEdits, setLgcEdits] = useState({});
|
||||
const onValuesChange = (changedValues, forms) => {
|
||||
// console.log('onValuesChange', changedValues);
|
||||
if ('product_title' in changedValues) {
|
||||
setInfoEditStatus('2');
|
||||
setLgcEdits({...lgcEdits, '2': {'edit_status': '2'}});
|
||||
}
|
||||
if ('lgc_details_mapped' in changedValues) {
|
||||
const lgc = Object.keys(changedValues.lgc_details_mapped)[0];
|
||||
setLgcEdits({...lgcEdits, [lgc]: {'edit_status': '2'}});
|
||||
} else {
|
||||
setInfoEditStatus('2');
|
||||
}
|
||||
};
|
||||
|
||||
const onSave = async (err, values, forms) => {
|
||||
values.travel_agency_id = activeAgency.travel_agency_id;
|
||||
const copyNewProduct = structuredClone(newProductRecord);
|
||||
const poster = {
|
||||
// ...(topPerm ? { } : { 'audit_state': -1 }), // 高级权限: 不变更状态值
|
||||
// "create_date": dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
// "created_by": userId,
|
||||
'travel_agency_id': activeAgency.travel_agency_id,
|
||||
// "travel_agency_name": "",
|
||||
// "lastedit_changed": "",
|
||||
"edit_status": infoEditStatus || editingProduct.info.edit_status,
|
||||
};
|
||||
const copyFields = pick(editingProduct.info, ['product_type_id']); // 'title',
|
||||
const readyToSubInfo = { ...copyNewProduct.info, ...editingProduct.info, title: editingProduct.info.product_title, ...values.info, ...copyFields, ...poster };
|
||||
// console.log('onSave', editingProduct.info, readyToSubInfo);
|
||||
|
||||
/** lgc_details */
|
||||
const prevLgcDetailsMapped = editingProduct.lgc_details.reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
||||
const mergedLgc = { ...prevLgcDetailsMapped, ...values.lgc_details_mapped, };
|
||||
for (const lgcKey in lgcEdits) {
|
||||
if (Object.prototype.hasOwnProperty.call(lgcEdits, lgcKey)) {
|
||||
const element = lgcEdits[lgcKey];
|
||||
mergedLgc[lgcKey].edit_status = element?.edit_status || values.lgc_details_mapped[lgcKey]?.edit_status || '2';
|
||||
}
|
||||
}
|
||||
|
||||
// console.log('before save', '\n lgcEdits:', lgcEdits, '\n mergedLgc', mergedLgc);
|
||||
// return false; // debug: 0
|
||||
/** 提交保存 */
|
||||
setLoading(true);
|
||||
const { success, result } = await postProductsSaveAction({
|
||||
travel_agency_id: activeAgency.travel_agency_id,
|
||||
info: readyToSubInfo,
|
||||
lgc_details: Object.values(mergedLgc),
|
||||
quotation: values.quotation.map((q) => ({ ...q, unit: Number(q.unit || q.unit_id), unit_id: Number(q.unit_id) })), // || editingProduct.quotation, // 没改动, 就用原来的
|
||||
}).catch((ex) => {
|
||||
setLoading(false);
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
setLoading(false);
|
||||
success ? message.success(t('Success')) : message.error(t('Failed'));
|
||||
// 保存后更新数据
|
||||
// result.quotation = isEmpty(result.quotation) ? editingProduct.quotation : result.quotation;
|
||||
result.info.htid = editingProduct?.info?.htid;
|
||||
appendNewProduct(result);
|
||||
setEditingProduct(result);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ title: productsTypesMapVal[editingProduct?.info?.product_type_id]?.label || editingProduct?.info?.product_type_name },
|
||||
{ title: editingProduct?.info?.title ?? t('New') },
|
||||
// { title: 'htID: ' + editingProduct?.info?.htid },
|
||||
// { title: 'ID: ' + editingProduct?.info?.id },
|
||||
]}
|
||||
/>
|
||||
<Divider className='my-1' />
|
||||
{isEmpty(editingProduct) ? (
|
||||
<div className=' my-2'>
|
||||
<NewProductModal />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h2>{t('products:EditComponents.info')}</h2>
|
||||
<ProductInfoForm {...{ editablePerm, infoEditable, priceEditable, onValuesChange }} initialValues={editingProduct?.info} onSubmit={onSave} />
|
||||
<Divider className='my-1' />
|
||||
{extrasVisible && <Extras productId={editingProduct?.info?.id} />}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductInfo;
|
||||
@ -1,434 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { App, Form, Input, Row, Col, Select, Button, InputNumber, Checkbox } from 'antd';
|
||||
import { objectMapper, isEmpty, isNotEmpty } from '@/utils/commons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useWeekdays } from '@/hooks/useDatePresets';
|
||||
import DeptSelector from '@/components/DeptSelector';
|
||||
import CitySelector from '@/components/CitySelector';
|
||||
import { useProductsTypesFieldsets } from '@/hooks/useProductsSets';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import ProductInfoLgc from './ProductInfoLgc';
|
||||
import ProductInfoQuotation from './ProductInfoQuotation';
|
||||
import { useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
|
||||
|
||||
const InfoForm = ({ onSubmit, onReset, onValuesChange, editablePerm, infoEditable, priceEditable, showSubmit, confirmText, formName, ...props }) => {
|
||||
const { notification } = App.useApp();
|
||||
const { t } = useTranslation('products');
|
||||
const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
|
||||
const [loading, editingProduct] = useProductsStore((state) => [state.loading, state.editingProduct]);
|
||||
const weekdays = useWeekdays();
|
||||
const [form] = Form.useForm();
|
||||
const { sort, hides, fieldProps, fieldComProps } = {
|
||||
sort: '',
|
||||
fieldProps: '',
|
||||
fieldComProps: '',
|
||||
hides: [],
|
||||
shows: [],
|
||||
...props.fieldsConfig,
|
||||
};
|
||||
const filedsets = useProductsTypesFieldsets(editingProduct?.info?.product_type_id);
|
||||
const shows = filedsets[0];
|
||||
|
||||
const [pickEditedInfo, setPickEditedInfo] = useState({}); // 传递联动的字段
|
||||
|
||||
// const [editable, setEditable] = useState(true);
|
||||
const [formEditable, setFormEditable] = useState(true);
|
||||
const [showSave, setShowSave] = useState(true);
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
form.setFieldValue('city', editingProduct?.info?.city_id ? { value: editingProduct?.info?.city_id, label: editingProduct?.info?.city_name } : undefined);
|
||||
form.setFieldValue('dept', { value: editingProduct?.info?.dept_id, label: editingProduct?.info?.dept_name });
|
||||
const lgc_details_mapped = (editingProduct?.lgc_details || []).reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
||||
form.setFieldValue('lgc_details_mapped', lgc_details_mapped);
|
||||
form.setFieldValue('quotation', editingProduct?.quotation);
|
||||
form.setFieldValue('display_to_c', editingProduct.info?.display_to_c || '0');
|
||||
setPickEditedInfo({ ...pickEditedInfo, product_title: editingProduct?.info?.product_title });
|
||||
|
||||
setFormEditable(infoEditable || priceEditable);
|
||||
|
||||
// const editable0 = isEmpty(editingProduct) ? false : editablePerm; // 空对象未操作
|
||||
setShowSave(infoEditable || priceEditable);
|
||||
// setEditable(editable0);
|
||||
return () => {};
|
||||
}, [editingProduct, editablePerm, infoEditable, priceEditable]);
|
||||
|
||||
const onFinish = (values) => {
|
||||
console.log('Received values of form, origin form value: \n', values);
|
||||
const dest = formValuesMapper(values);
|
||||
console.log('form value send to onSubmit:\n', dest);
|
||||
if (typeof onSubmit === 'function') {
|
||||
onSubmit(null, dest, values);
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishFailed = ({ values, errorFields }) => {
|
||||
console.log('form validate failed', '\nform values:', values, '\nerrorFields', errorFields);
|
||||
notification.warning({
|
||||
message: '数据未填写完整',
|
||||
// description: '数据未填写完整',
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
})
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.setFieldsValue({
|
||||
// 'DateType': undefined,
|
||||
});
|
||||
if (typeof onReset === 'function') {
|
||||
onReset();
|
||||
}
|
||||
};
|
||||
const onIValuesChange = (changedValues, allValues) => {
|
||||
const dest = formValuesMapper(allValues);
|
||||
// console.log('form onValuesChange', Object.keys(changedValues), changedValues);
|
||||
if ('product_title' in changedValues) {
|
||||
const editTitle = (changedValues.product_title);
|
||||
setPickEditedInfo({ ...pickEditedInfo, product_title: editTitle });
|
||||
}
|
||||
if (typeof onValuesChange === 'function') {
|
||||
onValuesChange(changedValues, dest);
|
||||
}
|
||||
};
|
||||
const onFieldsChange = (hangedFields, allFields) => {
|
||||
console.log('onFieldsChange', hangedFields, allFields);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
form={form}
|
||||
disabled={!formEditable}
|
||||
name={formName || 'product_info'}
|
||||
// preserve={false}
|
||||
onFinish={onFinish}
|
||||
onValuesChange={onIValuesChange}
|
||||
// onFieldsChange={onFieldsChange}
|
||||
initialValues={editingProduct?.info}
|
||||
onFinishFailed={onFinishFailed} scrollToFirstError >
|
||||
<Row>
|
||||
{getFields({ sort, initialValue: editingProduct?.info, hides, shows, fieldProps, fieldComProps, form, t, dataSets: { weekdays }, editable: infoEditable })}
|
||||
{/* {showSubmit && (
|
||||
<Col flex='1 0 90px' className='flex justify-end items-start'>
|
||||
<Space align='center'>
|
||||
<Button size={'middle'} type='primary' htmlType='submit' loading={loading}>
|
||||
{confirmText || t('common:Save')}
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
)} */}
|
||||
</Row>
|
||||
{/* <Divider className='my-1' /> */}
|
||||
<Form.Item className='mb-0'
|
||||
name={'lgc_details_mapped'}
|
||||
rules={[
|
||||
() => ({
|
||||
transform(value) {
|
||||
return Object.values(value).filter((_v) => !isEmpty(_v));
|
||||
},
|
||||
validator: async (_, valueArr) => {
|
||||
const invalidLgcName = valueArr
|
||||
.filter((l) => isEmpty(l.title))
|
||||
.map((x) => HTLanguageSetsMapVal[x.lgc].label)
|
||||
.join(', ');
|
||||
if (isNotEmpty(invalidLgcName)) {
|
||||
// Please complete multi -language information
|
||||
return Promise.reject(new Error(`请完善多语种信息: ${invalidLgcName}`));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
}),
|
||||
]}>
|
||||
<ProductInfoLgc editable={infoEditable} formInstance={form} pickEditedInfo={pickEditedInfo} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name='quotation'>
|
||||
<ProductInfoQuotation editable={priceEditable} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item hidden name={'id'} label={'ID'}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
{/* <Form.Item hidden name={'title'} label={'title'}>
|
||||
<Input />
|
||||
</Form.Item> */}
|
||||
{showSave && (
|
||||
<Form.Item>
|
||||
<div className='flex justify-around'>
|
||||
<Button type='primary' htmlType='submit' loading={loading}>
|
||||
{t('common:Save')}
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function getFields(props) {
|
||||
const { fieldProps, fieldComProps, form, t, dataSets } = props;
|
||||
// console.log('getFields', props.initialValue);
|
||||
const styleProps = {};
|
||||
const editableProps = (name) => {
|
||||
// const disabled = props.ignoreEditable ? false : (isEmpty(props.initialValue?.[name]) && props.editable ? false : true)
|
||||
const disabled = !props.editable;
|
||||
return { disabled, className: disabled ? '!text-slate-500' : '' };
|
||||
};
|
||||
const bigCol = 4 * 2;
|
||||
const midCol = 8;
|
||||
const layoutProps = {
|
||||
// gutter: { xs: 8, sm: 8, lg: 16 },
|
||||
lg: { span: 6 },
|
||||
md: { span: 8 },
|
||||
sm: { span: 12 },
|
||||
xs: { span: 24 },
|
||||
};
|
||||
const item = (name, sort = 0, render, col) => {
|
||||
const customCol = col || midCol;
|
||||
const mdCol = customCol * 2;
|
||||
return {
|
||||
'key': '',
|
||||
sort,
|
||||
name,
|
||||
render,
|
||||
'hide': false,
|
||||
'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol > 24 ? 24 : mdCol }, flex: mdCol < 8 ? '1 0' : '' },
|
||||
};
|
||||
};
|
||||
let baseChildren = [];
|
||||
baseChildren = [
|
||||
item(
|
||||
'product_title',
|
||||
99,
|
||||
<Form.Item name='product_title' label={t('Title')} {...fieldProps.product_title} rules={[{ required: true }]} tooltip={false}>
|
||||
<Input allowClear {...fieldComProps.product_title} {...styleProps} {...editableProps('product_title')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.product_title?.col || midCol
|
||||
),
|
||||
item(
|
||||
'code',
|
||||
99,
|
||||
<Form.Item name='code' label={t('Code')} {...fieldProps.code} rules={[{ required: true }]} tooltip={false}>
|
||||
<Input allowClear {...fieldComProps.code} {...styleProps} {...editableProps('code')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.code?.col || midCol
|
||||
),
|
||||
item(
|
||||
'city',
|
||||
99,
|
||||
<Form.Item name='city' label={t('City')} {...fieldProps.city} rules={[{ required: true }]} tooltip={t('FormTooltip.City')}>
|
||||
<CitySelector {...styleProps} {...editableProps('city_id')} placeholder={t('FormTooltip.City')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.city?.col || midCol
|
||||
),
|
||||
item(
|
||||
'dept',
|
||||
99,
|
||||
<Form.Item name='dept' label={t('Dept')} {...fieldProps.dept}>
|
||||
<DeptSelector labelInValue={false} isLeaf {...styleProps} {...editableProps('dept')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.dept?.col || midCol
|
||||
),
|
||||
item(
|
||||
'duration',
|
||||
99,
|
||||
<Form.Item name='duration' label={t('Duration')} {...fieldProps.duration} rules={[{ required: true, type: 'number', min: 0}]} tooltip={false}>
|
||||
<InputNumber suffix={'H'} max={24} {...styleProps} {...editableProps('duration')} />
|
||||
{/* <Input allowClear {...fieldComProps.duration} suffix={'H'} /> */}
|
||||
</Form.Item>,
|
||||
fieldProps?.duration?.col || midCol
|
||||
),
|
||||
item(
|
||||
'km',
|
||||
99,
|
||||
<Form.Item name='km' label={t('KM')} {...fieldProps.km} rules={[{ required: true, },]} tooltip={t('FormTooltip.KM')}>
|
||||
<InputNumber suffix={'KM'} min={0.1} {...styleProps} {...editableProps('km')} placeholder={t('FormTooltip.KM')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.km?.col || midCol
|
||||
),
|
||||
item(
|
||||
'recommends_rate',
|
||||
99,
|
||||
<Form.Item name='recommends_rate' label={t('RecommendsRate')} {...fieldProps.recommends_rate} tooltip={t('FormTooltip.RecommendsRate')}>
|
||||
{/* <Input placeholder={t('RecommendsRate')} allowClear /> */}
|
||||
<InputNumber {...styleProps} {...editableProps('recommends_rate')} min={1} max={1000} />
|
||||
{/* <Select
|
||||
{...styleProps}
|
||||
{...editableProps('recommends_rate')}
|
||||
style={{ width: '100%' }}
|
||||
labelInValue={false}
|
||||
options={[
|
||||
{ value: 1, label: 'Top 1' },
|
||||
{ value: 2, label: 'Top 2' },
|
||||
{ value: 3, label: 'Top 3' },
|
||||
{ value: 4, label: '4' },
|
||||
{ value: 5, label: '5' },
|
||||
]}
|
||||
/> */}
|
||||
</Form.Item>,
|
||||
fieldProps?.recommends_rate?.col || midCol
|
||||
),
|
||||
item(
|
||||
'display_to_c',
|
||||
99,
|
||||
<Form.Item
|
||||
name='display_to_c'
|
||||
label={t('DisplayToC')}
|
||||
{...fieldProps.display_to_c}
|
||||
tooltip={t('FormTooltip.DisplayToC')}
|
||||
// rules={[
|
||||
// () => ({
|
||||
// validator(_, value) {
|
||||
// if ((value || []).includes(153002) && !(value || []).includes(153001)) {
|
||||
// return Promise.reject(new Error('不允许仅报价信显示'));
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// },
|
||||
// }),
|
||||
// ]}
|
||||
>
|
||||
{/* <Checkbox.Group
|
||||
options={[
|
||||
{ value: 153001, label: '报价信不显示' },
|
||||
{ value: 153002, label: '计划不显示' },
|
||||
]}
|
||||
/> */}
|
||||
<Select
|
||||
labelInValue={false}
|
||||
options={[
|
||||
{ value: '153001', label: '在计划显示，不在报价信显示' },
|
||||
{ value: '0', label: '计划和报价信都要显示' },
|
||||
{ value: '153001, 153002', label: '计划和报价信都不用显示' },
|
||||
]}
|
||||
{...styleProps}
|
||||
{...editableProps('display_to_c')}
|
||||
/>
|
||||
</Form.Item>,
|
||||
fieldProps?.display_to_c?.col || midCol
|
||||
),
|
||||
item(
|
||||
'open_weekdays',
|
||||
99,
|
||||
<Form.Item name='open_weekdays' label={t('OpenWeekdays')} {...fieldProps.open_weekdays} tooltip={false}>
|
||||
<Checkbox.Group options={dataSets.weekdays} {...styleProps} {...editableProps('open_weekdays')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.open_weekdays?.col || 24
|
||||
),
|
||||
item(
|
||||
'remarks',
|
||||
99,
|
||||
<Form.Item name='remarks' label={t('Remarks')} {...fieldProps.remarks} tooltip={t('FormTooltip.Remarks')}>
|
||||
<Input.TextArea allowClear rows={2} maxLength={2000} showCount {...fieldComProps.remarks} {...styleProps} {...editableProps('remarks')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.remarks?.col || 24
|
||||
),
|
||||
];
|
||||
baseChildren = baseChildren
|
||||
.map((x) => {
|
||||
x.hide = false;
|
||||
if (props.sort === undefined) {
|
||||
return x;
|
||||
}
|
||||
const tmpSort = props.sort;
|
||||
for (const key in tmpSort) {
|
||||
if (Object.prototype.hasOwnProperty.call(tmpSort, key)) {
|
||||
if (x.name === key) {
|
||||
x.sort = tmpSort[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
return x;
|
||||
})
|
||||
.map((x) => {
|
||||
if (props.hides.length === 0 && props.shows.length === 0) {
|
||||
return x;
|
||||
}
|
||||
if (props.hides.length === 0) {
|
||||
x.hide = !props.shows.includes(x.name);
|
||||
} else if (props.shows.length === 0) {
|
||||
x.hide = props.hides.includes(x.name);
|
||||
}
|
||||
return x;
|
||||
})
|
||||
.filter((x) => !x.hide)
|
||||
.sort((a, b) => {
|
||||
return a.sort < b.sort ? -1 : 1;
|
||||
});
|
||||
const children = [];
|
||||
const leftStyle = {}; // { borderRight: '1px solid #dedede' };
|
||||
for (let i = 0; i < baseChildren.length; i++) {
|
||||
let style = {}; // { padding: '0px 2px' };
|
||||
style = i % 2 === 0 && baseChildren[i].col === 12 ? { ...style, ...leftStyle } : style;
|
||||
style = !baseChildren[i].hide ? { ...style, display: 'block' } : { ...style, display: 'none' };
|
||||
const Item = (
|
||||
<Col key={String(i)} style={style} {...baseChildren[i].col} className='px-1 shrink-0 grow'>
|
||||
{baseChildren[i].render}
|
||||
</Col>
|
||||
);
|
||||
children.push(Item);
|
||||
}
|
||||
return children;
|
||||
}
|
||||
|
||||
const formValuesMapper = (values) => {
|
||||
const destinationObject = {
|
||||
'city': [
|
||||
{ key: 'city_id', transform: (value) => value?.value || value?.key || '' },
|
||||
{ key: 'city_name', transform: (value) => value?.label || '' },
|
||||
],
|
||||
'dept': { key: 'dept_id', transform: (value) => (typeof value === 'string' ? value : value?.value || value?.key || '') },
|
||||
'open_weekdays': { key: 'open_weekdays', transform: (value) => (Array.isArray(value) ? value.join(',') : value) },
|
||||
// 'recommends_rate': { key: 'recommends_rate', transform: (value) => ((typeof value === 'string' || typeof value === 'number') ? value : value?.value || value?.key || '') },
|
||||
// 'lgc_details': [
|
||||
// {
|
||||
// key: 'lgc_details',
|
||||
// transform: (value) => {
|
||||
// const _val = value.filter((s) => s !== undefined).map((e) => ({ title: '', ...e, description: e.description || '' }));
|
||||
// return _val || '';
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// key: 'lgc_details_mapped_tmp',
|
||||
// transform: (value) => {
|
||||
// const _val = value.filter((s) => s !== undefined);
|
||||
// return _val.reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
'lgc_details_mapped': [
|
||||
{
|
||||
key: 'lgc_details',
|
||||
transform: (value) => {
|
||||
const valueArr = Object.values(value)
|
||||
.filter((_v) => !isEmpty(_v.lgc))
|
||||
.map((e) => ({ title: '', ...e, descriptions: e.descriptions || '' }));
|
||||
return valueArr;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'lgc_details_mapped',
|
||||
transform: (value) => {
|
||||
const valueArr = Object.values(value)
|
||||
.filter((_v) => !isEmpty(_v.lgc))
|
||||
.map((e) => ({ title: '', ...e, descriptions: e.descriptions || '' }));
|
||||
return valueArr.reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
||||
},
|
||||
},
|
||||
],
|
||||
'product_title': { key: 'title' },
|
||||
};
|
||||
let dest = {};
|
||||
const { city, dept, product_title, ...omittedValue } = values;
|
||||
dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
|
||||
for (const key in dest) {
|
||||
if (Object.prototype.hasOwnProperty.call(dest, key)) {
|
||||
dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
|
||||
}
|
||||
}
|
||||
// omit empty
|
||||
// Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
|
||||
const { lgc_details, lgc_details_mapped, quotation, ...info } = dest;
|
||||
return { info, lgc_details, lgc_details_mapped, quotation };
|
||||
};
|
||||
|
||||
export default InfoForm;
|
||||
@ -1,185 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Input, Tabs, Modal, Select, Form } from 'antd';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import { useHTLanguageSets, useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
|
||||
import { cloneDeep, isEmpty, isNotEmpty } from '@/utils/commons';
|
||||
|
||||
const ProductInfoLgc = ({ editable, formInstance, pickEditedInfo, ...props }) => {
|
||||
const { t } = useTranslation('products');
|
||||
const { language: languageHT } = useDefaultLgc();
|
||||
const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
|
||||
const allLgcOptions = useHTLanguageSets();
|
||||
const [editingProduct] = useProductsStore((state) => [state.editingProduct]);
|
||||
const [activeKey, setActiveKey] = useState();
|
||||
const [items, setItems] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
formInstance.setFieldValue(['lgc_details_mapped', '2', 'title'], pickEditedInfo.product_title);
|
||||
|
||||
return () => {};
|
||||
}, [pickEditedInfo.product_title]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const existsLgc = (editingProduct?.lgc_details || []).map((ele, li) => ({
|
||||
...ele,
|
||||
label: HTLanguageSetsMapVal[ele.lgc]?.label || ele.lgc,
|
||||
// key: `${editingProduct.info.id}-${ele.id}`,
|
||||
key: ele.lgc,
|
||||
closable: false, // isPermitted(PERM_PRODUCTS_MANAGEMENT) ? true : false,
|
||||
forceRender: true,
|
||||
children: (
|
||||
<Form.Item noStyle key={`${editingProduct.info.id}-${ele.id}`}>
|
||||
<Form.Item name={['lgc_details_mapped', `${ele.lgc}`, 'title']} label={t('products:Title')} initialValue={ele.title} rules={[{ required: true }]} tooltip={t(`FormTooltip.NewTitle.${editingProduct?.info?.product_type_id}`)}>
|
||||
<Input
|
||||
className={' !text-slate-600'}
|
||||
allowClear
|
||||
placeholder={t(`FormTooltip.NewTitle.${editingProduct?.info?.product_type_id}`)}
|
||||
// onChange={(e) => handleChange('title', e.target.value)}
|
||||
// disabled={ignoreEditable ? false : (!isEmpty(ele.title) || !editable)}
|
||||
// disabled={ignoreEditable ? false : !editable}
|
||||
disabled={!editable}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={['lgc_details_mapped', `${ele.lgc}`, 'descriptions']} label={t('products:Description')} initialValue={ele.descriptions} tooltip={t('FormTooltip.Description')}>
|
||||
<Input.TextArea
|
||||
className={'!text-slate-600'}
|
||||
rows={3} maxLength={2000} showCount
|
||||
allowClear
|
||||
// onChange={(e) => handleChange('description', e.target.value)}
|
||||
// disabled={ignoreEditable ? false : (!isEmpty(ele.descriptions) || !editable)}
|
||||
// disabled={ignoreEditable ? false : !editable}
|
||||
disabled={!editable}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={['lgc_details_mapped', `${ele.lgc}`, 'lgc']} initialValue={ele.lgc}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={['lgc_details_mapped', `${ele.lgc}`, 'id']} initialValue={ele.id}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
),
|
||||
}));
|
||||
setItems(existsLgc);
|
||||
const pageDefaultLgcI = (editingProduct?.lgc_details || []).findIndex((ele) => ele.lgc === languageHT);
|
||||
setActiveKey(existsLgc?.[pageDefaultLgcI || 0]?.key);
|
||||
// formInstance.validateFields();
|
||||
const filterLgcOptions = allLgcOptions.filter((ele) => !existsLgc.some((item) => `${item.lgc}` === ele.value));
|
||||
setLgcOptions(filterLgcOptions);
|
||||
|
||||
return () => {};
|
||||
}, [editingProduct]);
|
||||
|
||||
const onLgcTabChange = (newActiveKey) => {
|
||||
setActiveKey(newActiveKey);
|
||||
};
|
||||
|
||||
const addLgc = (lgcItem) => {
|
||||
// const currentLgcOptions = structuredClone(lgcOptions);
|
||||
const currentLgcOptions = cloneDeep(lgcOptions);
|
||||
currentLgcOptions.splice(
|
||||
currentLgcOptions.findIndex((ele) => ele.value === lgcItem.value),
|
||||
1
|
||||
);
|
||||
setLgcOptions(currentLgcOptions);
|
||||
|
||||
const newActiveKey = lgcItem.value;
|
||||
const newPanes = [...items];
|
||||
newPanes.push({
|
||||
...lgcItem,
|
||||
forceRender: true,
|
||||
key: lgcItem.value,
|
||||
children: (
|
||||
<Form.Item noStyle>
|
||||
<Form.Item name={['lgc_details_mapped', `${lgcItem.value}`, 'title']} preserve={false} label={t('products:Title')} rules={[{ required: true }]} tooltip={t(`FormTooltip.NewTitle.${editingProduct?.info?.product_type_id}`)}>
|
||||
<Input allowClear placeholder={t(`FormTooltip.NewTitle.${editingProduct?.info?.product_type_id}`)} />
|
||||
</Form.Item>
|
||||
<Form.Item name={['lgc_details_mapped', `${lgcItem.value}`, 'descriptions']} preserve={false} label={t('products:Description')} tooltip={t('FormTooltip.Description')}>
|
||||
<Input.TextArea rows={3} maxLength={2000} showCount allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={['lgc_details_mapped', `${lgcItem.value}`, 'lgc']} preserve={false} initialValue={lgcItem.value}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={['lgc_details_mapped', `${lgcItem.value}`, 'id']} preserve={false} initialValue={''}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
),
|
||||
});
|
||||
setItems(newPanes);
|
||||
setActiveKey(newActiveKey);
|
||||
setSelectNewLgc(null);
|
||||
};
|
||||
const remove = (targetKey) => {
|
||||
let newActiveKey = activeKey;
|
||||
let lastIndex = -1;
|
||||
items.forEach((item, i) => {
|
||||
if (item.key === targetKey) {
|
||||
lastIndex = i - 1;
|
||||
}
|
||||
});
|
||||
const newPanes = items.filter((item) => item.key !== targetKey);
|
||||
if (newPanes.length && newActiveKey === targetKey) {
|
||||
if (lastIndex >= 0) {
|
||||
newActiveKey = newPanes[lastIndex].key;
|
||||
} else {
|
||||
newActiveKey = newPanes[0].key;
|
||||
}
|
||||
}
|
||||
setItems(newPanes);
|
||||
setActiveKey(newActiveKey);
|
||||
setLgcOptions([...lgcOptions, ...items.filter((item) => item.key === targetKey)]);
|
||||
};
|
||||
const onEdit = (targetKey, action) => {
|
||||
if (action === 'add') {
|
||||
setNewLgcModalVisible(true);
|
||||
} else {
|
||||
remove(targetKey);
|
||||
formInstance.validateFields(['lgc_details_mapped']);
|
||||
}
|
||||
};
|
||||
|
||||
const [newLgcModalVisible, setNewLgcModalVisible] = useState(false);
|
||||
const [selectNewLgc, setSelectNewLgc] = useState();
|
||||
const [lgcOptions, setLgcOptions] = useState(allLgcOptions);
|
||||
const handleOk = () => {
|
||||
addLgc(selectNewLgc);
|
||||
setNewLgcModalVisible(false);
|
||||
};
|
||||
const handleCancel = () => {
|
||||
setNewLgcModalVisible(false);
|
||||
};
|
||||
const onSelectNewLgc = (lgcItem) => {
|
||||
setSelectNewLgc(lgcItem);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
type='editable-card'
|
||||
size='small'
|
||||
onChange={onLgcTabChange}
|
||||
activeKey={activeKey}
|
||||
onEdit={onEdit}
|
||||
items={items}
|
||||
hideAdd={isEmpty(lgcOptions) || !editable}
|
||||
tabPosition='top'
|
||||
/>
|
||||
<Modal title={t('LgcModal.title')} open={newLgcModalVisible} onOk={handleOk} onCancel={() => setNewLgcModalVisible(false)} destroyOnClose>
|
||||
<Select
|
||||
showSearch
|
||||
labelInValue
|
||||
style={{ width: '80%' }}
|
||||
placeholder={t('LgcModal.placeholder')}
|
||||
optionFilterProp='children'
|
||||
options={lgcOptions}
|
||||
onChange={onSelectNewLgc}
|
||||
value={selectNewLgc}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductInfoLgc;
|
||||
@ -1,495 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Table, Form, Modal, Button, Radio, Input, Flex, Card, InputNumber, Checkbox, DatePicker, Space, App, Tooltip } from 'antd'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { CloseOutlined, StarTwoTone, PlusOutlined, ExclamationCircleFilled, QuestionCircleOutlined } from '@ant-design/icons'
|
||||
import { useDatePresets } from '@/hooks/useDatePresets'
|
||||
import dayjs from 'dayjs'
|
||||
import useProductsStore from '@/stores/Products/Index'
|
||||
import PriceCompactInput from '@/views/products/Detail/PriceCompactInput'
|
||||
|
||||
const { RangePicker } = DatePicker
|
||||
|
||||
const batchSetupInitialValues = {
|
||||
'defList': [
|
||||
// 旺季
|
||||
{
|
||||
'useDateList': [
|
||||
{
|
||||
'useDate': [
|
||||
dayjs().add(1, 'year').startOf('y'), dayjs().add(1, 'year').endOf('y')
|
||||
]
|
||||
}
|
||||
],
|
||||
'unitId': '0',
|
||||
'currency': 'RMB',
|
||||
'weekend': [
|
||||
],
|
||||
'priceList': [
|
||||
{
|
||||
'priceInput': {
|
||||
'numberStart': 1,
|
||||
'numberEnd': 2,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
},
|
||||
{
|
||||
'priceInput': {
|
||||
'numberStart': 3,
|
||||
'numberEnd': 4,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
},
|
||||
{
|
||||
'priceInput': {
|
||||
'numberStart': 5,
|
||||
'numberEnd': 6,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
},
|
||||
{
|
||||
'priceInput': {
|
||||
'numberStart': 7,
|
||||
'numberEnd': 9,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 淡季
|
||||
{
|
||||
'useDateList': [
|
||||
{
|
||||
'useDate': [
|
||||
dayjs().add(1, 'year').subtract(2, 'M').startOf('M'), dayjs().add(1, 'year').endOf('M')
|
||||
]
|
||||
}
|
||||
],
|
||||
'unitId': '0',
|
||||
'currency': 'RMB',
|
||||
'weekend': [
|
||||
],
|
||||
'priceList': [
|
||||
{
|
||||
'priceInput': {
|
||||
'numberStart': 1,
|
||||
'numberEnd': 2,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
},
|
||||
{
|
||||
'priceInput': {
|
||||
'numberStart': 3,
|
||||
'numberEnd': 4,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
},
|
||||
{
|
||||
'priceInput': {
|
||||
'numberStart': 5,
|
||||
'numberEnd': 6,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
},
|
||||
{
|
||||
'priceInput': {
|
||||
'numberStart': 7,
|
||||
'numberEnd': 9,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const defaultPriceValue = {
|
||||
'priceInput': {
|
||||
'numberStart': 1,
|
||||
'numberEnd': 2,
|
||||
'audultPrice': 0,
|
||||
'childrenPrice': 0
|
||||
}
|
||||
}
|
||||
|
||||
const defaultUseDate = {
|
||||
'useDate': [dayjs().add(1, 'year').startOf('y'), dayjs().add(1, 'year').endOf('y')]
|
||||
}
|
||||
|
||||
const defaultDefinitionValue = {
|
||||
'useDateList': [defaultUseDate],
|
||||
'unitId': '0',
|
||||
'currency': 'RMB',
|
||||
'weekend': [],
|
||||
'priceList': [defaultPriceValue]
|
||||
}
|
||||
|
||||
const ProductInfoQuotation = ({ editable, ...props }) => {
|
||||
|
||||
const { onChange } = props
|
||||
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [isQuotationModalOpen, setQuotationModalOpen] = useState(false)
|
||||
const [isBatchSetupModalOpen, setBatchSetupModalOpen] = useState(false)
|
||||
const { modal, notification } = App.useApp()
|
||||
const [quotationForm] = Form.useForm()
|
||||
const [batchSetupForm] = Form.useForm()
|
||||
|
||||
const datePresets = useDatePresets()
|
||||
|
||||
const [quotationList, newEmptyQuotation, appendQuotationList, saveOrUpdateQuotation, deleteQuotation] =
|
||||
useProductsStore((state) => [state.quotationList, state.newEmptyQuotation, state.appendQuotationList, state.saveOrUpdateQuotation, state.deleteQuotation])
|
||||
|
||||
const triggerChange = (changedValue) => {
|
||||
onChange?.(
|
||||
changedValue
|
||||
)
|
||||
}
|
||||
|
||||
const onQuotationSeleted = async (quotation) => {
|
||||
// 把 start, end 转换为 RangePicker 数组格式
|
||||
quotation.use_dates = [dayjs(quotation.use_dates_start), dayjs(quotation.use_dates_end)]
|
||||
quotation.weekdayList = quotation.weekdays.split(',')
|
||||
quotationForm.setFieldsValue(quotation)
|
||||
setQuotationModalOpen(true)
|
||||
}
|
||||
|
||||
const onNewQuotation = () => {
|
||||
const emptyQuotation = newEmptyQuotation()
|
||||
quotationForm.setFieldsValue(emptyQuotation)
|
||||
setQuotationModalOpen(true)
|
||||
}
|
||||
|
||||
const onQuotationFinish = (values) => {
|
||||
const newList = saveOrUpdateQuotation(values)
|
||||
triggerChange(newList)
|
||||
setQuotationModalOpen(false)
|
||||
}
|
||||
|
||||
const onBatchSetupFinish = () => {
|
||||
const defList = batchSetupForm.getFieldsValue().defList
|
||||
const newList = appendQuotationList(defList)
|
||||
triggerChange(newList)
|
||||
setBatchSetupModalOpen(false)
|
||||
}
|
||||
|
||||
const onDeleteQuotation = (quotation) => {
|
||||
modal.confirm({
|
||||
title: '请确认',
|
||||
icon: <ExclamationCircleFilled />,
|
||||
content: '你要删除这条价格吗？',
|
||||
onOk() {
|
||||
deleteQuotation(quotation)
|
||||
.catch(ex => {
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const quotationColumns = [
|
||||
// { title: 'id', dataIndex: 'id', width: 40, className: 'italic text-gray-400' }, // test: 0
|
||||
// { title: 'WPI_SN', dataIndex: 'WPI_SN', width: 40, className: 'italic text-gray-400' }, // test: 0
|
||||
{ title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '5rem' },
|
||||
{ title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '5rem' },
|
||||
{ title: t('products:currency'), dataIndex: 'currency', width: '4rem' },
|
||||
{
|
||||
title: (<>{t('products:unit_name')} <Tooltip placement='top' overlayInnerStyle={{width: '24rem'}} title={t('products:FormTooltip.PriceUnit')}><QuestionCircleOutlined className='text-gray-500' /></Tooltip> </>),
|
||||
dataIndex: 'unit_id',
|
||||
width: '6rem',
|
||||
render: (text) => t(`products:PriceUnit.${text}`), // (text === '0' ? '每人' : text === '1' ? '每团' : text),
|
||||
},
|
||||
{
|
||||
title: t('products:group_size'),
|
||||
dataIndex: 'group_size',
|
||||
width: '6rem',
|
||||
render: (_, record) => `${record.group_size_min}-${record.group_size_max}`,
|
||||
},
|
||||
|
||||
{
|
||||
title: (<>{t('products:use_dates')} <Tooltip placement='top' overlayInnerStyle={{width: '24rem'}} title={t('products:FormTooltip.UseDates')}><QuestionCircleOutlined className='text-gray-500' /></Tooltip> </>),
|
||||
dataIndex: 'use_dates',
|
||||
// width: '6rem',
|
||||
render: (_, record) => `${record.use_dates_start}-${record.use_dates_end}`,
|
||||
},
|
||||
|
||||
{ title: t('products:Weekdays'), dataIndex: 'weekdays', width: '4rem' },
|
||||
{
|
||||
title: t('products:operation'),
|
||||
dataIndex: 'operation',
|
||||
width: '10rem',
|
||||
render: (_, quotation) => {
|
||||
// const _rowEditable = [-1,3].includes(quotation.audit_state_id);
|
||||
const _rowEditable = true; // test: 0
|
||||
return (
|
||||
<Space>
|
||||
<Button type='link' disabled={!_rowEditable} onClick={() => onQuotationSeleted(quotation)}>{t('Edit')}</Button>
|
||||
<Button type='link' danger disabled={!_rowEditable} onClick={() => onDeleteQuotation(quotation)}>{t('Delete')}</Button>
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>{t('products:EditComponents.Quotation')}</h2>
|
||||
<Table size='small'
|
||||
bordered
|
||||
dataSource={quotationList}
|
||||
columns={quotationColumns}
|
||||
pagination={false}
|
||||
/>
|
||||
{
|
||||
editable &&
|
||||
<Space>
|
||||
<Button onClick={() => onNewQuotation()} type='primary' ghost style={{ marginTop: 16 }}>
|
||||
{t('products:addQuotation')}
|
||||
</Button>
|
||||
<Button onClick={() => setBatchSetupModalOpen(true)} type='primary' ghost style={{ marginTop: 16, marginLeft: 16 }}>
|
||||
批量设置
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
<Modal
|
||||
centered
|
||||
title='批量设置价格'
|
||||
width={'640px'}
|
||||
open={isBatchSetupModalOpen}
|
||||
onOk={() => onBatchSetupFinish()}
|
||||
onCancel={() => setBatchSetupModalOpen(false)}
|
||||
destroyOnClose
|
||||
forceRender
|
||||
>
|
||||
<Form
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
form={batchSetupForm}
|
||||
name='batchSetupForm'
|
||||
autoComplete='off'
|
||||
initialValues={batchSetupInitialValues}
|
||||
>
|
||||
<Form.List name='defList'>
|
||||
{(fields, { add, remove }) => (
|
||||
<Flex gap='middle' vertical>
|
||||
{fields.map((field, index) => (
|
||||
<Card
|
||||
size='small'
|
||||
title={index == 0 ? '旺季' : index == 1 ? '淡季' : '其他'}
|
||||
key={field.key}
|
||||
extra={index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => {
|
||||
remove(field.name)
|
||||
}} />}
|
||||
>
|
||||
<Form.Item label='币种' name={[field.name, 'currency']}>
|
||||
<Radio.Group>
|
||||
<Radio value='RMB'>RMB</Radio>
|
||||
<Radio value='USD'>USD</Radio>
|
||||
<Radio value='THB'>THB</Radio>
|
||||
<Radio value='JPY'>JPY</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label='类型' name={[field.name, 'unitId']}>
|
||||
<Radio.Group>
|
||||
<Radio value='0'>每人</Radio>
|
||||
<Radio value='1'>每团</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label='周末' name={[field.name, 'weekend']}>
|
||||
<Checkbox.Group
|
||||
options={['5', '6', '7']}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label='有效期'>
|
||||
<Form.List name={[field.name, 'useDateList']}>
|
||||
{(useDateFieldList, useDateOptList) => (
|
||||
<Flex gap='middle' vertical>
|
||||
{useDateFieldList.map((useDateField, index) => (
|
||||
<Space key={useDateField.key}>
|
||||
<Form.Item noStyle name={[useDateField.name, 'useDate']}>
|
||||
<RangePicker style={{ width: '100%' }} allowClear={true} inputReadOnly={true} presets={datePresets} placeholder={['From', 'Thru']} />
|
||||
</Form.Item>
|
||||
{index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => useDateOptList.remove(useDateField.name)} />}
|
||||
</Space>
|
||||
))}
|
||||
<Button type='dashed' icon={<PlusOutlined />} onClick={() => useDateOptList.add(defaultUseDate)} block>
|
||||
新增有效期
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form.Item>
|
||||
<Form.Item label='人等'>
|
||||
<Form.List name={[field.name, 'priceList']}>
|
||||
{(priceFieldList, priceOptList) => (
|
||||
<Flex gap='middle' vertical>
|
||||
{priceFieldList.map((priceField, index) => (
|
||||
<Space key={priceField.key}>
|
||||
<Form.Item noStyle name={[priceField.name, 'priceInput']}>
|
||||
<PriceCompactInput />
|
||||
</Form.Item>
|
||||
{index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => priceOptList.remove(priceField.name)} />}
|
||||
</Space>
|
||||
))}
|
||||
<Button type='dashed' icon={<PlusOutlined />} onClick={() => priceOptList.add(defaultPriceValue)} block>
|
||||
新增人等
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form.Item>
|
||||
</Card>
|
||||
))}
|
||||
<Button type='dashed' icon={<PlusOutlined />} onClick={() => add(defaultDefinitionValue)} block>
|
||||
新增设置
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
centered
|
||||
okButtonProps={{
|
||||
autoFocus: true,
|
||||
htmlType: 'submit',
|
||||
}}
|
||||
title={t('account:detail')}
|
||||
open={isQuotationModalOpen} onCancel={() => setQuotationModalOpen(false)}
|
||||
destroyOnClose
|
||||
forceRender
|
||||
modalRender={(dom) => (
|
||||
<Form
|
||||
name='quotationForm'
|
||||
form={quotationForm}
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
className='max-w-2xl'
|
||||
onFinish={onQuotationFinish}
|
||||
autoComplete='off'
|
||||
>
|
||||
{dom}
|
||||
</Form>
|
||||
)}
|
||||
>
|
||||
<Form.Item name='id' className='hidden' ><Input /></Form.Item>
|
||||
<Form.Item name='key' className='hidden' ><Input /></Form.Item>
|
||||
<Form.Item name='fresh' className='hidden' ><Input /></Form.Item>
|
||||
<Form.Item
|
||||
label={t('products:adultPrice')}
|
||||
name='adult_cost'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('products:Validation.adultPrice'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('products:childrenPrice')}
|
||||
name='child_cost'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('products:Validation.childrenPrice'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('products:currency')}
|
||||
name='currency'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('products:Validation.currency'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value='RMB'>RMB</Radio>
|
||||
<Radio value='USD'>USD</Radio>
|
||||
<Radio value='THB'>THB</Radio>
|
||||
<Radio value='JPY'>JPY</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('products:unit_name')}
|
||||
name='unit_id'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('products:Validation.unit_name'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value='0'>每人</Radio>
|
||||
<Radio value='1'>每团</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('products:group_size')}
|
||||
name='group_size_min'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('products:Validation.group_size_min'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('products:group_size')}
|
||||
name='group_size_max'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('products:Validation.group_size_max'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('products:use_dates')}
|
||||
name='use_dates'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('products:Validation.use_dates'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<RangePicker presets={datePresets} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('products:Weekdays')}
|
||||
name='weekdayList'
|
||||
>
|
||||
<Checkbox.Group options={['5', '6', '7']} />
|
||||
</Form.Item>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductInfoQuotation
|
||||
@ -1,179 +0,0 @@
|
||||
import { createContext, useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { Tree, Input, Divider } from 'antd';
|
||||
import { CaretDownOutlined } from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
|
||||
import { groupBy, sortBy } from '@/utils/commons';
|
||||
import NewProductModal from './NewProductModal';
|
||||
import ContractRemarksModal from './ContractRemarksModal'
|
||||
|
||||
const flattenTreeFun = (tree) => {
|
||||
let flatList = [];
|
||||
const flatten = (nodes) => {
|
||||
nodes.forEach((node) => {
|
||||
flatList.push({ title: node.title, key: node.key });
|
||||
if (node.children) {
|
||||
flatten(node.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
flatten(tree);
|
||||
return flatList;
|
||||
};
|
||||
|
||||
const getParentKey = (key, tree) => {
|
||||
let parentKey;
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i];
|
||||
if (node.children) {
|
||||
if (node.children.some((item) => item.key === key)) {
|
||||
parentKey = node.key;
|
||||
} else {
|
||||
const pKey = getParentKey(key, node.children);
|
||||
if (pKey) {
|
||||
parentKey = pKey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return parentKey;
|
||||
};
|
||||
|
||||
const ProductsTree = ({ onNodeSelect, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const isEditPage = location.pathname.includes('edit');
|
||||
const [agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.agencyProducts, state.editingProduct, state.setEditingProduct]);
|
||||
const [activeAgency] = useProductsStore((state) => [state.activeAgency]);
|
||||
const productsTypes = useProductsTypes();
|
||||
|
||||
const [treeData, setTreeData] = useState([]);
|
||||
const [rawTreeData, setRawTreeData] = useState([]);
|
||||
const [flattenTreeData, setFlattenTreeData] = useState([]);
|
||||
const [expandedKeys, setExpandedKeys] = useState([]);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setExpandedKeys(productsTypes.map((item) => item.key)); // 全部展开
|
||||
return () => {}
|
||||
}, [productsTypes, activeAgency]);
|
||||
|
||||
useEffect(() => {
|
||||
// 只显示有产品的类型;
|
||||
// const title = text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '';
|
||||
const hasDataTypes = Object.keys(agencyProducts);
|
||||
// const cityData = groupBy(productsSortByHT, (row) => `${row.info.city_id}-${row.info.city_name}`);
|
||||
const copyAgencyProducts = structuredClone(agencyProducts);
|
||||
Object.keys(copyAgencyProducts).map((key) => {
|
||||
const _cityProductsData = groupBy(copyAgencyProducts[key], (row) => `${row.info.city_name || '(空)'}`);
|
||||
copyAgencyProducts[key] = _cityProductsData;
|
||||
});
|
||||
// console.log(copyAgencyProducts);
|
||||
const _show = productsTypes
|
||||
.filter((kk) => hasDataTypes.includes(kk.value))
|
||||
.map((ele) => ({
|
||||
...ele,
|
||||
title: ele.label,
|
||||
key: ele.value,
|
||||
children: (agencyProducts[ele.value] || []).map((product) => {
|
||||
const lgc_map = product.lgc_details.reduce((rlgc, clgc) => ({...rlgc, [clgc.lgc]: clgc}), {});
|
||||
return {
|
||||
// title: product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || '',
|
||||
title: `【${product.info.city_name}】` + (product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || product.info.product_title || ''),
|
||||
// key: `${ele.value}-${product.info.id}`,
|
||||
key: product.info.id,
|
||||
_raw: product,
|
||||
isLeaf: true,
|
||||
}}),
|
||||
// 增加`城市`层级
|
||||
// _children: Object.keys(copyAgencyProducts[ele.value] || []).map(city => {
|
||||
// return {
|
||||
// title: city,
|
||||
// key: `${ele.value}-${city}`,
|
||||
// children: copyAgencyProducts[ele.value][city],
|
||||
// };
|
||||
// }),
|
||||
}));
|
||||
setTreeData(_show);
|
||||
setRawTreeData(_show);
|
||||
setFlattenTreeData(flattenTreeFun(_show));
|
||||
|
||||
// setExpandedKeys(productsTypes.map((item) => item.key)); // 全部展开
|
||||
|
||||
// setActiveKey(isEmpty(_show) ? [] : [_show[0].key]);
|
||||
return () => {};
|
||||
}, [productsTypes, agencyProducts]);
|
||||
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const onSearch = ({ target: { value } }) => {
|
||||
// const { value } = e.target;
|
||||
const newExpandedKeys = flattenTreeData
|
||||
.filter((item) => item.title.includes(value))
|
||||
.map((item) => getParentKey(item.key, rawTreeData))
|
||||
.filter((item, i, self) => item && self.indexOf(item) === i);
|
||||
setExpandedKeys(newExpandedKeys);
|
||||
setSearchValue(value);
|
||||
setAutoExpandParent(true);
|
||||
};
|
||||
const handleNodeSelect = (selectedKeys, { node }) => {
|
||||
if (node._raw) {
|
||||
setEditingProduct(node._raw);
|
||||
} else {
|
||||
// 单击: 折叠/展开
|
||||
// const isExpand = expandedKeys.includes(selectedKeys[0]);
|
||||
// const _keys = isExpand ? expandedKeys.filter(k => k !== node.key) : [].concat(expandedKeys, selectedKeys);
|
||||
// setExpandedKeys(_keys);
|
||||
}
|
||||
if (typeof onNodeSelect === 'function') {
|
||||
onNodeSelect(selectedKeys, { node });
|
||||
}
|
||||
};
|
||||
const onExpand = (keys) => {
|
||||
setExpandedKeys(keys);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
|
||||
const titleRender = (node) => {
|
||||
const index = node.title.indexOf(searchValue);
|
||||
const beforeStr = node.title.substr(0, index);
|
||||
const afterStr = node.title.substr(index + searchValue.length);
|
||||
const highlighted = <span style={{ color: 'red' }}>{searchValue}</span>;
|
||||
|
||||
return index > -1 ? (
|
||||
<span>
|
||||
{beforeStr}
|
||||
{highlighted}
|
||||
{afterStr}
|
||||
</span>
|
||||
) : (
|
||||
<span>{node.title}</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${props.className} relative`} style={props.style}>
|
||||
<Input.Search placeholder='Search' onChange={onSearch} allowClear className='sticky top-1 z-20 mb-3' />
|
||||
{/* 编辑 */}
|
||||
{isEditPage && (
|
||||
<NewProductModal />
|
||||
)}
|
||||
<Divider type='vertical' />
|
||||
<ContractRemarksModal />
|
||||
<Tree
|
||||
blockNode
|
||||
showLine defaultExpandAll expandAction={'doubleClick'}
|
||||
selectedKeys={[editingProduct?.info?.id || editingProduct?.info?.product_type_id]}
|
||||
switcherIcon={<CaretDownOutlined />}
|
||||
onSelect={handleNodeSelect}
|
||||
treeData={treeData}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
onExpand={onExpand}
|
||||
titleRender={titleRender}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ProductsTree;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue