验证，组件优化，样式优化等

magic-boot-ui/src/views/common/form.vue

@@ -1,138 +0,0 @@
-<template>
-  <el-form
-    ref="dataForm"
-    :rules="rules"
-    :model="temp"
-    v-bind="form.el"
-    :label-position="form.el.labelPosition === undefined ? 'right' : form.el.labelPosition"
-    :label-width="form.el.labelWidth === undefined ? '120px' : form.el.labelWidth"
-    :style="form.el.style === undefined ? '' : form.el.style"
-  >
-    <el-row v-for="(row,i) in form.rows" :key="i" :gutter="row.gutter">
-      <el-col v-for="(col,j) in row.cols" :key="j" :span="col.span" v-bind="col.colEl">
-        <el-form-item :label="col.label" :label-width="col.labelWidth" :prop="col.name" v-bind="col.formItemEl">
-          <el-switch
-            v-if="col.type === 'switch'"
-            v-model="temp[col.name]"
-            :active-value="col.activeValue"
-            :inactive-value="col.inactiveValue"
-          />
-          <el-checkbox-group v-else-if="col.type === 'checkboxGroup'" v-model="temp[col.name]" size="small">
-            <el-checkbox v-for="checkboxIt in temp['_'+col.name]" :key="checkboxIt[col.defaultValue.value]" :label="checkboxIt[col.defaultValue.value]">{{ checkboxIt[col.defaultValue.text] }}</el-checkbox>
-          </el-checkbox-group>
-          <mb-select v-else-if="col.type === 'select'" v-model="temp[col.name]" v-bind="col.el" />
-          <el-input v-else v-model="temp[col.name]" :type="col.type" :value="col.defaultValue" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
-</template>
-
-<script>
-
-export default {
-  name: 'CommonForm',
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    form: {
-      type: Object,
-      default: () => {}
-    },
-    detail: {
-      type: Object,
-      default: () => {}
-    },
-    params: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      rules: {
-      },
-      temp: this.getTemp()
-    }
-  },
-  computed: {
-    dialogVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  },
-  watch: {
-    visible(newVal) {
-      this.temp = this.getTemp()
-      this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
-    }
-  },
-  created() {
-    this.form.el = this.form.el || {}
-    this.form.rows.forEach(row => {
-      row.cols.forEach(col => {
-        if (col.rule) {
-          this.$set(this.rules, col.name, col.rule)
-        }
-      })
-    })
-  },
-  methods: {
-    getTemp() {
-      var _temp = {}
-      this.form.rows.forEach(row => {
-        row.cols.forEach(col => {
-          if (col.type === 'checkboxGroup') {
-            _temp[col.name] = []
-            this.$request({
-              url: col.defaultValue.request.url,
-              method: col.defaultValue.request.method
-            }).then(res => {
-              const { data } = res
-              this.$set(this.temp, '_' + col.name, data)
-            })
-          } else {
-            _temp[col.name] = col.defaultValue || ''
-          }
-        })
-      })
-      return _temp
-    },
-    save() {
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          this.$post(this.form.request.url, this.temp).then(res => {
-            this.dialogVisible = false
-            this.$notify({
-              title: '成功',
-              message: (!this.temp.id ? '创建' : '修改') + '成功',
-              type: 'success',
-              duration: 2000
-            })
-            this.$emit('reload-table')
-          })
-        }
-      })
-    },
-    getDetail(row) {
-      this.temp.id = row.id
-      this.$get(this.detail.request.url, { id: row.id }).then(res => {
-        const { data } = res
-        for (var t in this.temp) {
-          if (data[t] && (!this.detail.excludeAssign || this.detail.excludeAssign.indexOf(t) === -1)) {
-            this.$set(this.temp, t, data[t])
-          }
-        }
-      })
-    }
-  }
-}
-</script>

magic-boot-ui/src/views/common/list.vue

