feat: 树补充搜索

hx-ai-intelligent/src/view/equipmentManage/group/config.ts

@@ -49,7 +49,40 @@ export const tableConfig = (el, elGroup, elFormula) => {
     treeConfig: {
       defaultExpandAll: true,
       api: () => {
-        return Promise.resolve(data);
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(data);
+          }, 100);
+        });
+      },
+      formConfig: {
+        schemas: [
+          {
+            field: 'type',
+            label: '',
+            component: 'NsRadioGroup',
+            autoSubmit: true,
+            defaultValue: 1,
+            componentProps: {
+              options: [
+                { label: '碳排', value: 1 },
+                { label: '用电量', value: 2 },
+                { label: '用水量', value: 3 },
+                { label: '燃气量', value: 4 },
+                { label: '供热量', value: 5 },
+              ],
+            },
+          },
+          {
+            field: 'name',
+            label: '',
+            component: 'NsInput',
+            autoSubmit: true,
+            componentProps: {
+              placeholder: '请输入',
+            },
+          },
+        ],
       },
     },
 

hx-ai-intelligent/src/view/equipmentManage/ledger/config.ts

@@ -1,6 +1,5 @@
 import { dateUtil } from '/nerv-lib/util/date-util';
 import data from './mock.json';
-
 export const tableConfig = {
   title: '设备台账',
   // api: '/carbon_emission/device/getDeviceList',
@@ -8,7 +7,24 @@ export const tableConfig = {
   treeConfig: {
     defaultExpandAll: true,
     api: () => {
-      return Promise.resolve(data);
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(data);
+        }, 100);
+      });
+    },
+    formConfig: {
+      schemas: [
+        {
+          field: 'name',
+          label: '设备名称',
+          component: 'NsInput',
+          autoSubmit: true,
+          componentProps: {
+            placeholder: '请输入',
+          },
+        },
+      ],
     },
   },
   params: {

hx-ai-intelligent/src/view/equipmentManage/ledger/index.vue

@@ -3,5 +3,8 @@
 </template>
 <script lang="ts" setup>
   import { tableConfig } from './config';
+  defineOptions({
+    name: 'LedgerIndex', // 与页面路由name一致缓存才可生效
+  });
 </script>
 <style lang="less" scoped></style>

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: 16px;
-      padding-left: 8px;
       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,65 +1,76 @@
 <template>
+  <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 in Object.keys($slots)" :key="item">
+      <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 {
+  import { isEmpty } from 'lodash-es';
-    api: string | Function | object;
+  import { treeProps, treeFormProps } from '/nerv-lib/component/tree/props';
-    params?: object;
+  const formElRef = ref();
-    defaultParams?: object;
-    transform?: Function;
-    resultField?: string;
-    defaultExpandAll?: boolean;
-    blockNode?: boolean;
-    defaultSelectedKeys?: Array<string>;
-  }
   defineOptions({
     name: 'NsTreeApi',
   });
-  const props = withDefaults(defineProps<Props>(), {
+  const props = defineProps(treeProps);
-    resultField: 'data',
-    blockNode: true,
-    defaultExpandAll: true,
-    transform: (data) => data,
-  });
   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 = [];
+      .then((res) => {
-      data = get(res, resultField);
+        treeData.value = transform(get(res, resultField));
-      console.log('sdfasfasf', res);
+      })
-
+      .finally(() => {
-      treeData.value = transform(data);
+        setLoading(false);
       });
   };