Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n
This commit is contained in:
zouzhibing
commit
304d9f2bfc
|
|
@ -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(.*)',
|
||||
redirect: '/error/404'
|
||||
}
|
||||
// {
|
||||
// path: '/:pathMatch(.*)',
|
||||
// redirect: '/error/404'
|
||||
// }
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue