diff --git a/package.json b/package.json index 8238849..309144c 100644 --- a/package.json +++ b/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", diff --git a/src/view/sys/sys-permission.vue b/src/view/sys/sys-permission.vue index 8d2909b..a3b2f6d 100644 --- a/src/view/sys/sys-permission.vue +++ b/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 提交