加入更多按钮

src/pages/Alarm/components/easy.jsx

@@ -36,7 +36,7 @@ const Easy = (props, ref) => {
   // const [apiUrl, setApiUrl] = useState(decodeURIComponent(searchParams.get('api_url')) + '/')
   const [data, setData] = useState();
   const [deferUnit, setDeferUnit] = useState();
-  const [status, setStatus] = useState(1);
+  const [status, setStatus] = useState(2);
   const [dateTime, setDateTime] = useState(null);
   const [subType, setSubType] = useState();
   const [isDisabled, setIsDisabled] = useState(true);
@@ -45,6 +45,7 @@ const Easy = (props, ref) => {
   const [ahEnable, setAhEnable] = useState(false);
   const [alEnable, setAlEnable] = useState(false);
   const [allEnable, setAllEnable] = useState(false);
+  const [showMore, setShowMore] = useState(false);
 
   const onModalOk = useMemoizedFn(async () => {
     const isNull = (val, bool) => {
@@ -313,6 +314,10 @@ const Easy = (props, ref) => {
               all_enable: data?.Details.all_enable,
             }),
       });
+    } else {
+      form.setFieldsValue({
+        alarm_level: 1,
+      });
     }
   }, [data]);
 
@@ -470,23 +475,6 @@ const Easy = (props, ref) => {
           style={{ width: "240px" }}
         />
       </Form.Item>
-
-      <Form.Item
-        label={TranslateText(["单位", "Unit"])}
-        name="unit"
-        rules={[
-          {
-            required: false,
-            message: TranslateText(["请输入单位", "Please input"]),
-          },
-        ]}
-      >
-        <Input
-          placeholder={TranslateText(["请输入", "Please input"])}
-          style={{ width: "240px" }}
-        />
-      </Form.Item>
-
       <Form.Item
         label={TranslateText(["告警名称", "Alarm name"])}
         name="name"
@@ -503,27 +491,6 @@ const Easy = (props, ref) => {
         />
       </Form.Item>
 
-      <Form.Item label={TranslateText(["告警组", "Group"])} name={"group_id"}>
-        <Select
-          style={{ width: 240 }}
-          options={[
-            ...[
-              {
-                label: "未分组",
-                value: 0,
-              },
-            ],
-            ...(groupList?.map((item) => {
-              return {
-                label: item?.name,
-                value: item?.id,
-              };
-            }) ?? []),
-          ]}
-          placeholder={TranslateText(["请选择", "Please choose"])}
-        />
-      </Form.Item>
-
       {subType === 13 && (
         <Form.Item
           label={TranslateText(["告警值", "Alarm value"])}
@@ -746,76 +713,137 @@ const Easy = (props, ref) => {
         </Select>
       </Form.Item>
 
-      <Form.Item
-        name={isDisabled ? "" : "defer_seconds"}
-        disabled={isDisabled}
-        required={true}
-        label={TranslateText(["延时告警", "Delayed alarm"])}
-      >
-        <div style={{ marginTop: 6 }}>
-          <Radio.Group
-            defaultValue={alarmId !== -1 ? (dateTime > 0 ? 1 : 2) : 1}
-            disabled={isDisabled}
-            onChange={(e) => {
-              setStatus(e.target.value);
-              if (e.target.value === 1) {
-                setDateTime(null);
-              } else {
-                setDateTime(0);
-              }
-            }}
-          >
-            <Radio value={1}>{TranslateText(["开启", "on"])}</Radio>
-            <Radio value={2}>{TranslateText(["关闭", "off"])}</Radio>
-          </Radio.Group>
-          <div
-            style={{
-              display: "flex",
-              marginTop: 10,
-              gap: 8,
-              alignItems: "center",
-            }}
-          >
-            <span
-              style={{
-                color: "var(--dt-text-color1)",
-                fontWeight: 400,
-                fontSize: 14,
+      {!showMore && (
+        <Form.Item
+          label={
+            <Button
+            type="link"
+              onClick={() => {
+                setShowMore(true);
               }}
             >
-              {TranslateText(["持续", "Alarm after"])}
-            </span>
+              更多
+            </Button>
+          }
+        ></Form.Item>
+      )}
+
+      {showMore && (
+        <>
+          <Form.Item
+            label={TranslateText(["单位", "Unit"])}
+            name="unit"
+            rules={[
+              {
+                required: false,
+                message: TranslateText(["请输入单位", "Please input"]),
+              },
+            ]}
+          >
             <Input
-              disabled={status !== 1 || isDisabled}
-              value={dateTime}
-              onChange={(e) => {
-                console.log(e.target.value);
-                setDateTime(e.target.value?.replace(/\D/g, ""));
-              }}
               placeholder={TranslateText(["请输入", "Please input"])}
-              style={{ width: 100 }}
+              style={{ width: "240px" }}
             />
-            <span
-              style={{
-                color: "var(--dt-text-color1)",
-                fontWeight: 400,
-                fontSize: 14,
-              }}
-            >
-              {deferUnit === 1
-                ? TranslateText(["秒", "seconds"])
-                : TranslateText(["分钟", "minutes"])}{" "}
-              {TranslateText(["后报警", "of duration"])}
-            </span>
-          </div>
-          {dateTime !== null &&
-            ["", undefined, null].indexOf(dateTime) !== -1 &&
-            status === 1 &&
-            !isDisabled && (
-              <div style={{ color: "var(--dt-error-color1)" }}>请输入数字</div>
-            )}
-        </div>
-      </Form.Item>
+          </Form.Item>
+
+          <Form.Item
+            label={TranslateText(["告警组", "Group"])}
+            name={"group_id"}
+          >
+            <Select
+              style={{ width: 240 }}
+              options={[
+                ...[
+                  {
+                    label: "未分组",
+                    value: 0,
+                  },
+                ],
+                ...(groupList?.map((item) => {
+                  return {
+                    label: item?.name,
+                    value: item?.id,
+                  };
+                }) ?? []),
+              ]}
+              placeholder={TranslateText(["请选择", "Please choose"])}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name={isDisabled ? "" : "defer_seconds"}
+            disabled={isDisabled}
+            required={true}
+            label={TranslateText(["延时告警", "Delayed alarm"])}
+          >
+            <div style={{ marginTop: 6 }}>
+              <Radio.Group
+                defaultValue={2}
+                disabled={isDisabled}
+                onChange={(e) => {
+                  setStatus(e.target.value);
+                  if (e.target.value === 1) {
+                    setDateTime(null);
+                  } else {
+                    setDateTime(0);
+                  }
+                }}
+              >
+                <Radio value={1}>{TranslateText(["开启", "on"])}</Radio>
+                <Radio value={2}>{TranslateText(["关闭", "off"])}</Radio>
+              </Radio.Group>
+              <div
+                style={{
+                  display: "flex",
+                  marginTop: 10,
+                  gap: 8,
+                  alignItems: "center",
+                }}
+              >
+                <span
+                  style={{
+                    color: "var(--dt-text-color1)",
+                    fontWeight: 400,
+                    fontSize: 14,
+                  }}
+                >
+                  {TranslateText(["持续", "Alarm after"])}
+                </span>
+                <Input
+                  disabled={status !== 1 || isDisabled}
+                  value={dateTime}
+                  onChange={(e) => {
+                    console.log(e.target.value);
+                    setDateTime(e.target.value?.replace(/\D/g, ""));
+                  }}
+                  placeholder={TranslateText(["请输入", "Please input"])}
+                  style={{ width: 100 }}
+                />
+                <span
+                  style={{
+                    color: "var(--dt-text-color1)",
+                    fontWeight: 400,
+                    fontSize: 14,
+                  }}
+                >
+                  {deferUnit === 1
+                    ? TranslateText(["秒", "seconds"])
+                    : TranslateText(["分钟", "minutes"])}{" "}
+                  {TranslateText(["后报警", "of duration"])}
+                </span>
+              </div>
+              {dateTime !== null &&
+                ["", undefined, null].indexOf(dateTime) !== -1 &&
+                status === 1 &&
+                !isDisabled && (
+                  <div style={{ color: "var(--dt-error-color1)" }}>
+                    请输入数字
+                  </div>
+                )}
+            </div>
+          </Form.Item>
+        </>
+      )}
     </Form>
   );
 };