|  | @@ -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]
 | 
	
		
			
				|  |  |                }
 |