新生命魔方管理平台,基于 element-plus,vue-next-admin。
在线地址:https://quickvue.newlifex.com/
前端这边另外也出了其他几个解决方案,链接如下:
-
将后台管理系统的前端编码形式抽象成配置,有别于传统开发模式
-
完成页面级别组件的初步封装,引用组件即可完成一个页面的增删改查功能
-
页面路由规则从接口读取,所有路由自动引用 view/modules/index 文件,当页面需要手工修改时,可按后台路由规则在项目里建立文件复制模板代码(view/modules/index 文件)进行修改,无需在前端代码另外配置路由
-
完成动态表单、表格组件的初步封装,当接口配置不足以满足页面需求时,调用 usePageSetting 函数即可对页面进行组件配置
-
组件不够时,可继续封装组件并配置到 form/component.ts 文件里即可引用
-
当某个字段对应的组件不具备通用性时,可通过在配置里提供插槽名即可通过 vue 插槽进行个性化代码灵活编写
- 克隆项目到本地
- npm i
- npm run dev
- view/modules/index 模板文件
<template>
<Page></Page>
</template>
<script setup lang="ts">
</script>
- usePageSetting 函数参数配置
{
columns?: {
// 通用配置
// 修改哪个位置的配置,不传则全部修改
in?: ColumnKind | Array<ColumnKind>;
// 字段名
prop: string;
// 字段中文名称
label?: string;
// 组件
component?: keyof FormType;
// 是否渲染
if?: boolean;
// 是否显示
show?: boolean;
// 自定义组件插槽名称
slot?: string;
// 必填
required?: boolean;
// 组件参数
props?: ColumnProp<ColumnConfig['component']>;
// 校验规则
rules?: FormRule[];
// 排序下标
index?: number;
// 所占列数
col?: number | Col;
// 以下配置只用于表单
// 分组
group?: string;
// 以下配置只用于表格
// 宽度
width?: string | number;
// 是否勾选显示
isCheck?: boolean;
}
}
- usePageSetting 返回值
{
// 配置相关
tableColumns: Ref<TableColumn[]>;
searchColumns: Ref<ColumnConfig[]>;
editColumns: Ref<ColumnConfig[]>;
addColumns: Ref<ColumnConfig[]>;
detailColumns: Ref<ColumnConfig[]>;
// 表单相关
searchForm: Ref<EmptyObjectType>;
infoForm: Ref<EmptyObjectType>;
}
- 表单类型
{
autocomplete: ElAutocomplete,
cascader: ElCascader,
checkbox: ElCheckbox,
checkboxGroup: CheckboxGroup, // 可配置api等参数
colorPicker: ElColorPicker,
datePicker: ElDatePicker,
input: ElInput,
inputNumber: ElInputNumber,
radioGroup: RadioGroup, // 可配置api等参数
radio: ElRadio,
rate: ElRate,
select: Select, // 可配置api等参数
slider: ElSlider,
switch: ElSwitch,
timePicker: ElTimePicker,
timeSelect: ElTimeSelect,
upload: ElUpload,
editor: Editor,
}
- 所在位置枚举
{
(LIST = 1), DETAIL, ADD, EDIT, SEARCH;
}
- 修改配置示例代码
<template>
<Page>
<template #mail>
测试
</template>
</Page>
</template>
<script setup lang="ts">
import usePageSetting from '/@/hook/usePageSetting'
import { ColumnKind, usePageApi } from '/@/api/page';
const { columns, forms } = usePageSetting({
columns: [
{
in: ColumnKind.ADD,
prop: 'sex',
component: 'radioGroup',
props: {
options: [{ id: 1, name: '男' }, { id: 2, name: '女' }]
},
},
{
in: [ColumnKind.SEARCH, ColumnKind.LIST],
prop: 'mail',
slot: 'mail',
},
{
prop: 'departmentID',
component: 'select',
props: {
api: () => usePageApi().getTableData('/admin/department', { pageIndex: 0 })
}
},
{
prop: 'roleID',
component: 'select',
props: {
url: '/admin/role'
}
},
{
in: [ColumnKind.ADD, ColumnKind.EDIT],
prop: 'name',
props: {
onChange: (val: string) => {
forms.data!.mail = val
columns.add!.find(item => item.prop === 'sex')!.if = !val
}
}
}
]
})
</script>
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request