feat: 复制供应商产品: +小组, 选择类型

1 year ago · 6caa17ea4c
parent 8fd197a3e0
commit 6caa17ea4c
9 changed files with 148 additions and 19 deletions
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -33,6 +33,8 @@
  "Success": "Success",
  "Failed": "Failed",

+  "All": "All",
+
  "Table": {
    "Total": "Total {{total}} items"
  },
--- a/public/locales/en/products.json
+++ b/public/locales/en/products.json
@ -101,5 +101,11 @@
  "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"
+  },
+
  "#": "#"
 }
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -33,6 +33,8 @@
  "Success": "成功",
  "Failed": "失败",

+  "All": "所有",
+
  "Table": {
    "Total": "共 {{total}} 条"
  },
--- a/public/locales/zh/products.json
+++ b/public/locales/zh/products.json
@ -102,5 +102,11 @@
  "sureCancel": "确定取消？",
  "sureDelete":"确定删除？",

+  "CopyFormMsg": {
+    "requiredVendor": "请选择目标供应商",
+    "requiredTypes": "请选择产品类型",
+    "requiredDept": "请选择所属小组"
+  },
+
  "#": "#"
 }
--- a/src/components/DeptSelector.jsx
+++ b/src/components/DeptSelector.jsx
@ -0,0 +1,61 @@
+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}
+        style={{ width: '100%' }}
+        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;
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@ -4,6 +4,7 @@ import { objectMapper, at } from '@/utils/commons';
 import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from '@/config';
 import useFormStore from '@/stores/Form';
 import { useDatePresets } from '@/hooks/useDatePresets';
+import { useProductsTypes } from '@/hooks/useProductsSets';
 import { useTranslation } from 'react-i18next';

 import { fetchJSON } from '@/utils/request';
@ -11,7 +12,7 @@ import { HT_HOST } from '@/config';

 import SearchInput from './SearchInput';
 import AuditStateSelector from './AuditStateSelector';
