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

2026-06-25 16:06:58 +08:00
parent 4c4de1e288
commit 469d207b10
6 changed files with 490 additions and 25 deletions
@@ -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>