czh-20260616-更换选人组件;调深系统颜色

This commit is contained in:
zhihao
2026-06-16 15:10:07 +08:00
parent 6dc90eddf8
commit bb68283128
11 changed files with 101 additions and 60 deletions
+2 -2
View File
@@ -33,7 +33,7 @@
const modeAction = (data) => {
if (data.token) {
if (getDarkMode.value === ThemeEnum.DARK) {
Object.assign(data.token, { colorTextBase: 'fff' });
Object.assign(data.token, { colorTextBase: '#fff' });
} else {
Object.assign(data.token, { colorTextBase: '#333' });
}
@@ -77,7 +77,7 @@
colorPrimary: primary,
wireframe: true,
fontSize: 14,
colorTextBase: '#333',
colorTextBase: '#1a1a1a',
colorSuccess: '#55D187',
colorInfo: primary,
borderRadius: 4,
+2
View File
@@ -82,6 +82,7 @@ import RoleSelectInput from './jeecg/components/roleSelect/RoleSelectInput.vue';
import {DatePickerInFilter, CascaderPcaInFilter} from "@/components/InFilter";
import SzSelectUser from '@/components/semri/userComponent/SzUserSelect.vue';
import SzSelectUserByDept from '@/components/semri/userComponent/SzSelectUserByDept.vue';
import SzDeptUserSelect from '@/components/semri/deptUserComponent/SzDeptUserModal.vue';
const componentMap = new Map<ComponentType, Component>();
@@ -182,6 +183,7 @@ componentMap.set('RoleSelect', RoleSelectInput);
componentMap.set('JInputSelect', JInputSelect);
componentMap.set('SzSelectUser', SzSelectUser);
componentMap.set('SzSelectUserByDept',SzSelectUserByDept)
componentMap.set('SzDeptUserSelect', SzDeptUserSelect)
export function add(compName: ComponentType, component: Component) {
componentMap.set(compName, component);
@@ -1,6 +1,6 @@
<template>
<div>
<a-row class="j-select-row" type="flex" :gutter="8">
<a-row v-if="!hideTrigger" class="j-select-row" type="flex" :gutter="8">
<a-col class="left">
<a-select
:value="selectDisplayValue"
@@ -18,7 +18,7 @@
</a-row>
<a-modal
:width="1200"
title="选择人员"
:title="title"
v-model:open="visible"
centered
:confirm-loading="confirmLoading"
@@ -60,6 +60,9 @@ const props = withDefaults(
isSpecial?: number;
disabled?: boolean;
multi?: boolean;
valueKey?: 'id' | 'username';
title?: string;
hideTrigger?: boolean;
}>(),
{
value: '',
@@ -69,10 +72,13 @@ const props = withDefaults(
isSpecial: 0,
disabled: false,
multi: true,
valueKey: 'username',
title: '选择人员',
hideTrigger: false,
}
);
const emit = defineEmits(['update:value', 'change']);
const emit = defineEmits(['update:value', 'change', 'confirm']);
const userStore = useUserStore();
const visible = ref(false);
@@ -100,11 +106,12 @@ watch(
{ immediate: true }
);
async function loadUsersByUsernames(usernames: string) {
async function loadUsersByUsernames(valueStr: string) {
try {
const paramKey = props.valueKey === 'id' ? 'id' : 'username';
const res: any = await defHttp.get({
url: '/sys/user/queryUserComponentData',
params: { username: usernames, isMultiTranslate: 'true', pageNo: 1, pageSize: 9999 },
params: { [paramKey]: valueStr, isMultiTranslate: 'true', pageNo: 1, pageSize: 9999 },
});
innerSelectedUsers.value = [...(res.records || res)];
} catch {
@@ -118,6 +125,17 @@ function openModal() {
visible.value = true;
}
async function open() {
if (props.disabled) return;
if (props.value) {
await loadUsersByUsernames(props.value);
} else {
innerSelectedUsers.value = [];
}
tempSelectedUsers.value = [...innerSelectedUsers.value];
visible.value = true;
}
function handleTempUsersChange(users: UserItem[]) {
tempSelectedUsers.value = [...users];
}
@@ -128,15 +146,19 @@ function clearTemp() {
function handleOk() {
innerSelectedUsers.value = [...tempSelectedUsers.value];
const usernames = innerSelectedUsers.value.map((u) => u.username).join(',');
emit('update:value', usernames);
emit('change', usernames);
const keyValue = innerSelectedUsers.value.map((u) => u[props.valueKey]).join(',');
const nameValue = innerSelectedUsers.value.map((u) => u.realname).join(',');
emit('update:value', keyValue);
emit('change', keyValue);
emit('confirm', keyValue, nameValue);
visible.value = false;
}
function handleCancel() {
visible.value = false;
}
defineExpose({ open });
</script>
<style lang="less" scoped>
@@ -38,7 +38,7 @@
:columns="columns"
:data-source="dataSource"
:pagination="ipagination"
:row-selection="{ selectedRowKeys: selectedRowKeys, onSelectAll: onSelectAll, onSelect: onSelect, type: getType }"
:row-selection="{ selectedRowKeys: selectedRowKeys, onSelectAll: onSelectAll, onSelect: onSelect, type: getType, preserveSelectedRowKeys: true }"
:loading="loading"
@change="handleTableChange"
:custom-row="customRow"
@@ -291,22 +291,20 @@ function onSelect(record: UserItem, selected: boolean) {
} else {
deleteIfExist(selectedRows.value, record, 'id');
}
selectedRows.value.sort((a, b) => (a.sortno || 0) - (b.sortno || 0));
emit('update:checkedUser', selectedRows.value);
}
function onSelectAll(selected: boolean, selectedRecords: UserItem[], changeRecords: UserItem[]) {
function onSelectAll(selected: boolean, _selectedRecords: UserItem[], changeRecords: UserItem[]) {
const changedRows = Array.isArray(changeRecords) ? changeRecords.filter(Boolean) : [];
if (selected) {
selectedRecords.forEach((item) => {
changedRows.forEach((item) => {
pushIfNotExist(selectedRows.value, item, 'id');
});
} else {
const rowsToRemove = changeRecords && changeRecords.length > 0 ? changeRecords : dataSource.value;
rowsToRemove.forEach((item) => {
changedRows.forEach((item) => {
deleteIfExist(selectedRows.value, item, 'id');
});
}
selectedRows.value.sort((a, b) => (a.sortno || 0) - (b.sortno || 0));
emit('update:checkedUser', selectedRows.value);
}
@@ -345,7 +343,6 @@ function selectAll() {
allUserList.value.forEach((item) => {
pushIfNotExist(selectedRows.value, item, 'id');
});
selectedRows.value.sort((a, b) => (a.sortno || 0) - (b.sortno || 0));
emit('update:checkedUser', selectedRows.value);
}
@@ -370,7 +367,6 @@ function customRow(record: UserItem) {
} else {
pushIfNotExist(selectedRows.value, record, 'id');
}
selectedRows.value.sort((a, b) => (a.sortno || 0) - (b.sortno || 0));
emit('update:checkedUser', selectedRows.value);
},
};
+5 -5
View File
@@ -5,7 +5,7 @@
html[data-theme='light'] {
// update-begin--author:liaozhiyang---date:20240407---for:【QQYUN-8774】给body加上打底的字体颜色
body{
color: rgba(0, 0, 0, 0.65);
color: rgba(0, 0, 0, 0.90);
}
// update-end--author:liaozhiyang---date:20240407---for:【QQYUN-8774】给body加上打底的字体颜色
.text-secondary {
@@ -13,22 +13,22 @@ html[data-theme='light'] {
}
/*【美化】自定义table字体颜色*/
.ant-table {
color: rgba(0, 0, 0, 0.65);
color: rgba(0, 0, 0, 0.90);
}
/*【美化】自定义table字体颜色*/
/*【美化】自定义form字体颜色*/
.ant-select-multiple .ant-select-selection-item-content {
color: rgba(0, 0, 0, 0.65);
color: rgba(0, 0, 0, 0.90);
}
.ant-input-affix-wrapper > input.ant-input {
// update-begin--author:liaozhiyang---date:20240605---for:【TV360X-189】统一只读样式
&:not([disabled]) {
color: rgba(0, 0, 0, 0.65);
color: rgba(0, 0, 0, 0.90);
}
// update-end--author:liaozhiyang---date:20240605---for:【TV360X-189】统一只读样式
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item, .ant-select-single.ant-select-show-arrow {
color: rgba(0, 0, 0, 0.65);
color: rgba(0, 0, 0, 0.90);
}
/*【美化】自定义form字体颜色*/
+6 -8
View File
@@ -260,21 +260,19 @@ export const createTaskFormSchema: FormSchema[] = [
{
label: '负责人',
field: 'assigneeId',
component: 'JSelectUser',
component: 'SzDeptUserSelect',
componentProps: {
labelKey: 'realname',
rowKey: 'id',
isRadioSelection: true,
valueKey: 'id',
multi: false,
},
},
{
label: '分配人',
field: 'assignId',
component: 'JSelectUser',
component: 'SzDeptUserSelect',
componentProps: {
labelKey: 'realname',
rowKey: 'id',
isRadioSelection: true,
valueKey: 'id',
multi: false,
},
},
{
@@ -68,11 +68,11 @@
</span>
</div>
<div class="add-panel-body">
<SzUserSelect
<SzDeptUserModal
v-model:value="addForm.userIds"
:labelKey="'realname'"
:rowKey="'id'"
placeholder="搜索并选择用户(支持多选)"
valueKey="id"
:role="1"
:secLevel="secretLevel"
/>
<div class="add-panel-row">
<span class="add-panel-label">权限</span>
@@ -106,7 +106,7 @@
import { ref, reactive, computed, nextTick } from 'vue';
import { message } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
import SzUserSelect from '/@/components/semri/userComponent/SzUserSelect.vue';
import SzDeptUserModal from '/@/components/semri/deptUserComponent/SzDeptUserModal.vue';
import { getCollaborators, addCollaborator, removeCollaborator, updateCollaboratorPermission } from '../TaskList.api';
import { getAvatarColor } from '../types';
import { checkUserSecLevel } from '../utils/taskUtils';
+23 -6
View File
@@ -11,6 +11,12 @@
<Icon icon="ant-design:plus-outlined" />
</a-button>
</a-tooltip>
<a-input-search
v-model:value="searchKeyword"
placeholder="搜索计划名称"
class="list-search-input"
allow-clear
/>
</div>
<a-tooltip title="使用帮助">
<a-button type="text" size="small" class="help-btn" @click="helpModalOpen = true">
@@ -813,13 +819,15 @@
</template>
</div>
<UserSelectModal
<SzDeptUserModal
ref="userSelectModalRef"
hide-trigger
:title="userSelectModalType === 'assignee' ? '选择负责人' : userSelectModalType === 'participant' ? '选择参与人' : '选择关注人'"
:user-ids="userSelectModalCurrentIds"
:user-names="userSelectModalCurrentNames"
:multiple="true"
:secret-level="currentList?.secretLevel || 1"
:value="userSelectModalCurrentIds"
value-key="id"
:multi="true"
:sec-level="currentList?.secretLevel || 1"
:role="1"
@confirm="onUserSelectConfirm"
/>
<HelpModal v-model:open="helpModalOpen" />
@@ -834,7 +842,7 @@
import Icon from '/@/components/Icon/index';
import AvatarDisplay from './AvatarDisplay.vue';
import draggable from 'vuedraggable';
import UserSelectModal from './UserSelectModal.vue';
import SzDeptUserModal from '/@/components/semri/deptUserComponent/SzDeptUserModal.vue';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import { FIELD_CONFIG, GROUP_OPTIONS, SORT_OPTIONS, MAX_TASK_DEPTH, FILTER_FIELD_CONFIGS, FILTER_OPERATOR_LABELS, SECRET_LEVEL_COLOR } from '../types';
@@ -920,6 +928,7 @@
});
const submittingGroup = ref(false);
const submittingRename = ref(false);
const searchKeyword = ref('');
const filterVisible = ref(false);
const fieldConfigVisible = ref(false);
const collapsedGroups = ref<Set<string>>(new Set());
@@ -1118,13 +1127,16 @@
const allTaskLists = computed(() => {
const lists: TaskList[] = [];
const keyword = searchKeyword.value.trim().toLowerCase();
for (const group of props.taskListGroups) {
for (const list of group.taskLists) {
if (list.delFlag !== 1) {
if (!keyword || list.name.toLowerCase().includes(keyword)) {
lists.push(list);
}
}
}
}
return lists;
});
@@ -1923,6 +1935,11 @@
}
}
.list-search-input {
width: 220px;
margin-left: 16px;
}
.help-btn {
color: #888;
font-size: 18px;
@@ -357,13 +357,15 @@
</div>
</template>
<UserSelectModal
<SzDeptUserModal
ref="userSelectModalRef"
hide-trigger
:title="drawerUserSelectType === 'assignee' ? '选择负责人' : drawerUserSelectType === 'participant' ? '选择参与人' : '选择关注人'"
:user-ids="drawerUserSelectCurrentIds"
:user-names="drawerUserSelectCurrentNames"
:multiple="true"
:secret-level="currentListSecretLevel || 1"
:value="drawerUserSelectCurrentIds"
value-key="id"
:multi="true"
:sec-level="currentListSecretLevel || 1"
:role="1"
@confirm="onUserSelectModalConfirm"
/>
@@ -376,6 +378,7 @@
import Icon from '/@/components/Icon/index';
import AvatarDisplay from './AvatarDisplay.vue';
import SzUserSelectBySecLevel from '/@/components/semri/userComponent/SzUserSelectBySecLevel.vue';
import SzDeptUserModal from '/@/components/semri/deptUserComponent/SzDeptUserModal.vue';
import TaskAttachmentUpload from './TaskAttachmentUpload.vue';
import TaskDateRangePicker from './TaskDateRangePicker.vue';
import draggable from 'vuedraggable';
@@ -443,7 +446,7 @@
const drawerUserSelectType = ref<'assignee' | 'followers' | 'participant'>('assignee');
const drawerUserSelectCurrentIds = ref<string>('');
const drawerUserSelectCurrentNames = ref<string>('');
const userSelectModalRef = ref<InstanceType<typeof UserSelectModal> | null>(null);
const userSelectModalRef = ref<InstanceType<typeof SzDeptUserModal> | null>(null);
const fileUploadRef = ref<InstanceType<typeof TaskAttachmentUpload> | null>(null);
const parentTask = computed(() => {
@@ -336,12 +336,14 @@
</div>
</div>
<UserSelectModal
<SzDeptUserModal
ref="userSelectModalRef"
hide-trigger
:title="userSelectModalType === 'assignee' ? '选择负责人' : userSelectModalType === 'participant' ? '选择参与人' : '选择关注人'"
:user-ids="userSelectModalCurrentIds"
:user-names="userSelectModalCurrentNames"
:multiple="true"
:value="userSelectModalCurrentIds"
value-key="id"
:multi="true"
:role="1"
@confirm="onUserSelectConfirm"
/>
</a-spin>
@@ -353,7 +355,7 @@
import dayjs from 'dayjs';
import Icon from '/@/components/Icon/index';
import AvatarDisplay from './AvatarDisplay.vue';
import UserSelectModal from './UserSelectModal.vue';
import SzDeptUserModal from '/@/components/semri/deptUserComponent/SzDeptUserModal.vue';
import { FIELD_CONFIG, SORT_OPTIONS, MAX_TASK_DEPTH } from '../types';
import { PRIORITY_OPTIONS, getPriorityBg, getPriorityLabel, isOverdue } from '../utils/taskUtils';
import type { TaskItem, StatusFilter, SortField, SortDirection, FieldKey, FlatTaskItem } from '../types';
@@ -47,11 +47,12 @@
</span>
</div>
<div class="add-panel-body">
<SzUserSelect
<SzDeptUserModal
v-model:value="addForm.userIds"
:labelKey="'realname'"
:rowKey="'id'"
placeholder="搜索并选择用户(支持多选)"
valueKey="id"
:multi="multiple"
:role="1"
:secLevel="secretLevel"
/>
</div>
<div class="add-panel-footer">
@@ -78,7 +79,7 @@
import { ref, reactive, computed } from 'vue';
import { message } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
import SzUserSelect from '/@/components/semri/userComponent/SzUserSelect.vue';
import SzDeptUserModal from '/@/components/semri/deptUserComponent/SzDeptUserModal.vue';
import { getAvatarColor } from '../types';
import { getUserList } from '/@/api/common/api';
import { checkUserSecLevel } from '../utils/taskUtils';