!42 czh-20260616-更换选人组件；调深系统颜色

Merge pull request !42 from 陈志浩/feature/tasklist

src/App.vue

@@ -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,

src/components/Form/src/componentMap.ts

@@ -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);

src/components/semri/deptUserComponent/SzDeptUserModal.vue

@@ -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(',');
+  const keyValue = innerSelectedUsers.value.map((u) => u[props.valueKey]).join(',');
-  emit('update:value', usernames);
+  const nameValue = innerSelectedUsers.value.map((u) => u.realname).join(',');
-  emit('change', usernames);
+  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>

src/components/semri/deptUserComponent/SzDeptUserSelect.vue

@@ -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;
+    changedRows.forEach((item) => {
-    rowsToRemove.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);
     },
   };

src/design/theme.less

@@ -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字体颜色*/
   

src/views/tasklist/TaskList.data.ts

@@ -260,21 +260,19 @@ export const createTaskFormSchema: FormSchema[] = [
   {
     label: '负责人',
     field: 'assigneeId',
-    component: 'JSelectUser',
+    component: 'SzDeptUserSelect',
     componentProps: {
-      labelKey: 'realname',
+      valueKey: 'id',
-      rowKey: 'id',
+      multi: false,
-      isRadioSelection: true,
     },
   },
   {
     label: '分配人',
     field: 'assignId',
-    component: 'JSelectUser',
+    component: 'SzDeptUserSelect',
     componentProps: {
-      labelKey: 'realname',
+      valueKey: 'id',
-      rowKey: 'id',
+      multi: false,
-      isRadioSelection: true,
     },
   },
   {

src/views/tasklist/components/CollaboratorModal.vue

@@ -68,11 +68,11 @@
             </span>
           </div>
           <div class="add-panel-body">
-            <SzUserSelect
+            <SzDeptUserModal
               v-model:value="addForm.userIds"
-              :labelKey="'realname'"
+              valueKey="id"
-              :rowKey="'id'"
+              :role="1"
-              placeholder="搜索并选择用户（支持多选）"
+              :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';

src/views/tasklist/components/TaskContent.vue

@@ -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"
+      :value="userSelectModalCurrentIds"
-      :user-names="userSelectModalCurrentNames"
+      value-key="id"
-      :multiple="true"
+      :multi="true"
-      :secret-level="currentList?.secretLevel || 1"
+      :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;

src/views/tasklist/components/TaskDetailDrawer.vue

@@ -357,13 +357,15 @@
       </div>
     </template>
 
-    <UserSelectModal
+    <SzDeptUserModal
       ref="userSelectModalRef"
+      hide-trigger
       :title="drawerUserSelectType === 'assignee' ? '选择负责人' : drawerUserSelectType === 'participant' ? '选择参与人' : '选择关注人'"
-      :user-ids="drawerUserSelectCurrentIds"
+      :value="drawerUserSelectCurrentIds"
-      :user-names="drawerUserSelectCurrentNames"
+      value-key="id"
-      :multiple="true"
+      :multi="true"
-      :secret-level="currentListSecretLevel || 1"
+      :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(() => {

src/views/tasklist/components/TaskFlatView.vue

@@ -336,12 +336,14 @@
       </div>
     </div>
 
-    <UserSelectModal
+    <SzDeptUserModal
       ref="userSelectModalRef"
+      hide-trigger
       :title="userSelectModalType === 'assignee' ? '选择负责人' : userSelectModalType === 'participant' ? '选择参与人' : '选择关注人'"
-      :user-ids="userSelectModalCurrentIds"
+      :value="userSelectModalCurrentIds"
-      :user-names="userSelectModalCurrentNames"
+      value-key="id"
-      :multiple="true"
+      :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';

src/views/tasklist/components/UserSelectModal.vue

@@ -47,11 +47,12 @@
             </span>
           </div>
           <div class="add-panel-body">
-            <SzUserSelect
+            <SzDeptUserModal
               v-model:value="addForm.userIds"
-              :labelKey="'realname'"
+              valueKey="id"
-              :rowKey="'id'"
+              :multi="multiple"
-              placeholder="搜索并选择用户（支持多选）"
+              :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';