<template>
  <div class="roleContainer">
    <el-card class="search" shadow="always">
      <el-form ref="queryFormRef" :model="searchForm" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="searchForm.keywords"
            clearable
            style="width: 200px"
            placeholder="用户名/昵称/手机号"
            @keyup.enter="getUserData"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getUserData"><i-ep-search />搜索</el-button>
          <el-button @click="resetClick"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="list" shadow="always"> 内容 </el-card>
  </div>
</template>

<script lang="ts" setup>
// import { getRolePage } from '@/api/role';
// import { listMenuOptions } from '@/api/menu';
// import { RolePageVO, RoleForm, RoleQuery } from '@/api/role/types';

// const queryFormRef = ref(ElForm);
// const roleData = ref<RolePageVO[]>();
// const searchForm = reactive<RoleQuery>({
//   pageNum: 1,
//   pageSize: 10
// });

onMounted(() => {
  // getUserData();
});

//列表数据
// function getUserData() {
//   loading.value = true;
//   getRolePage(searchForm)
//     .then(({ data }) => {
//       // roleData.value = data.list;
//     })
//     .finally(() => {
//       loading.value = false;
//     });
// }

//搜索
// function resetClick() {
//   queryFormRef.value.resetFields();
//   searchForm.pageNum = 1;
//   getUserData();
// }
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
