sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色、机构功能完善

Browse Source
This commit is contained in:
高云鹏 2024-06-26 16:47:56 +08:00
parent 6d0796ae34
commit 27cf49e559
5 changed files with 230 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
ui/dasadmin/src/views/backend/InstitutionalManagement/InstitutionalManagement.vue
View File

@ -27,6 +27,16 @@
<el-select v-if="item.prop === 'city'" v-model="formModel[item.prop]" :placeholder="item.placeholder">
<el-option v-for="opt in cityOptions" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
</el-select>
<el-tree-select
v-if="item.prop === 'parentOrgId'"
v-model="formModel[item.prop]"
:data="treeData"
lazy
:load="loadSelectTreeData"
check-strictly
:props="treeSelectReplaceProps"
:placeholder="item.placeholder"
></el-tree-select>
</template>
</el-form-item>
</template>
@ -42,13 +52,21 @@
<el-input v-model="searchInputTreeValue" :placeholder="treeSearchInputPlaceholder" class="searchInput"></el-input>
</el-header>
<el-main class="treeMain">
<el-tree :data="treeData" lazy node-key="id" :load="loadTreeData" :props="treeReplaceProps" @node-click="treeNodeClick"></el-tree>
<el-tree
ref="treeRef"
:data="treeData"
lazy
:load="loadTreeData"
node-key="id"
:props="treeReplaceProps"
@node-click="treeNodeClick"
></el-tree>
</el-main>
</el-aside>
<el-container>
<el-header class="defaultHeader">
<div class="searchPart">
<el-input v-model:value="searchTableInput" class="searchInput"></el-input>
<el-input v-model="searchTableInput" class="searchInput"></el-input>
<el-button @click="searchTable" type="primary" :icon="Search" class="defaultBtn">{{ t('management.search') }}</el-button>
</div>
<el-button type="primary" :icon="Plus" class="defaultBtn" @click="addInstitutional">{{ t('management.add') }}</el-button>
@ -77,6 +95,15 @@
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="currentPageSize"
:total="pageTotal"
:page-sizes="pagePagination"
background
:pager-count="7"
layout="prev, pager, next, jumper,sizes,total"
></el-pagination>
</el-main>
</el-container>
</el-container>
@ -84,7 +111,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onMounted, ref, computed } from 'vue'
import {
ElContainer,
ElAside,
@ -101,8 +128,9 @@ import {
ElOption,
ElPopconfirm,
ElMessage,
ElPagination,
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import type { FormInstance, TreeInstance } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { Plus, Search } from '@element-plus/icons-vue'
import {
@ -113,6 +141,7 @@ import {
getInstitutionalTreeListReq,
} from './request'
import {
getDataType,
addDataEnum,
addDataType,
formItemListType,
@ -121,6 +150,7 @@ import {
changeDataType,
selectDataType,
getTreeDataReturnType,
allEnumType,
} from './type'
import { pcaTextArr } from 'element-china-area-data'
import { useAdminInfo } from '/@/stores/adminInfo'
@ -131,7 +161,8 @@ const treeSearchInputPlaceholder = '搜索机构'
const searchInputTreeValue = ref<string>('')
const formRef = ref<FormInstance>()
const formModel = ref<addDataType | changeDataType>({
const defaultFormModel = {
mrid: '',
name: '',
aliasName: '',
@ -143,8 +174,11 @@ const formModel = ref<addDataType | changeDataType>({
remarks: '',
parentOrgId: null,
revision: 1,
})
const defaultFormModel = JSON.parse(JSON.stringify(formModel.value))
}
const formModel = ref<addDataType | changeDataType>(JSON.parse(JSON.stringify(defaultFormModel)))
const provinceOptions: selectDataType[] = pcaTextArr
const countyOptions = ref<selectDataType[]>([])
const cityOptions = ref<selectDataType[]>([])
@ -229,7 +263,7 @@ const addFormItemList: formItemListType<addDataEnumKeyJointType>[] = [
rules: [{ required: true, validator: phoneRule, trigger: 'blur' }],
},
{
type: 'input',
type: 'custom',
prop: 'parentOrgId',
label: addDataEnum['parentOrgId'],
placeholder: `请选择${addDataEnum['parentOrgId']}`,
@ -247,8 +281,10 @@ const dialogTitle = ref('新增机构')
const dialogVible = ref(false)
const addInstitutional = () => {
dialogTitle.value = '新增机构'
formRef.value && formRef.value.resetFields()
formModel.value = defaultFormModel
formModel.value = defaultFormModel
formRef.value && formRef.value.clearValidate(Object.keys(defaultFormModel))
console.log(defaultFormModel, 'defaultFormModel')
dialogVible.value = true
}
@ -263,6 +299,7 @@ const submitAddForm = () => {
ElMessage.success('新增成功')
getInstitutionList()
dialogVible.value = false
refreshTreeData()
}
})
} else if (dialogTitle.value === '编辑机构') {
@ -271,6 +308,7 @@ const submitAddForm = () => {
ElMessage.success('编辑成功')
getInstitutionList()
dialogVible.value = false
refreshTreeData()
} else {
ElMessage.error('编辑失败')
}
@ -283,18 +321,25 @@ const closeAddForm = () => {
dialogVible.value = false
}
const getInstitutionList = () => {
getInstitutionalListReq({
name: null,
}).then((res) => {
const getInstitutionList = (data: getDataType = { name: null }) => {
getInstitutionalListReq(data).then((res) => {
console.log(res)
tableData.value = res.rows
pageTotal.value = res.total
originData.value = res.rows
})
}
const tableData = ref<getTreeDataReturnType[]>()
const tableColumn: tableColumnType<addDataEnumKeyJointType>[] = [
const pagePagination = [5, 10, 20, 30]
const currentPage = ref(1)
const currentPageSize = ref(pagePagination[0])
const pageTotal = ref(0)
const originData = ref<getTreeDataReturnType[]>()
const tableData = computed(() => {
const start = (currentPage.value - 1) * currentPageSize.value
const end = start + currentPageSize.value
return originData.value?.slice(start, end)
})
const tableColumn: tableColumnType<allEnumType>[] = [
{
key: 'mridColumn',
prop: 'mrid',
@ -341,16 +386,14 @@ const tableColumn: tableColumnType<addDataEnumKeyJointType>[] = [
label: addDataEnum['remarks'],
},
{
key: 'parentOrgIdColumn',
prop: 'parentOrgId',
label: addDataEnum['parentOrgId'],
key: 'parentOrgNameColumn',
prop: 'parentOrgName',
label: addDataEnum['parentOrgName'],
},
]
const editForm = (column: changeDataType) => {
formModel.value = JSON.parse(JSON.stringify(column))
formModel.value.parentOrgId = 1
dialogTitle.value = '编辑机构'
dialogVible.value = true
}
@ -360,15 +403,21 @@ const delForm = (column: changeDataType) => {
if (res.success) {
ElMessage.success('删除成功')
getInstitutionList()
refreshTreeData()
}
})
}
const treeRef = ref<TreeInstance>()
const treeData = ref<getTreeDataReturnType[]>()
const treeReplaceProps = {
children: 'children',
label: 'name',
}
const treeSelectReplaceProps = {
label: 'name',
value: 'id',
}
const loadTreeData = (node: Node, resolve: any) => {
if (node.level === 0) {
return resolve([])
@ -378,7 +427,32 @@ const loadTreeData = (node: Node, resolve: any) => {
if (!res.length) {
node.data.isLeaf = true
}
tableData.value = [...res]
pageTotal.value = res.length
originData.value = [...res]
return resolve(res)
})
.catch((err) => {
console.log(err)
})
}
const loadSelectTreeData = (node: Node, resolve: any) => {
if (node.level === 0) {
getTreeData(adminInfo.orgid, true)
.then((res) => {
if (!res.length) {
node.data.isLeaf = true
}
return resolve(res)
})
.catch((err) => {
console.log(err)
})
}
getTreeData(node.data.id)
.then((res) => {
if (!res.length) {
node.data.isLeaf = true
}
return resolve(res)
})
.catch((err) => {
@ -408,22 +482,30 @@ const initData = () => {
return getTreeData(adminInfo.orgid)
})
.then((res) => {
tableData.value = [...res]
pageTotal.value = res.length
originData.value = [...res]
})
}
const currentTreeId = ref<string | number>(adminInfo.orgid)
const refreshTreeData = () => {
getTreeData(currentTreeId.value).then((res) => {
treeRef.value?.updateKeyChildren(currentTreeId.value, res)
})
}
const treeNodeClick = (nodeData: getTreeDataReturnType, node: Node) => {
console.log(node.childNodes, nodeData.isLeaf)
if (node.childNodes.length || nodeData.isLeaf) {
getTreeData(nodeData.id).then((res) => {
tableData.value = [...res]
pageTotal.value = res.length
originData.value = [...res]
})
}
currentTreeId.value = nodeData.id
}
const searchTableInput = ref('')
const searchTable = () => {
if (searchTableInput.value === '') return
// table搜索
// if (searchTableInput.value === '') return
getInstitutionList({ name: searchTableInput.value, parentOrgId: currentTreeId.value })
}
onMounted(() => {
initData()

2
ui/dasadmin/src/views/backend/InstitutionalManagement/request.ts
View File

@ -2,7 +2,7 @@ import createAxios from '/@/utils/axios'
import { getDataType, addDataType, changeDataType, delDataType, getDataReturnType, operateDataReturnType, getTreeDataType,getTreeDataReturnType } from './type'
export const getInstitutionalListReq = (data: getDataType) => {
return createAxios<addDataType, getDataReturnType<changeDataType>>({
return createAxios<addDataType, getDataReturnType<getTreeDataReturnType>>({
url: '/api/org/query',
method: 'post',
data: data,

29
ui/dasadmin/src/views/backend/InstitutionalManagement/type.ts
View File

@ -1,6 +1,6 @@
export type getDataType = {
name?: string | null
parentOrgId?: string
parentOrgId?: string | number
province?: string
city?: string
county?: string
@ -23,8 +23,12 @@ export enum addDataEnum {
contactPhone = '联系电话',
remarks = '备注',
parentOrgId = '上级机构',
parentOrgName = '上级机构名称',
}
export type addDataEnumKeyJointType = keyof typeof addDataEnum
export type allEnumType = keyof typeof addDataEnum
export type addDataEnumKeyJointType = Exclude<allEnumType, 'parentOrgName'>
export type formItemListType<T extends addDataEnumKeyJointType> = {
type: 'input' | 'select' | 'custom'
prop: T
@ -55,18 +59,8 @@ export type addDataType = {
export type changeDataType = {
id: string
mrid: string
name: string
aliasName: string
province: string
city: string
county: string
address: string
contactPhone: string
remarks: string
parentOrgId: number
revision: number
}
} & addDataType
export type operateDataReturnType<T = any> = Promise<{
code: number
msg: string
@ -78,11 +72,11 @@ export type delDataType = {
id: string
}
export type getTreeDataType = {
parentOrgId: number|string
parentOrgId: number | string
recursive: boolean
}
export type tableColumnType<T extends addDataEnumKeyJointType> = {
export type tableColumnType<T extends allEnumType> = {
key: string
prop: T
label: (typeof addDataEnum)[T]
@ -100,8 +94,9 @@ export type getTreeDataReturnType = {
mrid: string
name: string
parentOrgId: number
parentOrgName: string
province: string
remarks: string
revision: number
isLeaf?:boolean
isLeaf?: boolean
}

114
ui/dasadmin/src/views/backend/RoleManagement/RoleManagement.vue
View File

@ -30,7 +30,7 @@
<el-container>
<el-header class="containerHeader">
<div class="searchPart">
<el-input class="searchInput" v-model:value="searchInputValue" :placeholder="searchInputPlacehoder"></el-input>
<el-input class="searchInput" v-model="searchInputValue" :placeholder="searchInputPlacehoder"></el-input>
<el-button type="primary" :icon="Search" class="defaultBtn" @click="searchClick">{{ t('management.search') }}</el-button>
</div>
<el-button type="primary" :icon="Plus" class="defaultBtn" @click="addClick">{{ t('management.add') }}</el-button>
@ -59,14 +59,37 @@
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="currentPageSize"
:total="pageTotal"
:page-sizes="pagePagination"
background
:pager-count="7"
layout="prev, pager, next, jumper,sizes,total"
></el-pagination>
</el-main>
</el-container>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElContainer, ElHeader, ElMain, ElInput, ElButton, ElTable, ElTableColumn, ElDialog, ElForm, ElFormItem, ElMessage } from 'element-plus'
import { ref, computed, onMounted } from 'vue'
import {
ElContainer,
ElHeader,
ElMain,
ElInput,
ElButton,
ElTable,
ElTableColumn,
ElDialog,
ElForm,
ElFormItem,
ElMessage,
ElPopconfirm,
ElPagination,
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import {
@ -77,21 +100,22 @@ import {
formColumnListType,
formDataType,
authorityDataListType,
tableDataColumnTypeJointType,
tableDataEnum,
} from './type'
import { useI18n } from 'vue-i18n'
import { getRoleListReq, changeRoleListReq, addRoleListReq, delRoleListReq, getAllRoleListReq } from './request'
import { placeholderSign } from 'element-plus/es/components/table-v2/src/private.mjs'
const { t } = useI18n()
const dialogTitle = ref('新增角色')
const dialogVisible = ref(false)
const formModel = ref<formDataType>({
const defaultFormModel = {
id: '',
authList: [],
roleName: '',
roleCode: '',
})
const defaultFormModel = JSON.parse(JSON.stringify(formModel.value))
}
const formModel = ref<formDataType>(JSON.parse(JSON.stringify(defaultFormModel)))
const formColumnList: formColumnListType<formDataEnumKeyJointType>[] = [
{ type: 'input', label: formDataEnum['roleName'], prop: 'roleName', rule: [{ required: true, message: '请输入角色名称', trigger: 'blur' }] },
{ type: 'input', label: formDataEnum['roleCode'], prop: 'roleCode', rule: [{ required: true, message: '请输入角色编码', trigger: 'blur' }] },
@ -108,20 +132,20 @@ const formRef = ref<FormInstance>()
const submitForm = () => {
if (!formRef.value) return
formRef.value.validate((valid) => {
console.log(valid);
if (valid) {
if (dialogTitle.value === '新增角色') {
console.log(formModel.value)
addRoleListReq(formModel.value).then((res) => {
if (res.success) {
getRoleList()
ElMessage.success('新增成功')
}
}).catch(err=>{
ElMessage.error(err?.response?.data?.msg ?? '新增失败')
})
addRoleListReq(formModel.value)
.then((res) => {
if (res.success) {
getRoleList()
ElMessage.success('新增成功')
}
})
.catch((err) => {
ElMessage.error(err?.response?.data?.msg ?? '新增失败')
})
dialogVisible.value = false
} else if (dialogTitle.value === '编辑角色') {
changeRoleListReq(formModel.value)
@ -135,7 +159,6 @@ const submitForm = () => {
})
.catch((err) => {
ElMessage.error(err?.response?.data?.msg ?? '编辑失败')
})
}
}
@ -148,34 +171,43 @@ const cancelSubmitForm = () => {
const searchInputPlacehoder = t('management.Query roles by name')
const searchInputValue = ref<string>('')
const searchClick = () => {
if (!searchInputValue.value) return
currentPage.value = 1
getRoleList(searchInputValue.value)
}
const tableColumn = ref<tableColumnType<formDataEnumKeyJointType>[]>([
const tableColumn = ref<tableColumnType<tableDataColumnTypeJointType>[]>([
{
key: 'roleName-table',
prop: 'roleName',
label: formDataEnum['roleName'],
label: tableDataEnum['roleName'],
},
{
key: 'roleCode_table',
prop: 'roleCode',
label: formDataEnum['roleCode'],
label: tableDataEnum['roleCode'],
},
{
label: formDataEnum['authList'],
prop: 'authList',
label: tableDataEnum['listName'],
prop: 'listName',
key: 'authList-table',
},
])
const tableData = ref<tableDataType[]>([])
const tableData = computed(() => {
const start = (currentPage.value - 1) * currentPageSize.value
const end = start + currentPageSize.value
return originData.value?.slice(start, end)
})
const pagePagination = [5, 10, 20, 30]
const currentPage = ref(1)
const currentPageSize = ref(pagePagination[0])
const pageTotal = ref(0)
const originData = ref<tableDataType<authorityDataListType>[]>()
const addClick = () => {
// 新增角色
dialogTitle.value = '新增角色'
formRef.value && formRef.value.resetFields()
formRef.value && formRef.value.clearValidate(Object.keys(defaultFormModel))
formModel.value = defaultFormModel
dialogVisible.value = true
}
const editForm = (formData: formDataType) => {
@ -185,19 +217,33 @@ const editForm = (formData: formDataType) => {
dialogVisible.value = true
}
const delForm = (formData: formDataType) => {
delRoleListReq({ id: formData.id }).then((res) => {
if (res.success) {
ElMessage.success('删除成功')
getRoleList()
}
})
delRoleListReq({ id: formData.id })
.then((res) => {
if (res.success) {
ElMessage.success('删除成功')
getRoleList()
}
})
.catch((err) => {
ElMessage.error(err?.response?.data?.msg ?? '删除失败')
})
}
const getRoleList = (roleName = '') => {
getRoleListReq({
roleName,
}).then((res) => {
tableData.value = res.rows
pageTotal.value = res.total
originData.value = res.rows.map((item) => {
return {
roleCode: item.roleCode,
roleName: item.roleName,
listName: item.list.map((item) => item.authorityName).join(','),
authList: item.list.map((item) => item.id),
id: item.id,
revision: item.revision,
}
})
})
}
onMounted(() => {

34
ui/dasadmin/src/views/backend/RoleManagement/type.ts
View File

@ -7,10 +7,11 @@ export enum formDataEnum {
export type formDataType = {
id: string
authList: number[]
authList: string[]
roleName: string
roleCode: string
}
export type formDataEnumKeyJointType = keyof typeof formDataEnum
export type formColumnListType<T extends formDataEnumKeyJointType> = {
@ -25,19 +26,36 @@ export type formColumnListType<T extends formDataEnumKeyJointType> = {
| [{ validator: (rule: any, value: any, callback: any) => void; trigger: 'blur' | 'change' }]
}
export type tableDataType = {
createdTime?: string
export enum tableDataEnum {
id = '系统角色id',
listName = '角色权限',
roleName = '角色名称',
roleCode = '角色编码',
authList = '角色权限编码',
}
export type tableDataColumnType = {
id: string
authList: string[]
roleName: string
roleCode: string
listName: string
}
export type tableDataColumnTypeJointType = keyof typeof tableDataEnum
export type tableDataType<T extends authorityDataListType> = {
id: string
revision: number
roleCode: number
roleName: string
updatedTime?: string
listName: T['authorityName']
authList: T['id'][]
}
export type tableColumnType<T extends formDataEnumKeyJointType> = {
export type tableColumnType<T extends tableDataColumnTypeJointType> = {
key: string
prop: T
label: (typeof formDataEnum)[T]
label: (typeof tableDataEnum)[T]
fixed?: boolean
align?: 'left' | 'center' | 'right'
}
@ -66,12 +84,11 @@ export type getDataType = {
}
export type getDataReturnType = {
createdTime: string
id: string
revision: number
roleCode: number
roleName: string
updatedTime: string
list: authorityDataListType[]
}
export type changeDataType = Omit<formDataType, 'roleCode'>
@ -89,4 +106,3 @@ export type addDataReturnType = changeDataReturnType
export type delDataType = {
id: string
}