@zgfe/modules-dm 1.0.2-dm.2 → 1.0.2-dm.21

package/es/modules/dataPlan/addPlan.js

@@ -17,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { BizGlobalDataContext, IconFont } from '@zgfe/business-lib';
-import { Input, Button, Select, Tabs, Drawer, Upload, message, Checkbox, Empty } from 'antd';
+import { Input, Button, Select, Tabs, Drawer, Upload, message, Checkbox, Empty, Spin } from 'antd';
 var Option = Select.Option;
 import React, { useEffect, useState, useContext } from 'react';
 import './styles/index.less';
@@ -39,15 +39,21 @@ var AddPlan = function AddPlan(props) {
 
   var _useContext = useContext(BizGlobalDataContext),
       currentApp = _useContext.currentApp,
-      isDemo = _useContext.isDemo;
+      isDemo = _useContext.isDemo; // console.log('isDemo', isDemo);
+
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      spinning = _useState2[0],
+      setSpinning = _useState2[1]; // console.log('detailId', props.detailId, props.detailName);
 
-  console.log('isDemo', isDemo); // console.log('detailId', props.detailId, props.detailName);
 
   useEffect(function () {
     setPlanName(props.detailName);
   }, [props.detailName]);
   useEffect(function () {
     if (props.detailId != -1) {
+      setSpinning(true);
       request(apis.queryPlanDetail, {
         method: 'get',
         params: {
@@ -58,22 +64,29 @@ var AddPlan = function AddPlan(props) {
         // console.log('获取详情', res.data);
         tableDataHandle(res.data, res.data.propPlanAndRealDataDiff, 'detail');
       }).catch(function (err) {
-        message.success('获取详情数据失败');
+        message.error('获取详情数据失败');
+      }).finally(function () {
+        setSpinning(false);
       });
     }
   }, [props.detailId]); // 方案名称
 
-  var _useState = useState('input'),
-      _useState2 = _slicedToArray(_useState, 2),
-      detailNameShow = _useState2[0],
-      setDetailNameShow = _useState2[1];
-
-  var _useState3 = useState(''),
+  var _useState3 = useState('input'),
       _useState4 = _slicedToArray(_useState3, 2),
-      planName = _useState4[0],
-      setPlanName = _useState4[1];
+      detailNameShow = _useState4[0],
+      setDetailNameShow = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      planName = _useState6[0],
+      setPlanName = _useState6[1];
 
   var PlanNameChange = function PlanNameChange(e) {
+    if (e.currentTarget.value.length > 20) {
+      message.error('最多可输入20个字符');
+      return;
+    }
+
     setPlanName(e.currentTarget.value);
     setEditOperate(true);
     e.currentTarget.value != '' ? setplanNameInputStatus('') : null;
@@ -85,30 +98,31 @@ var AddPlan = function AddPlan(props) {
 
   var exportHandleChange = function exportHandleChange(e) {
     // console.log(e, selectedRowKeys);
+    if (e == '1' && selectedRowKeys.length <= 0) {
+      message.error('当前未选中数据，无法导出');
+      return;
+    }
+
     var _selectedRowKeys = selectedRowKeys.map(function (item) {
       return item.split('&*&')[0];
-    }); //  console.log(e, selectedRowKeys);
-
+    });
 
     if (listTab == '1') {
-      console.log('导出全部：', "".concat(apis.downloadPlanEvent, "?appId=").concat(currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId, "&planId=").concat(props.detailId, "&eventName").concat(e == '0' ? '' : '=' + _selectedRowKeys));
       window.open("".concat(apis.downloadPlanEvent, "?appId=").concat(currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId, "&planId=").concat(props.detailId, "&eventName").concat(e == '0' ? '' : '=' + _selectedRowKeys));
     } else {
       window.open("".concat(apis.downloadPlanProp, "?appId=").concat(currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId, "&planId=").concat(props.detailId, "&propName").concat(e == '0' ? '' : '=' + _selectedRowKeys));
     }
-
-    setExportValue('导出');
   };
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      visible = _useState6[0],
-      setVisible = _useState6[1];
-
-  var _useState7 = useState('1'),
+  var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      listTab = _useState8[0],
-      setListTab = _useState8[1];
+      visible = _useState8[0],
+      setVisible = _useState8[1];
+
+  var _useState9 = useState('1'),
+      _useState10 = _slicedToArray(_useState9, 2),
+      listTab = _useState10[0],
+      setListTab = _useState10[1];
 
   var tabsChange = function tabsChange(activeKey) {
     setListTab(activeKey);
@@ -116,15 +130,15 @@ var AddPlan = function AddPlan(props) {
     setSelectedRowKeys([]);
   };
 
-  var _useState9 = useState(0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      searchTotal = _useState10[0],
-      setSearchTotal = _useState10[1];
-
-  var _useState11 = useState(''),
+  var _useState11 = useState(0),
       _useState12 = _slicedToArray(_useState11, 2),
-      searchData = _useState12[0],
-      setSearchData = _useState12[1]; // 关闭抽屉
+      searchTotal = _useState12[0],
+      setSearchTotal = _useState12[1];
+
+  var _useState13 = useState(''),
+      _useState14 = _slicedToArray(_useState13, 2),
+      searchData = _useState14[0],
+      setSearchData = _useState14[1]; // 关闭抽屉
 
 
   var closeDrawer = function closeDrawer(type) {
@@ -145,16 +159,18 @@ var AddPlan = function AddPlan(props) {
     maxCount: 1,
     showUploadList: false,
     beforeUpload: function beforeUpload(file) {
-      console.log(file);
+      setSpinning(true);
       var fileType = file.name.split('.');
 
       if (fileType[fileType.length - 1] != 'xlsx' && fileType[fileType.length - 1] != 'xsl') {
-        message.error('上传仅支持xlsx或xsl格式的文件');
+        message.error('仅支持excel(xsl、xlsx)格式文件，请检查后重新上传');
+        setSpinning(false);
         return;
       }
 
       if (file.size > 5 * 1024 * 1024) {
-        message.error('最大支持上传5M的文件');
+        message.error('文件大小支持5M以内，请检查后重新上传');
+        setSpinning(false);
         return;
       }
 
@@ -168,38 +184,55 @@ var AddPlan = function AddPlan(props) {
         method: 'post',
         data: data
       }).then(function (res) {
+        if (res == null) {
+          // 接口处理表格异常处理
+          message.error('上传失败');
+          setSpinning(false);
+          return;
+        }
+
+        if (Object.keys(res.data).length <= 0) {
+          // 破损表格，异常处理
+          message.error('上传失败');
+          setSpinning(false);
+          return;
+        }
+
         message.success('上传成功');
         tableDataHandle(res.data.eventPlanDataStatusList, res.data.userPropPlanList, 'add');
         setEditOperate(true);
         setListTab('1');
       }).catch(function (err) {
-        message.success('上传失败');
+        message.error('上传失败');
+      }).finally(function () {
+        setSpinning(false);
       });
+      return false;
     }
   }; // 事件列表-渲染数据
 
-  var _useState13 = useState([]),
-      _useState14 = _slicedToArray(_useState13, 2),
-      eventListData = _useState14[0],
-      setEventListData = _useState14[1]; // 事件列表-原数据
-
-
   var _useState15 = useState([]),
       _useState16 = _slicedToArray(_useState15, 2),
-      eventListDataCopy = _useState16[0],
-      setEventListDataCopy = _useState16[1]; // 用户属性列表-渲染数据
+      eventListData = _useState16[0],
+      setEventListData = _useState16[1]; // 事件列表-原数据
 
 
   var _useState17 = useState([]),
       _useState18 = _slicedToArray(_useState17, 2),
-      userAttrData = _useState18[0],
-      setUserAttrData = _useState18[1]; // 用户属性列表-原数据
+      eventListDataCopy = _useState18[0],
+      setEventListDataCopy = _useState18[1]; // 用户属性列表-渲染数据
 
 
   var _useState19 = useState([]),
       _useState20 = _slicedToArray(_useState19, 2),
-      userAttrDataCopy = _useState20[0],
-      setUserAttrDataCopy = _useState20[1]; // 手动添加事件或属性
+      userAttrData = _useState20[0],
+      setUserAttrData = _useState20[1]; // 用户属性列表-原数据
+
+
+  var _useState21 = useState([]),
+      _useState22 = _slicedToArray(_useState21, 2),
+      userAttrDataCopy = _useState22[0],
+      setUserAttrDataCopy = _useState22[1]; // 手动添加事件或属性
 
 
   var addEventOrUserFun = function addEventOrUserFun(data) {
@@ -357,24 +390,61 @@ var AddPlan = function AddPlan(props) {
     });
 
     setEventListData(_temp_tableHandleData);
-  }; // 保存方案
+  }; // 保存方案按钮是否置灰
 
 
+  var _useState23 = useState(false),
+      _useState24 = _slicedToArray(_useState23, 2),
+      saveDisabled = _useState24[0],
+      setSaveDisabled = _useState24[1];
+
+  useEffect(function () {
+    if (JSON.stringify(eventListData).indexOf('eventName') == -1) {
+      setSaveDisabled(true);
+    } else {
+      setSaveDisabled(false);
+    }
+  }, [eventListData]);
+
+  var _useState25 = useState(0),
+      _useState26 = _slicedToArray(_useState25, 2),
+      eventCount = _useState26[0],
+      setEventCount = _useState26[1];
+
+  useEffect(function () {
+    var _eventCount = 0;
+    eventListDataCopy.map(function (_item, index) {
+      for (var key in _item) {
+        _item[key].map(function (item) {
+          _eventCount++;
+        });
+      }
+    });
+    setEventCount(_eventCount);
+  }, [eventListDataCopy]); // 保存方案
+
   var savePlanData = function savePlanData() {
     if (planName == '') {
       setplanNameInputStatus('warning');
       return;
     }
 
-    if (JSON.stringify(eventListData).indexOf('eventName') == -1) {
-      message.error('请添加事件相关数据');
+    var planNameFlag = false;
+    props.listData.map(function (item) {
+      if (item.planName == planName && item.id != props.detailId) {
+        planNameFlag = true;
+      }
+    });
+
+    if (planNameFlag) {
+      message.error('方案名称与现有方案重复');
       return;
     } // console.log('保存', planName, eventListData, userAttrData);
 
 
     var eventPlanList = [];
     var userPropPlanList = [];
-    eventListData.map(function (_item) {
+    eventListDataCopy.map(function (_item) {
       var _loop2 = function _loop2(key) {
         _item[key].map(function (item) {
           item.attributeName.map(function (_item) {
@@ -391,8 +461,13 @@ var AddPlan = function AddPlan(props) {
         _loop2(key);
       }
     });
-    userAttrData.map(function (item) {
-      userPropPlanList.push(item);
+    var _tempUserAttrFilter = [];
+    userAttrDataCopy.map(function (item) {
+      if (_tempUserAttrFilter.indexOf(item.propName) == -1) {
+        _tempUserAttrFilter.push(item.propName);
+
+        userPropPlanList.push(item);
+      }
     });
     var ManagementPlan = {
       appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
@@ -401,6 +476,12 @@ var AddPlan = function AddPlan(props) {
       eventPlanList: eventPlanList,
       userPropPlanList: userPropPlanList
     };
+
+    if (eventCount > 500) {
+      message.error('每个方案最多保存500条数据，请修改后重新保存');
+      return;
+    }
+
     request(apis.savePlan, {
       method: 'post',
       data: _objectSpread({}, ManagementPlan)
@@ -410,15 +491,15 @@ var AddPlan = function AddPlan(props) {
         closeDrawer('save');
       }
     }).catch(function (err) {
-      message.success('保存失败');
+      message.error('保存失败');
     });
   }; // 存储选中的keys
 
 
-  var _useState21 = useState([]),
-      _useState22 = _slicedToArray(_useState21, 2),
-      selectedRowKeys = _useState22[0],
-      setSelectedRowKeys = _useState22[1];
+  var _useState27 = useState([]),
+      _useState28 = _slicedToArray(_useState27, 2),
+      selectedRowKeys = _useState28[0],
+      setSelectedRowKeys = _useState28[1];
 
   var tableCheck = function tableCheck(e, record) {
     // console.log(e.target.checked, record.key);
@@ -431,8 +512,13 @@ var AddPlan = function AddPlan(props) {
   }; // 选中当前页面全部数据
 
 
-  var allCheck = function allCheck(e) {
-    if (e.target.checked) {
+  var _useState29 = useState(false),
+      _useState30 = _slicedToArray(_useState29, 2),
+      tableAllchecked = _useState30[0],
+      setTableAllchecked = _useState30[1];
+
+  useEffect(function () {
+    if (tableAllchecked) {
       var _tempData = [];
 
       if (listTab == '1') {
@@ -457,66 +543,98 @@ var AddPlan = function AddPlan(props) {
     } else {
       setSelectedRowKeys([]);
     }
-  }; // useEffect(() => {
-  //   console.log('最近selectedRowKeys', selectedRowKeys);
-  // }, [selectedRowKeys]);
-  // 批量删除
+  }, [tableAllchecked]);
 
+  var allCheck = function allCheck(e) {
+    setTableAllchecked(e.target.checked);
+  };
 
-  var batchDetele = function batchDetele() {
-    if (listTab == '1') {
-      var data = _.cloneDeep(eventListData);
+  var _useState31 = useState(''),
+      _useState32 = _slicedToArray(_useState31, 2),
+      allCheckedClassName = _useState32[0],
+      setAllCheckedClassName = _useState32[1];
 
-      var _tempData = [];
-      data.map(function (_item, index) {
-        var _jsop = {};
+  useEffect(function () {
+    if (selectedRowKeys.length == eventCount && eventCount != 0) {
+      setAllCheckedClassName('ant-checkbox-checked');
+      setTableAllchecked(true);
+    } else if (selectedRowKeys.length <= 0) {
+      setAllCheckedClassName('');
+      setTableAllchecked(false);
+    } else {
+      setAllCheckedClassName('ant-checkbox-indeterminate');
+    } // console.log('最近selectedRowKeys', selectedRowKeys, eventCount);
 
-        var _loop3 = function _loop3(key) {
-          var _data = [];
+  }, [selectedRowKeys]); // 批量删除
 
-          _item[key].map(function (item) {
-            selectedRowKeys.indexOf(item.key) == -1 ? _data.push(item) : null;
-          });
+  var deteleDataHandle = function deteleDataHandle(data) {
+    var _tempData = [];
+    data.map(function (_item, index) {
+      var _jsop = {};
 
-          if (_data.length > 0) {
-            _jsop[key] = _data;
-          }
-        };
+      var _loop3 = function _loop3(key) {
+        var _data = [];
 
-        for (var key in _item) {
-          _loop3(key);
+        _item[key].map(function (item) {
+          selectedRowKeys.indexOf(item.key) == -1 ? _data.push(item) : null;
+        });
+
+        if (_data.length > 0) {
+          _jsop[key] = _data;
         }
+      };
+
+      for (var key in _item) {
+        _loop3(key);
+      }
+
+      _tempData.push(_jsop);
+    });
+    return _tempData;
+  };
+
+  var batchDetele = function batchDetele() {
+    if (listTab == '1') {
+      var _tempData = deteleDataHandle(_.cloneDeep(eventListData));
+
+      var _tempDataCopy = deteleDataHandle(_.cloneDeep(eventListDataCopy));
 
-        _tempData.push(_jsop);
-      });
       setEventListData(_tempData);
-      setEventListDataCopy(_tempData); // 备份
+      setEventListDataCopy(_tempDataCopy); // 备份
     } else {
-      var _data4 = _.cloneDeep(userAttrData);
+      var data = _.cloneDeep(userAttrData);
 
-      _.remove(_data4, function (x) {
+      _.remove(data, function (x) {
         return selectedRowKeys.indexOf(x.key) != -1;
       });
 
-      setUserAttrData(_data4);
+      setUserAttrData(data);
+
+      var dataCopy = _.cloneDeep(userAttrDataCopy);
+
+      _.remove(dataCopy, function (x) {
+        return selectedRowKeys.indexOf(x.key) != -1;
+      });
+
+      setUserAttrDataCopy(dataCopy); // 备份
     }
 
     setEditOperate(true);
     setSelectedRowKeys([]);
-    message.success('删除成功');
+    message.error('删除成功');
   }; // 是否有编辑操作
 
 
-  var _useState23 = useState(false),
-      _useState24 = _slicedToArray(_useState23, 2),
-      editOperate = _useState24[0],
-      setEditOperate = _useState24[1]; // 保存时，方案名称若为空，Input显示校验提示
+  var _useState33 = useState(false),
+      _useState34 = _slicedToArray(_useState33, 2),
+      editOperate = _useState34[0],
+      setEditOperate = _useState34[1]; // 保存时，方案名称若为空，Input显示校验提示
 
 
-  var _useState25 = useState(''),
-      _useState26 = _slicedToArray(_useState25, 2),
-      planNameInputStatus = _useState26[0],
-      setplanNameInputStatus = _useState26[1]; // 检索条数
+  var _useState35 = useState(''),
+      _useState36 = _slicedToArray(_useState35, 2),
+      planNameInputStatus = _useState36[0],
+      setplanNameInputStatus = _useState36[1]; // 检索条数
 
 
   useEffect(function () {
@@ -534,12 +652,6 @@ var AddPlan = function AddPlan(props) {
       setSearchTotal(userAttrData.length);
     }
   }, [listTab, eventListData, userAttrData]);
-
-  var _useState27 = useState('导出'),
-      _useState28 = _slicedToArray(_useState27, 2),
-      exportValue = _useState28[0],
-      setExportValue = _useState28[1];
-
   return /*#__PURE__*/React.createElement(Drawer, {
     width: '70%',
     placement: "right",
@@ -561,6 +673,7 @@ var AddPlan = function AddPlan(props) {
     type: "bianji1"
   })), detailNameShow == 'input' && /*#__PURE__*/React.createElement(Input, {
     size: "small",
+    disabled: isDemo,
     className: "plan-name",
     placeholder: "\u8BF7\u8F93\u5165\u65B9\u6848\u540D\u79F0",
     value: planName,
@@ -574,6 +687,7 @@ var AddPlan = function AddPlan(props) {
       return closeDrawer('close');
     }
   }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    disabled: saveDisabled,
     onClick: savePlanData,
     type: "primary"
   }, "\u4FDD\u5B58"))), /*#__PURE__*/React.createElement("div", {
@@ -590,6 +704,7 @@ var AddPlan = function AddPlan(props) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "handle-box"
   }, selectedRowKeys.length > 0 && /*#__PURE__*/React.createElement(Button, {
+    disabled: isDemo,
     onClick: batchDetele
   }, "\u6279\u91CF\u5220\u9664"), props.detailId != -1 && /*#__PURE__*/React.createElement(Select, {
     className: "export-data",
@@ -597,7 +712,7 @@ var AddPlan = function AddPlan(props) {
       width: 84
     },
     placeholder: "\u5BFC\u51FA",
-    value: exportValue,
+    value: "\u5BFC\u51FA",
     onChange: exportHandleChange
   }, /*#__PURE__*/React.createElement(Option, {
     value: "0"
@@ -609,17 +724,22 @@ var AddPlan = function AddPlan(props) {
     }
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "xiazai1"
-  }), "\u4E0B\u8F7D\u6A21\u677F"), /*#__PURE__*/React.createElement(Upload, _objectSpread({}, uploadProps), /*#__PURE__*/React.createElement(Button, null, /*#__PURE__*/React.createElement(IconFont, {
+  }), "\u4E0B\u8F7D\u6A21\u677F"), /*#__PURE__*/React.createElement(Upload, _objectSpread({}, uploadProps), /*#__PURE__*/React.createElement(Button, {
+    disabled: isDemo
+  }, /*#__PURE__*/React.createElement(IconFont, {
     type: "daochu"
   }), "\u6587\u4EF6\u4E0A\u4F20")))), /*#__PURE__*/React.createElement(Search, {
     type: listTab == '1' ? 'event' : 'user',
     total: searchTotal,
     searchData: searchData,
     setSearchData: setSearchData,
-    setVisible: setVisible
+    setVisible: setVisible,
+    isDemo: isDemo
   }), listTab == '1' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(classPrefix, "-table-header")
   }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Checkbox, {
+    className: allCheckedClassName,
+    checked: tableAllchecked,
     style: {
       marginRight: '10px'
     },
@@ -651,6 +771,10 @@ var AddPlan = function AddPlan(props) {
     type: listTab == '1' ? 'event' : 'user',
     visible: visible,
     setVisible: setVisible
+  }), /*#__PURE__*/React.createElement(Spin, {
+    size: "large",
+    spinning: spinning,
+    className: "spin"
   })));
 };
 

package/es/modules/dataPlan/index.js

@@ -35,6 +35,11 @@ var PlanList = function PlanList(props) {
 
 
   var tableDel = function tableDel(data) {
+    if (isDemo) {
+      message.error('demo环境，无法删除');
+      return;
+    }
+
     Modal.confirm({
       centered: true,
       title: '是否确认删除方案？',
@@ -52,7 +57,7 @@ var PlanList = function PlanList(props) {
           message.success('删除成功');
           queryList();
         }).catch(function (err) {
-          message.success('删除失败');
+          message.error('删除失败');
         }).finally(function () {});
       }
     });
@@ -204,7 +209,12 @@ var PlanList = function PlanList(props) {
     unCheckedChildren: "\u5173",
     checked: isOpen
   })), /*#__PURE__*/React.createElement(Button, {
+    disabled: isDemo,
     onClick: function onClick() {
+      if (listData.length >= 10) {
+        return message.error('最多创建10个埋点方案');
+      }
+
       setDrawerShow(true);
     },
     type: "primary",
@@ -213,7 +223,7 @@ var PlanList = function PlanList(props) {
     type: "tianjia",
     style: {
       marginRight: '5px',
-      verticalAlign: '-2px'
+      verticalAlign: '-1px'
     }
   }), "\u65B0\u589E\u57CB\u70B9\u65B9\u6848")), /*#__PURE__*/React.createElement(Table, {
     className: "".concat(classPrefix, "-table"),
@@ -223,6 +233,7 @@ var PlanList = function PlanList(props) {
     // onChange={onChange}
     pagination: false
   })), /*#__PURE__*/React.createElement(AddPlan, {
+    listData: listData,
     detailName: detailName,
     drawerShow: drawerShow,
     drawerClose: drawerClose,

package/es/modules/dataPlan/search.d.ts

@@ -6,6 +6,7 @@ interface PropsType {
     searchData: string;
     setSearchData: Function;
     setVisible: Function;
+    isDemo?: boolean;
 }
 declare const Search: React.FC<PropsType>;
 export default Search;

package/es/modules/dataPlan/search.js

@@ -32,6 +32,7 @@ var Search = function Search(props) {
       }
     }),
     type: "primary",
+    disabled: props.isDemo,
     className: "".concat(classPrefix, "-add-button"),
     onClick: function onClick() {
       props.setVisible(true);

package/es/modules/dataPlan/styles/index.less

@@ -4,8 +4,11 @@
   width: calc(100% - 264px);
   height: 100%;
   margin-top: 16px;
+  margin-right: 24px;
+  margin-bottom: 24px;
   padding: 24px;
   background: #fff;
+  border-radius: 8px;
   .clearfix:after {
     display: block;
     clear: both;
@@ -42,12 +45,16 @@
     // border-top: 1px solid #e8efff;
     .switch-div {
       float: left;
+      .ant-switch {
+        width: 24px;
+      }
       span {
         margin-right: 20px;
       }
     }
     .add {
       float: right;
+      line-height: 20px;
     }
   }
   &-table-see {
@@ -76,6 +83,11 @@
 .add-plan {
   position: relative;
   height: 100%;
+  .spin {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  }
   .point-active,
   .point-active-null {
     display: inline-block;