支持channel类型

dashboard-v4/dashboard/src/components/task/TaskBuilderProp.tsx

@@ -3,10 +3,16 @@ import { Divider, Input, InputNumber } from "antd";
 import { ITaskData } from "../api/task";
 import "../article/article.css";
 import { useEffect, useState } from "react";
+import ChannelSelectWithToken from "../channel/ChannelSelectWithToken";
 
-type TParamType = "number" | "string";
+type TParamType =
+  | "number"
+  | "string"
+  | "channel:translation"
+  | "channel:nissaya";
 export interface IParam {
   key: string;
+  label: string;
   value: string;
   type: TParamType;
   initValue: number;
@@ -20,9 +26,10 @@ export interface IProp {
 
 interface IWidget {
   workflow?: ITaskData[];
+  channelsId?: string[];
   onChange?: (data: IProp[] | undefined) => void;
 }
-const TaskBuilderProp = ({ workflow, onChange }: IWidget) => {
+const TaskBuilderProp = ({ workflow, channelsId, onChange }: IWidget) => {
   //console.debug("TaskBuilderProp render");
   const [prop, setProp] = useState<IProp[]>();
   useEffect(() => {
@@ -35,6 +42,7 @@ const TaskBuilderProp = ({ workflow, onChange }: IWidget) => {
           const [k, v] = item.split("=");
           const value: IParam = {
             key: k,
+            label: k,
             value: v,
             type: "number",
             initValue: 1,
@@ -48,10 +56,15 @@ const TaskBuilderProp = ({ workflow, onChange }: IWidget) => {
         .filter((value) => value.includes("=%"))
         .map((item) => {
           const [k, v] = item.split("=");
+          const paramKey = v.split("@");
           const value: IParam = {
             key: v,
+            label: paramKey[0],
             value: "",
-            type: "string",
+            type:
+              paramKey.length > 1 && paramKey[1]
+                ? (paramKey[1] as TParamType)
+                : "string",
             initValue: 0,
             step: 0,
           };
@@ -97,6 +110,64 @@ const TaskBuilderProp = ({ workflow, onChange }: IWidget) => {
     console.debug("newData", newData);
     onChange && onChange(newData);
   };
+
+  const Value = (item: IParam, taskId: number, paramId: number) => {
+    let channelType: string | undefined;
+    if (item.key.includes("@channel")) {
+      const [_, channel] = item.key.split("@");
+      if (channel.includes(":")) {
+        channelType = channel.split(":")[1].replaceAll("%", "");
+      }
+    }
+    return item.type === "number" ? (
+      <InputNumber
+        defaultValue={item.initValue}
+        value={item.initValue}
+        onChange={(e) => {
+          if (e) {
+            change(taskId, paramId, item.value, e, item.step);
+          }
+        }}
+      />
+    ) : item.type === "string" ? (
+      <Input
+        defaultValue={item.value}
+        value={item.value}
+        onChange={(e) => {
+          if (e) {
+            change(taskId, paramId, e.target.value, item.initValue, item.step);
+          }
+        }}
+      />
+    ) : (
+      <ChannelSelectWithToken
+        channelsId={channelsId}
+        type={channelType}
+        onChange={(e) => {
+          console.debug("channel select onChange", e);
+          change(taskId, paramId, e ?? "", item.initValue, item.step);
+        }}
+      />
+    );
+  };
+
+  const Step = (item: IParam, taskId: number, paramId: number) => {
+    return item.type === "string" ? (
+      <>{"无"}</>
+    ) : item.value === "?" ? (
+      <>{"无"}</>
+    ) : (
+      <InputNumber
+        defaultValue={item.step}
+        readOnly={item.value === "?++"}
+        onChange={(e) => {
+          if (e) {
+            change(taskId, paramId, item.value, item.initValue, e);
+          }
+        }}
+      />
+    );
+  };
   return (
     <>
       {prop?.map((item, taskId) => {
@@ -115,63 +186,9 @@ const TaskBuilderProp = ({ workflow, onChange }: IWidget) => {
                 {item.param?.map((item, paramId) => {
                   return (
                     <tr key={paramId}>
-                      <td key={1}>{item.key}</td>
-                      <td key={2}>
-                        {item.type === "number" ? (
-                          <InputNumber
-                            defaultValue={item.initValue}
-                            value={item.initValue}
-                            onChange={(e) => {
-                              if (e) {
-                                change(
-                                  taskId,
-                                  paramId,
-                                  item.value,
-                                  e,
-                                  item.step
-                                );
-                              }
-                            }}
-                          />
-                        ) : (
-                          <Input
-                            defaultValue={item.value}
-                            value={item.value}
-                            onChange={(e) => {
-                              if (e) {
-                                change(
-                                  taskId,
-                                  paramId,
-                                  e.target.value,
-                                  item.initValue,
-                                  item.step
-                                );
-                              }
-                            }}
-                          />
-                        )}
-                      </td>
-                      <td key={3}>
-                        {item.value === "?" ? (
-                          <>{"无"}</>
-                        ) : (
-                          <InputNumber
-                            defaultValue={item.step}
-                            readOnly={item.value === "?++"}
-                            onChange={(e) => {
-                              if (e) {
-                                change(
-                                  taskId,
-                                  paramId,
-                                  item.value,
-                                  item.initValue,
-                                  e
-                                );
-                              }
-                            }}
-                          />
-                        )}
-                      </td>
+                      <td key={1}>{item.label}</td>
+                      <td key={2}>{Value(item, taskId, paramId)}</td>
+                      <td key={3}>{Step(item, taskId, paramId)}</td>
                     </tr>
                   );
                 })}