修改批量录入界面功能

1 year ago · f77bcf4288
parent f13241f262 06db76ce86
commit f77bcf4288
13 changed files with 118 additions and 87 deletions
--- a/README.md
+++ b/README.md
@ -11,8 +11,12 @@ Global Highlights Hub 海外供应商平台
 npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

 npm version premajor --no-git-tag-version
-npm version prerelease --no-git-tag-version
+1.0.0 -> 2.0.0-0
+--preid beta | alpha | rc
+npm version prerelease --preid beta --no-git-tag-version
+2.0.0-0 -> 2.0.0-1 -> 2.0.0-2 ..n -> 2.0.0-n
 npm version patch --no-git-tag-version
+2.0.0-n -> 2.0.0

 "push:tag": "npm version patch && git.exe push --progress "origin" main:main"
 "push:tag": "npm version patch && git push origin master"
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "global-highlights-hub",
  "private": true,
-  "version": "2.0.0-0",
+  "version": "2.0.0-alpha.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/public/locales/en/products.json
+++ b/public/locales/en/products.json
@ -13,7 +13,7 @@
  "EditComponents": {
    "info": "Product Information",
    "Quotation": "Quotation",
-    "Extras": "Add-on"
+    "Extras": "Components"
  },
  "auditState": {
    "New": "New",
@ -49,7 +49,7 @@
  "KM": "KM",
  "RecommendsRate": "RecommendsRate",
  "OpenWeekdays": "Open Weekdays",
-  "DisplayToC": "DisplayToC",
+  "DisplayToC": "Display To C",
  "Dept": "Dept",

  "productProject": "Product project",
@ -94,18 +94,22 @@
    "Child": "Child"
  },

-  "save":"save",
-  "edit":"edit",
-  "delete":"delete",
-  "cancel":"cancel",
-  "sureCancel":"Sure you want to cancel?",
-  "sureDelete":"Sure you want to delete?",
-
  "CopyFormMsg": {
    "requiredVendor": "Please pick a target vendor",
    "requiredTypes": "Please select product types",
    "requiredDept": "Please pick a owner department"
  },

+  "quotationTable": {
+    "Adult": "Adult",
+    "Child": "Child",
+    "Currency": "Currency",
+    "Unit": "Unit",
+    "GroupSize": "Group Size",
+    "UseDates": "Use Dates",
+    "Operation": "Operation",
+    "Weekdays": "Weekdays"
+  },
+
  "#": "#"
 }
--- a/public/locales/zh/products.json
+++ b/public/locales/zh/products.json
@ -13,7 +13,7 @@
  "EditComponents": {
    "info": "产品信息",
    "Quotation": "报价",
-    "Extras": "附加项目"
+    "Extras": "绑定项目"
  },
  "auditState": {
    "New": "新增",
@ -95,18 +95,22 @@
    "Child": "儿童"
  },

-  "save":"保存",
-  "edit":"编辑",
-  "delete":"删除",
-  "cancel":"取消",
-  "sureCancel": "确定取消？",
-  "sureDelete":"确定删除？",
-
  "CopyFormMsg": {
    "requiredVendor": "请选择目标供应商",
    "requiredTypes": "请选择产品类型",
    "requiredDept": "请选择所属小组"
  },

+  "quotationTable": {
+    "Adult": "成人",
+    "Child": "儿童",
+    "Currency": "币种",
+    "Unit": "类型",
+    "GroupSize": "人等",
+    "UseDates": "使用日期",
+    "Weekdays": "周末",
+    "Operation": "Operation"
+  },
+
  "#": "#"
 }
