调整代码
This commit is contained in:
Mrtangl
parent
cf1e71c04d
commit
f57e0e2b40
|
|
@ -48,7 +48,7 @@
|
||||||
icon="ArrowRight"
|
icon="ArrowRight"
|
||||||
:props="{
|
:props="{
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'menuName'
|
label: 'menuName',
|
||||||
}"
|
}"
|
||||||
empty-text=""
|
empty-text=""
|
||||||
show-checkbox
|
show-checkbox
|
||||||
|
|
@ -65,213 +65,206 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, reactive, onMounted, Ref, ref, toRefs } from 'vue'
|
import { defineComponent, reactive, onMounted, Ref, ref, toRefs } from 'vue'
|
||||||
import {
|
import { apiConfigGetMenu, apiConfigGetAuth, apiRoleAdd, apiRoleEdit, apiRoleDetail } from '@/api/auth'
|
||||||
apiConfigGetMenu,
|
import { ElInput, ElForm } from 'element-plus'
|
||||||
apiConfigGetAuth,
|
import FooterBtns from '@/components/footer-btns/index.vue'
|
||||||
apiRoleAdd,
|
import { useAdmin } from '@/core/hooks/app'
|
||||||
apiRoleEdit,
|
import { flatten } from '@/utils/util'
|
||||||
apiRoleDetail
|
import { ElMessage } from 'element-plus'
|
||||||
} 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({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
FooterBtns
|
FooterBtns,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const { route, router } = useAdmin()
|
const { route, router } = useAdmin()
|
||||||
const formRef: Ref<typeof ElForm | null> = ref(null)
|
const formRef: Ref<typeof ElForm | null> = ref(null)
|
||||||
const treeRef: Ref<typeof ElForm | null> = ref(null)
|
const treeRef: Ref<typeof ElForm | null> = ref(null)
|
||||||
const id: Ref<Number | null> = ref(null) // 当前编辑角色ID
|
const id: Ref<Number | null> = ref(null) // 当前编辑角色ID
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
const { formData, menu } = toRefs(
|
const { formData, menu } = toRefs(
|
||||||
reactive({
|
reactive({
|
||||||
formData: {
|
formData: {
|
||||||
name: '', // 角色名称
|
name: '', // 角色名称
|
||||||
remark: '', // 备注
|
remark: '', // 备注
|
||||||
menus: [], // 权限，就选中的菜单id
|
menus: [], // 权限，就选中的菜单id
|
||||||
isDisable: 0,
|
isDisable: 0,
|
||||||
sort: '',
|
sort: '',
|
||||||
menuIds: '' // 菜单ID数组,逗号隔开
|
menuIds: '', // 菜单ID数组,逗号隔开
|
||||||
},
|
},
|
||||||
|
|
||||||
menu: {
|
menu: {
|
||||||
permissionsTree: [], // 菜单
|
permissionsTree: [], // 菜单
|
||||||
allAuthKeys: [] // 菜单全部的id
|
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 index = formData.value.menus.findIndex((item) => item == data.id)
|
||||||
)
|
if (checked) {
|
||||||
|
index == -1 && (formData.value.menus as any).push(data.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
|
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 = () => {
|
return {
|
||||||
apiConfigGetMenu()
|
id,
|
||||||
.then((res: any) => {
|
formData,
|
||||||
// 获取菜单
|
menu,
|
||||||
menu.value.permissionsTree = res
|
formRef,
|
||||||
console.log('res', res)
|
treeRef,
|
||||||
|
rules,
|
||||||
// 数组扁平化
|
getMenu,
|
||||||
const menuFlatten = flatten(res, [], 'children')
|
roleAdd,
|
||||||
// console.log(menuFlatten)
|
roleEdit,
|
||||||
// 获取菜单全部 id
|
roleDetail,
|
||||||
menu.value.allAuthKeys = menuFlatten.map((item: any) => item.id) as never
|
onSubmit,
|
||||||
})
|
handlePermissionsCheckChange,
|
||||||
.catch((err: any) => {
|
close,
|
||||||
console.log('err', err)
|
allSelect,
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加角色
|
|
||||||
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
|
|
||||||
}
|
}
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.role-edit {
|
.role-edit {
|
||||||
:deep .el-textarea {
|
:deep .el-textarea {
|
||||||
width: 340px;
|
width: 340px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue