feat: animate动画相关css抽离至global上

config/routes.ts

@@ -60,13 +60,14 @@
       {
         path: '/business/attendance',
         name: 'attendance',
-        component: './business/Attendance'
-        // access: 'authRouteFilter'
+        component: './business/Attendance',
+        access: 'authRouteFilter'
       },
       {
         path: '/business/contact',
         name: 'contact',
-        component: './business/Contact'
+        component: './business/Contact',
+        access: 'authRouteFilter'
       }
     ]
   }

src/access.ts

@@ -8,7 +8,6 @@ export default function access(initialState: { currentUser?: API.CurrentUser | u
       if (currentUser?.isAdmin) {
         return true
       }
-
       return currentUser?.roles.includes(route.name)
     }
   }

src/global.less

@@ -90,3 +90,31 @@ ol {
     margin-bottom: 1rem;
   }
 }
+
+.scale-up-center {
+  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+
+@-webkit-keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    @apply text-white bg-primary rounded-4px;
+  }
+}
+@keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    @apply text-white bg-primary rounded-4px;
+  }
+}

src/models/department.ts

@@ -0,0 +1,16 @@
+import { getDepartmenList } from '@/services/user/api'
+import { useEffect } from 'react'
+import { useCallback } from 'react'
+import { useState } from 'react'
+
+export default () => {
+  const [department, setDepartment] = useState<API.DepartmentItem[]>([])
+  const fetchDepartment = useCallback(async () => {
+    const { data = [] } = await getDepartmenList()
+    setDepartment(data)
+  }, [])
+  useEffect(() => {
+    fetchDepartment()
+  }, [])
+  return { department, fetchDepartment }
+}

src/pages/Business/Attendance/components/ShowTitleMenu.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
-import '@/pages/Role/System/components/RoleMenu/index.less'
 
 interface ShowTitleMenuProps {
   itemTitle: string
   onSelect?: (vaule: string) => void
   selectDefaultValue?: string
 }
