ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加审批组件

Browse Source
This commit is contained in:
dengqichen 2025-10-25 15:13:13 +08:00
parent 9d0b28cdec
commit 90af34d536
10 changed files with 87 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/FormDesigner/Preview.tsx
View File

@ -90,7 +90,7 @@ const FormPreview = forwardRef<FormPreviewRef, FormPreviewProps>(({ fields, form
if (fields.length === 0) {
return (
<div style={{ padding: 40, textAlign: 'center', color: '#8c8c8c' }}>
<div className="form-empty-state">
表单为空
</div>
);
@ -101,7 +101,7 @@ const FormPreview = forwardRef<FormPreviewRef, FormPreviewProps>(({ fields, form
const wrapperColSpan = formConfig.labelAlign === 'left' || formConfig.labelAlign === 'right' ? 18 : undefined;
return (
<div style={{ padding: '24px 40px' }}>
<div className="form-container-padding form-preview-compact">
<Form
form={form}
layout={formLayout}
@ -124,7 +124,7 @@ const FormPreview = forwardRef<FormPreviewRef, FormPreviewProps>(({ fields, form
</Form>
{Object.keys(formData).length > 0 && (
<div style={{ marginTop: 24, padding: 16, background: '#f5f5f5', borderRadius: 4 }}>
<div className="form-data-display">
<h4>表单数据：</h4>
<pre>{JSON.stringify(formData, null, 2)}</pre>
</div>

4
frontend/src/components/FormDesigner/Renderer.tsx
View File

@ -224,7 +224,7 @@ const FormRenderer = forwardRef<FormRendererRef, FormRendererProps>((props, ref)
if (fields.length === 0) {
return (
<div style={{ padding: 40, textAlign: 'center', color: '#8c8c8c' }}>
<div className="form-empty-state">
表单为空
</div>
);
@ -236,7 +236,7 @@ const FormRenderer = forwardRef<FormRendererRef, FormRendererProps>((props, ref)
return (
<ComponentsContext.Provider value={allComponents}>
<div style={{ padding: '24px 40px' }}>
<div className="form-container-padding form-renderer-compact">
<Form
form={form}
layout={formLayout}

2
frontend/src/components/FormDesigner/components/FormFieldsRenderer.tsx
View File

@ -40,7 +40,7 @@ const FormFieldsRenderer: React.FC<FormFieldsRendererProps> = ({
// 布局组件：文本、分割线
if (field.type === 'text' || field.type === 'divider') {
return (
<div key={field.id}>
<div key={field.id} style={{ marginBottom: 8 }}>
<FieldRenderer field={field} isPreview={true} />
</div>
);

2
frontend/src/components/FormDesigner/components/GridFieldPreview.tsx
View File

@ -125,7 +125,7 @@ const GridFieldPreview: React.FC<GridFieldPreviewProps> = ({
};
return (
<div style={{ marginBottom: 16 }}>
<div style={{ marginBottom: 8 }}>
<Row gutter={field.gutter || 16}>
{children.map((columnFields, colIndex) => {
const colSpan = getColSpan(colIndex);

2
frontend/src/components/FormDesigner/components/LinkageRuleEditor.tsx
View File

@ -127,7 +127,7 @@ const LinkageRuleEditor: React.FC<LinkageRuleEditorProps> = ({
</div>
{value.length === 0 ? (
<div style={{ padding: '24px 0', textAlign: 'center', color: '#8c8c8c', fontSize: 12 }}>
<div className="form-empty-list-hint">
暂无联动规则，点击上方按钮添加
</div>
) : (

12
frontend/src/components/FormDesigner/components/PropertyPanel.tsx
View File

@ -178,7 +178,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
const renderFieldProperties = () => {
if (!selectedField) {
return (
<div style={{ padding: 24, textAlign: 'center', color: '#8c8c8c' }}>
<div className="form-property-panel-empty">
请从画布中选择一个字段
</div>
);
@ -202,7 +202,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
const CustomConfig = componentMeta.PropertyConfigComponent;
console.log('✅ 使用自定义配置组件:', componentMeta.type);
return (
<div style={{ padding: 16 }}>
<div className="form-property-panel-content">
<CustomConfig
field={selectedField}
onChange={onFieldChange}
@ -221,7 +221,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
form={form}
layout="vertical"
onValuesChange={handleFieldUpdate}
style={{ padding: 16 }}
className="form-property-panel-content"
>
{/* 布局组件不显示字段标签和字段名称 */}
{selectedField.type !== 'divider' && selectedField.type !== 'grid' && selectedField.type !== 'text' && (
@ -498,7 +498,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
</Radio.Group>
</Form.Item>
<div style={{ padding: '8px 12px', background: '#f0f5ff', borderRadius: 4, marginBottom: 16 }}>
<div className="form-property-info-box">
<Text type="secondary" style={{ fontSize: 12 }}>
• 单人审批：仅需一人审批<br />
• 会签：所有审批人都必须同意<br />
@ -746,7 +746,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
layout="vertical"
initialValues={formConfig}
onValuesChange={(_, allValues) => onFormConfigChange(allValues)}
style={{ padding: 16 }}
className="form-property-panel-content"
>
<Form.Item label="标签对齐方式" name="labelAlign">
<Radio.Group buttonStyle="solid">
@ -796,7 +796,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
<Tabs
defaultActiveKey="field"
style={{ padding: '0 0 0 16px' }}
className="form-property-nested-indent"
items={[
{
key: 'field',

2
frontend/src/components/FormDesigner/components/ValidationRuleEditor.tsx
View File

@ -91,7 +91,7 @@ const ValidationRuleEditor: React.FC<ValidationRuleEditorProps> = ({ value = [],
</div>
{value.length === 0 ? (
<div style={{ padding: '24px 0', textAlign: 'center', color: '#8c8c8c', fontSize: 12 }}>
<div className="form-empty-list-hint">
暂无验证规则，点击上方按钮添加
</div>
) : (

70
frontend/src/components/FormDesigner/styles.css
View File

@ -293,3 +293,73 @@
}
}
/* 表单渲染器和预览器的紧凑间距样式 */
.form-renderer-compact .ant-form-item {
margin-bottom: 8px !important;
}
.form-preview-compact .ant-form-item {
margin-bottom: 8px !important;
}
/* 栅格内部的字段间距也需要调整 */
.form-renderer-compact .ant-row .ant-form-item {
margin-bottom: 8px !important;
}
.form-preview-compact .ant-row .ant-form-item {
margin-bottom: 8px !important;
}
/* 布局组件的间距 */
.form-renderer-compact > div > div,
.form-preview-compact > div > div {
margin-bottom: 8px;
}
/* 通用内边距类 */
.form-container-padding {
padding: 24px 40px;
}
.form-empty-state {
padding: 40px;
text-align: center;
color: #8c8c8c;
}
.form-data-display {
margin-top: 24px;
padding: 16px;
background: #f5f5f5;
border-radius: 4px;
}
.form-property-panel-empty {
padding: 24px;
text-align: center;
color: #8c8c8c;
}
.form-property-panel-content {
padding: 16px;
}
.form-property-info-box {
padding: 8px 12px;
background: #f0f5ff;
border-radius: 4px;
margin-bottom: 16px;
}
.form-property-nested-indent {
padding: 0 0 0 16px;
}
.form-empty-list-hint {
padding: 24px 0;
text-align: center;
color: #8c8c8c;
font-size: 12px;
}

5
frontend/src/pages/Form/Definition/components/CreateModal.tsx
View File

@ -212,10 +212,7 @@ const CreateModal: React.FC<CreateModalProps> = ({ visible, onClose, onSuccess }
<SelectContent>
{categories.map(cat => (
<SelectItem key={cat.id} value={cat.id.toString()}>
<div className="flex items-center gap-2">
<Folder className="h-3.5 w-3.5" />
{cat.name}
</div>
{cat.name}
</SelectItem>
))}
</SelectContent>

5
frontend/src/pages/Form/Definition/components/EditBasicInfoModal.tsx
View File

@ -189,10 +189,7 @@ const EditBasicInfoModal: React.FC<EditBasicInfoModalProps> = ({ visible, record
<SelectContent>
{categories.map(cat => (
<SelectItem key={cat.id} value={cat.id.toString()}>
<div className="flex items-center gap-2">
<Folder className="h-3.5 w-3.5" />
{cat.name}
</div>
{cat.name}
</SelectItem>
))}
</SelectContent>