From bbe80a8505cdbb4902f3684566939c8a0efa3145 Mon Sep 17 00:00:00 2001
From: dengweisheng <dengws@ydool.com>
Date: Wed, 5 Jul 2023 17:21:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormDialog/example.vue | 70 +++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/components/FormDialog/example.vue

diff --git a/src/components/FormDialog/example.vue b/src/components/FormDialog/example.vue
new file mode 100644
index 0000000..5bdf57e
--- /dev/null
+++ b/src/components/FormDialog/example.vue
@@ -0,0 +1,70 @@
+<template>
+  <!-- 使用示例 -->
+  <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
+    <template #default>
+      <el-form :model="form" label-width="120px">
+        <el-form-item label="Activity name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="Activity zone">
+          <el-select v-model="form.region" placeholder="please select your zone">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Activity time">
+          <el-col :span="11">
+            <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
+          </el-col>
+          <el-col :span="2" class="text-center">
+            <span class="text-gray-500">-</span>
+          </el-col>
+          <el-col :span="11">
+            <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
+          </el-col>
+        </el-form-item>
+      </el-form>
+    </template>
+  </FormDialog>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+/* 表单弹框 */
+const formDialog = ref(false)
+const FormDialogData = reactive({
+  title: '新增', // String | 必填 | 标题
+  width: '30%', // String | 默认值 30% | 弹框宽度
+  formType: 'slot', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+
+  /* ------------- */
+  // 注意：以下配置为 json 时才有效
+  formJosnRules: {}, // 默认为{}，表单校验规则
+  formJosnLabelWidth: '120px', // 默认为 120px，表单 label 宽度
+  // form 元素
+  formJosnElement: [
+    {
+      type: 'input', // 元素类型
+      cloSpan: '24', // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '姓名', // 元素的 label
+      placeholder: '请填写姓名', // 元素的 placeholder
+      model: 'name', // 元素 form 的 key
+
+      // options: [] // type 为 select 生效 （默认为 [] ）
+
+      // dateType: [] // type 为 date 生效 （默认为 date ）
+      // dateValueformat: [] // type 为 date 生效 （默认为 YYYY-MM-DD ）
+    },
+  ],
+  formJosnDisabled: false, // 表单是否禁用
+  formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
+})
+const handleSubmit = (formJsonValue) => {
+  formDialog.value = false
+}
+const form = ref({})
+
+</script>
+<style lang='scss' scoped></style>
+