|
@@ -1,4 +1,4 @@
|
|
|
-import { Button } from 'antd'
|
|
|
+import { Button, message } from 'antd'
|
|
|
import LeftMenu from './Components/LeftMenu'
|
|
|
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'
|
|
|
import { arrayMoveImmutable } from 'array-move'
|
|
@@ -7,18 +7,18 @@ import type { SortableContainerProps, SortEnd } from 'react-sortable-hoc'
|
|
|
import { useRef, useState } from 'react'
|
|
|
import { useRequest } from 'umi'
|
|
|
import type { ProFormInstance } from '@ant-design/pro-form'
|
|
|
-import {
|
|
|
- addDataSource,
|
|
|
- addDataSourceItem,
|
|
|
- queryDataSource,
|
|
|
- updateDataSourceItem
|
|
|
-} from '@/services/api/schema'
|
|
|
+import { addDataSourceItem, queryDataSource, updateDataSourceItem } from '@/services/api/schema'
|
|
|
import { MenuOutlined, PlusOutlined } from '@ant-design/icons'
|
|
|
import classNames from 'classnames'
|
|
|
import { ModalForm, ProFormRadio, ProFormText } from '@ant-design/pro-form'
|
|
|
import ProTable from '@ant-design/pro-table'
|
|
|
import { ModalType } from '@/utils/enum'
|
|
|
|
|
|
+enum OptionModalType {
|
|
|
+ ADD,
|
|
|
+ UPDATE
|
|
|
+}
|
|
|
+
|
|
|
const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />)
|
|
|
|
|
|
const SortableItem = SortableElement((props: React.HTMLAttributes<HTMLTableRowElement>) => (
|
|
@@ -31,16 +31,25 @@ const SortableBody = SortableContainer((props: React.HTMLAttributes<HTMLTableSec
|
|
|
type iState = {
|
|
|
menuData: API.DataSourceMenuItem[]
|
|
|
activeID: Nullable<string>
|
|
|
+ current: API.DataSourceItem[]
|
|
|
modalType: ModalType
|
|
|
menuDataItems: API.DataSourceItem[]
|
|
|
+ items: API.DataSourceItem[]
|
|
|
}
|
|
|
const Option = () => {
|
|
|
const formRef = useRef<ProFormInstance>(null)
|
|
|
const [state, setState] = useState<iState>({
|
|
|
menuData: [],
|
|
|
activeID: null,
|
|
|
- modalType: ModalType.ADD,
|
|
|
- menuDataItems: []
|
|
|
+ modalVisible: false,
|
|
|
+ modalType: OptionModalType.ADD,
|
|
|
+ menuDataItems: [],
|
|
|
+ items: [],
|
|
|
+ current: {
|
|
|
+ ID: null,
|
|
|
+ name: null,
|
|
|
+ enable: true
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
const { run: tryFetchList } = useRequest(queryDataSource, {
|
|
@@ -49,7 +58,16 @@ const Option = () => {
|
|
|
}
|
|
|
})
|
|
|
const { run: tryAddDataSourceItem } = useRequest(
|
|
|
- (params: API.LinkAccountParams) => addDataSourceItem(params),
|
|
|
+ (params: API.DataSourceItem) => addDataSourceItem(params),
|
|
|
+ {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: async () => {
|
|
|
+ await tryFetchList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ const { run: tryUpdateDataSourceItem } = useRequest(
|
|
|
+ (params: API.DataSourceItem) => updateDataSourceItem(params),
|
|
|
{
|
|
|
manual: true,
|
|
|
onSuccess: async () => {
|
|
@@ -57,10 +75,6 @@ const Option = () => {
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
- const { run: tryUpdateItem } = useRequest(updateDataSourceItem, {
|
|
|
- manual: true,
|
|
|
- onSuccess: () => tryFetchList()
|
|
|
- })
|
|
|
|
|
|
const columns: ColumnsType<API.DataSourceItem> = [
|
|
|
{
|
|
@@ -83,9 +97,12 @@ const Option = () => {
|
|
|
title: '状态',
|
|
|
dataIndex: 'enable',
|
|
|
render: text => (
|
|
|
- <div>
|
|
|
+ <div className="flex items-center">
|
|
|
<span
|
|
|
- className={classNames('w-4 h-4 rounded-1/2', text ? 'bg-green-500' : 'bg-red-500')}
|
|
|
+ className={classNames(
|
|
|
+ 'w-3 h-3 rounded-1/2 inline-flex',
|
|
|
+ text ? 'bg-green-500' : 'bg-red-500'
|
|
|
+ )}
|
|
|
/>
|
|
|
<span className="ml-1">{text ? '已启用' : '已停用'}</span>
|
|
|
</div>
|
|
@@ -95,14 +112,26 @@ const Option = () => {
|
|
|
title: '操作',
|
|
|
dataIndex: 'opreate',
|
|
|
render: (_, record) => (
|
|
|
- <Button
|
|
|
- type="text"
|
|
|
+ <div
|
|
|
+ className="text-primary cursor-pointer hover:text-hex-967bbd"
|
|
|
onClick={() => {
|
|
|
- formRef.current?.setFieldsValue({ ...record })
|
|
|
- setState({ ...state, modalType: ModalType.UPDATE })
|
|
|
+ setTimeout(() => {
|
|
|
+ formRef.current?.setFieldsValue({ ...record })
|
|
|
+ }, 80)
|
|
|
+ setState({
|
|
|
+ ...state,
|
|
|
+ modalType: ModalType.UPDATE,
|
|
|
+ modalVisible: true,
|
|
|
+ items: state.menuDataItems,
|
|
|
+ current: {
|
|
|
+ ID: record.ID,
|
|
|
+ name: record.name,
|
|
|
+ enable: record.enable
|
|
|
+ }
|
|
|
+ })
|
|
|
}}>
|
|
|
编辑
|
|
|
- </Button>
|
|
|
+ </div>
|
|
|
)
|
|
|
}
|
|
|
]
|
|
@@ -159,44 +188,21 @@ const Option = () => {
|
|
|
rowKey="ID"
|
|
|
toolbar={{
|
|
|
actions: [
|
|
|
- <ModalForm
|
|
|
- labelCol={{ span: 6 }}
|
|
|
- key="form"
|
|
|
- width="30%"
|
|
|
- title="添加选项"
|
|
|
- formRef={formRef}
|
|
|
- layout="horizontal"
|
|
|
- onVisibleChange={visible => !visible && formRef.current?.resetFields()}
|
|
|
- initialValues={{ enable: true }}
|
|
|
- trigger={
|
|
|
- <Button size="small" type="primary" ghost>
|
|
|
- <PlusOutlined />
|
|
|
- 添加选项
|
|
|
- </Button>
|
|
|
- }
|
|
|
- onFinish={async values => {
|
|
|
- await tryAddDataSourceItem({
|
|
|
- ...values,
|
|
|
- dataSourceID: state.activeID
|
|
|
+ <Button
|
|
|
+ key="btn-key"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ onClick={() => {
|
|
|
+ setState({
|
|
|
+ ...state,
|
|
|
+ modalType: OptionModalType.ADD,
|
|
|
+ modalVisible: true
|
|
|
})
|
|
|
- message.success('添加成功')
|
|
|
- return true
|
|
|
- }}>
|
|
|
- <ProFormText
|
|
|
- name="name"
|
|
|
- label="选项名称"
|
|
|
- rules={[{ required: true, message: '请输入选项名称' }]}
|
|
|
- />
|
|
|
- <ProFormRadio.Group
|
|
|
- name="enable"
|
|
|
- label="状态"
|
|
|
- options={[
|
|
|
- { label: '启用', value: true },
|
|
|
- { label: '停用', value: false }
|
|
|
- ]}
|
|
|
- rules={[{ required: true, message: '请选择启用/停用' }]}
|
|
|
- />
|
|
|
- </ModalForm>
|
|
|
+ }}
|
|
|
+ ghost>
|
|
|
+ <PlusOutlined />
|
|
|
+ 添加选项
|
|
|
+ </Button>
|
|
|
]
|
|
|
}}
|
|
|
components={{
|
|
@@ -206,6 +212,63 @@ const Option = () => {
|
|
|
}
|
|
|
}}
|
|
|
/>
|
|
|
+ <ModalForm
|
|
|
+ labelCol={{ span: 6 }}
|
|
|
+ key="form"
|
|
|
+ width="30%"
|
|
|
+ title={`${state.modalType === OptionModalType.ADD ? '添加' : '编辑'}选项`}
|
|
|
+ formRef={formRef}
|
|
|
+ layout="horizontal"
|
|
|
+ visible={state.modalVisible}
|
|
|
+ onVisibleChange={visible => {
|
|
|
+ setState({ ...state, modalVisible: visible })
|
|
|
+ setTimeout(() => {
|
|
|
+ if (!visible) formRef.current?.resetFields()
|
|
|
+ }, 80)
|
|
|
+ }}
|
|
|
+ initialValues={{ enable: true }}
|
|
|
+ onFinish={async values => {
|
|
|
+ try {
|
|
|
+ if (state.modalType === OptionModalType.ADD) {
|
|
|
+ await tryAddDataSourceItem({ ...values, dataSourceID: state.activeID })
|
|
|
+ } else {
|
|
|
+ const newItemData = state.menuDataItems.map(item => {
|
|
|
+ const newItem = { ...item }
|
|
|
+ if (item.ID === state.current.ID) {
|
|
|
+ newItem.items = values
|
|
|
+ return newItem
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+
|
|
|
+ await tryUpdateDataSourceItem({
|
|
|
+ ...values,
|
|
|
+ ID: state.activeID,
|
|
|
+ items: newItemData
|
|
|
+ })
|
|
|
+ }
|
|
|
+ message.success(`${state.modalType === OptionModalType.ADD ? '新增' : '编辑'}成功`)
|
|
|
+ return true
|
|
|
+ } catch (error) {
|
|
|
+ message.error(error)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }}>
|
|
|
+ <ProFormText
|
|
|
+ name="name"
|
|
|
+ label="选项名称"
|
|
|
+ rules={[{ required: true, message: '请输入选项名称' }]}
|
|
|
+ />
|
|
|
+ <ProFormRadio.Group
|
|
|
+ name="enable"
|
|
|
+ label="状态"
|
|
|
+ options={[
|
|
|
+ { label: '启用', value: true },
|
|
|
+ { label: '停用', value: false }
|
|
|
+ ]}
|
|
|
+ rules={[{ required: true, message: '请选择启用/停用' }]}
|
|
|
+ />
|
|
|
+ </ModalForm>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|