@@ -1,197 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-form :inline="true">
-        <el-form-item v-for="col in queryOptions.cols" :key="col.field" :label="col.title">
-          <el-input v-if="col.type === 'input'" v-model="tableOptions.where[col.field]" v-bind="col.el" :placeholder="'请输入'+col.title" :style="col.style" />
-          <mb-select v-else-if="col.type === 'select'" v-model="tableOptions.where[col.field]" v-bind="col.el" width="100%" />
-        </el-form-item>
-        <el-form-item v-for="(btn, i) in queryOptions.btns" :key="i">
-          <el-button v-if="btn.type == 'query'" class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
-            搜索
-          </el-button>
-          <el-button v-if="btn.type == 'export'" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
-            导出
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <template v-if="toolOptions && toolOptions.btns">
-      <hr>
-      <el-row class="tool-row">
-        <div v-for="(btn, i) in toolOptions.btns" :key="'toolBtn' + i">
-          <el-button v-if="btn.btnType == 'add'" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
-            添加
-          </el-button>
-          <mb-button
-            v-else
-            :el="btn.el || {}"
-            :request-url="btn.request.url"
-            :request-data="toolBtnData[i]"
-            :btn-type="btn.btnType"
-            :before-confirm="btn.beforeConfirm"
-            :is-open="btn.isOpen"
-            :success-tips="btn.successTips"
-            :fail-tips="btn.failTips"
-            :after-handler="btn.afterHandler"
-          />
-        </div>
-      </el-row>
-      <hr>
-    </template>
-
-    <mb-table ref="table" v-bind="tableOptions" @selection-change="selectionChange" />
-
-    <mb-dialog :params="formParams" v-bind="formConfig && formConfig.dialog" :visible.sync="dialogFormVisible" @confirm-click="$refs.inputForm.save()">
-      <template #content>
-        <common-form ref="inputForm" v-bind="formConfig" :visible.sync="dialogFormVisible" :dialog-status="dialogStatus" @reload-table="reloadTable" />
-      </template>
-    </mb-dialog>
-
-  </div>
-</template>
-
-<script>
-import CommonForm from './form'
-
-var _this
-export default {
-  name: 'CommonList',
-  components: { CommonForm },
-  props: {
-    formConfig: {
-      type: Object,
-      default: () => {}
-    },
-    queryOptions: {
-      type: Object,
-      default: () => {}
-    },
-    toolOptions: {
-      type: Object,
-      default: () => {}
-    },
-    tableOptions: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      formParams: {},
-      formComponent: '',
-      dialogFormVisible: false,
-      dialogStatus: 'create',
-      downloadLoading: false,
-      selectionData: [],
-      toolBtnData: []
-    }
-  },
-  created() {
-    _this = this
-    if (this.toolOptions && this.toolOptions.btns) {
-      this.toolOptions.btns.forEach((it, i) => {
-        if (it.btnType) {
-          if (it.btnType === 'delete') {
-            it.afterHandler = () => {
-              _this.reloadTable()
-            }
-          }
-        }
-      })
-    }
-    this.tableOptions.where = this.tableOptions.where || _this.$set(this.tableOptions, 'where', {})
-    this.queryOptions.cols.forEach(it => this.$set(_this.tableOptions.where, it.field, ''))
-    this.tableOptions.cols.forEach(it => {
-      if (it.type === 'switch') {
-        it.change = (row) => {
-          this.$request(this.handlerRequest(it, row, {
-            id: row.id,
-            [it.field]: row[it.field]
-          }))
-        }
-      }
-      if (it.type === 'btns') {
-        it.btns.forEach(btn => {
-          btn.click = (row) => {
-            if (btn.btnType === 'delete') {
-              this.$common.handleDelete({
-                url: btn.request.url,
-                id: row.id,
-                done: () => this.reloadTable()
-              })
-            } else if (btn.btnType === 'update') {
-              this.handleUpdate(row)
-            }
-          }
-        })
-      }
-    })
-  },
-  methods: {
-    selectionChange(columns) {
-      if (this.toolOptions && this.toolOptions.btns) {
-        this.toolOptions.btns.forEach((it, i) => { it && it.request && it.request.data && this.$set(this.toolBtnData, i, ({ ...it.request.data })) })
-        this.toolBtnData.forEach((it, i) => Object.keys(it).filter(key => it[key] === 'rowField').forEach(key => { this.$set(this.toolBtnData[i], key, columns.map(it => it[key]).join(',')) }))
-      }
-    },
-    handlerRequest(it, row, defaultData) {
-      var requestOptions = {}
-      requestOptions.url = it.request.url
-      requestOptions.method = it.request.method || 'get'
-
-      var requestData = {}
-      if (!it.request.data && defaultData) {
-        requestData = defaultData
-      } else {
-        requestData = it.request.data
-        for (var d in it.request.data) {
-          var value = requestData[d]
-          if (value === 'rowField') {
-            requestData[d] = row[d]
-          }
-        }
-      }
-      if (requestOptions.method === 'get') {
-        requestOptions.params = requestData
-      } else {
-        requestOptions.data = requestData
-      }
-      return requestOptions
-    },
-    reloadTable() {
-      this.$refs.table.reloadList()
-    },
-    handleCreate() {
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
-    },
-    handleUpdate(row) {
-      this.dialogStatus = 'update'
-      this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['inputForm'].getDetail(row)
-      })
-    },
-    handleDownload() {
-      this.$common.exportExcel({
-        url: this.tableOptions.url,
-        headers: this.queryOptions.btns.filter(it => it.type === 'export')[0].headers,
-        columns: this.queryOptions.btns.filter(it => it.type === 'export')[0].columns,
-        where: this.tableOptions.where
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .tool-row {
-    margin-bottom: 6px
-  }
-  .tool-row > div {
-    display: inline-block;
-    margin-left: 10px;
-  }
-</style>

magic-boot-ui/src/views/examples/select-example.vue

@@ -2,7 +2,7 @@
   <div style="padding: 50px;">
     <h2>多选</h2>
     <el-button type="primary" @click="getData" style="margin-bottom: 10px">获取数据</el-button>
-    <mb-select v-model="dictType" type="dict_type" :el="{ multiple: true }" />
+    <mb-select v-model="dictType" type="dict_type" multiple />
   </div>
 </template>
 

magic-boot-ui/src/views/examples/test-mb-form.vue

@@ -18,7 +18,8 @@ const formOptions = reactive({
       cols: [{
         span: 12,
         name: 'input',
-        label: 'input'
+        label: 'input',
+        rules: [{ required: true, message: '请输入input', trigger: 'change' }]
       },{
         span: 12,
         name: 'switch',
@@ -114,7 +115,7 @@ const formOptions = reactive({
         props: {
           url: 'role/all',
           placeholder: '请选择角色',
-          el: { multiple: true }
+          multiple: true
         }
       },{
         span: 12,
@@ -127,6 +128,6 @@ const formOptions = reactive({
   }
 })
 function getFormData(){
-  console.log(magicForm.value.getFormData())
+  console.log(magicForm.value.getFormData().select)
 }
 </script>

magic-boot-ui/src/views/system/menu/menu-list.vue

@@ -47,148 +47,147 @@ let menuTree = ref([])
 const menuData = ref([])
 let searchValue = ref('')
 const tableOptions = reactive({
-        el: {
-          'default-expand-all': true,
-          'tree-props': { children: 'children', hasChildren: 'hasChildren' },
-          'row-key': 'id'
-        },
-        showNo: false,
-        page: false,
-        cols: [
-          {
-            field: 'name',
-            label: '菜单名称',
-            align: 'left',
-            type: 'html'
-          },
-          {
-            field: 'url',
-            label: '路径',
-            align: 'left',
-            type: 'html'
-          },
-          {
-            field: 'permission',
-            label: '权限标识',
-            width: 150,
-            align: 'left',
-            type: 'html'
-          },
-          {
-            field: 'icon',
-            label: '图标',
-            width: 55,
-            align: 'center',
-            templet: (row) => {
-              return generateIconCode(row.icon)
-            }
-          },
-          {
-            field: 'sort',
-            label: '序号',
-            width: 60
-          },
-          {
-            label: '排序',
-            type: 'btns',
-            width: 150,
-            btns: [
-              {
-                label: '上移',
-                type: 'text',
-                icon: 'ElSortUp',
-                click: (row) => {
-                  proxy.$get('menu/sort/up',{
-                    id: row.id,
-                    pid: row.pid,
-                    sort: row.sort
-                  }).then(() => {
-                    reloadTable()
-                  })
-                }
-              },
-              {
-                label: '下移',
-                type: 'text',
-                icon: 'ElSortDown',
-                click: (row) => {
-                  proxy.$get('menu/sort/down',{
-                    id: row.id,
-                    pid: row.pid,
-                    sort: row.sort
-                  }).then(() => {
-                    reloadTable()
-                  })
-                }
-              }
-            ]
-          },
-          {
-            field: 'isShow',
-            label: '是否显示',
-            type: 'switch',
-            width: 100,
-            change: (row) => {
-              proxy.$get('menu/change', {
-                id: row.id,
-                isShow: row.isShow
-              })
-            }
-          },
-          {
-            field: 'keepAlive',
-            label: '是否缓存',
-            type: 'switch',
-            width: 100,
-            change: (row) => {
-              proxy.$get('menu/change', {
-                id: row.id,
-                keepAlive: row.keepAlive
-              })
-            }
-          },
-          {
-            label: '操作',
-            type: 'btns',
-            width: 260,
-            fixed: 'right',
-            align: 'left',
-            btns: [
-              {
-                label: '添加下级菜单',
-                type: 'text',
-                permission: 'menu:save',
-                icon: 'ElPlus',
-                click: (row) => {
-                  addSubMenu(row.id)
-                }
-              },
-              {
-                label: '修改',
-                type: 'text',
-                permission: 'menu:save',
-                icon: 'ElEdit',
-                click: (row) => {
-                  handleUpdate(row)
-                }
-              },
-              {
-                label: '删除',
-                type: 'text',
-                permission: 'menu:delete',
-                icon: 'ElDelete',
-                click: (row) => {
-                  proxy.$common.handleDelete({
-                    url: 'menu/delete',
-                    id: row.id,
-                    done: () => reloadTable()
-                  })
-                }
-              }
-            ]
+  el: {
+    'tree-props': { children: 'children', hasChildren: 'hasChildren' },
+    'row-key': 'id'
+  },
+  showNo: false,
+  page: false,
+  cols: [
+    {
+      field: 'name',
+      label: '菜单名称',
+      align: 'left',
+      type: 'html'
+    },
+    {
+      field: 'url',
+      label: '路径',
+      align: 'left',
+      type: 'html'
+    },
+    {
+      field: 'permission',
+      label: '权限标识',
+      width: 150,
+      align: 'left',
+      type: 'html'
+    },
+    {
+      field: 'icon',
+      label: '图标',
+      width: 55,
+      align: 'center',
+      templet: (row) => {
+        return generateIconCode(row.icon)
+      }
+    },
+    {
+      field: 'sort',
+      label: '序号',
+      width: 60
+    },
+    {
+      label: '排序',
+      type: 'btns',
+      width: 150,
+      btns: [
+        {
+          label: '上移',
+          type: 'text',
+          icon: 'ElSortUp',
+          click: (row) => {
+            proxy.$get('menu/sort/up',{
+              id: row.id,
+              pid: row.pid,
+              sort: row.sort
+            }).then(() => {
+              reloadTable()
+            })
           }
-        ]
-      })
+        },
+        {
+          label: '下移',
+          type: 'text',
+          icon: 'ElSortDown',
+          click: (row) => {
+            proxy.$get('menu/sort/down',{
+              id: row.id,
+              pid: row.pid,
+              sort: row.sort
+            }).then(() => {
+              reloadTable()
+            })
+          }
+        }
+      ]
+    },
+    {
+      field: 'isShow',
+      label: '是否显示',
+      type: 'switch',
+      width: 100,
+      change: (row) => {
+        proxy.$get('menu/change', {
+          id: row.id,
+          isShow: row.isShow
+        })
+      }
+    },
+    {
+      field: 'keepAlive',
+      label: '是否缓存',
+      type: 'switch',
+      width: 100,
+      change: (row) => {
+        proxy.$get('menu/change', {
+          id: row.id,
+          keepAlive: row.keepAlive
+        })
+      }
+    },
+    {
+      label: '操作',
+      type: 'btns',
+      width: 260,
+      fixed: 'right',
+      align: 'left',
+      btns: [
+        {
+          label: '添加下级菜单',
+          type: 'text',
+          permission: 'menu:save',
+          icon: 'ElPlus',
+          click: (row) => {
+            addSubMenu(row.id)
+          }
+        },
+        {
+          label: '修改',
+          type: 'text',
+          permission: 'menu:save',
+          icon: 'ElEdit',
+          click: (row) => {
+            handleUpdate(row)
+          }
+        },
+        {
+          label: '删除',
+          type: 'text',
+          permission: 'menu:delete',
+          icon: 'ElDelete',
+          click: (row) => {
+            proxy.$common.handleDelete({
+              url: 'menu/delete',
+              id: row.id,
+              done: () => reloadTable()
+            })
+          }
+        }
+      ]
+    }
+  ]
+})
 let dialogTitle = ref('')
 let searchTimeout = reactive()
 const menuFormDialog = ref()

magic-boot-ui/src/views/system/monitor/login-log.vue

@@ -29,13 +29,19 @@
       {
         field: 'type',
         label: '登录状态',
+        width: '100px',
         templet: (row) => {
           return row.type == '成功' ? '<b style="color: #409EFF">成功</b>' : '<b style="color: red">失败</b>'
         }
       },
+      {
+        field: 'address',
+        label: '登录地址'
+      },
       {
         field: 'ip',
-        label: 'ip'
+        label: 'ip',
+        width: '150px'
       },
       {
         field: 'browser',
@@ -50,7 +56,8 @@
       },
       {
         field: 'createDate',
-        label: '操作时间'
+        label: '操作时间',
+        width: '180px'
       }
     ]
   })

magic-boot-ui/src/views/system/monitor/oper-log.vue

@@ -28,15 +28,18 @@
       },
       {
         field: 'apiMethod',
-        label: '方法'
+        label: '方法',
+        width: '100px'
       },
       {
         field: 'userIp',
-        label: 'ip'
+        label: 'ip',
+        width: '150px'
       },
       {
         field: 'costTime',
-        label: '耗时'
+        label: '耗时',
+        width: '100px'
       },
       {
         field: 'userAgent',
@@ -47,11 +50,13 @@
       },
       {
         field: 'username',
-        label: '操作人'
+        label: '操作人',
+        width: '150px'
       },
       {
         field: 'createDate',
-        label: '操作时间'
+        label: '操作时间',
+        width: '180px'
       }
     ]
   })

