Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n

src/router/index.ts

@@ -19,6 +19,7 @@ import chatRouter from './modules/chat'
 import componentsRouter from './modules/components'
 import othersRouter from './modules/other'
 import externalLink from './modules/externalLink'
+import formRouter from './modules/from'
 
 /**
  * path ==> 路由路径
@@ -109,6 +110,7 @@ export const asyncRoutes = [
     dataScreenRouter,
     chartsRouter,
     tableRouter,
+    formRouter,
     chatRouter,
     othersRouter,
     nestedRouter,
@@ -118,10 +120,10 @@ export const asyncRoutes = [
     externalLink,
     clipboardTable,
     systemRouter,
-    {
+    // {
-        path: '/:pathMatch(.*)',
+    //     path: '/:pathMatch(.*)',
-        redirect: '/error/404'
+    //     redirect: '/error/404'
-    }
+    // }
 ]
 
 const router = createRouter({

src/router/modules/from.ts

@@ -0,0 +1,26 @@
+
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from "@/layout/index.vue";
+
+const formRouter = {
+    path: '/form',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'form',
+    alwaysShow:true,
+    meta: {
+        title: '超级表单',
+        icon: 'Grape'
+    },
+    children: [
+        {
+            path: 'validateForm',
+            component: () => import('@/views/form/validateForm.vue'),
+            name: 'validate-form',
+            meta: { title: '校验 Form', keepAlive: true , icon: 'MenuIcon'}
+        },
+    ]
+}
+
+export default formRouter

src/router/modules/other.ts

@@ -42,12 +42,6 @@ const othersRouter = {
       name: 'grid-sorter',
       meta: { title: '卡片拖拽', icon: 'MenuIcon' }
     },
-    {
-      path: 'form',
-      component: () => import('@/views/other/form.vue'),
-      name: 'form',
-      meta: { title: '表单',  roles:['other'], icon: 'MenuIcon'}
-    },
     {
       path: 'upload',
       component: () => import('@/views/other/upload.vue'),

src/views/form/validateForm.vue

@@ -0,0 +1,156 @@
+
+<template>
+  <u-container-layout>
+    <div style="max-width: 800px">
+      <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+          class="demo-ruleForm"
+          :size="formSize"
+      >
+        <el-form-item label="活动名称" prop="name">
+          <el-input v-model="ruleForm.name" />
+        </el-form-item>
+        <el-form-item label="活动区域" prop="region">
+          <el-select v-model="ruleForm.region" placeholder="活动区域">
+            <el-option label="区域1" value="上海" />
+            <el-option label="区域2" value="北京" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="即时配送" required>
+          <el-col :span="11">
+            <el-form-item prop="date1">
+              <el-date-picker
+                  v-model="ruleForm.date1"
+                  type="date"
+                  placeholder="选择时间"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col class="text-center" :span="2" style="text-align: center">
+            <span class="text-gray-500">-</span>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item prop="date2">
+              <el-time-picker v-model="ruleForm.date2" placeholder="选择时间" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="即时配送" prop="delivery">
+          <el-switch v-model="ruleForm.delivery" />
+        </el-form-item>
+        <el-form-item label="活动性质" prop="type">
+          <el-checkbox-group v-model="ruleForm.type">
+            <el-checkbox label="美食/餐厅线上活动" name="type" />
+            <el-checkbox label="地推活动" name="type" />
+            <el-checkbox label="线下主题活动" name="type" />
+            <el-checkbox label="单纯品牌曝光" name="type" />
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="特殊资源" prop="resource">
+          <el-radio-group v-model="ruleForm.resource">
+            <el-radio label="线上品牌商赞助" />
+            <el-radio label="线下场地免费" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="上传图片" prop="img">
+          <u-upload v-model="ruleForm.img" />
+        </el-form-item>
+        <el-form-item label="备注" prop="desc">
+          <el-input v-model="ruleForm.desc" type="textarea" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm(ruleFormRef)">立即创建</el-button>
+          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </u-container-layout>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import UUpload from './components/Upload.vue'
+
+const formSize = ref('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive({
+  name: '跑步',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+  img: [],
+})
+
+const rules = reactive({
+  name: [
+    { required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+  ],
+  img: [{ required: true, message: '请上传图片', trigger: 'blur' }],
+  region: [
+    {
+      required: true,
+      message: '请选择活动区域',
+      trigger: 'change',
+    },
+  ],
+  date1: [
+    {
+      type: 'date',
+      required: true,
+      message: '请选择时间',
+      trigger: 'change',
+    },
+  ],
+  date2: [
+    {
+      type: 'date',
+      required: true,
+      message: '请选择时间',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    {
+      type: 'array',
+      required: true,
+      message: '请至少选择一个活动性质',
+      trigger: 'change',
+    },
+  ],
+  resource: [
+    {
+      required: true,
+      message: '请选择活动资源\n',
+      trigger: 'change',
+    },
+  ],
+  desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log('--FORM---', ruleForm)
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>