fix:修复部分bug

src/views/modules/sys/menu/index.vue

@@ -106,7 +106,7 @@ export default {
     },
     // 删除
     handleDelete (id) {
-      this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
+      this.$confirm(`确定删除该菜单吗？该菜单下面所有内容都将被删除。`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'

src/views/modules/sys/menu/menu-add-or-update.vue

@@ -1,19 +1,41 @@
 <template>
   <el-dialog
-    :title="!dataForm.id ? '新增' : '编辑'"
+    :title="!dataForm.id ? '新增菜单' : '编辑菜单'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
+    :visible.sync="visible"
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="handleConfirm()" label-width="80px">
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="handleConfirm()"
+      label-width="80px"
+    >
       <el-form-item label="类型" prop="type">
         <el-radio-group v-model="dataForm.type">
-          <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
+          <el-radio
+            v-for="(type, index) in dataForm.typeList"
+            :label="index"
+            :key="index"
+          >{{ type }}</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
-        <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
+        <el-input
+          maxlength="20"
+          show-word-limit
+          clearable
+          v-model="dataForm.name"
+          :placeholder="dataForm.typeList[dataForm.type] + '名称'"
+        ></el-input>
       </el-form-item>
-      <el-form-item label="上级菜单" prop="parentName">
+      <el-form-item v-if="dataForm.type !== 0" label="上级菜单" prop="parentName">
-        <el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
+        <el-popover
+          v-model="visiblePopover"
+          ref="menuListPopover"
+          placement="bottom-start"
+          trigger="click"
+        >
           <el-tree
             :data="menuList"
             :props="menuListTreeProps"
@@ -22,41 +44,69 @@
             @current-change="menuListTreeCurrentChangeHandle"
             :default-expand-all="true"
             :highlight-current="true"
-            :expand-on-click-node="false">
+            :expand-on-click-node="false"
-          </el-tree>
+          ></el-tree>
         </el-popover>
-        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
+        <el-input
+          v-model="dataForm.parentName"
+          v-popover:menuListPopover
+          :readonly="true"
+          placeholder="点击选择上级菜单"
+          class="menu-list__input"
+        ></el-input>
       </el-form-item>
-      <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
+      <el-form-item v-if="dataForm.type === 1" label="菜单URL" prop="url">
-        <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
+        <el-input
-      </el-form-item>
+          type="textarea"
-      <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
+          maxlength="100"
-        <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
+          show-word-limit
+          v-model="dataForm.url"
+          placeholder="菜单URL"
+        ></el-input>
       </el-form-item>
       <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
         <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
       </el-form-item>
+
       <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
         <el-row>
           <el-col :span="22">
-            <el-popover ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-menu__icon-popover">
+            <el-popover
+              ref="iconListPopover"
+              placement="bottom-start"
+              trigger="click"
+              popper-class="mod-menu__icon-popover"
+            >
               <div class="mod-menu__icon-inner">
                 <div class="mod-menu__icon-list">
                   <el-button
                     v-for="(item, index) in iconList"
                     :key="index"
                     @click="iconActiveHandle(item)"
-                    :class="{ 'is-active': item === dataForm.icon }">
+                    :class="{ 'is-active': item === dataForm.icon }"
+                  >
                     <icon-svg :name="item"></icon-svg>
                   </el-button>
                 </div>
               </div>
             </el-popover>
-            <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
+            <el-input
+              v-model="dataForm.icon"
+              v-popover:iconListPopover
+              :readonly="true"
+              placeholder="菜单图标名称"
+              class="icon-list__input"
+            ></el-input>
           </el-col>
           <el-col :span="2" class="icon-list__tips">
             <el-tooltip placement="top" effect="light">
-              <div slot="content">全站推荐使用SVG Sprite, 详细请参考:<a href="//github.com/daxiongYang/renren-fast-vue/blob/master/src/icons/index.js" target="_blank">icons/index.js</a>描述</div>
+              <div slot="content">
+                全站推荐使用SVG Sprite, 详细请参考:
+                <a
+                  href="//github.com/daxiongYang/renren-fast-vue/blob/master/src/icons/index.js"
+                  target="_blank"
+                >icons/index.js</a>描述
+              </div>
               <i class="el-icon-warning"></i>
             </el-tooltip>
           </el-col>
@@ -71,175 +121,174 @@
 </template>
 
 <script>
-  import { treeDataTranslate } from '@/utils'
+import { treeDataTranslate } from '@/utils'
-  import Icon from '@/icons'
+import Icon from '@/icons'
-  import { apiSysMenuSelect, apiSysMenuInfo, apiSysMenuConfirm } from '@/api/api_sys'
+import { apiSysMenuSelect, apiSysMenuInfo, apiSysMenuConfirm } from '@/api/api_sys'
 
-  export default {
+export default {
-    data () {
+  data () {
-      var validateUrl = (rule, value, callback) => {
+    var validateUrl = (rule, value, callback) => {
-        if (this.dataForm.type === 1 && !/\S/.test(value)) {
+      if (this.dataForm.type === 1 && !/\S/.test(value)) {
-          callback(new Error('菜单URL不能为空'))
+        callback(new Error('菜单URL不能为空'))
-        } else {
+      } else {
-          callback()
+        callback()
-        }
-      }
-      return {
-        visible: false,
-        dataForm: {
-          id: 0,
-          type: 1,
-          typeList: ['目录', '菜单', '按钮'],
-          name: '',
-          parentId: 0,
-          parentName: '',
-          url: '',
-          perms: '',
-          orderNum: 0,
-          icon: '',
-          iconList: []
-        },
-        dataRule: {
-          name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
-          parentName: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }],
-          url: [{ validator: validateUrl, trigger: 'blur' }]
-        },
-        menuList: [],
-        menuListTreeProps: {
-          label: 'name',
-          children: 'children'
-        },
-        apiType: '' // api类型
-      }
-    },
-    created () {
-      this.iconList = Icon.getNameList()
-    },
-    methods: {
-      init (id) {
-        this.handleGetSysMenuSelect()
-        if (id) {
-          this.dataForm.id = id || 0
-          this.apiType = '/update'
-          this.handleEdit()
-        } else { // 新增
-          this.apiType = '/save'
-        }
-      },
-      // 获取下拉选择的菜单列表
-      handleGetSysMenuSelect () {
-        apiSysMenuSelect({}).then(res => {
-          this.menuList = treeDataTranslate(res.menuList, 'menuId')
-          this.visible = true
-          this.$nextTick(() => {
-            this.$refs['dataForm'].resetFields()
-            this.menuListTreeSetCurrentNode()
-          })
-        })
-      },
-      // 编辑
-      handleEdit () {
-        apiSysMenuInfo({}, `/${this.dataForm.id}`).then(res => {
-          this.dataForm.id = res.menu.menuId
-          this.dataForm.type = res.menu.type
-          this.dataForm.name = res.menu.name
-          this.dataForm.parentId = res.menu.parentId
-          this.dataForm.url = res.menu.url
-          this.dataForm.perms = res.menu.perms
-          this.dataForm.orderNum = res.menu.orderNum
-          this.dataForm.icon = res.menu.icon
-          this.menuListTreeSetCurrentNode()
-        })
-      },
-      // 提交
-      handleConfirm () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            let params = {
-              'menuId': this.dataForm.id || undefined,
-              'type': this.dataForm.type,
-              'name': this.dataForm.name,
-              'parentId': this.dataForm.parentId,
-              'url': this.dataForm.url,
-              'perms': this.dataForm.perms,
-              'orderNum': this.dataForm.orderNum,
-              'icon': this.dataForm.icon
-            }
-            apiSysMenuConfirm(params, this.apiType).then(res => {
-              if (res && res.code === 0) {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                  }
-                })
-              } else {
-                this.$message.error(res.msg)
-              }
-            })
-          }
-        })
-      },
-      // 菜单树选中
-      menuListTreeCurrentChangeHandle (data, node) {
-        this.dataForm.parentId = data.menuId
-        this.dataForm.parentName = data.name
-      },
-      // 菜单树设置当前选中节点
-      menuListTreeSetCurrentNode () {
-        this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
-        this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
-      },
-      // 图标选中
-      iconActiveHandle (iconName) {
-        this.dataForm.icon = iconName
       }
     }
