vue3.2/Vite/Ts83: 用户搜索业务

└─src
    ├─api
    │  └─acl
    │      └─user
    │          └─index.ts
    └─views
        └─acl
            └─user
                └─index.vue

<template>
  <el-card>
    <el-form :inline="true" class="form">
      <el-form-item label="用户名">
        <el-input palceholder="输入搜索的用户名" v-model="keyWord"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primay"
          @click="search"
          :disabled="!keyWord ? true : false"
          >搜索</el-button
        >
        <el-button type="primay" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- ... -->
</template>
<script setup lang="ts">
  import { getHasUser } from "@/api/acl/user";
  import type { UserResponseData } from "@/api/acl/user/type";
  //...
  import useLayOutSettingStore from "@/store/modules/setting";
  let settingStore = useLayOutSettingStore();
  //...
  let pageNo = ref<number>(1);
  let pageSize = ref<number>(5);
  let total = ref<number>(0);
  let userArr = ref<Records>([]);
  let keyWord = ref<string>("");

  const getHasUser = async (pager = 1) => {
    pageNo.value = pager;
    const result: UserResponseData = await getHasUser(
      pageNo.value,
      pageSize.value,
      keyWord.value
    );
    if (result.code === 200) {
      total.value = result.data.total;
      userArr.value = result.data.records;
    }
  };

  const search = () => {
    getHasUser();
    keyWord.value = "";
  };

  const reset = () => {
    settingStore.refresh = !settingStore.refresh;
  };
</script>

//...
export const reqUserInfo = (page: number, limit: number, username: string) =>
  request.get<any, UserResponseData>(
    API.ALLUSER_URL + `${page}/${limit}?username=${username}`
  );