czh-20260625-增加单选选人组件;替换转办/委托选人组件;替换我的待办中的选人组件

This commit is contained in:
zhihao
2026-06-25 16:06:58 +08:00
parent 4c4de1e288
commit 469d207b10
6 changed files with 490 additions and 25 deletions
@@ -1,10 +1,25 @@
<template> <template>
<div> <div>
<a-row v-if="!hideTrigger" class="j-select-row" type="flex" :gutter="8"> <template v-if="!hideTrigger">
<!-- input 模式无按钮点击输入框直接弹窗 -->
<a-select
v-if="triggerMode === 'input'"
:value="selectDisplayValue"
placeholder="请选择人员"
:disabled="disabled"
:open="false"
mode="multiple"
:maxTagCount="3"
style="width: 100%"
@update:value="handleSelectRemove"
@click="openModal()"
/>
<!-- button 模式现有行为 -->
<a-row v-else class="j-select-row" type="flex" :gutter="8">
<a-col class="left"> <a-col class="left">
<a-select <a-select
:value="selectDisplayValue" :value="selectDisplayValue"
:placeholder="'请选择人员'" placeholder="请选择人员"
:disabled="disabled" :disabled="disabled"
:open="false" :open="false"
mode="multiple" mode="multiple"
@@ -17,6 +32,7 @@
<a-button type="primary" @click="openModal()" :disabled="disabled">选择</a-button> <a-button type="primary" @click="openModal()" :disabled="disabled">选择</a-button>
</a-col> </a-col>
</a-row> </a-row>
</template>
<a-modal <a-modal
:width="1200" :width="1200"
:title="title" :title="title"
@@ -64,6 +80,7 @@ const props = withDefaults(
valueKey?: 'id' | 'username'; valueKey?: 'id' | 'username';
title?: string; title?: string;
hideTrigger?: boolean; hideTrigger?: boolean;
triggerMode?: 'button' | 'input';
}>(), }>(),
{ {
value: '', value: '',
@@ -76,6 +93,7 @@ const props = withDefaults(
valueKey: 'username', valueKey: 'username',
title: '选择人员', title: '选择人员',
hideTrigger: false, hideTrigger: false,
triggerMode: 'button',
} }
); );
@@ -178,6 +196,10 @@ defineExpose({ open });
width: calc(100% - @width - 8px); width: calc(100% - @width - 8px);
} }
.left-full {
width: 100%;
}
.right { .right {
width: @width; width: @width;
} }
@@ -0,0 +1,105 @@
<template>
<BasicModal :title="title" @register="registerModal" :minHeight="40" :width="600" @ok="handleOk" :canFullscreen="false">
<table style="width: 100%; margin-top: 8px">
<tr>
<td style="width: 80px; vertical-align: middle">
<span>选择用户</span>
</td>
<td style="vertical-align: middle">
<a-input
:value="selectedUser ? selectedUser.realname : ''"
:placeholder="'请选择人员'"
disabled
style="width: 100%"
>
<template v-if="selectedUser" #suffix>
<CloseCircleOutlined @click="selectedUser = null" style="cursor: pointer; color: rgba(0,0,0,0.45)" />
</template>
</a-input>
</td>
<td style="width: 80px; vertical-align: middle; padding-left: 8px">
<a-button type="primary" @click="openSelectModal">选择</a-button>
</td>
</tr>
</table>
<a-modal
:title="'选择' + title"
:width="1000"
v-model:open="selectVisible"
centered
:destroyOnClose="true"
:okButtonProps="{ disabled: !tempSelectedUser }"
@ok="onSelectConfirm"
>
<SzSingleDeptUserSelect ref="selectRef" :departId="innerDepartId" :secLevel="0" :role="1" @select="onUserSelect" />
</a-modal>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useUserStore } from '/@/store/modules/user';
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import SzSingleDeptUserSelect from './SzSingleDeptUserSelect.vue';
import type { UserItem } from './types';
const props = withDefaults(
defineProps<{
title?: string;
departId?: string;
}>(),
{
title: '选择人员',
departId: '',
}
);
const emit = defineEmits(['selected', 'register']);
const userStore = useUserStore();
const selectRef = ref<InstanceType<typeof SzSingleDeptUserSelect> | null>(null);
const taskId = ref('');
const selectedUser = ref<UserItem | null>(null);
const tempSelectedUser = ref<UserItem | null>(null);
const selectVisible = ref(false);
const innerDepartId = computed(() => {
return props.departId || userStore.getUserInfo?.orgCode || '';
});
const [registerModal, { closeModal }] = useModalInner((data) => {
selectedUser.value = null;
tempSelectedUser.value = null;
taskId.value = data.taskId || '';
});
function openSelectModal() {
tempSelectedUser.value = selectedUser.value ? { ...selectedUser.value } : null;
selectVisible.value = true;
}
function onUserSelect(user: UserItem | null) {
tempSelectedUser.value = user;
}
function onSelectConfirm() {
if (!tempSelectedUser.value) return;
selectedUser.value = tempSelectedUser.value;
selectVisible.value = false;
}
function handleOk() {
if (!selectedUser.value) return;
emit('selected', {
taskId: taskId.value,
taskAssignee: selectedUser.value.id,
taskAssigneeName: selectedUser.value.realname,
});
closeModal();
}
</script>
<style lang="less" scoped>
</style>
@@ -0,0 +1,271 @@
<template>
<a-row :gutter="0" style="height: 556px">
<!-- 部门树 -->
<a-col :span="6" style="height: 100%; border-right: 1px solid #e8e8e8; padding: 0 12px; display: flex; flex-direction: column">
<a-input-search v-model:value="searchDepartValue" style="margin-bottom: 12px; margin-top: 0" placeholder="请输入部门名称" />
<a-directory-tree
selectable
v-model:selectedKeys="selectedDepIds"
:check-strictly="true"
:dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
:tree-data="filterDepartTreeData"
:expand-action="false"
v-model:expandedKeys="expandedKeys"
@select="onDepSelect"
style="height: 500px; overflow: auto"
/>
</a-col>
<!-- 人员表格 -->
<a-col :span="18" style="height: 100%; padding: 0 12px; display: flex; flex-direction: column">
<div style="margin-bottom: 12px; margin-top: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap">
<a-input-search
style="flex: 1; min-width: 120px"
placeholder="输入姓名"
v-model:value="queryParam.realname"
@search="onSearch"
/>
<a-button @click="searchReset(1)">重置</a-button>
</div>
<div style="flex: 1; min-height: 0; overflow: auto">
<a-empty v-if="selectedDepIds.length === 0" description="请先选择部门!" />
<a-table
v-else
:scroll="{ y: 430 }"
size="middle"
row-key="id"
:columns="columns"
:data-source="dataSource"
:pagination="ipagination"
:row-selection="{ selectedRowKeys: selectedRowKeys, onSelect: onSelect, type: 'radio', preserveSelectedRowKeys: true }"
:loading="loading"
@change="handleTableChange"
/>
</div>
</a-col>
</a-row>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { queryTreeList } from '/@/api/common/api';
import { defHttp } from '/@/utils/http/axios';
import { filterObj } from '/@/utils/common/compUtils';
import { filterDepartTree, recurTree } from './types';
import type { UserItem, DepartTreeNode } from './types';
const props = withDefaults(
defineProps<{
secLevel?: any;
departId?: string;
role?: string | number;
isSpecial?: number;
}>(),
{
secLevel: 0,
departId: '',
role: 1,
isSpecial: 0,
}
);
const emit = defineEmits(['select']);
const searchDepartValue = ref('');
const queryParam = reactive<Record<string, any>>({ realname: '' });
const dataSource = ref<UserItem[]>([]);
const selectedDepIds = ref<string[]>([]);
const selectedUser = ref<UserItem | null>(null);
const departTree = ref<DepartTreeNode[]>([]);
const fullDepartTree = ref<DepartTreeNode[]>([]);
const loading = ref(false);
const expandedKeys = ref<string[]>([]);
function findDepartIdByOrgCode(tree: DepartTreeNode[], orgCode: string): string | null {
for (const node of tree) {
if (node.orgCode === orgCode) {
return node.id;
}
if (node.children && node.children.length > 0) {
const found = findDepartIdByOrgCode(node.children, orgCode);
if (found) return found;
}
}
return null;
}
function resolveDepartId(departIdOrOrgCode: string): string {
if (!departIdOrOrgCode) return departIdOrOrgCode;
const uuidPattern = /^[0-9a-f]{32}$/i;
if (uuidPattern.test(departIdOrOrgCode.replace(/-/g, ''))) return departIdOrOrgCode;
const realId = findDepartIdByOrgCode(fullDepartTree.value, departIdOrOrgCode);
if (realId) return realId;
return departIdOrOrgCode;
}
const columns = [
{ title: '用户姓名', align: 'center' as const, dataIndex: 'realname' },
{ title: '人员密级', align: 'center' as const, dataIndex: 'userSecurityLevel_dictText' },
];
const ipagination = reactive({
current: 1,
pageSize: 7,
showQuickJumper: true,
total: 0,
});
const isorter = reactive({
column: 'sortno',
order: 'asc' as const,
});
const url = {
pageUserDepart: '/sys/user/queryUserComponentData',
};
const selectedRowKeys = computed(() => (selectedUser.value ? [selectedUser.value.id] : []));
const filterDepartTreeData = computed(() => {
if (!searchDepartValue.value) return departTree.value;
return filterDepartTree(departTree.value, searchDepartValue.value);
});
watch(
() => props.departId,
() => {
queryDepartTree();
},
{ immediate: true }
);
watch(
() => props.role,
() => {
queryDepartTree();
}
);
function initData() {
const depId = props.departId;
if (depId) {
const resolvedId = resolveDepartId(depId);
selectedDepIds.value = [resolvedId];
loadData();
}
}
async function loadData(arg?: number) {
if (selectedDepIds.value.length > 0) {
if (arg === 1) {
ipagination.current = 1;
}
const params = getQueryParams();
loading.value = true;
try {
const res: any = await defHttp.get({ url: url.pageUserDepart, params });
dataSource.value = (res.records || []).filter((user: UserItem) => !user.username.toLowerCase().includes('admin'));
ipagination.total = res.total;
} finally {
loading.value = false;
}
}
}
function getQueryParams() {
const param = Object.assign({}, queryParam, isorter);
param.searchSecurityLevel = props.secLevel;
param.field = getQueryField();
param.pageNo = ipagination.current;
param.pageSize = ipagination.pageSize;
param.departId = selectedDepIds.value.join(',');
param.isSpecial = props.isSpecial;
return filterObj(param);
}
function getQueryField() {
let str = 'id,';
for (let a = 0; a < columns.length; a++) {
str += ',' + columns[a].dataIndex;
}
return str;
}
function searchReset(num?: number) {
if (num !== 0) {
queryParam.realname = '';
loadData(1);
}
}
function handleTableChange(pagination: any, _filters: any, sorter: any) {
if (Object.keys(sorter).length > 0) {
isorter.column = sorter.field;
isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc';
}
Object.assign(ipagination, pagination);
loadData();
}
function onDepSelect(keys: string[]) {
if (keys.length > 0 && keys[0] != null) {
selectedDepIds.value = [keys[0]];
loadData(1);
}
}
function onSelect(record: UserItem, selected: boolean) {
if (selected) {
selectedUser.value = record;
emit('select', record);
} else {
selectedUser.value = null;
emit('select', null);
}
}
function onSearch() {
loadData(1);
}
async function queryDepartTree() {
expandedKeys.value = [];
departTree.value = [];
try {
const res: any = await queryTreeList();
const arr = [...res];
fullDepartTree.value = [...arr];
if (props.role === 1 || props.role === '1') {
departTree.value = [...arr];
} else {
const resolvedDepartId = resolveDepartId(props.departId);
const tree = recurTree(arr, (node) => {
if (node.id === resolvedDepartId) return [node];
return [];
});
departTree.value = [...tree];
}
departTree.value.forEach((item) => {
expandedKeys.value.push(item.key);
});
await initData();
} catch (e) {
console.error('queryDepartTree error:', e);
}
}
onMounted(async () => {
await queryDepartTree();
});
defineExpose({
getSelectedUser: () => selectedUser.value,
});
</script>
<style scoped>
.ant-table-tbody .ant-table-row td {
padding-top: 10px;
padding-bottom: 10px;
}
</style>
@@ -0,0 +1,68 @@
export interface UserItem {
id: string;
username: string;
realname: string;
orgCodeTxt?: string;
userSecurityLevel?: number;
userSecurityLevel_dictText?: string;
sex_dictText?: string;
sortno?: number;
departId?: string;
departName?: string;
}
export interface DepartTreeNode {
id: string;
key: string;
value: string;
title: string;
isLeaf?: boolean;
departType?: string | number;
distributable?: number;
disableCheckbox?: boolean;
children?: DepartTreeNode[];
description?: string;
parentId?: string;
orgCode?: string;
}
export function deleteIfExist<T extends Record<string, any>>(array: T[], value: T, key: string): void {
const idx = array.findIndex((item) => item[key] === value[key]);
if (idx >= 0) {
array.splice(idx, 1);
}
}
export function pushIfNotExist<T extends Record<string, any>>(array: T[], value: T, key: string): void {
const idx = array.findIndex((item) => item[key] === value[key]);
if (idx < 0) {
array.push(value);
}
}
export function filterDepartTree<T extends Record<string, any>>(departTree: T[], searchValue: string): T[] {
let filtered: T[] = [];
departTree.forEach((item) => {
if (item.title && item.title.includes(searchValue)) {
filtered.push(Object.assign({}, item, { children: null, isLeaf: true }));
}
if (item.children) {
const result = filterDepartTree(item.children, searchValue);
if (result.length > 0) {
filtered = filtered.concat(result);
}
}
});
return filtered;
}
export function recurTree<T extends Record<string, any>, R>(tree: T[], callback: (node: T) => R[]): R[] {
let res: R[] = [];
tree.forEach((item) => {
res = res.concat(callback(item));
if (item.children) {
res = res.concat(recurTree(item.children, callback));
}
});
return res;
}
@@ -51,8 +51,8 @@
</div> </div>
<task-handle-modal @register="registerHandleModal" @success="reloadTodo" /> <task-handle-modal @register="registerHandleModal" @success="reloadTodo" />
<select-entruster-modal @register="registerEntrusterModal" @selected="selectedEntruster" /> <SingleDeptUserModal title="选择委托人" @register="registerEntrusterModal" @selected="selectedEntruster" />
<select-entruster-modal @register="registerComplaintModal" @selected="selectedComplaint" /> <SingleDeptUserModal title="选择转办人" @register="registerComplaintModal" @selected="selectedComplaint" />
</div> </div>
</template> </template>
@@ -66,7 +66,7 @@
import { RightOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons-vue'; import { RightOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { Tooltip } from 'ant-design-vue'; import { Tooltip } from 'ant-design-vue';
import TaskHandleModal from '/@/views/super/bpm/process/personalOffice/myHandleTask/modal/TaskHandleModal.vue'; import TaskHandleModal from '/@/views/super/bpm/process/personalOffice/myHandleTask/modal/TaskHandleModal.vue';
import SelectEntrusterModal from '/@/views/super/bpm/process/personalOffice/myHandleTask/modal/SelectEntrusterModal.vue'; import SingleDeptUserModal from '/@/components/semri/singleDeptUserComponent/SingleDeptUserModal.vue';
import { getTaskInfoForHistory } from '/@/views/super/bpm/process/personalOffice/myHandleTask/useTaskList'; import { getTaskInfoForHistory } from '/@/views/super/bpm/process/personalOffice/myHandleTask/useTaskList';
import { todoColumns } from '../data/todo.data'; import { todoColumns } from '../data/todo.data';
import { ccColumns } from '../data/cc.data'; import { ccColumns } from '../data/cc.data';
@@ -233,12 +233,11 @@ export const searchFormSchema: FormSchema[] = [
{ {
label: '发起人', label: '发起人',
field: 'userName', field: 'userName',
component: 'JSelectUserByDept', component: 'SzDeptUserSelect',
componentProps: { componentProps: {
labelKey: 'realname', valueKey: 'username',
rowKey: 'username', multi: true,
showButton: false, triggerMode: 'input',
isRadioSelection: true,
}, },
buss: 'run', buss: 'run',
}, },