Explorar o código

feat: 单位名称增加浮层提示已存在的单位

lanjianrong %!s(int64=5) %!d(string=hai) anos
pai
achega
c4a51edada

+ 1 - 0
src/pages/Customer/Client/components/AddClient/index.jsx

@@ -28,6 +28,7 @@ const AddClient = props => {
     <ModalDragForm
       {...layout}
       formRef={formRef}
+      modalProps={{ zIndex: 1050 }}
       title="添加客户"
       onVisibleChange={visible => {
         if (visible) {

+ 1 - 0
src/pages/Customer/Client/components/ClientDetail/AddRecord.jsx

@@ -21,6 +21,7 @@ const AddRecord = props => {
 
   return (
     <ModalDragForm
+      modalProps={{ zIndex: 1050 }}
       layout="vertical"
       title="添加服务记录"
       formRef={formRef}

+ 117 - 0
src/pages/Customer/Company/components/AddCompany/CompanyFormItem.jsx

@@ -0,0 +1,117 @@
+import { useModal } from '@/components/Modal'
+import consts from '@/consts'
+import { queryCompany } from '@/services/customer'
+import { useDebounceFn } from 'ahooks'
+import { Input, Alert, Popover } from 'antd'
+import CompanyDetail from '../CompanyDetail'
+import { useState } from 'react'
+
+const CompanyFormItem = ({ value, onChange }) => {
+  // const ref = useRef(null)
+  const { toggleDrawer, setDrawerProps } = useModal()
+  const [state, setState] = useState({
+    inputVal: value,
+    visible: false,
+    list: null
+  })
+  const triggerChange = changedValue => {
+    onChange?.(changedValue)
+  }
+
+  const queryList = async search => {
+    if (!search) {
+      setState({ ...state, list: null })
+      return
+    }
+    const { code = -1, data } = await queryCompany({ current: 1, pageSize: 999, search })
+    if (code === consts.RET_CODE.SUCCESS) {
+      const { customer = [] } = data
+      setState({ ...state, list: customer })
+    }
+  }
+
+  const { run: handleQueryList } = useDebounceFn(queryList, { wait: 500 })
+
+  const handleOnInputChange = async e => {
+    const val = e.target.value || ''
+    setState({ ...state, inputVal: val })
+    await handleQueryList(val)
+    triggerChange(val)
+  }
+
+  const showCompanyDrawer = id => {
+    setDrawerProps({
+      zIndex: 1040,
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh'
+      },
+      children: <CompanyDetail dataId={id} />
+    })
+    toggleDrawer()
+  }
+
+  const { visible, list, inputVal } = state
+  return (
+    <div className="w-full relative">
+      <Popover
+        placement="bottom"
+        visible={visible && list && list.length}
+        onVisibleChange={e => setState({ ...state, visible: e })}
+        title={
+          <Alert
+            message="已存在同名单位, 请确认是否继续添加"
+            type="warning"
+            style={{ padding: '5px', margin: '10px 0' }}
+          />
+        }
+        trigger="click"
+        content={
+          <ul className="list-none mt-2">
+            {list?.map(item => (
+              <p key={item.id}>
+                <span
+                  className="text-primary cursor-pointer hover:text-hex-967bbd"
+                  onClick={() => showCompanyDrawer(item.id)}>
+                  {item.companyName}
+                </span>
+                <span className="mx-1">/</span>
+                <span>{item.districtName?.replaceAll(' / ', ',')}</span>
+              </p>
+            ))}
+          </ul>
+        }>
+        <Input
+          type="text"
+          autoComplete="false"
+          value={inputVal}
+          onChange={handleOnInputChange}
+          className="company-input"
+        />
+      </Popover>
+      {/* {list && list.length ? (
+        <div
+          className="company-list absolute w-full top-40px z-10 border p-4 shadow-card bg-light-300"
+          ref={ref}>
+
+          <ul className="list-none mt-2">
+            {list?.map(item => (
+              <p key={item.id}>
+                <span
+                  className="text-primary cursor-pointer hover:text-hex-967bbd"
+                  onClick={() => showCompanyDrawer(item.id)}>
+                  {item.companyName}
+                </span>
+                <span className="mx-1">/</span>
+                <span>{item.districtName?.replaceAll(' / ', ',')}</span>
+              </p>
+            ))}
+          </ul>
+        </div>
+      ) : null} */}
+    </div>
+  )
+}
+
+export default CompanyFormItem

+ 5 - 3
src/pages/Customer/Company/components/AddCompany/index.jsx

@@ -7,6 +7,7 @@ import { connect } from 'dva'
 import { ChangeCompMap } from '../ChangeCompany'
 import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 import { isNullOrUnDef } from '@/utils/is'
+import CompanyFormItem from './CompanyFormItem'
 
 const AddCompanyModal = ({ reload, dataId, dataType, onConfirm, dispatch, natures }) => {
   const formRef = useRef()
@@ -64,12 +65,13 @@ const AddCompanyModal = ({ reload, dataId, dataType, onConfirm, dispatch, nature
         !isNullOrUnDef(reload) && reload()
         return true
       }}>
-      <ProFormText
+      <Form.Item
         name="companyName"
         label="单位名称"
         placeholder="请输入单位全称"
-        rules={[{ required: true, message: '请输入单位全称' }]}
-      />
+        rules={[{ required: true, message: '请输入单位全称' }]}>
+        <CompanyFormItem />
+      </Form.Item>
       {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
       <Form.Item
         name="districtIds"

+ 1 - 2
src/services/customer.js

@@ -150,10 +150,9 @@ export async function queryNatures() {
  * @param {*} payload 载荷
  */
 export async function queryCompany(params) {
-  const data = await request.post('/customer/list', {
+  return request.post('/customer/list', {
     data: { current: 1, ...params }
   })
-  return data
 }
 
 /**