新增
This commit is contained in:
Your Name
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
:title="popupTitle"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
|
||||
<!-- 账号输入框 -->
|
||||
<el-form-item label="账号" prop="account">
|
||||
<el-input
|
||||
v-model="formData.account"
|
||||
:disabled="formData.root == 1"
|
||||
placeholder="请输入账号"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 管理员头像 -->
|
||||
<el-form-item label="头像">
|
||||
<div>
|
||||
<div>
|
||||
<material-picker v-model="formData.avatar" :limit="1" />
|
||||
</div>
|
||||
<div class="form-tips">建议尺寸：100*100px，支持jpg，jpeg，png格式</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 名称输入框 -->
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="归属部门" prop="dept_id">
|
||||
<el-tree-select
|
||||
class="flex-1"
|
||||
v-model="formData.dept_id"
|
||||
:data="optionsData.dept"
|
||||
clearable
|
||||
multiple
|
||||
node-key="id"
|
||||
:props="{
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
disabled(data: any) {
|
||||
return data.status !== 1
|
||||
}
|
||||
}"
|
||||
check-strictly
|
||||
:default-expand-all="true"
|
||||
placeholder="请选择上级部门"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位" prop="jobs_id">
|
||||
<el-select
|
||||
class="flex-1"
|
||||
v-model="formData.jobs_id"
|
||||
clearable
|
||||
multiple
|
||||
placeholder="请选择岗位"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in optionsData.jobs"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 角色选择框 -->
|
||||
<el-form-item label="角色" prop="role_id" v-if="formData.root != 1">
|
||||
<el-select
|
||||
v-model="formData.role_id"
|
||||
:disabled="formData.root == 1"
|
||||
class="flex-1"
|
||||
multiple
|
||||
placeholder="请选择角色"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in optionsData.role"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
show-password
|
||||
clearable
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 确认密码输入框 -->
|
||||
<el-form-item label="确认密码" prop="password_confirm">
|
||||
<el-input
|
||||
v-model="formData.password_confirm"
|
||||
show-password
|
||||
clearable
|
||||
placeholder="请输入确认密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 管理员状态 -->
|
||||
<el-form-item label="管理员状态" v-if="formData.root != 1">
|
||||
<el-switch v-model="formData.disable" :active-value="0" :inactive-value="1" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 多处登录 -->
|
||||
<el-form-item label="多处登录">
|
||||
<div>
|
||||
<el-switch
|
||||
v-model="formData.multipoint_login"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
<div class="form-tips">允许多人同时在线登录</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
import { deptAll } from '@/api/org/department'
|
||||
import { jobsAll } from '@/api/org/post'
|
||||
import { adminAdd, adminDetail, adminEdit } from '@/api/perms/admin'
|
||||
import { roleAll } from '@/api/perms/role'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑管理员' : '新增管理员'
|
||||
})
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
account: '',
|
||||
name: '',
|
||||
dept_id: [],
|
||||
jobs_id: [],
|
||||
role_id: [],
|
||||
avatar: '',
|
||||
password: '',
|
||||
password_confirm: '',
|
||||
disable: 0,
|
||||
multipoint_login: 1,
|
||||
root: 0
|
||||
})
|
||||
const passwordConfirmValidator = (rule: object, value: string, callback: any) => {
|
||||
if (formData.password) {
|
||||
if (!value) callback(new Error('请再次输入密码'))
|
||||
if (value !== formData.password) callback(new Error('两次输入密码不一致!'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
|
||||
const roleIdValidator = (rule: object, value: string, callback: any) => {
|
||||
if (formData.root) {
|
||||
callback()
|
||||
} else {
|
||||
if (formData.role_id.length) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('请选择角色'))
|
||||
}
|
||||
}
|
||||
}
|
||||
const formRules = reactive({
|
||||
account: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入账号',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
role_id: [
|
||||
{
|
||||
required: true,
|
||||
validator: roleIdValidator
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: ['blur']
|
||||
}
|
||||
] as any[],
|
||||
password_confirm: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入确认密码',
|
||||
trigger: ['blur']
|
||||
},
|
||||
{
|
||||
validator: passwordConfirmValidator,
|
||||
trigger: 'blur'
|
||||
}
|
||||
] as any[]
|
||||
})
|
||||
const { optionsData } = useDictOptions<{
|
||||
role: any[]
|
||||
jobs: any[]
|
||||
dept: any[]
|
||||
}>({
|
||||
role: {
|
||||
api: roleAll
|
||||
},
|
||||
jobs: {
|
||||
api: jobsAll
|
||||
},
|
||||
dept: {
|
||||
api: deptAll
|
||||
}
|
||||
})
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
mode.value == 'edit' ? await adminEdit(formData) : await adminAdd(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
const setFormData = async (row: any) => {
|
||||
formRules.password = []
|
||||
formRules.password_confirm = [
|
||||
{
|
||||
validator: passwordConfirmValidator,
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
const data = await adminDetail({
|
||||
id: row.id
|
||||
})
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="admin">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-form class="mb-[-16px]" :model="formData" inline>
|
||||
<el-form-item class="w-[280px]" label="管理员账号">
|
||||
<el-input
|
||||
v-model="formData.account"
|
||||
placeholder="请输入管理员账号"
|
||||
clearable
|
||||
@keyup.enter="resetPage"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="w-[280px]" label="管理员名称">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入管理员名称"
|
||||
clearable
|
||||
@keyup.enter="resetPage"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="w-[280px]" label="管理员角色">
|
||||
<el-select v-model="formData.role_id">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option
|
||||
v-for="(item, index) in optionsData.role"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
<export-data
|
||||
class="ml-2.5"
|
||||
:fetch-fun="adminLists"
|
||||
:params="formData"
|
||||
:page-size="pager.size"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card v-loading="pager.loading" class="mt-4 !border-none" shadow="never">
|
||||
<el-button v-perms="['auth.admin/add']" type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
<div class="mt-4">
|
||||
<el-table :data="pager.lists" size="large">
|
||||
<el-table-column label="ID" prop="id" min-width="60" />>
|
||||
<el-table-column label="头像" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-avatar :size="50" :src="row.avatar"></el-avatar>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账号" prop="account" min-width="100" />
|
||||
<el-table-column label="名称" prop="name" min-width="100" />
|
||||
<el-table-column
|
||||
label="角色"
|
||||
prop="role_name"
|
||||
min-width="100"
|
||||
show-tooltip-when-overflow
|
||||
/>
|
||||
<el-table-column
|
||||
label="部门"
|
||||
prop="dept_name"
|
||||
min-width="100"
|
||||
show-tooltip-when-overflow
|
||||
/>
|
||||
<el-table-column label="创建时间" prop="create_time" min-width="180" />
|
||||
<el-table-column label="最近登录时间" prop="login_time" min-width="180" />
|
||||
<el-table-column label="最近登录IP" prop="login_ip" min-width="120" />
|
||||
<el-table-column label="状态" min-width="100" v-perms="['auth.admin/edit']">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-if="row.root != 1"
|
||||
v-model="row.disable"
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
@change="changeStatus(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-perms="['auth.admin/edit']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.root != 1"
|
||||
v-perms="['auth.admin/delete']"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleDelete(row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="flex mt-4 justify-end">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="admin">
|
||||
import { adminDelete, adminEdit, adminLists } from '@/api/perms/admin'
|
||||
import { roleAll } from '@/api/perms/role'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import feedback from '@/utils/feedback'
|
||||
|
||||
import EditPopup from './edit.vue'
|
||||
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
account: '',
|
||||
name: '',
|
||||
role_id: ''
|
||||
})
|
||||
const showEdit = ref(false)
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
fetchFun: adminLists,
|
||||
params: formData
|
||||
})
|
||||
|
||||
const changeStatus = (data: any) => {
|
||||
adminEdit({
|
||||
id: data.id,
|
||||
avatar: data.avatar,
|
||||
account: data.account,
|
||||
name: data.name,
|
||||
role_id: data.role_id,
|
||||
job_id: data.job_id,
|
||||
dept_id: data.dept_id,
|
||||
disable: data.disable,
|
||||
multipoint_login: data.multipoint_login
|
||||
}).finally(() => {
|
||||
getLists()
|
||||
})
|
||||
}
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add')
|
||||
}
|
||||
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit')
|
||||
editRef.value?.setFormData(data)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await adminDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
const { optionsData } = useDictOptions<{
|
||||
role: any[]
|
||||
}>({
|
||||
role: {
|
||||
api: roleAll
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getLists()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
:title="popupTitle"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" label-width="80px" :rules="formRules">
|
||||
<el-form-item label="菜单类型" prop="type" required>
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio :value="MenuEnum.CATALOGUE">目录</el-radio>
|
||||
<el-radio :value="MenuEnum.MENU">菜单</el-radio>
|
||||
<el-radio :value="MenuEnum.BUTTON">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="父级菜单" prop="pid">
|
||||
<el-tree-select
|
||||
class="flex-1"
|
||||
v-model="formData.pid"
|
||||
:data="menuOptions"
|
||||
clearable
|
||||
node-key="id"
|
||||
:props="{
|
||||
label: 'name'
|
||||
}"
|
||||
:default-expand-all="true"
|
||||
placeholder="请选择父级菜单"
|
||||
check-strictly
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入菜单名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.type != MenuEnum.BUTTON" label="菜单图标" prop="icon">
|
||||
<icon-picker class="flex-1" v-model="formData.icon" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="formData.type != MenuEnum.BUTTON" label="路由路径" prop="paths">
|
||||
<div class="flex-1">
|
||||
<el-input v-model="formData.paths" placeholder="请输入路由路径" clearable />
|
||||
<div class="form-tips">
|
||||
访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type == MenuEnum.MENU"
|
||||
label="组件路径"
|
||||
prop="component"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<el-autocomplete
|
||||
class="w-full"
|
||||
v-model="formData.component"
|
||||
:fetch-suggestions="querySearch"
|
||||
clearable
|
||||
placeholder="请输入组件路径"
|
||||
/>
|
||||
<div class="form-tips">
|
||||
访问的组件路径，如：`user/setting`，默认在`views`目录下
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="选中菜单"
|
||||
prop="selected"
|
||||
v-if="formData.type == MenuEnum.MENU"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
v-model="formData.selected"
|
||||
placeholder="请输入路由路径"
|
||||
clearable
|
||||
/>
|
||||
<div class="form-tips">
|
||||
访问详情页面，编辑页面时，菜单高亮显示，如`/consumer/lists`
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type != MenuEnum.CATALOGUE"
|
||||
label="权限字符"
|
||||
prop="perms"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<el-input v-model="formData.perms" placeholder="请输入权限字符" clearable />
|
||||
<div class="form-tips">
|
||||
将作为server端API验权使用，如`auth.admin/user`，请谨慎修改
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.type == MenuEnum.MENU" label="路由参数" prop="params">
|
||||
<div>
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
v-model="formData.params"
|
||||
placeholder="请输入路由参数"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
访问路由的默认传递参数，如：`{"id": 1, "name":
|
||||
"admin"}`或`id=1&name=admin`
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type == MenuEnum.MENU"
|
||||
label="是否缓存"
|
||||
prop="is_cache"
|
||||
required
|
||||
>
|
||||
<div>
|
||||
<el-radio-group v-model="formData.is_cache">
|
||||
<el-radio :value="1">缓存</el-radio>
|
||||
<el-radio :value="0">不缓存</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">选择缓存则会被`keep-alive`缓存</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type != MenuEnum.BUTTON"
|
||||
label="是否显示"
|
||||
prop="is_show"
|
||||
required
|
||||
>
|
||||
<div>
|
||||
<el-radio-group v-model="formData.is_show">
|
||||
<el-radio :value="1">显示</el-radio>
|
||||
<el-radio :value="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">
|
||||
选择隐藏则路由将不会出现在侧边栏，但仍然可以访问
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type != MenuEnum.BUTTON"
|
||||
label="菜单状态"
|
||||
prop="is_disable"
|
||||
required
|
||||
>
|
||||
<div>
|
||||
<el-radio-group v-model="formData.is_disable">
|
||||
<el-radio :value="0">正常</el-radio>
|
||||
<el-radio :value="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">选择停用则路由将不会出现在侧边栏，也不能被访问</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
import { menuAdd, menuDetail, menuEdit, menuLists } from '@/api/perms/menu'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { MenuEnum } from '@/enums/appEnums'
|
||||
import { getModulesKey } from '@/router'
|
||||
import { arrayToTree, treeToArray } from '@/utils/util'
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑菜单' : '新增菜单'
|
||||
})
|
||||
|
||||
const componentsOptions = ref(getModulesKey())
|
||||
const querySearch = (queryString: string, cb: any) => {
|
||||
const results = queryString
|
||||
? componentsOptions.value.filter((item) =>
|
||||
item.toLowerCase().includes(queryString.toLowerCase())
|
||||
)
|
||||
: componentsOptions.value
|
||||
cb(results.map((item) => ({ value: item })))
|
||||
}
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
//父级id
|
||||
pid: 0,
|
||||
//类型
|
||||
type: MenuEnum.CATALOGUE,
|
||||
//图标
|
||||
icon: '',
|
||||
//名称
|
||||
name: '',
|
||||
//排序号
|
||||
sort: 0,
|
||||
// 路由路径
|
||||
paths: '',
|
||||
//权限链接
|
||||
perms: '',
|
||||
//前端组件
|
||||
component: '',
|
||||
//选中路径
|
||||
selected: '',
|
||||
//路由参数
|
||||
params: '',
|
||||
//是否缓存 0=否， 1=是
|
||||
is_cache: 1,
|
||||
//是否显示 0=否， 1=是
|
||||
is_show: 1,
|
||||
//是否禁用 0=否， 1=是
|
||||
is_disable: 0
|
||||
})
|
||||
|
||||
const formRules = {
|
||||
pid: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择父级菜单',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入菜单名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
paths: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入路由地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
component: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入组件地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
const menuOptions = ref<any[]>([])
|
||||
|
||||
const getMenu = async () => {
|
||||
const data: any = await menuLists({ page_type: 0 })
|
||||
const menu: any = { id: 0, name: '顶级', children: [] }
|
||||
menu.children = arrayToTree(
|
||||
treeToArray(data.lists).filter((item) => item.type != MenuEnum.BUTTON)
|
||||
)
|
||||
menuOptions.value.push(menu)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
mode.value == 'edit' ? await menuEdit(formData) : await menuAdd(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
const setFormData = (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await menuDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
getMenu()
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="menu-lists">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<div>
|
||||
<el-button v-perms="['auth.menu/add']" type="primary" @click="handleAdd()">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button @click="handleExpand"> 展开/折叠 </el-button>
|
||||
</div>
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
class="mt-4"
|
||||
size="large"
|
||||
v-loading="pager.loading"
|
||||
:data="pager.lists"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column
|
||||
label="菜单名称"
|
||||
prop="name"
|
||||
min-width="150"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="类型" prop="type" min-width="80">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.type == MenuEnum.CATALOGUE">目录</div>
|
||||
<div v-else-if="row.type == MenuEnum.MENU">菜单</div>
|
||||
<div v-else-if="row.type == MenuEnum.BUTTON">按钮</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="图标" prop="icon" min-width="80">
|
||||
<template #default="{ row }">
|
||||
<div class="flex">
|
||||
<icon :name="row.icon" :size="20" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="权限标识"
|
||||
prop="perms"
|
||||
min-width="150"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="状态" prop="is_disable" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.is_disable == 0">正常</el-tag>
|
||||
<el-tag v-else type="danger">停用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="100" />
|
||||
<el-table-column
|
||||
label="更新时间"
|
||||
prop="update_time"
|
||||
min-width="180"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="row.type !== MenuEnum.BUTTON"
|
||||
v-perms="['auth.menu/add']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleAdd(row.id)"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="['auth.menu/edit']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="['auth.menu/delete']"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleDelete(row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="permission-menu">
|
||||
import type { ElTable } from 'element-plus'
|
||||
|
||||
import { menuDelete, menuLists } from '@/api/perms/menu'
|
||||
import { MenuEnum } from '@/enums/appEnums'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import feedback from '@/utils/feedback'
|
||||
|
||||
import EditPopup from './edit.vue'
|
||||
|
||||
const tableRef = shallowRef<InstanceType<typeof ElTable>>()
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
let isExpand = false
|
||||
const showEdit = ref(false)
|
||||
const { pager, getLists } = usePaging({
|
||||
fetchFun: menuLists,
|
||||
params: {
|
||||
page_type: 0
|
||||
}
|
||||
})
|
||||
|
||||
const handleAdd = async (id?: number) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
if (id) {
|
||||
editRef.value?.setFormData({
|
||||
pid: id
|
||||
})
|
||||
}
|
||||
editRef.value?.open('add')
|
||||
}
|
||||
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit')
|
||||
editRef.value?.getDetail(data)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await menuDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
const handleExpand = () => {
|
||||
isExpand = !isExpand
|
||||
toggleExpand(pager.lists, isExpand)
|
||||
}
|
||||
|
||||
const toggleExpand = (children: any[], unfold = true) => {
|
||||
for (const key in children) {
|
||||
tableRef.value?.toggleRowExpansion(children[key], unfold)
|
||||
if (children[key].children) {
|
||||
toggleExpand(children[key].children!, unfold)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
title="分配权限"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:model="formData"
|
||||
label-width="60px"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-scrollbar class="h-[400px] sm:h-[600px]">
|
||||
<el-form-item label="权限" prop="menu_id">
|
||||
<div>
|
||||
<el-checkbox label="展开/折叠" @change="handleExpand" />
|
||||
<el-checkbox label="全选/不全选" @change="handleSelectAll" />
|
||||
<el-checkbox v-model="checkStrictly" label="父子联动" />
|
||||
<div>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="menuTree"
|
||||
:props="{
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}"
|
||||
:check-strictly="!checkStrictly"
|
||||
node-key="id"
|
||||
:default-expand-all="isExpand"
|
||||
show-checkbox
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { CheckboxValueType, ElTree, FormInstance } from 'element-plus'
|
||||
|
||||
import { menuAll } from '@/api/perms/menu'
|
||||
import { roleEdit } from '@/api/perms/role'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { treeToArray } from '@/utils/util'
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const treeRef = shallowRef<InstanceType<typeof ElTree>>()
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const isExpand = ref(false)
|
||||
const checkStrictly = ref(true)
|
||||
const loading = ref(false)
|
||||
const menuArray = ref<any[]>([])
|
||||
const menuTree = ref<any[]>([])
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
sort: 0,
|
||||
menu_id: [] as any[]
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: ['blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const getOptions = () => {
|
||||
loading.value = true
|
||||
menuAll().then((res: any) => {
|
||||
menuTree.value = res
|
||||
menuArray.value = treeToArray(res)
|
||||
nextTick(() => {
|
||||
setDeptAllCheckedKeys()
|
||||
})
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 获取所有选择的节点包括半选中节点
|
||||
const getDeptAllCheckedKeys = () => {
|
||||
const checkedKeys = treeRef.value?.getCheckedKeys()
|
||||
const halfCheckedKeys = treeRef.value?.getHalfCheckedKeys()!
|
||||
checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys)
|
||||
return checkedKeys
|
||||
}
|
||||
|
||||
const setDeptAllCheckedKeys = () => {
|
||||
formData.menu_id.forEach((v) => {
|
||||
nextTick(() => {
|
||||
treeRef.value?.setChecked(v, true, false)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleExpand = (check: CheckboxValueType) => {
|
||||
const treeList = menuTree.value
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
//@ts-ignore
|
||||
treeRef.value.store.nodesMap[treeList[i].id].expanded = check
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelectAll = (check: CheckboxValueType) => {
|
||||
if (check) {
|
||||
treeRef.value?.setCheckedKeys(menuArray.value.map((item) => item.id))
|
||||
} else {
|
||||
treeRef.value?.setCheckedKeys([])
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
formData.menu_id = getDeptAllCheckedKeys()!
|
||||
await roleEdit(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getOptions()
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
:title="popupTitle"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:model="formData"
|
||||
label-width="60px"
|
||||
>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
class="ls-input"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="desc">
|
||||
<el-input
|
||||
v-model="formData.desc"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||
placeholder="请输入备注"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
import { roleAdd, roleEdit } from '@/api/perms/role'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑角色' : '新增角色'
|
||||
})
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
sort: 0,
|
||||
menu_id: []
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: ['blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
mode.value == 'edit' ? await roleEdit(formData) : await roleAdd(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="role-lists">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<div>
|
||||
<el-button v-perms="['auth.role/add']" type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mt-4" v-loading="pager.loading">
|
||||
<div>
|
||||
<el-table :data="pager.lists" size="large">
|
||||
<el-table-column prop="id" label="ID" min-width="100" />
|
||||
<el-table-column prop="name" label="名称" min-width="150" />
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="备注"
|
||||
min-width="150"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="sort" label="排序" min-width="100" />
|
||||
<el-table-column prop="num" label="管理员人数" min-width="100" />
|
||||
<el-table-column prop="create_time" label="创建时间" min-width="180" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-perms="['auth.role/edit']"
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-perms="['auth.role/edit']"
|
||||
@click="handleAuth(row)"
|
||||
>
|
||||
分配权限
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="['auth.role/delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
<auth-popup v-if="showAuth" ref="authRef" @success="getLists" @close="showAuth = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="role">
|
||||
import { roleDelete, roleLists } from '@/api/perms/role'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import feedback from '@/utils/feedback'
|
||||
|
||||
import AuthPopup from './auth.vue'
|
||||
import EditPopup from './edit.vue'
|
||||
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
const authRef = shallowRef<InstanceType<typeof AuthPopup>>()
|
||||
const showEdit = ref(false)
|
||||
const showAuth = ref(false)
|
||||
const { pager, getLists } = usePaging({
|
||||
fetchFun: roleLists
|
||||
})
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add')
|
||||
}
|
||||
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit')
|
||||
editRef.value?.setFormData(data)
|
||||
}
|
||||
|
||||
const handleAuth = async (data: any) => {
|
||||
showAuth.value = true
|
||||
await nextTick()
|
||||
authRef.value?.open()
|
||||
authRef.value?.setFormData(data)
|
||||
}
|
||||
|
||||
// 删除角色
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await roleDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
Reference in New Issue
Block a user