feat: 部门选择优化

src/api/system/department/index.ts

@@ -13,7 +13,7 @@ enum Api {
   Page = '/organization/department/page',
   Tree = '/organization/department/tree',
   Trees = '/organization/department/trees',
-  queryDeptTrees = '/common/queryDeptTrees',
+  queryDeptTrees = '/organization/department/queryDeptTrees',
   EnabledTree = '/organization/department/enabled-tree',
   Info = '/organization/department/info',
   Department = '/organization/department',

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

@@ -4,7 +4,7 @@
       :bordered="false"
       class="search-input"
       placeholder="请输入组织名称搜索"
-      v-model:value="params.queryName"
+      v-model:value="params.name"
       allowClear
       @search="searchDepart">
     </a-input-search>
@@ -13,8 +13,9 @@
         :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>
+          <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>
@@ -63,7 +64,8 @@ const treeData = ref([])
 const params = ref({
   id: '',
   code: '',
-  queryName: '',
+  name: '',
+  isQueryIdPath: false,
   parentNode: false,
   excludeDeptTypes: props.justCompany ? '0' : '',
   ids: props.defaultDepts
@@ -71,6 +73,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) {
@@ -85,7 +98,7 @@ 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();
@@ -97,7 +110,10 @@ function searchDepart() {
 async function getList(type = 'default') {
   if (props.parentNode) {
     params.value.id = props.parentNode
+
   }
+  params.value.isQueryIdPath = !(type == 'default')
+  params.value.parentNode = !(type == 'default')
   let list = resetTreeList(await getQueryDeptTrees(params.value), type, true)
   treeData.value = list
   emit('query-completed');
@@ -155,6 +171,11 @@ watch(
         }
     }
 }
+    :deep(.highlight) {
+      color: orange;
+      font-weight: bold;
+      background-color: #fff2e8;
+    }
   .tree-box {
       flex: 1;
       display: flex;