gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【更新】优化人员、机构、职位、角色的前端代码，解决左侧树点击多次后无法折叠展开的情况

pull/150/head
小诺 2023-08-10 01:36:01 +08:00 committed by 俞宝山
parent 8672389da2
commit abd51015c7
7 changed files with 212 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
snowy-admin-web/src/views/biz/org/index.vue
View File

@ -80,11 +80,12 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<Form ref="form" @successful="table.refresh(true)" /> <Form ref="form" @successful="table.refresh()" />
</template> </template>
<script setup name="bizOrg"> <script setup name="bizOrg">
import { Empty } from 'ant-design-vue' import { Empty } from 'ant-design-vue'
import { isEmpty } from 'lodash-es'
import bizOrgApi from '@/api/biz/bizOrgApi' import bizOrgApi from '@/api/biz/bizOrgApi'
import Form from './form.vue' import Form from './form.vue'
@ -99,7 +100,8 @@
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'sortCode' dataIndex: 'sortCode',
width: 100
} }
] ]
if (hasPerm(['bizOrgEdit', 'bizOrgDelete'])) { if (hasPerm(['bizOrgEdit', 'bizOrgDelete'])) {
@ -110,13 +112,13 @@
width: '150px' width: '150px'
}) })
} }
let selectedRowKeys = ref([]) const selectedRowKeys = ref([])
// 列表选择配置 // 列表选择配置
const options = { const options = {
alert: { alert: {
show: false, show: false,
clear: () => { clear: () => {
selectedRowKeys = ref([]) selectedRowKeys.value = ref([])
} }
}, },
rowSelection: { rowSelection: {
@ -130,9 +132,9 @@
const table = ref(null) const table = ref(null)
const form = ref() const form = ref()
const searchFormRef = ref() const searchFormRef = ref()
let searchFormState = reactive({}) const searchFormState = ref({})
// 默认展开的节点 // 默认展开的节点
let defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
const treeData = ref([]) const treeData = ref([])
// 替换treeNode 中 title,key,children // 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'id' } const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@ -141,7 +143,7 @@
// 表格查询 返回 Promise 对象 // 表格查询 返回 Promise 对象
const loadData = (parameter) => { const loadData = (parameter) => {
loadTreeData() loadTreeData()
return bizOrgApi.orgPage(Object.assign(parameter, searchFormState)).then((res) => { return bizOrgApi.orgPage(Object.assign(parameter, searchFormState.value)).then((res) => {
return res return res
}) })
} }
@ -158,19 +160,21 @@
cardLoading.value = false cardLoading.value = false
if (res !== null) { if (res !== null) {
treeData.value = res treeData.value = res
// 默认展开2级 if (isEmpty(defaultExpandedKeys.value)) {
treeData.value.forEach((item) => { // 默认展开2级
// 因为0的顶级 treeData.value.forEach((item) => {
if (item.parentId === '0') { // 因为0的顶级
defaultExpandedKeys.value.push(item.id) if (item.parentId === '0') {
// 取到下级ID defaultExpandedKeys.value.push(item.id)
if (item.children) { // 取到下级ID
item.children.forEach((items) => { if (item.children) {
defaultExpandedKeys.value.push(items.id) item.children.forEach((items) => {
}) defaultExpandedKeys.value.push(items.id)
})
}
} }
} })
}) }
} }
}) })
.finally(() => { .finally(() => {
@ -180,9 +184,9 @@
// 点击树查询 // 点击树查询
const treeSelect = (selectedKeys) => { const treeSelect = (selectedKeys) => {
if (selectedKeys.length > 0) { if (selectedKeys.length > 0) {
searchFormState.parentId = selectedKeys.toString() searchFormState.value.parentId = selectedKeys.toString()
} else { } else {
delete searchFormState.parentId delete searchFormState.value.parentId
} }
table.value.refresh(true) table.value.refresh(true)
} }

45
snowy-admin-web/src/views/biz/position/index.vue
View File

@ -51,7 +51,7 @@
<a-space> <a-space>
<a-button <a-button
type="primary" type="primary"
@click="form.onOpen(undefined, searchFormState.orgId)" @click="formRef.onOpen(undefined, searchFormState.orgId)"
v-if="hasPerm('bizPositionAdd')" v-if="hasPerm('bizPositionAdd')"
> >
<template #icon><plus-outlined /></template> <template #icon><plus-outlined /></template>
@ -69,7 +69,7 @@
{{ $TOOL.dictTypeData('POSITION_CATEGORY', record.category) }} {{ $TOOL.dictTypeData('POSITION_CATEGORY', record.category) }}
</template> </template>
<template v-if="column.dataIndex === 'action'"> <template v-if="column.dataIndex === 'action'">
<a @click="form.onOpen(record)" v-if="hasPerm('bizPositionEdit')">编辑</a> <a @click="formRef.onOpen(record)" v-if="hasPerm('bizPositionEdit')">编辑</a>
<a-divider type="vertical" v-if="hasPerm(['bizPositionEdit', 'bizPositionDelete'], 'and')" /> <a-divider type="vertical" v-if="hasPerm(['bizPositionEdit', 'bizPositionDelete'], 'and')" />
<a-popconfirm title="确定删除此岗位？" @confirm="removeOrg(record)"> <a-popconfirm title="确定删除此岗位？" @confirm="removeOrg(record)">
<a-button type="link" danger size="small" v-if="hasPerm('bizPositionDelete')">删除</a-button> <a-button type="link" danger size="small" v-if="hasPerm('bizPositionDelete')">删除</a-button>
@ -80,11 +80,12 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<Form ref="form" @successful="table.refresh(true)" /> <Form ref="formRef" @successful="table.refresh(true)" />
</template> </template>
<script setup name="bizPosition"> <script setup name="bizPosition">
import { Empty } from 'ant-design-vue' import { Empty } from 'ant-design-vue'
import { isEmpty } from 'lodash-es'
import bizPositionApi from '@/api/biz/bizPositionApi' import bizPositionApi from '@/api/biz/bizPositionApi'
import bizOrgApi from '@/api/biz/bizOrgApi' import bizOrgApi from '@/api/biz/bizOrgApi'
import Form from './form.vue' import Form from './form.vue'
@ -129,11 +130,11 @@
const toolConfig = { refresh: true, height: true, columnSetting: true } const toolConfig = { refresh: true, height: true, columnSetting: true }
// 定义tableDOM // 定义tableDOM
const table = ref(null) const table = ref(null)
const form = ref() const formRef = ref()
const searchFormRef = ref() const searchFormRef = ref()
let searchFormState = reactive({}) const searchFormState = ref({})
// 默认展开的节点 // 默认展开的节点
let defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
const treeData = ref([]) const treeData = ref([])
// 替换treeNode 中 title,key,children // 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'id' } const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@ -141,7 +142,7 @@
// 表格查询 返回 Promise 对象 // 表格查询 返回 Promise 对象
const loadData = (parameter) => { const loadData = (parameter) => {
return bizPositionApi.positionPage(Object.assign(parameter, searchFormState)).then((res) => { return bizPositionApi.positionPage(Object.assign(parameter, searchFormState.value)).then((res) => {
return res return res
}) })
} }
@ -157,19 +158,21 @@
cardLoading.value = false cardLoading.value = false
if (res !== null) { if (res !== null) {
treeData.value = res treeData.value = res
// 默认展开2级 if (isEmpty(defaultExpandedKeys.value)) {
treeData.value.forEach((item) => { // 默认展开2级
// 因为0的顶级 treeData.value.forEach((item) => {
if (item.parentId === '0') { // 因为0的顶级
defaultExpandedKeys.value.push(item.id) if (item.parentId === '0') {
// 取到下级ID defaultExpandedKeys.value.push(item.id)
if (item.children) { // 取到下级ID
item.children.forEach((items) => { if (item.children) {
defaultExpandedKeys.value.push(items.id) item.children.forEach((items) => {
}) defaultExpandedKeys.value.push(items.id)
})
}
} }
} })
}) }
} }
}) })
.finally(() => { .finally(() => {
@ -178,9 +181,9 @@
// 点击树查询 // 点击树查询
const treeSelect = (selectedKeys) => { const treeSelect = (selectedKeys) => {
if (selectedKeys.length > 0) { if (selectedKeys.length > 0) {
searchFormState.orgId = selectedKeys.toString() searchFormState.value.orgId = selectedKeys.toString()
} else { } else {
delete searchFormState.orgId delete searchFormState.value.orgId
} }
table.value.refresh(true) table.value.refresh(true)
} }

67
snowy-admin-web/src/views/biz/user/index.vue
View File

@ -63,7 +63,7 @@
<a-space> <a-space>
<a-button <a-button
type="primary" type="primary"
@click="form.onOpen(undefined, searchFormState.orgId)" @click="formRef.onOpen(undefined, searchFormState.orgId)"
v-if="hasPerm('bizUserAdd')" v-if="hasPerm('bizUserAdd')"
> >
<template #icon><plus-outlined /></template> <template #icon><plus-outlined /></template>
@ -98,7 +98,7 @@
<span v-else>{{ $TOOL.dictTypeData('COMMON_STATUS', record.userStatus) }}</span> <span v-else>{{ $TOOL.dictTypeData('COMMON_STATUS', record.userStatus) }}</span>
</template> </template>
<template v-if="column.dataIndex === 'action'"> <template v-if="column.dataIndex === 'action'">
<a @click="form.onOpen(record)" v-if="hasPerm('bizUserEdit')">{{ $t('common.editButton') }}</a> <a @click="formRef.onOpen(record)" v-if="hasPerm('bizUserEdit')">{{ $t('common.editButton') }}</a>
<a-divider type="vertical" v-if="hasPerm(['bizUserEdit', 'bizUserDelete'], 'and')" /> <a-divider type="vertical" v-if="hasPerm(['bizUserEdit', 'bizUserDelete'], 'and')" />
<a-popconfirm :title="$t('user.popconfirmDeleteUser')" @confirm="removeUser(record)"> <a-popconfirm :title="$t('user.popconfirmDeleteUser')" @confirm="removeUser(record)">
<a-button type="link" danger size="small" v-if="hasPerm('bizUserDelete')">{{ <a-button type="link" danger size="small" v-if="hasPerm('bizUserDelete')">{{
@ -140,9 +140,9 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<Form ref="form" @successful="table.refresh(true)" /> <Form ref="formRef" @successful="table.refresh()" />
<role-selector-plus <role-selector-plus
ref="RoleSelectorPlus" ref="RoleSelectorPlusRef"
:org-tree-api="selectorApiFunction.orgTreeApi" :org-tree-api="selectorApiFunction.orgTreeApi"
:role-page-api="selectorApiFunction.rolePageApi" :role-page-api="selectorApiFunction.rolePageApi"
:checked-role-list-api="selectorApiFunction.checkedRoleListApi" :checked-role-list-api="selectorApiFunction.checkedRoleListApi"
@ -152,12 +152,13 @@
</template> </template>
<script setup name="bizUser"> <script setup name="bizUser">
import { message, Empty } from 'ant-design-vue' import { message, Empty } from 'ant-design-vue'
import { isEmpty } from 'lodash-es'
import tool from '@/utils/tool' import tool from '@/utils/tool'
import downloadUtil from '@/utils/downloadUtil' import downloadUtil from '@/utils/downloadUtil'
import bizUserApi from '@/api/biz/bizUserApi' import bizUserApi from '@/api/biz/bizUserApi'
import bizOrgApi from '@/api/biz/bizOrgApi' import bizOrgApi from '@/api/biz/bizOrgApi'
import userCenterApi from '@/api/sys/userCenterApi' import userCenterApi from '@/api/sys/userCenterApi'
import roleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue' import RoleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
import Form from './form.vue' import Form from './form.vue'
const columns = [ const columns = [
@ -213,22 +214,20 @@
const toolConfig = { refresh: true, height: true, columnSetting: true } const toolConfig = { refresh: true, height: true, columnSetting: true }
const statusData = tool.dictList('COMMON_STATUS') const statusData = tool.dictList('COMMON_STATUS')
const searchFormRef = ref() const searchFormRef = ref()
let defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
let searchFormState = reactive({}) const searchFormState = ref({})
const table = ref(null) const table = ref(null)
const treeData = ref([]) const treeData = ref([])
let selectedRowKeys = ref([]) const selectedRowKeys = ref([])
const treeFieldNames = { children: 'children', title: 'name', key: 'id' } const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
let form = ref(null) const formRef = ref(null)
let RoleSelector = ref() const RoleSelectorPlusRef = ref()
let RoleSelectorPlus = ref()
const selectedRecord = ref({}) const selectedRecord = ref({})
const loading = ref(false) const loading = ref(false)
const cardLoading = ref(true) const cardLoading = ref(true)
const ImpExpRef = ref()
// 表格查询 返回 Promise 对象 // 表格查询 返回 Promise 对象
const loadData = (parameter) => { const loadData = (parameter) => {
return bizUserApi.userPage(Object.assign(parameter, searchFormState)).then((res) => { return bizUserApi.userPage(Object.assign(parameter, searchFormState.value)).then((res) => {
return res return res
}) })
} }
@ -244,19 +243,21 @@
cardLoading.value = false cardLoading.value = false
if (res !== null) { if (res !== null) {
treeData.value = res treeData.value = res
// 默认展开2级 if (isEmpty(defaultExpandedKeys.value)) {
treeData.value.forEach((item) => { // 默认展开2级
// 因为0的顶级 treeData.value.forEach((item) => {
if (item.parentId === '0') { // 因为0的顶级
defaultExpandedKeys.value.push(item.id) if (item.parentId === '0') {
// 取到下级ID defaultExpandedKeys.value.push(item.id)
if (item.children) { // 取到下级ID
item.children.forEach((items) => { if (item.children) {
defaultExpandedKeys.value.push(items.id) item.children.forEach((items) => {
}) defaultExpandedKeys.value.push(items.id)
})
}
} }
} })
}) }
} }
}) })
.finally(() => { .finally(() => {
@ -267,7 +268,7 @@
alert: { alert: {
show: false, show: false,
clear: () => { clear: () => {
selectedRowKeys = ref([]) selectedRowKeys.value = ref([])
} }
}, },
rowSelection: { rowSelection: {
@ -279,9 +280,9 @@
// 点击树查询 // 点击树查询
const treeSelect = (selectedKeys) => { const treeSelect = (selectedKeys) => {
if (selectedKeys.length > 0) { if (selectedKeys.length > 0) {
searchFormState.orgId = selectedKeys.toString() searchFormState.value.orgId = selectedKeys.toString()
} else { } else {
delete searchFormState.orgId delete searchFormState.value.orgId
} }
table.value.refresh(true) table.value.refresh(true)
} }
@ -321,7 +322,7 @@
} }
// 批量导出校验并加参数 // 批量导出校验并加参数
const exportBatchUserVerify = () => { const exportBatchUserVerify = () => {
if ((selectedRowKeys.value.length < 1) & !searchFormState.searchKey & !searchFormState.userStatus) { if ((selectedRowKeys.value.length < 1) & !searchFormState.value.searchKey & !searchFormState.value.userStatus) {
message.warning('请输入查询条件或勾选要导出的信息') message.warning('请输入查询条件或勾选要导出的信息')
} }
if (selectedRowKeys.value.length > 0) { if (selectedRowKeys.value.length > 0) {
@ -335,10 +336,10 @@
exportBatchUser(params) exportBatchUser(params)
return return
} }
if (searchFormState.searchKey || searchFormState.userStatus) { if (searchFormState.value.searchKey || searchFormState.value.userStatus) {
const params = { const params = {
searchKey: searchFormState.searchKey, searchKey: searchFormState.value.searchKey,
userStatus: searchFormState.userStatus userStatus: searchFormState.value.userStatus
} }
exportBatchUser(params) exportBatchUser(params)
} }
@ -364,7 +365,7 @@
id: record.id id: record.id
} }
bizUserApi.userOwnRole(param).then((data) => { bizUserApi.userOwnRole(param).then((data) => {
RoleSelectorPlus.value.showRolePlusModal(data) RoleSelectorPlusRef.value.showRolePlusModal(data)
}) })
} }
// 角色选择回调 // 角色选择回调

56
snowy-admin-web/src/views/sys/org/index.vue
View File

@ -18,7 +18,7 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="8"> <a-col :span="8">
<a-form-item name="searchKey" label="名称关键词"> <a-form-item name="searchKey" label="名称关键词">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入组织名称关键词"></a-input> <a-input v-model:value="searchFormState.searchKey" placeholder="请输入组织名称关键词" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
@ -47,7 +47,7 @@
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
<a-button type="primary" @click="form.onOpen(undefined, searchFormState.parentId)"> <a-button type="primary" @click="formRef.onOpen(undefined, searchFormState.parentId)">
<template #icon><plus-outlined /></template> <template #icon><plus-outlined /></template>
新增 新增
</a-button> </a-button>
@ -59,7 +59,7 @@
{{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }} {{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }}
</template> </template>
<template v-if="column.dataIndex === 'action'"> <template v-if="column.dataIndex === 'action'">
<a @click="form.onOpen(record)">编辑</a> <a @click="formRef.onOpen(record)">编辑</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a-popconfirm title="删除此组织与下级组织吗？" @confirm="removeOrg(record)"> <a-popconfirm title="删除此组织与下级组织吗？" @confirm="removeOrg(record)">
<a-button type="link" danger size="small">删除</a-button> <a-button type="link" danger size="small">删除</a-button>
@ -70,11 +70,12 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<Form ref="form" @successful="table.refresh(true)" /> <Form ref="formRef" @successful="table.refresh()" />
</template> </template>
<script setup name="sysOrg"> <script setup name="sysOrg">
import { message, Empty } from 'ant-design-vue' import { Empty } from 'ant-design-vue'
import { isEmpty } from 'lodash-es'
import orgApi from '@/api/sys/orgApi' import orgApi from '@/api/sys/orgApi'
import Form from './form.vue' import Form from './form.vue'
@ -89,7 +90,8 @@
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'sortCode' dataIndex: 'sortCode',
width: 100
}, },
{ {
title: '操作', title: '操作',
@ -98,13 +100,13 @@
width: '150px' width: '150px'
} }
] ]
let selectedRowKeys = ref([]) const selectedRowKeys = ref([])
// 列表选择配置 // 列表选择配置
const options = { const options = {
alert: { alert: {
show: false, show: false,
clear: () => { clear: () => {
selectedRowKeys = ref([]) selectedRowKeys.value = ref([])
} }
}, },
rowSelection: { rowSelection: {
@ -115,11 +117,11 @@
} }
// 定义tableDOM // 定义tableDOM
const table = ref(null) const table = ref(null)
const form = ref() const formRef = ref()
const searchFormRef = ref() const searchFormRef = ref()
let searchFormState = reactive({}) const searchFormState = ref({})
// 默认展开的节点 // 默认展开的节点
let defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
const treeData = ref([]) const treeData = ref([])
// 替换treeNode 中 title,key,children // 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'id' } const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@ -128,7 +130,7 @@
// 表格查询 返回 Promise 对象 // 表格查询 返回 Promise 对象
const loadData = (parameter) => { const loadData = (parameter) => {
loadTreeData() loadTreeData()
return orgApi.orgPage(Object.assign(parameter, searchFormState)).then((res) => { return orgApi.orgPage(Object.assign(parameter, searchFormState.value)).then((res) => {
return res return res
}) })
} }
@ -143,28 +145,30 @@
cardLoading.value = false cardLoading.value = false
if (res !== null) { if (res !== null) {
treeData.value = res treeData.value = res
// 默认展开2级 if (isEmpty(defaultExpandedKeys.value)) {
treeData.value.forEach((item) => { // 默认展开2级
// 因为0的顶级 treeData.value.forEach((item) => {
if (item.parentId === '0') { // 因为0的顶级
defaultExpandedKeys.value.push(item.id) if (item.parentId === '0') {
// 取到下级ID defaultExpandedKeys.value.push(item.id)
if (item.children) { // 取到下级ID
item.children.forEach((items) => { if (item.children) {
defaultExpandedKeys.value.push(items.id) item.children.forEach((items) => {
}) defaultExpandedKeys.value.push(items.id)
})
}
} }
} })
}) }
} }
}) })
} }
// 点击树查询 // 点击树查询
const treeSelect = (selectedKeys) => { const treeSelect = (selectedKeys) => {
if (selectedKeys.length > 0) { if (selectedKeys.length > 0) {
searchFormState.parentId = selectedKeys.toString() searchFormState.value.parentId = selectedKeys.toString()
} else { } else {
delete searchFormState.parentId delete searchFormState.value.parentId
} }
table.value.refresh(true) table.value.refresh(true)
} }

