@bit-sun/business-component 2.2.49 → 2.3.0

package/src/components/Solution/RuleComponent/index.less

@@ -0,0 +1,230 @@
+.base_rule {
+  p {
+    margin: 0;
+  }
+
+  .base_rule_content {
+    min-height: 80px;
+    margin-bottom: 20px;
+  }
+
+  .base_rule_line_title {
+    position: relative;
+    height: 40px;
+    .rule_title {
+      height: 35px;
+      padding: 0 10px;
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 35px;
+    }
+    .base_rule_btn_style {
+      position: absolute;
+      right: 0px;
+    }
+    :global {
+      .ant-btn-link {
+        color: #008fe0;
+        font-weight: bold;
+        border: 0px !important;
+      }
+
+      .ant-btn-link:hover,
+      .ant-btn-link:focus {
+        color: #008fe0;
+        background-color: transparent;
+        border: 0px;
+        border-color: #008fe0;
+      }
+
+      .ant-btn:not(.ant-btn-primary .ant-btn-danger):hover,
+      .ant-btn:not(.ant-btn-primary .ant-btn-danger):active,
+      .ant-btn:not(.ant-btn-primary .ant-btn-danger):focus {
+        color: #008fe0;
+      }
+    }
+  }
+
+  .base_rule_line_content {
+    display: flex;
+    // border-bottom: 1px solid #d9d9d9;
+    padding: 15px;
+    overflow-x: auto;
+    .base_rule_icon_btn {
+      margin-right: 10px;
+      color: #89b9cf;
+      font-size: 20px;
+    }
+
+    .base_rule_icon_btn:hover {
+      cursor: pointer;
+    }
+
+    .base_rule_item_desc_content {
+      height: 45px;
+      line-height: 45px;
+    }
+
+    .base_rule_item_desc {
+      margin-right: 15px;
+    }
+
+    .base_rule_item1 {
+      align-items: center;
+      width: 120px;
+      color: #f8ab3c;
+      font-size: 16px;
+    }
+
+    .base_rule_item2 {
+      width: 1200px;
+    }
+
+    .base_rule_item3 {
+      //width: calc(100% - 600px);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-top: -20px;
+      padding-left: 20px;
+    }
+
+    .line_color_red {
+      color: #ed869b;
+    }
+
+    .base_rule_item4 {
+      width: 80px;
+    }
+  }
+
+  .footer_line {
+    & > span {
+      color: #008fe0;
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+}
+
+.rule_name_title {
+  display: inline-block;
+  height: 30px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  color: #f8ab3c;
+  font-size: 16px;
+  line-height: 30px;
+}
+
+.logical_operate_content {
+  position: relative;
+  .top_line {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    z-index: 999;
+    width: 15px;
+    height: 2px;
+    background-color: #d6efe8;
+  }
+  .bottom_line {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    z-index: 999;
+    width: 15px;
+    height: 2px;
+    background-color: #d6efe8;
+  }
+}
+
+.logical_operate_content::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: 998;
+  width: 2px;
+  height: 100%;
+  overflow: hidden;
+  background: #d6efe8;
+  content: ' ';
+}
+
+.logical_item_btn {
+  position: absolute !important;
+  top: 50%;
+  left: 50%;
+  z-index: 999;
+  display: flex !important;
+  align-items: center;
+  width: 50px;
+  height: 30px !important;
+  margin-top: -15px;
+  margin-left: -25px;
+  padding: 0px !important;
+  color: #008fe0 !important;
+  line-height: 30px !important;
+  text-align: center !important;
+  background-color: #ffffff !important;
+  cursor: pointer !important;
+}
+
+.logical_item_btn1 {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  z-index: 999;
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin-left: -15px;
+  color: #008fe0;
+  line-height: 30px;
+  text-align: center;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+.rule_field_style {
+  display: inline-block;
+}
+
+.icon_btn_style {
+  margin-right: 10px;
+  font-size: 20px;
+}
+
+.choose_logical_type {
+  height: 25px;
+  margin: 0px;
+  padding: 0 10px;
+  line-height: 25px;
+  cursor: pointer;
+}
+
+.choose_logical_type:first-child {
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.choose_logical_type:hover {
+  color: white;
+  background-color: #008fe0;
+}
+
+.action_list_item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #e1e1f0;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+:global {
+  .ant-popover-inner-content {
+    padding: 0px;
+  }
+}

package/src/components/Solution/RuleComponent/renderSpecificAction.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import { MinusCircleOutlined, EditOutlined } from '@ant-design/icons';
+import { Space, Tooltip } from 'antd';
+import styles from './index.less';
+import ENUM from '../../../common/ENUM';
+
+const {
+  EXCUSE_ACTION_TEXT: { SEND_MESSAGE, PUSH_TODO_TASK },
+} = ENUM;
+
+function handleRTypeData(props) {
+  const list =
+    props?.extraInfo?.execute?.filter((i) => i.isSelected).map((i) => i.code) ||
+    [];
+  const result = list?.length
+    ? props.ruleTypeData.filter((i) => list.includes(i.code))
+    : [];
+  return result;
+}
+
+export default class RuleField extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ruleTypeData: handleRTypeData(props),
+      extraInfo: props?.extraInfo?.execute || [],
+    };
+  }
+
+  componentDidMount() {
+    const {} = this.props;
+  }
+
+  componentWillUnmount() {}
+
+  componentWillReceiveProps(nextProps) {
+    const { ruleTypeData, extraInfo } = this.state;
+    const isRuleTypeDataChange =
+      nextProps.ruleTypeData &&
+      this.props.ruleTypeData != nextProps.ruleTypeData &&
+      JSON.stringify(nextProps.ruleTypeData) != JSON.stringify(ruleTypeData);
+    const isExtraInfoChange =
+      nextProps.extraInfo &&
+      this.props.extraInfo != nextProps.extraInfo &&
+      JSON.stringify(nextProps.extraInfo) != JSON.stringify(extraInfo);
+    if (isRuleTypeDataChange || isExtraInfoChange) {
+      this.setState({
+        ruleTypeData: handleRTypeData(nextProps),
+        extraInfo: nextProps?.extraInfo?.execute || [],
+      });
+    }
+  }
+
+  handleActionName = (functionDetail) => {
+    let result = functionDetail.functionName;
+    const code = functionDetail.functionInfo.code;
+    if (code.indexOf('MassageCenter') > -1) {
+      result = SEND_MESSAGE;
+    }
+    if (code.indexOf('TaskCenter') > -1) {
+      result = PUSH_TODO_TASK;
+    }
+    return result;
+  };
+
+  render() {
+    const { ruleTypeData } = this.state;
+    const { handleOperatingAction, disabled } = this.props;
+    return (
+      <div>
+        {ruleTypeData.map((i) => (
+          <div className={styles.action_list_item}>
+            {/*向 {i.actionHandler} {i.actionName} {i.actionContent}*/}
+            <div onClick={() => handleOperatingAction(i.code, 'view')}>
+              {this.handleActionName(i)}
+            </div>
+            {(!disabled && (
+              <div>
+                <Space>
+                  <Tooltip title={'编辑执行动作'}>
+                    <EditOutlined
+                      onClick={() => handleOperatingAction(i.code, 'edit')}
+                    />
+                  </Tooltip>
+                  <Tooltip title={'移除执行动作'}>
+                    <MinusCircleOutlined
+                      onClick={() => handleOperatingAction(i.code, 'delete')}
+                    />
+                  </Tooltip>
+                </Space>
+              </div>
+            )) ||
+              null}
+          </div>
+        ))}
+      </div>
+    );
+  }
+}