cfel-base-components 2.5.9 → 2.5.11

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

@@ -1,132 +1,271 @@
 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 } 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
-
-        if (editingData) {
-            console.log(editingData, "editingData")
-            form.setFieldsValue({
-                ...editingData
-            })
-        }
-    }, [ModalOpen])
+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 },
+    { title: '账号', key: 'account', type: 'account', required: 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: 'rString', 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])
 
+  const showCom = ({ title, key, type, required }: any) => {
+    let dom: any = null
+    switch (type) {
+      case 'rString':
+        dom = <Form.Item label={title}>{editingData[key]}</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='请输入' />
+          </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: '请输入' }]}>
+            <Input placeholder='请输入' addonAfter={`@${(window as any).g_config?.tenant?.id}.oncfel.com`} />
+          </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>
+            ]
+      }
+    >
+      <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/ResetModal/index.tsx

@@ -0,0 +1,232 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Modal, Form, Input, Radio, Space, message } from 'antd'
+let timeChange: any
+
+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 [stepNext, setStepNext] = useState(false)
+  const formDom = [
+    { title: '账号', key: 'account', type: 'account', required: true },
+    { title: '密码', key: 'passwordType', type: 'psw', required: true },
+    { title: ' ', key: 'password', type: 'pswDiy', required: true }
+  ]
+  const nextFormDom = [
+    { title: '账号', key: 'account', type: 'rString', required: false },
+    { title: '密码', key: 'passwordType', type: 'rPwString', required: false }
+  ]
+  useEffect(() => {
+    return () => {
+      clearInterval(timeChange)
+    }
+  }, [])
+
+  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])
+
+  useEffect(() => {
+    if (!ModalOpen) return
+    if (editingData) {
+      console.log(editingData, 'editingData')
+      clearInterval(timeChange)
+      form.setFieldsValue({
+        ...editingData
+      })
+    }
+  }, [ModalOpen])
+
+  const showCom = ({ title, key, type, required }: any) => {
+    let dom: any = null
+    switch (type) {
+      case 'rString':
+        dom = (
+          <Form.Item label={title} name={key} rules={[{ required: required, message: '请输入' }]}>
+            <span>{editingData?.[key]}</span>
+          </Form.Item>
+        )
+        break
+      case 'rPwString':
+        dom = (
+          <Form.Item label={title} name={key} rules={[{ required: required, message: '请输入' }]}>
+            <span>
+              ******* <a onClick={() => copy()}>复制</a>
+            </span>
+          </Form.Item>
+        )
+        break
+      case 'account':
+        dom = (
+          <Form.Item label={title} name={key} rules={[{ required: required, message: '请输入' }]}>
+            <Input placeholder='请输入' disabled />
+          </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
+      default:
+        break
+    }
+    return dom
+  }
+  const copy = () => {
+    accountGetAccountPasswordFunc({
+      id: editingData?.id
+    }).then((res: any) => {
+      message.success('复制成功')
+      navigator.clipboard.writeText(res)
+    })
+  }
+  const closeModel = () => {
+    form.resetFields()
+    editOpenStatus(false)
+    setStepNext(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 => {
+      if (value.passwordType === 'server') {
+        value.password = generateRandomString()
+      }
+      actionFunc({
+        id: editingData?.id,
+        newPassword: value.password
+      }).then(() => {
+        // form.resetFields()
+        setStepNext(true)
+        init()
+      })
+    })
+  }
+  return (
+    <Modal
+      title={'重置密码'}
+      destroyOnClose={true}
+      open={ModalOpen}
+      closable={false}
+      footer={
+        stepNext
+          ? [
+              <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>
+            ]
+      }
+    >
+      <Form
+        form={form}
+        layout={'vertical'}
+        initialValues={{
+          remember: true,
+          passwordType: 'server'
+        }}
+        autoComplete='off'
+      >
+        {(stepNext ? nextFormDom : formDom).map((item: any, index: number) => {
+          return <div key={index}>{showCom(item)}</div>
+        })}
+      </Form>
+    </Modal>
+  )
+}

package/src/components/universal-pages/cpcAccount/api.ts

@@ -1,18 +1,34 @@
 import request from "../../../apiRequest/config"
 
+
 //分页查询账号
-export const accountPage= (data?: any) => {
-    return request.post("/api/permission/account/page.json", { ...data })
-}
-//指定租户下创建账号
-export const accountCreateAccount = (data?: any) => {
-    return request.post("/api/permission/account/createAccount.json", { ...data })
-}
-//指定租户下修改账号
-export const accountUpdateAccount = (data?: any) => {
-    return request.post("/api/permission/account/updateAccount.json", { ...data })
-}
-//指定租户下删除账号
-export const accountDeleteAccount = (data?: any) => {
-    return request.get("/api/permission/account/deleteAccount.json", { params:{...data} })
-}
+export const accountPage = (data?: any) => {
+    return request.post('/sdk/permission/rbac/console/account/page.json', { ...data })
+  }
+  //指定租户下创建账号
+  export const accountCreateAccount = (data?: any) => {
+    return request.post('/sdk/permission/rbac/console/account/createAccount.json', { ...data })
+  }
+  //指定租户下修改账号
+  export const accountUpdateAccount = (data?: any) => {
+    return request.post('/api/permission/account/updateAccount.json', { ...data })
+  }
+  //指定租户下删除账号
+  export const accountDeleteAccount = (data?: any) => {
+    return request.get('/sdk/permission/rbac/console/account/deleteAccount.json', {
+      params: { ...data }
+    })
+  }
+  //按账号id查询账号信息
+  export const accountGetAccount = (data?: any) => {
+    return request.post('/sdk/permission/rbac/console/account/getAccount.json', { ...data })
+  }
+  //按账号id查询账号信息
+  export const accountGetAccountPassword = (data?: any) => {
+    return request.post('/sdk/permission/rbac/console/account/getAccountPassword.json', { ...data })
+  }
+  //按账号id查询账号信息
+  export const accountResetPw = (data?: any) => {
+    return request.post('/sdk/permission/rbac/console/account/resetPw.json', { ...data })
+  }
+