|
@@ -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
|