{t("products:EditComponents.Quotation")}
+
- {
- editable &&
+ {editable && (
-
- }
+ )}
onBatchSetupFinish()}
onCancel={() => setBatchSetupModalOpen(false)}
- destroyOnClose
+ destroyOnHidden
forceRender
>
- )
-}
+ );
+};
-export default ProductInfoQuotation
+export default ProductInfoQuotation;
diff --git a/src/views/products/Detail/ProductQuotationLogPopover.jsx b/src/views/products/Detail/ProductQuotationLogPopover.jsx
new file mode 100644
index 0000000..cdbc813
--- /dev/null
+++ b/src/views/products/Detail/ProductQuotationLogPopover.jsx
@@ -0,0 +1,268 @@
+import { useState, useMemo } from 'react';
+import { Button, Table, Popover, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { HT_HOST } from '@/config';
+import { fetchJSON } from '@/utils/request';
+import { formatGroupSize } from '@/hooks/useProductsSets';
+import { isEmpty, isNotEmpty } from '@/utils/commons';
+import { usingStorage } from '@/hooks/usingStorage';
+
+/**
+ * 产品价格日志
+ */
+const getPPLogAction = async (params) => {
+ const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_price_log`, params)
+ return errcode !== 0 ? [] : result;
+};
+
+/**
+ * 产品价格: 已发布的
+ */
+const getPPRunningAction = async (params) => {
+ const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_price_running`, params)
+ return errcode !== 0 ? [] : result;
+};
+
+const parseJson = (str) => {
+ let result;
+ if (str === null || str === undefined || str === '') {
+ return {};
+ }
+ try {
+ result = typeof str === 'string' ? JSON.parse(str) : str;
+ return Array.isArray(result) ? result.reduce((acc, cur) => ({ ...acc, ...cur }), {}) : result;
+ } catch (e) {
+ return {};
+ }
+};
+
+const statesForHideEdited = [1, 2];
+export const columnsSets = (t, colorize = true) => [
+ {
+ key: 'adult',
+ title: t('AgeType.Adult'),
+ width: '12rem',
+ render: (_, { adult_cost, currency, unit_id, unit_name, audit_state_id, lastedit_changed }) => {
+ const _changed = parseJson(lastedit_changed);
+ const ifCompare = colorize && !statesForHideEdited.includes(audit_state_id);
+ const ifData = isNotEmpty(_changed.adult_cost) || isNotEmpty(_changed.unit_id) || isNotEmpty(_changed.currency);
+ const preValue =
+ ifCompare && ifData ? (
+ {`${_changed.adult_cost || adult_cost} ${_changed.currency || currency} / ${t(`PriceUnit.${_changed.unit_id || unit_id}`)}`}
+ ) : null;
+ const editCls = ifCompare && ifData ? 'text-danger' : '';
+ return (
+
+ {preValue}
+ {`${adult_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}`}
+
+ );
+ },
+ },
+ {
+ key: 'child',
+ title: t('AgeType.Child'),
+ width: '12rem',
+ render: (_, { child_cost, currency, unit_id, unit_name, audit_state_id, lastedit_changed }) => {
+ const _changed = parseJson(lastedit_changed);
+ const ifCompare = colorize && !statesForHideEdited.includes(audit_state_id);
+ const ifData = isNotEmpty(_changed.child_cost) || isNotEmpty(_changed.unit_id) || isNotEmpty(_changed.currency);
+ const preValue =
+ ifCompare && ifData ? (
+ {`${_changed.child_cost || child_cost} ${_changed.currency || currency} / ${t(`PriceUnit.${_changed.unit_id || unit_id}`)}`}
+ ) : null;
+ const editCls = ifCompare && ifData ? 'text-danger' : '';
+ return (
+
+ {preValue}
+ {`${child_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}`}
+
+ );
+ },
+ },
+ // {key: 'unit', title: t('Unit'), },
+ {
+ key: 'groupSize',
+ dataIndex: ['group_size_min'],
+ title: t('group_size'),
+ width: '6rem',
+ render: (_, { audit_state_id, group_size_min, group_size_max, lastedit_changed }) => {
+ const _changed = parseJson(lastedit_changed);
+ const preValue =
+ colorize && !statesForHideEdited.includes(audit_state_id) && (isNotEmpty(_changed.group_size_min) || isNotEmpty(_changed.group_size_max)) ? (
+ {`${_changed.group_size_min ?? group_size_min} - ${_changed.group_size_max ?? group_size_max}`}
+ ) : null;
+ const editCls = colorize && !statesForHideEdited.includes(audit_state_id) && (isNotEmpty(_changed.group_size_min) || isNotEmpty(_changed.group_size_max)) ? 'text-danger' : '';
+ return (
+
+ {preValue}
+ {formatGroupSize(group_size_min, group_size_max)}
+
+ );
+ },
+ },
+ {
+ key: 'useDates',
+ dataIndex: ['use_dates_start'],
+ title: t('use_dates'),
+ width: '12rem',
+ render: (_, { use_dates_start, use_dates_end, weekdays, audit_state_id, lastedit_changed }) => {
+ const _changed = parseJson(lastedit_changed);
+ const preValue =
+ colorize && !statesForHideEdited.includes(audit_state_id) && (isNotEmpty(_changed.use_dates_start) || isNotEmpty(_changed.use_dates_end)) ? (
+
+ {isNotEmpty(_changed.use_dates_start) ? {_changed.use_dates_start} : use_dates_start} ~{' '}
+ {isNotEmpty(_changed.use_dates_end) ? {_changed.use_dates_end} : use_dates_end}
+
+ ) : null;
+ const editCls = colorize && !statesForHideEdited.includes(audit_state_id) && (isNotEmpty(_changed.use_dates_start) || isNotEmpty(_changed.use_dates_end)) ? 'text-danger' : '';
+ return (
+
+ {preValue}
+ {`${use_dates_start} ~ ${use_dates_end}`}
+
+ );
+ },
+ },
+ {
+ key: 'weekdays',
+ dataIndex: ['weekdays'],
+ title: t('Weekdays'),
+ width: '6rem',
+ render: (text, { weekdays, audit_state_id, lastedit_changed }) => {
+ const _changed = parseJson(lastedit_changed);
+ const ifCompare = colorize && !statesForHideEdited.includes(audit_state_id);
+ const ifData = !isEmpty(_changed.weekdays);
+ const _weekdays = ifData
+ ? _changed.weekdays
+ .split(',')
+ .filter(Boolean)
+ .map((w) => t(`common:weekdaysShort.${w}`))
+ .join(', ')
+ : '';
+ const preValue = ifCompare && ifData ? {_weekdays}
: null;
+ const editCls = ifCompare && ifData ? 'text-danger' : '';
+ const weekdaysTxt = weekdays
+ .split(',')
+ .filter(Boolean)
+ .map((w) => t(`common:weekdaysShort.${w}`))
+ .join(', ');
+ return (
+
+ {preValue}
+ {weekdaysTxt || t('Unlimited')}
+
+ );
+ },
+ },
+];
+
+const useLogMethod = (method) => {
+ const { t } = useTranslation('products');
+ const methodMap = {
+ 'history': {
+ title: '📑' + t('versionHistory'),
+ btnText: t('versionHistory'),
+ fetchData: async (params) => {
+ const data = await getPPLogAction(params);
+ return { data };
+ },
+ },
+ 'published': {
+ title: '✅' + t('versionPublished'),
+ btnText: t('versionPublished'),
+ fetchData: async (params) => {
+ const { travel_agency_id, product_id, price_id, use_year } = params;
+ const data = await getPPRunningAction({ travel_agency_id, product_id_list: product_id, use_year });
+ return { data: data?.[0]?.quotation || [] };
+ },
+ },
+ };
+ return methodMap[method];
+};
+
+/**
+ * ProductQuotationLogPopover - A popover component that displays product quotation change logs or published data
+ *
+ * This component shows a history of price changes for a specific product quotation in a popover table.
+ * It supports displaying different data sources (history logs or published data) and shows
+ * comparison between previous and current values with visual indicators.
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.btnText - The text to display on the trigger button and in the popover header
+ * @param {'history' | 'published'} props.method - Determines data source - "history" for change logs or "published" for published quotations
+ * @param {Object} props.triggerProps - Additional props to pass to the trigger button
+ * @param {number} props.travel_agency_id - ID of the travel agency (used in data fetching)
+ * @param {number} props.product_id - ID of the product (used in data fetching)
+ * @param {number} props.price_id - ID of the price entry (used in data fetching)
+ * @param {number} props.use_year - Year to use for fetching data (used in data fetching)
+ * @param {Function} props.onOpenChange - Callback function to be called when the popover opens or closes
+ */
+const ProductQuotationLogPopover = ({ method, triggerProps = {}, onOpenChange, ...props }) => {
+ const { travel_agency_id, product_id, price_id, use_year } = props;
+ const { travelAgencyId } = usingStorage();
+
+ const { t } = useTranslation('products');
+ const [open, setOpen] = useState(false);
+ const [logData, setLogData] = useState([]);
+
+ const { title, btnText: methodBtnText, fetchData } = useLogMethod(method);
+
+ const tablePagination = useMemo(() => method === 'history' ? { pageSize: 5, position: ['bottomLeft']} : { pageSize: 10, position: ['bottomLeft']}, [method]);
+
+ const [loading, setLoading] = useState(false);
+ const getData = async () => {
+ setLoading(true);
+ const { data } = await fetchData({ travel_agency_id: travel_agency_id || travelAgencyId, product_id, price_id, use_year });
+ setLogData(data);
+ invokeOpenChange(true);
+ setLoading(false);
+ };
+
+ const invokeOpenChange = (_open) => {
+ if (typeof onOpenChange === 'function') {
+ onOpenChange(_open);
+ }
+ };
+
+ const columns = [...columnsSets(t, false),
+ { title: t('common:time'), dataIndex: 'updatetime', key: 'updatetime', width: '10rem', },
+ { title: t('common:operator'), dataIndex: 'update_by', key: 'update_by' }
+ ];
+ return (
+
+ {title}
+
+
+ }
+ content={
+ <>
+
+
+ }
+ trigger={['click']}
+ open={open}
+ onOpenChange={(v) => {
+ setOpen(v);
+ invokeOpenChange(v);
+ }}>
+
+
+ );
+};
+export default ProductQuotationLogPopover;
diff --git a/src/views/products/Detail/ProductsTree.jsx b/src/views/products/Detail/ProductsTree.jsx
index fff21cd..f44d662 100644
--- a/src/views/products/Detail/ProductsTree.jsx
+++ b/src/views/products/Detail/ProductsTree.jsx
@@ -5,7 +5,7 @@ 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 { groupBy, isEmpty, sortBy } from '@/utils/commons';
import NewProductModal from './NewProductModal';
import ContractRemarksModal from './ContractRemarksModal'
@@ -49,10 +49,11 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
const [activeAgency] = useProductsStore((state) => [state.activeAgency]);
const productsTypes = useProductsTypes();
- const [treeData, setTreeData] = useState([]);
+ const [treeData, setTreeData] = useState([]); // render data
const [rawTreeData, setRawTreeData] = useState([]);
const [flattenTreeData, setFlattenTreeData] = useState([]);
const [expandedKeys, setExpandedKeys] = useState([]);
+ const [selectedKeys, setSelectedKeys] = useState([]);
const [autoExpandParent, setAutoExpandParent] = useState(true);
useEffect(() => {
@@ -74,28 +75,35 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
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],
- // };
- // }),
- }));
+ ...ele,
+ title: ele.label,
+ key: ele.value,
+ children: (agencyProducts[ele.value] || []).reduce((arr, product) => {
+ const lgc_map = product.lgc_details.reduce((rlgc, clgc) => ({ ...rlgc, [clgc.lgc]: clgc }), {});
+ // const combindCityList = product.info.city_list.indexOf(city => city.id === product.info.city_id) !== -1 ? product.info.city_list : [...product.info.city_list, { id: product.info.city_id, name: product.info.city_name }];
+ // const cityListName = product.info.city_list.reduce((acc, city) => {
+ // return acc.concat([city.name]);
+ // }, []).join(',');
+ const hasCityList = !isEmpty(product.info.city_list) && product.info.city_list.some(cc => cc.id !== product.info.city_id) ? `【含多城市】` : ``;
+ const combindCityList = [{ id: product.info.city_id, name: product.info.city_name }];
+ const flatCityP = combindCityList.map(city => ({
+ title: `【${city.name}】` + (product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || product.info.product_title || '') + `${hasCityList}`,
+ // key: `${ele.value}-${product.info.id}`,
+ key: `${product.info.id}-${city.id}`,
+ _raw: product,
+ isLeaf: true,
+ }));
+ return arr.concat(flatCityP);
+ }, []),
+ // 增加`城市`层级
+ // _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));
@@ -106,9 +114,27 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
return () => {};
}, [productsTypes, agencyProducts]);
+ useEffect(() => {
+ if (isEmpty(editingProduct)) {
+ return () => {};
+ }
+ const allKeysWithCity = [...editingProduct.info.city_list, { id: editingProduct.info.city_id, name: editingProduct.info.city_name }].map(
+ (city) => `${editingProduct.info.id}-${city.id}`
+ );
+ setSelectedKeys(allKeysWithCity);
+
+ return () => {};
+ }, [editingProduct?.info?.id]);
+
+
const [searchValue, setSearchValue] = useState('');
const onSearch = ({ target: { value } }) => {
// const { value } = e.target;
+ if (isEmpty(value)) {
+ setTreeData(rawTreeData);
+ setSearchValue(value);
+ return;
+ }
const newExpandedKeys = flattenTreeData
.filter((item) => item.title.includes(value))
.map((item) => getParentKey(item.key, rawTreeData))
@@ -116,10 +142,17 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
setExpandedKeys(newExpandedKeys);
setSearchValue(value);
setAutoExpandParent(true);
+ const matchTree = rawTreeData.map(node1 => {
+ const _find = node1.children.filter(node2 => node2.title.includes(value));
+ return _find.length > 0 ? {...node1, children: _find} : null;
+ }).filter(node => node);
+ setTreeData(matchTree);
};
const handleNodeSelect = (selectedKeys, { node }) => {
if (node._raw) {
setEditingProduct(node._raw);
+ const allKeysWithCity = [...node._raw.info.city_list, { id: node._raw.info.city_id, name: node._raw.info.city_name }].map((city) => `${node._raw.info.id}-${city.id}`);
+ setSelectedKeys(allKeysWithCity);
} else {
// 单击: 折叠/展开
// const isExpand = expandedKeys.includes(selectedKeys[0]);
@@ -164,7 +197,7 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
}
onSelect={handleNodeSelect}
treeData={treeData}
diff --git a/src/views/products/PickYear.jsx b/src/views/products/PickYear.jsx
new file mode 100644
index 0000000..28c1eba
--- /dev/null
+++ b/src/views/products/PickYear.jsx
@@ -0,0 +1,45 @@
+import { useNavigate } from "react-router-dom";
+import { Row, DatePicker, Flex, Col, Typography } from "antd";
+import dayjs from "dayjs";
+import { usingStorage } from "@/hooks/usingStorage";
+
+function PickYear() {
+ const navigate = useNavigate();
+ const { travelAgencyId } = usingStorage();
+
+ return (
+ <>
+
+
+
+
+ 请选择产品年份
+
+ {
+ const useYear = date.year();
+ navigate(`/products/${travelAgencyId}/${useYear}/all/edit`);
+ }}
+ />
+
+
+
+
+ );
+}
+export default PickYear;