@jiangood/open-admin 3.1.0 → 3.1.2

package/package.json

@@ -59,7 +59,7 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   },
-  "version": "3.1.0",
+  "version": "3.1.2",
   "overrides": {
     "zod-validation-error": "^4.0.2"
   }

package/src/framework/components/DrawerForm/index.tsx

@@ -0,0 +1,108 @@
+import {Drawer, Form, FormInstance} from 'antd'
+import React from 'react'
+
+export interface FormDrawerProps {
+  title: string
+  onFinish?: (values: Record<string, unknown>) => Promise<void> | void
+  onValuesChange?: (changedValues: Record<string, unknown>, allValues: Record<string, unknown>) => void
+  width?: number
+  height?: number
+  placement?: 'left' | 'right' | 'top' | 'bottom'
+  layout?: 'horizontal' | 'vertical' | 'inline'
+  labelCol?: Record<string, unknown>
+  wrapperCol?: Record<string, unknown>
+  extra?: React.ReactNode
+  children?: React.ReactNode
+}
+
+export default class FormDrawer extends React.Component<FormDrawerProps> {
+
+  readonly state = {
+    visible: false,
+    confirmLoading: false,
+  }
+
+  private pendingValues: Record<string, unknown> | null = null
+  private formRef = React.createRef<FormInstance>()
+
+  get formInstance() {
+    return this.formRef.current
+  }
+
+  open = (values?: Record<string, unknown>) => {
+    this.pendingValues = values || {}
+    this.setState({visible: true})
+  }
+
+  componentDidUpdate(_: Readonly<FormDrawerProps>, prevState: Readonly<{ visible: boolean; confirmLoading: boolean }>) {
+    if (this.state.visible && !prevState.visible) {
+      setTimeout(() => {
+        if (this.pendingValues && Object.keys(this.pendingValues).length > 0) {
+          this.formRef.current?.setFieldsValue(this.pendingValues)
+        } else {
+          this.formRef.current?.resetFields()
+        }
+        this.pendingValues = null
+      })
+    }
+  }
+
+  private handleSubmit = async () => {
+    this.setState({confirmLoading: true})
+    try {
+      const values = await this.formRef.current?.validateFields()
+      if (values == null) return
+      await this.props.onFinish?.(values)
+      this.setState({visible: false})
+    } catch {
+      // 提交失败（错误提示已由 HttpClient 弹出），保持抽屉打开以便用户修改后重试
+    } finally {
+      this.setState({confirmLoading: false})
+    }
+  }
+
+  private footer = () => (
+    <div style={{textAlign: 'right'}}>
+      <button
+        type='button'
+        className='ant-btn ant-btn-default'
+        onClick={() => this.setState({visible: false})}
+      >
+        取消
+      </button>
+      <button
+        type='button'
+        className='ant-btn ant-btn-primary'
+        style={{marginLeft: 8}}
+        disabled={this.state.confirmLoading}
+        onClick={this.handleSubmit}
+      >
+        {this.state.confirmLoading ? '提交中...' : '确定'}
+      </button>
+    </div>
+  )
+
+  render() {
+    return (
+      <Drawer
+        title={this.props.title}
+        open={this.state.visible}
+        onClose={() => this.setState({visible: false})}
+        destroyOnHidden
+        width={this.props.placement === 'top' || this.props.placement === 'bottom' ? undefined : (this.props.width ?? 600)}
+        height={this.props.placement === 'top' || this.props.placement === 'bottom' ? (this.props.height ?? 600) : undefined}
+        placement={this.props.placement ?? 'right'}
+        footer={this.footer()}
+      >
+        <Form ref={this.formRef}
+              layout={this.props.layout ?? 'vertical'}
+              labelCol={this.props.labelCol}
+              wrapperCol={this.props.wrapperCol}
+              onValuesChange={this.props.onValuesChange}>
+          <Form.Item name='id' noStyle/>
+          {this.props.children}
+        </Form>
+      </Drawer>
+    )
+  }
+}

