feat: 商机列表 停用、删除、编辑功能。

config/routes.ts

@@ -17,13 +17,7 @@
   },
   {
     path: '/',
-    redirect: '/welcome'
-  },
-  {
-    path: '/welcome',
-    name: 'welcome',
-    icon: 'HomeOutlined',
-    component: './Welcome'
+    redirect: '/role/system'
   },
   {
     path: '/role',

src/pages/Business/Contact/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, message, TreeSelect, Table } from 'antd'
+import { Button, message, TreeSelect, Table, Popconfirm } from 'antd'
+import type { FormInstance } from 'antd'
 import ProForm, { ModalForm, ProFormText } from '@ant-design/pro-form'
 import type { ProFormColumnsType } from '@ant-design/pro-form'
 import { EditableProTable } from '@ant-design/pro-table'
@@ -7,12 +8,14 @@ import ShowTitleMenu from '../Attendance/components/ShowTitleMenu'
 import { useModel, useRequest } from 'umi'
 import {
   addBusinessgroup,
-  ChangeBusinessGroupStatus,
+  changeBusinessGroupStatus,
   delBusinessGroupById,
-  getBusinessgroupList
+  getBusinessgroupList,
+  updateBusinessGroup
 } from '@/services/user/api'
 import type { ColumnsType } from 'antd/lib/table'
 import { Delete } from '@icon-park/react'
+import { useRef } from 'react'
 
 enum modalType {
   CREATE = 0,
@@ -49,6 +52,7 @@ const defaultData = [
 
 const Contact: React.FC = () => {
   const { department } = useModel('department')
+  const formRef = useRef<FormInstance>(null)
 
   const [editableKeys, setEditableRowKeys] = useState<React.Key[]>()
 
@@ -98,6 +102,13 @@ const Contact: React.FC = () => {
       message.success('添加成功')
     }
   })
+  const { run: tryUpdateBusinessGroup } = useRequest(updateBusinessGroup, {
+    manual: true,
+    onSuccess: async () => {
+      tryGetList()
+      message.success('添加成功')
+    }
+  })
 
   const { run: tryDelBusinessGroup } = useRequest(delBusinessGroupById, {
     manual: true,
@@ -106,7 +117,7 @@ const Contact: React.FC = () => {
     }
   })
 
-  const { run: tryChangeBusinessGroupStatus } = useRequest(ChangeBusinessGroupStatus, {
+  const { run: tryChangeBusinessGroupStatus } = useRequest(changeBusinessGroupStatus, {
     manual: true,
     onSuccess: async () => {
       await tryGetList()
@@ -133,36 +144,58 @@ const Contact: React.FC = () => {
     {
       dataIndex: 'activation',
       title: '状态',
-      render: text => <span>{text ? '启用' : '停用'}</span>
+      render: text => <span className={!text ? 'text-red-500' : ''}>{text ? '启用' : '停用'}</span>
     },
     {
       dataIndex: 'opreate',
       title: '操作',
       render: (_, record) => (
         <div>
-          <span className="mr-1 text-primary cursor-pointer hover:text-hex-967bbd">编辑</span>
           <span
             className="mr-1 text-primary cursor-pointer hover:text-hex-967bbd"
-            onClick={() =>
-              tryChangeBusinessGroupStatus({
-                id: record.id,
-                activation: Number(!record.activation)
-              })
-            }>
-            {record.activation ? '启用' : '停用'}
-          </span>
-          <span
-            className="text-hex-fd3995 hover:text-hex-e7026e"
-            onClick={() => tryDelBusinessGroup(record.id)}>
-            <Delete />
+            onClick={() => {
+              formRef.current?.setFieldsValue({ ...record })
+              setState({ ...state, visible: true, type: modalType.UPDATE })
+            }}>
+            编辑
           </span>
+          {record.activation ? (
+            <Popconfirm
+              title="是否停用此商机组"
+              onConfirm={() =>
+                tryChangeBusinessGroupStatus({
+                  id: record.id,
+                  activation: Number(!record.activation)
+                })
+              }>
+              <span className="mr-1 text-red-500 cursor-pointer hover:text-red-600">停用</span>
+            </Popconfirm>
+          ) : null}
+          {!record.activation && (
+            <span
+              className="mr-1 text-primary cursor-pointer hover:text-hex-967bbd"
+              onClick={() =>
+                tryChangeBusinessGroupStatus({
+                  id: record.id,
+                  activation: Number(!record.activation)
+                })
+              }>
+              启用
+            </span>
+          )}
+
+          <Popconfirm title="确认删除？" onConfirm={() => tryDelBusinessGroup(record.id)}>
+            <span className="text-hex-fd3995 hover:text-hex-e7026e">
+              <Delete />
+            </span>
+          </Popconfirm>
         </div>
       )
     }
   ]
   return (
     <div className="h-full w-full flex flex-row">
-      <ShowTitleMenu itemTitle="商机状态组" />
+      <ShowTitleMenu options={[{ label: '商机状态组', value: 1 }]} defaultValue={1} />
       <div className="w-max-3/4">
         <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
           <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
@@ -173,21 +206,32 @@ const Contact: React.FC = () => {
               添加新组
             </Button>
           </div>
-          <Table columns={mainColumns} dataSource={state.dataSource} bordered />
+          <Table
+            columns={mainColumns}
+            dataSource={state.dataSource}
+            bordered
+            rowKey={row => row.id}
+          />
         </div>
       </div>
       <ModalForm
         visible={state.visible}
+        formRef={formRef}
         onVisibleChange={show => setState({ ...state, visible: show })}
         title={state.type === modalType.CREATE ? '创建商机角色' : '更新商机角色'}
         onFinish={async value => {
-          await tryAddBusinessgroup({
-            ...value,
-            stageSettings: JSON.stringify(value.stageSettings)
-          })
+          if (state.type === modalType.CREATE) {
+            await tryAddBusinessgroup({
+              ...value,
+              stageSettings: JSON.stringify(value.stageSettings)
+            })
+          } else {
+            await tryUpdateBusinessGroup({ ...value })
+          }
           return true
         }}>
         <ProFormText name="name" label="组名称" required />
+        <ProFormText name="id" hidden />
         {/* <ProFormText name="department" label="应用部门" required /> */}
         <ProForm.Item name="departmentIds" label="应用部门" required>
           <TreeSelect treeData={department} multiple={true} />

src/services/user/api.ts

@@ -135,7 +135,7 @@ export async function updatePermDataByRoleId(params: API.UpdatePermData) {
 
 /** 获得商机组列表 */
 export async function getBusinessgroupList() {
-  return request('/BusinessGroup/list')
+  return request<API.BusinessgroupItem[]>('/BusinessGroup/list')
 }
 
 /** 新增商机状态组 */
@@ -155,9 +155,17 @@ export async function delBusinessGroupById(id: string) {
 }
 
 /** 启用/停用商机组 */
-export async function ChangeBusinessGroupStatus(params: { id: string; activation: number }) {
+export async function changeBusinessGroupStatus(params: { id: string; activation: number }) {
   return request('/BusinessGroup/activation', {
     method: 'POST',
     data: params
   })
 }
+
+/** 更新商机组 */
+export async function updateBusinessGroup(params: API.UpdateBusinessgroupParam) {
+  return request('/BusinessGroup/update', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/user/typings.d.ts

@@ -231,6 +231,7 @@ declare namespace API {
     stageSettings: string
   }
 
+  type UpdateBusinessgroupParam = AddBusinessgroupParam & { id: string }
   type DepartmentItem = {
     id: string
     key: string