kmkf-work-order-service-component 0.5.0-alpha.1 → 0.5.0-alpha.10

package/dist/esm/FormRender/index.js

@@ -298,7 +298,8 @@ var FormRender = function FormRender(props, ref) {
                 };
               }
 
-              console.debug('增加数据参数', _params);
+              console.debug('增加数据参数', _params); // return;
+
               _context.next = 33;
               return addWorkOrder(_params);
 
@@ -376,7 +377,7 @@ var FormRender = function FormRender(props, ref) {
 
 
   var queryReplaceCount = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(componentValue) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(componentValue, templateDetail) {
       var needCheckComponentList, params, _yield$replaceCheck, resultList, resultParams;
 
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
@@ -426,13 +427,13 @@ var FormRender = function FormRender(props, ref) {
       }, _callee2);
     }));
 
-    return function queryReplaceCount(_x3) {
+    return function queryReplaceCount(_x3, _x4) {
       return _ref3.apply(this, arguments);
     };
   }(); //自动返填重复校验
 
 
-  var orderBackReplace = function orderBackReplace(value) {
+  var orderBackReplace = function orderBackReplace(value, templateDetail) {
     var tradeId = value.tradeId,
         buyer = value.buyer,
         receiveMobile = value.receiveMobile,
@@ -444,7 +445,7 @@ var FormRender = function FormRender(props, ref) {
       receiveMobile: receiveMobile,
       alipayAccount: alipayAccount,
       expressLogisticsCode: expressLogisticsCode
-    });
+    }, templateDetail);
   }; // 切换模板
 
 
@@ -495,12 +496,14 @@ var FormRender = function FormRender(props, ref) {
 
             case 11:
               _templateDetail = _context3.sent;
-              setTemplateDetail(_templateDetail.data);
+              _context3.next = 14;
+              return setTemplateDetail(_templateDetail.data);
+
+            case 14:
               setWorkOrderDetail(_workOrderDetail.data);
 
               if (workOrderId) {
                 transData = calcWorkOrderList([(_workOrderDetail3 = _workOrderDetail) === null || _workOrderDetail3 === void 0 ? void 0 : _workOrderDetail3.data], _templateDetail === null || _templateDetail === void 0 ? void 0 : (_templateDetail$data = _templateDetail.data) === null || _templateDetail$data === void 0 ? void 0 : _templateDetail$data.componentDtoList);
-                console.log(transData);
                 form.setFieldsValue(_objectSpread(_objectSpread({}, get(transData, '0', {})), {}, {
                   shopId: shopId,
                   shopName: record.shopName,
@@ -508,6 +511,7 @@ var FormRender = function FormRender(props, ref) {
                   created: record.created,
                   processTime: record.processTime
                 }));
+                orderBackReplace(transData, _templateDetail.data);
               } else {
                 //获取一些默认数据
                 jsonMap = _templateDetail === null || _templateDetail === void 0 ? void 0 : (_templateDetail$data2 = _templateDetail.data) === null || _templateDetail$data2 === void 0 ? void 0 : _templateDetail$data2.componentDtoList.reduce(function (prv, next) {
@@ -544,28 +548,28 @@ var FormRender = function FormRender(props, ref) {
 
               antFormEl = document.getElementsByClassName('ant-form');
               (antFormEl === null || antFormEl === void 0 ? void 0 : antFormEl.length) > 0 && set(antFormEl, '0.scrollTop', 0);
-              _context3.next = 23;
+              _context3.next = 24;
               break;
 
-            case 20:
-              _context3.prev = 20;
+            case 21:
+              _context3.prev = 21;
               _context3.t0 = _context3["catch"](2);
               console.error('获取模板信息错误', _context3.t0);
 
-            case 23:
-              _context3.prev = 23;
+            case 24:
+              _context3.prev = 24;
               setLoading(false);
-              return _context3.finish(23);
+              return _context3.finish(24);
 
-            case 26:
+            case 27:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[2, 20, 23, 26]]);
+      }, _callee3, null, [[2, 21, 24, 27]]);
     }));
 
-    return function queryDetail(_x4) {
+    return function queryDetail(_x5) {
       return _ref5.apply(this, arguments);
     };
   }();
