feat: 添加超出折叠显示

src/pages/GoodsManage/createModal/index.jsx

@@ -2,7 +2,13 @@
 import { Form } from '@ant-design/compatible';
 
 import '@ant-design/compatible/assets/index.css';
-import { MinusCircleOutlined, PlusOutlined, RestOutlined } from '@ant-design/icons';
+import {
+  MinusCircleOutlined,
+  PlusOutlined,
+  RestOutlined,
+  DownOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
 import {
   Modal,
   Table,
@@ -234,7 +240,9 @@ class goodsManage extends Component {
   treeChange = value => {
     const cid = value[value.length - 1];
     this.setState({ categoryId: cid, initCascader: value });
+    if (value.length === 3) {
       this.getAttribute(cid);
+    }
   };
 
   remove = (flag, k) => {
@@ -842,6 +850,10 @@ class goodsManage extends Component {
             {/* 商品属性 */}
             <Card className={styles.card} bordered={false}>
               <div className={styles.cardTitle}>商品属性</div>
+              <div
+                className={styles.attrbox + (this.state.isMore ? styles.attrboxMore : '')}
+                more={this.state.isMore}
+              >
                 <Row>
                   {this.state.categoryAttrs.length > 0 &&
                     this.state.categoryAttrs.map((k, i) => (
@@ -892,6 +904,22 @@ class goodsManage extends Component {
                       </Col>
                     ))}
                 </Row>
+              </div>
+              {this.state.categoryAttrs.length > 12 && (
+                <div>
+                  <Button
+                    type="link"
+                    onClick={() =>
+                      this.setState(state => ({
+                        isMore: !state.isMore,
+                      }))
+                    }
+                  >
+                    {this.state.isMore ? '收起' : '展示更多'}
+                    {this.state.isMore ? <UpOutlined /> : <DownOutlined />}
+                  </Button>
+                </div>
+              )}
               {skuOldAttr.length > 0 && (
                 <div>
                   <Row>注：以下商品属性已失效，请使用新的属性</Row>

src/pages/GoodsManage/service.js

@@ -87,6 +87,15 @@ export async function categoryList() {
     prefix: goodsApi,
   });
 }
+/**
+ * 商品分类
+ * type 商品类型：1-实物类，2-虚拟类，4-服务类
+ * */
+export async function apiCategoryListType(type) {
+  return request.get(`/product/category/getByProductType/${type}`, {
+    prefix: goodsApi,
+  });
+}
 
 // 批量修改
 export async function uploadFile(file) {

src/pages/GoodsManage/style.less

@@ -119,3 +119,10 @@
   color: #1890ff;
   cursor: pointer;
 }
+.attrbox {
+  max-height: 384px;
+  overflow: hidden;
+}
+.attrboxMore {
+  max-height: max-content;
+}