-const showTitleMenu: React.FC<ShowTitleMenuProps> = ({
+const ShowTitleMenu: React.FC<ShowTitleMenuProps> = ({
   itemTitle,
   onSelect,
   selectDefaultValue = ''
@@ -42,4 +41,4 @@ const showTitleMenu: React.FC<ShowTitleMenuProps> = ({
   )
 }
 
-export default showTitleMenu
+export default ShowTitleMenu

src/pages/Business/Contact/index.tsx

@@ -1,10 +1,18 @@
 import React, { useState } from 'react'
-import { Button } from 'antd'
+import { Button, message, TreeSelect, Table } 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'
 import ShowTitleMenu from '../Attendance/components/ShowTitleMenu'
-// import type { ColumnsType } from 'antd/lib/table'
+import { useModel, useRequest } from 'umi'
+import {
+  addBusinessgroup,
+  ChangeBusinessGroupStatus,
+  delBusinessGroupById,
+  getBusinessgroupList
+} from '@/services/user/api'
+import type { ColumnsType } from 'antd/lib/table'
+import { Delete } from '@icon-park/react'
 
 enum modalType {
   CREATE = 0,
@@ -17,34 +25,40 @@ interface StageSettingsType {
   stage?: string
   percentage?: number
 }
-const Contact = () => {
+
+const defaultData = [
+  {
+    id: 1,
+    stage: '结束',
+    name: '赢单',
+    percentage: '100'
+  },
+  {
+    id: 2,
+    stage: '结束',
+    name: '赢单',
+    percentage: '0'
+  },
+  {
+    id: 3,
+    stage: '结束',
+    name: '无效',
+    percentage: '0'
+  }
+]
+
+const Contact: React.FC = () => {
+  const { department } = useModel('department')
+
+  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>()
+
   const [state, setState] = useState({
     id: '',
-    contactList: [],
+    dataSource: [],
     visible: false,
     type: modalType.CREATE
   })
 
-  const defaultStageSettingsData = [
-    {
-      id: 1,
-      stage: '结束',
-      name: '赢单',
-      percentage: 100
-    },
-    {
-      id: 2,
-      stage: '结束',
-      name: '赢单',
-      percentage: 0
-    },
-    {
-      id: 3,
-      stage: '结束',
-      name: '无效',
-      percentage: 0
-    }
-  ]
   const columns: ProFormColumnsType<StageSettingsType>[] = [
     {
       title: '阶段',
@@ -71,34 +85,118 @@ const Contact = () => {
       width: '10%'
     }
   ]
+  const { run: tryGetList } = useRequest(getBusinessgroupList, {
+    onSuccess: (result: API.BusinessgroupItem[]) => {
+      setState({ ...state, dataSource: result })
+    }
+  })
+
+  const { run: tryAddBusinessgroup } = useRequest(addBusinessgroup, {
+    manual: true,
+    onSuccess: async () => {
+      tryGetList()
+      message.success('添加成功')
+    }
+  })
+
+  const { run: tryDelBusinessGroup } = useRequest(delBusinessGroupById, {
+    manual: true,
+    onSuccess: async () => {
+      await tryGetList()
+    }
+  })
+
+  const { run: tryChangeBusinessGroupStatus } = useRequest(ChangeBusinessGroupStatus, {
+    manual: true,
+    onSuccess: async () => {
+      await tryGetList()
+    }
+  })
 
-  // const mainColumns: ColumnsType = [
-  //   {
-  //     dataIndex: ''
-  //   }
-  // ]
+  const mainColumns: ColumnsType<API.BusinessgroupItem> = [
+    {
+      dataIndex: 'name',
+      title: '组名称'
+    },
+    {
+      dataIndex: 'departmentName',
+      title: '应用部门'
+    },
+    {
+      dataIndex: 'createTime',
+      title: '创建时间'
+    },
+    {
+      dataIndex: 'createName',
+      title: '创建人'
+    },
+    {
+      dataIndex: 'activation',
+      title: '状态',
+      render: text => <span>{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 />
+          </span>
+        </div>
+      )
+    }
+  ]
   return (
     <div className="h-full w-full flex flex-row">
       <ShowTitleMenu itemTitle="商机状态组" />
       <div className="w-max-3/4">
         <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-7 top-7 z-100">
+          <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
+            <div>商机状态组</div>
             <Button
               type="primary"
               onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
               添加新组
             </Button>
           </div>
-          {/* <Table columns={}></Table> */}
+          <Table columns={mainColumns} dataSource={state.dataSource} bordered />
         </div>
       </div>
       <ModalForm
         visible={state.visible}
         onVisibleChange={show => setState({ ...state, visible: show })}
-        title={state.type === modalType.CREATE ? '创建商机角' : '更新商机角'}>
+        title={state.type === modalType.CREATE ? '创建商机角色' : '更新商机角色'}
+        onFinish={async value => {
+          await tryAddBusinessgroup({
+            ...value,
+            stageSettings: JSON.stringify(value.stageSettings)
+          })
+          return true
+        }}>
         <ProFormText name="name" label="组名称" required />
-        <ProFormText name="department" label="应用部门" required />
-        <ProForm.Item label="阶段设置" name="stageSettings" initialValue={defaultStageSettingsData}>
+        {/* <ProFormText name="department" label="应用部门" required /> */}
+        <ProForm.Item name="departmentIds" label="应用部门" required>
+          <TreeSelect treeData={department} multiple={true} />
+        </ProForm.Item>
+        <ProForm.Item
+          label="阶段设置"
+          name="stageSettings"
+          initialValue={defaultData}
+          trigger="onValuesChange">
           <EditableProTable<StageSettingsType>
             rowKey="id"
             toolBarRender={false}
@@ -113,6 +211,8 @@ const Contact = () => {
             }}
             editable={{
               type: 'multiple',
+              editableKeys,
+              onChange: setEditableRowKeys,
               actionRender: (row, _, dom) => {
                 return [dom.delete]
               }

src/pages/Role/System/components/RoleMenu/index.less

@@ -1,35 +0,0 @@
-// .roleMenu {
-//   box-shadow: 0 0 13px 0 rgba(74, 53, 107, 0.08);
-
-//   .active {
-//     @apply text-white bg-primary rounded-4px;
-//   }
-// }
-
-.scale-up-center {
-  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
-  animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
-}
-
-@-webkit-keyframes scale-up-center {
-  0% {
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    @apply text-white bg-primary rounded-4px;
-  }
-}
-@keyframes scale-up-center {
-  0% {
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    @apply text-white bg-primary rounded-4px;
-  }
-}

src/pages/Role/System/components/RoleMenu/index.tsx

@@ -9,7 +9,6 @@ import {
   updateStaff
 } from '@/services/user/api'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
-import './index.less'
 
 type RoleMenuProps = {
   menuId: string

src/services/user/api.ts

@@ -59,6 +59,11 @@ export async function createRoleWithMenuId(params: API.CreateRoleParams) {
   })
 }
 
+/** 获取部门列表 */
+export async function getDepartmenList() {
+  return request<API.DepartmentItem[]>('/department/list')
+}
+
 /** 获取角色下员工列表 */
 export async function fetchRoleStaffListByRoleId(params: { id: string }) {
   return request<API.RoleStaffListItem[]>('/role/staff', {
@@ -127,5 +132,32 @@ export async function updatePermDataByRoleId(params: API.UpdatePermData) {
     data: params
   })
 }
+
 /** 获得商机组列表 */
-export async function getBusinessgroupList() {}
+export async function getBusinessgroupList() {
+  return request('/BusinessGroup/list')
+}
+
+/** 新增商机状态组 */
+export async function addBusinessgroup(params: API.AddBusinessgroupParam) {
+  return request('/BusinessGroup/add', {
+    method: 'POST',
+    data: params
+  })
+}
+
+/** 删除商机组 */
+export async function delBusinessGroupById(id: string) {
+  return request('/BusinessGroup/delete', {
+    method: 'POST',
+    data: { id }
+  })
+}
+
+/** 启用/停用商机组 */
+export async function ChangeBusinessGroupStatus(params: { id: string; activation: number }) {
+  return request('/BusinessGroup/activation', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/user/typings.d.ts

@@ -215,4 +215,30 @@ declare namespace API {
     id: string
     dataPermission: any[]
   }
+
+  type BusinessgroupItem = {
+    id: string
+    name: string
+    activation: number
+    createName: string
+    departmentName: string
+    createTime: string
+  }
+
+  type AddBusinessgroupParam = {
+    name: string
+    departmentIds: string[]
+    stageSettings: string
+  }
+
+  type DepartmentItem = {
+    id: string
+    key: string
+    parentId: string
+    title: string
+    name: string
+    create_time: string
+    children: DepartmentItem[]
+    isLeaf: boolean
+  }
 }