@@ -622,7 +626,7 @@ var FormRender = function FormRender(props, ref) {
               return _context4.abrupt("return");
 
             case 3:
-              queryReplaceCount(_defineProperty({}, type, value));
+              queryReplaceCount(_defineProperty({}, type, value), templateDetail);
 
               if (type === 'tradeId' || type === 'enterprisePaymentTid') {
                 changeHandle(value);
@@ -636,7 +640,7 @@ var FormRender = function FormRender(props, ref) {
       }, _callee4);
     }));
 
-    return function componentOnBlur(_x5, _x6) {
+    return function componentOnBlur(_x6, _x7) {
       return _ref6.apply(this, arguments);
     };
   }(); // 切换店铺
@@ -648,13 +652,48 @@ var FormRender = function FormRender(props, ref) {
     setShopId(val); // 清空表单字段
 
     var needClearFormFields = get(templateDetail, 'componentDtoList', []).reduce(function (cur, nxt) {
-      if (['ITEM_SELECT_THIRD', 'STATUS', 'ITEM_SELECT', 'ITEM_ID', 'ITEM_ENCODE'].includes(nxt === null || nxt === void 0 ? void 0 : nxt.workOrderComponentType)) {
+      if (['ITEM_SELECT_THIRD', 'STATUS', 'ITEM_SELECT', 'ITEM_ID', 'ITEM_ENCODE', 'JST_LOGISTICS', 'JST_ITEM_SELECT_THIRD', 'JST_SUPPLY', 'JST_SEND_GOOD'].includes(nxt === null || nxt === void 0 ? void 0 : nxt.workOrderComponentType)) {
         cur.push(nxt === null || nxt === void 0 ? void 0 : nxt.uniqueKey);
       }
 
       return cur;
     }, []);
-    form.resetFields(needClearFormFields); //切换店铺时，判断是否有订单号 有订单号自动订单返填
+    form.resetFields(needClearFormFields); //如果有聚水潭组件 设置成初始值
+
+    var hasJst = get(templateDetail, 'componentDtoList', []).some(function (item) {
+      return ['JST_LOGISTICS', 'JST_SUPPLY', 'JST_SEND_GOOD'].includes(item.workOrderComponentType);
+    });
+
+    if (hasJst) {
+      var jstValue = get(templateDetail, 'componentDtoList', []).reduce(function (prv, next) {
+        switch (next.workOrderComponentType) {
+          case 'JST_LOGISTICS':
+            prv[next.uniqueKey] = [{
+              logisticsCompany: null,
+              logisticsCode: null
+            }];
+            break;
+
+          case 'JST_SUPPLY':
+            prv[next.uniqueKey] = [{
+              supplyId: null,
+              supplyName: null
+            }];
+            break;
+
+          case 'JST_SEND_GOOD':
+            prv[next.uniqueKey] = [{
+              sendName: '',
+              sendId: ''
+            }];
+            break;
+        }
+
+        return prv;
+      }, {});
+      form.setFieldsValue(jstValue);
+    } //切换店铺时，判断是否有订单号 有订单号自动订单返填
+
 
     var allValue = form.getFieldsValue();
     var tradeIdUniqueKey = templateDetail === null || templateDetail === void 0 ? void 0 : (_templateDetail$compo3 = templateDetail.componentDtoList.find(function (item) {

package/dist/esm/FormRender/index.less

@@ -134,7 +134,7 @@
 .tipBox {
   position: sticky;
   top: -24px;
-  z-index: 1;
+  z-index: 10;
   color: #e99d42;
   background-color: #fff;
 }

package/dist/esm/SingleShopWorkOrder/components/Card/index.less

@@ -108,7 +108,7 @@
   margin: 6px 0;
 
   .itemViewLeft {
-    min-width: 48px;
+    max-width: 58px;
     margin-right: 8px;
     color: rgba(0, 0, 0, 0.4);
     font-weight: normal;

package/dist/esm/SingleShopWorkOrder/components/CustomizeFormModal/index.js

@@ -465,14 +465,14 @@ var CustomizeFormModal = function CustomizeFormModal(props) {
 
 
   var orderBackReplace = function orderBackReplace(value) {
-    var tradeId = value.tradeId,
-        buyer = value.buyer,
+    var orderNo = value.orderNo,
+        buyerNick = value.buyerNick,
         receiveMobile = value.receiveMobile,
         alipayAccount = value.alipayAccount,
         expressLogisticsCode = value.expressLogisticsCode;
     queryReplaceCount({
-      tradeId: tradeId,
-      buyerNick: buyer === null || buyer === void 0 ? void 0 : buyer.buyerNick,
+      tradeId: orderNo,
+      buyerNick: buyerNick,
       receiveMobile: receiveMobile,
       alipayAccount: alipayAccount,
       expressLogisticsCode: expressLogisticsCode

package/dist/esm/SingleShopWorkOrder/components/CustomizeFormModal/index.less

@@ -128,7 +128,7 @@
 .tipBox {
   position: sticky;
   top: -24px;
-  z-index: 1;
+  z-index: 10;
   color: #e99d42;
   background-color: #fff;
 }

package/dist/esm/WorkOrder/components/CustomizeWorkOrderList/components/CustomizeWorkOrderCard/index.js

@@ -24,7 +24,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * @LastEditTime: 2022-11-24 13:59:27
  */
 import React from 'react';
-import { Divider } from 'antd';
+import { Divider, Tooltip } from 'antd';
 import moment from 'moment';
 import { get } from 'lodash';
 import { useDispatch } from 'react-redux';
@@ -55,24 +55,32 @@ var WorkOrderId = function WorkOrderId(props) {
     children: [/*#__PURE__*/_jsx("span", {
       className: "itemViewLeft",
       children: props.label
-    }), /*#__PURE__*/_jsxs("span", {
+    }), /*#__PURE__*/_jsx("span", {
       className: "itemViewRight",
-      children: [((_props$repeatValueLis = props.repeatValueList) === null || _props$repeatValueLis === void 0 ? void 0 : _props$repeatValueLis.length) > 0 && /*#__PURE__*/_jsx("img", {
-        src: repeatPng,
-        style: {
-          width: '16px'
-        },
-        alt: "",
-        onClick: function onClick() {
-          var _props$record, _props$record2;
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "item-view-work-order-id",
+        children: [((_props$repeatValueLis = props.repeatValueList) === null || _props$repeatValueLis === void 0 ? void 0 : _props$repeatValueLis.length) > 0 && /*#__PURE__*/_jsx("img", {
+          src: repeatPng,
+          style: {
+            width: '16px'
+          },
+          alt: "",
+          onClick: function onClick() {
+            var _props$record, _props$record2;
 
-          return handleOpenRepeatModal({
-            templateId: (_props$record = props.record) === null || _props$record === void 0 ? void 0 : _props$record.templateId,
-            workOrderUniqueKey: (_props$record2 = props.record) === null || _props$record2 === void 0 ? void 0 : _props$record2.id,
-            fieldList: props.repeatValueList
-          });
-        }
-      }), props.value]
+            return handleOpenRepeatModal({
+              templateId: (_props$record = props.record) === null || _props$record === void 0 ? void 0 : _props$record.templateId,
+              workOrderUniqueKey: (_props$record2 = props.record) === null || _props$record2 === void 0 ? void 0 : _props$record2.id,
+              fieldList: props.repeatValueList
+            });
+          }
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: props.value,
+          children: /*#__PURE__*/_jsx("span", {
+            children: props.value
+          })
+        })]
+      })
     })]
   });
 };

package/dist/esm/WorkOrder/components/CustomizeWorkOrderList/components/CustomizeWorkOrderCard/index.less

@@ -1,6 +1,6 @@
 .listOrderItemBox {
   margin-bottom: 8px;
-  padding: 14px 16px;
+  padding: 12px 8px;
   background-color: #fff;
   border: 1px solid #f2f2f2;
 }
@@ -108,7 +108,7 @@
   margin: 6px 0;
 
   .itemViewLeft {
-    min-width: 48px;
+    max-width: 58px;
     margin-right: 8px;
     color: rgba(0, 0, 0, 0.4);
     font-weight: normal;
@@ -120,5 +120,17 @@
     min-width: 0;
     color: rgba(0, 0, 0, 0.85);
     word-break: break-all;
+    .item-view-work-order-id {
+      display: flex;
+      align-items: center;
+      img {
+        margin-right: 8px;
+      }
+      span {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
   }
 }

package/dist/esm/WorkOrder/components/CustomizeWorkOrderList/components/RecordLog/index.js

@@ -200,7 +200,7 @@ var RecordLog = function RecordLog(props) {
                   },
                   children: [/*#__PURE__*/_jsxs("span", {
                     style: {
-                      minWidth: '70px',
+                      maxWidth: '66px',
                       flexShrink: 1
                     },
                     children: [child === null || child === void 0 ? void 0 : child.title, ":"]
@@ -222,7 +222,7 @@ var RecordLog = function RecordLog(props) {
               },
               children: [/*#__PURE__*/_jsxs("span", {
                 style: {
-                  minWidth: '70px',
+                  maxWidth: '66px',
                   flexShrink: 1
                 },
                 children: [item === null || item === void 0 ? void 0 : item.name, ":"]

package/dist/esm/WorkOrder/components/CustomizeWorkOrderList/components/TemplateList/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './index.less';
+declare type PropsType = {
+    templateList: {
+        name: string;
+        uniqueKey: string;
+    }[];
+    handleCreateWorkOrder: (p: string) => void;
+};
+declare const TemplateList: ({ templateList, handleCreateWorkOrder }: PropsType) => JSX.Element;
+export default TemplateList;

package/dist/esm/WorkOrder/components/CustomizeWorkOrderList/components/TemplateList/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'antd';
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var TemplateList = function TemplateList(_ref) {
+  var templateList = _ref.templateList,
+      handleCreateWorkOrder = _ref.handleCreateWorkOrder;
+  return /*#__PURE__*/_jsx("div", {
+    className: "template-button-list",
+    children: templateList.map(function (item) {
+      return /*#__PURE__*/_jsx(Button, {
+        className: "template-button",
+        onClick: function onClick() {
+          return handleCreateWorkOrder(item.uniqueKey);
+        },
+        children: item.name
+      });
+    })
+  });
+};
+
+export default TemplateList;

package/dist/esm/WorkOrder/components/CustomizeWorkOrderList/components/TemplateList/index.less

@@ -0,0 +1,17 @@
+.template-button-list {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 78px;
+  margin-bottom: 4px;
+  overflow-y: auto;
+  background-color: #fff;
+  &:hover {
+    position: absolute;
+    z-index: 1;
+    max-height: 160px;
+  }
+  .template-button {
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+}

package/dist/esm/WorkOrder/components/CustomizeWorkOrderList/index.js

@@ -32,6 +32,7 @@ import DealerSelectModal from "./components/DealerSelectModal";
 import StatusSelectModal from "./components/StatusSelectModal";
 import RepeatWorkOrderListModal from "./components/RepeatWorkOrderListModal";
 import RecordLog from "./components/RecordLog";
+import TemplateList from "./components/TemplateList";
 import emptyImg from "../../../common/imgs/empty.png";
 import { PlatForm } from "../../types";
 import { queryAllWorkOrderList, queryTemplateDetail } from "../../../model/servers/api";
@@ -138,7 +139,7 @@ var CustomizeWorkOrderList = function CustomizeWorkOrderList(_ref4) {
   var tabActive = _ref4.tabActive;
   var dispatch = useAppDispatch();
 
-  var _useState = useState(true),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
       setOpen = _useState2[1];
@@ -162,6 +163,9 @@ var CustomizeWorkOrderList = function CustomizeWorkOrderList(_ref4) {
   var groupAllList = useAppSelector(function (state) {
     return state.workOrder.groupAllList;
   });
+  var allTempLateList = useAppSelector(function (state) {
+    return state.workOrder.allTempLateList;
+  });
   var enabledTemplateList = useAppSelector(function (state) {
     return state.workOrder.enabledTemplateList;
   });
@@ -181,6 +185,7 @@ var CustomizeWorkOrderList = function CustomizeWorkOrderList(_ref4) {
       platform = platformInfo.platform,
       orderNo = platformInfo.orderNo,
       shopId = platformInfo.shopId;
+  console.debug('allTempLateList', allTempLateList);
   var formRenderRef = useRef();
 
   var _Form$useForm = Form.useForm(),
@@ -350,11 +355,16 @@ var CustomizeWorkOrderList = function CustomizeWorkOrderList(_ref4) {
 
   var handleCloseFormModal = function handleCloseFormModal() {
     return dispatch(setFormModalVisible(false));
-  };
+  }; // const handleClick = () => {
+  //   // 先清空默认值操作，再打开弹框
+  //   dispatch(setTemplateId(''));
+  //   dispatch(setCurrentCustomizeRecord({}));
+  //   dispatch(setFormModalVisible(true));
+  // };
 
-  var handleClick = function handleClick() {
-    // 先清空默认值操作，再打开弹框
-    dispatch(setTemplateId(''));
+
+  var handleCreateWorkOrder = function handleCreateWorkOrder(templateId) {
+    dispatch(setTemplateId(templateId));
     dispatch(setCurrentCustomizeRecord({}));
     dispatch(setFormModalVisible(true));
   };
@@ -364,50 +374,58 @@ var CustomizeWorkOrderList = function CustomizeWorkOrderList(_ref4) {
     children: /*#__PURE__*/_jsxs("div", {
       className: "custom_box",
       style: {
-        display: tabActive === 'custom' ? 'block' : 'none'
+        display: tabActive === 'custom' ? 'flex' : 'none',
+        flexDirection: 'column'
       },
       children: [/*#__PURE__*/_jsxs("div", {
-        className: "top-tip",
-        children: [/*#__PURE__*/_jsx("span", {
-          children: "\u9ED8\u8BA4\u8FD130\u5929\u7684\u5168\u90E8\u5DE5\u5355"
-        }), /*#__PURE__*/_jsx(Button, {
-          type: "primary",
-          ghost: true,
-          size: "small",
-          onClick: handleClick,
-          children: "+\u65B0\u5EFA\u5DE5\u5355"
+        className: "custom-top",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "top-tip",
+          children: /*#__PURE__*/_jsx("span", {
+            children: "\u9ED8\u8BA4\u8FD130\u5929\u7684\u5168\u90E8\u5DE5\u5355"
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "template-list-flex-height",
+          children: /*#__PURE__*/_jsx(TemplateList, {
+            templateList: allTempLateList,
+            handleCreateWorkOrder: handleCreateWorkOrder
+          })
         })]
-      }), searchForm, /*#__PURE__*/_jsx("main", {
-        className: "custom_box_main custom_box_main_".concat(platform),
-        children: dataSource.length > 0 ? dataSource.map(function (item) {
-          return /*#__PURE__*/_jsx(CustomizeWorkOrderCard, {
-            item: item,
-            enabledTemplateList: enabledTemplateList,
-            singleTemplateDetails: searchTemplateDetails === null || searchTemplateDetails === void 0 ? void 0 : searchTemplateDetails.componentDtoList
-          }, item.id);
-        }) : /*#__PURE__*/_jsx("div", {
-          className: "custom_box_main_empty",
-          children: /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx("img", {
-              src: emptyImg,
-              alt: ""
-            }), /*#__PURE__*/_jsx("p", {
-              children: "\u6682\u65E0\u6570\u636E"
-            })]
+      }), searchForm, /*#__PURE__*/_jsxs("div", {
+        className: "custom_box_main_layout",
+        children: [/*#__PURE__*/_jsx("main", {
+          className: "custom_box_main",
+          children: dataSource.length > 0 ? dataSource.map(function (item) {
+            return /*#__PURE__*/_jsx(CustomizeWorkOrderCard, {
+              item: item,
+              enabledTemplateList: enabledTemplateList,
+              singleTemplateDetails: searchTemplateDetails === null || searchTemplateDetails === void 0 ? void 0 : searchTemplateDetails.componentDtoList
+            }, item.id);
+          }) : /*#__PURE__*/_jsx("div", {
+            className: "custom_box_main_empty",
+            children: /*#__PURE__*/_jsxs("div", {
+              children: [/*#__PURE__*/_jsx("img", {
+                src: emptyImg,
+                alt: ""
+              }), /*#__PURE__*/_jsx("p", {
+                children: "\u6682\u65E0\u6570\u636E"
+              })]
+            })
           })
-        })
-      }), (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 && /*#__PURE__*/_jsx("div", {
-        className: "custom_box_page",
-        children: /*#__PURE__*/_jsx(Pagination, _objectSpread(_objectSpread({
-          onChange: function onChange(page, pageSize) {
-            return _onChange({
-              current: page,
-              pageSize: pageSize
-            });
-          }
-        }, pagination), {}, {
-          total: total
-        }))
+        }), (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 && /*#__PURE__*/_jsx("div", {
+          className: "custom_box_page",
+          children: /*#__PURE__*/_jsx(Pagination, _objectSpread(_objectSpread({
+            size: "small",
+            onChange: function onChange(page, pageSize) {
+              return _onChange({
+                current: page,
+                pageSize: pageSize
+              });
+            }
+          }, pagination), {}, {
+            total: total
+          }))
+        })]
       }), /*#__PURE__*/_jsx(DeleteCustomizeOrderModal, {
         submit: submit
       }), /*#__PURE__*/_jsx(DealerSelectModal, {
@@ -449,8 +467,8 @@ var CustomizeWorkOrderList = function CustomizeWorkOrderList(_ref4) {
           orderNo: orderNo,
           buyerId: buyerId,
           buyerNick: buyerNick,
-          platform: platform,
-          templateList: groupAllList,
+          platform: platform // templateList={groupAllList}
+          ,
           onTemplateChange: function onTemplateChange(title) {
             return setTitle(title);
           },

package/dist/esm/WorkOrder/components/CustomizeWorkOrderList/index.less

@@ -1,6 +1,5 @@
 .custom_box {
-  // height: calc(100vh - 58px);
-  overflow-x: hidden;
+  overflow: hidden;
   :global(.ant-row) {
     margin: 0 !important;
   }
@@ -8,6 +7,10 @@
   :global(.ant-col) {
     padding: 0 !important;
   }
+  .custom-top {
+    padding: 12px 8px 0px 8px;
+    background-color: #fff;
+  }
   .top-tip {
     display: flex;
     flex-direction: row;
@@ -15,6 +18,9 @@
     justify-content: space-between;
     margin-bottom: 4px;
   }
+  .template-list-flex-height {
+    height: 78px;
+  }
   .custom_box_header {
     padding: 0 16px 16px 16px;
     border-bottom: 1px solid #f2f2f2;
@@ -119,22 +125,19 @@
     }
   }
 
-  .custom_box_main {
-    height: calc(100vh - 338px);
-    margin-top: 16px;
+  .custom_box_main_layout {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: space-between;
     overflow: auto;
-    background-color: #fafafa;
-  }
-
-  .custom_box_main_fxg {
-    height: calc(100vh - 412px);
-  }
-  .custom_box_main_xiaozhi {
-    height: calc(100vh - 228px);
   }
 
-  .custom_box_main_ks {
-    height: calc(100vh - 538px); // TODO: ks顶部多144px
+  .custom_box_main {
+    margin-top: 8px;
+    margin-bottom: 40px;
+    overflow: auto;
+    background-color: #fafafa;
   }
 
   .custom_box_main_empty {
@@ -148,11 +151,14 @@
   }
 
   .custom_box_page {
+    position: absolute;
+    bottom: 0;
     display: flex;
+    flex: 1;
+    align-items: center;
     justify-content: flex-end;
     width: 100%;
     height: 40px;
-    padding: 0 16px;
     background-color: #fff;
   }
   .bottom-actions {
@@ -160,7 +166,8 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 4px;
+    padding: 8px;
+    background-color: #fff;
   }
   .action_collapse {
     padding-left: 8px;
@@ -168,6 +175,8 @@
     cursor: pointer;
   }
   .customizeSearch {
+    padding: 8px 8px 0px 8px;
+    background-color: #fff;
     transition: all 0.3s linear;
     .ant-form-item {
       margin-bottom: 8px;