package/src/framework/components/FormModal/index.tsx

@@ -6,7 +6,9 @@ export interface FormModalProps {
   onFinish?: (values: Record<string, unknown>) => Promise<void> | void
   onValuesChange?: (changedValues: Record<string, unknown>, allValues: Record<string, unknown>) => void
   width?: number
+  layout?: 'horizontal' | 'vertical' | 'inline'
   labelCol?: Record<string, unknown>
+  wrapperCol?: Record<string, unknown>
   children?: React.ReactNode
 }
 
@@ -67,7 +69,10 @@ export default class FormModal extends React.Component<FormModalProps> { // NOSO
         destroyOnHidden
         width={this.props.width ?? 600}
       >
-        <Form ref={this.formRef} labelCol={this.props.labelCol ?? {flex: '100px'}}
+        <Form ref={this.formRef}
+              layout={this.props.layout}
+              labelCol={this.props.layout ? undefined : (this.props.labelCol ?? {flex: '100px'})}
+              wrapperCol={this.props.wrapperCol}
               onValuesChange={this.props.onValuesChange}>
           <Form.Item name='id' noStyle/>
           {this.props.children}

package/src/framework/components/ValueType/registry.tsx

@@ -1,4 +1,4 @@
-import {Input} from "antd";
+import {Input, InputNumber, Switch} from "antd";
 
 import {ViewPassword, ViewBoolean, ViewImage, ViewText} from "../../views";
 import {FieldDictSelect, FieldRemoteSelect} from "../../fields";
@@ -6,6 +6,14 @@ import {FieldDictSelect, FieldRemoteSelect} from "../../fields";
 
 export const fieldRegistry = {
     'text':Input,
+    'string': Input,
+
+    'number': InputNumber,
+
+    'boolean': Switch,
+
+    'img': Input,
+    'img_base64': Input,
 
     'dict':FieldDictSelect,
     'password':Input.Password,

package/src/framework/components/index.ts

@@ -10,3 +10,4 @@ export * from './DownloadModal'
 export * from './OrgSwitcher'
 export { default as ErrorBoundary } from './ErrorBoundary'
 export { default as FormModal } from './FormModal'
+export { default as FormDrawer } from './DrawerForm'

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

@@ -231,8 +231,9 @@ export default class JobPage extends React.Component {
                                    name={['jobData', p.name]}
                                    key={p.name}
                                    initialValue={p.defaultValue}
+                                   valuePropName={p.valueType === 'boolean' ? 'checked' : 'value'}
                                    rules={[{required: p.required}]}>
-                            {ValueType.renderField(p.componentType, {
+                            {ValueType.renderField(p.valueType, {
                                 ...p.componentProps,
                                 placeholder: p.placeholder || '请输入'
                             })}

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

@@ -11,6 +11,7 @@ import {
     NamedIcon,
     Page,
     PermActions,
+    PermUtils,
     ViewSwitch,
 } from "../../../framework";
 
@@ -91,6 +92,7 @@ export default class OrgPage extends React.Component {
     render() {
         const {selectedOrg} = this.state
         const params = this.state.params
+        const canSort = PermUtils.hasPermission('sys-org:update')
 
         return <Page title="组织机构" description="管理组织机构树" actions={
             <Button type='primary' perm='sys-org:create' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>
@@ -122,6 +124,7 @@ export default class OrgPage extends React.Component {
                                     <div>
                                         拖拽排序&nbsp;<Switch
                                         value={this.state.draggable}
+                                        disabled={!canSort}
                                         onChange={this.onDraggableChange}/>
                                     </div>
                                     <Button size='small' shape='round' icon={<SyncOutlined/>} onClick={this.loadTree}>刷新</Button>
@@ -224,6 +227,7 @@ export default class OrgPage extends React.Component {
     }
 
     onDrop = (e) => {
+        if (!PermUtils.hasPermission('sys-org:update')) return;
         const {dragNode, dropToGap, node} = e;
         const dropKey = node.key;
         const dragKey = dragNode.key;