feat: 加入搜索框和按钮

src/views/testlist/index.vue

 <template>
-  <div class="test-list">
-    <h2>TestList</h2>
-    <h2>TestList</h2>
-    <h2>TestList</h2>
-    <!-- <slot /> -->
+  <div class="test-list bg-white">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="角色名称：" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="请输入角色名称"
+          clearable
+          class="w-[180px]!"
+        />
+      </el-form-item>
+      <el-form-item label="角色标识：" prop="code">
+        <el-input
+          v-model="form.code"
+          placeholder="请输入角色标识"
+          clearable
+          class="w-[180px]!"
+        />
+      </el-form-item>
+      <el-form-item label="状态：" prop="status">
+        <el-select
+          v-model="form.status"
+          placeholder="请选择状态"
+          clearable
+          class="w-[180px]!"
+        >
+          <el-option label="已启用" value="1" />
+          <el-option label="已停用" value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri/search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <div>
+      <pure-table
+        ref="tableRef"
+        border
+        adaptive
+        :adaptiveConfig="adaptiveConfig"
+        row-key="id"
+        alignWhole="center"
+        showOverflowTooltip
+        :loading="loading"
+        :loading-config="loadingConfig"
+        :data="
+          dataList.slice(
+            (pagination.currentPage - 1) * pagination.pageSize,
+            pagination.currentPage * pagination.pageSize
+          )
+        "
+        :columns="columns"
+        :pagination="pagination"
+        @page-size-change="onSizeChange"
+        @page-current-change="onCurrentChange"
+      />
+    </div>
   </div>
-  <!-- <template> -->
-  <!-- <div>
-    <pure-table
-      ref="tableRef"
-      border
-      adaptive
-      :adaptiveConfig="adaptiveConfig"
-      row-key="id"
-      alignWhole="center"
-      showOverflowTooltip
-      :loading="loading"
-      :loading-config="loadingConfig"
-      :data="
-        dataList.slice(
-          (pagination.currentPage - 1) * pagination.pageSize,
-          pagination.currentPage * pagination.pageSize
-        )
-      "
-      :columns="columns"
-      :pagination="pagination"
-      @page-size-change="onSizeChange"
-      @page-current-change="onCurrentChange"
-    />
-  </div> -->
 </template>
 
 <script setup lang="ts">
 // 组件逻辑部分
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useColumns } from "./columns";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Refresh from "~icons/ep/refresh";
+import { useI18n } from "vue-i18n";
+
+const { locale } = useI18n();
 
 const tableRef = ref();
+const formRef = ref();
 const count = ref(0);
 
 const increment = () => {
   count.value++;
 };
+
+const form = reactive({
+  name: "",
+  code: "",
+  status: ""
+});
 const {
   loading,
   columns,
@@ -52,6 +107,33 @@ const {
   onSizeChange,
   onCurrentChange
 } = useColumns();
+
+async function onSearch() {
+  loading.value = true;
+  // let data = {};
+  // const { data } = await getRoleList(toRaw(form));
+  // dataList.value = data.list;
+  // pagination.total = data.total;
+  // pagination.pageSize = data.pageSize;
+  // pagination.currentPage = data.currentPage;
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+const resetForm = formEl => {
+  if (!formEl) return;
+  formEl.resetFields();
+  onSearch();
+};
+onMounted(() => {
+  // console.log("locale", locale);
+  nextTick(() => {
+    locale.value = "zh-CN"; // 设置默认语言为中文
+  });
+  // console.log(`当前系统采用的语言是：${locale.value}`);
+});
 </script>
 
 <style scoped lang="scss">