44
snowy-admin-web/src/views/sys/position/index.vue
View File

@ -76,6 +76,7 @@
<script setup name="sysPosition"> <script setup name="sysPosition">
import { Empty } from 'ant-design-vue' import { Empty } from 'ant-design-vue'
import { isEmpty } from 'lodash-es'
import positionApi from '@/api/sys/positionApi' import positionApi from '@/api/sys/positionApi'
import orgApi from '@/api/sys/orgApi' import orgApi from '@/api/sys/orgApi'
import Form from './form.vue' import Form from './form.vue'
@ -91,7 +92,8 @@
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'sortCode' dataIndex: 'sortCode',
width: 100
}, },
{ {
title: '操作', title: '操作',
@ -100,13 +102,13 @@
width: '150px' width: '150px'
} }
] ]
let selectedRowKeys = ref([]) const selectedRowKeys = ref([])
// 列表选择配置 // 列表选择配置
const options = { const options = {
alert: { alert: {
show: false, show: false,
clear: () => { clear: () => {
selectedRowKeys = ref([]) selectedRowKeys.value = ref([])
} }
}, },
rowSelection: { rowSelection: {
@ -119,9 +121,9 @@
const table = ref(null) const table = ref(null)
const form = ref() const form = ref()
const searchFormRef = ref() const searchFormRef = ref()
let searchFormState = reactive({}) const searchFormState = ref({})
// 默认展开的节点 // 默认展开的节点
let defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
const treeData = ref([]) const treeData = ref([])
// 替换treeNode 中 title,key,children // 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'id' } const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@ -129,7 +131,7 @@
// 表格查询 返回 Promise 对象 // 表格查询 返回 Promise 对象
const loadData = (parameter) => { const loadData = (parameter) => {
return positionApi.positionPage(Object.assign(parameter, searchFormState)).then((res) => { return positionApi.positionPage(Object.assign(parameter, searchFormState.value)).then((res) => {
return res return res
}) })
} }
@ -143,27 +145,29 @@
cardLoading.value = false cardLoading.value = false
if (res !== null) { if (res !== null) {
treeData.value = res treeData.value = res
// 默认展开2级 if (isEmpty(defaultExpandedKeys.value)) {
treeData.value.forEach((item) => { // 默认展开2级
// 因为0的顶级 treeData.value.forEach((item) => {
if (item.parentId === '0') { // 因为0的顶级
defaultExpandedKeys.value.push(item.id) if (item.parentId === '0') {
// 取到下级ID defaultExpandedKeys.value.push(item.id)
if (item.children) { // 取到下级ID
item.children.forEach((items) => { if (item.children) {
defaultExpandedKeys.value.push(items.id) item.children.forEach((items) => {
}) defaultExpandedKeys.value.push(items.id)
})
}
} }
} })
}) }
} }
}) })
// 点击树查询 // 点击树查询
const treeSelect = (selectedKeys) => { const treeSelect = (selectedKeys) => {
if (selectedKeys.length > 0) { if (selectedKeys.length > 0) {
searchFormState.orgId = selectedKeys.toString() searchFormState.value.orgId = selectedKeys.toString()
} else { } else {
delete searchFormState.orgId delete searchFormState.value.orgId
} }
table.value.refresh(true) table.value.refresh(true)
} }

