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">
|
||||
// import { ContentWrap } from '@/components/ContentWrap'
|
||||
// import { useI18n } from '@/hooks/web/useI18n'
|
||||
// import { Table } from '@/components/Table'
|
||||
// import { getUserListApi } from '@/api/login'
|
||||
// import { UserType } from '@/api/login/types'
|
||||
// import { ref, h } from 'vue'
|
||||
// import { ElButton } from 'element-plus'
|
||||
// import { TableColumn, TableSlotDefault } from '@/types/table'
|
||||
|
||||
// interface Params {
|
||||
// pageIndex?: number
|
||||
// pageSize?: number
|
||||
// }
|
||||
|
||||
// const { t } = useI18n()
|
||||
|
||||
// const columns: TableColumn[] = [
|
||||
// {
|
||||
// field: 'index',
|
||||
// label: t('userDemo.index'),
|
||||
// type: 'index'
|
||||
// },
|
||||
// {
|
||||
// field: 'username',
|
||||
// label: t('userDemo.username')
|
||||
// },
|
||||
// {
|
||||
// field: 'password',
|
||||
// label: t('userDemo.password')
|
||||
// },
|
||||
// {
|
||||
// field: 'role',
|
||||
// label: t('userDemo.role')
|
||||
// },
|
||||
// {
|
||||
// field: 'remark',
|
||||
// label: t('userDemo.remark'),
|
||||
// formatter: (row: UserType) => {
|
||||
// return h(
|
||||
// 'span',
|
||||
// row.username === 'admin' ? t('userDemo.remarkMessage1') : t('userDemo.remarkMessage2')
|
||||
// )
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// field: 'action',
|
||||
// label: t('userDemo.action')
|
||||
// }
|
||||
// ]
|
||||
|
||||
// const loading = ref(true)
|
||||
|
||||
// let tableDataList = ref<UserType[]>([])
|
||||
|
||||
// const getTableList = async (params?: Params) => {
|
||||
// const res = await getUserListApi({
|
||||
// params: params || {
|
||||
// pageIndex: 1,
|
||||
// pageSize: 10
|
||||
// }
|
||||
// })
|
||||
// // .catch(() => {})
|
||||
// // .finally(() => {
|
||||
// // loading.value = false
|
||||
// // })
|
||||
// if (res) {
|
||||
// tableDataList.value = res.data.list
|
||||
// loading.value = false
|
||||
// }
|
||||
// }
|
||||
|
||||
// getTableList()
|
||||
|
||||
// const actionFn = (data: TableSlotDefault) => {
|
||||
// console.log(data)
|
||||
// }
|
||||
<script setup lang="tsx">
|
||||
import { reactive, ref, unref } from 'vue'
|
||||
import { getRoleListApi } from '@/api/role'
|
||||
import { useTable } from '@/hooks/web/useTable'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { Table, TableColumn } from '@/components/Table'
|
||||
import { ElButton, ElTag } from 'element-plus'
|
||||
import { Search } from '@/components/Search'
|
||||
import { FormSchema } from '@/components/Form'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import Write from './components/Write.vue'
|
||||
import { Dialog } from '@/components/Dialog'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { tableRegister, tableState, tableMethods } = useTable({
|
||||
fetchDataApi: async () => {
|
||||
const res = await getRoleListApi()
|
||||
return {
|
||||
list: res.data.list || [],
|
||||
total: res.data.total
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const { dataList, loading, total } = tableState
|
||||
const { getList } = tableMethods
|
||||
|
||||
const tableColumns = reactive<TableColumn[]>([
|
||||
{
|
||||
field: 'index',
|
||||
label: t('userDemo.index'),
|
||||
type: 'index'
|
||||
},
|
||||
{
|
||||
field: 'roleName',
|
||||
label: t('role.roleName')
|
||||
},
|
||||
{
|
||||
field: 'role',
|
||||
label: t('role.role')
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: t('menu.status'),
|
||||
slots: {
|
||||
default: (data: any) => {
|
||||
return (
|
||||
<>
|
||||
<ElTag type={data[0].row.status === 0 ? 'danger' : 'success'}>
|
||||
{data[0].row.status === 1 ? t('userDemo.enable') : t('userDemo.disable')}
|
||||
</ElTag>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
label: t('tableDemo.displayTime')
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
label: t('userDemo.remark')
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
label: t('userDemo.action'),
|
||||
width: 240,
|
||||
slots: {
|
||||
default: (data: any) => {
|
||||
const row = data[0].row
|
||||
return (
|
||||
<>
|
||||
<ElButton type="primary" onClick={() => action(row, 'edit')}>
|
||||
{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>
|
||||
|
||||
<template>
|
||||
<div>role</div>
|
||||
<!-- <ContentWrap :title="t('userDemo.title')" :message="t('userDemo.message')">
|
||||
<Table :columns="columns" :data="tableDataList" :loading="loading" :selection="false">
|
||||
<template #action="data">
|
||||
<ElButton type="primary" @click="actionFn(data as TableSlotDefault)">
|
||||
{{ t('tableDemo.action') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap> -->
|
||||
<ContentWrap>
|
||||
<Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
|
||||
<div class="mb-10px">
|
||||
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
|
||||
</div>
|
||||
<Table
|
||||
:columns="tableColumns"
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
: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>
|
||||
|
||||
@ -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