magic-boot-ui/src/views/system/office/office-list.vue

@@ -182,6 +182,9 @@ const tableOptions = reactive({
           type: 'text',
           permission: 'office:delete',
           icon: 'ElDelete',
+          if: (row) => {
+            return row.pid != '0';
+          },
           click: (row) => {
             proxy.$common.handleDelete({
               url: 'office/delete',

magic-boot-ui/src/views/system/role/role-list.vue

@@ -46,7 +46,7 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="数据权限" prop="permission">
-                <mb-select v-model="temp.permission" :data="permissionData" />
+                <mb-select v-model="temp.permission" :options="permissionData" />
                 <mb-tree v-if="temp.permission == 1" max-height="270px" :el="{ 'check-strictly': true, 'show-checkbox': true }" ref="office" url="office/tree" v-model:select-values="temp.offices" />
               </el-form-item>
             </el-col>
@@ -55,7 +55,7 @@
       </template>
     </mb-dialog>
 
-    <mb-dialog ref="assignPermissionsDialog" title="分配权限" width="750px" @confirm-click="assignPermissions.save($event)">
+    <mb-dialog ref="assignPermissionsDialog" title="分配权限" width="550px" @confirm-click="assignPermissions.save($event)">
       <template #content>
         <role-assign-permissions ref="assignPermissions" :key="Math.random()" :id="temp.id" @close="() => { assignPermissionsDialog.value.hide(); temp.id = '' }" />
       </template>

magic-boot-ui/src/views/system/user/user-form.vue

@@ -32,11 +32,11 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="选择角色" prop="roles">
-          <mb-select v-model="temp.roles" url="role/all" placeholder="请选择角色" :el="{ multiple: true }" />
+          <mb-select v-model="temp.roles" url="role/all" placeholder="请选择角色" multiple />
         </el-form-item>
       </el-col>
     </el-row>
-    <el-form-item label="登录状态" prop="isLogin">
+    <el-form-item label="登录状态" prop="isLogin" v-if="temp.id != '1'">
       <el-radio-group v-model="temp.isLogin">
         <el-radio-button label="0">有效</el-radio-button>
         <el-radio-button label="1">锁定</el-radio-button>

magic-boot-ui/src/views/system/user/user-list.vue

@@ -84,7 +84,7 @@ const tableOptions = reactive({
       value: '',
       properties: {
         url: 'role/all',
-        el: { multiple: true }
+        multiple: true
       }
     },
     officeId: ''
@@ -118,6 +118,9 @@ const tableOptions = reactive({
       label: '禁止登录',
       type: 'switch',
       width: 100,
+      if: (row) => {
+        return row.id != '1'
+      },
       change: (row) => {
         proxy.$get('/user/change/login/status', {
           id: row.id,
@@ -150,6 +153,9 @@ const tableOptions = reactive({
           label: '删除',
           type: 'text',
           icon: 'ElDelete',
+          if: (row) => {
+            return row.id != '1'
+          },
           click: (row) => {
             proxy.$common.handleDelete({
               url: 'user/delete',