diff --git a/src/layout/AsideView.vue b/src/layout/AsideView.vue index f34344b..e243c5c 100644 --- a/src/layout/AsideView.vue +++ b/src/layout/AsideView.vue @@ -57,14 +57,14 @@ const defaultItems: IMenuItem[] = [ key: 'advanced-form', children: [ { - title: '文件上传', - key: 'file-upload', - index: '/admin/advanced-form/file-upload' + title: '弹出层表单', + key: 'modal', + index: '/admin/advanced-form/modal' }, { - title: '图片裁剪', - key: 'img-crop', - index: '/admin/advanced-form/img-crop' + title: '搜索表单', + key: 'search', + index: '/admin/advanced-form/search' } ] } @@ -77,6 +77,16 @@ const defaultItems: IMenuItem[] = [ icon: rawComponent(IconMenu), key: '2', children: [ + { + title: '文件上传', + key: 'file-upload', + index: '/admin/file-upload' + }, + { + title: '图片裁剪', + key: 'img-crop', + index: '/admin/img-crop' + }, { title: '水印', key: 'watermark', diff --git a/src/router/index.ts b/src/router/index.ts index 01a6c48..012f980 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -77,14 +77,6 @@ const routes: RouteRecordRaw[] = [ path: 'index', name: 'base-form-index', component: () => import('@/views/admin/FormBase.vue') - }, - { - path: 'text-ellipsis', - name: 'text-ellipsis', - component: () => import('@/views/admin/TableBase.vue'), - meta: { - title: '文本省略' - } } ] }, @@ -98,23 +90,55 @@ const routes: RouteRecordRaw[] = [ }, children: [ { - path: 'file-upload', - name: 'file-upload', - component: () => import('@/views/admin/TableBase.vue'), + path: 'modal', + name: 'modal', + component: () => import('@/views/admin/FormAdvancedModal.vue'), + meta: { + title: '弹出层表单' + } + }, + { + path: 'search', + name: 'search', + component: () => import('@/views/admin/FormAdvancedSearch.vue'), + meta: { + title: '搜索表单' + } + }, + { + path: 'step', + name: 'step', + component: () => import('@/views/admin/FormAdvancedModal.vue'), meta: { - title: '文件上传' + title: '分步表单' } }, { - path: 'img-crop', - name: 'img-crop', - component: () => import('@/views/admin/TableBase.vue'), + path: 'dynamic', + name: 'dynamic', + component: () => import('@/views/admin/FormAdvancedModal.vue'), meta: { - title: '图片裁剪' + title: '动态增减嵌套表单' } } ] }, + { + path: 'file-upload', + name: 'file-upload', + component: () => import('@/views/admin/TableBase.vue'), + meta: { + title: '文件上传' + } + }, + { + path: 'img-crop', + name: 'img-crop', + component: () => import('@/views/admin/TableBase.vue'), + meta: { + title: '图片裁剪' + } + }, { path: 'watermark', name: 'watermark', diff --git a/src/views/admin/FormAdvanced.vue b/src/views/admin/FormAdvanced.vue index 87ab4b8..3c81ef7 100644 --- a/src/views/admin/FormAdvanced.vue +++ b/src/views/admin/FormAdvanced.vue @@ -7,10 +7,10 @@ import { RouterView } from 'vue-router' <div class="intro"> <div>高级表单涉及的主要组件有:</div> <ul> - <li>单行输入框</li> - <li>下拉选择框</li> - <li>日期时间选择框</li> - <li>切换、多选、单选、多行文本</li> + <li>弹出层表单</li> + <li>搜索表单</li> + <li>分步表单</li> + <li>动态增减嵌套表单与依赖联动</li> </ul> </div> <RouterView></RouterView> diff --git a/src/views/admin/FormAdvancedModal.vue b/src/views/admin/FormAdvancedModal.vue new file mode 100644 index 0000000..9d23de2 --- /dev/null +++ b/src/views/admin/FormAdvancedModal.vue @@ -0,0 +1,49 @@ +<script lang="ts" setup> +import { reactive, ref } from 'vue' + +const dialogFormVisible = ref(false) +const formLabelWidth = '140px' + +const form = reactive({ + name: '', + region: '', + date1: '', + date2: '', + delivery: false, + type: [], + resource: '', + desc: '' +}) +</script> + +<template> + <div class="main-container"> + <el-button plain @click="dialogFormVisible = true"> Open a Form nested Dialog </el-button> + <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500"> + <el-form :model="form"> + <el-form-item label="Promotion name" :label-width="formLabelWidth"> + <el-input v-model="form.name" autocomplete="off" /> + </el-form-item> + <el-form-item label="Zones" :label-width="formLabelWidth"> + <el-select v-model="form.region" placeholder="Please select a zone"> + <el-option label="Zone No.1" value="shanghai" /> + <el-option label="Zone No.2" value="beijing" /> + </el-select> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button @click="dialogFormVisible = false">Cancel</el-button> + <el-button type="primary" @click="dialogFormVisible = false"> Confirm </el-button> + </div> + </template> + </el-dialog> + </div> +</template> + +<style scoped> +.main-container { + background-color: #fff; + padding: 24px; +} +</style> diff --git a/src/views/admin/FormAdvancedSearch.vue b/src/views/admin/FormAdvancedSearch.vue new file mode 100644 index 0000000..360963d --- /dev/null +++ b/src/views/admin/FormAdvancedSearch.vue @@ -0,0 +1,56 @@ +<script lang="ts" setup> +import { reactive, ref } from 'vue' +import type { FormInstance } from 'element-plus' + +const formRef = ref<FormInstance>() +const initFormData = { + user: '', + region: '', + date: '' +} + +const formInline = reactive(initFormData) + +const onReset = () => { + if (formRef.value) { + formRef.value.resetFields() + } +} + +const onSubmit = () => { + console.log('submit!') +} +</script> + +<template> + <el-form ref="formRef" :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item label="Approved by" prop="user"> + <el-input v-model="formInline.user" placeholder="Approved by" clearable /> + </el-form-item> + <el-form-item label="Activity zone" prop="region"> + <el-select v-model="formInline.region" placeholder="Activity zone" clearable> + <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" prop="date"> + <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="onReset">重置</el-button> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="onSubmit">查询</el-button> + </el-form-item> + </el-form> +</template> + +<style> +.demo-form-inline .el-input { + --el-input-width: 220px; +} + +.demo-form-inline .el-select { + --el-select-width: 220px; +} +</style> diff --git a/src/views/admin/FormBase.vue b/src/views/admin/FormBase.vue index 877aa38..eb4f77e 100644 --- a/src/views/admin/FormBase.vue +++ b/src/views/admin/FormBase.vue @@ -5,8 +5,7 @@ import type { FormInstance } from 'element-plus' const initForm = { name: '', region: '', - date1: '', - date2: '', + date: '', delivery: false, type: [], resource: '', @@ -36,35 +35,27 @@ const resetForm = (formEl: FormInstance | undefined) => { </ul> </div> <el-form ref="ruleFormRef" :model="form" label-width="auto" style="max-width: 600px"> - <el-form-item label="Activity name"> + <el-form-item label="Activity name" prop="name"> <el-input v-model="form.name" /> </el-form-item> - <el-form-item label="Activity zone"> + <el-form-item label="Activity zone" prop="region"> <el-select v-model="form.region" placeholder="please select your zone"> <el-option label="上海" value="shanghai" /> <el-option label="北京" 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 label="Activity date" prop="date"> + <el-date-picker + v-model="form.date" + type="date" + placeholder="Pick a date" + style="width: 100%" + /> </el-form-item> - <el-form-item label="Instant delivery"> + <el-form-item label="Instant delivery" prop="delivery"> <el-switch v-model="form.delivery" /> </el-form-item> - <el-form-item label="Activity type"> + <el-form-item label="Activity type" prop="type"> <el-checkbox-group v-model="form.type"> <el-checkbox value="Online activities" name="type"> Online activities </el-checkbox> <el-checkbox value="Promotion activities" name="type"> Promotion activities </el-checkbox> @@ -74,13 +65,13 @@ const resetForm = (formEl: FormInstance | undefined) => { </el-checkbox> </el-checkbox-group> </el-form-item> - <el-form-item label="Resources"> + <el-form-item label="Resources" prop="resource"> <el-radio-group v-model="form.resource"> <el-radio value="Sponsor">Sponsor</el-radio> <el-radio value="Venue">Venue</el-radio> </el-radio-group> </el-form-item> - <el-form-item label="Activity form"> + <el-form-item label="Activity form" prop="desc"> <el-input v-model="form.desc" type="textarea" /> </el-form-item> <el-button type="primary" @click="onSubmit">提交</el-button>