magic-bootUI框架

创作灵感：项目中用到，记录一下。

以下mb简称magic-boot

首先mb是基于elementVue3 + Element Plus,简单来说就是对 Element Plus的封装；

用mb写项目非常方便，没有长篇复杂的html,主要是以js为主。

像列表，表单等后台系统重要组成部分，只需写数据结构，和接口方法等，以下是一个列表的例子

<mb-list ref="magicList" v-bind="listOptions" />
<script>
const listOptions = reactive({
  search: {
    noReset: 'id'
  },
  tools: [{
    type: 'add',
    permission: 'user:save',
    click: () => {
      formOptions.form.rows[0].cols[1].rules = [{ required: true, message: '请输入密码', trigger: 'change' }]
      formOptions.detail.formData = null
      formDialog.value.show()
    }
  },{
    type: 'delete',
    permission: 'user:delete',
    url: '/system/user/delete'
  }],
  table: {
    url: '/system/user/list',
    where: {
      username: {
        label: '登录名称',
      },
      name: {
        label: '姓名/昵称',
      },
      roleId: {
        type: 'select',
        label: '角色',
        props: {
          url: '/system/role/all',
          multiple: true
        }
      }
    },
    cols: [
      {
        field: 'username',
        label: '登录名称',
        sortable: 'custom'
      }, {
        field: 'name',
        label: '姓名/昵称',
        sortable: 'custom'
      }, {
        field: 'officeName',
        label: '所属机构'
      }, {
        field: 'roles',
        label: '角色'
      }, {
        field: 'phone',
        label: '手机号',
        sortable: 'custom'
      }, {
        field: 'isLogin',
        label: '禁止登录',
        type: 'switch',
        width: 100,
        change: (row) => {
          proxy.$get('/system/user/change/login/status', {
            id: row.id,
            isLogin: row.isLogin
          })
        }
      }, {
        field: 'createDate',
        label: '创建时间',
        width: 180
      }, {
        label: '操作',
        type: 'btns',
        width: 140,
        fixed: 'right',
        btns: [
          {
            permission: 'user:save',
            label: '修改',
            type: 'text',
            icon: 'ElIconEdit',
            click: (row) => {
              // magicForm.value.getDetail(row.id)
              formOptions.form.rows[0].cols[1].rules = []
              formOptions.detail.formData = proxy.$common.copyNew(row)
              formDialog.value.show()
            }
          }, {
            permission: 'user:delete',
            label: '删除',
            type: 'text',
            icon: 'ElIconDelete',
            click: (row) => {
              proxy.$common.handleDelete({
                url: '/system/user/delete',
                id: row.id,
                done: () => magicList.value.reload()
              })
            }
          }
        ]
      }
    ]
  }
})
</script>

就这样一个表格就写好啦，当然还可以自动生成代码等，更多可以访问简介 | magic-boot