feat: 供应商品弹窗基础

src/locales/zh-CN/commodity.ts

@@ -117,6 +117,7 @@ export default {
   'commodity.products.buttonGroup.5' : '上架',
   'commodity.products.buttonGroup.6' : '下架',
   'commodity.products.buttonGroup.7' : '查看供应商品',
+  'commodity.products.buttonGroup.8' : '查看上游商品',
   'commodity.products.operationHandler.1' : '复制',
   'commodity.products.operationHandler.2' : '提交审核',
   'commodity.products.operationHandler.3' : '修改',
@@ -124,6 +125,7 @@ export default {
   'commodity.products.operationHandler.5' : '上架',
   'commodity.products.operationHandler.6' : '下架',
   'commodity.products.operationHandler.7' : '查看供应商品',
+  'commodity.products.operationHandler.8' : '查看上游商品',
   'commodity.products.step0Description.text.1' : '点击下载 EXCEL文件模板',
   'commodity.products.step0Description.text.2' : '按照模板整理货品资料',
   'commodity.products.step0Description.text.3' : '点击导入按钮，导入整理好的货品资料',

src/pages/commodity/products/index.tsx

 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { history, useIntl } from 'umi'
-import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Menu, Space, message, Badge } from 'antd'
+import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Menu, Space, message, Badge, Table } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import {
   PlusOutlined,
@@ -35,6 +35,7 @@ import { getTemplateWebMemberShopWebFindCurrMemberShop } from '@/services/Templa
 import PutawayGuide, { GuideMenu } from './components/putawayGuide'
 import { useRowSelectionTable, useRowSelectionTableCtl } from '@/hooks/useRowSelectionTable'
 import { postOrderCommonProductProcessFind } from '@/services/OrderNewV2Api'
+import { ProductView, ProductSel } from './productModal'
 
 const { confirm } = Modal;
 
@@ -68,6 +69,11 @@ const Products: React.FC<{}> = () => {
   const [giudeStep, setGiudeStep] = useState<number>()
   const [inconformityProductIds, setInconformityProductIds] = useState<number[]>([])
 
+  // 上游弹窗
+  const [upModal, setUpModal] = useState(false)
+  const [upSelModal, setUpSelModal] = useState(false)
+  const [downSelModal, setDownSelModal] = useState(false)
+
   // const [shopId, setShopId] = useState<any>()
   const shopIdRef = useRef<any>()
   /** 带参数查询，给表单带默认值 */
@@ -211,6 +217,7 @@ const Products: React.FC<{}> = () => {
       [intl.formatMessage({ id: 'commodity.products.buttonGroup.5' })]: record.isOnPublish,
       [intl.formatMessage({ id: 'commodity.products.buttonGroup.6' })]: record.isOffPublish,
       [intl.formatMessage({ id: 'commodity.products.buttonGroup.7' })]: record.isUpperCommodity,
+      [intl.formatMessage({ id: 'commodity.products.buttonGroup.8' })]: record.type === 2,
     }
 
     const operationHandler = {
@@ -221,6 +228,7 @@ const Products: React.FC<{}> = () => {
       [intl.formatMessage({ id: 'commodity.products.operationHandler.5' })]: () => clickUp(1, record.id),
       [intl.formatMessage({ id: 'commodity.products.operationHandler.6' })]: () => clickUp(0, record.id),
       [intl.formatMessage({ id: 'commodity.products.operationHandler.7' })]: () => previewUpper(record.upperCommodityId),
+      [intl.formatMessage({ id: 'commodity.products.operationHandler.8' })]: () => setUpModal(true),
     }
 
     return (
@@ -626,6 +634,10 @@ const Products: React.FC<{}> = () => {
         return message.error(intl.formatMessage({ id: 'commodity.products.schema.fastSchema.qingxuanzeshangjiashangpin' }))
       }
       selectedRowKeys.length ? setExportQrcodeModal(true) : message.error(intl.formatMessage({ id: 'commodity.products.handleBatchDelete.error' }))
+    } else if (e.key === '6') {
+      setUpSelModal(true)
+    } else if (e.key === '7') {
+      setDownSelModal(true)
     }
   }
 
@@ -724,6 +736,14 @@ const Products: React.FC<{}> = () => {
       <Menu.Item key="5" icon={<ExportOutlined />}>
         {intl.formatMessage({ id: 'commodity.products.menuMore.5' })}
       </Menu.Item>
+      <Menu.Item key="6" icon={<ExportOutlined />}>
+        获取上游供应商品
+        {/* {intl.formatMessage({ id: 'commodity.products.menuMore.5' })} */}
+      </Menu.Item>
+      <Menu.Item key="7" icon={<ExportOutlined />}>
+        获取下游销售商品
+        {/* {intl.formatMessage({ id: 'commodity.products.menuMore.5' })} */}
+      </Menu.Item>
     </Menu>
   )
 
@@ -902,6 +922,9 @@ const Products: React.FC<{}> = () => {
         <p>{intl.formatMessage({ id: 'commodity.products.textthree' })}</p>
         <p>{intl.formatMessage({ id: 'commodity.products.textfour' })}</p>
       </Modal>
+      <ProductView visible={upModal} setVisible={setUpModal} />
+      <ProductSel visible={upSelModal} setVisible={setUpSelModal} title="上游供应" />
+      <ProductSel visible={downSelModal} setVisible={setDownSelModal} title="下游销售" />
       {/* 选择上游商品 */}
       <UpperProductModalTable currentRef={upperRef} type="checkbox" tableRef={ref} />
       {/* 商品上架引导 */}

src/pages/commodity/products/productModal.tsx

+import NiceForm from '@/components/NiceForm';
+import StandardTable from '@/components/StandardTable';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
+import useSetSearchValueInTable from '@/hooks/useSetSearchValueInTable';
+import { PlusOutlined } from '@ant-design/icons';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
+import { Button, Modal, Table } from 'antd';
+import { useMemo, useRef } from 'react';
+import { getIntl } from 'umi';
+import {
+  searchBrandOptionEffect,
+  searchCustomerCategoryOptionEffect,
+} from './effect';
+
+// 快捷修改单价高级筛选
+export const newSchema = (title: string) => ({
+  type: 'object',
+  properties: {
+    mageLayout: {
+      type: 'object',
+      'x-component': 'flex-layout',
+      'x-component-props': {
+        rowStyle: {
+          flexWrap: 'nowrap',
+        },
+        colStyle: {
+          marginLeft: 20,
+        },
+      },
+      properties: {
+        productId: {
+          type: 'string',
+          'x-component-props': {
+            placeholder: '商品ID',
+          },
+        },
+        name: {
+          type: 'string',
+          'x-component-props': {
+            placeholder: getIntl().formatMessage({
+              id: 'commodity.products.schema.productSchema.name',
+            }),
+          },
+        },
+        priceTypeList: {
+          type: 'string',
+          enum: [
+            {
+              label: getIntl().formatMessage({
+                id: 'commodity.products.schema.productSchema.priceTypeList.1',
+              }),
+              value: 1,
+            },
+            {
+              label: getIntl().formatMessage({
+                id: 'commodity.products.schema.productSchema.priceTypeList.2',
+              }),
+              value: 2,
+            },
+            {
+              label: getIntl().formatMessage({
+                id: 'commodity.products.schema.productSchema.priceTypeList.3',
+              }),
+              value: 3,
+            },
+            {
+              label: getIntl().formatMessage({
+                id: 'commodity.products.schema.productSchema.priceTypeList.4',
+              }),
+              value: 4,
+            },
+          ],
+          'x-component-props': {
+            placeholder: getIntl().formatMessage({
+              id:
+                'commodity.products.schema.productSchema.priceTypeList.placeholder',
+            }),
+            style: { width: '174px' },
+          },
+        },
+        brandId: {
+          type: 'string',
+          'x-component': 'CustomInputSearch',
+          'x-component-props': {
+            placeholder: getIntl().formatMessage({
+              id: 'commodity.products.schema.productSchema.brandId',
+            }),
+            showSearch: true,
+            showArrow: true,
+            defaultActiveFirstOption: false,
+            filterOption: false,
+            notFoundContent: null,
+            style: { width: '174px' },
+            searchValue: null,
+            dataoption: [],
+          },
+        },
+        customerCategoryId: {
+          type: 'string',
+          'x-component': 'CustomCategorySearch',
+          'x-component-props': {
+            placeholder: getIntl().formatMessage({
+              id: 'commodity.products.schema.productSchema.customerCategoryId',
+            }),
+            showSearch: true,
+            notFoundContent: null,
+            style: { width: '174px' },
+            dataoption: [],
+            fieldNames: { label: 'title', value: 'id', children: 'children' },
+          },
+        },
+        upgyhy: {
+          type: 'string',
+          'x-component-props': {
+            placeholder: `${title}会员`,
+          },
+        },
+        submit: {
+          'x-component': 'Submit',
+          'x-mega-props': {
+            span: 1,
+          },
+          'x-component-props': {
+            children: '',
+          },
+        },
+      },
+    },
+  },
+});
+
+export const ProductView = props => {
+  // 查看上游弹窗
+  const { visible, setVisible } = props;
+  const columnsUp = [
+    {
+      title: '序号',
+      dataIndex: 'num',
+      key: 'num',
+    },
+    {
+      title: '上游供应会员名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '上游供应商品ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '品类',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '品牌',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '单位',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '商品定价',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '价格',
+      dataIndex: 'id',
+      key: 'id',
+    },
+  ];
+  const dataSourceUp = [
+    {
+      num: '12',
+      name: '12',
+      id: '12',
+    },
+  ];
+  return (
+    <Modal
+      title="查看上游商品"
+      visible={visible}
+      width={1200}
+      // onOk={handleExportQrcode}
+      onCancel={() => setVisible(false)}
+      // confirmLoading={exportLoading}
+    >
+      <Table dataSource={dataSourceUp} columns={columnsUp} />;
+    </Modal>
+  );
+};
+export const ProductSel = props => {
+  // 选择商品
+  const { visible, setVisible, title } = props;
+  /** 带参数查询，给表单带默认值 */
+  const { clear } = useSetSearchValueInTable();
+  const ref = useRef<any>({});
+  const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'id' });
+  const columns = (title: string) => [
+    {
+      title: '商品ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '品类',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '品牌',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '单位',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '商品定价',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '单价',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: `${title}会员`,
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '状态',
+      dataIndex: 'id',
+      key: 'id',
+    },
+  ];
+  const dataSource = [
+    {
+      name: '12',
+      id: '12',
+    },
+  ];
+  const formActions = createFormActions();
+  const fetchData = (params: any) => {
+    console.log(
+      '🚀 ~ file: productModal.tsx ~ line 231 ~ fetchData ~ params',
+      params,
+    );
+    return new Promise(resolve => {
+      resolve({
+        totalCount: 1,
+        data: dataSource,
+      });
+    });
+  };
+  return (
+    <Modal
+      title={`选择${title}商品`}
+      visible={visible}
+      width={1200}
+      // onOk={handleExportQrcode}
+      onCancel={() => setVisible(false)}
+      // confirmLoading={exportLoading}
+    >
+      <StandardTable
+        columns={columns(title)}
+        currentRef={ref}
+        rowSelection={rowSelection}
+        tableProps={{
+          rowKey: 'id',
+        }}
+        fetchTableData={(params: any) => fetchData(params)}
+        controlRender={
+          <NiceForm
+            actions={formActions}
+            onSubmit={values => ref.current.reload(values)}
+            expressionScope={
+              {
+                // controllerBtns,
+              }
+            }
+            effects={($, actions) => {
+              FormEffectHooks.onFieldChange$('brandId').subscribe(() => {
+                searchBrandOptionEffect(actions, 'brandId');
+              });
+              FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(
+                () => {
+                  searchCustomerCategoryOptionEffect(
+                    actions,
+                    'customerCategoryId',
+                  );
+                },
+              );
+            }}
+            schema={newSchema(title)}
+            {...dataSource}
+            onReset={() => {
+              clear();
+            }}
+          />
+        }
+      />
+      {/* <Table dataSource={dataSource} columns={columns} />; */}
+    </Modal>
+  );
+};