From f57e0e2b4097707247e8ee0805d2918aadb3bcfd Mon Sep 17 00:00:00 2001
From: Mrtangl <1807746833@qq.com>
Date: Tue, 2 Aug 2022 15:49:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/views/permission/role/edit.vue | 385 +++++++++++------------
 1 file changed, 189 insertions(+), 196 deletions(-)

diff --git a/admin/src/views/permission/role/edit.vue b/admin/src/views/permission/role/edit.vue
index 43540fdb..6292be28 100644
--- a/admin/src/views/permission/role/edit.vue
+++ b/admin/src/views/permission/role/edit.vue
@@ -48,7 +48,7 @@
                         icon="ArrowRight"
                         :props="{
                             children: 'children',
-                            label: 'menuName'
+                            label: 'menuName',
                         }"
                         empty-text=""
                         show-checkbox
@@ -65,213 +65,206 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, onMounted, Ref, ref, toRefs } from 'vue'
-import {
-    apiConfigGetMenu,
-    apiConfigGetAuth,
-    apiRoleAdd,
-    apiRoleEdit,
-    apiRoleDetail
-} from '@/api/auth'
-import { ElInput, ElForm } from 'element-plus'
-import FooterBtns from '@/components/footer-btns/index.vue'
-import { useAdmin } from '@/core/hooks/app'
-import { flatten } from '@/utils/util'
-import { ElMessage } from 'element-plus'
+    import { defineComponent, reactive, onMounted, Ref, ref, toRefs } from 'vue'
+    import { apiConfigGetMenu, apiConfigGetAuth, apiRoleAdd, apiRoleEdit, apiRoleDetail } from '@/api/auth'
+    import { ElInput, ElForm } from 'element-plus'
+    import FooterBtns from '@/components/footer-btns/index.vue'
+    import { useAdmin } from '@/core/hooks/app'
+    import { flatten } from '@/utils/util'
+    import { ElMessage } from 'element-plus'
 
