17vue3实战-----使用配置文件生成简易页面

1.写在前面

后台管理系统的开发很简单。无论是用户模块、部门模块、角色模块还是其它模块,界面和业务逻辑都相对比较简单，我会省略这些模块的搭建过程,而着重去讲述一些比较复杂或者新颖的技术点。

2.背景

在后台管理项目,经常会出现以下情况:

在很多模块中,都有类似以上红色区域的情况。这些表单的个数、种类(可能是select、input…)、具体内容都不同。但他们却又有一些相关的地方。如果一个一个界面搭建会比较麻烦,如果能通过配置文件将红色区域的东西表达出来,根据配置文件来确定红色区域的页面,那这万事大吉了。

3.实现

3.1界面效果

这里我以部门模块为例,以下有两个input和一个date-picker。

3.2新建config配置文件

在department新建config配置文件:

department/config/search.config.ts：

const searchConfig = {formItems: [{type: 'input',prop: 'name',label: '部门名称',placeholder: '请输入查询的部门名称',initialValue: 'bbb'},{type: 'input',prop: 'leader',label: '部门领导',placeholder: '请输入查询的领导名称'},{type: 'date-picker',prop: 'createAt',label: '创建时间'}]
}
export default searchConfig

3.3封装组件

将红色搜索区域封装成一个组件:

components/page-search/page-search.vue:

<template><div class="search"><!-- 1.输入搜索关键字的表单 --><el-form:model="searchForm"ref="formRef":label-width="searchConfig.labelWidth ?? '80px'"size="large"><el-row :gutter="20"><template v-for="item in searchConfig.formItems" :key="item.prop"><el-col :span="8"><el-form-item :label="item.label" :prop="item.prop"><template v-if="item.type === 'input'"><el-inputv-model="searchForm[item.prop]":placeholder="item.placeholder"/></template><template v-if="item.type === 'date-picker'"><el-date-pickerv-model="searchForm[item.prop]"type="daterange"range-separator="-"start-placeholder="开始时间"end-placeholder="结束时间"/></template><template v-if="item.type === 'select'"><el-selectv-model="searchForm[item.prop]":placeholder="item.placeholder"style="width: 100%"><template v-for="option in item.options" :key="option.value"><el-option :label="option.label" :value="option.value" /></template></el-select></template></el-form-item></el-col></template></el-row></el-form><!-- 2.重置和搜索的按钮 --><div class="btns"><el-button icon="Refresh" @click="handleResetClick">重置</el-button><el-button icon="Search" type="primary" @click="handleQueryClick">查询</el-button></div></div>
</template><script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'// 定义自定义事件/接收的属性
interface IProps {searchConfig: {labelWidth?: stringformItems: any[]}
}
const props = defineProps<IProps>()
// 定义form的数据
const initialForm: any = {}
for (const item of props.searchConfig.formItems) {initialForm[item.prop] = item.initialValue ?? ''
}
const searchForm = reactive(initialForm)...
</script><style lang="less" scoped>
...
</style>

3.4使用组件

<template><div class="department"><page-search//将配置传给子组件:search-config="searchConfig"@query-click="handleQueryClick"@reset-click="handleResetClick"/>...</div>
</template><script setup lang="ts" name="department">
import { ref } from 'vue'
import PageSearch from '@/components/page-search/page-search.vue'
import searchConfig from './config/search.config'
...
</script>
<style scoped></style>

其它模块也是一样配置,比如角色模块:

const searchConfig = {formItems: [{type: 'input',prop: 'name',label: '角色名称',placeholder: '请输入查询的角色名称',initialValue: 'abc'},{type: 'input',prop: 'leader',label: '权限介绍',placeholder: '请输入查询的权限介绍'},{type: 'date-picker',prop: 'createAt',label: '创建时间'}]
}export default searchConfig

甚至有些时候还需要动态改动配置,这些都可以自己去思考。