+    return {
+      visible: false,
+      visiblePopover: false,
+      dataForm: {
+        id: 0,
+        type: 1,
+        typeList: ['目录', '菜单', '按钮'],
+        name: '',
+        parentId: 0,
+        parentName: '',
+        url: '',
+        orderNum: 0,
+        icon: '',
+        iconList: []
+      },
+      dataRule: {
+        name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+        parentName: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }],
+        url: [{ validator: validateUrl, trigger: 'blur' }]
+      },
+      menuList: [],
+      menuListTreeProps: {
+        label: 'name',
+        children: 'children'
+      },
+      apiType: '' // api类型
+    }
+  },
+  created () {
+    this.iconList = Icon.getNameList()
+  },
+  methods: {
+    init (id) {
+      this.handleGetSysMenuSelect()
+      this.dataForm.id = id || 0
+      if (id) {
+        this.apiType = '/update'
+        this.handleEdit()
+      } else { // 新增
+        this.apiType = '/save'
+      }
+    },
+    // 获取下拉选择的菜单列表
+    handleGetSysMenuSelect () {
+      apiSysMenuSelect({}).then(res => {
+        this.menuList = treeDataTranslate(res.menuList, 'menuId')
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+          this.menuListTreeSetCurrentNode()
+        })
+      })
+    },
+    // 编辑
+    handleEdit () {
+      apiSysMenuInfo({}, `/${this.dataForm.id}`).then(res => {
+        this.dataForm.id = res.menu.menuId
+        this.dataForm.type = res.menu.type
+        this.dataForm.name = res.menu.name
+        this.dataForm.parentId = res.menu.parentId
+        this.dataForm.url = res.menu.url
+        this.dataForm.orderNum = res.menu.orderNum
+        this.dataForm.icon = res.menu.icon
+        this.menuListTreeSetCurrentNode()
+      })
+    },
+    // 提交
+    handleConfirm () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          let params = {
+            'menuId': this.dataForm.id || undefined,
+            'type': this.dataForm.type,
+            'name': this.dataForm.name,
+            'parentId': this.dataForm.parentId,
+            'url': this.dataForm.url,
+            'orderNum': this.dataForm.orderNum,
+            'icon': this.dataForm.icon
+          }
+          apiSysMenuConfirm(params, this.apiType).then(res => {
+            if (res && res.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    },
+    // 菜单树选中
+    menuListTreeCurrentChangeHandle (data, node) {
+      this.dataForm.parentId = data.menuId
+      this.dataForm.parentName = data.name
+      this.visiblePopover = false
+    },
+    // 菜单树设置当前选中节点
+    menuListTreeSetCurrentNode () {
+      this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
+      this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
+    },
+    // 图标选中
+    iconActiveHandle (iconName) {
+      this.dataForm.icon = iconName
+    }
   }
+}
 </script>
 
 <style lang="scss">
-  .mod-menu {
+.mod-menu {
-    .menu-list__input,
+  .menu-list__input,
-    .icon-list__input {
+  .icon-list__input {
-       > .el-input__inner {
+    > .el-input__inner {
-        cursor: pointer;
-      }
-    }
-    &__icon-popover {
-      width: 458px;
-      overflow: hidden;
-    }
-    &__icon-inner {
-      width: 478px;
-      max-height: 258px;
-      overflow-x: hidden;
-      overflow-y: auto;
-    }
-    &__icon-list {
-      width: 458px;
-      padding: 0;
-      margin: -8px 0 0 -8px;
-      > .el-button {
-        padding: 8px;
-        margin: 8px 0 0 8px;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          width: 18px;
-          height: 18px;
-          font-size: 18px;
-        }
-      }
-    }
-    .icon-list__tips {
-      font-size: 18px;
-      text-align: center;
-      color: #e6a23c;
       cursor: pointer;
     }
   }
+  &__icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+  &__icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &__icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+    > .el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+  .icon-list__tips {
+    font-size: 18px;
+    text-align: center;
+    color: #e6a23c;
+    cursor: pointer;
+  }
+}
 </style>