74
snowy-admin-web/src/views/sys/role/index.vue
View File

@ -49,7 +49,7 @@
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
<a-button type="primary" @click="form.onOpen(undefined, searchFormState.category, searchFormState.orgId)"> <a-button type="primary" @click="formRef.onOpen(undefined, searchFormState.category, searchFormState.orgId)">
<template #icon><plus-outlined /></template> <template #icon><plus-outlined /></template>
新增角色 新增角色
</a-button> </a-button>
@ -61,7 +61,7 @@
{{ $TOOL.dictTypeData('ROLE_CATEGORY', record.category) }} {{ $TOOL.dictTypeData('ROLE_CATEGORY', record.category) }}
</template> </template>
<template v-if="column.dataIndex === 'action'"> <template v-if="column.dataIndex === 'action'">
<a @click="form.onOpen(record)">编辑</a> <a @click="formRef.onOpen(record)">编辑</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a-popconfirm title="确定删除此角色？" @confirm="removeOrg(record)"> <a-popconfirm title="确定删除此角色？" @confirm="removeOrg(record)">
<a-button type="link" danger size="small">删除</a-button> <a-button type="link" danger size="small">删除</a-button>
@ -95,10 +95,10 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<grantResourceForm ref="GrantResourceForm" @successful="table.refresh(true)" /> <grantResourceForm ref="GrantResourceForm" @successful="table.refresh()" />
<grantMobileResourceForm ref="GrantMobileResourceForm" @successful="table.refresh(true)" /> <grantMobileResourceForm ref="GrantMobileResourceForm" @successful="table.refresh()" />
<grantPermissionForm ref="GrantPermissionForm" @successful="table.refresh(true)" /> <grantPermissionForm ref="GrantPermissionForm" @successful="table.refresh()" />
<Form ref="form" @successful="table.refresh(true)" /> <Form ref="formRef" @successful="table.refresh()" />
<user-selector-plus <user-selector-plus
ref="userselectorPlusRef" ref="userselectorPlusRef"
:org-tree-api="selectorApiFunction.orgTreeApi" :org-tree-api="selectorApiFunction.orgTreeApi"
@ -110,13 +110,14 @@
<script setup name="sysRole"> <script setup name="sysRole">
import { Empty } from 'ant-design-vue' import { Empty } from 'ant-design-vue'
import { isEmpty } from 'lodash-es'
import roleApi from '@/api/sys/roleApi' import roleApi from '@/api/sys/roleApi'
import orgApi from '@/api/sys/orgApi' import orgApi from '@/api/sys/orgApi'
import userCenterApi from '@/api/sys/userCenterApi' import userCenterApi from '@/api/sys/userCenterApi'
import grantResourceForm from './grantResourceForm.vue' import GrantResourceForm from './grantResourceForm.vue'
import grantMobileResourceForm from './grantMobileResourceForm.vue' import GrantMobileResourceForm from './grantMobileResourceForm.vue'
import grantPermissionForm from './grantPermissionForm.vue' import GrantPermissionForm from './grantPermissionForm.vue'
import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue' import UserSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
import Form from './form.vue' import Form from './form.vue'
const columns = [ const columns = [
@ -132,7 +133,8 @@
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'sortCode' dataIndex: 'sortCode',
width: 100
}, },
{ {
title: '操作', title: '操作',
@ -141,13 +143,13 @@
width: '200px' width: '200px'
} }
] ]
let selectedRowKeys = ref([]) const selectedRowKeys = ref([])
// 列表选择配置 // 列表选择配置
const options = { const options = {
alert: { alert: {
show: false, show: false,
clear: () => { clear: () => {
selectedRowKeys = ref([]) selectedRowKeys.value = ref([])
} }
}, },
rowSelection: { rowSelection: {
@ -158,15 +160,15 @@
} }
// 定义tableDOM // 定义tableDOM
const table = ref() const table = ref()
const form = ref() const formRef = ref()
const GrantResourceForm = ref() const GrantResourceForm = ref()
const GrantMobileResourceForm = ref() const GrantMobileResourceForm = ref()
const GrantPermissionForm = ref() const GrantPermissionForm = ref()
const userselectorPlusRef = ref() const userselectorPlusRef = ref()
const searchFormRef = ref() const searchFormRef = ref()
let searchFormState = reactive({}) const searchFormState = ref({})
// 默认展开的节点 // 默认展开的节点
let defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
const treeData = ref([]) const treeData = ref([])
// 替换treeNode 中 title,key,children // 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'id' } const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@ -176,7 +178,7 @@
// 表格查询 返回 Promise 对象 // 表格查询 返回 Promise 对象
const loadData = (parameter) => { const loadData = (parameter) => {
let param = Object.assign(parameter, searchFormState) let param = Object.assign(parameter, searchFormState.value)
return roleApi.rolePage(param).then((res) => { return roleApi.rolePage(param).then((res) => {
return res return res
}) })
@ -199,34 +201,36 @@
} }
] ]
treeData.value = globalRoleType.concat(res) treeData.value = globalRoleType.concat(res)
// 默认展开2级 if (isEmpty(defaultExpandedKeys.value)) {
treeData.value.forEach((item) => { // 默认展开2级
// 因为0的顶级 treeData.value.forEach((item) => {
if (item.parentId === '0') { // 因为0的顶级
defaultExpandedKeys.value.push(item.id) if (item.parentId === '0') {
// 取到下级ID defaultExpandedKeys.value.push(item.id)
if (item.children) { // 取到下级ID
item.children.forEach((items) => { if (item.children) {
defaultExpandedKeys.value.push(items.id) item.children.forEach((items) => {
}) defaultExpandedKeys.value.push(items.id)
})
}
} }
} })
}) }
} }
}) })
// 点击树查询 // 点击树查询
const treeSelect = (selectedKeys) => { const treeSelect = (selectedKeys) => {
if (selectedKeys.length > 0) { if (selectedKeys.length > 0) {
if (selectedKeys[0] === 'GLOBAL') { if (selectedKeys[0] === 'GLOBAL') {
searchFormState.category = selectedKeys[0] searchFormState.value.category = selectedKeys[0]
delete searchFormState.orgId delete searchFormState.value.orgId
} else { } else {
searchFormState.orgId = selectedKeys.toString() searchFormState.value.orgId = selectedKeys.toString()
delete searchFormState.category delete searchFormState.value.category
} }
} else { } else {
delete searchFormState.category delete searchFormState.value.category
delete searchFormState.orgId delete searchFormState.value.orgId
} }
table.value.refresh(true) table.value.refresh(true)
} }

