feat: 角色管理
kailong321200875
2 years ago
parent
c72b3a33aa
commit
47016a535f
@ -0,0 +1,5 @@
|
|||||||
|
import request from '@/config/axios'
|
||||||
|
|
||||||
|
export const getRoleListApi = () => {
|
||||||
|
return request.get({ url: '/role/table' })
|
||||||
|
}
|
||||||
@ -1,91 +1,166 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="tsx">
|
||||||
// import { ContentWrap } from '@/components/ContentWrap'
|
import { reactive, ref, unref } from 'vue'
|
||||||
// import { useI18n } from '@/hooks/web/useI18n'
|
import { getRoleListApi } from '@/api/role'
|
||||||
// import { Table } from '@/components/Table'
|
import { useTable } from '@/hooks/web/useTable'
|
||||||
// import { getUserListApi } from '@/api/login'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
// import { UserType } from '@/api/login/types'
|
import { Table, TableColumn } from '@/components/Table'
|
||||||
// import { ref, h } from 'vue'
|
import { ElButton, ElTag } from 'element-plus'
|
||||||
// import { ElButton } from 'element-plus'
|
import { Search } from '@/components/Search'
|
||||||
// import { TableColumn, TableSlotDefault } from '@/types/table'
|
import { FormSchema } from '@/components/Form'
|
||||||
|
import { ContentWrap } from '@/components/ContentWrap'
|
||||||
// interface Params {
|
import Write from './components/Write.vue'
|
||||||
// pageIndex?: number
|
import { Dialog } from '@/components/Dialog'
|
||||||
// pageSize?: number
|
|
||||||
// }
|
const { t } = useI18n()
|
||||||
|
|
||||||
// const { t } = useI18n()
|
const { tableRegister, tableState, tableMethods } = useTable({
|
||||||
|
fetchDataApi: async () => {
|
||||||
// const columns: TableColumn[] = [
|
const res = await getRoleListApi()
|
||||||
// {
|
return {
|
||||||
// field: 'index',
|
list: res.data.list || [],
|
||||||
// label: t('userDemo.index'),
|
total: res.data.total
|
||||||
// type: 'index'
|
}
|
||||||
// },
|
}
|
||||||
// {
|
})
|
||||||
// field: 'username',
|
|
||||||
// label: t('userDemo.username')
|
const { dataList, loading, total } = tableState
|
||||||
// },
|
const { getList } = tableMethods
|
||||||
// {
|
|
||||||
// field: 'password',
|
const tableColumns = reactive<TableColumn[]>([
|
||||||
// label: t('userDemo.password')
|
{
|
||||||
// },
|
field: 'index',
|
||||||
// {
|
label: t('userDemo.index'),
|
||||||
// field: 'role',
|
type: 'index'
|
||||||
// label: t('userDemo.role')
|
},
|
||||||
// },
|
{
|
||||||
// {
|
field: 'roleName',
|
||||||
// field: 'remark',
|
label: t('role.roleName')
|
||||||
// label: t('userDemo.remark'),
|
},
|
||||||
// formatter: (row: UserType) => {
|
{
|
||||||
// return h(
|
field: 'role',
|
||||||
// 'span',
|
label: t('role.role')
|
||||||
// row.username === 'admin' ? t('userDemo.remarkMessage1') : t('userDemo.remarkMessage2')
|
},
|
||||||
// )
|
{
|
||||||
// }
|
field: 'status',
|
||||||
// },
|
label: t('menu.status'),
|
||||||
// {
|
slots: {
|
||||||
// field: 'action',
|
default: (data: any) => {
|
||||||
// label: t('userDemo.action')
|
return (
|
||||||
// }
|
<>
|
||||||
// ]
|
<ElTag type={data[0].row.status === 0 ? 'danger' : 'success'}>
|
||||||
|
{data[0].row.status === 1 ? t('userDemo.enable') : t('userDemo.disable')}
|
||||||
// const loading = ref(true)
|
</ElTag>
|
||||||
|
</>
|
||||||
// let tableDataList = ref<UserType[]>([])
|
)
|
||||||
|
}
|
||||||
// const getTableList = async (params?: Params) => {
|
}
|
||||||
// const res = await getUserListApi({
|
},
|
||||||
// params: params || {
|
{
|
||||||
// pageIndex: 1,
|
field: 'createTime',
|
||||||
// pageSize: 10
|
label: t('tableDemo.displayTime')
|
||||||
// }
|
},
|
||||||
// })
|
{
|
||||||
// // .catch(() => {})
|
field: 'remark',
|
||||||
// // .finally(() => {
|
label: t('userDemo.remark')
|
||||||
// // loading.value = false
|
},
|
||||||
// // })
|
{
|
||||||
// if (res) {
|
field: 'action',
|
||||||
// tableDataList.value = res.data.list
|
label: t('userDemo.action'),
|
||||||
// loading.value = false
|
width: 240,
|
||||||
// }
|
slots: {
|
||||||
// }
|
default: (data: any) => {
|
||||||
|
const row = data[0].row
|
||||||
// getTableList()
|
return (
|
||||||
|
<>
|
||||||
// const actionFn = (data: TableSlotDefault) => {
|
<ElButton type="primary" onClick={() => action(row, 'edit')}>
|
||||||
// console.log(data)
|
{t('exampleDemo.edit')}
|
||||||
// }
|
</ElButton>
|
||||||
|
<ElButton type="danger">{t('exampleDemo.del')}</ElButton>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const searchSchema = reactive<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'roleName',
|
||||||
|
label: t('role.roleName'),
|
||||||
|
component: 'Input'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const searchParams = ref({})
|
||||||
|
const setSearchParams = (data: any) => {
|
||||||
|
searchParams.value = data
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const dialogTitle = ref('')
|
||||||
|
|
||||||
|
const currentRow = ref()
|
||||||
|
const actionType = ref('')
|
||||||
|
|
||||||
|
const writeRef = ref<ComponentRef<typeof Write>>()
|
||||||
|
|
||||||
|
const saveLoading = ref(false)
|
||||||
|
|
||||||
|
const action = (row: any, type: string) => {
|
||||||
|
dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail')
|
||||||
|
actionType.value = type
|
||||||
|
currentRow.value = row
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const AddAction = () => {
|
||||||
|
dialogTitle.value = t('exampleDemo.add')
|
||||||
|
currentRow.value = undefined
|
||||||
|
dialogVisible.value = true
|
||||||
|
actionType.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const save = async () => {
|
||||||
|
const write = unref(writeRef)
|
||||||
|
const formData = await write?.submit()
|
||||||
|
if (formData) {
|
||||||
|
saveLoading.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
saveLoading.value = false
|
||||||
|
dialogVisible.value = false
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>role</div>
|
<ContentWrap>
|
||||||
<!-- <ContentWrap :title="t('userDemo.title')" :message="t('userDemo.message')">
|
<Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
|
||||||
<Table :columns="columns" :data="tableDataList" :loading="loading" :selection="false">
|
<div class="mb-10px">
|
||||||
<template #action="data">
|
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
|
||||||
<ElButton type="primary" @click="actionFn(data as TableSlotDefault)">
|
</div>
|
||||||
{{ t('tableDemo.action') }}
|
<Table
|
||||||
</ElButton>
|
:columns="tableColumns"
|
||||||
</template>
|
default-expand-all
|
||||||
</Table>
|
node-key="id"
|
||||||
</ContentWrap> -->
|
:data="dataList"
|
||||||
|
:loading="loading"
|
||||||
|
:pagination="{
|
||||||
|
total
|
||||||
|
}"
|
||||||
|
@register="tableRegister"
|
||||||
|
/>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||||
|
<Write v-if="actionType !== 'detail'" ref="writeRef" :current-row="currentRow" />
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
|
||||||
|
{{ t('exampleDemo.save') }}
|
||||||
|
</ElButton>
|
||||||
|
<ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -0,0 +1,160 @@
|
|||||||
|
<script setup lang="tsx">
|
||||||
|
import { Form, FormSchema } from '@/components/Form'
|
||||||
|
import { useForm } from '@/hooks/web/useForm'
|
||||||
|
import { PropType, reactive, watch, ref, unref } from 'vue'
|
||||||
|
import { useValidator } from '@/hooks/web/useValidator'
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { ElTree, ElCheckboxGroup, ElCheckbox } from 'element-plus'
|
||||||
|
import { getMenuListApi } from '@/api/menu'
|
||||||
|
import { filter } from '@/utils/tree'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const { required } = useValidator()
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
currentRow: {
|
||||||
|
type: Object as PropType<any>,
|
||||||
|
default: () => null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const treeRef = ref<typeof ElTree>()
|
||||||
|
|
||||||
|
const formSchema = ref<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'roleName',
|
||||||
|
label: t('role.roleName'),
|
||||||
|
component: 'Input'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'role',
|
||||||
|
label: t('role.role'),
|
||||||
|
component: 'Input'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
label: t('menu.status'),
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: t('userDemo.disable'),
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('userDemo.enable'),
|
||||||
|
value: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'menu',
|
||||||
|
label: t('role.menu'),
|
||||||
|
colProps: {
|
||||||
|
span: 24
|
||||||
|
},
|
||||||
|
formItemProps: {
|
||||||
|
slots: {
|
||||||
|
default: (formData: any) => {
|
||||||
|
console.log(formData)
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<ElTree
|
||||||
|
ref={treeRef}
|
||||||
|
show-checkbox
|
||||||
|
node-key="id"
|
||||||
|
highlight-current
|
||||||
|
data={treeData.value}
|
||||||
|
onNode-click={nodeClick}
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
default: (data) => {
|
||||||
|
return <span>{data.data.meta.title}</span>
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
</ElTree>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
{unref(currentTreeData) && unref(currentTreeData)?.meta?.permission ? (
|
||||||
|
<ElCheckboxGroup v-model={unref(currentTreeData).meta.currentPermission}>
|
||||||
|
{unref(currentTreeData)?.meta?.permission.map((v: string) => {
|
||||||
|
return <ElCheckbox label={v} />
|
||||||
|
})}
|
||||||
|
</ElCheckboxGroup>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentTreeData = ref()
|
||||||
|
const nodeClick = (treeData: any) => {
|
||||||
|
currentTreeData.value = treeData
|
||||||
|
}
|
||||||
|
|
||||||
|
const rules = reactive({
|
||||||
|
roleName: [required()],
|
||||||
|
role: [required()],
|
||||||
|
status: [required()]
|
||||||
|
})
|
||||||
|
|
||||||
|
const { formRegister, formMethods } = useForm()
|
||||||
|
const { setValues, getFormData, getElFormExpose } = formMethods
|
||||||
|
|
||||||
|
const treeData = ref([])
|
||||||
|
const getMenuList = async () => {
|
||||||
|
const res = await getMenuListApi()
|
||||||
|
if (res) {
|
||||||
|
treeData.value = res.data.list
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getMenuList()
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
const elForm = await getElFormExpose()
|
||||||
|
const valid = await elForm?.validate().catch((err) => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
if (valid) {
|
||||||
|
const formData = await getFormData()
|
||||||
|
const checkedKeys = [
|
||||||
|
...(unref(treeRef)?.getCheckedKeys() || []),
|
||||||
|
...(unref(treeRef)?.getHalfCheckedKeys() || [])
|
||||||
|
]
|
||||||
|
const data = filter(unref(treeData), (item: any) => {
|
||||||
|
return checkedKeys.includes(item.id)
|
||||||
|
})
|
||||||
|
formData.menu = data || []
|
||||||
|
return formData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.currentRow,
|
||||||
|
(currentRow) => {
|
||||||
|
if (!currentRow) return
|
||||||
|
setValues(currentRow)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
submit
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Form :rules="rules" @register="formRegister" :schema="formSchema" />
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue