Browse Source

feat: add second modal confirm

lanjianrong 3 years ago
parent
commit
ff6fe4cace
2 changed files with 51 additions and 25 deletions
  1. 23 10
      src/pages/Project/Management/List/index.tsx
  2. 28 15
      src/pages/Project/Verification/index.tsx

+ 23 - 10
src/pages/Project/Management/List/index.tsx

@@ -1,6 +1,6 @@
 import { delProject, getProjectList } from '@/services/api/project'
 import ProTable from '@ant-design/pro-table'
-import { Button, Popconfirm, Tag } from 'antd'
+import { Button, Tag, Modal } from 'antd'
 import consts from '@/utils/consts'
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { connect, history, useRequest } from 'umi'
@@ -54,6 +54,22 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
     })
   }
 
+  const handleDelProject = (ID: string) => {
+    Modal.confirm({
+      title: '删除项目',
+      content: (
+        <div>
+          <div>确认删除该项目?</div>
+          <div>删除后,数据无法恢复,请谨慎操作。</div>
+        </div>
+      ),
+      okButtonProps: {
+        danger: true
+      },
+      onOk: () => tryDelProject({ ID })
+    })
+  }
+
   const columns: ProColumnType<API.ProjectListItem>[] = [
     {
       dataIndex: 'name',
@@ -124,15 +140,12 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
             }}>
             编辑
           </div>
-          <Popconfirm
-            title="确定删除吗?"
-            okText="确定"
-            cancelText="取消"
-            onConfirm={() => tryDelProject({ ID: record.ID })}>
-            <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
-              <DeleteOutlined />
-            </div>
-          </Popconfirm>
+
+          <div
+            className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e"
+            onClick={() => handleDelProject(record.ID)}>
+            <DeleteOutlined />
+          </div>
         </div>
       )
     }

+ 28 - 15
src/pages/Project/Verification/index.tsx

@@ -2,7 +2,7 @@ import AnimateContent from '@/components/AnimateContent'
 import consts from '@/utils/consts'
 import { PageContainer } from '@ant-design/pro-layout'
 import ProTable from '@ant-design/pro-table'
-import { Button, message, Popconfirm } from 'antd'
+import { Button, message, Modal } from 'antd'
 import { useRef, useState } from 'react'
 import { useRequest } from 'umi'
 import { addApproval, delApproval, getApprovalList, saveApproval } from '@/services/api/project'
@@ -63,6 +63,23 @@ const FlowList = () => {
       tRef.current?.reload()
     }
   })
+
+  const handleDelFlow = (ID: string) => {
+    Modal.confirm({
+      title: '删除模板',
+      content: (
+        <div>
+          <div>确认删除该流程模板?</div>
+          <div>删除后,数据无法恢复,请谨慎操作。</div>
+        </div>
+      ),
+      okButtonProps: {
+        danger: true
+      },
+      onOk: () => tryDel({ ID })
+    })
+  }
+
   const columns: ProColumnType = [
     {
       dataIndex: 'name',
@@ -135,20 +152,16 @@ const FlowList = () => {
             }}>
             配置流程
           </span>
-          <Popconfirm
-            disabled={!record?.canDel}
-            title="是否删除此流程模板?"
-            okText="确定"
-            cancelText="取消"
-            onConfirm={() => tryDel({ ID: record.ID })}>
-            <span
-              className={classNames(
-                'pl-2',
-                record?.canDel ? 'text-red-500 cursor-pointer hover:text-red-600' : 'text-gray-500'
-              )}>
-              删除
-            </span>
-          </Popconfirm>
+          <span
+            className={classNames(
+              'pl-2',
+              record?.canDel ? 'text-red-500 cursor-pointer hover:text-red-600' : 'text-gray-500'
+            )}
+            onClick={() => {
+              record?.canDel && handleDelFlow(record.ID)
+            }}>
+            删除
+          </span>
         </div>
       )
     }