✨ feat: 新增连接有效期弹窗

src/components/keyDelay/index.jsx

@@ -0,0 +1,139 @@
+import FormItem from "@/components/form-item/main"
+import Form from "@/components/form/main"
+import { useSetState } from "ahooks"
+import moment from "moment"
+import { useRef } from "react"
+import "./index.less"
+import { Button, DateRangePicker, Input, Notify, Radio } from "zent"
+export default ({ data, onColes }) => {
+  const ref = useRef()
+  const [model, setModel] = useSetState({
+    expiration_type: "1",
+    expiration_value: ""
+  })
+
+  function submit() {
+    if (model.expiration_type == 2 && model.expiration_value.length < 1) {
+      return Notify.error("请选择固定时间段")
+    }
+    if (model.expiration_type == 3 && !model.expiration_value) {
+      return Notify.error("请输入接口调取后有效期")
+    }
+
+    console.log(data)
+  }
+
+  function onDisabledRange(date, type) {
+    let step1 = JSON.parse(sessionStorage.getItem("knockGold_effectDate"))
+    let isdisabled = false
+    let str = moment(date).format("YYYY-MM-DD HH:mm:ss")
+    let isDay = moment(step1.end_time).format("HH:mm:ss")
+    if (type == "start") {
+      if (isDay < "23:59:59") {
+        isdisabled =
+          moment(str).isBefore(step1.begin_time) ||
+          moment(str).subtract(1, "days").isAfter(step1.end_time)
+      } else {
+        isdisabled = moment(str).isBefore(step1.begin_time) || moment(str).isAfter(step1.end_time)
+      }
+    }
+
+    if (type == "end") {
+      isdisabled =
+        moment(str).add(1, "days").isBefore(step1.begin_time) || moment(str).isAfter(step1.end_time)
+    }
+    return isdisabled
+  }
+
+  return (
+    <>
+      <Form ref={ref} model={model} id="keyDelay">
+        <FormItem labelname="key码有效期" prop="expiration_type" id="keyDelay">
+          <Radio.Group
+            value={model.expiration_type}
+            onChange={(e) => {
+              setModel({
+                expiration_value: "",
+                expiration_type: e.target.value
+              })
+            }}
+          >
+            <Radio value={"1"}>不设置</Radio>
+            <Radio value={"2"}>固定时间段</Radio>
+            <Radio value={"3"}>接口调取后有效期</Radio>
+          </Radio.Group>
+        </FormItem>
+
+        {model.expiration_type === "2" ? (
+          <FormItem labelname="固定时间段" id="keyDelay">
+            <DateRangePicker
+              className="zent-datepicker-plan"
+              showTime={{
+                format: "HH:mm:ss",
+                defaultTime: [moment().format("HH:mm:ss"), "23:59:59"]
+              }}
+              format="YYYY-MM-DD HH:mm:ss"
+              value={model.expiration_value}
+              onChange={(e) => {
+                setModel({
+                  expiration_value: e
+                })
+              }}
+              disabledDate={onDisabledRange}
+            />
+          </FormItem>
+        ) : null}
+
+        {model.expiration_type === "3" ? (
+          <FormItem labelname="接口调取后有效期" id="keyDelay">
+            <Input
+              placeholder="请输入天数"
+              value={model.expiration_value}
+              width={120}
+              maxLength={5}
+              onChange={(e) => {
+                let time = sessionStorage.getItem("knockGold_effectDate")
+                if (time) {
+                  time = JSON.parse(time)
+
+                  // 开始时间和结束时间
+                  let begin_time = new Date(time.begin_time)
+                  let end_time = new Date(time.end_time)
+
+                  // 计算毫秒数差异
+                  let timeDiff = end_time.getTime() - begin_time.getTime()
+
+                  // 将毫秒数差异转换为天数
+                  let daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24))
+
+                  // 输入的天数必须小于等于天数
+                  if (daysDiff >= Number(e.target.value)) {
+                    setModel({
+                      expiration_value: e.target.value
+                    })
+                  } else {
+                    Notify.clear()
+                    Notify.error(`key码有效期不能超过计划有效期(${daysDiff}天)`)
+                    return
+                  }
+                }
+              }}
+            />
+          </FormItem>
+        ) : null}
+        <p className="keyDelay-but">
+          <Button
+            onClick={() => {
+              onColes(false)
+            }}
+          >
+            取消
+          </Button>
+          <Button type="primary" onClick={submit} htmlType="submit">
+            提交
+          </Button>
+        </p>
+      </Form>
+    </>
+  )
+}

src/components/keyDelay/index.less

@@ -0,0 +1,15 @@
+ .form {
+     #keyDelay {
+         margin-bottom: 20px;
+     }
+
+     #keyDelay .form-compontent {
+         padding-top: 0 !important;
+     }
+
+     .keyDelay-but {
+         display: flex;
+         justify-content: flex-end;
+         margin-top: 40px;
+     }
+ }