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

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 = '/common/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,28 @@
 <template>
-  <div class="select-department-tree">
+  <div class="tree-box">
-    <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
+      <a-input-search
-      :selectable="props.selectable" :multiple="props.multiple" v-model:checkable="checkable"
+      :bordered="false"
-      v-model:tree-data="treeData" :load-data="loadData" @select="selectData">
+      class="search-input"
-      <template #title="{ title, key }">
+      placeholder="请输入组织名称搜索"
-        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+      v-model:value="params.queryName"
-        <template v-else>{{ title }}</template>
+      allowClear
-      </template>
+      @search="searchDepart">
-    </a-tree>
+    </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-if="key === '0-0-1-0'" style="color: #1890ff">{{ 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: {
@@ -54,7 +63,7 @@ const treeData = ref([])
 const params = ref({
   id: '',
   code: '',
-  name: '',
+  queryName: '',
   parentNode: false,
   excludeDeptTypes: props.justCompany ? '0' : '',
   ids: props.defaultDepts
@@ -82,21 +91,30 @@ const loadData = (node) => {
     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 +144,25 @@ 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;
+        }
+    }
+}
+  .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;