--- a/src/components/DeptSelector.jsx
+++ b/src/components/DeptSelector.jsx
@ -39,7 +39,6 @@ export const DeptSelector = ({show_all, isLeaf,...props}) => {
    <div>
      <Select
        mode={props.mode}
-        style={{ width: '100%' }}
        placeholder="选择小组"
        labelInValue
        maxTagCount={1}
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@ -213,7 +213,6 @@ function getFields(props) {
      99,
      <Form.Item name={`invoiceStatus`} initialValue={at(props, 'initialValue.invoiceStatus')[0] || { value: '0', label: 'Status' }}>
        <Select
-          style={{ width: '100%' }}
          labelInValue
          options={[
            { value: '0', label: 'Status' },
--- a/src/main.jsx
+++ b/src/main.jsx
@ -72,6 +72,7 @@ const initRouter = async () => {
        { 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/edit",element:<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT} result={true}><ProductsDetail /></RequireAuth>},
      ]
    },
    {
--- a/src/pageSpy/index.jsx
+++ b/src/pageSpy/index.jsx
@ -3,7 +3,7 @@ import { PROJECT_NAME } from '@/config';

 export const loadPageSpy = (title) => {

-  if (window.$pageSpy) return
+  if (import.meta.env.DEV || window.$pageSpy) return

  const PageSpySrc = [
    'https://page-spy.mycht.cn/page-spy/index.min.js',
--- a/src/stores/Products/Index.js
+++ b/src/stores/Products/Index.js
@ -88,6 +88,7 @@ const initialState = {
  agencyList: [],
  activeAgency: {},
  agencyProducts: {},
+  editingProduct: {},
 };
 export const useProductsStore = create(
  devtools((set, get) => ({
@ -100,6 +101,7 @@ export const useProductsStore = create(
    setAgencyList: (agencyList) => set({ agencyList }),
    setActiveAgency: (activeAgency) => set({ activeAgency }),
    setAgencyProducts: (agencyProducts) => set({ agencyProducts }),
+    setEditingProduct: (editingProduct) => set({ editingProduct }),

    reset: () => set(initialState),

--- a/src/views/products/Audit.jsx
+++ b/src/views/products/Audit.jsx
@ -58,7 +58,9 @@ const Header = ({ title, agency, refresh, ...props }) => {

 const PriceTable = ({ productType, dataSource, refresh }) => {
  const { t } = useTranslation('products');
+  const { travel_agency_id, use_year, audit_state } = useParams();
  const [loading, activeAgency] = useProductsStore((state) => [state.loading, state.activeAgency]);
+  const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
  const { message, notification } = App.useApp();
  const stateMapVal = useProductsAuditStatesMapVal();

@ -92,7 +94,10 @@ const PriceTable = ({ productType, dataSource, refresh }) => {
  };

  const columns = [
-    { key: 'title', dataIndex: ['info', 'title'], width: '16rem', title: t('Title'), onCell: (r, index) => ({ rowSpan: r.rowSpan, }), className: 'bg-white', render: (text, r) => text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '' },
+    { 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 || '';
+      return <Link to={`/products/${travel_agency_id}/${use_year}/${audit_state}/edit`} onClick={() => setEditingProduct(r.info)}>{title}</Link>;
+    } },
    ...(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}`)}` },
@ -114,11 +119,12 @@ const PriceTable = ({ productType, dataSource, refresh }) => {
      key: 'state',
      title: t('State'),
      render: (_, r) => {
-        return <span className={`text-${stateMapVal[`${r.audit_state_id}`]?.color}`}>{stateMapVal[`${r.audit_state_id}`]?.label}</span>;
+        const stateCls = `text-${stateMapVal[`${r.audit_state_id}`]?.color} `;
+        return <span className={stateCls}>{stateMapVal[`${r.audit_state_id}`]?.label}</span>;
      },
    },
    {
-      title: '价格审核',
+      title: '',
      key: 'action',
      render: (_, r) =>
        r.audit_state_id <= 0 ? (
--- a/src/views/products/Detail.jsx
+++ b/src/views/products/Detail.jsx
@ -8,6 +8,7 @@ import { useProductsTypes } from '@/hooks/useProductsSets';
 import Extras from './Detail/Extras';
 import { groupBy } from '@/utils/commons';
 import { useParams } from 'react-router-dom';
+import useProductsStore from '@/stores/Products/Index';
 import { useHTLanguageSets } from '@/hooks/useHTLanguageSets';
 import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
 import BatchImportPrice from './Detail/BatchImportPrice1';
@ -37,6 +38,7 @@ function Detail() {
  const HTLanguageSets = useHTLanguageSets();
  const { Search } = Input;

+  const [editingProduct, setEditingProduct] = useProductsStore((state) => [state.editingProduct, state.setEditingProduct]);

  const [expandedKeys, setExpandedKeys] = useState([]);
  const [searchValue, setSearchValue] = useState('');
@ -51,53 +53,53 @@ function Detail() {
  const productProject = {
    "6": [],
    "B": [
-      { code: "code", name: t('products:Code') },
-      { code: "city_name", name: t('products:City') },
-      { code: "km", name: t('products:KM') },
-      { code: "remarks", name: t('products:Remarks') }
+      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
+      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
+      { code: "km", name: t('products:KM'), nameKey: 'products:KM' },
+      { code: "remarks", name: t('products:Remarks'), nameKey: 'products:Remarks' }
    ],
    "J": [
-      { code: "code", name: t('products:Code') },
-      { code: "city_name", name: t('products:City') },
-      { code: "recommends_rate", name: t('products:recommendationRate') },
-      { code: "duration", name: t('products:Duration') },
-      { code: "dept_name", name: t('products:Dept') },
-      { code: "display_to_c", name: t('products:DisplayToC') },
-      { code: "remarks", name: t('products:Remarks') },
+      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
+      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
+      { code: "recommends_rate", name: t('products:recommendationRate'), nameKey: 'products:recommendationRate' },
+      { code: "duration", name: t('products:Duration'), nameKey: 'products:Duration' },
+      { code: "dept_name", name: t('products:Dept'), nameKey: 'products:Dept' },
+      { code: "display_to_c", name: t('products:DisplayToC'), nameKey: 'products:DisplayToC' },
+      { code: "remarks", name: t('products:Remarks'), nameKey: 'products:Remarks' },
    ],
    "Q": [
-      { code: "code", name: t('products:Code') },
-      { code: "city_name", name: t('products:City') },
-      { code: "recommends_rate", name: t('products:recommendationRate') },
-      { code: "duration", name: t('products:Duration') },
-      { code: "dept_name", name: t('products:Dept') },
-      { code: "display_to_c", name: t('products:DisplayToC') },
-      { code: "remarks", name: t('products:Remarks') },
+      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
+      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
+      { code: "recommends_rate", name: t('products:recommendationRate'), nameKey: 'products:recommendationRate' },
+      { code: "duration", name: t('products:Duration'), nameKey: 'products:Duration' },
+      { code: "dept_name", name: t('products:Dept'), nameKey: 'products:Dept' },
+      { code: "display_to_c", name: t('products:DisplayToC'), nameKey: 'products:DisplayToC' },
+      { code: "remarks", name: t('products:Remarks'), nameKey: 'products:Remarks' },
    ],
    "D": [
-      { code: "code", name: t('products:Code') },
-      { code: "city_name", name: t('products:City') },
-      { code: "recommends_rate", name: t('products:recommendationRate') },
-      { code: "duration", name: t('products:Duration') },
-      { code: "dept_name", name: t('products:Dept') },
-      { code: "display_to_c", name: t('products:DisplayToC') },
-      { code: "remarks", name: t('products:Remarks') },
+      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
+      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
+      { code: "recommends_rate", name: t('products:recommendationRate'), nameKey: 'products:recommendationRate' },
+      { code: "duration", name: t('products:Duration'), nameKey: 'products:Duration' },
+      { code: "dept_name", name: t('products:Dept'), nameKey: 'products:Dept' },
+      { code: "display_to_c", name: t('products:DisplayToC'), nameKey: 'products:DisplayToC' },
+      { code: "remarks", name: t('products:Remarks'), nameKey: 'products:Remarks' },
    ],
    "7": [
-      { code: "code", name: t('products:Code') },
-      { code: "city_name", name: t('products:City') },
-      { code: "recommends_rate", name: t('products:recommendationRate') },
-      { code: "duration", name: t('products:Duration') },
-      { code: "open_weekdays", name: t('products:OpenWeekdays') },
-      { code: "remarks", name: t('products:Remarks') },
+      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
+      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
+      { code: "recommends_rate", name: t('products:recommendationRate'), nameKey: 'products:recommendationRate' },
+      { code: "duration", name: t('products:Duration'), nameKey: 'products:Duration' },
+      { code: "open_weekdays", name: t('products:OpenWeekdays'), nameKey: 'products:OpenWeekdays' },
+      { code: "remarks", name: t('products:Remarks'), nameKey: 'products:Remarks' },
    ],
    "8": [
      { code: "code", name: t('products:Code') },
      { code: "city_name", name: t('products:City') },
    ],
    "R": [
-      { code: "code", name: t('products:Code') },
-      { code: "city_name", name: t('products:City') },
+      { code: "code", name: t('products:Code'), nameKey: 'products:Code' },
+      { code: "city_name", name: t('products:City'), nameKey: 'products:City' },
    ]
  }
  const [selectedCategory, setSelectedCategory] = useState(productProject.B);
@ -128,10 +130,12 @@ function Detail() {
          children: (productsData[type.value] || []).map(product => ({
            title: product.info.title,
            key: `${type.value}-${product.info.id}`,
+            _raw: product,
          }))
        }));
      };

+
      const treeData = generateTreeData(productsTypes, groupedProducts);
      console.log("treeData", treeData)
      setTreeData(treeData);
@ -444,14 +448,16 @@ function Detail() {
        const editable = isEditing(record);
        return editable ? (
          <span>
-            <a href="#!" onClick={() => handleSave(record.id)} style={{ marginRight: 8 }}>{t('products:save')}</a>
-            <Popconfirm title={t('products:sureCancel')} onConfirm={cancel}><a>{t('products:cancel')}</a></Popconfirm>
+            {/* <a href="#!" onClick={() => handleSave(record.id)} style={{ marginRight: 8 }}>{t('Save')}</a> */}
+            <Button type="link" onClick={() => handleSave(record.id)}>{t('Save')}</Button>
+            <Button type="link" onClick={cancel}>{t('Cancel')}</Button>
+            {/* <Popconfirm title={t('sureCancel')} onConfirm={cancel}><a>{t('Cancel')}</a></Popconfirm> */}
          </span>
        ) : (
          <span>
-            <a disabled={editingid !== ''} onClick={() => edit(record)} style={{ marginRight: 8 }}>{t('products:edit')}</a>
-            <Popconfirm title={t('products:sureDelete')} onConfirm={() => handleDelete(record.id)}>
-              <a>{t('products:delete')}</a>
+            <a disabled={editingid !== ''} onClick={() => edit(record)} style={{ marginRight: 8 }}>{t('Edit')}</a>
+            <Popconfirm title={t('sureDelete')} onConfirm={() => handleDelete(record.id)}>
+              <a>{t('Delete')}</a>
            </Popconfirm>
          </span>
        );
@ -559,6 +565,8 @@ function Detail() {
    setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString()))


+    setEditingProduct(node._raw);
+
    let initialQuotationData = null;
    let infoData = null;
    let lgcDetailsData = null;
@ -616,8 +624,8 @@ function Detail() {
  return (
    <div>
      <Row>
-        <Col span={6}>
-          <Card style={{ width: "20%", position: "fixed", maxHeight: "80vh", overflowY: "auto" }}>
+        <Col span={6} className=' relative'>
+          <Card className='w-[inherit] fixed overflow-y-auto max-h-[80vh]'>
            <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onChange} />
            <Tree
              onSelect={handleNodeSelect}
@ -633,18 +641,19 @@ function Detail() {
        <Col span={18}>
          <Form form={form} name="control-hooks" onFinish={onSave}>
            <Card
-              style={{ width: "80%" }}
+              // style={{ width: "80%" }}
              title={
                <Breadcrumb items={[
-                  { title: <Link to={'/'}>供应商</Link> },
+                  // { title: <Link to={'/'}>供应商</Link> },
                  { title: <Link to={'/products'}>综费</Link> },
-                  { title: '文章列表' }
+                  { title: editingProduct?.info?.title || t('New') }
                ]} />
              }
            >
-              <h2>{t('products:productProject')}</h2>
+              <h2>{t('products:EditComponents.info')}</h2>
              <Row gutter={16}>
                {selectedCategory.map((item, index) => (
+                  
                  <Col span={8} id={index} key={`${item.code}-${index}`}>
                    <Form.Item name={['info', item.code]} label={item.name}>
                      {item.code === "duration" ? (
@ -667,6 +676,7 @@ function Detail() {
                <div>
                  {tags.map(tag => (
                    <Tag
+                      key={tag}
                      id={tag}
                      onClick={() => handleTagClick(tag)}
                      color={tag === selectedTag ? 'blue' : undefined}
@ -711,12 +721,12 @@ function Detail() {
                  />
                </Form.Item>
              </Card>
-            </Card>
+            {/* </Card> */}

-            <Card style={{ width: "80%" }}>
+            {/* <Card style={{ width: "80%" }}> */}
              <h2>{t('products:supplierQuotation')}</h2>
              <Form.Item name="quotation">
-                <Table
+                <Table rowKey={'id'}
                  components={{ body: { cell: EditableCell } }}
                  bordered
                  dataSource={quotation}
@ -730,20 +740,20 @@ function Detail() {

                <Button onClick={handleBatchImport} type="primary" style={{ marginBottom: 16 }}>批量添加</Button>
              </Form.Item>
-            </Card>

-            <Card style={{ width: "80%" }}>
-              <Extras productId={2} />
-            </Card>
+              <Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "20%" }}>
+                {t('Save')}
+              </Button>
+              <Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "5%" }}>
+                提交审核
+              </Button>
+              </Card>
+            </Form>

+            {/* <Card style={{ width: "80%" }}> */}
+              <Extras productId={2} />
+            {/* </Card> */}

-            <Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "20%" }}>
-              {t('products:save')}
-            </Button>
-            <Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "5%" }}>
-              提交审核
-            </Button>
-          </Form>
        </Col>
      </Row>

--- a/src/views/products/Detail/Extras.jsx
+++ b/src/views/products/Detail/Extras.jsx
@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+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';
@ -24,11 +24,12 @@ const NewAddonModal = ({ onPick, ...props }) => {

  const onSearchProducts = async (values) => {
    const copyObject = cloneDeep(values);
-    const { starttime, endtime, ...param } = copyObject;
+    const { starttime, endtime, year, ...param } = copyObject;
    setSearchLoading(true);
    setSearchResult([]);
    // debug: audit_state: '1',
-    const result = await getAgencyProductsAction({ ...param, audit_state: '0', travel_agency_id, use_year });
+    const search_year = year || use_year;
+    const result = await getAgencyProductsAction({ ...param, travel_agency_id, use_year: search_year, audit_state: '0',  });
    setSearchResult(result?.products || []);
    setSearchLoading(false);
  };
@ -71,7 +72,7 @@ const NewAddonModal = ({ onPick, ...props }) => {
      <Modal width={'95%'} style={{ top: 20 }} open={open} title={'添加附加'} footer={false} onCancel={() => setOpen(false)} destroyOnClose>
        <SearchForm
          fieldsConfig={{
-            shows: ['dates', 'year', 'keyword'],
+            shows: [ 'year', 'keyword'], // 'dates',
            fieldProps: {
              dates: { label: t('products:CreateDate') },
              keyword: { label: t('products:Title'), col: 4 },
--- a/src/views/products/Manage.jsx
+++ b/src/views/products/Manage.jsx
@ -77,6 +77,7 @@ function Index() {
            agency: { col: 4 },
            dates: { label: t('products:CreateDate') },
            keyword: { label: t('products:Title'), col: 4 },
+            year: { col: 4 },
          },
          sort: { agency: 1, audit_state: 2, keyword: 100 },
        }}