cfel-base-components 2.5.12 → 2.5.14

package/src/components/universal-pages/cpcAccount/AddModal/index.tsx

@@ -1,132 +1,316 @@
 import React, { useEffect, useState } from 'react'
-import {
-    Button, Modal, Form, Input,
-} from 'antd';
-export default function index({
-    ModalOpen, //弹框状态
-    editOpenStatus, //关闭弹框
-    editingData, //编辑数据
-    actionFunc, //新增事件
-}: any) {
-    const [form] = Form.useForm();
-
+import { Button, Modal, Form, Input, Radio, Space, message, Alert } from 'antd'
+let timeChange: any
 
-    const formDom = [
-        { title: "名称", key: 'name', type: 'string', required: true },
-        { title: "手机号", key: 'mobile', type: 'mobileint', required: true },
-        { title: "邮箱", key: 'email', type: 'emailstring', required: false },
-    ]
-    useEffect(() => {
-        if (!ModalOpen) return
+export default function Index({
+  ModalOpen, //弹框状态
+  editOpenStatus, //关闭弹框
+  editingData, //编辑数据
+  actionFunc, //新增事件
+  accountGetAccountPasswordFunc //复制
+}: any) {
+  const [form] = Form.useForm()
+  const [passwordType, setPasswordType] = useState('server')
+  const [loading, setLoading] = useState(false)
+  const [disabledType, setDisabledType] = useState(true)
+  const [secondNum, setSecondNum]: any = useState(null) //秒数
+  const [showText, setShowText] = useState('')
+  const formDom = [
+    { title: '名称', key: 'name', type: 'string', required: true, maxLength: 15, showCount: true },
+    {
+      title: '账号',
+      key: 'account',
+      type: 'account',
+      required: true,
+      maxLength: 12,
+      showCount: true
+    },
+    { title: '密码', key: 'passwordType', type: 'psw', required: true },
+    { title: ' ', key: 'password', type: 'pswDiy', required: true },
+    { title: '手机号', key: 'mobile', type: 'mobileint', required: false },
+    { title: '邮箱', key: 'email', type: 'emailstring', required: false }
+  ]
+  const editFormDom = [
+    { title: '名称', key: 'name', type: 'rString', required: false },
+    { title: '账号', key: 'account', type: 'rAccountString', required: false },
+    { title: '密码', key: 'passwordType', type: 'rPswString', required: false },
+    { title: '手机号', key: 'mobile', type: 'rString', required: false },
+    { title: '邮箱', key: 'email', type: 'rString', required: false }
+  ]
+  useEffect(() => {
+    clearInterval(timeChange)
+    return () => {
+      clearInterval(timeChange)
+    }
+  }, [])
+  useEffect(() => {
+    if (!editingData) return
+    init()
+  }, [editingData])
+  const init = () => {
+    setLoading(false)
+    setDisabledType(true)
+    setShowText('关闭(4s)')
+    timeChange = setInterval(
+      () =>
+        setSecondNum((t: any) => {
+          let num = t
+          console.log(t, 't')
+          return --num
+        }),
+      1000
+    )
+  }
+  useEffect(() => {
+    console.log(secondNum, 'secondNum')
+    if (secondNum > 0 && secondNum <= 3) {
+      setShowText(`关闭(${secondNum}s)`)
+    } else {
+      clearInterval(timeChange)
+      setSecondNum(4)
+      setDisabledType(false)
+      setShowText('关闭')
+    }
+  }, [secondNum])
 
-        if (editingData) {
-            console.log(editingData, "editingData")
-            form.setFieldsValue({
-                ...editingData
-            })
-        }
-    }, [ModalOpen])
+  const showCom = ({ title, key, type, required, maxLength, showCount }: any) => {
+    let dom: any = null
+    switch (type) {
+      case 'rString':
+        dom = <Form.Item label={title}>{editingData[key]}</Form.Item>
+        break
+      case 'rAccountString':
+        dom = (
+          <Form.Item label={title}>
+            {editingData[key]}{' '}
+            <a
+              onClick={() => {
+                message.success('复制成功')
+                navigator.clipboard.writeText(editingData[key])
+              }}
+            >
+              复制
+            </a>
+          </Form.Item>
+        )
+        break
 
+      case 'rPswString':
+        dom = (
+          <Form.Item label={title}>
+            <span>
+              ********** <a onClick={() => copy()}>复制</a>
+            </span>
+          </Form.Item>
+        )
+        break
+      case 'string':
+        dom = (
+          <Form.Item label={title} name={key} rules={[{ required: required, message: '请输入' }]}>
+            <Input placeholder='请输入' maxLength={maxLength} showCount={showCount} />
+          </Form.Item>
+        )
+        break
 
-    const showCom = ({ title, key, type, required }: any) => {
-        let dom: any = null
-        switch (type) {
-            case 'string':
-                dom = (<Form.Item
-                    label={title}
-                    name={key}
-                    rules={[{ required: required, message: '请输入' }]}
-                >
-                    <Input placeholder="请输入" />
-                </Form.Item>)
-                break;
-            case 'emailstring':
-                dom = (<Form.Item
-                    label={title}
-                    name={key}
-                    rules={[
-                        { required: required, message: '请输入' },
-                        { pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '请输入正确的邮箱' }
-                    ]}
-                >
-                    <Input placeholder="请输入" />
-                </Form.Item>)
-                break;
-            case 'mobileint':
-                dom = (<Form.Item
-                    label={title}
-                    name={key}
-                    rules={
-                        editingData ? [{ required: required, message: '请输入' }] : [
-                            { required: required, message: '请输入' },
-                            { pattern: /1[0-9]{10}$/, message: '请输入正确的电话号码' }
-                        ]}
-                >
-                    <Input placeholder="请输入"
-                        disabled={editingData ? true : false} />
-                </Form.Item>)
-                break;
-            default:
-                break;
-        }
-        return dom
+      case 'account':
+        dom = (
+          <Form.Item
+            label={title}
+            name={key}
+            rules={[
+              { required: required, message: '请输入' },
+              { pattern: /^[a-zA-Z0-9]+$/, message: '只能输入英文、数字' }
+            ]}
+            extra=''
+          >
+            <Input
+              placeholder='请输入英文字符或数字'
+              addonAfter={`@${(window as any)?.g_config?.tenant?.id}.oncfel.com`}
+              maxLength={maxLength}
+              showCount={showCount}
+            />
+          </Form.Item>
+        )
+        break
+      case 'psw':
+        dom = (
+          <Form.Item label={title} name={key} rules={[{ required: required, message: '请输入' }]}>
+            <Radio.Group>
+              <Space
+                direction='vertical'
+                onChange={(e: any) => {
+                  setPasswordType(e.target.value)
+                }}
+              >
+                <Radio value='server'>生成随机密码（安全性高）</Radio>
+                <Radio value='diy'>自定义密码</Radio>
+              </Space>
+            </Radio.Group>
+          </Form.Item>
+        )
+        break
+      case 'pswDiy':
+        dom = passwordType === 'diy' && (
+          <Form.Item
+            label={null}
+            name={key}
+            rules={[
+              { required: required, message: '请输入' },
+              {
+                pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d!@#$%^&*()_+{}|]{8,32}$/,
+                message: '请输入正确的密码'
+              }
+            ]}
+            extra='密码要求至少包含英文字母和数字，字符数8-32位'
+          >
+            <Input placeholder='请输入' />
+          </Form.Item>
+        )
+        break
+      case 'emailstring':
+        dom = (
+          <Form.Item
+            label={title}
+            name={key}
+            rules={[
+              { required: required, message: '请输入' },
+              {
+                pattern:
+                  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                message: '请输入正确的邮箱'
+              }
+            ]}
+          >
+            <Input placeholder='请输入' />
+          </Form.Item>
+        )
+        break
+      case 'mobileint':
+        dom = (
+          <Form.Item
+            label={title}
+            name={key}
+            rules={[
+              { required: required, message: '请输入' },
+              { pattern: /1[0-9]{10}$/, message: '请输入正确的电话号码' }
+            ]}
+          >
+            <Input placeholder='请输入' />
+          </Form.Item>
+        )
+        break
+      default:
+        break
     }
-
-    const closeModel = () => {
-        form.resetFields()
-        editOpenStatus(false)
+    return dom
+  }
+  const copy = () => {
+    accountGetAccountPasswordFunc({
+      id: editingData?.id
+    }).then((res: any) => {
+      message.success('复制成功')
+      navigator.clipboard.writeText(res)
+    })
+  }
+  const closeModel = () => {
+    form.resetFields()
+    editOpenStatus(false)
+  }
+  const generateRandomString = (minLength = 8, maxLength = 32) => {
+    const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength
+    const possibleChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+    let result = ''
+    for (let i = 0; i < length; i++) {
+      result += possibleChars.charAt(Math.floor(Math.random() * possibleChars.length))
     }
+    return result
+  }
 
-    const modelSubmit = () => {
-        form.validateFields().then((value) => {
-            console.log(value, "value")
-            if (editingData) {
-                value.id = editingData.id
-            }
-            actionFunc(value, editingData ? "edit" : "add").then(() => {
-                form.resetFields()
-            })
-        })
-    }
-    return (
-        <Modal title={editingData ? "编辑账号" : "新增账号"}
-            destroyOnClose={true}
-            open={ModalOpen}
-            onCancel={() => {
-                closeModel()
-            }}
-            footer={[
-                <Button
-                    key="refresh"
-                    onClick={() => {
-                        closeModel()
-                    }}
-                >
-                    取消
-                </Button>,
-                <Button
-                    key="submit"
-                    type="primary"
-                    onClick={() => {
-                        modelSubmit()
-                    }}
-                >
-                    确定
-                </Button>,
-            ]}
-        >
-            <Form
-                form={form}
-                layout={'vertical'}
-                initialValues={{ remember: true }}
-                autoComplete="off"
-            >
-                {
-                    formDom.map((item: any, index: number) => {
-                        return <div key={index}>{showCom(item)}</div>
-                    })
-                }
-            </Form>
-        </Modal>
-    )
+  const modelSubmit = () => {
+    form.validateFields().then(value => {
+      setLoading(true)
+      value.account = `${value.account}@${(window as any)?.g_config?.tenant?.id}.oncfel.com`
+      if (value.passwordType === 'server') {
+        value.password = generateRandomString()
+      }
+      delete value.passwordType
+      actionFunc(value, 'add').then(() => setLoading(false))
+    })
+  }
+  return (
+    <Modal
+      title={editingData ? '查看' : '新增账号'}
+      destroyOnClose={true}
+      open={ModalOpen}
+      closable={false}
+      footer={
+        editingData
+          ? [
+              <Button
+                disabled={disabledType}
+                key='refresh'
+                type='primary'
+                onClick={() => {
+                  closeModel()
+                }}
+              >
+                {showText}
+              </Button>
+            ]
+          : [
+              <Button
+                key='refresh'
+                onClick={() => {
+                  closeModel()
+                }}
+              >
+                取消
+              </Button>,
+              <Button
+                key='submit'
+                type='primary'
+                loading={loading}
+                onClick={() => {
+                  modelSubmit()
+                }}
+              >
+                确定
+              </Button>
+            ]
+      }
+    >
+      {editingData && (
+        <Alert
+          description='新账号初始密码仅可在创建时可复制，请及时保存'
+          type='info'
+          showIcon
+          style={{ marginBottom: '20px' }}
+        />
+      )}
+
+      <Form
+        form={form}
+        layout={editingData ? 'horizontal' : 'vertical'}
+        initialValues={{
+          remember: true,
+          passwordType: 'server'
+        }}
+        autoComplete='off'
+      >
+        {editingData ? (
+          <>
+            {editFormDom.map((item: any, index: number) => {
+              return <div key={index}>{showCom(item)}</div>
+            })}
+          </>
+        ) : (
+          <>
+            {formDom.map((item: any, index: number) => {
+              return <div key={index}>{showCom(item)}</div>
+            })}
+          </>
+        )}
+      </Form>
+    </Modal>
+  )
 }

package/src/components/universal-pages/cpcAccount/EditNameModal/index.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Modal, Form, Input, Radio, Space, message } from 'antd'
+
+export default function Index({
+  ModalOpen, //弹框状态
+  editOpenStatus, //关闭弹框
+  editingData, //编辑数据
+  actionFunc //新增事件
+}: any) {
+  const [form] = Form.useForm()
+  const formDom = [
+    { title: '名称', key: 'name', type: 'string', required: true, maxLength: 15, showCount: true }
+  ]
+
+  useEffect(() => {
+    if (!ModalOpen) return
+    if (editingData) {
+      console.log(editingData, 'editingData')
+      form.setFieldsValue({
+        ...editingData
+      })
+    }
+  }, [ModalOpen])
+
+  const showCom = ({ title, key, type, required, maxLength, showCount }: any) => {
+    let dom: any = null
+    switch (type) {
+      case 'string':
+        dom = (
+          <Form.Item label={title} name={key} rules={[{ required: required, message: '请输入' }]}>
+            <Input placeholder='请输入' maxLength={maxLength} showCount={showCount} />
+          </Form.Item>
+        )
+        break
+    }
+    return dom
+  }
+
+  const closeModel = () => {
+    form.resetFields()
+    editOpenStatus(false)
+  }
+
+  const modelSubmit = () => {
+    form.validateFields().then(value => {
+      actionFunc({
+        id: editingData?.id,
+        name: value?.name,
+        account: editingData?.account
+      }).then(() => {
+        form.resetFields()
+      })
+    })
+  }
+  return (
+    <Modal
+      title={'修改名称'}
+      destroyOnClose={true}
+      open={ModalOpen}
+      onCancel={() => {
+        closeModel()
+      }}
+      footer={[
+        <Button
+          key='refresh'
+          onClick={() => {
+            closeModel()
+          }}
+        >
+          取消
+        </Button>,
+        <Button
+          key='submit'
+          type='primary'
+          onClick={() => {
+            modelSubmit()
+          }}
+        >
+          确定
+        </Button>
+      ]}
+    >
+      <Form
+        form={form}
+        layout={'vertical'}
+        initialValues={{
+          remember: true
+        }}
+        autoComplete='off'
+      >
+        {formDom.map((item: any, index: number) => {
+          return <div key={index}>{showCom(item)}</div>
+        })}
+      </Form>
+    </Modal>
+  )
+}