优化下拉组件

apps/web-antd/src/views/dataManger/deviceData/DeviceSelect.vue

@@ -33,7 +33,7 @@ const options = ref<any[]>([]);
 const query = ref({
   pageIndex: 1,
   pageSize: 10,
-  meterName: '',
+  SearchKeyword: '',
 });
 const total = ref(0);
 const loading = ref<boolean>(false);
@@ -53,7 +53,7 @@ const fetchData = async () => {
       body: {
         pageIndex: query.value.pageIndex,
         pageSize: query.value.pageSize,
-        meterName: query.value.meterName,
+        SearchKeyword: query.value.SearchKeyword,
       },
     });
 
@@ -93,7 +93,7 @@ const changePage = (type: number) => {
  */
 const fetchDevice = useDebounceFn((value: string) => {
   query.value.pageIndex = 1;
-  query.value.meterName = value;
+  query.value.SearchKeyword = value;
   fetchData();
 }, 500);
 

apps/web-antd/src/views/dataManger/deviceData/index copy.vue

@@ -1,120 +0,0 @@
-<script lang="ts" setup>
-  import { ref, computed } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-  import { message, Select, Divider, Row } from 'ant-design-vue';
-  import { getUserListApi } from '/@/api/sys/user';
-  import { baggageClerkFormSchema } from '../baggageClerk.data';
-  import type { SelectProps } from 'ant-design-vue';
-  import { useDebounceFn } from '@vueuse/core';
-  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
-
-  const isUpdate = ref(true);
-  const [registerForm] = useForm({
-    labelWidth: 130,
-    baseColProps: { span: 24 },
-    schemas: baggageClerkFormSchema,
-    showActionButtonGroup: false,
-    actionColOptions: {
-      span: 23,
-    },
-  });
-
-  // 代码实现:---------------------------------------------------------------------
-
-  const VNodes = (_, { attrs }) => {
-    return attrs.vnodes;
-  };
-
-  const options = ref<SelectProps['options']>([]);
-  const query = ref({
-    page: 1,
-    pageSize: 10,
-    name: '',
-  });
-  const total = ref(0);
-  const loading = ref<boolean>(false);
-
-  // 最大页码
-  const maxPage = computed(() => {
-    return Math.ceil(total.value / query.value.pageSize);
-  });
-
-  /**
-   * 获取用户列表数据
-   */
-  const fetchData = async () => {
-    loading.value = true;
-    try {
-      const res = await getUserListApi({
-        page: query.value.page,
-        pageSize: query.value.pageSize,
-        name: query.value.name,
-      });
-      loading.value = false;
-      options.value = res.items.map(({ id: value, nickname: label }) => ({ label, value }));
-      total.value = res.total;
-    } catch (error) {
-      console.log(error);
-      message.error('数据加载失败!');
-    }
-  };
-
-  /**
-   * 上下页
-   * @param type
-   */
-  const changePage = (type) => {
-    if (type === 1) {
-      if (query.value.page >= maxPage.value) return;
-      query.value.page += 1;
-      fetchData();
-    } else {
-      if (query.value.page == 1) return;
-      query.value.page -= 1;
-      fetchData();
-    }
-  };
-
-  /**
-   * 用户搜索
-   */
-  const fetchUser = useDebounceFn((value) => {
-    query.value.page = 1;
-    query.value.name = value;
-    fetchData();
-  }, 1000);
-</script>
-
-<template>
-  <!-- 注意 :
-  这里要把filter-option设为false,因为select的filter-option默认为true,
-  当使用onSearch获取的数据后,会将数据再过滤一遍,导致获取到数据,视图无变化
-  -->
-  <BasicForm @register="registerForm">
-    <template #adminIdSlot="{ model, field }">
-      <Select
-        v-model:value="model[field]"
-        :showSearch="true"
-        @search="fetchUser"
-        :options="options"
-        placeholder="请选择管理员"
-        :filter-option="false"
-        :disabled="isUpdate"
-      >
-        <template #dropdownRender="{ menuNode: menu }">
-          <v-nodes :vnodes="menu" />
-          <Divider style="margin: 4px 0" />
-          <div @mousedown="(e) => e.preventDefault()">
-            <Row type="flex" justify="space-around" align="middle">
-              <LeftOutlined @click="changePage(0)" />
-              <div>{{ `${query.page}/${maxPage}` }}</div>
-              <RightOutlined @click="changePage(1)" />
-            </Row>
-          </div>
-        </template>
-      </Select>
-    </template>
-  </BasicForm>
-</template>
-
-<style lang="less" scoped></style>