cfel-base-components 2.5.12 → 2.5.14

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

@@ -0,0 +1,240 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Modal, Form, Input, Radio, Space, message, Alert } 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>
+            ]
+      }
+    >
+      {stepNext && (
+        <Alert
+          description='新的重置密码仅可本弹窗时复制，关闭后不可再复制，请及时保存'
+          type='info'
+          showIcon
+          style={{ marginBottom: '20px' }}
+        />
+      )}
+      <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,38 @@
 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 })
+  }
+  //更新账号
+  export const updateAccount = (data?: any) => {
+    return request.post('/sdk/permission/rbac/console/account/updateAccount.json', { ...data })
+  }
+  

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

@@ -1,31 +1,48 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react'
+
 import PageContainer from '../../base-component/PageContainer';
 import QueryFilter from '../../base-component/QueryFilter';
 import ProTable from '../../base-component/ProTable';
 import Pagination from '../../base-component/Pagination';
-import { ProFormText, } from '@ant-design/pro-components';
-import { Space, Button, message,Modal } from 'antd';
-import { get } from 'lodash';
-import { timeFormatter } from '../../../utils';
 import useTableHooks from "../../../hooks/useTableHooks"
+import { timeFormatter, getUrlParams } from '../../../utils';
+
+import { ProFormText } from '@ant-design/pro-components'
+import { Space, Button, message, Modal } from 'antd'
+import { get } from 'lodash'
+
+import { FormOutlined } from '@ant-design/icons'
 import {
-  accountPage, accountCreateAccount,
-  accountUpdateAccount, accountDeleteAccount
-} from "./api"
+  accountPage,
+  accountCreateAccount,
+  accountUpdateAccount,
+  accountDeleteAccount,
+  accountGetAccount,
+  accountGetAccountPassword,
+  accountResetPw,
+  updateAccount
+} from './api'
 import AddModal from './AddModal'
-import "./index.scss"
+import ResetModal from './ResetModal'
+import EditNameModal from './EditNameModal'
+
+import './index.scss'
 
 export interface AccountProps {
-  historyAction: any;
+  historyAction: any
 }
 
-export default function Account({
-  historyAction
-}: AccountProps) {
+export default function Account({ historyAction }: AccountProps) {
   const searchFormRef: any = useRef()
 
   const [ModalOpen, setModalOpen] = useState(false)
-  const [editingData, setEditingData] = useState(null);//编辑数据
+  const [editingData, setEditingData]: any = useState(null) //编辑数据
+
+  const [resetModalOpen, setResetModalOpen] = useState(false)
+  const [resetEditingData, setResetEditingData]: any = useState(null) //编辑数据
+
+  const [editNameModalOpen, setEditNameModalOpen] = useState(false)
+  const [editNameData, setEditNameData]: any = useState(null) //编辑数据
 
   useEffect(() => {
     execute()
@@ -38,41 +55,22 @@ export default function Account({
       key: 'name',
       render: (text: any, data: any) => {
         return (
-          <span
-            style={{ cursor: "pointer", color: "#1677ff" }}
-            onClick={() => {
-              historyAction?.push({
-                pathname: `/account-info`,
-                search: `?id=${data.id}`,
-              });
-            }}
-          >
-            {data?.name}
-          </span>
-        );
-      },
+          <Space>
+            <span>{data?.name}</span>
+            <FormOutlined
+              style={{ cursor: 'pointer', color: '#1677ff' }}
+              onClick={() => openEditName(data)}
+            />
+          </Space>
+        )
+      }
     },
     {
       title: '账号',
       dataIndex: 'account',
-      key: 'account',
-    },
-    {
-      title: '工号',
-      dataIndex: 'jobNumber',
-      key: 'jobNumber',
-    },
-    {
-      title: '手机号',
-      dataIndex: 'mobile',
-      key: 'mobile',
-    },
-    {
-      title: '邮箱',
-      dataIndex: 'email',
-      key: 'email',
-      ellipsis: true,
+      key: 'account'
     },
+
     {
       title: '是否主账号',
       dataIndex: 'isAdmin',
@@ -107,39 +105,48 @@ export default function Account({
       fixed: 'right',
       width: 150,
       render: (rowdata: any) => (
-
         <Space>
-          <a onClick={() => {
-            setEditingData(rowdata)
-            setModalOpen(true)
-          }} >编辑</a>
+          <a
+            onClick={() => {
+              setResetEditingData(rowdata)
+              setResetModalOpen(true)
+            }}
+          >
+            重置密码
+          </a>
           <a
             onClick={() => {
               historyAction?.push({
                 pathname: `/account-info`,
-                search: `?id=${rowdata.id}`,
-              });
+                search: `?id=${rowdata.id}`
+              })
             }}
           >
             配置
           </a>
-          <a onClick={() => {
-            Modal.confirm({
-              title: `确认删除${rowdata?.name}吗？`,
-              onOk: () => {
-                DeleteFunc(rowdata?.id)
-              }
-            })
-          }} >删除</a>
+          {rowdata.isAdmin ? null : (
+            <a
+              onClick={() => {
+                Modal.confirm({
+                  title: `确认删除${rowdata?.name}吗？`,
+                  onOk: () => {
+                    DeleteFunc(rowdata?.id)
+                  }
+                })
+              }}
+            >
+              删除
+            </a>
+          )}
         </Space>
-      ),
-    },
-  ];
+      )
+    }
+  ]
 
   const handleOnReset: any = async (values: any) => {
     searchFormRef.current = { ...values }
     execute({
-      innerPageNo: 1,
+      innerPageNo: 1
     })
   }
 
