feat 文档完善, 封装formItem的json属性介绍

ruoyi-ui/README.md

@@ -74,3 +74,107 @@ npm install video-flash --save
 npm install file-saver --save
 
 ```
+
+## 开发教程
+
+### Element Form 封装
+
+PresetFormItems.js 里面封装了一些可以复用的表单项
+data.js 表单封装,里面会使用PresetFormItems的一些FormItem.
+
+Form表单属性介绍:
+
+  {
+    key: "ServiceAreaAbnormal", //唯一标识 一般tabs才需要
+    label: "服务区异常",//表单标题
+    formConfig: {
+      formOptions: {//element中表单配置参数
+        column: 2,
+      },
+      list: [//FormItem定义
+        {
+          label: "异常分类:",
+          key: "eventSubclass",
+          type: "RadioGroup",
+          isAlone: true,
+          required: true,
+          options: {
+            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+            options: [
+              {
+                key: "8-1",
+                label: "封闭、暂停营业",
+              },
+              {
+                key: "8-2",
+                label: "重要设施停用",
+              },
+              {
+                key: "8-3",
+                label: "其他异常",
+              },
+            ],
+          },
+        },
+        PresetFormItems.freeway,
+        PresetFormItems.direction,
+        {
+          label: "服务区:",
+          key: "dcEventServiceArea.facilityId",
+          type: "select",
+          isAlone: true,
+          required: true,
+          options: {
+            options: [
+              {
+                value: "选项1",
+                label: "黄金糕",
+              },
+            ],
+          },
+        },
+        {
+          label: "出入口:",
+          key: "dcEventServiceArea.exitsInlets",
+          type: "RadioGroup",
+          isAlone: true,
+          required: true,
+          options: {
+            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+            options: [
+              {
+                key: "1",
+                label: "出口",
+              },
+              {
+                key: "2",
+                label: "入口",
+              },
+            ],
+          },
+        },
+        PresetFormItems.startTime,
+        PresetFormItems.expectedEndTime,
+        PresetFormItems.remark,
+        PresetFormItems.source,
+      ],
+    },
+  }
+
+FormItem属性介绍:
+
+export const additionalNotes = {
+  label: "补充说明:", // 标题
+  key: "eventSourceTips", //数据存储字段
+  isAlone: true, //  独立
+  required: true, //必填
+  default: 5, //默认值
+  type: "input", //组件类型(el-input 去掉el-即可) 不填默认为input
+  options: {  //element原生formItem属性
+    type: "textarea",
+    autosize: true,
+    maxlength: 150,
+    autosize: { minRows: 6, maxRows: 6 },
+    showWordLimit: true,
+  },
+};