修改路由备注样式，增加角色表单校验

.env.development

@@ -4,4 +4,5 @@ ENV = 'development'
 # base api  后端url
 #VUE_APP_BASE_API = 'http://192.168.10.107:7080'
 VUE_APP_BASE_API = 'http://192.168.10.109:11523'
+#'http://www.aishuhong.com:11549/prod-api/'
 #VUE_APP_BASE_API = 'http://192.168.31.100:7081'

src/views/permission/role.vue

@@ -6,7 +6,7 @@
       <el-table-column align="center" label="序号" width="80">
         <template slot-scope="scope">
           {{
-            (roleQuery.pageNum - 1) * roleQuery.pageSize + scope.$index + 1
+              (roleQuery.pageNum - 1) * roleQuery.pageSize + scope.$index + 1
           }}
         </template>
       </el-table-column>
@@ -22,51 +22,36 @@
       </el-table-column>
       <el-table-column align="center" label="操作">
         <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleEdit(scope)" >编辑角色信息和分配角色路由</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope)" >删除角色</el-button>
+          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑角色信息和分配角色路由</el-button>
+          <el-button type="danger" size="small" @click="handleDelete(scope)">删除角色</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <div class="footer">
-      <el-pagination
-        :current-page.sync="roleQuery.pageNum"
-        :page-size="roleQuery.pageSize"
-        layout="total, prev, pager, next"
-        :total="total"
-        @current-change="handleCurrentChange"
-      />
+      <el-pagination :current-page.sync="roleQuery.pageNum" :page-size="roleQuery.pageSize"
+        layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
     </div>
 
     <el-dialog :visible.sync="dialogVisible" :title="dialogType">
-      <el-form :model="role" label-width="80px" label-position="left">
-        <el-form-item label="角色名称">
+      <el-form :model="role" label-width="80px" label-position="left" :rules="rules">
+        <el-form-item label="角色名称" prop="rlName">
           <el-input v-model="role.rlName" placeholder="角色名称" />
         </el-form-item>
-        <el-form-item label="角色描述">
-          <el-input
-            v-model="role.rlDesc"
-            :autosize="{ minRows: 2, maxRows: 4}"
-            type="textarea"
-            placeholder="角色描述"
-          />
+        <el-form-item label="角色描述" prop="rlDesc">
+          <el-input v-model="role.rlDesc" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="角色描述" />
         </el-form-item>
         <el-form-item label="路由树">
-          <el-tree
-            ref="tree"
-            :check-strictly="checkStrictly"
-            :data="routesData"
-            :props="defaultProps"
-            @check="checkTree"
-            show-checkbox
-            default-expand-all
-            node-key="id"
-            class="permission-tree"
-          />
+          <el-tree ref="tree" :check-strictly="true" :data="routesData" @check="checkTree" show-checkbox default-expand-all node-key="id">
+            <span slot-scope="{data}">
+              {{data.title}}
+              <span class="explain-text">{{ data.explain }}</span>
+            </span>
+          </el-tree>
         </el-form-item>
       </el-form>
       <div style="text-align:right;">
-        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="confirmRole">提交</el-button>
       </div>
     </el-dialog>
@@ -78,20 +63,20 @@
 <script>
 import path from 'path'
 import { deepClone } from '@/utils'
