From 62baacce8e509f817c86e29a9ff8ed73f14c9b95 Mon Sep 17 00:00:00 2001
From: qingzhengli <1204552371@qq.com>
Date: Tue, 20 Feb 2024 09:52:47 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=96=87=E6=A1=A3=E5=AE=8C=E5=96=84,=20?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85formItem=E7=9A=84json=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/README.md | 104 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)

diff --git a/ruoyi-ui/README.md b/ruoyi-ui/README.md
index 559cb4f1..43915e09 100644
--- a/ruoyi-ui/README.md
+++ b/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,
+  },
+};