69
snowy-admin-web/src/views/sys/user/index.vue
View File

@ -60,7 +60,7 @@
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
<a-button type="primary" @click="form.onOpen(undefined, searchFormState.orgId)"> <a-button type="primary" @click="formRef.onOpen(undefined, searchFormState.orgId)">
<template #icon><plus-outlined /></template> <template #icon><plus-outlined /></template>
<span>{{ $t('common.addButton') }}{{ $t('model.user') }}</span> <span>{{ $t('common.addButton') }}{{ $t('model.user') }}</span>
</a-button> </a-button>
@ -90,7 +90,7 @@
<a-switch :loading="loading" :checked="record.userStatus === 'ENABLE'" @change="editStatus(record)" /> <a-switch :loading="loading" :checked="record.userStatus === 'ENABLE'" @change="editStatus(record)" />
</template> </template>
<template v-if="column.dataIndex === 'action'"> <template v-if="column.dataIndex === 'action'">
<a @click="form.onOpen(record)">{{ $t('common.editButton') }}</a> <a @click="formRef.onOpen(record)">{{ $t('common.editButton') }}</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a-popconfirm :title="$t('user.popconfirmDeleteUser')" placement="topRight" @confirm="removeUser(record)"> <a-popconfirm :title="$t('user.popconfirmDeleteUser')" placement="topRight" @confirm="removeUser(record)">
<a-button type="link" danger size="small"> <a-button type="link" danger size="small">
@ -135,31 +135,32 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<Form ref="form" @successful="table.refresh(true)" /> <Form ref="formRef" @successful="table.refresh()" />
<role-selector-plus <role-selector-plus
ref="RoleSelectorPlus" ref="RoleSelectorPlusRef"
:org-tree-api="selectorApiFunction.orgTreeApi" :org-tree-api="selectorApiFunction.orgTreeApi"
:role-page-api="selectorApiFunction.rolePageApi" :role-page-api="selectorApiFunction.rolePageApi"
:checked-role-list-api="selectorApiFunction.checkedRoleListApi" :checked-role-list-api="selectorApiFunction.checkedRoleListApi"
@onBack="roleBack" @onBack="roleBack"
/> />
<ImpExp ref="ImpExpRef" /> <ImpExp ref="ImpExpRef" />
<grantResourceForm ref="grantResourceFormRef" @successful="table.refresh(true)" /> <grantResourceForm ref="grantResourceFormRef" @successful="table.refresh()" />
<grantPermissionForm ref="grantPermissionFormRef" @successful="table.refresh(true)" /> <grantPermissionForm ref="grantPermissionFormRef" @successful="table.refresh()" />
</template> </template>
<script setup name="sysUser"> <script setup name="sysUser">
import { message, Empty } from 'ant-design-vue' import { message, Empty } from 'ant-design-vue'
import { isEmpty } from 'lodash-es'
import tool from '@/utils/tool' import tool from '@/utils/tool'
import downloadUtil from '@/utils/downloadUtil' import downloadUtil from '@/utils/downloadUtil'
import userApi from '@/api/sys/userApi' import userApi from '@/api/sys/userApi'
import orgApi from '@/api/sys/orgApi' import orgApi from '@/api/sys/orgApi'
import userCenterApi from '@/api/sys/userCenterApi' import userCenterApi from '@/api/sys/userCenterApi'
import roleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue' import RoleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
import Form from './form.vue' import Form from './form.vue'
import ImpExp from './impExp.vue' import ImpExp from './impExp.vue'
import grantResourceForm from './grantResourceForm.vue' import GrantResourceForm from './grantResourceForm.vue'
import grantPermissionForm from './grantPermissionForm.vue' import GrantPermissionForm from './grantPermissionForm.vue'
const columns = [ const columns = [
{ {
@ -211,14 +212,14 @@
] ]
const statusData = tool.dictList('COMMON_STATUS') const statusData = tool.dictList('COMMON_STATUS')
const searchFormRef = ref() const searchFormRef = ref()
let defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
let searchFormState = reactive({}) const searchFormState = ref({})
const table = ref(null) const table = ref(null)
const treeData = ref([]) const treeData = ref([])
const selectedRowKeys = ref([]) const selectedRowKeys = ref([])
const treeFieldNames = { children: 'children', title: 'name', key: 'id' } const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
let form = ref(null) const formRef = ref(null)
let RoleSelectorPlus = ref() const RoleSelectorPlusRef = ref()
const selectedRecord = ref({}) const selectedRecord = ref({})
const loading = ref(false) const loading = ref(false)
const cardLoading = ref(true) const cardLoading = ref(true)
@ -227,7 +228,7 @@
const grantPermissionFormRef = ref() const grantPermissionFormRef = ref()
// 表格查询 返回 Promise 对象 // 表格查询 返回 Promise 对象
const loadData = (parameter) => { const loadData = (parameter) => {
return userApi.userPage(Object.assign(parameter, searchFormState)).then((res) => { return userApi.userPage(Object.assign(parameter, searchFormState.value)).then((res) => {
return res return res
}) })
} }
@ -236,19 +237,21 @@
cardLoading.value = false cardLoading.value = false
if (res !== null) { if (res !== null) {
treeData.value = res treeData.value = res
// 默认展开2级 if (isEmpty(defaultExpandedKeys.value)) {
treeData.value.forEach((item) => { // 默认展开2级
// 因为0的顶级 treeData.value.forEach((item) => {
if (item.parentId === '0') { // 因为0的顶级
defaultExpandedKeys.value.push(item.id) if (item.parentId === '0') {
// 取到下级ID defaultExpandedKeys.value.push(item.id)
if (item.children) { // 取到下级ID
item.children.forEach((items) => { if (item.children) {
defaultExpandedKeys.value.push(items.id) item.children.forEach((items) => {
}) defaultExpandedKeys.value.push(items.id)
})
}
} }
} })
}) }
} }
}) })
// 列表选择配置 // 列表选择配置
@ -273,9 +276,9 @@
// 点击树查询 // 点击树查询
const treeSelect = (selectedKeys) => { const treeSelect = (selectedKeys) => {
if (selectedKeys.length > 0) { if (selectedKeys.length > 0) {
searchFormState.orgId = selectedKeys.toString() searchFormState.value.orgId = selectedKeys.toString()
} else { } else {
delete searchFormState.orgId delete searchFormState.value.orgId
} }
table.value.refresh(true) table.value.refresh(true)
} }
@ -315,7 +318,7 @@
} }
// 批量导出校验并加参数 // 批量导出校验并加参数
const exportBatchUserVerify = () => { const exportBatchUserVerify = () => {
if ((selectedRowKeys.value.length < 1) & !searchFormState.searchKey & !searchFormState.userStatus) { if ((selectedRowKeys.value.length < 1) & !searchFormState.value.searchKey & !searchFormState.value.userStatus) {
message.warning('请输入查询条件或勾选要导出的信息') message.warning('请输入查询条件或勾选要导出的信息')
} }
if (selectedRowKeys.value.length > 0) { if (selectedRowKeys.value.length > 0) {
@ -329,10 +332,10 @@
exportBatchUser(params) exportBatchUser(params)
return return
} }
if (searchFormState.searchKey || searchFormState.userStatus) { if (searchFormState.value.searchKey || searchFormState.value.userStatus) {
const params = { const params = {
searchKey: searchFormState.searchKey, searchKey: searchFormState.value.searchKey,
userStatus: searchFormState.userStatus userStatus: searchFormState.value.userStatus
} }
exportBatchUser(params) exportBatchUser(params)
} }
@ -358,7 +361,7 @@
id: record.id id: record.id
} }
userApi.userOwnRole(param).then((data) => { userApi.userOwnRole(param).then((data) => {
RoleSelectorPlus.value.showRolePlusModal(data) RoleSelectorPlusRef.value.showRolePlusModal(data)
}) })
} }
// 角色选择回调 // 角色选择回调