Ver código fonte

feat: 添加弹窗弹窗-单位名称Popover浮层层级bug

lanjianrong 5 anos atrás
pai
commit
55e33c8cdd

+ 29 - 48
src/pages/Customer/Company/components/AddCompany/CompanyFormItem.jsx

@@ -41,7 +41,7 @@ const CompanyFormItem = ({ value, onChange }) => {
 
   const showCompanyDrawer = id => {
     setDrawerProps({
-      zIndex: 1040,
+      // zIndex: 1040,
       closable: true,
       onClose: () => toggleDrawer(),
       bodyStyle: {
@@ -54,49 +54,23 @@ const CompanyFormItem = ({ value, onChange }) => {
 
   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
+      zIndex={1250}
+      placement="bottom"
+      visible={visible && list && list.length}
+      onVisibleChange={e => setState({ ...state, visible: e })}
+      title={
+        <Alert
+          message="已存在同名单位, 请确认是否继续添加"
+          type="warning"
+          style={{ padding: '5px', margin: '10px 0' }}
         />
-      </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 => (
+      }
+      trigger="click"
+      content={
+        <ul className="list-none">
+          {list?.map(item => {
+            return (
               <p key={item.id}>
                 <span
                   className="text-primary cursor-pointer hover:text-hex-967bbd"
@@ -106,11 +80,18 @@ const CompanyFormItem = ({ value, onChange }) => {
                 <span className="mx-1">/</span>
                 <span>{item.districtName?.replaceAll(' / ', ',')}</span>
               </p>
-            ))}
-          </ul>
-        </div>
-      ) : null} */}
-    </div>
+            )
+          })}
+        </ul>
+      }>
+      <Input
+        type="text"
+        autoComplete="false"
+        value={inputVal}
+        onChange={handleOnInputChange}
+        className="company-input"
+      />
+    </Popover>
   )
 }