remove vue
This commit is contained in:
JaguarJack
BIN
modules/Permissions/views/.DS_Store
vendored
BIN
modules/Permissions/views/.DS_Store
vendored
Binary file not shown.
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
||||
<el-form-item label="父级部门" prop="parent_id">
|
||||
<el-cascader :options="departments" name="parent_id" v-model="formData.parent_id" clearable :props="{ value: 'id', label: 'department_name', checkStrictly: true }" class="w-full" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="department_name" :rules="[{ required: true, message: '部门名称必须填写' }]">
|
||||
<el-input v-model="formData.department_name" name="department_name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门联系人" prop="principal">
|
||||
<el-input v-model="formData.principal" name="principal" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="formData.mobile" name="mobile" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" name="email" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" name="sort" :min="1" />
|
||||
</el-form-item>
|
||||
<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 http from '/admin/support/http'
|
||||
import { onMounted, ref, unref } from 'vue'
|
||||
|
||||
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
|
||||
|
||||
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]
|
||||
}
|
||||
|
||||
if (props.primary) {
|
||||
const { afterShow } = useShow(props.api, props.primary, formData)
|
||||
afterShow.value = formData => {
|
||||
const data = unref(formData)
|
||||
data.parent_id = data.parent_id ? [data.parent_id] : 0
|
||||
|
||||
if (!data.data_range) {
|
||||
data.data_range = null
|
||||
}
|
||||
|
||||
formData.value = data
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const departments = ref()
|
||||
onMounted(() => {
|
||||
http.get(props.api).then(r => {
|
||||
departments.value = r.data.data
|
||||
})
|
||||
|
||||
close(() => {
|
||||
emit('close')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="部门名称" prop="department_name">
|
||||
<el-input v-model="query.department_name" name="department_name" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<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="department_name" label="部门名称" />
|
||||
<el-table-column prop="sort" label="排序" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.status" :id="scope.row.id" :api="api" @refresh="search" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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 } from 'vue'
|
||||
import Create from './form/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/departments'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api, false)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
||||
<el-form-item label="岗位名称" prop="job_name" :rules="[{ required: true, message: '岗位名称必须填写' }]">
|
||||
<el-input v-model="formData.job_name" name="job_name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码" prop="coding">
|
||||
<el-input v-model="formData.coding" name="coding" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio v-for="item in options" :key="item.value" :value="item.value" name="status">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</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="岗位描述" prop="description">
|
||||
<el-input v-model="formData.description" name="description" clearable type="textarea" />
|
||||
</el-form-item>
|
||||
<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 } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
primary: [Number, String],
|
||||
api: String,
|
||||
})
|
||||
|
||||
const { formData, form, loading, submitForm, close } = useCreate(props.api, props.primary)
|
||||
|
||||
formData.value.status = 1
|
||||
formData.value.sort = 1
|
||||
|
||||
if (props.primary) {
|
||||
useShow(props.api, props.primary, formData)
|
||||
}
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
onMounted(() => {
|
||||
close(() => emit('close'))
|
||||
})
|
||||
|
||||
const options = [
|
||||
{ label: '正常', value: 1 },
|
||||
{ label: '禁用', value: 2 },
|
||||
]
|
||||
</script>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="岗位名称" prop="job_name">
|
||||
<el-input v-model="query.job_name" name="job_name" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<Operate :show="open" />
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading">
|
||||
<el-table-column prop="job_name" label="岗位名称" />
|
||||
<el-table-column prop="coding" label="岗位编码" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.status" :id="scope.row.id" :api="api" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" />
|
||||
<el-table-column prop="description" 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>
|
||||
<Paginate />
|
||||
</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 } from 'vue'
|
||||
import Create from './form/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/jobs'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
@@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="85px" 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"
|
||||
:value="item.value"
|
||||
name="type"
|
||||
>{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="permission_name" :rules="[{ required: true, message: '菜单名称必须填写' }]">
|
||||
<el-input v-model="formData.permission_name" name="permission_name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属模块" prop="module" :rules="[{ required: true, message: '所属模块必须填写' }]" v-if="!isAction">
|
||||
<Select v-model="formData.module" api="modules" allow-create @clear="clearModule" />
|
||||
</el-form-item>
|
||||
<el-form-item label="路由Path" prop="route" :rules="[{ required: true, message: '路由Path必须填写' }]" v-if="!isAction">
|
||||
<el-input v-model="formData.route" name="route" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="Redirect" prop="redirect" v-if="!isAction">
|
||||
<el-input v-model="formData.redirect" name="redirect" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" name="sort" :min="1" />
|
||||
</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" :rules="[{ required: true, message: '权限标识必须填写' }]" v-if="!isTop">
|
||||
<el-input v-model="formData.permission_mark" name="permission_mark" clearable v-if="isAction" />
|
||||
<Select v-model="formData.permission_mark" allow-create placeholder="请选择" api="controllers" :query="{ module: formData.module }" v-else />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单Icon" prop="icon" v-if="!isAction">
|
||||
<el-popover placement="right" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<el-input v-model="formData.icon" name="icon" clearable />
|
||||
</template>
|
||||
<div>
|
||||
<Icons v-model="formData.icon" @close="closeSelectIcon" />
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属组件" prop="component" v-if="!isAction">
|
||||
<Select v-model="formData.component" placeholder="请选择" allow-create api="components" :query="{ module: formData.module }" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Hidden" prop="hidden" v-if="!isAction">
|
||||
<el-radio-group v-model="formData.hidden">
|
||||
<el-radio
|
||||
v-for="item in [
|
||||
{ label: '显示', value: 1 },
|
||||
{ label: '隐藏', value: 2 },
|
||||
]"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
name="hidden"
|
||||
>{{ item.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Keepalive" prop="keepalive" v-if="!isAction">
|
||||
<el-radio-group v-model="formData.keepalive">
|
||||
<el-radio
|
||||
v-for="item in [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 2 },
|
||||
]"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
name="keepalive"
|
||||
>{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="激活菜单" prop="active_menu" v-if="isMenu">
|
||||
<div class="w-full flex flex-row">
|
||||
<el-input v-model="formData.active_menu" name="active_menu" clearable class="w-3/4" />
|
||||
<el-tooltip effect="dark" :content="activeMenuIntro" raw-content placement="top">
|
||||
<div class="text-red-500 cursor-pointer w-1/4 ml-2 justify-center flex">说明</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</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 { useOpen } from '/admin/composables/curd/useOpen'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import http from '/admin/support/http'
|
||||
import { MenuType } from '/admin/enum/app'
|
||||
|
||||
const props = defineProps({
|
||||
primary: [String,Number],
|
||||
api: String,
|
||||
})
|
||||
|
||||
const activeMenuIntro =
|
||||
'<div>如果是访问内页的菜单路由，例如创建文章 create/post, 虽然它隶属于文章列表，但实际上并不会嵌套在文章列表路由里</div><div>而是单独的一个路由，并且是不显示在左侧菜单的。所以在访问它的时候，需要左侧菜单高亮，则需要设置该参数</div>'
|
||||
|
||||
const { formData, form, loading, submitForm, close, beforeCreate, beforeUpdate } = useCreate(props.api, props.primary)
|
||||
|
||||
// 选择 icon
|
||||
const { open, visible } = useOpen()
|
||||
// 关闭选择 icon
|
||||
const closeSelectIcon = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 默认值
|
||||
const defaultSort = 1
|
||||
const defaultKeepalive = 1
|
||||
const defaultHidden = 1
|
||||
|
||||
// 初始化
|
||||
formData.value.sort = defaultSort
|
||||
formData.value.keepalive = defaultKeepalive
|
||||
formData.value.type = MenuType.TOP_TYPE
|
||||
formData.value.hidden = defaultHidden
|
||||
|
||||
// 默认目录
|
||||
const isTop = ref<boolean>(true)
|
||||
const isMenu = ref<boolean>(false)
|
||||
const isAction = ref<boolean>(false)
|
||||
|
||||
// 回显示表单
|
||||
if (props.primary) {
|
||||
const { afterShow } = useShow(props.api, props.primary, formData)
|
||||
|
||||
afterShow.value = formData => {
|
||||
if (formData.value.permission_mark.indexOf('@') !== -1) {
|
||||
formData.value.permission_mark = formData.value.permission_mark.split('@')[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
const permissions = ref()
|
||||
onMounted(() => {
|
||||
http.get(props.api).then(r => {
|
||||
permissions.value = r.data.data
|
||||
})
|
||||
|
||||
close(() => emit('close'))
|
||||
|
||||
// 监听 form data
|
||||
watch(
|
||||
formData,
|
||||
() => {
|
||||
const type: number = formData.value.type
|
||||
if (type === MenuType.TOP_TYPE) {
|
||||
isTop.value = true
|
||||
isMenu.value = isAction.value = false
|
||||
} else if (type === MenuType.PAGE_TYPE) {
|
||||
isMenu.value = true
|
||||
isTop.value = isAction.value = false
|
||||
} else {
|
||||
isAction.value = true
|
||||
isTop.value = isMenu.value = false
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
})
|
||||
|
||||
// 菜单是菜单类型的时，清除模块，那么权限标识&组件也需要清除
|
||||
const clearModule = () => {
|
||||
if (formData.value.type === MenuType.TOP_TYPE || formData.value.type === MenuType.PAGE_TYPE) {
|
||||
formData.value.component = null
|
||||
}
|
||||
if (formData.value.type === MenuType.PAGE_TYPE) {
|
||||
formData.value.permission_mark = null
|
||||
}
|
||||
}
|
||||
|
||||
// 创建前的钩子
|
||||
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) => {
|
||||
if (typeof parentId === 'number') {
|
||||
return parentId
|
||||
}
|
||||
|
||||
return typeof parentId === 'undefined' ? 0 : parentId[parentId.length - 1]
|
||||
}
|
||||
</script>
|
||||
@@ -1,90 +0,0 @@
|
||||
<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="table-default">
|
||||
<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="权限标识" width="330">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.actions.length" class="flex grid gap-1 grid-cols-4">
|
||||
<el-tag v-for="action in scope.row.actions" class="cursor-pointer min-w-fit" @click="open(action.id)" closable @close="destroy(api, action.id)">{{ action.permission_name }}</el-tag>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-popconfirm v-if="scope.row.type === MenuType.PAGE_TYPE" confirm-button-text="确认" title="添加基础actions" @confirm="actionGenerate(scope.row.id)" placement="top">
|
||||
<template #reference>
|
||||
<el-tag class="cursor-pointer w-8">
|
||||
<Icon name="cog-6-tooth" class="animate-spin w-5 h-5" v-if="generateId === scope.row.id" />
|
||||
<Icon name="plus" className="w-4 h-4" v-else />
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hidden" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<Status v-model="scope.row.hidden" :id="scope.row.id" :api="api" @refresh="search" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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, ref } from 'vue'
|
||||
import Create from './form/create.vue'
|
||||
import { useGetList } from '/admin/composables/curd/useGetList'
|
||||
import { useDestroy } from '/admin/composables/curd/useDestroy'
|
||||
import { useOpen } from '/admin/composables/curd/useOpen'
|
||||
import { MenuType } from '/admin/enum/app'
|
||||
import http from '../../../../resources/admin/support/http'
|
||||
|
||||
const api = 'permissions/permissions'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api, false)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
deleted(reset)
|
||||
})
|
||||
|
||||
const actionLoading = ref<boolean>(false)
|
||||
const generateId = ref<number>(0)
|
||||
const actionGenerate = async (id: number) => {
|
||||
generateId.value = id
|
||||
http
|
||||
.post(api, { parent_id: id, actions: true })
|
||||
.then(r => {
|
||||
search()
|
||||
generateId.value = 0
|
||||
})
|
||||
.catch(e => {
|
||||
generateId.value = 0
|
||||
catchtable.value.reset()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="formData" label-width="120px" ref="form" v-loading="loading" class="pr-6">
|
||||
<el-form-item label="上级角色" prop="parent_id" v-if="!primary">
|
||||
<el-cascader
|
||||
:options="roles"
|
||||
name="parent_id"
|
||||
v-model="formData.parent_id"
|
||||
clearable
|
||||
check-strictly
|
||||
class="w-full"
|
||||
@change="getPermissions"
|
||||
:props="{ value: 'id', label: 'role_name', checkStrictly: true }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="角色名称"
|
||||
prop="role_name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '角色名称必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.role_name" name="role_name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="角色标识"
|
||||
prop="identify"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '角色标识必须填写',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="formData.identify" name="identify" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色描述" prop="description">
|
||||
<el-input v-model="formData.description" name="description" clearable type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据权限" prop="data_range">
|
||||
<Select v-model="formData.data_range" name="data_range" clearable api="dataRange" class="w-full" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="自定义权限"
|
||||
prop="departments"
|
||||
v-if="showDepartments"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '自定义权限必须选择',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-tree-select
|
||||
v-model="formData.departments"
|
||||
value-key="id"
|
||||
class="w-full"
|
||||
:data="departments"
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
multiple
|
||||
:props="{ value: 'id', label: 'department_name' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色权限" prop="permissions">
|
||||
<div class="h-40 overflow-auto w-full border border-gray-300 rounded pt-2 pl-2">
|
||||
<el-tree
|
||||
ref="permissionTree"
|
||||
v-model="formData.permissions"
|
||||
:data="permissions"
|
||||
node-key="id"
|
||||
class="w-full"
|
||||
:props="{ label: 'permission_name', value: 'id' }"
|
||||
show-checkbox
|
||||
:default-expand-all="false"
|
||||
@check="selectPermissions"
|
||||
:empty-text="permissionLoadingText"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<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 { nextTick, onMounted, ref, unref, watch } from 'vue'
|
||||
import http from '/admin/support/http'
|
||||
|
||||
const props = defineProps({
|
||||
primary: String | Number,
|
||||
api: String,
|
||||
hasPermissions: Array<Object>,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const { formData, form, loading, submitForm, close, beforeCreate, beforeUpdate } = useCreate(props.api, props.primary)
|
||||
|
||||
if (props.primary) {
|
||||
const { afterShow } = useShow(props.api, props.primary, formData)
|
||||
// 更新角色值
|
||||
afterShow.value = formData => {
|
||||
const data = unref(formData)
|
||||
data.parent_id = data.parent_id ? [data.parent_id] : 0
|
||||
|
||||
if (!data.data_range) {
|
||||
data.data_range = null
|
||||
}
|
||||
|
||||
formData.value = data
|
||||
// 这里需要获取角色的上级的权限以限制可用权限范围
|
||||
getPermissions(data.parent_id)
|
||||
}
|
||||
}
|
||||
|
||||
const roles = ref()
|
||||
const permissions = ref()
|
||||
// 权限树对象
|
||||
const permissionTree = ref()
|
||||
// 部门
|
||||
const departments = ref()
|
||||
const showDepartments = ref<boolean>(false)
|
||||
|
||||
const permissionLoadingText = ref<string>('加载中...')
|
||||
|
||||
// 获取权限
|
||||
const getPermissions = async (value: number = 0) => {
|
||||
if (value) {
|
||||
// 获取角色权限
|
||||
http.get('permissions/roles/' + getParent(value), { from: 'parent_role' }).then(r => {
|
||||
permissions.value = r.data.data.permissions
|
||||
setCheckedPermissions()
|
||||
})
|
||||
} else {
|
||||
http.get('permissions/permissions', { from: 'role' }).then(r => {
|
||||
permissions.value = r.data.data
|
||||
setCheckedPermissions()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 设置已选权限
|
||||
const setCheckedPermissions = () => {
|
||||
nextTick(() => {
|
||||
props.hasPermissions.forEach(p => {
|
||||
permissionTree.value.setChecked(p.id, true, false)
|
||||
})
|
||||
})
|
||||
|
||||
if (!permissions.value.length) {
|
||||
permissionLoadingText.value = '暂无数据'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取角色信息
|
||||
const getRoles = () => {
|
||||
http.get(props.api, { id: props.primary ? props.primary : '' }).then(r => {
|
||||
roles.value = r.data.data
|
||||
})
|
||||
}
|
||||
|
||||
const getDepartments = () => {
|
||||
http.get('permissions/departments').then(r => {
|
||||
departments.value = r.data.data
|
||||
})
|
||||
}
|
||||
|
||||
// 新增默认获取全部权限
|
||||
if (!props.primary) {
|
||||
getPermissions()
|
||||
}
|
||||
|
||||
// 页面挂载完成后
|
||||
onMounted(() => {
|
||||
getRoles()
|
||||
getDepartments()
|
||||
close(() => emit('close'))
|
||||
watch(
|
||||
formData,
|
||||
function (value) {
|
||||
// 如果数据权限是自定义数据
|
||||
showDepartments.value = value.data_range === 2
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
})
|
||||
|
||||
const selectPermissions = (checkedNodes, checkedKeys) => {
|
||||
formData.value.permissions = checkedKeys.checkedKeys.concat(checkedKeys.halfCheckedKeys).sort()
|
||||
}
|
||||
|
||||
// 创建前的钩子
|
||||
beforeCreate.value = () => {
|
||||
formData.value.parent_id = getParent(formData.value.parent_id)
|
||||
}
|
||||
|
||||
// 更新前的钩子
|
||||
beforeUpdate.value = () => {
|
||||
const permissionIds = []
|
||||
formData.value.permissions.forEach(item => {
|
||||
permissionIds.push(item)
|
||||
})
|
||||
|
||||
formData.value.permissions = permissionIds
|
||||
formData.value.parent_id = getParent(formData.value.parent_id)
|
||||
}
|
||||
|
||||
const getParent = (parentId: any) => {
|
||||
return typeof parentId === 'undefined' ? 0 : parentId[parentId.length - 1]
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.el-tree .el-tree__empty-block .el-tree__empty-text) {
|
||||
@apply left-10 top-4;
|
||||
}
|
||||
:deep(.el-tree-node .is-expanded .el-tree-node__children) {
|
||||
@apply flex flex-wrap pl-9;
|
||||
}
|
||||
:deep(.el-tree-node .is-expanded .el-tree-node__children .el-tree-node__content) {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :search="search" :reset="reset">
|
||||
<template v-slot:body>
|
||||
<el-form-item label="角色名称" prop="role_name">
|
||||
<el-input v-model="query.role_name" name="role_name" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Search>
|
||||
<div class="table-default">
|
||||
<div class="pt-5 pl-2">
|
||||
<Add @click="openRoleForm(null, [])" />
|
||||
</div>
|
||||
<el-table :data="tableData" class="mt-3" v-loading="loading" row-key="id" default-expand-all :tree-props="{ children: 'children' }">
|
||||
<el-table-column prop="role_name" label="角色名称" />
|
||||
<el-table-column prop="identify" label="角色标识" />
|
||||
<el-table-column prop="description" label="角色描述" />
|
||||
<el-table-column prop="created_at" label="创建时间" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<Update @click="openRoleForm(scope.row.id, scope.row.permissions)" />
|
||||
<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" :has-permissions="rolePermissions" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import Create from './form/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/roles'
|
||||
|
||||
const { data, query, search, reset, loading } = useGetList(api, false)
|
||||
const { destroy, deleted } = useDestroy()
|
||||
const { open, close, title, visible, id } = useOpen()
|
||||
|
||||
const tableData = computed(() => data.value?.data)
|
||||
|
||||
const rolePermissions = ref<Array<number>>([])
|
||||
const openRoleForm = (id, permissions) => {
|
||||
rolePermissions.value = permissions
|
||||
open(id)
|
||||
}
|
||||
onMounted(() => {
|
||||
search()
|
||||
|
||||
deleted(reset)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user