菜单管理

src/views/system/menu/index.vue

@@ -15,7 +15,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
           <el-row>
             <el-form-item label="菜单类型" prop="type">
               <el-radio-group v-model="form.type" size="mini" style="width: 178px">
@@ -34,8 +34,8 @@
                 @show="$refs['iconSelect'].reset()"
               >
                 <IconSelect ref="iconSelect" @selected="selected" />
-                <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
-                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 30px;width: 16px;" />
+                <el-input slot="reference" v-model="form.icon" style="width: 560px;" placeholder="点击选择图标" readonly>
+                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 30px; width: 16px;" />
                   <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                 </el-input>
               </el-popover>
@@ -43,7 +43,7 @@
           </el-row>
           <el-row>
             <!-- <el-col :span="8"> -->
-            <el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame" style="width: 180px; margin-right: 0;">
+            <el-form-item v-show="form.type.toString() !== '2'" class="menu-radio" label="外链菜单" prop="iFrame">
               <el-radio-group v-model="form.iFrame" size="mini">
                 <el-radio-button label="true">是</el-radio-button>
                 <el-radio-button label="false">否</el-radio-button>
@@ -51,7 +51,7 @@
             </el-form-item>
             <!-- </el-col>
             <el-col :span="8"> -->
-            <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden" style="width: 180px; margin-right: 0;">
+            <el-form-item v-show="form.type.toString() !== '2'" class="menu-radio" label="菜单可见" prop="hidden">
               <el-radio-group v-model="form.hidden" size="mini">
                 <el-radio-button label="false">是</el-radio-button>
                 <el-radio-button label="true">否</el-radio-button>
@@ -59,7 +59,7 @@
             </el-form-item>
             <!-- </el-col>
             <el-col :span="8"> -->
-            <el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache" style="width: 180px; margin-right: 0;">
+            <el-form-item v-show="form.type.toString() === '1'" class="menu-radio" label="菜单缓存" prop="cache">
               <el-radio-group v-model="form.cache" size="mini">
                 <el-radio-button label="true">是</el-radio-button>
                 <el-radio-button label="false">否</el-radio-button>
@@ -67,28 +67,28 @@
             </el-form-item>
             <!-- </el-col> -->
           </el-row>
-          <el-form-item v-if="form.type.toString() !== '2'" label="菜单名称" prop="title">
-            <el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 580px' : 'width: 225px'" placeholder="菜单标题" />
+          <el-form-item v-if="form.type.toString() !== '2'" label="菜单名称" prop="title" :class="form.type.toString() === '0'?'menu-is-row':'menu-is-item'">
+            <el-input v-model="form.title" placeholder="请输入" />
           </el-form-item>
-          <el-row>
-            <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
-              <el-input v-model="form.title" placeholder="按钮名称" style="width:580px;" />
+          <el-row v-if="form.type.toString() === '2'">
+            <el-form-item label="按钮名称" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" style="width:560px;" />
             </el-form-item>
           </el-row>
-          <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
-            <el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识" />
+          <el-form-item v-if="form.type.toString() !== '0'" label="权限标识" prop="permission">
+            <el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="请输入" />
           </el-form-item>
           <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
-            <el-input v-model="form.path" placeholder="路由地址" />
+            <el-input v-model="form.path" placeholder="请输入" />
           </el-form-item>
-          <el-form-item label="菜单排序" prop="menuSort">
+          <el-form-item label="排序" prop="menuSort">
             <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" />
           </el-form-item>
           <el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称" prop="componentName">
             <el-input v-model="form.componentName" placeholder="匹配组件内Name字段" />
           </el-form-item>
           <el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径" prop="component">
-            <el-input v-model="form.component" placeholder="组件路径" />
+            <el-input v-model="form.component" placeholder="请输入" />
           </el-form-item>
           <el-row>
             <el-form-item label="上级类目" prop="pid">
@@ -96,8 +96,9 @@
                 v-model="form.pid"
                 :options="menus"
                 :load-options="loadMenus"
-                style="width: 450px;"
-                placeholder="选择上级类目"
+                style="width: 560px;"
+                placeholder="请选择"
+                @input="changePid"
               />
             </el-form-item>
           </el-row>
@@ -204,16 +205,40 @@ export default {
         del: ['admin', 'menu:del']
       },
       rules: {
+        type: [
+          { required: true, message: '菜单类型不可为空', trigger: 'change' }
+        ],
+        // icon: [
+        //   { required: true, message: '菜单图标不可为空', trigger: 'change' }
+        // ],
+        iFrame: [
+          { required: true, message: '请选择是否为外链菜单', trigger: 'change' }
+        ],
+        hidden: [
+          { required: true, message: '请选择菜单是否可见', trigger: 'change' }
+        ],
+        cache: [
+          { required: true, message: '请选择菜单是否缓存', trigger: 'change' }
+        ],
         title: [
-          { required: true, message: '请输入标题', trigger: 'blur' }
+          { required: true, message: '菜单名称不可为空', trigger: 'blur' }
         ],
         path: [
-          { required: true, message: '请输入地址', trigger: 'blur' }
+          { required: true, message: '路由地址不可为空', trigger: 'blur' }
+        ],
+        menuSort: [
+          { required: true, message: '菜单排序不可为空', trigger: 'blur' }
+        ],
+        pid: [
+          { required: true, message: '上级类目不可为空', trigger: 'input' }
         ]
       }
     }
   },
   methods: {
+    changePid() {
+      this.$refs.form.validateField('pid')
+    },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
       this.menus = []
@@ -268,8 +293,44 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
- ::v-deep .el-input-number .el-input__inner {
-    text-align: left;
+<style lang="scss" scoped>
+//  ::v-deep .el-input-number .el-input__inner {
+//     text-align: left;
+//   }
+
+::v-deep .el-dialog {
+  .el-dialog__body {
+    .el-form-item{
+      margin-right: 5px;
+      &:nth-child(odd){
+        margin-right: 5px;
+      }
+      &.menu-radio{
+        width: 228px;
+        margin-right: 0;
+        .el-form-item__content{
+          width: 126px;
+        }
+      }
+      &.menu-is-row{
+        .el-form-item__content{
+          width: 560px;
+        }
+      }
+      &.menu-is-item{
+        .el-form-item__content{
+          width: 225px;
+        }
+      }
+
+    }
   }
+}
+
+::v-deep .el-dialog .el-dialog__body .el-form-item.is-error {
+ .vue-treeselect__control{
+    border-color: #ed4a41 !important;
+  }
+}
+
 </style>