feat:组件升级

config/config.js

@@ -50,13 +50,15 @@ const plugins = [
 ];
 
 export default {
-  plugins,
-  block: {
-    // 国内用户可以使用码云
-    // defaultGitUrl: 'https://gitee.com/ant-design/pro-blocks',
-    defaultGitUrl: 'https://github.com/ant-design/pro-blocks',
+  antd: {},
+  dva: {
+    hmr: true,
   },
   hash: true,
+  locale: {
+    default: 'zh-CN', //开启国际化配置，就必须要创建locales/zh-CN.ts 文件
+    baseNavigator: true,
+  },
   targets: {
     ie: 11,
   },
@@ -191,33 +193,33 @@ export default {
       ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION || '', // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
   },
   ignoreMomentLocale: true,
-  lessLoaderOptions: {
+  lessLoader: {
     javascriptEnabled: true,
   },
-  disableRedirectHoist: true,
-  cssLoaderOptions: {
-    modules: true,
-    getLocalIdent: (context, _, localName) => {
-      if (
-        context.resourcePath.includes('node_modules') ||
-        context.resourcePath.includes('ant.design.pro.less') ||
-        context.resourcePath.includes('global.less')
-      ) {
-        return localName;
-      }
+  cssLoader: {
+    modules: {
+      getLocalIdent: (context, _, localName) => {
+        if (
+          context.resourcePath.includes('node_modules') ||
+          context.resourcePath.includes('ant.design.pro.less') ||
+          context.resourcePath.includes('global.less')
+        ) {
+          return localName;
+        }
 
-      const match = context.resourcePath.match(/src(.*)/);
+        const match = context.resourcePath.match(/src(.*)/);
 
-      if (match && match[1]) {
-        const antdProPath = match[1].replace('.less', '');
-        const arr = slash(antdProPath)
-          .split('/')
-          .map(a => a.replace(/([A-Z])/g, '-$1'))
-          .map(a => a.toLowerCase());
-        return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
-      }
+        if (match && match[1]) {
+          const antdProPath = match[1].replace('.less', '');
+          const arr = slash(antdProPath)
+            .split('/')
+            .map(a => a.replace(/([A-Z])/g, '-$1'))
+            .map(a => a.toLowerCase());
+          return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
+        }
 
-      return localName;
+        return localName;
+      },
     },
   },
   chainWebpack: webpackPlugin,

jsconfig.json

@@ -5,7 +5,8 @@
     "experimentalDecorators": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@@/*": ["./src/.uim/*"]
     }
   }
 }

package.json

@@ -49,11 +49,14 @@
 	],
 	"dependencies": {
 		"@ant-design/colors": "^3.1.0",
-		"@ant-design/pro-layout": "^4.10.0",
+		"@ant-design/compatible": "^1.1.0",
+		"@ant-design/icons": "^4.7.0",
+		"@ant-design/pro-layout": "^4.11.4",
 		"@ant-design/pro-table": "^1.0.31",
 		"@antv/data-set": "^0.10.2",
-		"antd": "^3.26.20",
+		"antd": "^4.19.3",
 		"antd-virtual-select": "^1.1.2",
+		"babel-eslint": "^10.1.0",
 		"classnames": "^2.2.6",
 		"date-fns": "^2.16.1",
 		"dva": "^2.4.1",
@@ -63,18 +66,14 @@
 		"omit.js": "^1.0.2",
 		"path-to-regexp": "^3.1.0",
 		"qs": "^6.9.0",
-		"rc-tree-select": "^5.1.4",
 		"react": "^16.8.6",
 		"react-copy-to-clipboard": "^5.0.1",
 		"react-dom": "^16.8.6",
 		"react-helmet": "^5.2.1",
 		"react-sortablejs": "^6.0.0",
-		"redux": "^4.0.1",
 		"slash2": "^2.0.0",
 		"sortablejs": "^1.13.0",
-		"umi": "^2.13.0",
-		"umi-plugin-pro-block": "^1.3.4",
-		"umi-plugin-react": "^1.10.1",
+		"umi": "^3.0.0",
 		"umi-request": "^1.2.7",
 		"webpack-theme-color-replacer": "^1.2.15"
 	},
@@ -90,6 +89,10 @@
 		"@types/react-dom": "^16.8.4",
 		"@types/react-helmet": "^5.0.13",
 		"@umijs/fabric": "^1.2.0",
+		"@umijs/plugin-blocks": "^2.0.5",
+		"@umijs/preset-ant-design-pro": "^1.0.1",
+		"@umijs/preset-react": "^1.3.0",
+		"@umijs/preset-ui": "^2.0.9",
 		"chalk": "^2.4.2",
 		"check-prettier": "^1.0.3",
 		"cross-env": "^6.0.0",
@@ -109,10 +112,7 @@
 		"node-fetch": "^2.6.0",
 		"prettier": "^1.17.1",
 		"pro-download": "1.0.1",
-		"stylelint": "^10.1.0",
-		"umi-plugin-ga": "^1.1.3",
-		"umi-plugin-pro": "^1.0.2",
-		"umi-types": "^0.5.0"
+		"stylelint": "^10.1.0"
 	},
 	"engines": {
 		"node": ">=10.0.0"

src/components/CopyBlock/index.jsx

-import { Icon, Popover, Typography } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
+import { Popover, Typography } from 'antd';
 import React, { useRef } from 'react';
 import { connect } from 'dva';
 import { isAntDesignPro } from '@/utils/utils';
@@ -63,7 +64,7 @@ export default connect(({ routing }) => ({
       getPopupContainer={dom => (divDom.current ? divDom.current : dom)}
     >
       <div className={styles['copy-block']} ref={divDom}>
-        <Icon type="download" />
+        <DownloadOutlined />
       </div>
     </Popover>
   );

src/components/GlobalHeader/AvatarDropdown.jsx

-import { Avatar, Icon, Menu, Spin } from 'antd';
+import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
+import { Avatar, Menu, Spin } from 'antd';
 import React from 'react';
 import { connect } from 'dva';
-import router from 'umi/router';
+import { history } from 'umi';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
 
@@ -21,7 +22,7 @@ class AvatarDropdown extends React.Component {
       return;
     }
 
-    router.push(`/account/${key}`);
+    history.push(`/account/${key}`);
   };
 
   render() {
@@ -36,20 +37,20 @@ class AvatarDropdown extends React.Component {
       <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
         {menu && (
           <Menu.Item key="center">
-            <Icon type="user" />
+            <UserOutlined />
             个人中心
           </Menu.Item>
         )}
         {menu && (
           <Menu.Item key="settings">
-            <Icon type="setting" />
+            <SettingOutlined />
             个人设置
           </Menu.Item>
         )}
         {menu && <Menu.Divider />}
 
         <Menu.Item key="logout">
-          <Icon type="logout" />
+          <LogoutOutlined />
           退出登录
         </Menu.Item>
       </Menu>
@@ -57,7 +58,10 @@ class AvatarDropdown extends React.Component {
     return currentUser && currentUser.name ? (
       <HeaderDropdown overlay={menuHeaderDropdown}>
         <span className={`${styles.action} ${styles.account}`}>
-          <Avatar icon="user" style={{ backgroundColor: '#388bd8', marginRight: '10px' }} />
+          <Avatar
+            icon={<UserOutlined />}
+            style={{ backgroundColor: '#388bd8', marginRight: '10px' }}
+          />
           <span className={styles.name}>{currentUser.name}</span>
         </span>
       </HeaderDropdown>

src/components/GlobalHeader/RightContent.jsx

-import { Icon, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import React from 'react';
 import { connect } from 'dva';
 import Avatar from './AvatarDropdown';

src/components/HeaderSearch/index.jsx

-import { AutoComplete, Icon, Input } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { AutoComplete, Input } from 'antd';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';
@@ -112,7 +113,7 @@ export default class HeaderSearch extends Component {
           }
         }}
       >
-        <Icon type="search" key="Icon" />
+        <SearchOutlined key="Icon" />
         <AutoComplete
           key="AutoComplete"
           {...restProps}

src/components/NoticeIcon/index.jsx

-import { Badge, Icon, Spin, Tabs } from 'antd';
+import { BellOutlined } from '@ant-design/icons';
+import { Badge, Spin, Tabs } from 'antd';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import NoticeList from './NoticeList';
@@ -116,7 +117,7 @@ export default class NoticeIcon extends Component {
     const { visible } = this.state;
     const noticeButtonClass = classNames(className, styles.noticeButton);
     const notificationBox = this.getNotificationBox();
-    const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
+    const NoticeBellIcon = bell || <BellOutlined className={styles.icon} />;
     const trigger = (
       <span
         className={classNames(noticeButtonClass, {

src/layouts/BasicLayout.jsx

@@ -6,9 +6,10 @@
 /* eslint-disable no-underscore-dangle, no-confusing-arrow */
 import ProLayout from '@ant-design/pro-layout';
 import React, { useState, useEffect } from 'react';
-import Link from 'umi/link';
+import { Link } from 'umi';
 import { connect } from 'dva';
-import { Result, Button, Layout, Menu, Icon } from 'antd';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { Result, Button, Layout, Menu } from 'antd';
 import Authorized from '@/utils/Authorized';
 import RightContent from '@/components/GlobalHeader/RightContent';
 import { getAuthorityFromRouter } from '@/utils/utils';
@@ -76,7 +77,6 @@ const BasicLayout = props => {
   }; // get children authority
 
   const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/');
-
   const _menu = param =>
     param.map(v =>
       v.children && v.children.length ? (
@@ -84,7 +84,7 @@ const BasicLayout = props => {
           key={v.path}
           title={
             <span>
-              <Icon type={v.icon} />
+              <LegacyIcon type={v.icon} />
               <span>{v.name}</span>
             </span>
           }
@@ -94,7 +94,7 @@ const BasicLayout = props => {
       ) : (
         <Menu.Item key={v.path}>
           <Link to={v.path}>
-            <Icon type={v.icon} />
+            <LegacyIcon type={v.icon} />
             <span className="nav-text">{v.name}</span>
           </Link>
         </Menu.Item>
@@ -130,13 +130,18 @@ const BasicLayout = props => {
         }
         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
       }}
-      breadcrumbRender={(routers = []) => [
-        {
-          path: '/',
-          breadcrumbName: '首页',
-        },
-        ...routers,
-      ]}
+      // eslint-disable-next-line consistent-return
+      breadcrumbRender={(routers = []) => {
+        if (routers.length) {
+          return [
+            {
+              path: '/',
+              breadcrumbName: '首页',
+            },
+            ...routers,
+          ];
+        }
+      }}
       itemRender={(route, params, routes, paths) => {
         const first = routes.indexOf(route) === 0;
         return first ? (

src/models/user.js

-import { queryCurrent, query as queryUsers, homeInfo } from '@/services/user';
+import { queryCurrent, queryUsers, homeInfo } from '@/services/user';
 import localStorage from '@/utils/localStorage';
 
 const UserModel = {

src/pages/404.jsx

 import { Button, Result } from 'antd';
 import React from 'react';
-import router from 'umi/router'; // 这里应该使用 antd 的 404 result 组件，
+import { history } from 'umi'; // 这里应该使用 antd 的 404 result 组件，
 // 但是还没发布，先来个简单的。
 
 const NoFoundPage = () => (
@@ -9,7 +9,7 @@ const NoFoundPage = () => (
     title="404"
     subTitle="Sorry, the page you visited does not exist."
     extra={
-      <Button type="primary" onClick={() => router.push('/')}>
+      <Button type="primary" onClick={() => history.push('/')}>
         Back Home
       </Button>
     }

src/pages/AfterSaleManage/PassAudit/index.jsx

@@ -155,7 +155,7 @@ export default () => {
       <ProTable
         columns={columns}
         request={params => searchList(params, 2)}
-        rowKey="serviceNo"
+        rowKey={r => r.serviceNo}
         pagination={{
           pagesSize: 20,
         }}

src/pages/AfterSaleManage/Pending/index.jsx

@@ -102,7 +102,7 @@ export default () => {
       <ProTable
         columns={columns}
         request={params => searchList(params, 1)}
-        rowKey="serviceNo"
+        rowKey={r => r.serviceNo}
         pagination={{
           pagesSize: 20,
         }}

src/pages/AfterSaleManage/components/auditModal.jsx

 import React from 'react';
-import { Modal, Form, Input, Cascader, notification, InputNumber } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, Cascader, notification, InputNumber } from 'antd';
 import { shopAudit } from '../services';
 
 const FormItem = Form.Item;

src/pages/AfterSaleManage/components/rejectModal.jsx

 import React from 'react';
-import { Modal, Form, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, notification } from 'antd';
 import { shopCheck } from '../services';
 
 const FormItem = Form.Item;

src/pages/GoodsManage/SearchForm/index.jsx

-import { Button, Form, Input, Select, notification, Upload, Cascader, InputNumber } from 'antd';
+import { Form, Button, Input, Select, notification, Upload, Cascader, InputNumber } from 'antd';
 import React, { Component } from 'react';
 import { connect } from 'dva';
 import styles from '../style.less';
@@ -10,13 +10,15 @@ const { Option } = Select;
   goodsManage,
 }))
 class goodsManage extends Component {
+  formRef = React.createRef();
+
   componentDidMount() {
     this.props.onRef(this);
     this.handleSearch();
   }
 
   getFieldsValue() {
-    const { form } = this.props;
+    const form = this.formRef.current;
     return form.getFieldsValue();
   }
 
@@ -24,8 +26,17 @@ class goodsManage extends Component {
     this.props.handleSearch(1);
   };
 
+  valueMin = value => {
+    const { getFieldValue, setFieldsValue } = this.formRef.current;
+    const minVal = getFieldValue('supplyPriceMin');
+    if (minVal && minVal > value) {
+      setFieldsValue({ supplyPriceMax: minVal });
+    }
+  };
+
   onReset = () => {
-    this.props.form.resetFields();
+    const form = this.formRef.current;
+    form.resetFields();
     this.props.onReset();
   };
 
@@ -38,14 +49,10 @@ class goodsManage extends Component {
   };
 
   render() {
-    const {
-      form: { getFieldDecorator, getFieldValue },
-      treeData,
-    } = this.props;
+    const { treeData } = this.props;
     const selectW = { width: 250 };
     const iptNumWidth = { width: 118 };
     const that = this;
-
     // const uploadProps = {
     //   name: 'file',
     //   async customRequest(info) {
@@ -74,66 +81,53 @@ class goodsManage extends Component {
 
     const filterOption = (input, op) => op.props.children.includes(input);
     return (
-      <Form name="horizontal_login" layout="inline" className={styles.searchForm}>
-        <FormItem label="SKU编码">
-          {getFieldDecorator('skuId', {})(
-            <Input placeholder="请输入SKU编码" allowClear style={selectW} />,
-          )}
+      <Form
+        ref={this.formRef}
+        name="horizontal_login"
+        layout="inline"
+        className={styles.searchForm}
+      >
+        <FormItem label="SKU编码" name="skuId">
+          <Input placeholder="请输入SKU编码" allowClear style={selectW} />
         </FormItem>
-        <FormItem label="商品名称">
-          {getFieldDecorator('skuName', {})(
-            <Input placeholder="请输入商品名称" allowClear style={selectW} />,
-          )}
+        <FormItem label="商品名称" name="skuName">
+          <Input placeholder="请输入商品名称" allowClear style={selectW} />
         </FormItem>
-        <FormItem label="类目">
-          {getFieldDecorator('productCategoryId', {})(
-            <Cascader
-              placeholder="请选择类目"
-              style={selectW}
-              showSearch
-              changeOnSelect
-              fieldNames={{ label: 'name', value: 'id', children: 'children' }}
-              options={treeData}
-            />,
-          )}
+        <FormItem label="类目" name="productCategoryId">
+          <Cascader
+            placeholder="请选择类目"
+            style={selectW}
+            showSearch
+            changeOnSelect
+            fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+            options={treeData}
+          />
         </FormItem>
-        <FormItem label="审核状态">
-          {getFieldDecorator('state', {})(
-            <Select
-              style={selectW}
-              placeholder="请选择审核状态"
-              allowClear
-              filterOption={filterOption}
-            >
-              {stateList?.map(item => (
-                <Option key={item.value} value={item.value}>
-                  {item.label}
-                </Option>
-              ))}
-            </Select>,
-          )}
+        <FormItem label="审核状态" name="state">
+          <Select
+            style={selectW}
+            placeholder="请选择审核状态"
+            allowClear
+            filterOption={filterOption}
+          >
+            {stateList?.map(item => (
+              <Option key={item.value} value={item.value}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
         </FormItem>
         <FormItem label="供货价区间">
-          <FormItem className={styles.iptNumRight}>
-            {getFieldDecorator('supplyPriceMin', {})(
-              <InputNumber placeholder="请输入" style={iptNumWidth} />,
-            )}
+          <FormItem name="supplyPriceMin" className={styles.iptNumRight} noStyle>
+            <InputNumber placeholder="请输入" style={iptNumWidth} />
           </FormItem>
           <span>--</span>
-          <FormItem className={styles.iptNumRight}>
-            {getFieldDecorator('supplyPriceMax', {})(
-              <InputNumber
-                style={iptNumWidth}
-                placeholder="请输入"
-                min={getFieldValue('supplyPriceMin')}
-              />,
-            )}
+          <FormItem name="supplyPriceMax" className={styles.iptNumRight} noStyle>
+            <InputNumber style={iptNumWidth} placeholder="请输入" onChange={this.valueMin} />
           </FormItem>
         </FormItem>
-        <FormItem label="第三方SKU编码">
-          {getFieldDecorator('thirdSkuNo', {})(
-            <Input placeholder="请输入第三方SKU编码" allowClear style={selectW} />,
-          )}
+        <FormItem name="thirdSkuNo" label="第三方SKU编码">
+          <Input placeholder="请输入第三方SKU编码" allowClear style={selectW} />
         </FormItem>
         <FormItem className={styles.queryBtn}>
           <Button onClick={() => this.handleSearch()} type="primary" className={styles.button}>
@@ -175,4 +169,4 @@ class goodsManage extends Component {
   }
 }
 
-export default Form.create()(goodsManage);
+export default goodsManage;

src/pages/GoodsManage/TempleatModal/index.jsx

-import { Form, Modal, Input, Select, Cascader, Tag, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, Select, Cascader, Tag, notification } from 'antd';
 import { da } from 'date-fns/locale';
 import React, { useState, useEffect } from 'react';
 import { getTemplate } from '../service';

src/pages/GoodsManage/UpdateStock/index.jsx

-import { Modal, InputNumber, notification, Form, Input, Radio } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, InputNumber, notification, Input, Radio } from 'antd';
 import React from 'react';
 import { updateStock } from '../service';
 

src/pages/GoodsManage/createModal/batchSetting.jsx

@@ -8,12 +8,14 @@ const { Option } = Select;
 const FormItem = Form.Item;
 
 class goodsManage extends Component {
+  formRef = React.createRef();
+
   componentDidMount() {
     this.props.onRef(this);
   }
 
   setFiled = flag => {
-    const { form } = this.props;
+    const form = this.formRef.current;
     if (flag === 'firstKeys') {
       form.setFieldsValue({ firstSpecValue: '' });
       return;
@@ -22,7 +24,8 @@ class goodsManage extends Component {
   };
 
   batchSetting = () => {
-    const { form, editData, isEdit } = this.props;
+    const { editData, isEdit } = this.props;
+    const form = this.formRef.current;
     const data = form.getFieldsValue();
     if (!data.firstSpecValue && !data.secondSpecValue) {
       editData.forEach(item => {
@@ -83,50 +86,41 @@ class goodsManage extends Component {
       isEdit,
       isService,
     } = this.props;
-    const { getFieldDecorator } = this.props.form;
     return (
-      <Form layout="inline" onSubmit={this.handleSubmit}>
-        <FormItem>
-          {getFieldDecorator('firstSpecValue', {})(
-            <Select allowClear style={{ width: 120 }} placeholder={firstSpesName}>
-              {firstSpes.length > 0 &&
-                firstSpes.map(
-                  item =>
-                    item &&
-                    typeof item === 'string' && (
-                      <Option key={item} value={item}>
-                        {item}
-                      </Option>
-                    ),
-                )}
-            </Select>,
-          )}
+      <Form layout="inline" ref={this.formRef}>
+        <FormItem name="firstSpecValue">
+          <Select allowClear style={{ width: 120 }} placeholder={firstSpesName}>
+            {firstSpes.length > 0 &&
+              firstSpes.map(
+                item =>
+                  item &&
+                  typeof item === 'string' && (
+                    <Option key={item} value={item}>
+                      {item}
+                    </Option>
+                  ),
+              )}
+          </Select>
         </FormItem>
-        <FormItem>
-          {getFieldDecorator('secondSpecValue', {})(
-            <Select allowClear style={{ width: 120 }} placeholder={secondSpesName}>
-              {secondSpecs.length &&
-                secondSpecs.map(
-                  item =>
-                    item &&
-                    typeof item === 'string' && (
-                      <Option key={item} value={item}>
-                        {item}
-                      </Option>
-                    ),
-                )}
-            </Select>,
-          )}
+        <FormItem name="secondSpecValue">
+          <Select allowClear style={{ width: 120 }} placeholder={secondSpesName}>
+            {secondSpecs.length &&
+              secondSpecs.map(
+                item =>
+                  item &&
+                  typeof item === 'string' && (
+                    <Option key={item} value={item}>
+                      {item}
+                    </Option>
+                  ),
+              )}
+          </Select>
         </FormItem>
-        <FormItem>
-          {getFieldDecorator('supplyPrice', {})(
-            <Input placeholder="供货价" style={{ width: 100 }} />,
-          )}
+        <FormItem name="supplyPrice">
+          <Input placeholder="供货价" style={{ width: 100 }} />
         </FormItem>
-        <FormItem>
-          {getFieldDecorator('marketPrice', {})(
-            <Input placeholder="市场价" style={{ width: 100 }} />,
-          )}
+        <FormItem name="marketPrice">
+          <Input placeholder="市场价" style={{ width: 100 }} />
         </FormItem>
         {/* <FormItem>
           {getFieldDecorator('salePrice', {})(
@@ -134,41 +128,35 @@ class goodsManage extends Component {
           )}
         </FormItem> */}
         {productType === 1 && (
-          <FormItem>
-            {getFieldDecorator('weight', {})(
-              <InputNumber
-                precision={3}
-                max={999999.999}
-                // eslint-disable-next-line radix
-                placeholder="重量"
-                style={{ width: 130 }}
-              />,
-            )}
+          <FormItem name="weight">
+            <InputNumber
+              precision={3}
+              max={999999.999}
+              // eslint-disable-next-line radix
+              placeholder="重量"
+              style={{ width: 130 }}
+            />
           </FormItem>
         )}
-        <FormItem>
-          {getFieldDecorator('productStock', {})(
+        <FormItem name="productStock">
+          <InputNumber
+            precision={0}
+            step={1}
+            // eslint-disable-next-line radix
+            formatter={val => parseInt(val, '10') || ''}
+            placeholder="库存"
+            style={{ width: 100 }}
+          />
+        </FormItem>
+        {productType === 1 && (
+          <FormItem name="productStockWarning">
             <InputNumber
+              placeholder="库存预警"
+              maxLength={5}
+              min={0}
               precision={0}
-              step={1}
-              // eslint-disable-next-line radix
-              formatter={val => parseInt(val, '10') || ''}
-              placeholder="库存"
               style={{ width: 100 }}
-            />,
-          )}
-        </FormItem>
-        {productType === 1 && (
-          <FormItem>
-            {getFieldDecorator('productStockWarning', {})(
-              <InputNumber
-                placeholder="库存预警"
-                maxLength={5}
-                min={0}
-                precision={0}
-                style={{ width: 100 }}
-              />,
-            )}
+            />
           </FormItem>
         )}
         <FormItem>
@@ -181,4 +169,4 @@ class goodsManage extends Component {
   }
 }
 
-export default Form.create()(goodsManage);
+export default goodsManage;

src/pages/GoodsManage/createModal/index.jsx

 /* eslint-disable no-param-reassign */
+import { Form } from '@ant-design/compatible';
+
+import '@ant-design/compatible/assets/index.css';
+import { MinusCircleOutlined, PlusOutlined, RestOutlined } from '@ant-design/icons';
 import {
   Modal,
   Table,
   Button,
-  Form,
   Select,
   Input,
-  Icon,
   Row,
   Col,
   Checkbox,
@@ -402,7 +404,7 @@ class goodsManage extends Component {
               initCascader: null,
             });
             this.props.form.resetFields();
-            this.BatchSetting.props.form.resetFields();
+            console.log(this.BatchSetting);
             return;
           }
           this.onCancel();
@@ -428,7 +430,7 @@ class goodsManage extends Component {
         productType: 1,
       },
       () => {
-        this.BatchSetting.props.form.resetFields();
+        this.BatchSetting.formRef.current.resetFields();
         this.props.form.resetFields();
         this.props.onCancel();
       },
@@ -448,7 +450,7 @@ class goodsManage extends Component {
       productType: event.target.value,
     });
     this.props.form.resetFields();
-    this.BatchSetting.props.form.resetFields();
+    this.BatchSetting.formRef.current.resetFields();
   };
 
   validateToInputName = (rule, value, callback) => {
@@ -580,7 +582,7 @@ class goodsManage extends Component {
                         },
                       ],
                     })(
-                      <SuperSelect
+                      <Select
                         allowClear
                         showSearch
                         style={{ width: 280 }}
@@ -594,7 +596,7 @@ class goodsManage extends Component {
                               {item.name}
                             </Option>
                           ))}
-                      </SuperSelect>,
+                      </Select>,
                     )}
                   </FormItem>
                 </Col>
@@ -683,7 +685,7 @@ class goodsManage extends Component {
                     >
                       {this.state.specList.length &&
                         this.state.specList.map(item => (
-                          <Option key={item.specId} value={item.specId}>
+                          <Option value={item.specId} key={item.specId}>
                             {item.specName}
                           </Option>
                         ))}
@@ -724,9 +726,8 @@ class goodsManage extends Component {
                       />,
                     )}
                     {firstKeys.length > 0 ? (
-                      <Icon
+                      <MinusCircleOutlined
                         className="dynamic-delete-button"
-                        type="minus-circle-o"
                         onClick={() => this.remove('firstKeys', k)}
                       />
                     ) : null}
@@ -739,7 +740,7 @@ class goodsManage extends Component {
                     onClick={() => this.add('firstKeys')}
                     style={{ textAlign: 'center' }}
                   >
-                    <Icon type="plus" />
+                    <PlusOutlined />
                   </Button>
                 </FormItem>
               </Row>
@@ -788,9 +789,8 @@ class goodsManage extends Component {
                       validateTrigger: ['onChange', 'onBlur'],
                     })(<Input key={k} style={{ width: '60%', marginRight: 8 }} />)}
                     {secondKeys.length > 0 ? (
-                      <Icon
+                      <MinusCircleOutlined
                         className="dynamic-delete-button"
-                        type="minus-circle-o"
                         onClick={() => this.remove('secondKeys', k)}
                       />
                     ) : null}
@@ -803,7 +803,7 @@ class goodsManage extends Component {
                     style={{ textAlign: 'center' }}
                     disabled={isJDGoods}
                   >
-                    <Icon type="plus" />
+                    <PlusOutlined />
                   </Button>
                 </FormItem>
               </Row>
@@ -836,7 +836,7 @@ class goodsManage extends Component {
             <Row>
               <Table
                 bordered
-                rowKey="id"
+                rowKey={r => r.thirdSkuNo}
                 pagination={false}
                 scroll={{ y: 300, x: 1200 }}
                 dataSource={this.state.editData}
@@ -862,8 +862,7 @@ class goodsManage extends Component {
                 size="small"
                 onClick={this.deleteImg}
                 style={{ marginTop: '10px' }}
-                icon="rest"
-                disabled={isService}
+                icon={<RestOutlined />}
               >
                 图片批量删除
               </Button>

src/pages/GoodsManage/createModal/skuNameChange.jsx

-import { Form, Input, Modal } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Input, Modal } from 'antd';
 import React, { Component } from 'react';
 
 const { TextArea } = Input;

src/pages/GoodsManage/index.jsx

-import { Card, Form, Pagination, Table, notification, Drawer, Spin } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Card, Pagination, Table, notification, Drawer, Spin } from 'antd';
 import React, { Component } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { connect } from 'dva';

src/pages/GoodsManage/style.less

@@ -51,7 +51,7 @@
 .searchForm {
   :global {
     .ant-form-item-label {
-      width: 120px;
+      line-height: 40px;
     }
   }
 }

src/pages/afterSale/components/audit.jsx

 import React from 'react';
-import { Modal, Row, Col, Input, Form, Select, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Row, Col, Input, Select, notification } from 'antd';
 import { audit } from '../appeal/services';
 
 const { TextArea } = Input;

src/pages/afterSaleAddress/form.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Select, Input, notification } from 'antd';
 import _ from 'lodash';
 import { addrQuery, update } from './services';
 

src/pages/afterSaleAddress/index.jsx

@@ -63,7 +63,9 @@ const TableList = () => {
       renderFormItem: () => (
         <Select onChange={changeSupplier} value={shopId} allowClear>
           {supplierList.map(item => (
-            <Option value={item.id}>{item.name}</Option>
+            <Option value={item.id} key={item.id}>
+              {item.name}
+            </Option>
           ))}
         </Select>
       ),
@@ -167,7 +169,7 @@ const TableList = () => {
         columns={columns}
         params={{ shopId }}
         request={res => query(res)}
-        rowKey="id"
+        rowKey={r => r.shopId}
         bordered
         scroll={{ x: 1500 }}
         toolBarRender={() => [

src/pages/cancelBillManage/PassAudit.jsx

@@ -103,7 +103,7 @@ export default () => {
         key="passaudit"
         columns={columns}
         request={params => query(params, 2)}
-        rowKey="skuId"
+        rowKey={r => r.orderId}
         pagination={{
           pagesSize: 20,
         }}

src/pages/cancelBillManage/components/auditModal.jsx

 import React from 'react';
-import { Modal, Form, Input, Cascader, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, Cascader, notification } from 'antd';
 import { shopAudit } from '../service';
 
 const FormItem = Form.Item;

src/pages/cancelBillManage/components/detailTable.jsx

@@ -23,7 +23,13 @@ export default props => {
   ];
   return (
     <Modal title="订单详情" visible={visible} onCancel={handleCancel} footer={null} width={800}>
-      <Table dataSource={dataSource} columns={columns} key="skuName" pagination={false} bordered />
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        key={r => r.orderId}
+        pagination={false}
+        bordered
+      />
     </Modal>
   );
 };

src/pages/cancelBillManage/components/rejectModal.jsx

 import React from 'react';
-import { Modal, Form, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, notification } from 'antd';
 import { shopCheck } from '../service';
 
 const FormItem = Form.Item;

src/pages/components/sortablUpload/index.jsx

-import { Upload, Icon, Modal, notification } from 'antd';
+import { DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
+import { Upload, Modal, notification } from 'antd';
 import React from 'react';
 import { ReactSortable } from 'react-sortablejs';
 import lodash from 'lodash';
@@ -152,7 +153,7 @@ class PicturesWall extends React.Component {
     const { previewVisible, previewImage, fileList } = this.state;
     const uploadButton = (
       <div>
-        <Icon type="plus" />
+        <PlusOutlined />
         <div className="ant-upload-text">上传图片</div>
       </div>
     );
@@ -213,18 +214,14 @@ class PicturesWall extends React.Component {
                   </div>
                   {this.state.activeImgIndex === index && (
                     <div className={styles.mask}>
-                      <Icon
-                        type="eye"
+                      <EyeOutlined
                         className={styles.maskIcon}
                         onClick={() => this.handlePreview(item)}
                       />
-                      {!isDisabled && (
-                        <Icon
-                          type="delete"
-                          className={styles.maskIcon}
-                          onClick={() => this.onRemoveImg(item)}
-                        />
-                      )}
+                      <DeleteOutlined
+                        className={styles.maskIcon}
+                        onClick={() => this.onRemoveImg(item)}
+                      />
                     </div>
                   )}
                 </div>

src/pages/components/upload.jsx

-import { Upload, Icon, Modal, message } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { Upload, Modal, message } from 'antd';
 import React from 'react';
 import config from '../../../config/env.config';
 import { qiniuToken } from '@/services/qiniu';
@@ -88,7 +89,7 @@ class PicturesWall extends React.Component {
     const { previewVisible, previewImage, fileList } = this.state;
     const uploadButton = (
       <div>
-        <Icon type="plus" />
+        <PlusOutlined />
         <div className="ant-upload-text">上传图片</div>
       </div>
     );

src/pages/distributionArea/addArea/index.jsx

-import { Form, Modal, Input, Select, Cascader, Tag, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, Select, Cascader, Tag, notification } from 'antd';
 import React, { useState, useEffect } from 'react';
-import RcTreeSelect from 'rc-tree-select';
 import { el } from 'date-fns/locale';
 import { areaList, getAddTemplate, forbiddenAddress } from '../services';
 
@@ -9,13 +10,12 @@ const { Option } = Select;
 const AddAreaModal = props => {
   const {
     visible,
-    form: { getFieldDecorator, validateFields, resetFields },
+    form: { getFieldDecorator, validateFields, resetFields, setFieldsValue },
     templateData,
   } = props;
   const [addList, setAddList] = useState([]);
   const [selectedList, setSelectedList] = useState([]);
   const [selected, setSelect] = useState([]);
-  const a = [];
   const formItemLayout = {
     labelCol: {
       span: 6,
@@ -59,14 +59,13 @@ const AddAreaModal = props => {
           value: itemData.addrId,
           addressId: itemData.addrId,
           addressLevel: itemData.addrLevel,
-          // isLeaf: itemData.addrLevel === 4,
           isLeaf: false,
         }),
       );
       targetOption.children = newData;
+      targetOption.loading = false;
+      setAddList([...addList]);
     }
-    targetOption.loading = false;
-    setAddList([...addList]);
   };
   // 限制区域删除
   const preventDefault = val => {
@@ -119,45 +118,30 @@ const AddAreaModal = props => {
     });
   };
   // 判断是否重复
-  const getChilds = (data, { addressId }) => {
-    let flag = true;
-    const arr = [];
-    function judgeChildren(dat) {
-      // eslint-disable-next-line no-plusplus
-      for (let i = 0; i < dat.length; i++) {
-        const item = dat[i];
-        if (!flag) {
-          return;
-        }
-        if (+item.addressId === +addressId) {
-          flag = false;
-        }
-        // if (item.children && item.children.length) {
-        //   judgeChildren(item.children);
-        // }
-      }
-    }
-    judgeChildren(data);
-    return flag;
+  const getChilds = select => {
+    const reslutData = selectedList.filter(
+      item =>
+        !select.addressName.includes(item.addressName) &&
+        !item.addressName.includes(select.addressName),
+    );
+    reslutData.push(select);
+    return reslutData;
   };
+
   const onPopupVisibleChange = labels => {
     if (!labels && selected?.length) {
       const select = selected.slice(-1)[0];
       const arr = selected.map(x => x.label);
       select.addressName = arr.join('/');
-      const staust = getChilds(selectedList, select);
-      if (staust) {
-        selectedList.push(select);
-        // 用中文字符排序
-        const resultArray = selectedList.sort((param1, param2) =>
-          param1.addressName.localeCompare(param2.addressName, 'zh'),
-        );
-        setSelectedList([...resultArray]);
-        setSelect([]);
-      }
+      const reslutData = getChilds(select);
+      // 用中文字符排序
+      const resultArray = reslutData.sort((param1, param2) =>
+        param1.addressName.localeCompare(param2.addressName, 'zh'),
+      );
+      setSelectedList([...resultArray]);
+      setSelect([]);
     }
   };
-
   useEffect(() => {
     getAreaList();
     if (props.templateData) {
@@ -189,9 +173,8 @@ const AddAreaModal = props => {
               loadData={loadData}
               onChange={(val, label) => onChange(val, label)}
               allowClear={false}
-              // expandTrigger="hover"
               changeOnSelect
-              onPopupVisibleChange={onPopupVisibleChange}
+              onDropdownVisibleChange={onPopupVisibleChange}
             />,
           )}
           {selectedList?.map((selItem, selIndex) => (

src/pages/orderManage/batchDelivery/index.jsx

@@ -9,8 +9,8 @@ import {
   downUploadeOrder,
 } from '../pendingDeliveryOrder/service';
 
-const TableList = () => {
-  const actionRef = useRef();
+const TableList = ref => {
+  const actionRef = useRef(null);
   const columns = [
     {
       title: '批次号',

src/pages/orderManage/pendingDeliveryOrder/components/LogisticsForm.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Input, Icon, Card, notification } from 'antd';
+import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Select, Input, Card, notification } from 'antd';
 import style from '../index.less';
 import { updateExpress } from '../service';
 
@@ -160,8 +163,8 @@ const LogisticsForm = props => {
             </Card>
           ))}
         <div className={style.logistics}>
-          <Icon className={style.logisticsIcon} onClick={addForm} type="plus-circle" />
-          <Icon className={style.logisticsIcon} onClick={rmForm} type="minus-circle" />
+          <PlusCircleOutlined className={style.logisticsIcon} onClick={addForm} />
+          <MinusCircleOutlined className={style.logisticsIcon} onClick={rmForm} />
         </div>
       </Form>
     </Modal>

src/pages/reconciliation/detail/modal.jsx

 import React from 'react';
-import { Modal, Form, Select, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Select, Input, notification } from 'antd';
 import { updateStatus } from '../services';
 
 const FormItem = Form.Item;

src/pages/reconciliation/form.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Select, Input, notification } from 'antd';
 import _ from 'lodash';
 import { update } from './services';
 import { addrQuery } from '../afterSaleAddress/services';

src/pages/reconciliation/index.jsx

@@ -2,7 +2,7 @@ import { Button, Select } from 'antd';
 import React, { useRef, useEffect, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable from '@ant-design/pro-table';
-import Link from 'umi/link';
+import { Link } from 'umi';
 import styles from './index.less';
 import { query, supplier, downDetail } from './services';
 
@@ -63,7 +63,9 @@ const TableList = () => {
       renderFormItem: () => (
         <Select onChange={changeSupplier} value={shopId} allowClear>
           {supplierList.map(item => (
-            <Option value={item.id}>{item.name}</Option>
+            <Option value={item.id} key={item.id}>
+              {item.name}
+            </Option>
           ))}
         </Select>
       ),
@@ -149,7 +151,7 @@ const TableList = () => {
         columns={columns}
         params={{ shopId }}
         request={res => query(res)}
-        rowKey="id"
+        rowKey={r => r.batchNo}
         bordered
         scroll={{ x: 1500 }}
         search={{

src/pages/settleManage/index.jsx

@@ -150,8 +150,9 @@ export default () => {
     },
     {
       title: '操作',
-      valueType: 'option',
-      width: 280,
+      dataIndex: 'action',
+      hideInSearch: true,
+      width: 200,
       fixed: 'right',
       render: (_, r) => tableRenderBtn(r),
     },
@@ -165,7 +166,7 @@ export default () => {
         className={style.table}
         request={query}
         search={{ collapsed: false }}
-        rowKey="id"
+        rowKey={r => r.settlementNo}
         pagination={{
           defaultCurrent: 1,
         }}

src/pages/settleManage/uploadModal/index.jsx

 import React, { useRef, useState, useEffect } from 'react';
-import { Modal, Button, Tabs, Upload, notification, Icon } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { Modal, Button, Tabs, Upload, notification } from 'antd';
 import styles from '../style.less';
 import { uploadFile, uploadPic } from '../service';
 import UploadC from '../../components/upload';
@@ -87,7 +88,7 @@ export default props => {
           </a>
           <Dragger {...uploadProps} className={styles.clearfloat}>
             <p>
-              <Icon type="upload" />
+              <UploadOutlined />
             </p>
             <p>点击上传附件</p>
           </Dragger>

src/pages/user/login/components/Login/LoginItem.jsx

-import { Button, Col, Form, Input, Row } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Button, Col, Input, Row } from 'antd';
 import React, { Component } from 'react';
 import omit from 'omit.js';
 import ItemMap from './map';

src/pages/user/login/components/Login/LoginSubmit.jsx

-import { Button, Form } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Button } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
 import styles from './index.less';

src/pages/user/login/components/Login/index.jsx

-import { Form, Tabs } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Tabs } from 'antd';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import LoginContext from './LoginContext';

src/pages/user/login/components/Login/map.jsx

-import { Icon } from 'antd';
+import { LockOutlined, MailOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
 import React from 'react';
 import styles from './index.less';
 
@@ -7,7 +7,7 @@ export default {
     props: {
       size: 'large',
       id: 'userName',
-      prefix: <Icon type="user" className={styles.prefixIcon} />,
+      prefix: <UserOutlined className={styles.prefixIcon} />,
       placeholder: 'admin',
     },
     rules: [
@@ -20,7 +20,7 @@ export default {
   Password: {
     props: {
       size: 'large',
-      prefix: <Icon type="lock" className={styles.prefixIcon} />,
+      prefix: <LockOutlined className={styles.prefixIcon} />,
       type: 'password',
       id: 'password',
       placeholder: '888888',
@@ -35,7 +35,7 @@ export default {
   Mobile: {
     props: {
       size: 'large',
-      prefix: <Icon type="mobile" className={styles.prefixIcon} />,
+      prefix: <MobileOutlined className={styles.prefixIcon} />,
       placeholder: 'mobile number',
     },
     rules: [
@@ -52,7 +52,7 @@ export default {
   Captcha: {
     props: {
       size: 'large',
-      prefix: <Icon type="mail" className={styles.prefixIcon} />,
+      prefix: <MailOutlined className={styles.prefixIcon} />,
       placeholder: 'captcha',
     },
     rules: [