Просмотр исходного кода

修改表单设计页面左侧展示内容图标和顺序

wyn 5 месяцев назад
Родитель
Сommit
2df2f50eaa
1 измененных файлов с 17 добавлено и 11 удалено
  1. 17 11
      src/components/FormDesigner.tsx

+ 17 - 11
src/components/FormDesigner.tsx

@@ -34,7 +34,7 @@ import {
   Dropdown
 } from 'antd';
 import type { MenuProps } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
+import { UploadOutlined, DownSquareOutlined, CheckSquareOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import type { UploadFile } from 'antd/es/upload/interface';
 import { 
   ArrowLeft, 
@@ -54,7 +54,6 @@ import {
   Calendar,
   Hash,
   ToggleLeft,
-  CheckSquare,
   Upload as UploadIcon,
   Layout,
   FileText
@@ -183,22 +182,23 @@ const componentLibrary: Record<string, ComponentItem[]> = {
   '输入控件': [
     { type: 'input', label: '输入框', icon: Type },
     { type: 'textarea', label: '多行输入', icon: FileText },
-    { type: 'password', label: '密码输入', icon: Type },
     { type: 'number', label: '数字输入', icon: Hash },
-    { type: 'select', label: '选择框', icon: CheckSquare },
+    { type: 'cascader', label: '联级选框', icon: DownSquareOutlined },
+    { type: 'select', label: '下拉选框', icon: DownSquareOutlined },
+    { type: 'switch', label: '开关', icon: ToggleLeft },
     { type: 'date', label: '日期选择', icon: Calendar },
     { type: 'daterange', label: '日期范围', icon: Calendar },
-    { type: 'timepicker', label: '时间选择', icon: Calendar },
-    { type: 'switch', label: '开关', icon: ToggleLeft },
+    { type: 'timepicker', label: '时间选择', icon: ClockCircleOutlined },
     { type: 'radio', label: '单选框组', icon: RadioIcon },
-    { type: 'checkbox', label: '复选框组', icon: CheckSquare },
-    { type: 'cascader', label: '联级选择', icon: CheckSquare },
+    { type: 'checkbox', label: '复选框组', icon: CheckSquareOutlined },
+    { type: 'password', label: '密码输入', icon: Type },
     { type: 'upload', label: '单图上传', icon: UploadIcon, uploadType: 'single-image' },
     { type: 'upload', label: '多图上传', icon: UploadIcon, uploadType: 'multiple-image' },
     { type: 'upload', label: '文件上传', icon: UploadIcon, uploadType: 'file' },
+ 
     // { type: 'slider', label: '滑动条', icon: Hash },
     // { type: 'rate', label: '评分器', icon: Hash },
-    // { type: 'treeselect', label: '树选择', icon: CheckSquare },
+    // { type: 'treeselect', label: '树选择', icon: DownSquareOutlined },
   ],
   // '布局组件': [
   //   { type: 'card', label: '卡片', icon: Layout },
@@ -1833,8 +1833,14 @@ export default function FormDesigner() {
                 key="submit"
                 type="primary"
                 onClick={() => {
-                  // 预览提交不执行任何操作,也不关闭弹窗
-                  return;
+                  previewForm.validateFields().then(() => {
+                    toast.success('提交成功');
+                    setPreviewVisible(false);
+                  }).catch(() => {
+                    if (formConfig.showValidationError) {
+                      toast.error('请检查表单填写');
+                    }
+                  });
                 }}
               >
                 提交