backup

Author: codebdy

src/example/WorkflowEditor/PublishButton.tsx

@@ -0,0 +1,71 @@
+import { Button, Modal } from "antd"
+import { memo, useState } from "react"
+import { useEditorStore } from "../../workflow-editor"
+import { useTranslate } from "../../workflow-editor/react-locales"
+import { CloseCircleOutlined } from "@ant-design/icons"
+import { styled } from "styled-components"
+
+const Title = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const ErrorIcon = styled(CloseCircleOutlined)`
+  color: red;
+  font-size: 20px;
+  margin-right: 8px;
+`
+
+const Tip = styled.div`
+  color: ${props => props.theme.token?.colorTextSecondary};
+`
+
+export interface ErrorItem {
+  category: string,
+  message: string,
+}
+
+export const PublishButton = memo(() => {
+  const [errors, setErrors] = useState<ErrorItem[]>();
+
+  const t = useTranslate()
+  const editorStore = useEditorStore()
+
+  const handleValidate = () => {
+    setErrors([{ category: "", message: "" }]);
+  };
+
+  const handleOk = () => {
+    setErrors(undefined);
+  };
+
+  const handleCancel = () => {
+    setErrors(undefined);
+  };
+
+  return (
+    <>
+      <Button type="primary" onClick={handleValidate}>{t("publish")}</Button>
+      <Modal
+        title={
+          <Title>
+            <ErrorIcon />
+            {t("cantNotPublish")}
+          </Title>
+        }
+        open={!!errors?.length}
+        cancelText={t("gotIt")}
+        okText={t("gotoEdit")}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <Tip>
+          {t("canNotPublishTip")}
+        </Tip>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal >
+    </>
+  )
+})

src/example/WorkflowEditor/WorkFlowEditorInner.tsx

@@ -6,6 +6,7 @@ import classNames from "classnames"
 import { NavTabs, Toolbar, WorkflowDiagram, useImport } from "../../workflow-editor"
 import { useTranslate } from "../../workflow-editor/react-locales"
 import { useExport } from "../../workflow-editor"
+import { PublishButton } from "./PublishButton"
 
 const Container = styled.div`
   flex:1;
@@ -30,6 +31,7 @@ export const WorkFlowEditorInner = memo((props: {
   const t = useTranslate()
   const exportjson = useExport()
   const importJson = useImport()
+
   const items: MenuProps['items'] = useMemo(() => [
     {
       label: t("import"),
@@ -64,7 +66,7 @@ export const WorkFlowEditorInner = memo((props: {
             <Button type="text" icon={<QuestionCircleOutlined />}>{t("help")}</Button>
             <Button type="text" icon={<MobileOutlined />}>{t("preview")}</Button>
             <Button type="text" icon={<SaveOutlined />}>{t("save")}</Button>
-            <Button type="primary">{t("publish")}</Button>
+            <PublishButton />
             <Dropdown menu={{ items }} trigger={['click']}>
               <Button icon={<EllipsisOutlined />} />
             </Dropdown>

src/example/materialUis.tsx

@@ -11,12 +11,24 @@ export const materialUis: IMaterialUIs = {
       return <ContentPlaceholder secondary text={t("pleaseChooseApprover")} />
     },
     settingsPanel: ApproverPanel,
+    validate: (node: IWorkFlowNode<IApproverSettings>, { t }) => {
+      if (!node.config) {
+        return (t("noSelectedApprover"))
+      }
+      return true
+    }
   },
   [NodeType.audit]: {
     viewContent: (node: IWorkFlowNode<IAuditSettings>, { t }) => {
       return <ContentPlaceholder secondary text={t("pleaseChooseDealer")} />
     },
     settingsPanel: AuditPanel,
+    validate: (node: IWorkFlowNode<IApproverSettings>, { t }) => {
+      if (!node.config) {
+        return (t("noSelectedDealer"))
+      }
+      return true
+    }
   },
   [NodeType.condition]: {
     viewContent: (node: IWorkFlowNode<IConditionSettings>, { t }) => {

src/workflow-editor/classes/EditorStore.ts

@@ -1,5 +1,5 @@
 import { Store } from "redux"
-import { IState } from "../interfaces/state"
+import { IErrors, IState } from "../interfaces/state"
 import { configureStore } from "@reduxjs/toolkit"
 import { mainReducer } from "../reducers"
 import { RedoListChangeListener, SelectedListener, StartNodeListener, UndoListChangeListener } from "../interfaces/listeners"
@@ -19,7 +19,7 @@ export class EditorStore {
     this.store = makeStoreInstance(debugMode || false)
   }
 
-  validate = () => {
+  validate = (): IErrors | true => {
     throw new Error("Not implements")
   }
 

src/workflow-editor/interfaces/material.ts

@@ -22,6 +22,8 @@ export interface IMaterialUI<FlowNode extends IWorkFlowNode, Settings = any, Con
   viewContent?: (node: FlowNode, context: Context) => React.ReactNode
   //属性面板设置组件
   settingsPanel?: React.FC<{ value: Settings, onChange: (value: Settings) => void }>
+  //校验失败返回错误消息，成功返回ture
+  validate?: (node: FlowNode, context: Context) => string | true
 }
 
 export interface IMaterialUIs {

src/workflow-editor/interfaces/workflow.ts

@@ -19,7 +19,7 @@ export interface IWorkFlowNode<Config = unknown> {
   name?: string
   desc?: string
   childNode?: IWorkFlowNode
-  const?: Config
+  config?: Config
 }
 
 export interface IRouteNode extends IWorkFlowNode {

src/workflow-editor/locales.ts

@@ -46,6 +46,12 @@ export const defalutLocales: ILocales = {
     search: "搜索",
     operateSuccess: "操作成功",
     fileIllegal: "文件不合法",
+    noSelectedApprover: "未选择审批人",
+    noSelectedDealer: "未选择办理人",
+    cantNotPublish: "当前无法发布",
+    canNotPublishTip: "以下内容不完善，请修改后发布",
+    gotIt: "我知道了",
+    gotoEdit: "前往修改",
   },
   'en-US': {
     baseSettings: "Base Settings",
@@ -92,5 +98,11 @@ export const defalutLocales: ILocales = {
     search: "Search",
     operateSuccess: "Operate success",
     fileIllegal: "File Illegal",
+    noSelectedApprover: "No selected approver",
+    noSelectedDealer: "NO selected dealer",
+    cantNotPublish: "Can not publish",
+    canNotPublishTip: "The following content is incomplete, please modify and publish it",
+    gotIt: "Got it",
+    gotoEdit: "Goto Edit",
   }
 }