feat: 树补充搜索

lib/component/form/form/props.ts

@@ -1,5 +1,3 @@
-
-
 import { reactive, PropType } from 'vue';
 import { PropTypes } from '/nerv-lib/util/type';
 

lib/component/table/table.vue

@@ -14,6 +14,7 @@
       <ns-icon v-if="showBack" class="backIcon" name="left" />{{ tableTitle }}
     </div>
     <div class="ns-table-container">
+      <!-- todo drag -->
       <div class="ns-part-tree" v-if="!isEmpty(treeConfig)">
         <ns-tree-api v-bind="getTreeBindValue" @select="treeSelect" />
       </div>
@@ -667,8 +668,7 @@
     display: flex;
     .ns-part-tree {
       width: 300px;
-      padding-top: 14px;
-      padding-left: 8px;
+      padding: 16px;
       overflow-y: auto;
     }
     .ns-part-table {

lib/component/tree/props.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue';
+import { PropTypes } from '/nerv-lib/util/type';
+import { AxiosRequestConfig } from 'axios';
+import { treeProps as TreeProps } from 'ant-design-vue/es/tree/Tree';
+import { formProps } from '/nerv-lib/component/form/form/props';
+export const treeFormProps = {
+  formLayout: 'vertical',
+  labelCol: { span: 0 },
+  wrapperCol: { span: 24 },
+};
+export const treeProps = {
+  ...TreeProps(),
+  api: {
+    type: [String, Object, Function] as PropType<string | Function | AxiosRequestConfig>,
+    default: undefined,
+  },
+  params: PropTypes.object.def(() => ({})),
+  dynamicParams: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+  requiredParams: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+    PropTypes.bool,
+  ]),
+
+  formConfig: PropTypes.object, //查询表单
+  defaultParams: PropTypes.object, //查询表单
+  value: PropTypes.array.def(() => []),
+  refreshTime: PropTypes.number.def(0),
+  enableTableSession: PropTypes.bool.def(false),
+  expand: PropTypes.bool.def(true),
+  showExpand: PropTypes.bool.def(true),
+  blockNode: PropTypes.bool.def(true),
+  defaultExpandAll: PropTypes.bool.def(true),
+  resultField: PropTypes.string.def('data'),
+  transform: {
+    type: Function,
+    default: (data: any) => data,
+  },
+};

lib/component/tree/tree-api.vue

@@ -1,66 +1,77 @@
 <template>
-  <ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
-    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
-      <slot :name="item" v-bind="data || {}"></slot>
-    </template>
-  </ns-tree>
+  <a-spin :spinning="treeState.loading">
+    <div v-if="!formConfig?.schema">
+      <ns-form ref="formElRef" v-bind="formConfig" :model="formModel" @finish="formFinish" />
+    </div>
+    <ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
+      <template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </ns-tree>
+  </a-spin>
 </template>
 <script lang="ts" setup>
-  import { computed, ref, unref, useAttrs } from 'vue';
+  import { computed, reactive, ref, unref, useAttrs } from 'vue';
   import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
   import { useApi } from '/nerv-lib/use/use-api';
   import { AxiosRequestConfig } from 'axios';
   import { get } from 'lodash-es';
   import { useRoute } from 'vue-router';
-  interface Props {
-    api: string | Function | object;
-    params?: object;
-    defaultParams?: object;
-    transform?: Function;
-    resultField?: string;
-    defaultExpandAll?: boolean;
-    blockNode?: boolean;
-    defaultSelectedKeys?: Array<string>;
-  }
+  import { isEmpty } from 'lodash-es';
+  import { treeProps, treeFormProps } from '/nerv-lib/component/tree/props';
+  const formElRef = ref();
   defineOptions({
     name: 'NsTreeApi',
   });
-  const props = withDefaults(defineProps<Props>(), {
-    resultField: 'data',
-    blockNode: true,
-    defaultExpandAll: true,
-    transform: (data) => data,
-  });
+  const props = defineProps(treeProps);
   const treeData = ref<TreeDataItem[]>([]);
   const selectedKeys = ref(props.defaultSelectedKeys || []);
   const { httpRequest } = useApi();
   const requestConfig: AxiosRequestConfig = { method: 'get' };
   const route = useRoute();
   const attrs = useAttrs();
-
+  const formModel = reactive({});
+  const treeState = reactive({
+    loading: true,
+  });
+  const formConfig = computed(() => {
+    return {
+      ...treeFormProps,
+      ...props.formConfig,
+    };
+  });
+  const formFinish = () => {
+    getData();
+  };
   const getBindValue = computed(() => ({
     ...attrs,
     ...props,
     treeData: treeData.value,
   }));
+  const setLoading = (loading: boolean) => {
+    treeState.loading = loading;
+  };
+  const httpPrams = computed(() => {
+    return { ...route.params, ...route.query, ...props.defaultParams };
+  });
 
   const getData = () => {
-    const { api, defaultParams, transform, resultField } = props;
-
+    const { api, transform, resultField } = props;
     treeData.value = [];
     if (!api) return;
+    setLoading(true);
     httpRequest({
       api,
-      params: { ...route.params, ...route.query, ...defaultParams },
+      params: httpPrams,
       pathParams: { ...route.params, ...route.query },
       requestConfig,
-    }).then((res) => {
-      let data = [];
-      data = get(res, resultField);
-      console.log('sdfasfasf', res);
-
-      treeData.value = transform(data);
-    });
+    })
+      .then((res) => {
+        treeData.value = transform(get(res, resultField));
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   getData();