-
+import DeptSelector from './DeptSelector';

 //供应商列表
 export const fetchVendorList = async (q) => {
@ -21,7 +22,17 @@ export const fetchVendorList = async (q) => {

 const { RangePicker } = DatePicker;

-const SearchForm = ({ initialValue, onSubmit, onReset, confirmText, formName, loading, ...props }) => {
+export const SelectProductsTypes = ({...props}) => {
+  const productsTypes = useProductsTypes();
+  const { t } = useTranslation();
+  return (
+    <>
+      <Select labelInValue allowClear placeholder={t('products:ProductType')} options={productsTypes} {...props}/>
+    </>
+  );
+};
+
+const SearchForm = ({ initialValue, onSubmit, onReset, confirmText, formName, formLayout, loading, ...props }) => {
  const { t } = useTranslation();
  const presets = useDatePresets();
  const [formValues, setFormValues] = useFormStore((state) => [state.formValues, state.setFormValues]);
@ -59,6 +70,19 @@ const SearchForm = ({ initialValue, onSubmit, onReset, confirmText, formName, lo
      'year': [
        { key: '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 : '';
+        },
+      },
+      'dept': {
+        key: 'dept',
+        transform: (value) => {
+          console.log(value);
+          return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
+        },
+      },
    };
    let dest = {};
    const { dates, ...omittedValue } = values;
@ -106,9 +130,14 @@ const SearchForm = ({ initialValue, onSubmit, onReset, confirmText, formName, lo
    setFormValuesToSub(dest);
    // console.log('form onValuesChange', Object.keys(changedValues), args);
  };
+
+  const onFinishFailed = ({ values, errorFields }) => {
+    console.log('form validate failed', '\nform values:', values, '\nerrorFields', errorFields);
+  };
+
  return (
    <>
-      <Form form={form} name={formName || 'advanced_search'} className='orders-search-form' onFinish={onFinish} onValuesChange={onValuesChange}>
+      <Form form={form} layout={'horizontal'} name={formName || 'advanced_search'} className='orders-search-form' onFinish={onFinish} onValuesChange={onValuesChange} onFinishFailed={onFinishFailed} >
        {/* <EditableContext.Provider value={form}> */}
        <Row gutter={16}>
          {getFields({ sort, initialValue: readValues, hides, shows, fieldProps, fieldComProps, form, presets, t })}
@ -253,10 +282,26 @@ function getFields(props) {
      'audit_state',
      99,
      <Form.Item name={`audit_state`} initialValue={at(props, 'initialValue.audit_state')[0] || { value: '', label: 'Status' }}>
-        <AuditStateSelector />
+        <AuditStateSelector {...fieldComProps.audit_state} />
      </Form.Item>,
      fieldProps?.audit_state?.col || 3
    ),
+    item(
+      'products_types',
+      99,
+      <Form.Item name={`products_types`} label={t('products:ProductType')}  {...fieldProps.products_types} initialValue={at(props, 'initialValue.products_types')[0] || undefined}>
+        <SelectProductsTypes maxTagCount={1} {...fieldComProps.products_types} />
+      </Form.Item>,
+      fieldProps?.products_types?.col || 6
+    ),
+    item(
+      'dept',
+      99,
+      <Form.Item name={`dept`} label={t('products:Dept')}  {...fieldProps.dept} initialValue={at(props, 'initialValue.dept')[0] || undefined}>
+        <DeptSelector {...fieldComProps.dept} />
+      </Form.Item>,
+      fieldProps?.dept?.col || 6
+    ),
  ];
  baseChildren = baseChildren
    .map((x) => {
--- a/src/hooks/useProductsSets.js
+++ b/src/hooks/useProductsSets.js
@ -18,7 +18,7 @@ import { PERM_OVERSEA, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT } from '@/confi
 * * 酒店	A
 * * 超公里	B
 * * 餐费	C
- * * 小包价	D
+ * * 小包价	D // 包价线路
 * * 站	X
 * * 购物	S
 * * 餐	R (餐厅)
@ -41,11 +41,12 @@ import { PERM_OVERSEA, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT } from '@/confi
 * * 车费 J
 */

-export const useProductsTypes = () => {
+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' },
@ -54,9 +55,10 @@ export const useProductsTypes = () => {
      { label: t('products:type.Attractions'), value: '7', key: '7' },
      { 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' }, // 包价线路
+      { label: t('products:type.Package'), value: 'D', key: 'D' },
    ];
-    setTypes(newData);
+    const res = showAll ? [...allItem, ...newData] : newData;
+    setTypes(res);
  }, [i18n.language]);

  return types;
--- a/src/stores/Products/Index.js
+++ b/src/stores/Products/Index.js
@ -10,8 +10,7 @@ export const searchAgencyAction = async (param) => {
  return errcode !== 0 ? [] : result;
 };

-export const copyAgencyDataAction = async (from, to) => {
-  const postbody = { source_agency: from, target_agency: to };
+export const copyAgencyDataAction = async (postbody) => {
  const formData = new FormData();
  Object.keys(postbody).forEach((key) => {
    formData.append(key, postbody[key]);
--- a/src/views/products/Manage.jsx
+++ b/src/views/products/Manage.jsx
@ -26,9 +26,11 @@ function Index() {
  const [copyModalVisible, setCopyModalVisible] = useState(false);
  const [sourceAgency, setSourceAgency] = useState({});
  const [copyLoading, setCopyLoading] = useState(false);
-  const handleCopyAgency = async (toID) => {
+  const handleCopyAgency = async (param) => {
    setCopyLoading(true);
-    const success = await copyAgencyDataAction(sourceAgency.travel_agency_id, toID);
+    const postbody = objectMapper(param, { agency: 'target_agency', });
+    const toID = postbody.target_agency;
+    const success = await copyAgencyDataAction({...postbody, source_agency: sourceAgency.travel_agency_id});
    setCopyLoading(false);
    success ? message.success('复制成功') : message.error('复制失败');

@ -70,7 +72,7 @@ function Index() {
    <Space direction='vertical' style={{ width: '100%' }}>
      <SearchForm
        fieldsConfig={{
-          shows: ['agency', 'audit_state', 'dates', 'year', 'keyword'],
+          shows: ['agency', 'audit_state', 'dates', 'year', ],
          fieldProps: {
            agency: { col: 4 },
            dates: { label: t('products:CreateDate') },
@ -95,16 +97,20 @@ function Index() {
        <SearchForm formName='copyform' loading={copyLoading}
          confirmText={t('Confirm')}
          fieldsConfig={{
-            shows: ['agency'],
+            shows: ['agency', 'products_types', 'dept'],
            fieldProps: {
-              agency: { label: `目标${t('products:Vendor')}`, col: 12 },
+              agency: { label: `目标${t('products:Vendor')}`, col: 24, rules: [{ required: true, message: t('products:CopyFormMsg.requiredVendor') }] },
+              products_types: { col: 24 },
+              dept: { col: 24, rules: [{ required: true, message: t('products:CopyFormMsg.requiredDept') }] },
            },
            fieldComProps: {
              agency: { mode: null }, // 单选
+              products_types: { mode: 'multiple' },
+              dept: { isLeaf: true },
            },
          }}
          onSubmit={(err, formVal, filedsVal) => {
-            handleCopyAgency(formVal.agency);
+            handleCopyAgency(formVal);
          }}
        />
      </Modal>