前言

mnlm 系列组件的基于 elment-plus 的实现

链接

[element-plus]()

[example]()

使用

1. 声明实体类

``
// model/User.d.ts

/**
* 用户
*/
export type User = {
/**
* uuid
*/
uuid: string

/**
* 用户名
*/
username: string

/**
* 密码
*/
password: string

/**
* 性别
*/
sex: string

/**
* 手机号
*/
mobile: number

/**
* 年龄
*/
age: number

/**
* 地区
*/
areaCode: string

areaName: string

/**
* 部门
*/
deptUuid: string

deptName: string

/**
* 岗位
*/
postUuid: string

postName: string

/**
* 数据权限
*/
dataScope: string

/**
* 角色
*/
roleUuid: string

roleName: string

/**
* 入职时间
*/
joinTime: string

/**
* 是否在职
*/
inWork: boolean

/**
* 是否启用
*/
state: boolean

/**
* 头像
*/
avatar: string

/**
* 备注
*/
remark: string
}

`

2. 创建 schema

`
// schema/user.ts

import { WoodSchema } from '@mnlm/element-plus'
import type { User } from '../model/User'
import * as deptService from '../service/dept'
import * as postService from '../service/post'
import * as dictService from '../service/dict'
import * as areaService from '../service/area'
import * as roleService from '../service/role'

export const userSchema: WoodSchema[] = [
{
dataIndex: 'uuid',
valueType: 'text',
title: 'uuid',
colProps: {
span: 8,
},
},
{
dataIndex: 'username',
valueType: 'text',
title: '用户名',
colProps: {
span: 8,
},
},
{
dataIndex: 'password',
valueType: 'text',
title: '密码',
rule: [],
colProps: {
span: 8,
},
fieldProps: {
type: 'password',
},
},
{
dataIndex: 'sex',
valueType: 'select',
title: '性别',
valueEnum: [
{
value: 'M',
label: '男',
},
{
value: 'W',
label: '女',
},
],
},
{
dataIndex: 'mobile',
valueType: 'digit',
title: '手机号',
rule: [],
},
{
dataIndex: 'age',
valueType: 'digit',
title: '年龄',
},
{
dataIndex: 'areaCode',
valueType: 'treeSelect',
title: '地区',
request: () => {
return areaService.treeList()
},
tableColumnProps: {
cellRender(grain) {
return grain.areaName
},
},
},
{
dataIndex: 'areaName',
valueType: 'text',
title: '地区',
readonly: true,
link: {
areaCode(cattle) {
const tempArea = cattle.getWood('areaCode')?.getTempValue()
cattle.getWood('areaName')?.setInnerValue(tempArea?.name)
},
},
formItemProps: {
hidden: true,
},
tableColumnProps: {
hidden: true,
},
},
{
dataIndex: 'deptUuid',
valueType: 'select',
title: '部门',
request: deptService.list,
tableColumnProps: {
cellRender(grain) {
return grain.deptName
},
},
},
{
dataIndex: 'deptName',
valueType: 'text',
title: '部门名称',
readonly: true,
link: {
deptUuid(cattle) {
const tempDept = cattle.getWood('deptUuid')?.getTempValue()
cattle.getWood('deptName')?.setInnerValue(tempDept?.label)
},
},
formItemProps: {
hidden: true,
},
tableColumnProps: {
hidden: true,
},
},
{
dataIndex: 'postUuid',
valueType: 'select',
title: '岗位',
request: (cattle) => postService.list(cattle.getInnerValue('deptUuid')),
link: {
deptUuid(cattle) {
cattle.getWood('postUuid')?.clean()
},
},
tableColumnProps: {
cellRender(grain) {
return grain.postName
},
},
},
{
dataIndex: 'postName',
valueType: 'text',
title: '岗位名称',
readonly: true,
link: {
postUuid(cattle) {
const tempPost = cattle.getWood('postUuid')?.getTempValue()
cattle.getWood('postName')?.setInnerValue(tempPost?.label)
},
},
formItemProps: {
hidden: true,
},
tableColumnProps: {
hidden: true,
},
},
{
dataIndex: 'dataScope',
valueType: 'select',
title: '数据权限',
request: dictService.dataScope,
},
{
dataIndex: 'roleUuid',
valueType: 'select',
title: '角色',
formItemProps: {
hidden: true,
},
},
{
dataIndex: 'roleName',
valueType: 'fuzzy',
title: '角色名称',
request: (_, { keyWord }) => {
return roleService.list()
},
},
{
dataIndex: 'joinTime',
valueType: 'date',
title: '入职时间',
},
{
dataIndex: 'inWork',
valueType: 'switch',
title: '是否在职',
},
{
dataIndex: 'remark',
valueType: 'textarea',
title: '备注',
},
]

`

3. 创建(木牛)表单

`



`

4. 创建(流马)表格

`
// schema.ts

import { HorseSchema, Wood } from '@mnlm/element-plus'
import { User } from '../model/User'
import * as userService from '../service/user'
import { userSchema } from '../schema/user'
import { ElMessageBox } from 'element-plus'

const userCattle = Wood.group(userSchema, [
'username',
'sex',
'age',
'mobile',
'areaCode',
'areaName',
'deptUuid',
'deptName',
'postUuid',
'postName',
'dataScope',
'roleName',
'joinTime',
'inWork',
'remark',
])

export const userHorseSchema: HorseSchema = {
grainKey: 'uuid',

loadData: userService.list,

editConfig: {
enabled: true,
single: true,
trigger: 'click',
mode: 'row',
saveTrigger: 'blur',
async execute({ horse, cattles }) {
for (let i = 0; i < cattles?.length; i++) {
await userService.update({
...cattles[i].getInitialValues(),
...cattles[i].getInnerValues(),
})
}
horse.update()
},
},

columns: userCattle,

controls: [
{
text: '编辑',
board: {
title: '编辑',
content: [
{
cattle: userCattle,
},
],
footer: [
{
title: '取消',
closeBoard: true,
},
{
title: '确定',
closeBoard: true,
updateHorse: true,
validate: true,
execute(board, record: User) {
const user = board.firstData()!
user.uuid = record.uuid
userService.update(user)
},
},
],
},
},
{
text: '删除',
prepare(horse) {
ElMessageBox.confirm('是否确认删除?', '删除', {
confirmButtonText: '取人',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
userService.remove(horse.getCurrentRecord()?.uuid)
horse.update()
})
},
},
],

toolbar: [
{
text: '添加',
board: {
title: '添加',
content: [
{
cattle: userCattle,
},
],
footer: [
{
title: '取消',
closeBoard: true,
},
{
title: '确定',
closeBoard: true,
updateHorse: true,
validate: true,
execute(board) {
const user = board.firstData()!
userService.insert(user)
},
},
],
},
},
],
}

`

`



``