前言

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<User>[] = [
  {
    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. 创建(木牛)表单

<template>
  <CattleForm ref="cattle" :schema="userSchema" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CattleForm, CattleFormInstance } from '@mnlm/element-plus'
import { User } from '../model/User'
import { userSchema } from '../schema/user'

const cattle = ref<CattleFormInstance<User>>()
</script>

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<User> = {
  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>()!
              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<User>()!
              userService.insert(user)
            },
          },
        ],
      },
    },
  ],
}

<template>
  <HorsePlus ref="horse" :schema="userHorseSchema" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Horse, HorsePlus, HorsePlusInstance } from '@mnlm/element-plus'
import { User } from '../model/User'
import { userHorseSchema } from './schema'

const horse = ref<HorsePlusInstance<User>>()
</script>