-import { getRoles,addRole,deleteRole, updateRole} from '@/api/role'
-import { getRoutes} from '@/api/auth'
+import { getRoles, addRole, deleteRole, updateRole } from '@/api/role'
+import { getRoutes } from '@/api/auth'
 
 const defaultRole = {
   rlId: 0,
   rlName: '',
   rlDesc: '',
   routes: [],
-  companyId:'',
+  companyId: '',
 }
 
 export default {
-  data(){
-    return{
+  data() {
+    return {
       roleQuery: {
         companyId: null,
         pageNum: 1,
@@ -99,54 +84,53 @@ export default {
       },
       total: 0,
       role: Object.assign({}, defaultRole),
-      rolesList:[],
-      routes:null,
+      rolesList: [],
+      routes: null,
 
-      dialogType:"新增角色",
-      dialogVisible:false,
-
-      checkStrictly: true,// 父子节点 checkbox的选择是否关联
-      defaultProps: {                       // 角色树
-        children: 'children',
-        label: 'title'
-      },
-      companyId:'',
+      dialogType: "新增角色",
+      dialogVisible: false,
+      companyId: '',
+      rules: {
+        rlName: [{ required: true, message: "角色名称"}],
+        rlDesc: [{ required: true, message: "角色描述" }]
+      }
     }
   },
   created() {
     this.roleQuery.companyId = this.$store.getters.companyId
-    this.companyId=this.$store.getters.companyId;
+    this.companyId = this.$store.getters.companyId;
     this.getRoutes()
     this.getRoles()
   },
   computed: {
     routesData() {
+      console.log(this.routes)
       return this.routes
     },
   },
-  methods:{
+  methods: {
     //handleCurrentChange
-    handleCurrentChange(val){
+    handleCurrentChange(val) {
       this.roleQuery.pageNum = val
       this.getRoles()
     },
     //获取角色
     getRoles() {
-      getRoles (this.roleQuery).then((res)=>{
-        if(res.status == "success"){
+      getRoles(this.roleQuery).then((res) => {
+        if (res.status == "success") {
           this.rolesList = res.data.list
           this.total = res.data.total
-        }else{
+        } else {
           this.$message.error(res.data)
         }
-      }).catch((error)=>{
+      }).catch((error) => {
         this.$message.error("查询数据失败")
       })
     },
     //获取路由
     getRoutes() {
-      getRoutes().then((res)=>{
-        if(res.status == "success"){
+      getRoutes().then((res) => {
+        if (res.status == "success") {
           this.serviceRoutes = res.data
           this.routes = this.generateRoutes(res.data)
         }
@@ -155,45 +139,47 @@ export default {
     //处理路由数据
     generateRoutes(routes, basePath = '/') {
       const res = []
-      console.log(routes)
-      if(this.$store.getters.roles[0] != 1){
-          //不是超管
-          
-          for (let route of routes) {
-              if(route.id != 1 && route.id != 113){
-                const data = {
-                  path: path.resolve(basePath, route.path),
-                  title: route.meta && (route.menuExplain ? `${route.meta.title}（${route.menuExplain}）`: route.meta.title),
-                  id: route.id
-                }
-                if (route.children.length>0) { 
-                  data.children = this.generateRoutes(route.children, data.path)
-                }
-                res.push(data)
-              }
+      // console.log(routes)
+      if (this.$store.getters.roles[0] != 1) {
+        //不是超管
+
+        for (let route of routes) {
+          if (route.id != 1 && route.id != 113) {
+            const data = {
+              path: path.resolve(basePath, route.path),
+              title: route.meta && route.meta.title,
+              explain: route.menuExplain,
+              id: route.id
             }
-        }else{
-          //是超管
-          for (let route of routes) {
-              
-                const data = {
-                  path: path.resolve(basePath, route.path),
-                  title: route.meta && (route.menuExplain ? `${route.meta.title}（${route.menuExplain}）`: route.meta.title),
-                  id: route.id
-                }
-                if (route.children.length>0) { 
-                  data.children = this.generateRoutes(route.children, data.path)
-                }
-                res.push(data)
-              
+            if (route.children.length > 0) {
+              data.children = this.generateRoutes(route.children, data.path)
             }
-          
+            res.push(data)
+          }
+        }
+      } else {
+        //是超管
+        for (let route of routes) {
+
+          const data = {
+            path: path.resolve(basePath, route.path),
+            title: route.meta && route.meta.title,
+            explain: route.menuExplain,
+            id: route.id
+          }
+          if (route.children.length > 0) {
+            data.children = this.generateRoutes(route.children, data.path)
+          }
+          res.push(data)
+
         }
-      
+
+      }
+
       return res
     },
     //新增角色
-    handleAddRole(){
+    handleAddRole() {
       this.role = Object.assign({}, defaultRole)
       this.role.companyId = this.$store.getters.companyId
       if (this.$refs.tree) {
@@ -203,10 +189,10 @@ export default {
       this.dialogVisible = true
     },
     //编辑角色
-    handleEdit(scope){
+    handleEdit(scope) {
       this.dialogType = '编辑角色'
       this.dialogVisible = true
-      console.log(scope)
+      // console.log(scope)
       this.role = deepClone(scope.row)
       this.$nextTick(() => {
         const selectedKeys = this.generateArr(this.role.routes)
@@ -221,70 +207,70 @@ export default {
           if (temp.length > 0) {
             data = [...data, ...temp]
           }
-        }else{
+        } else {
           data.push(route.id)
         }
       })
       return data
     },
     //删除角色
-    handleDelete({ $index, row }){
+    handleDelete({ $index, row }) {
       this.$confirm('确定要删除该角色吗?', 'Warning', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       })
         .then(() => {
-          deleteRole(row.rlId).then((res)=>{
-            if(res.status == 'success'){
+          deleteRole(row.rlId).then((res) => {
+            if (res.status == 'success') {
               this.$message.success("删除成功")
               this.rolesList.splice($index, 1)
-            }else{
+            } else {
               this.$message.error(res.data)
             }
-          }).catch((error)=>{
+          }).catch((error) => {
             this.$message.error("删除失败")
           })
         })
         .catch(err => { console.error(err) })
     },
     //提交
-    confirmRole(){
+    confirmRole() {
 
       const isEdit = this.dialogType === '编辑角色'
       // 获取选中权限树id
       const checkedKeys = this.$refs.tree.getCheckedKeys()
-      if (checkedKeys){
+      if (checkedKeys) {
         let routes = []
         checkedKeys.forEach(key => {
-          let obj = {id:key}
+          let obj = { id: key }
           routes.push(obj)
         })
         // 将menu对象数组，赋给要添加的role
         this.role.routes = routes
       }
       if (isEdit) { // 修改角色
-        updateRole(this.role).then((res)=>{
-          if(res.status=="success"){
+        updateRole(this.role).then((res) => {
+          if (res.status == "success") {
             this.$message.success("修改成功")
             this.getRoles()
-          }else{
+          } else {
             this.$message.error(res.data)
           }
-        }).catch((error)=>{
+        }).catch((error) => {
           this.$message.error("修改失败")
         })
 
-      }else{
+      } else {
         //新增角色
-        addRole(this.role).then((res)=>{
-          if(res.status=="success"){
+        addRole(this.role).then((res) => {
+          if (res.status == "success") {
             this.$message.success("添加成功")
             this.getRoles()
-          }else{
+          } else {
             this.$message.error(res.data)
           }
-        }).catch((error)=>{
+        }).catch((error) => {
           this.$message.error("添加失败")
         })
       }
@@ -294,7 +280,7 @@ export default {
 
 
     //点击树
-    checkTree(data){
+    checkTree(data) {
       const node = this.$refs.tree.getNode(data.id);
       this.setNode(node);
     },
@@ -332,4 +318,11 @@ export default {
 .footer {
   text-align: right;
 }
+.explain-text {
+  font-size: 12px;
+  font-weight: 400;
+  display: inline-block;
+  padding-left: 10px;
+  color: #949494;
+}
 </style>
\ No newline at end of file