-export default defineComponent({
-    components: {
-        FooterBtns
-    },
-    setup() {
-        const { route, router } = useAdmin()
-        const formRef: Ref<typeof ElForm | null> = ref(null)
-        const treeRef: Ref<typeof ElForm | null> = ref(null)
-        const id: Ref<Number | null> = ref(null) // 当前编辑角色ID
+    export default defineComponent({
+        components: {
+            FooterBtns,
+        },
+        setup() {
+            const { route, router } = useAdmin()
+            const formRef: Ref<typeof ElForm | null> = ref(null)
+            const treeRef: Ref<typeof ElForm | null> = ref(null)
+            const id: Ref<Number | null> = ref(null) // 当前编辑角色ID
 
-        // 表单数据
-        const { formData, menu } = toRefs(
-            reactive({
-                formData: {
-                    name: '', // 角色名称
-                    remark: '', // 备注
-                    menus: [], // 权限，就选中的菜单id
-                    isDisable: 0,
-                    sort: '',
-                    menuIds: '' // 菜单ID数组,逗号隔开
-                },
+            // 表单数据
+            const { formData, menu } = toRefs(
+                reactive({
+                    formData: {
+                        name: '', // 角色名称
+                        remark: '', // 备注
+                        menus: [], // 权限，就选中的菜单id
+                        isDisable: 0,
+                        sort: '',
+                        menuIds: '', // 菜单ID数组,逗号隔开
+                    },
 
-                menu: {
-                    permissionsTree: [], // 菜单
-                    allAuthKeys: [] // 菜单全部的id
+                    menu: {
+                        permissionsTree: [], // 菜单
+                        allAuthKeys: [], // 菜单全部的id
+                    },
+                })
+            )
+
+            // 表单验证
+            const rules = {
+                name: [
+                    {
+                        required: true,
+                        message: '请输入角色名称',
+                        trigger: ['blur'],
+                        pattern: /(^[^\s]*$)/, // 不能输入空格
+                    },
+                ],
+                sort: [
+                    {
+                        required: true,
+                        message: '请输入排序',
+                        trigger: 'blur',
+                        pattern: /(^[0-9]\d*$)/,
+                    },
+                ],
+            }
+
+            // 确定提交
+            const onSubmit = () => {
+                formRef.value?.validate((valid: boolean) => {
+                    if (!valid) {
+                        return
+                    }
+
+                    id.value ? roleEdit() : roleAdd()
+                })
+            }
+
+            const getMenu = () => {
+                apiConfigGetMenu()
+                    .then((res: any) => {
+                        // 获取菜单
+                        menu.value.permissionsTree = res
+                        console.log('res', res)
+
+                        // 数组扁平化
+                        const menuFlatten = flatten(res, [], 'children')
+                        // console.log(menuFlatten)
+                        // 获取菜单全部 id
+                        menu.value.allAuthKeys = menuFlatten.map((item: any) => item.id) as never
+                    })
+                    .catch((err: any) => {
+                        console.log('err', err)
+                    })
+            }
+
+            // 添加角色
+            const roleAdd = () => {
+                apiRoleAdd({ ...formData.value })
+                    .then((res: any) => {
+                        setTimeout(() => {
+                            router.back()
+                        }, 500)
+                        ElMessage({ type: 'success', message: '保存成功' })
+                    })
+                    .catch((err: any) => {
+                        console.log('err', err)
+                    })
+            }
+            // 编辑角色
+            const roleEdit = () => {
+                // 选择中的权限id字符串
+                formData.value.menus.length == 0
+                    ? (formData.value.menuIds = '')
+                    : (formData.value.menuIds = formData.value.menus.join(','))
+
+                apiRoleEdit({
+                    ...formData.value,
+                    id: id.value,
+                })
+                    .then((res: any) => {
+                        console.log('res', res)
+                        setTimeout(() => {
+                            router.back()
+                        }, 500)
+                        ElMessage({ type: 'success', message: '保存成功' })
+                    })
+                    .catch((err: any) => {
+                        console.log('err', err)
+                    })
+            }
+
+            // 角色详情
+            const roleDetail = () => {
+                apiRoleDetail({
+                    id: id.value,
+                })
+                    .then((res: any) => {
+                        console.log('res', res)
+
+                        formData.value = res
+
+                        treeRef.value?.setCheckedKeys(res.menus)
+                    })
+                    .catch((err: any) => {
+                        console.log('err', err)
+                    })
+            }
+
+            // 权限树触发函数
+            const handlePermissionsCheckChange = (data: any, checked: boolean) => {
+                console.log(data)
+                if (!data.id) {
+                    return
                 }
-            })
-        )
-
-        // 表单验证
-        const rules = {
-            name: [
-                {
-                    required: true,
-                    message: '请输入角色名称',
-                    trigger: ['blur'],
-                    pattern: /(^[^\s]*$)/ // 不能输入空格
-                }
-            ],
-            sort: [
-                {
-                    required: true,
-                    message: '请输入排序',
-                    trigger: 'blur',
-                    pattern: /(^[0-9]\d*$)/
-                }
-            ]
-        }
-
-        // 确定提交
-        const onSubmit = () => {
-            formRef.value?.validate((valid: boolean) => {
-                if (!valid) {
+                const index = formData.value.menus.findIndex((item) => item == data.id)
+                if (checked) {
+                    index == -1 && (formData.value.menus as any).push(data.id)
                     return
                 }
 
-                id.value ? roleEdit() : roleAdd()
+                if (index != -1) {
+                    formData.value.menus.splice(index, 1)
+                }
+            }
+
+            // 全选
+            const allSelect = () => {
+                treeRef.value?.setCheckedKeys(menu.value.allAuthKeys)
+            }
+
+            // 全不选
+            const close = () => {
+                treeRef.value?.setCheckedKeys([])
+            }
+
+            onMounted(() => {
+                const query: any = route.query
+                if (query.id) {
+                    id.value = query.id * 1
+                    roleDetail()
+                }
+
+                getMenu()
             })
-        }
 
-        const getMenu = () => {
-            apiConfigGetMenu()
-                .then((res: any) => {
-                    // 获取菜单
-                    menu.value.permissionsTree = res
-                    console.log('res', res)
-
-                    // 数组扁平化
-                    const menuFlatten = flatten(res, [], 'children')
-                    // console.log(menuFlatten)
-                    // 获取菜单全部 id
-                    menu.value.allAuthKeys = menuFlatten.map((item: any) => item.id) as never
-                })
-                .catch((err: any) => {
-                    console.log('err', err)
-                })
-        }
-
-        // 添加角色
-        const roleAdd = () => {
-            apiRoleAdd({ ...formData.value })
-                .then((res: any) => {
-                    console.log('res', res)
-                    setTimeout(() => {
-                        router.back()
-                    }, 500)
-                    ElMessage({ type: 'success', message: '保存成功' })
-                })
-                .catch((err: any) => {
-                    console.log('err', err)
-                })
-        }
-        // 编辑角色
-        const roleEdit = () => {
-            // 选择中的权限id字符串
-            formData.value.menus.length == 0
-                ? (formData.value.menuIds = '')
-                : (formData.value.menuIds = formData.value.menus.join(','))
-
-            apiRoleEdit({
-                ...formData.value,
-                id: id.value
-            })
-                .then((res: any) => {
-                    console.log('res', res)
-                    setTimeout(() => {
-                        router.back()
-                    }, 500)
-                    ElMessage({ type: 'success', message: '保存成功' })
-                })
-                .catch((err: any) => {
-                    console.log('err', err)
-                })
-        }
-
-        // 角色详情
-        const roleDetail = () => {
-            apiRoleDetail({
-                id: id.value
-            })
-                .then((res: any) => {
-                    console.log('res', res)
-
-                    formData.value = res
-
-                    treeRef.value?.setCheckedKeys(res.menus)
-                })
-                .catch((err: any) => {
-                    console.log('err', err)
-                })
-        }
-
-        // 权限树触发函数
-        const handlePermissionsCheckChange = (data: any, checked: boolean) => {
-            console.log(data)
-            if (!data.id) {
-                return
+            return {
+                id,
+                formData,
+                menu,
+                formRef,
+                treeRef,
+                rules,
+                getMenu,
+                roleAdd,
+                roleEdit,
+                roleDetail,
+                onSubmit,
+                handlePermissionsCheckChange,
+                close,
+                allSelect,
             }
-            const index = formData.value.menus.findIndex(item => item == data.id)
-            if (checked) {
-                index == -1 && (formData.value.menus as any).push(data.id)
-                return
-            }
-
-            if (index != -1) {
-                formData.value.menus.splice(index, 1)
-            }
-        }
-
-        // 全选
-        const allSelect = () => {
-            treeRef.value?.setCheckedKeys(menu.value.allAuthKeys)
-        }
-
-        // 全不选
-        const close = () => {
-            treeRef.value?.setCheckedKeys([])
-        }
-
-        onMounted(() => {
-            const query: any = route.query
-            if (query.id) {
-                id.value = query.id * 1
-                roleDetail()
-            }
-
-            getMenu()
-        })
-
-        return {
-            id,
-            formData,
-            menu,
-            formRef,
-            treeRef,
-            rules,
-            getMenu,
-            roleAdd,
-            roleEdit,
-            roleDetail,
-            onSubmit,
-            handlePermissionsCheckChange,
-            close,
-            allSelect
-        }
-    }
-})
+        },
+    })
 </script>
 
 <style lang="scss" scoped>
-.role-edit {
-    :deep .el-textarea {
-        width: 340px;
+    .role-edit {
+        :deep .el-textarea {
+            width: 340px;
+        }
     }
-}
 </style>