feat: 创建企业

src/pages/Product/Road/Enterprise/components/AddEnterprise/EnterpriseFormItem.jsx

@@ -1,29 +1,99 @@
+import { validateEnum } from '@/pages/Customer/Company/components/AddCompany/CompanyFormItem'
+import { queryRoadpricingListV2 } from '@/services/product'
 import { Alert, Input, Popover } from 'antd'
 import React, { useState } from 'react'
+import consts from '@/consts'
+import { useDebounceFn } from 'ahooks'
+import { useModal } from '@/components/ModalStore'
 
-const EnterpriseFormItem = () => {
+const EnterpriseFormItem = ({ value, onChange, validateFn }) => {
   const [state, setState] = useState({
-    visible: false
+    inputVal: value,
+    visible: false,
+    roadlist: null
   })
-  const { visible, list, inputVal } = state
+  const triggerChange = changedValue => {
+    onChange?.(changedValue)
+  }
+  const { visible, roadlist, inputVal } = state
+  const dispatchModal = useModal()
+  const queryRoadList = async search => {
+    if (!search) return
+    const { code = -1, data } = await queryRoadpricingListV2({
+      current: 1,
+      pageSize: 10,
+      search,
+      projectType: 1
+    })
+    if (code === consts.RET_CODE.SUCCESS) {
+      const { list = [] } = data
+      setState({ ...state, roadlist: list, visible: !!list?.length })
+      if (list?.length) {
+        validateFn(validateEnum.Success)
+      } else {
+        validateFn(validateEnum.Error)
+      }
+    }
+  }
+  const { run: handleQueryList, cancel: cancelQuerying } = useDebounceFn(queryRoadList, {
+    wait: 600
+  })
+
+  const handleOnInputChange = async e => {
+    const val = e.target.value || ''
+    if (!val) {
+      cancelQuerying()
+      setState({ ...state, inputVal: val, roadlist: null, visible: false })
+      validateFn(validateEnum.Error)
+    } else {
+      setState({ ...state, inputVal: val })
+      validateFn(validateEnum.Validating)
+      handleQueryList(val)
+    }
+    triggerChange(val)
+  }
   return (
     <Popover
       placement="bottom"
-      visible={visible}
+      visible={roadlist && roadlist.length && visible}
       onVisibleChange={e => setState({ ...state, visible: e })}
-      title={
-        <Alert
-          message="当前企业名称已存在，请重新输入"
-          type="error"
-          style={{ padding: '5px', margin: '10px 0' }}
-        />
-      }
-      trigger="click">
+      // title={
+      //   <Alert
+      //     message=""
+      //     type="error"
+      //     style={{ padding: '5px', margin: '10px 0' }}
+      //   />
+      // }
+      trigger="click"
+      content={
+        !roadlist.length == false ? (
+          <div className="list-none">
+            {roadlist?.map(item => {
+              return (
+                <p key={item._id}>
+                  <span
+                    className="text-primary cursor-pointer hover:text-hex-967bbd"
+                    onClick={() =>
+                      dispatchModal('D_PERSONAL_DETAIL', { dataId: item.ssoId, projectType: 1 })
+                    }>
+                    {item.mobile}
+                  </span>
+                  <span className="mx-1">/</span>
+                  <span>{item.username}</span>
+                </p>
+              )
+            })}
+          </div>
+        ) : (
+          <div>暂无数据</div>
+        )
+      }>
       <Input
         type="text"
         autoComplete="false"
-        // value={inputVal}
-        placeholder="请输入企业全称"
+        value={inputVal}
+        placeholder="请输入管理员名称"
+        onChange={handleOnInputChange}
       />
     </Popover>
   )

src/pages/Product/Road/Enterprise/components/AddEnterprise/SearchCompanyInput.jsx

@@ -49,7 +49,7 @@ const SearchCompanyInput = ({ value, onChange, validateFn }) => {
     <Input
       type="text"
       autoComplete="false"
-      placeholder="请输入企业"
+      placeholder="请输入企业名称"
       value={inputVal}
       onChange={handleOnInputChange}
     />

src/pages/Product/Road/Enterprise/components/AddEnterprise/index.jsx

@@ -55,7 +55,7 @@ const AddEnterprise = ({ visible, onCancel, onConfirm, ...resetModalProps }) =>
       visible={visible}
       onCancel={onCancel}
       title="创建企业"
-      width="40vw"
+      width="35vw"
       footer={
         <div>
           <Button type="default" className="mr-2" onClick={onCancel}>
@@ -65,8 +65,7 @@ const AddEnterprise = ({ visible, onCancel, onConfirm, ...resetModalProps }) =>
             确认
           </Button>
         </div>
-      }
-    >
+      }>
       <Form {...layout} form={formRef}>
         <Form.Item
           name="companyName"
@@ -75,19 +74,30 @@ const AddEnterprise = ({ visible, onCancel, onConfirm, ...resetModalProps }) =>
           validateStatus={validStatus.companyName}
           help={
             validStatus.companyName === validateEnum.Error ? '当前企业名称已存在，请重新输入' : null
-          }
-        >
+          }>
           <SearchCompanyInput
             validateFn={status => setValidStatus({ ...validStatus, companyName: status })}
           />
         </Form.Item>
-        <Form.Item name="licenceNum" label="授权数量" rules={[{ required: true }]}>
+        <Form.Item
+          name="licenceNum"
+          label="授权数量"
+          rules={[{ required: true }]}
+          tooltip="企业管理员在前台可设置的企业最大人员数量">
           <InputNumber min={1} max={99} />
         </Form.Item>
         <Form.Item name="licenceNum" label="授权定额" rules={[{ required: true }]}>
           <EnterpriseSelect />
         </Form.Item>
-        <ProFormText name="adminID" label="管理员名称" rules={[{ required: true }]} />
+        <Form.Item
+          name="adminID"
+          label="管理员名称"
+          hasFeedback
+          validateStatus={validStatus.adminID}>
+          <EnterpriseFormItem
+            validateFn={status => setValidStatus({ ...validStatus, adminID: status })}
+          />
+        </Form.Item>
       </Form>
     </Modal>
   )