feat: 产品管理: 审核: 切换年份; 切换供应商;

src/stores/Products/Index.js

@@ -30,7 +30,7 @@ export const copyAgencyDataAction = async (postbody) => {
 };
 
 export const getAgencyProductsAction = async (param) => {
-  const _param = { ...param, use_year: (param.use_year || '').replace('all', ''), audit_state: (param.audit_state || '').replace('all', '') };
+  const _param = { ...param, use_year: String(param.use_year || '').replace('all', ''), audit_state: (param.audit_state || '').replace('all', '') };
   const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/travel_agency_products`, _param);
   return errcode !== 0 ? { agency: {}, products: [] } : result;
 };
@@ -39,6 +39,7 @@ export const getAgencyProductsAction = async (param) => {
  *
  */
 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;

src/views/products/Audit.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
-import { App, Button, Collapse, Table, Space, Divider } from 'antd';
+import { useParams, Link, Navigate, useNavigate } from 'react-router-dom';
+import { App, Empty, Button, Collapse, Table, Space, Divider, Select } from 'antd';
 import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
 import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
 import { useTranslation } from 'react-i18next';
@@ -10,19 +10,49 @@ 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';
-
-const Header = ({ title, agency, refresh, ...props }) => {
+import dayjs from 'dayjs';
+import VendorSelector from '@/components/VendorSelector';
+const Header = ({ refresh, ...props }) => {
   const { travel_agency_id, use_year, audit_state  } = useParams();
   const { t } = useTranslation();
-  const [activeAgency] = useProductsStore((state) => [state.activeAgency]);
+  const isPermitted = useAuthStore(state => state.isPermitted);
+  const [activeAgency, setActiveAgency] = useProductsStore((state) => [state.activeAgency, state.setActiveAgency]);
   const { message, notification } = App.useApp();
+  const navigate = useNavigate();
+
+  const yearOptions = [];
+  const currentYear = dayjs().year();
+  const baseYear = Number(use_year === 'all' ? currentYear : use_year);
+  for (let i = baseYear - 3; i <= baseYear + 3; i++) {
+    yearOptions.push({ label: i, value: i, });
+  }
+
+  const [param, setParam] = useState({ pick_year: baseYear, pick_agency: travel_agency_id, });
+  const [pickYear, setPickYear] = useState(baseYear);
+  useEffect(() => {
+    refresh(param);
+    navigate(`/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/audit`);
+
+    return () => {};
+  }, [param]);
+
+  const handleYearChange = (value) => {
+    setPickYear(value);
+    setParam((pre) => ({ ...pre, ...{ pick_year: value } }));
+  };
+
+  const handleAgencyChange = ({ label, value }) => {
+    setActiveAgency({ travel_agency_id: value, travel_agency_name: label });
+    setParam((pre) => ({ ...pre, ...{ pick_agency: value } }));
+  };
+
   const handleAuditItem = (state, row) => {
     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();
+            refresh(param);
           }
         }
       })
@@ -39,20 +69,33 @@ const Header = ({ title, agency, refresh, ...props }) => {
     <div className='flex justify-end items-center gap-4 h-full'>
       <div className='grow'>
         <h2 className='m-0 leading-tight'>
-          {title}
+          {isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? (
+            <VendorSelector
+              value={{ label: activeAgency.travel_agency_name, value: activeAgency.travel_agency_id }}
+              onChange={handleAgencyChange}
+              mode={null}
+              className='w-72'
+              size='large'
+              variant={'borderless'}
+            />
+          ) : (
+            activeAgency.travel_agency_name
+          )}
           <Divider type={'vertical'} />
-          {(use_year || '').replace('all', '')}
+          <Select options={yearOptions} variant={'borderless'} className='w-24' size='large' value={pickYear} onChange={handleYearChange} />
+          {/* <Divider type={'vertical'} />
+           {(use_year || '').replace('all', '')} */}
         </h2>
       </div>
       {/* <Button size='small'>{t('Copy')}</Button> */}
       {/* <Button size='small'>{t('Import')}</Button> */}
       <RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
-        <Link className='px-2' to={`/products/${travel_agency_id}/${use_year}/${audit_state}/edit`}>
+        <Link className='px-2' to={`/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/edit`}>
           {t('Edit')}
         </Link>
       </RequireAuth>
       <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
-        <Button size='small' type={'primary'} onClick={() => handleAuditItem('2', agency)}>
+        <Button size='small' type={'primary'} onClick={() => handleAuditItem('2', activeAgency)}>
           {t('products:auditStateAction.Published')}
         </Button>
       </RequireAuth>
@@ -60,7 +103,7 @@ const Header = ({ title, agency, refresh, ...props }) => {
         {t('products:auditStateAction.Approved')}
       </Button> */}
       <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
-        <Button size='small' type={'primary'} danger ghost onClick={() => handleAuditItem('3', agency)}>
+        <Button size='small' type={'primary'} danger ghost onClick={() => handleAuditItem('3', activeAgency)}>
           {t('products:auditStateAction.Rejected')}
         </Button>
       </RequireAuth>
@@ -216,27 +259,22 @@ const TypesPanels = (props) => {
   const onCollapseChange = (_activeKey) => {
     setActiveKey(_activeKey);
   };
-  return <Collapse items={showTypes} activeKey={activeKey} onChange={onCollapseChange} />;
+  return isEmpty(agencyProducts) ? <Empty /> : <Collapse items={showTypes} activeKey={activeKey} onChange={onCollapseChange} />;
 };
 
 const Audit = ({ ...props }) => {
   const { travel_agency_id, use_year, audit_state } = useParams();
   const [loading, activeAgency, getAgencyProducts] = useProductsStore((state) => [state.loading, state.activeAgency, state.getAgencyProducts]);
 
-  const handleGetAgencyProducts = () => {
-    getAgencyProducts({ travel_agency_id, use_year, audit_state });
+  const handleGetAgencyProducts = ({pick_year, pick_agency}={}) => {
+    const year = pick_year || use_year;
+    const agency = pick_agency || travel_agency_id;
+    getAgencyProducts({ travel_agency_id: agency, use_year: year, audit_state });
   };
 
-  useEffect(() => {
-    handleGetAgencyProducts();
-
-    return () => {};
-  }, [travel_agency_id]);
-
   return (
     <>
-      <SecondHeaderWrapper header={<Header title={activeAgency.travel_agency_name} agency={activeAgency} refresh={handleGetAgencyProducts} />} loading={loading} >
-        {/* debug: 0 */}
+      <SecondHeaderWrapper header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} />} loading={loading} backTo={`/products`}>
         {/* <PrintContractPDF /> */}
 
         <TypesPanels refresh={handleGetAgencyProducts} />

src/views/products/Manage.jsx

@@ -65,7 +65,6 @@ function Index() {
     { title: t('products:CreateDate'), key: 'poster_date', dataIndex: 'poster_date' },
     { title: t('products:AuState'), key: 'audit_state', dataIndex: 'audit_state',
       render: (_, r) => {
-
         const stateCls = ` text-${stateMapVal[`${r.audit_state_id}`]?.color} `;
         return <span className={stateCls}>{stateMapVal[`${r.audit_state_id}`]?.label}</span>;
       }, },

tailwind.config.js

@@ -2,6 +2,11 @@
 import colors from 'tailwindcss/colors'
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  safelist: [
+    'text-primary',
+    'text-danger',
+    'text-muted',
+  ],
   darkMode: 'media',
   theme: {
     colors: {