Browse Source

fix:修改动态表单列表树,动态表单搜索功能

zcuishan 4 months ago
parent
commit
b9292e7266
2 changed files with 30 additions and 22 deletions
  1. 4 0
      src/utils/helper/exportHelper.ts
  2. 26 22
      src/views/form/template/index.vue

+ 4 - 0
src/utils/helper/exportHelper.ts

@@ -61,6 +61,7 @@ export const handleSearchForm = (option, schema, item, isNeedTrans, convertCamel
           staticOptions: ${JSON.stringify(option.staticOptions)},
           labelField: '${option.labelField}',
           valueField: '${option.valueField}',
+          showSearch: '${option.showSearch}',
           ${
             schema.type === 'checkbox' || schema.type === 'multiple-popup' ? "mode:'multiple'," : ''
           }
@@ -73,6 +74,7 @@ export const handleSearchForm = (option, schema, item, isNeedTrans, convertCamel
             label: schema!.label,
             component: 'XjrSelect',
             componentProps: {
+              showSearch: option.showSearch,
               datasourceType: 'staticData',
               staticOptions: option.staticOptions,
               labelField: option.labelField,
@@ -127,6 +129,7 @@ export const handleSearchForm = (option, schema, item, isNeedTrans, convertCamel
         apiConfig: ${JSON.stringify(option.apiConfig)},
         labelField: '${option.labelField}',
         valueField: '${option.valueField}',
+         showSearch: '${option.showSearch}',
         ${schema.type === 'checkbox' || schema.type === 'multiple-popup' ? "mode:'multiple'," : ''}
         getPopupContainer: () => document.body,
       },
@@ -137,6 +140,7 @@ export const handleSearchForm = (option, schema, item, isNeedTrans, convertCamel
             label: schema!.label,
             component: 'XjrSelect',
             componentProps: {
+              showSearch: option.showSearch,
               datasourceType: 'api',
               apiConfig: option.apiConfig,
               labelField: option.labelField,

+ 26 - 22
src/views/form/template/index.vue

@@ -1,25 +1,28 @@
 <template>
   <PageWrapper dense contentFullHeight contentClass="flex">
     <div v-if="listConfig.isLeftMenu" class="w-1/5 xl:w-1/5 mr-2">
-      <BasicTree
-        :title="listConfig.leftMenuConfig?.menuName"
-        toolbar
-        search
-        :clickRowToExpand="true"
-        :treeData="treeData"
-        :fieldNames="fieldNames"
-        @select="handleSelect"
-      >
-        <template #title="item">
-          <template v-if="item.renderIcon === 'parentIcon'">
-            <Icon :icon="listConfig.leftMenuConfig?.parentIcon" />
+      <div style="overflow-y: hidden; height: calc(100vh - 120px)">
+        <BasicTree
+          :title="listConfig.leftMenuConfig?.menuName"
+          toolbar
+          search
+          :clickRowToExpand="true"
+          :treeData="treeData"
+          :fieldNames="fieldNames"
+          :v-model:expandedKeys="expandedKeys"
+          @select="handleSelect"
+        >
+          <template #title="item">
+            <template v-if="item.renderIcon === 'parentIcon'">
+              <Icon :icon="listConfig.leftMenuConfig?.parentIcon" />
+            </template>
+            <template v-if="item.renderIcon === 'childIcon'">
+              <Icon :icon="listConfig.leftMenuConfig?.childIcon" />
+            </template>
+            {{ treeTitle(item) }}
           </template>
-          <template v-if="item.renderIcon === 'childIcon'">
-            <Icon :icon="listConfig.leftMenuConfig?.childIcon" />
-          </template>
-          {{ treeTitle(item) }}
-        </template>
-      </BasicTree>
+        </BasicTree>
+      </div>
     </div>
 
     <div :class="listConfig.isLeftMenu ? `w-4/5 xl:w-4/5` : `w-full`">
@@ -139,7 +142,7 @@
   import LaunchProcess from '/@/views/workflow/task/components/LaunchProcess.vue';
   import ApprovalProcess from '/@/views/workflow/task/components/ApprovalProcess.vue';
   import { downloadByData } from '/@/utils/file/download';
-  import { onMounted, ref, unref, computed, createVNode, provide, reactive } from 'vue';
+  import { onMounted, ref, unref, computed, createVNode, provide, reactive, UnwrapRef } from 'vue';
   import { useRouter } from 'vue-router';
   import { getFormTemplate } from '/@/api/form/design';
   import { getFormRelease } from '/@/api/form/release';
@@ -186,7 +189,7 @@
   const { path } = unref(currentRoute);
   const printMenuId = computed(() => currentRoute.value.meta.menuId as string);
   const { filterColumnAuth, filterButtonAuth } = usePermission();
-
+  const expandedKeys: Ref<UnwrapRef<any[]>> = ref([]);
   let columns: BasicColumn[] = [], //列表配置
     searchFormSchema: FormSchema[] = [], //搜索框配置
     searchDate: SearchDate[] = [], //搜索栏时间组件配置
@@ -303,7 +306,7 @@
         listConfig.value.leftMenuConfig?.datasourceType === 'dic'
           ? 'name'
           : listConfig.value.leftMenuConfig?.datasourceType === 'api'
-          ? 'label'
+          ? 'name'
           : listConfig.value.leftMenuConfig?.showFieldName || 'title',
     };
   });
@@ -313,7 +316,7 @@
       case 'dic':
         return item.name;
       case 'api':
-        return item.label;
+        return item.name;
       default:
         return item[listConfig.value.leftMenuConfig?.showFieldName || 'title'];
     }
@@ -893,6 +896,7 @@
         false,
       )) as unknown as TreeItem[];
     }
+    console.log(treeData.value);
     addRenderIcon(treeData.value);
   }