|
@@ -0,0 +1,97 @@
|
|
|
+import React, { useState } from 'react'
|
|
|
+import { Button } 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 AttendanceMenu from '../Attendance/components/AttendanceMenu'
|
|
|
+
|
|
|
+enum modalType {
|
|
|
+ CREATE = 0,
|
|
|
+ UPDATE = 1
|
|
|
+}
|
|
|
+
|
|
|
+interface StageSettingsType {
|
|
|
+ id: React.Key
|
|
|
+ name?: string
|
|
|
+ stage?: string
|
|
|
+ percentage?: string
|
|
|
+}
|
|
|
+const Contact = () => {
|
|
|
+ const [state, setState] = useState({
|
|
|
+ id: '',
|
|
|
+ contactList: [],
|
|
|
+ visible: false,
|
|
|
+ type: modalType.CREATE
|
|
|
+ })
|
|
|
+
|
|
|
+ const columns: ProFormColumnsType<StageSettingsType>[] = [
|
|
|
+ {
|
|
|
+ title: '阶段',
|
|
|
+ dataIndex: 'stage',
|
|
|
+ width: '15%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '阶段名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ width: '50%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '赢单率',
|
|
|
+ dataIndex: 'percentage',
|
|
|
+ width: '35%',
|
|
|
+ valueType: 'text',
|
|
|
+ fieldProps: {
|
|
|
+ addonAfter: '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="h-full w-full flex flex-row">
|
|
|
+ <AttendanceMenu 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">
|
|
|
+ <ModalForm
|
|
|
+ visible={state.visible}
|
|
|
+ onVisibleChange={() => setState({ ...state, visible: false })}
|
|
|
+ title={state.type === modalType.CREATE ? '创建商机角色' : '更新商机角色'}
|
|
|
+ trigger={
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
|
|
|
+ 添加新组
|
|
|
+ </Button>
|
|
|
+ }>
|
|
|
+ <ProFormText name="name" label="组名称" required />
|
|
|
+ <ProFormText name="department" label="应用部门" required />
|
|
|
+ <ProForm.Item label="阶段设置" name="stageSettings">
|
|
|
+ <EditableProTable<StageSettingsType>
|
|
|
+ rowKey="id"
|
|
|
+ toolBarRender={false}
|
|
|
+ columns={columns}
|
|
|
+ recordCreatorProps={{
|
|
|
+ newRecordType: 'dataSource',
|
|
|
+ position: 'top',
|
|
|
+ record: () => ({
|
|
|
+ id: Date.now()
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ editable={{
|
|
|
+ type: 'multiple',
|
|
|
+ actionRender: (row, _, dom) => {
|
|
|
+ return [dom.delete]
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </ProForm.Item>
|
|
|
+ </ModalForm>
|
|
|
+ </div>
|
|
|
+ {/* <Table columns={}></Table> */}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default Contact
|