feat: 弹窗调整

src/pages/Customer/Client/components/ClientDetail/AddRecord.jsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react'
 import { Form, Button, Input, Radio, DatePicker, Switch } from 'antd'
+import DragModal from '@/components/DragModal'
 import { dayjsFormat } from '@/utils/utils'
 import { ModalForm } from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
@@ -20,7 +21,7 @@ const AddRecord = props => {
   return (
     <ModalForm
       layout="vertical"
-      title="添加服务记录"
+      title={<DragModal title="添加服务记录" />}
       formRef={formRef}
       trigger={
         <Button type="primary" ghost size="small" className="mr-1">

src/pages/Customer/Client/components/ConnectClient/index.jsx

@@ -8,6 +8,7 @@ import { apiAddClient, apiChangeClient, queryClient } from '@/services/customer'
 import consts from '@/basic/consts'
 import { formatValues } from '@/components/LazyCascader'
 import AddClient from '../AddClient'
+import DragModal from '@/components/DragModal'
 
 const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true }) => {
   const dispatch = useDispatch()
@@ -98,15 +99,21 @@ const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true
   return (
     <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
       <div className={styles.modalHeader}>
-        <Input
-          prefix={<SearchOutlined />}
-          className={styles.inputSearch}
-          placeholder="输入联系人名称搜索"
-          onChange={handleInputChange}
+        <DragModal
+          title={
+            <Input
+              prefix={<SearchOutlined />}
+              className={styles.inputSearch}
+              placeholder="输入联系人名称搜索"
+              onChange={handleInputChange}
+            />
+          }
         />
-        <span className={styles.closeIcon}>
-          <CloseOutlined onClick={closeModal} />
-        </span>
+        <div className="ant-modal-close">
+          <span className="ant-modal-close-x">
+            <CloseOutlined onClick={closeModal} />
+          </span>
+        </div>
       </div>
       <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
         <Spin spinning={state.laoding}>

src/pages/Customer/Company/components/AddCompany/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
+import DragModal from '@/components/DragModal'
 import { Form, Row, Col, Button } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
 import { ModalForm, ProFormText, ProFormCheckbox } from '@ant-design/pro-form'
@@ -25,7 +26,7 @@ const AddCompanyModal = ({ dataId, dataType, onConfirm, dispatch, natures }) =>
   return (
     <ModalForm
       formRef={formRef}
-      title="添加新客户"
+      title={<DragModal title="添加新客户" />}
       {...layout}
       // visible={modalVisible}
       // onVisibleChange={setModalVisible}

src/pages/Customer/Company/components/ConnectCompany/index.jsx

@@ -9,6 +9,7 @@ import { createCustomer, queryCustomers } from '@/services/customer'
 import consts from '@/basic/consts'
 import { formatValues } from '@/components/LazyCascader'
 import { apiChangeCustomer } from '@/services/customer'
+import ModalDrag from '@/components/DragModal'
 
 const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
   const dispatch = useDispatch()
@@ -98,15 +99,22 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
   return (
     <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
       <div className={styles.modalHeader}>
-        <Input
-          prefix={<SearchOutlined />}
-          className={styles.inputSearch}
-          placeholder="输入客户名称搜索"
-          onChange={handleInputChange}
+        <ModalDrag
+          title={
+            <Input
+              prefix={<SearchOutlined />}
+              className={styles.inputSearch}
+              placeholder="输入客户名称搜索"
+              onChange={handleInputChange}
+            />
+          }
         />
-        <span className={styles.closeIcon}>
-          <CloseOutlined onClick={closeModal} />
-        </span>
+
+        <div className="ant-modal-close">
+          <span className="ant-modal-close-x">
+            <CloseOutlined onClick={closeModal} />
+          </span>
+        </div>
       </div>
       <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
         <Spin spinning={state.laoding}>

src/pages/Customer/Company/components/ConnectCompany/index.less

@@ -2,7 +2,7 @@
   width: 60vw;
   .modalHeader {
     .inputSearch {
-      width: 99%;
+      width: 90%;
     }
     .closeIcon {
       position: absolute;

src/pages/Hr/Employee/components/StaffModal/index.jsx

@@ -5,8 +5,8 @@ import { useDispatch } from 'dva'
 import { useDebounceFn } from 'ahooks'
 import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
 import { queryStaff, apiChangeSupervisor } from '@/services/staff'
-import styles from './index.less'
-// import request from '@/basic/utils/request'
+import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
+import DragModal from '@/components/DragModal'
 
 const StaffModal = ({ id, onSelect, postUrl }) => {
   const scrollRef = useRef()
@@ -77,15 +77,22 @@ const StaffModal = ({ id, onSelect, postUrl }) => {
   return (
     <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
       <div className={styles.modalHeader}>
-        <Input
-          prefix={<SearchOutlined />}
-          className={styles.inputSearch}
-          placeholder="输入员工名称搜索"
-          onClick={handleInputChange}
+        <DragModal
+          title={
+            <Input
+              prefix={<SearchOutlined />}
+              className={styles.inputSearch}
+              placeholder="输入员工名称搜索"
+              onClick={handleInputChange}
+            />
+          }
         />
-        <span className={styles.closeIcon}>
-          <CloseOutlined onClick={closeModal} />
-        </span>
+
+        <div className="ant-modal-close">
+          <span className="ant-modal-close-x">
+            <CloseOutlined onClick={closeModal} />
+          </span>
+        </div>
       </div>
       <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
         <Spin spinning={state.loading}>

src/pages/Hr/Employee/components/StaffModal/index.less

@@ -1,42 +0,0 @@
-.modalContainer {
-  width: 60vw;
-  .modalHeader {
-    position: relative;
-    padding: 1.5rem;
-    .inputSearch {
-      width: 99%;
-    }
-    .closeIcon {
-      position: absolute;
-      top: 5px;
-      right: 7px;
-    }
-  }
-  .modalContent {
-    height: 63vh;
-    max-height: 63vh;
-    padding: 1.5rem;
-    overflow-y: auto;
-    border-top: 1px solid #dee2e6;
-    border-bottom: 1px solid #dee2e6;
-    .card {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 1rem;
-      word-wrap: break-word;
-      background-color: #ffffff;
-      background-clip: border-box;
-      border: 1px solid rgba(0, 0, 0, 0.08);
-      border-radius: 4px;
-      box-shadow: 0 0 13px 0 rgba(74, 53, 107, 0.08);
-      &:not(:last-of-type) {
-        margin-bottom: 1rem;
-      }
-    }
-  }
-
-  .modalFooter {
-    padding: 1.5rem;
-  }
-}

src/pages/Product/Lock/Lockstore/index.jsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react'
 import { Tag, Select, Tooltip, Input, DatePicker, Button } from 'antd'
 import ProTable from '@ant-design/pro-table'
 import consts from '@/consts'
-import { useModel } from 'umi'
-import { queryLock, querySoftwareProducts } from '@/services/lock'
+import { useModel, connect } from 'umi'
+import { queryLock } from '@/services/lock'
 import LocksDetail from '@/pages/Product/Lock/LockStore/components/LocksDetail'
 import ContactDetail from '@/pages/Customer/Client/components/ClientDetail'
 import SoftwareDetail from '@/pages/Product/Lock/LockStore/components/SoftwareDetail'
@@ -61,7 +61,7 @@ const longleStatusNum = {
   }
 }
 
-const LockStore = () => {
+const LockStore = ({ prodList = [], dispatch }) => {
   const [selectKeys] = useState([])
   const { toggleDrawer, setDrawerProps, toggleModal, setModalProps } = useModal()
   const showReceiveLockModal = () => {
@@ -76,17 +76,15 @@ const LockStore = () => {
   const [state, setState] = useState({
     params: { dataPermission: 'oneself' },
     data: [],
-    prodList: [], // 产品列表
     totalOld: 0, // 待接收锁总数
     id: ''
   })
 
   // 获取软件锁产品列表
-  async function fetchSoftProducts() {
-    const { code = -1, data = [] } = await querySoftwareProducts()
-    if (code === consts.RET_CODE.SUCCESS) {
-      setState({ ...state, prodList: data })
-    }
+  function fetchSoftProducts() {
+    dispatch({
+      type: 'lock/fetchProdList'
+    })
   }
 
   const handleSearch = value => {
@@ -304,9 +302,9 @@ const LockStore = () => {
             allowClear={true}
             placeholder="请选择产品"
             onDropdownVisibleChange={async e => {
-              e && !state.prodList?.length && (await fetchSoftProducts())
+              e && !prodList?.length && (await fetchSoftProducts())
             }}
-            options={state.prodList.map(item => ({ value: item.title }))}
+            options={prodList.map(item => ({ value: item.title }))}
             onChange={e =>
               setState({ ...state, params: { ...state.params, product: e?.value || '' } })
             }
@@ -318,4 +316,6 @@ const LockStore = () => {
   )
 }
 
-export default LockStore
+export default connect(({ lock }) => ({
+  prodList: lock.prodList
+}))(LockStore)

src/pages/Product/Lock/model.js

@@ -1,20 +1,22 @@
 import consts from '@/consts'
-import { queryLock } from '@/services/lock'
+import { querySoftwareProducts } from '@/services/lock'
 
 export default {
   namespace: 'lock',
   state: {
-    data: [],
-    total: 0
+    prodList: []
   },
   // 用于处理异步操作和业务逻辑，由action触发，但不能修改state
   effects: {
-    *fetch({ payload }, { call, put }) {
-      const response = yield call(queryLock, payload)
+    *fetchProdList({ payload }, { call, put }) {
+      const response = yield call(querySoftwareProducts, payload)
       if (response && response.code === consts.RET_CODE.SUCCESS) {
         yield put({
-          type: 'show',
-          payload: response.data
+          type: 'changeState',
+          payload: {
+            key: 'prodList',
+            data: response.data
+          }
         })
       }
       // console.log(response)
@@ -23,11 +25,10 @@ export default {
   // reducers:用于处理同步操作，由action触发，可修改state
   reducers: {
     // action:是由reducers及effects的触发器，一般是第一个对象，如：{type:'add',payload:todo}
-    show(state, action) {
+    changeState(state, action) {
       return {
         ...state,
-        data: action.payload.longle,
-        total: action.payload.total
+        [action.payload.key]: action.payload.data
       }
     }
   }