0b2/catchAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: permissions

Browse Source
This commit is contained in:
JaguarJack
2022-12-07 19:28:57 +08:00
parent a1d9468a91
commit 8c537e6656
45 changed files with 1030 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
modules/Permissions/views/permissions/create.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<el-form :model="formData" label-width="80px" ref="form" v-loading="loading" class="pr-4">
<div class="flex flex-row justify-between">
<div>
<el-form-item label="菜单类型" prop="type">
<el-radio-group v-model="formData.type">
<el-radio-button
v-for="item in [
{ label: '目录', value: 1 },
{ label: '菜单', value: 2 },
{ label: '按钮', value: 3 },
]"
:key="item.value"
:label="item.value"
name="type"
>{{ item.label }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单名称" prop="permission_name">
<el-input v-model="formData.permission_name" name="permission_name" clearable />
</el-form-item>
<el-form-item label="所属模块" prop="module">
<Select v-model="formData.module" clearable api="modules" class="w-full" filterable />
</el-form-item>
<el-form-item label="菜单路由" prop="route">
<el-input v-model="formData.route" name="route" clearable />
</el-form-item>
<el-form-item label="Redirect" prop="redirect">
<el-input v-model="formData.redirect" name="redirect" clearable />
</el-form-item>
<el-form-item label="Keepalive" prop="keepalive">
<el-radio-group v-model="formData.keepalive">
<el-radio
v-for="item in [
{ label: '启用', value: 1 },
{ label: '禁用', value: 2 },
]"
:key="item.value"
:label="item.value"
name="keepalive"
>{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div>
<el-form-item label="父级菜单" prop="parent_id">
<el-cascader :options="permissions" name="parent_id" v-model="formData.parent_id" clearable :props="{ value: 'id', label: 'permission_name', checkStrictly: true }" class="w-full" />
</el-form-item>
<el-form-item label="权限标识" prop="permission_mark">
<el-input v-model="formData.permission_mark" name="permission_mark" clearable />
</el-form-item>
<el-form-item label="菜单Icon" prop="icon">
<el-input v-model="formData.icon" name="icon" clearable />
</el-form-item>
<el-form-item label="所属组件" prop="component">
<el-select v-model="formData.component" placeholder="请选择" clearable class="w-full" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" name="sort" :min="1" />
</el-form-item>
<el-form-item label="Hidden" prop="hidden">
<el-radio-group v-model="formData.hidden">
<el-radio
v-for="item in [
{ label: '显示', value: 1 },
{ label: '隐藏', value: 2 },
]"
:key="item.value"
:label="item.value"
name="hidden"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</div>
</div>
<div class="flex justify-end">
<el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
</div>
</el-form>
</template>
<script lang="ts" setup>
import { useCreate } from '/admin/composables/curd/useCreate'
import { useShow } from '/admin/composables/curd/useShow'
import { onMounted, ref } from 'vue'
import http from '/admin/support/http'
const props = defineProps({
primary: String | Number,
api: String,
})
const { formData, form, loading, submitForm, close, beforeCreate, beforeUpdate } = useCreate(props.api, props.primary)
formData.value.sort = 1
formData.value.keepalive = 1
formData.value.type = 1
formData.value.hidden = 1
if (props.primary) {
useShow(props.api, props.primary, formData)
}
const emit = defineEmits(['close'])
const permissions = ref()
onMounted(() => {
http.get(props.api).then(r => {
permissions.value = r.data.data
})
close(() => emit('close'))
})
beforeCreate.value = () => {
formData.value.parent_id = getParent(formData.value.parent_id)
}
beforeUpdate.value = () => {
formData.value.parent_id = getParent(formData.value.parent_id)
}
const getParent = (parentId: any) => {
return typeof parentId === 'undefined' ? 0 : parentId[parentId.length - 1]
}
</script>

52
modules/Permissions/views/permissions/index.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div>
<Search :search="search" :reset="reset">
<template v-slot:body>
<el-form-item label="菜单名称" prop="permission_name">
<el-input v-model="query.permission_name" name="permission_name" clearable />
</el-form-item>
</template>
</Search>
<div class="pl-2 pr-2 bg-white dark:bg-regal-dark rounded-lg mt-4 pb-10">
<Operate :show="open" />
<el-table :data="tableData" class="mt-3" v-loading="loading" row-key="id" default-expand-all :tree-props="{ children: 'children' }">
<el-table-column prop="permission_name" label="菜单名称" />
<el-table-column prop="route" label="菜单路由" />
<el-table-column prop="permission_mark" label="权限标识" />
<el-table-column prop="hidden" label="状态" />
<el-table-column prop="created_at" label="创建时间" />
<el-table-column label="操作" width="200">
<template #default="scope">
<Update @click="open(scope.row.id)" />
<Destroy @click="destroy(api, scope.row.id)" />
</template>
</el-table-column>
</el-table>
</div>
<Dialog v-model="visible" :title="title" destroy-on-close>
<Create @close="close(reset)" :primary="id" :api="api" />
</Dialog>
</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, watch } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
const api = 'permissions/permissions'
const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()
const tableData = computed(() => data.value?.data)
onMounted(() => {
search()
deleted(reset)
})
</script>