@@ -148,17 +155,14 @@ export default function Account({
     execute()
   }
 
-  const readDataList = ({
-    innerPageNo,
-    innerPageSize,
-  }: any) => {
+  const readDataList = ({ innerPageNo, innerPageSize }: any) => {
     return accountPage({
       currentPage: innerPageNo,
       pageSize: innerPageSize,
-      ...searchFormRef.current,
+      ...searchFormRef.current
     }).then((res: any) => {
-      let records = get(res, "records", [])
-      let total = get(res, "total", 0)
+      let records = get(res, 'records', [])
+      let total = get(res, 'total', 0)
       return {
         ...res,
         dataList: records,
@@ -179,63 +183,111 @@ export default function Account({
     setEditingData(null)
   }
   const actionFunc = (data: any, type: string) => {
-    return (type == 'add' ? accountCreateAccount : accountUpdateAccount)({ ...data }).then((res) => {
-      message.success(`${type == 'add' ? '新增' : '更新'}成功`)
-      setModalOpen(false)
-      setEditingData(null)
+    return accountCreateAccount({ ...data }).then((res: any) => {
+      message.success(`新增成功`)
+      accountGetAccountFunc(res)
       execute()
     })
   }
-  const DeleteFunc = (id:any)=>{
+  const accountGetAccountFunc = (id: any) => {
+    accountGetAccount({
+      id
+    }).then((res: any) => {
+      setEditingData(res)
+    })
+  }
+  const DeleteFunc = (id: any) => {
     accountDeleteAccount({
-        id,
+      id
     }).then((res: any) => {
-        message.success('删除成功')
-        execute()
-      })
-}
+      message.success('删除成功')
+      execute()
+    })
+  }
+  const accountGetAccountPasswordFunc = (data: any) => {
+    return accountGetAccountPassword(data)
+  }
+
+  const actionResetFunc = (data: any) => {
+    return accountResetPw({ ...data }).then((res: any) => {
+      message.success(`重置成功`)
+    })
+  }
+  const setResetModalOpenFunc = (type: boolean) => {
+    setResetModalOpen(type)
+    setResetEditingData(null)
+  }
+
+  const openEditName = (data: any) => {
+    setEditNameModalOpen(true)
+    setEditNameData(data)
+  }
+  const setEditModalOpenFunc = (type: boolean) => {
+    setEditNameModalOpen(type)
+    setEditNameData(null)
+  }
+  const actionEditFunc = (data: any) => {
+    return updateAccount({ ...data }).then((res: any) => {
+      message.success(`更新名称成功`)
+      setEditModalOpenFunc(false)
+      execute()
+    })
+  }
   return (
     <PageContainer>
-      <QueryFilter
-        onReset={handleOnReset}
-        onFinish={handleOnFinish}
-      >
-        <ProFormText name="name" label="名称" />
-        <ProFormText name="account" label="账号" />
+      <QueryFilter onReset={handleOnReset} onFinish={handleOnFinish}>
+        <ProFormText name='name' label='名称' />
+        <ProFormText name='account' label='账号' />
       </QueryFilter>
       <ProTable
-      columnsState={{
-        persistenceKey: 'base_cpcAccount',
-        persistenceType: 'localStorage'
-      }}
+        columnsState={{
+          persistenceKey: 'base_cpcAccount',
+          persistenceType: 'localStorage'
+        }}
         toolBarRender={() => {
           return [
             <Button
-              type="primary"
+              key='add'
+              type='primary'
               onClick={() => {
                 setModalOpen(true)
               }}
             >
               新增账号
-            </Button>,
-          ];
+            </Button>
+          ]
         }}
-        headerTitle={"账号列表"}
+        headerTitle={'账号列表'}
         dataSource={dataList}
         loading={isLoading}
         columns={columns}
-        rowKey="id"
+        rowKey='id'
         options={{
           reload: handleRoload
         }}
       />
+
+      <Pagination {...pagination} />
+      <ResetModal
+        ModalOpen={resetModalOpen} //弹框状态
+        editOpenStatus={setResetModalOpenFunc} //关闭弹框
+        editingData={resetEditingData} //编辑数据
+        actionFunc={actionResetFunc} //新增事件
+        accountGetAccountPasswordFunc={accountGetAccountPasswordFunc}
+      />
       <AddModal
         ModalOpen={ModalOpen}
         editOpenStatus={setModalOpenFunc} //修改状态事件
         editingData={editingData} //当前数据
-        actionFunc={actionFunc}//事件
+        actionFunc={actionFunc} //事件
+        accountGetAccountPasswordFunc={accountGetAccountPasswordFunc}
+      />
+      <EditNameModal
+        ModalOpen={editNameModalOpen} //弹框状态
+        editOpenStatus={setEditModalOpenFunc} //关闭弹框
+        editingData={editNameData} //编辑数据
+        actionFunc={actionEditFunc} //新增事件
       />
-      <Pagination  {...pagination} />
     </PageContainer>
   )
 }

package/src/components/universal-pages/cpcAccountInfo/index.tsx

@@ -130,6 +130,7 @@ export default function AccountInfo({ isShowTab, getAuthTree, getAccountAuthTree
       fixed: 'right',
       render: (rowdata: any) => (
         <Space>
+        {accountInfo?.isAdmin && rowdata.roleCode === 'admin' ? null : (
           <a
             onClick={() => {
               Modal.confirm({
@@ -143,7 +144,8 @@ export default function AccountInfo({ isShowTab, getAuthTree, getAccountAuthTree
           >
             解绑
           </a>
-        </Space>
+        )}
+      </Space>
       )
     }
   ]

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import {
     Button, Modal, Form, Input,
 } from 'antd';
-export default function index({
+export default function Index({
     ModalOpen, //弹框状态
     editOpenStatus, //关闭弹框
     editingData, //编辑数据