@luck-design-biz/luckda 0.0.24-2 → 0.0.25-2

package/lib/lowcode/painter/components/field-setting/SettingUI.js

@@ -0,0 +1,446 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
+var _Collapse = _interopRequireDefault(require("../../components/Collapse"));
+var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
+var _ListEditor = require("../../components/ListEditor");
+var _WidthHeight = _interopRequireDefault(require("../../panel-section/WidthHeight"));
+var _FieldAttrsModal = _interopRequireDefault(require("./FieldAttrsModal"));
+var _FieldRulesModal = _interopRequireDefault(require("./FieldRulesModal"));
+var _apiUrl = require("../../../constants/api-url");
+var _constants = require("../../../constants");
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting';
+var _ALIGN_OPTIONS_ = [{
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".align.left"),
+    label: '居左'
+  }),
+  value: 'left'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".align.center"),
+    label: '居中'
+  }),
+  value: 'center'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".align.right"),
+    label: '居右'
+  }),
+  value: 'right'
+}];
+var _PINNED_OPTIONS_ = [{
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".fixed.none"),
+    label: '不固定'
+  }),
+  value: 'none'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".fixed.left"),
+    label: '左'
+  }),
+  value: 'left'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".fixed.right"),
+    label: '右'
+  }),
+  value: 'right'
+}];
+var _TRUE_FALSE_ = ['__TRUE__', '__FALSE__'];
+var CoderWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CoderWrapper",
+  componentId: "luckda-6530__sc-1n41f3z-0"
+})(["display:flex;align-content:center;justify-content:space-between;i{cursor:pointer;}"]);
+var DefaultValueWrapper = _styledComponents.default.span.withConfig({
+  displayName: "DefaultValueWrapper",
+  componentId: "luckda-6530__sc-1n41f3z-1"
+})(["color:var(--ant-primary-color);font-size:12px;padding:0 16px;display:inline-block;cursor:pointer;"]);
+var StyledRadio = (0, _styledComponents.default)(_antd.Radio.Group).withConfig({
+  displayName: "StyledRadio",
+  componentId: "luckda-6530__sc-1n41f3z-2"
+})(["span.ant-radio + *{padding-left:4px;padding-right:4px;}"]);
+var SettingUI = function SettingUI(_ref) {
+  var loading = _ref.loading,
+    data = _ref.data,
+    conditionsValue = _ref.conditionsValue,
+    dataModelKey = _ref.dataModelKey,
+    datasetId = _ref.datasetId,
+    moduleId = _ref.moduleId,
+    component = _ref.component,
+    runDebounce = _ref.runDebounce,
+    run = _ref.run,
+    onAliasChange = _ref.onAliasChange,
+    onFieldAttrsModalClose = _ref.onFieldAttrsModalClose;
+  var _ref2 = conditionsValue || {},
+    fieldDefaultValue = _ref2.fieldDefaultValue,
+    fieldRequired = _ref2.fieldRequired,
+    fieldWritable = _ref2.fieldWritable,
+    fieldReadonly = _ref2.fieldReadonly,
+    fieldTable = _ref2.fieldTable,
+    fieldForm = _ref2.fieldForm;
+  var isBatch = (0, _lodash.isArray)(data);
+  var _useState = (0, _react.useState)(void 0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    scope = _useState2[0],
+    setScope = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    rule = _useState4[0],
+    setRule = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    rules = _useState6[0],
+    setRules = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    condition = _useState8[0],
+    setCondition = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    optionalFields = _useState10[0],
+    setOptionalFields = _useState10[1];
+  var fieldData = isBatch ? {} : data;
+  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchFieldCondition, {
+      defaultParams: [{
+        datasetId: datasetId,
+        moduleId: moduleId
+      }],
+      onSuccess: function onSuccess(_ref3) {
+        var code = _ref3.code,
+          data = _ref3.data,
+          mainInfo = _ref3.mainInfo;
+        if (code === 1) {
+          setCondition(data);
+          setOptionalFields(mainInfo);
+        }
+      }
+    }),
+    _loading = _useRequest.loading;
+  // 读取校验规则
+  var _useRequest2 = (0, _ahooks.useRequest)(_apiUrl.fetchAttrs, {
+      defaultParams: [{
+        uid: fieldData.datasetFieldUid,
+        scope: _constants.FIELD_SCOPES.CHECK_RULES
+      }],
+      ready: !isBatch,
+      refreshDeps: [fieldData.datasetFieldUid],
+      onSuccess: function onSuccess(_ref4) {
+        var code = _ref4.code,
+          list = _ref4.list,
+          detail = _ref4.detail;
+        if (code === 1) {
+          var _detail$list$;
+          setRules((_detail$list$ = detail[list[0]]) === null || _detail$list$ === void 0 ? void 0 : _detail$list$.ccmModuleFieldVerifies);
+        }
+      }
+    }),
+    rulesLoading = _useRequest2.loading,
+    rulesRefresh = _useRequest2.refresh;
+  var handleFieldRulesModalClose = (0, _ahooks.useMemoizedFn)(function (success) {
+    success && rulesRefresh();
+    setRule(null);
+  });
+  var renderCodeIcon = (0, _ahooks.useMemoizedFn)(function (_stateItem, _scope) {
+    var isCommon = !_stateItem || _TRUE_FALSE_.includes(_stateItem.conditionType);
+    var _props = isBatch ? null : {
+      checked: _stateItem && _stateItem.conditionType !== _TRUE_FALSE_[1]
+    };
+    return /*#__PURE__*/_react.default.createElement(CoderWrapper, null, /*#__PURE__*/_react.default.createElement(_antd.Switch, (0, _extends2.default)({
+      size: "small"
+    }, _props, {
+      onChange: function onChange(checked) {
+        return run(_scope, checked);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: isCommon ? null : "".concat(_stateItem.conditionTypeName, ": [").concat(_stateItem.showconfig, "]")
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "code",
+      style: isCommon ? null : {
+        color: '#1890ff'
+      },
+      onClick: function onClick() {
+        return setScope(_scope);
+      }
+    })));
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    spinning: _loading || loading || rulesLoading
+  }, !isBatch ? /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".title"),
+      label: '标题'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    value: fieldData.fieldAliasName,
+    size: "small",
+    onChange: function onChange(e) {
+      return onAliasChange(fieldData, e.target.value);
+    }
+  })) : null, component === 'table' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".width"),
+      label: '列宽'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_WidthHeight.default, {
+    defaultValue: fieldData.width,
+    size: "small",
+    options: [{
+      label: 'px',
+      value: 'px'
+    }],
+    convertInt: true,
+    onChange: function onChange(val) {
+      return runDebounce('width', val);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".align"),
+      label: '内容对齐'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Segmented, {
+    options: _ALIGN_OPTIONS_,
+    defaultValue: fieldData.align,
+    onChange: function onChange(val) {
+      return run('align', val);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".headerAlign"),
+      label: '表头对齐'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Segmented, {
+    options: _ALIGN_OPTIONS_,
+    defaultValue: fieldData.headerAlign,
+    onChange: function onChange(val) {
+      return run('headerAlign', val);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".pinned"),
+      label: '固定列'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Segmented, {
+    options: _PINNED_OPTIONS_,
+    defaultValue: fieldData.pinned,
+    onChange: function onChange(val) {
+      return run('pinned', val);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".tip"),
+      label: '过长提示'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    size: "small",
+    onChange: function onChange(val) {
+      return run('tip', val);
+    }
+  }))), component === 'form' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".fieldColumn"),
+      label: '占列数'
+    })
+  }, /*#__PURE__*/_react.default.createElement(StyledRadio, {
+    defaultValue: fieldData.col,
+    onChange: function onChange(e) {
+      return run('col', e.target.value);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: 1
+  }, "1"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: 2
+  }, "2"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: 3
+  }, "3"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: 4
+  }, "4"))), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".fieldRow"),
+      label: '占行数'
+    })
+  }, /*#__PURE__*/_react.default.createElement(StyledRadio, {
+    defaultValue: fieldData.row,
+    onChange: function onChange(e) {
+      return run('row', e.target.value);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: 1
+  }, "1"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: 2
+  }, "2"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: 3
+  }, "3"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: 4
+  }, "4"))), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".fieldNote"),
+      label: '字段注释'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    defaultValue: fieldData.note,
+    onChange: function onChange(val) {
+      return runDebounce('note', val);
+    },
+    size: "small"
+  })), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".fieldTip"),
+      label: '长说明'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    defaultValue: fieldData.tip,
+    onChange: function onChange(val) {
+      return runDebounce('tip', val);
+    },
+    size: "small"
+  })), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".placeholder"),
+      label: '默认提示'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    defaultValue: fieldData.placeholder,
+    onChange: function onChange(val) {
+      return runDebounce('placeholder', val);
+    },
+    size: "small"
+  }))), !isBatch ? /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".isEqual"),
+      label: '唯一校验'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    size: "small",
+    defaultChecked: fieldData.whetherUnique === 1,
+    onChange: function onChange(checked) {
+      return run('isEqual', checked);
+    }
+  })) : null, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".required"),
+      label: '是否必填'
+    })
+  }, renderCodeIcon(fieldRequired, _constants.FIELD_SCOPES.FIELD_REQUIRED)), 'table' === component && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".display"),
+      label: '是否显示'
+    })
+  }, renderCodeIcon(fieldTable, _constants.FIELD_SCOPES.FIELD_TABLE_DISPLAY)), 'form' === component && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".display"),
+      label: '是否显示'
+    })
+  }, renderCodeIcon(fieldForm, _constants.FIELD_SCOPES.FIELD_FORM_DISPLAY)), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".writable"),
+      label: '是否可写'
+    })
+  }, renderCodeIcon(fieldWritable, _constants.FIELD_SCOPES.FIELD_WRITABLE)), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".readonly"),
+      label: '是否只读'
+    })
+  }, renderCodeIcon(fieldReadonly, _constants.FIELD_SCOPES.FIELD_READONLY)), !isBatch ? /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".defaultValue"),
+      label: '默认值'
+    })
+  }, /*#__PURE__*/_react.default.createElement(DefaultValueWrapper, {
+    onClick: function onClick() {
+      return setScope(_constants.FIELD_SCOPES.DEFAULT_VALUE);
+    }
+  }, fieldDefaultValue ? "\u3010".concat(condition === null || condition === void 0 ? void 0 : condition[_constants.FIELD_SCOPES.DEFAULT_VALUE].options[fieldDefaultValue.assign], "\u3011\n              ").concat((0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.settingTo',
+    label: '设置为'
+  }), "\n              \u3010").concat(fieldDefaultValue.expression, "\u3011") : (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.setting',
+    label: '设置'
+  }))) : null, !isBatch ? /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".rules"),
+      label: '校验规则'
+    }),
+    bodyStyle: {
+      padding: '12px 16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    addText: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".addRules"),
+      label: '添加校验规则'
+    }),
+    handleAdd: function handleAdd() {
+      return setRule({});
+    }
+  }, rules === null || rules === void 0 ? void 0 : rules.map(function (_rule) {
+    return /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, {
+      left: /*#__PURE__*/_react.default.createElement("span", null, _rule.verifyTypeName),
+      right: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        title: (0, _utils.formatMessage)({
+          id: 'luckda.lowcode.painter.edit',
+          label: '编辑'
+        })
+      }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+        type: "edit",
+        style: {
+          marginRight: '8px',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return setRule(_rule);
+        }
+      })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        title: (0, _utils.formatMessage)({
+          id: 'luckda.lowcode.painter.delete',
+          label: '删除'
+        })
+      }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+        type: "delete",
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return run('delRule', _rule.uid);
+        }
+      }))),
+      item: _rule,
+      sortable: false
+    });
+  }))) : null, /*#__PURE__*/_react.default.createElement(_FieldAttrsModal.default, {
+    dataModelKey: dataModelKey,
+    datasetId: datasetId,
+    moduleId: moduleId,
+    data: data,
+    scope: scope,
+    condition: condition,
+    fields: optionalFields,
+    onClose: function onClose(success) {
+      onFieldAttrsModalClose === null || onFieldAttrsModalClose === void 0 || onFieldAttrsModalClose(scope, success);
+      setScope(void 0);
+    }
+  }), !isBatch ? /*#__PURE__*/_react.default.createElement(_FieldRulesModal.default, {
+    dataModelKey: dataModelKey,
+    datasetId: datasetId,
+    moduleId: moduleId,
+    fieldData: fieldData,
+    rule: rule,
+    condition: condition,
+    fields: optionalFields,
+    onClose: handleFieldRulesModalClose
+  }) : null);
+};
+var _default = exports.default = SettingUI;