feat(user): 用户页面搜索区新增用户昵称搜索框
- 在用户组件中将用户名搜索框替换为用户昵称搜索框。 - 给岗位设置最小宽度,防止内容缩起来。 fix(user-management-relation): 管理链路树显示问题 - 当组织类型不为公司时(为部门、方向、团队),为防止根节点变更导致下面的子节点出现紊乱,此时隐藏编辑按钮。 - 把用margin扩充宽度改为用min-width。 fix(role): 选中某角色后的操作列的透明显示问题 - 选中某角色后,当页面分辨率不够时(出现滚动条),创建时间等字段的内容会透过操作列 fix(post): 岗位的名称、编码字段的显示问题 - 给这两个字段设置最小宽度,防止它们缩起来。
This commit is contained in:
@@ -89,8 +89,8 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
|
||||
columns: () => [
|
||||
{ prop: 'selection', type: 'selection', width: 48 },
|
||||
{ prop: 'index', type: 'index', label: '序号', width: 64 },
|
||||
{ prop: 'name', label: '岗位名称', minWidth: 160, showOverflowTooltip: true },
|
||||
{ prop: 'code', label: '岗位编码', minWidth: 180, showOverflowTooltip: true },
|
||||
{ prop: 'name', label: '岗位名称', minWidth: 200, showOverflowTooltip: true },
|
||||
{ prop: 'code', label: '岗位编码', minWidth: 330, showOverflowTooltip: true },
|
||||
{
|
||||
prop: 'postType',
|
||||
label: '岗位类型',
|
||||
|
||||
@@ -106,6 +106,7 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
|
||||
width: 196,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
className: 'role-operate-column',
|
||||
formatter: row => (
|
||||
<BusinessTableActionCell
|
||||
actions={[
|
||||
@@ -326,6 +327,21 @@ getMenuTreeData();
|
||||
background-color: rgb(64 158 255 / 8%);
|
||||
}
|
||||
|
||||
// 修复固定列穿透问题:给操作列添加不透明背景
|
||||
:deep(.role-operate-column) {
|
||||
background-color: var(--el-bg-color, #ffffff) !important;
|
||||
}
|
||||
// 选中行时操作列保持背景色
|
||||
:deep(.el-table__row.current-row) {
|
||||
.role-operate-column {
|
||||
background-color: var(--el-bg-color, #ffffff) !important;
|
||||
}
|
||||
|
||||
td.el-table__cell.is-fixed-right {
|
||||
background-color: var(--el-bg-color, #ffffff) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
margin: 0 0 -15px 0;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* - 叶子节点:基层员工,没有下级
|
||||
*/
|
||||
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import type { ElTree } from 'element-plus';
|
||||
import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
@@ -35,14 +35,37 @@ defineOptions({ name: 'UserManagementRelation' });
|
||||
* 组件 userQuery 定义
|
||||
*
|
||||
* @param fromUserIndex 是否不是从管理链路 index 页面访问(从 user 页面访问时为 true)
|
||||
* @param deptId 部门 ID
|
||||
* @param orgType 组织类型(company/dept/direction/team)
|
||||
*/
|
||||
interface userQuery {
|
||||
fromUserIndex?: boolean;
|
||||
deptId?: number | null;
|
||||
orgType?: string;
|
||||
}
|
||||
|
||||
// 从user的index组件访问管理链路,fromUserIndex为true,否则false; dept=100是灿能电力的id
|
||||
const { fromUserIndex = false, deptId = 100 } = defineProps<userQuery>();
|
||||
const { fromUserIndex = false, deptId = 100, orgType = 'company' } = defineProps<userQuery>();
|
||||
|
||||
/**
|
||||
* 判断节点是否为母节点(根节点)
|
||||
*
|
||||
* 母节点是指树形数据中的第一层节点
|
||||
*
|
||||
* @param data 节点数据
|
||||
*/
|
||||
function isRootNode(data: Api.SystemManage.UserManagementRelationTreeRespVO): boolean {
|
||||
return treeData.value.some(node => node.userId === data.userId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断母节点的编辑按钮是否应该隐藏
|
||||
*
|
||||
* 当组织类型为部门、方向或团队时,隐藏母节点的编辑按钮
|
||||
*/
|
||||
const shouldHideRootEdit = computed(() => {
|
||||
return fromUserIndex && orgType !== 'company';
|
||||
});
|
||||
|
||||
/**
|
||||
* 初始化搜索参数
|
||||
@@ -379,7 +402,6 @@ onMounted(async () => {
|
||||
:data="treeData"
|
||||
:props="treeProps"
|
||||
node-key="userId"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
@check="handleNodeCheck"
|
||||
>
|
||||
@@ -389,14 +411,14 @@ onMounted(async () => {
|
||||
<span>{{ node.label }}</span>
|
||||
<!-- <ElTag v-if="data.managerNickname" size="small" type="info">上级:{{ data.managerNickname }}</ElTag>-->
|
||||
</span>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center" style="min-width: 200px;">
|
||||
<ElButton link type="primary" size="default" @click.stop="openAdd(data)">
|
||||
<template #icon>
|
||||
<icon-ic-round-plus class="text-icon" />
|
||||
</template>
|
||||
新增
|
||||
</ElButton>
|
||||
<ElButton link type="primary" size="small" @click.stop="openEdit(data)">
|
||||
<ElButton v-if="!(isRootNode(data) && shouldHideRootEdit)" link type="primary" size="small" @click.stop="openEdit(data)">
|
||||
<template #icon>
|
||||
<icon-ic-round-edit class="text-icon" />
|
||||
</template>
|
||||
@@ -416,7 +438,6 @@ onMounted(async () => {
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
<span v-else-if="hasChildren(data)" style="margin-left: 56px"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -38,7 +38,7 @@ function getInitSearchParams(): Api.SystemManage.UserSearchParams {
|
||||
return {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
username: undefined,
|
||||
nickname: undefined,
|
||||
mobile: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined,
|
||||
@@ -211,7 +211,7 @@ const {columns, columnChecks, data, loading, getDataByPage, mobilePagination} =
|
||||
{
|
||||
prop: 'positionName',
|
||||
label: $t('page.system.user.positionName'),
|
||||
minWidth: 140,
|
||||
minWidth: 200,
|
||||
showOverflowTooltip: true,
|
||||
formatter: row => getNullableLabel(row.positionName)
|
||||
},
|
||||
@@ -772,7 +772,7 @@ onMounted(async () => {
|
||||
:show-footer="false"
|
||||
max-body-height="70vh"
|
||||
>
|
||||
<UserManagementRelation :from-user-index="true" :dept-id="currentDeptId"/>
|
||||
<UserManagementRelation :from-user-index="true" :dept-id="currentDeptId" :org-type="currentDept?.orgType"/>
|
||||
</BusinessFormDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -37,12 +37,12 @@ const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required
|
||||
@search="$emit('search')"
|
||||
>
|
||||
<ElCol :lg="6" :md="8" :sm="12">
|
||||
<ElFormItem :label="$t('page.system.user.userName')" prop="username">
|
||||
<ElFormItem :label="$t('page.system.user.nickName')" prop="nickname">
|
||||
<ElInput
|
||||
v-model="model.username"
|
||||
v-model="model.nickname"
|
||||
clearable
|
||||
:disabled="disabled"
|
||||
:placeholder="$t('page.system.user.form.userName')"
|
||||
:placeholder="$t('page.system.user.form.nickName')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
|
||||
Reference in New Issue
Block a user