feat: auto-generate permission code/url/component; fix edit form validation reset

package.json

@@ -24,6 +24,7 @@
     "html2canvas": "^1.0.0-alpha.12",
     "iview-area": "^1.5.17",
     "js-cookie": "^2.2.0",
+    "js-pinyin": "^0.2.7",
     "jsencrypt": "^3.0.0-rc.1",
     "jsrsasign": "^8.0.12",
     "mathjs": "^6.6.4",

src/view/sys/sys-permission.vue

@@ -138,6 +138,7 @@
   import IconChoose from "@/components/my-components/icon-choose"
   import Treeselect from '@riophae/vue-treeselect'
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  import Pinyin from 'js-pinyin'
 
   export default {
     name: "sso-menu",
@@ -236,7 +237,7 @@
         },
         ruleCustom: {
           parentId: [{
-            required: true, message: '请选择上级菜单', trigger: 'blur'
+            required: true, message: '请选择上级菜单', trigger: 'change'
           }],
           permissionName: [{
             required: true, message: '请输入菜单名称', trigger: 'blur'
@@ -245,7 +246,7 @@
             required: true, message: '请输入菜单编码', trigger: 'blur'
           }],
           icon: [{
-            required: true, message: '请输入菜单图标', trigger: 'blur'
+            required: true, message: '请输入菜单图标', trigger: 'change'
           }],
           url: [{
             required: true, message: '请输入路由地址', trigger: 'blur'
@@ -256,7 +257,53 @@
         },
       }
     },
+    watch: {
+      'formItem.permissionName'(val) {
+        if (!this.addModal) return
+        const name = (val || '').trim()
+        if (!name) return
+        if (!this.formItem.permissionCode) {
+          this.formItem.permissionCode = this.generateCode(name)
+        }
+      },
+      'formItem.permissionCode'(val) {
+        if (!this.addModal) return
+        const code = (val || '').trim()
+        if (!code) return
+        const paths = this.generatePaths(code)
+        if (!this.formItem.url) {
+          this.formItem.url = paths.url
+        }
+        if (!this.formItem.component) {
+          this.formItem.component = paths.component
+        }
+      }
+    },
     methods: {
+      generateCode (name) {
+        const py = Pinyin.getFullChars(name)
+          .toLowerCase()
+          .replace(/[^a-z0-9\s]/g, '')
+          .trim()
+          .replace(/\s+/g, '-')
+        return py ? `sys:${py}` : ''
+      },
+      generatePaths (code) {
+        const parts = code.split(':')
+        const module = parts.length > 1 ? parts[0] : 'sys'
+        const name = parts.length > 1 ? parts[1] : parts[0]
+        return {
+          url: `/${module}/${name}`,
+          component: `/${module}/${module}-${name}`
+        }
+      },
+      resetForm () {
+        this.$nextTick(() => {
+          if (this.$refs.formItem) {
+            this.$refs.formItem.resetFields()
+          }
+        })
+      },
       getTreeChoose() {
         // 获取选中的节点信息
         let choose = this.$refs.tree.getSelectedNodes();
@@ -303,29 +350,51 @@
         }
 
         this.modalTitle = "添加"
-        this.modal = true
-
         this.addModal = true
         this.editModal = false
+
+        // 打开弹窗前重置表单数据与校验状态
+        this.formItem = {
+          id: '',
+          parentId: this.formItem.parentId || '0',
+          permissionName: '',
+          permissionCode: '',
+          level: this.formItem.level || 0,
+          icon: '',
+          permissionDesc: '',
+          url: '',
+          component: '',
+          status: '1',
+          sort: 0,
+        }
+        this.modal = true
+        this.resetForm()
       },
       toEdit(index) {
         this.modalTitle = "编辑"
         let temp = this.dataList[index]
 
-        this.formItem.id = temp.id
-        this.formItem.parentId = temp.parentId
-        this.formItem.permissionName = temp.permissionName
-        this.formItem.permissionCode = temp.permissionCode
-        this.formItem.level = temp.level
-        this.formItem.icon = temp.icon
-        this.formItem.url = temp.url
-        this.formItem.component = temp.component
-        this.formItem.permissionDesc = temp.permissionDesc
-        this.formItem.sort = temp.sort
-
-        this.modal = true
         this.addModal = false
         this.editModal = true
+        this.modal = true
+
+        this.$nextTick(() => {
+          // 先清掉上一次校验红框
+          if (this.$refs.formItem) {
+            this.$refs.formItem.resetFields()
+          }
+          // 再回填编辑数据
+          this.formItem.id = temp.id
+          this.formItem.parentId = temp.parentId
+          this.formItem.permissionName = temp.permissionName
+          this.formItem.permissionCode = temp.permissionCode
+          this.formItem.level = temp.level
+          this.formItem.icon = temp.icon
+          this.formItem.url = temp.url
+          this.formItem.component = temp.component
+          this.formItem.permissionDesc = temp.permissionDesc
+          this.formItem.sort = temp.sort
+        })
       },
       submit(formItem) {
         // modal 提交