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

2026-06-25 16:06:58 +08:00
parent 4c4de1e288
commit 469d207b10
6 changed files with 490 additions and 25 deletions
@@ -1,22 +1,38 @@
 <template>
  <div>
-    <a-row v-if="!hideTrigger" class="j-select-row" type="flex" :gutter="8">
-      <a-col class="left">
-        <a-select
-          :value="selectDisplayValue"
-          :placeholder="'请选择人员'"
-          :disabled="disabled"
-          :open="false"
-          mode="multiple"
-          :maxTagCount="3"
-          style="width: 100%"
-          @update:value="handleSelectRemove"
-        />
-      </a-col>
-      <a-col class="right">
-        <a-button type="primary" @click="openModal()" :disabled="disabled">选择</a-button>
-      </a-col>
-    </a-row>
+    <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-select
+            :value="selectDisplayValue"
+            placeholder="请选择人员"
+            :disabled="disabled"
+            :open="false"
+            mode="multiple"
+            :maxTagCount="3"
+            style="width: 100%"
+            @update:value="handleSelectRemove"
+          />
+        </a-col>
+        <a-col class="right">
+          <a-button type="primary" @click="openModal()" :disabled="disabled">选择</a-button>
+        </a-col>
+      </a-row>
+    </template>
    <a-modal
      :width="1200"
      :title="title"
@@ -64,6 +80,7 @@ const props = withDefaults(
    valueKey?: 'id' | 'username';
    title?: string;
    hideTrigger?: boolean;
+    triggerMode?: 'button' | 'input';
  }>(),
  {
    value: '',
@@ -76,6 +93,7 @@ const props = withDefaults(
    valueKey: 'username',
    title: '选择人员',
    hideTrigger: false,
+    triggerMode: 'button',
  }
 );

@@ -178,6 +196,10 @@ defineExpose({ open });
    width: calc(100% - @width - 8px);
  }

+  .left-full {
+    width: 100%;
+  }
+
  .right {
    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>

    <task-handle-modal @register="registerHandleModal" @success="reloadTodo" />
-    <select-entruster-modal @register="registerEntrusterModal" @selected="selectedEntruster" />
-    <select-entruster-modal @register="registerComplaintModal" @selected="selectedComplaint" />
+    <SingleDeptUserModal title="选择委托人" @register="registerEntrusterModal" @selected="selectedEntruster" />
+    <SingleDeptUserModal title="选择转办人" @register="registerComplaintModal" @selected="selectedComplaint" />
  </div>
 </template>

@@ -66,7 +66,7 @@
  import { RightOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons-vue';
  import { Tooltip } from 'ant-design-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 { todoColumns } from '../data/todo.data';
  import { ccColumns } from '../data/cc.data';
@@ -233,12 +233,11 @@ export const searchFormSchema: FormSchema[] = [
  {
    label: '发起人',
    field: 'userName',
-    component: 'JSelectUserByDept',
+    component: 'SzDeptUserSelect',
    componentProps: {
-      labelKey: 'realname',
-      rowKey: 'username',
-      showButton: false,
-      isRadioSelection: true,
+      valueKey: 'username',
+      multi: true,
+      triggerMode: 'input',
    },
    buss: 'run',
  },