Merge branch 'ga-2025-07' into 'dev'

feat: 组织搜索模糊搜索添加

See merge request itc-framework/ma/2024/front!93

src/api/system/department/index.ts

@@ -13,6 +13,7 @@ enum Api {
   Page = '/organization/department/page',
   Tree = '/organization/department/tree',
   Trees = '/organization/department/trees',
+  queryDeptTrees = '/organization/department/queryDeptTrees',
   EnabledTree = '/organization/department/enabled-tree',
   Info = '/organization/department/info',
   Department = '/organization/department',
@@ -54,6 +55,24 @@ export async function getDepartmentTrees(
     },
   );
 }
+/**
+ * @description: 查询部门树(新，名称查询返回树)
+ */
+export async function getQueryDeptTrees(
+  params?: any,
+  mode: ErrorMessageMode = 'modal',
+) {
+  return defHttp.get<DepartmentTreeModel>(
+    {
+      url: Api.queryDeptTrees,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
 
 /**
  * @description: 查询部门树

src/components/Form/src/components/SelectDepartmentTreeV2.vue

@@ -1,19 +1,29 @@
 <template>
-  <div class="select-department-tree">
-    <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
-      :selectable="props.selectable" :multiple="props.multiple" v-model:checkable="checkable"
-      v-model:tree-data="treeData" :load-data="loadData" @select="selectData">
-      <template #title="{ title, key }">
-        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
-        <template v-else>{{ title }}</template>
-      </template>
-    </a-tree>
+  <div class="tree-box">
+      <a-input-search
+      :bordered="false"
+      class="search-input"
+      placeholder="请输入组织名称搜索"
+      v-model:value="params.name"
+      allowClear
+      @search="searchDepart">
+    </a-input-search>
+    <div class="select-department-tree">
+      <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
+        :selectable="props.selectable" :multiple="props.multiple" v-model:checkable="checkable"
+        v-model:tree-data="treeData" :load-data="loadData" @select="selectData">
+        <template #title="{ title, key }">
+          <span v-html="highLightSearch(title)"></span>
+          <!-- <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{key}}{{ title }}</span>
+          <template v-else>{{ title }}</template> -->
+        </template>
+      </a-tree>
+    </div>
   </div>
-
 </template>
 <script lang="ts" setup>
 import { ref, watch, onMounted } from 'vue';
-import { getDepartmentTrees } from '/@/api/system/department';
+import { getDepartmentTrees, getQueryDeptTrees } from '/@/api/system/department';
 import { useUserStore } from '/@/store/modules/user';
 const props = defineProps({
   multiple: {
@@ -62,6 +72,17 @@ const params = ref({
 onMounted(() => {
   getList()
 })
+
+const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+const highLightSearch = (title) => {
+  const keyword = params.value.name;
+  if (!keyword) return title;
+  const escapedKeyword = escapeRegExp(keyword);
+  const reg = new RegExp(escapedKeyword, 'g');
+  return title.replace(reg, `<span class="highlight">${keyword}</span>`);
+}
+
 const loadData = (node) => {
   return new Promise(async (resolve: (value?: unknown) => void) => {
     if (node.dataRef.children.length) {
@@ -76,27 +97,36 @@ const loadData = (node) => {
       excludeDeptTypes: props.justCompany ? '0' : '',
       ids: props.defaultDepts
     }
-    let list = resetTreeList(await getDepartmentTrees(param))
+    let list = resetTreeList(await getQueryDeptTrees(param))
     node.dataRef.children = list[0].children
     treeData.value = [...treeData.value];
     resolve();
   });
 }
-async function getList() {
+function searchDepart() {
+  getList('search')
+}
+async function getList(type = 'default') {
   if (props.parentNode) {
     params.value.id = props.parentNode
   }
-  let list = resetTreeList(await getDepartmentTrees(params.value))
+  let list = resetTreeList(await getQueryDeptTrees(params.value), type, true)
   treeData.value = list
   emit('query-completed');
 }
-function resetTreeList(list) {
+function resetTreeList(list, type='default', isFirst = false) {
+  if(type == 'search' && isFirst) {
+    expandedKeys.value = []
+  }
   const result = list.map(item => {
+    if(type == 'search' && item.children && item.children.length) {
+      expandedKeys.value.push(item.id)
+    }
     return {
       ...item,
       ...{
         key: item.id,
-        children: resetTreeList(item.children),
+        children: resetTreeList(item.children, type),
         title: item.name
       }
     }
@@ -126,3 +156,30 @@ watch(
         }
     );
 </script>
+
+<style lang="less" scoped>
+.search-input{
+    padding: 4px 8px;
+    :deep(.ant-input-group-addon) {
+        .ant-btn {
+          border: none!important;
+          box-shadow: none!important;
+        }
+    }
+}
+    :deep(.highlight) {
+      color: orange;
+      font-weight: bold;
+      background-color: #fff2e8;
+    }
+  .tree-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      .select-department-tree {
+        flex: 1;
+        overflow: scroll;
+      }
+  }
+</style>

src/components/Form/src/components/SelectDepartmentV2.vue

@@ -175,6 +175,9 @@
     }
 
     function show() {
+        if (props.disabled) {
+            return;
+        }
         visible.value = true;
         loading.value = true;
         if(props.defaultDeptField) {
@@ -234,7 +237,9 @@
             width: 60%;
             height: 100%;
             position: relative;
-            overflow: scroll;
+            // overflow: scroll;
+            display: flex;
+            flex-direction: column;
 
             .loading-box {
                 position: absolute;