uepay-mesh 4.0.11 → 4.0.12

package/mesh/form/tabs/relateTabs.js

@@ -11,7 +11,7 @@ require("core-js/modules/web.dom.iterable.js");
 
 require("core-js/modules/es6.regexp.search.js");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,8 +19,16 @@ var _antd = require("antd");
 
 var _formQueryAbleTable = _interopRequireDefault(require("../../table/formQueryAbleTable"));
 
+var _icons = require("@ant-design/icons");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -30,6 +38,35 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 const {
   TabPane
 } = _antd.Tabs;
+
+function obtainRelates(fieldList) {
+  let relates = [];
+
+  for (let field of fieldList) {
+    if (field.formRelates) {
+      const _relate = JSON.parse(field.formRelates);
+
+      relates = relates.concat(_relate.map(item => _objectSpread(_objectSpread({}, item), {}, {
+        relLabel: field.label
+      })));
+    }
+  }
+
+  if (0 < relates.length) {
+    return relates;
+  } else {
+    return false;
+  }
+}
+
+const ArcherProps = {
+  className: 'ach',
+  style: {
+    position: 'absolute',
+    top: 0,
+    left: 0
+  }
+};
 /**
  * @param props
  * @param props.host
@@ -38,60 +75,45 @@ const {
  * @constructor
  */
 
-class RelateTabs extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    this.formRelates = [];
-
-    for (let field of this.props.collect.fieldList) {
-      if (field.formRelates) {
-        const _relate = JSON.parse(field.formRelates);
-
-        this.formRelates = this.formRelates.concat(_relate.map(item => _objectSpread(_objectSpread({}, item), {}, {
-          relLabel: field.label
-        })));
-      }
+function RelateTabs(_ref) {
+  let {
+    host,
+    collect,
+    data
+  } = _ref;
+  const relates = (0, _react.useMemo)(() => {
+    return obtainRelates(collect.fieldList);
+  }, [collect.collectId]),
+        [visible, setVisible] = (0, _react.useState)(false);
+  return relates ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "rl-bar"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    onClick: () => setVisible(true)
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_icons.MenuFoldOutlined, null)), " \u5173\u8054\u4FE1\u606F")), /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    closable: false,
+    bodyStyle: {
+      position: 'relative'
+    },
+    push: false,
+    placement: "right",
+    width: "90%",
+    style: {
+      position: 'absolute'
+    },
+    visible: visible,
+    getContainer: false
+  }, /*#__PURE__*/_react.default.createElement("a", _extends({}, ArcherProps, {
+    onClick: () => setVisible(false)
+  }), /*#__PURE__*/_react.default.createElement(_icons.MenuUnfoldOutlined, null)), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%',
+      display: "flex"
     }
-  }
-
-  render() {
-    const {
-      data,
-      host
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
-      size: "small"
-    }, this.formRelates.map(item => /*#__PURE__*/_react.default.createElement(TabPane, {
-      key: item.collectId,
-      tab: item.name
-    }, /*#__PURE__*/_react.default.createElement(_formQueryAbleTable.default, {
-      host: host,
-      options: false,
-      size: "small",
-      onSearch: _ref => {
-        let {
-          search,
-          sorter,
-          page
-        } = _ref;
-        search.push({
-          p: data[item.relLabel],
-          s: undefined,
-          column: item.label,
-          cond: "ER",
-          relate: "AND"
-        });
-        return {
-          search,
-          sorter,
-          page
-        };
-      },
-      type: "auto",
-      collectId: item.collectId
-    }))));
-  }
-
+  }, /*#__PURE__*/_react.default.createElement(Relates, {
+    host: host,
+    relates: relates,
+    data: data
+  })))) : null;
 }
 
 RelateTabs.propTypes = {
@@ -100,4 +122,43 @@ RelateTabs.propTypes = {
   data: _propTypes.default.object
 };
 var _default = RelateTabs;
-exports.default = _default;
+exports.default = _default;
+
+function Relates(_ref2) {
+  let {
+    host,
+    relates,
+    data
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
+    size: "small"
+  }, relates.map(item => /*#__PURE__*/_react.default.createElement(TabPane, {
+    key: item.collectId,
+    tab: item.name
+  }, /*#__PURE__*/_react.default.createElement(_formQueryAbleTable.default, {
+    host: host,
+    options: false,
+    size: "small",
+    onSearch: _ref3 => {
+      let {
+        search,
+        sorter,
+        page
+      } = _ref3;
+      search.push({
+        p: data[item.relLabel],
+        s: undefined,
+        column: item.label,
+        cond: "ER",
+        relate: "AND"
+      });
+      return {
+        search,
+        sorter,
+        page
+      };
+    },
+    type: "auto",
+    collectId: item.collectId
+  }))));
+}

package/mesh/table/queryAbleTable/bridgingDrawer.js

@@ -20,6 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const DrawerProps = {
+  push: false,
   placement: 'right',
   closable: false,
   width: '95%',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "uepay-mesh",
-    "version": "4.0.11",
+    "version": "4.0.12",
     "description": "数据中心数据集设计工具前端",
     "main": "index.js",
     "typings": "index.d.ts",

package/style.css

@@ -136,10 +136,10 @@
     flex-wrap: wrap;
     align-content: flex-start;
     background-color: #fff;
+    overflow-y: auto;
 }
 
 .uepay-form {
-    position: relative;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -148,6 +148,33 @@
     width: 100%;
 }
 
+.uepay-form .ant-tabs{
+    flex-grow: 1;
+}
+
+/*右上角關聯選項的按鈕*/
+.uepay-form .rl-bar{
+    position: absolute;
+    padding: .1rem .5rem 1rem .5rem;
+    top: 2rem;
+    right: 2rem;
+    width: 7rem;
+    border-left: 1px solid #cccccc;
+}
+
+.uepay-form .rl-bar a{
+    color: #000000;
+    text-decoration: none;
+}
+
+.uepay-form .rl-bar a:hover{
+    color:#40a9ff;
+}
+
+.uepay-form .rl-bar span{
+    margin-right: .2rem;
+}
+
 .uepay-edit-empty {
     width: 100%;
     height: 100%;