@jiangood/open-admin 2.5.9 → 3.0.1

package/src/pages/system/dict/index.jsx

@@ -1,10 +1,11 @@
 import {DeleteOutlined, EditOutlined, PlusOutlined} from '@ant-design/icons';
-import {Button, Card, Descriptions, Empty, Form, Input, InputNumber, Modal, Popconfirm, Splitter, Tree, Tag, TreeSelect, Typography} from 'antd';
+import {Button, Card, Descriptions, Empty, Form, Input, InputNumber, Popconfirm, Splitter, Tree, Tag, TreeSelect, Typography} from 'antd';
 import React from 'react';
 import {
     PermActions,
     FieldBoolean,
     FieldDictSelect,
+    FormModal,
     HttpUtils,
     Page,
     ProTable,
@@ -18,16 +19,10 @@ export default class extends React.Component {
         treeLoading: false,
         selectedType: null,
         selectedTypeCode: null,
-
-        formOpen: false,
-        formValues: {},
-        typeFormOpen: false,
-        typeFormValues: {},
-
     }
 
-    formRef = React.createRef();
-    typeFormRef = React.createRef();
+    modalRef = React.createRef();
+    typeModalRef = React.createRef();
     tableRef = React.createRef();
 
     componentDidMount() {
@@ -44,16 +39,13 @@ export default class extends React.Component {
     }
 
     handleTypeAdd = () => {
-        this.setState({
-            typeFormOpen: true,
-            typeFormValues: {pid: this.state.selectedType?.id, enabled: true},
-        })
+        this.typeModalRef.current.open({pid: this.state.selectedType?.id, enabled: true})
     }
 
     handleTypeEdit = () => {
         const {selectedType} = this.state
         if (!selectedType) return
-        this.setState({typeFormOpen: true, typeFormValues: {...selectedType}})
+        this.typeModalRef.current.open({...selectedType})
     }
 
     handleTypeDelete = () => {
@@ -65,13 +57,11 @@ export default class extends React.Component {
         })
     }
 
-    handleTypeFormFinish = values => {
+    handleTypeFormFinish = async values => {
         const isNew = !values.id
         const url = isNew ? 'admin/dict/type-create' : 'admin/dict/type-update'
-        HttpUtils.post(url, values).then(rs => {
-            this.setState({typeFormOpen: false})
-            this.loadTree()
-        })
+        await HttpUtils.post(url, values)
+        this.loadTree()
     }
 
     findNode = (nodes, key) => {
@@ -105,11 +95,11 @@ export default class extends React.Component {
     }
 
     handleItemAdd = () => {
-        this.setState({formOpen: true, formValues: {typeCode: this.state.selectedTypeCode}})
+        this.modalRef.current.open({typeCode: this.state.selectedTypeCode})
     }
 
     handleItemEdit = record => {
-        this.setState({formOpen: true, formValues: record})
+        this.modalRef.current.open(record)
     }
 
     handleItemDelete = row => {
@@ -118,13 +108,11 @@ export default class extends React.Component {
         })
     }
 
-    onItemFormFinish = values => {
+    onItemFormFinish = async values => {
         const isNew = !values.id
         const url = isNew ? 'admin/dict/create' : 'admin/dict/update'
-        HttpUtils.post(url, values).then(rs => {
-            this.setState({formOpen: false})
-            this.tableRef.current.reload()
-        })
+        await HttpUtils.post(url, values)
+        this.tableRef.current.reload()
     }
 
     columns = [
@@ -164,14 +152,16 @@ export default class extends React.Component {
         const {selectedType, selectedTypeCode} = this.state
         const hasTypeSelected = selectedType != null && selectedTypeCode != null
 
-        return <Page title="数据字典" description="管理数据字典类型和字典项"
-                    actions={<Button perm='sys-dict:create' icon={<PlusOutlined/>} onClick={this.handleTypeAdd}>新增类型</Button>}>
+        return <Page title="数据字典" description="管理数据字典类型和字典项">
             <Splitter>
                 <Splitter.Panel defaultSize={300} style={{paddingRight: 8}}>
                     <Card loading={this.state.treeLoading}
                           size='small'
+                          title={<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+                              <Typography.Text strong>字典类型</Typography.Text>
+                              <Button size='small' perm='sys-dict:create' icon={<PlusOutlined/>} onClick={this.handleTypeAdd}>新增类型</Button>
+                          </div>}
                     >
-                        <Typography.Text strong style={{marginBottom: 8, display: 'block'}}>字典类型</Typography.Text>
                         <Tree
                             treeData={this.state.typeTree}
                             onSelect={this.onTreeSelect}
@@ -226,69 +216,48 @@ export default class extends React.Component {
                 </Splitter.Panel>
             </Splitter>
 
-            <Modal title={this.state.typeFormValues?.id ? '编辑字典类型' : '新增字典类型'}
-                   open={this.state.typeFormOpen}
-                   onOk={() => this.typeFormRef.current.submit()}
-                   onCancel={() => this.setState({typeFormOpen: false})}
-                   destroyOnClose
-            >
-                <Form ref={this.typeFormRef} labelCol={{flex: '100px'}}
-                      initialValues={this.state.typeFormValues}
-                      onFinish={this.handleTypeFormFinish}
-                >
-                    <Form.Item name='id' noStyle/>
-                    <Form.Item label='父类型' name='pid'>
-                        <TreeSelect treeData={this.state.typeTree}
-                                    fieldNames={{label: 'typeLabel', value: 'id'}}
-                                    allowClear
-                        />
-                    </Form.Item>
-                    <Form.Item label='类型编码' name='typeCode' rules={[{required: true}]}>
-                        <Input placeholder='举例: orderStatus'/>
-                    </Form.Item>
-                    <Form.Item label='类型名称' name='typeLabel' rules={[{required: true}]}>
-                        <Input placeholder='举例: 订单状态'/>
-                    </Form.Item>
-                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
-                        <FieldBoolean/>
-                    </Form.Item>
-                    <Form.Item label='序号' name='seq'>
-                        <InputNumber/>
-                    </Form.Item>
-                </Form>
-            </Modal>
+            <FormModal ref={this.typeModalRef} title='编辑字典类型'
+                       onFinish={this.handleTypeFormFinish}>
+                <Form.Item label='父类型' name='pid'>
+                    <TreeSelect treeData={this.state.typeTree}
+                                fieldNames={{label: 'typeLabel', value: 'id'}}
+                                allowClear/>
+                </Form.Item>
+                <Form.Item label='类型编码' name='typeCode' rules={[{required: true}]}>
+                    <Input placeholder='举例: orderStatus'/>
+                </Form.Item>
+                <Form.Item label='类型名称' name='typeLabel' rules={[{required: true}]}>
+                    <Input placeholder='举例: 订单状态'/>
+                </Form.Item>
+                <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
+                    <FieldBoolean/>
+                </Form.Item>
+                <Form.Item label='序号' name='seq'>
+                    <InputNumber/>
+                </Form.Item>
+            </FormModal>
 
-            <Modal title='编辑字典项'
-                   open={this.state.formOpen}
-                   onOk={() => this.formRef.current.submit()}
-                   onCancel={() => this.setState({formOpen: false})}
-                   destroyOnClose
-            >
-                <Form ref={this.formRef} labelCol={{flex: '100px'}}
-                      initialValues={this.state.formValues}
-                      onFinish={this.onItemFormFinish}
-                >
-                    <Form.Item name='id' noStyle/>
-                    <Form.Item label='类型编码' name='typeCode'>
-                        <Input disabled/>
-                    </Form.Item>
-                    <Form.Item label='编码' name='code' rules={[{required: true}]}>
-                        <Input/>
-                    </Form.Item>
-                    <Form.Item label='标签' name='label' rules={[{required: true}]} help='显示文本'>
-                        <Input/>
-                    </Form.Item>
-                    <Form.Item label='颜色' name='color'>
-                        <FieldDictSelect typeCode='statusColor'/>
-                    </Form.Item>
-                    <Form.Item label='序号' name='seq'>
-                        <InputNumber/>
-                    </Form.Item>
-                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
-                        <FieldBoolean/>
-                    </Form.Item>
-                </Form>
-            </Modal>
+            <FormModal ref={this.modalRef} title='编辑字典项'
+                       onFinish={this.onItemFormFinish}>
+                <Form.Item label='类型编码' name='typeCode'>
+                    <Input disabled/>
+                </Form.Item>
+                <Form.Item label='编码' name='code' rules={[{required: true}]}>
+                    <Input/>
+                </Form.Item>
+                <Form.Item label='标签' name='label' rules={[{required: true}]} help='显示文本'>
+                    <Input/>
+                </Form.Item>
+                <Form.Item label='颜色' name='color'>
+                    <FieldDictSelect typeCode='statusColor'/>
+                </Form.Item>
+                <Form.Item label='序号' name='seq'>
+                    <InputNumber/>
+                </Form.Item>
+                <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
+                    <FieldBoolean/>
+                </Form.Item>
+            </FormModal>
         </Page>
     }
 }

package/src/pages/system/file/index.jsx

@@ -89,30 +89,36 @@ export default class extends React.Component {
     ]
 
     render() {
-        return <Page title="文件管理" description="管理系统上传文件" actions={<Button type='primary' icon={<CloudUploadOutlined/>} onClick={() => this.setState({formOpen: true})}>上传文件</Button>}>
+        return <Page title="文件管理" description="管理系统上传文件">
             <ProTable
                 actionRef={this.tableRef}
+                toolBarRender={() => (
+                    <PermActions>
+                        <Button type='primary' perm='sys-file:upload' icon={<CloudUploadOutlined/>} onClick={() => this.setState({formOpen: true})}>上传文件</Button>
+                    </PermActions>
+                )}
                 request={(params) => {
                     return HttpUtils.get('admin/sysFile/page', params);
                 }}
 
                 columns={this.columns}
-
-            >
-                <Form.Item label='文件名' name='originName'>
-                    <Input/>
-                </Form.Item>
-                <Form.Item label='对象名称' name='objectName'>
-                    <Input/>
-                </Form.Item>
-                <Form.Item label='类型' name='type'>
-                    <FieldDictSelect typeCode='materialType'/>
-                </Form.Item>
-
-                <Form.Item label='上传时间' name='dateRange'>
-                    <FieldDateRange/>
-                </Form.Item>
-            </ProTable>
+                searchFormRender={() => (
+                    <>
+                        <Form.Item label='文件名' name='originName'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='对象名称' name='objectName'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='类型' name='type'>
+                            <FieldDictSelect typeCode='materialType'/>
+                        </Form.Item>
+                        <Form.Item label='上传时间' name='dateRange'>
+                            <FieldDateRange/>
+                        </Form.Item>
+                    </>
+                )}
+            />
 
             <Modal open={this.state.formOpen} title='上传文件'
                    width={800}

package/src/pages/system/job/index.jsx

@@ -15,7 +15,7 @@ import {
     Tag
 } from 'antd'
 import {PlusOutlined} from "@ant-design/icons";
-import {HttpUtils, Page, ProTable, StringUtils, UrlUtils, ValueType} from "../../../framework";
+import {FormModal, HttpUtils, Page, PermActions, ProTable, StringUtils, UrlUtils, ValueType} from "../../../framework";
 
 
 const cronOptions = [
@@ -45,9 +45,6 @@ const cronOptions = [
 export default class extends React.Component {
 
     state = {
-        formValues: {},
-        formOpen: false,
-
         selectedRowKeys: [],
 
         jobClassOptions: [],
@@ -60,7 +57,7 @@ export default class extends React.Component {
         executeRecordOpen: false,
     }
     tableRef = React.createRef()
-    formRef = React.createRef()
+    modalRef = React.createRef()
 
     componentDidMount() {
         HttpUtils.get('admin/job/job-class-options').then(rs => {
@@ -71,12 +68,13 @@ export default class extends React.Component {
     }
 
     handleAdd = () => {
-        this.setState({formOpen: true, formValues: {}, paramList: []})
+        this.setState({paramList: []})
+        this.modalRef.current.open({})
     }
 
     handleEdit = (record) => {
         this.loadJobParamFields(record.jobClass, record.jobData)
-        this.setState({formOpen: true, formValues: record,})
+        this.modalRef.current.open(record)
     }
 
     loadJobParamFields(className, jobData) {
@@ -87,20 +85,17 @@ export default class extends React.Component {
         })
     }
 
-    onFinish = (values) => {
+    onFinish = async values => {
         const isNew = !values.id;
         const url = isNew ? 'admin/job/create' : 'admin/job/update';
-        HttpUtils.post(url, values).then(rs => {
-            this.setState({formOpen: false})
-            this.tableRef.current.reload();
-        }).catch(e => {
-            console.error('[Job] 保存作业失败:', e);
-        })
+        await HttpUtils.post(url, values)
+        this.tableRef.current.reload()
     }
 
     handleDelete = row => {
         const hide = message.loading("删除作业中...")
         HttpUtils.post('admin/job/delete', {id: row.id}).then(rs => {
+            hide();
             this.tableRef.current.reload();
         }).catch(e => {
             console.error('[Job] 删除作业失败:', e);
@@ -109,7 +104,7 @@ export default class extends React.Component {
     }
 
     handleTriggerJob = row => {
-        HttpUtils.get('admin/job/trigger-job', {id: row.id}).then(rs => {
+        HttpUtils.post('admin/job/trigger-job', {id: row.id}).then(rs => {
             this.tableRef.current.reload();
         }).catch(e => {
             console.error('[Job] 触发作业失败:', e);
@@ -183,75 +178,71 @@ export default class extends React.Component {
     };
 
     showExecuteRecord(record) {
-        this.setState({executeRecordOpen: true, formValues: record})
+        this.setState({executeRecordOpen: true, selectedRecord: record})
     }
 
 
     render() {
-        return <Page title="作业调度" description="管理定时作业任务" actions={<><Button type='primary' icon={<PlusOutlined/>} onClick={() => this.handleAdd()}>新增</Button><Button onClick={this.showStatus}>查看状态</Button></>}>
+        return <Page title="作业调度" description="管理定时作业任务">
             <ProTable
                 actionRef={this.tableRef}
+                toolBarRender={() => (
+                    <PermActions>
+                        <Button type='primary' perm='job:create' icon={<PlusOutlined/>} onClick={() => this.handleAdd()}>新增</Button>
+                        <Button perm='job:read' onClick={this.showStatus}>查看状态</Button>
+                    </PermActions>
+                )}
                 request={(params) => HttpUtils.get('admin/job/page', params)}
                 columns={this.columns}
-            >
-                <Form.Item label='名称' name='name'>
-                    <Input/>
+                searchFormRender={() => (
+                    <>
+                        <Form.Item label='名称' name='name'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='执行类' name='jobClass'>
+                            <Input/>
+                        </Form.Item>
+                    </>
+                )}
+            />
+
+
+            <FormModal ref={this.modalRef} title='作业调度' width={800}
+                       onFinish={this.onFinish}
+                       onValuesChange={this.onValuesChange}>
+                <Form.Item label='执行类' name='jobClass' rules={[{required: true}]}
+                           tooltip='org.quartz.Job接口，参考io.tmgg.job.builtin.DemoJob'>
+                    <Select options={this.state.jobClassOptions}/>
                 </Form.Item>
-                <Form.Item label='执行类' name='jobClass'>
+                <Form.Item label='名称' name='name' rules={[{required: true}]}>
                     <Input/>
                 </Form.Item>
-            </ProTable>
 
+                <Form.Item label='cron表达式' name='cron' help='格式：秒分时日月周,留空表示手动执行'
+                           rules={[{required: true}]}>
+                    <AutoComplete placeholder='如 0 */5 * * * ?' options={cronOptions}/>
+                </Form.Item>
 
-            <Modal title='作业调度'
-                   open={this.state.formOpen}
-                   destroyOnHidden
-                   width={800}
-                   onOk={() => this.formRef.current.submit()}
-                   onCancel={() => this.setState({formOpen: false})}
-            >
+                <Form.Item label='启用' name='enabled' valuePropName='checked' rules={[{required: true}]}>
+                    <Switch/>
+                </Form.Item>
 
-                <Form ref={this.formRef} labelCol={{flex: '100px'}}
-                      initialValues={this.state.formValues}
-                      onValuesChange={this.onValuesChange}
-                      onFinish={this.onFinish}>
-                    <Form.Item name='id' noStyle>
-                    </Form.Item>
-                    <Form.Item label='执行类' name='jobClass' rules={[{required: true}]}
-                               tooltip='org.quartz.Job接口，参考io.tmgg.job.builtin.DemoJob'>
-                        <Select options={this.state.jobClassOptions}/>
-                    </Form.Item>
-                    <Form.Item label='名称' name='name' rules={[{required: true}]}>
-                        <Input/>
-                    </Form.Item>
-
-                    <Form.Item label='cron表达式' name='cron' help='格式：秒分时日月周,留空表示手动执行'
-                               rules={[{required: true}]}>
-                        <AutoComplete placeholder='如 0 */5 * * * ?' options={cronOptions}/>
-                    </Form.Item>
-
-                    <Form.Item label='启用' name='enabled' valuePropName='checked' rules={[{required: true}]}>
-                        <Switch/>
-                    </Form.Item>
-
-
-                    {this.state.paramList?.map(p => (
-                        <div key={p.name}>
-                            <Divider>作业参数</Divider>
-                            <Form.Item label={p.label}
-                                       name={['jobData', p.name]}
-                                       key={p.name}
-                                       initialValue={p.defaultValue}
-                                       rules={[{required: p.required}]}>
-                                {ValueType.renderField(p.componentType, {
-                                    ...p.componentProps,
-                                    placeholder: p.placeholder || '请输入'
-                                })}
-                            </Form.Item>
-                        </div>
-                    ))}
-                </Form>
-            </Modal>
+                {this.state.paramList?.map(p => (
+                    <div key={p.name}>
+                        <Divider>作业参数</Divider>
+                        <Form.Item label={p.label}
+                                   name={['jobData', p.name]}
+                                   key={p.name}
+                                   initialValue={p.defaultValue}
+                                   rules={[{required: p.required}]}>
+                            {ValueType.renderField(p.componentType, {
+                                ...p.componentProps,
+                                placeholder: p.placeholder || '请输入'
+                            })}
+                        </Form.Item>
+                    </div>
+                ))}
+            </FormModal>
 
             <Modal title='作业调度状态'
                    open={this.state.statusOpen}
@@ -308,7 +299,7 @@ export default class extends React.Component {
                         },
                     }
                 ]} request={params => {
-                    params.jobId = this.state.formValues.id
+                    params.jobId = this.state.selectedRecord.id
                     return HttpUtils.get('admin/job/execute-record', params);
                 }}></ProTable>
 
@@ -323,7 +314,7 @@ export default class extends React.Component {
             if (option) {
                 const {label} = option;
                 if (StringUtils.contains(label, " ")) { // 取中文名部门设置为name
-                    this.formRef.current.setFieldValue("name", label.split(" ")[1])
+                    this.modalRef.current.formInstance.setFieldValue("name", label.split(" ")[1])
                 }
             }
         }

package/src/pages/system/log/index.jsx

@@ -59,14 +59,17 @@ export default class extends React.Component {
             <ProTable
                 request={(params) => HttpUtils.get('admin/sysLog/page', params)}
                 columns={this.columns}
-            >
-                <Form.Item label='操作' name='operation'>
-                    <Input/>
-                </Form.Item>
-                <Form.Item label='时间' name='dateRange'>
-                    <FieldDateRange/>
-                </Form.Item>
-            </ProTable>
+                searchFormRender={() => (
+                    <>
+                        <Form.Item label='操作' name='operation'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='时间' name='dateRange'>
+                            <FieldDateRange/>
+                        </Form.Item>
+                    </>
+                )}
+            />
         </Page>
     }