mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-04-25 16:07:19 +08:00
feat: 新增用户管理
This commit is contained in:
valarchie
parent
d076b403c1
commit
fb14f5d075
@ -1,184 +1,212 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref, watch } from "vue";
|
||||||
import { useLoginLogHook } from "./utils/hook";
|
import tree from "./tree.vue";
|
||||||
|
import { useHook } from "./hook";
|
||||||
import { PureTableBar } from "@/components/RePureTableBar";
|
import { PureTableBar } from "@/components/RePureTableBar";
|
||||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
|
|
||||||
|
import Password from "@iconify-icons/ri/lock-password-line";
|
||||||
|
import More from "@iconify-icons/ep/more-filled";
|
||||||
import Delete from "@iconify-icons/ep/delete";
|
import Delete from "@iconify-icons/ep/delete";
|
||||||
|
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||||
|
import Download from "@iconify-icons/ep/download";
|
||||||
|
import Upload from "@iconify-icons/ep/upload";
|
||||||
import Search from "@iconify-icons/ep/search";
|
import Search from "@iconify-icons/ep/search";
|
||||||
import Refresh from "@iconify-icons/ep/refresh";
|
import Refresh from "@iconify-icons/ep/refresh";
|
||||||
|
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||||
import { useUserStoreHook } from "@/store/modules/user";
|
import { useUserStoreHook } from "@/store/modules/user";
|
||||||
// TODO 这个导入声明好长 看看如何优化
|
|
||||||
import { CommonUtils } from "@/utils/common";
|
|
||||||
|
|
||||||
/** 组件name最好和菜单表中的router_name一致 */
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "SystemOperationLog"
|
name: "SystemUser"
|
||||||
});
|
});
|
||||||
|
|
||||||
const loginLogStatusList =
|
const formRef = ref();
|
||||||
useUserStoreHook().dictionaryList["sysLoginLog.status"];
|
|
||||||
|
|
||||||
const tableRef = ref();
|
|
||||||
|
|
||||||
const searchFormRef = ref();
|
|
||||||
const {
|
const {
|
||||||
searchFormParams,
|
searchFormParams,
|
||||||
pageLoading,
|
pageLoading,
|
||||||
columns,
|
columns,
|
||||||
dataList,
|
dataList,
|
||||||
pagination,
|
pagination,
|
||||||
timeRange,
|
buttonClass,
|
||||||
defaultSort,
|
|
||||||
multipleSelection,
|
|
||||||
onSearch,
|
onSearch,
|
||||||
resetForm,
|
resetForm,
|
||||||
exportAllExcel,
|
exportAllExcel,
|
||||||
getLoginLogList,
|
openResetPasswordDialog,
|
||||||
handleDelete,
|
handleDelete,
|
||||||
handleBulkDelete
|
openDialog,
|
||||||
} = useLoginLogHook();
|
getList,
|
||||||
|
openUploadDialog
|
||||||
|
} = useHook();
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => searchFormParams.deptId,
|
||||||
|
() => {
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<!-- 搜索栏 -->
|
<tree class="w-[17%] float-left" v-model="searchFormParams.deptId" />
|
||||||
<el-form
|
<div class="float-right w-[82%]">
|
||||||
ref="searchFormRef"
|
<el-form
|
||||||
:inline="true"
|
ref="formRef"
|
||||||
:model="searchFormParams"
|
:inline="true"
|
||||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
:model="searchFormParams"
|
||||||
>
|
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||||
<el-form-item label="登录IP：" prop="ipAddress">
|
>
|
||||||
<el-input
|
<el-form-item label="用户编号：" prop="userId">
|
||||||
v-model="searchFormParams.ipAddress"
|
<el-input
|
||||||
placeholder="请输入IP地址"
|
v-model="searchFormParams.userId"
|
||||||
clearable
|
placeholder="请输入用户编号"
|
||||||
class="!w-[200px]"
|
clearable
|
||||||
/>
|
class="!w-[160px]"
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户名：" prop="username">
|
|
||||||
<el-input
|
|
||||||
v-model="searchFormParams.username"
|
|
||||||
placeholder="请选择用户名称"
|
|
||||||
clearable
|
|
||||||
class="!w-[200px]"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="状态：" prop="status">
|
|
||||||
<el-select
|
|
||||||
v-model="searchFormParams.status"
|
|
||||||
placeholder="请选择状态"
|
|
||||||
clearable
|
|
||||||
class="!w-[180px]"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in loginLogStatusList"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item label="用户名称：" prop="username">
|
||||||
<el-form-item>
|
<el-input
|
||||||
<label class="el-form-item__label is-required font-bold"
|
v-model="searchFormParams.username"
|
||||||
>登录时间：</label
|
placeholder="请输入用户名称"
|
||||||
>
|
clearable
|
||||||
<!-- TODO 如何消除这个v-model的warning -->
|
class="!w-[160px]"
|
||||||
<el-date-picker
|
/>
|
||||||
class="!w-[240px]"
|
</el-form-item>
|
||||||
v-model="timeRange"
|
<el-form-item label="手机号码：" prop="phoneNumber">
|
||||||
value-format="YYYY-MM-DD"
|
<el-input
|
||||||
type="daterange"
|
v-model="searchFormParams.phoneNumber"
|
||||||
range-separator="-"
|
placeholder="请输入手机号码"
|
||||||
start-placeholder="开始日期"
|
clearable
|
||||||
end-placeholder="结束日期"
|
class="!w-[160px]"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item label="状态：" prop="status">
|
||||||
<el-button
|
<el-select
|
||||||
type="primary"
|
v-model="searchFormParams.status"
|
||||||
:icon="useRenderIcon(Search)"
|
placeholder="请选择"
|
||||||
:loading="pageLoading"
|
clearable
|
||||||
@click="onSearch"
|
class="!w-[160px]"
|
||||||
>
|
>
|
||||||
搜索
|
<el-option
|
||||||
</el-button>
|
v-for="dict in useUserStoreHook().dictionaryList['common.status']"
|
||||||
<el-button
|
:key="dict.value"
|
||||||
:icon="useRenderIcon(Refresh)"
|
:label="dict.label"
|
||||||
@click="resetForm(searchFormRef, tableRef)"
|
:value="dict.value"
|
||||||
>
|
/>
|
||||||
重置
|
</el-select>
|
||||||
</el-button>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item>
|
||||||
</el-form>
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="useRenderIcon(Search)"
|
||||||
|
:loading="pageLoading"
|
||||||
|
@click="onSearch"
|
||||||
|
>
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
<!-- table bar 包裹 table -->
|
<PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
|
||||||
<PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
|
<template #buttons>
|
||||||
<!-- 表格操作栏 -->
|
<el-button
|
||||||
<template #buttons>
|
type="primary"
|
||||||
<el-button
|
:icon="useRenderIcon(AddFill)"
|
||||||
type="danger"
|
@click="openDialog('新增')"
|
||||||
:icon="useRenderIcon(Delete)"
|
>
|
||||||
@click="handleBulkDelete(tableRef)"
|
新增用户
|
||||||
>
|
</el-button>
|
||||||
批量删除
|
<el-button
|
||||||
</el-button>
|
type="info"
|
||||||
<el-button
|
:icon="useRenderIcon(Upload)"
|
||||||
type="primary"
|
@click="openUploadDialog"
|
||||||
@click="CommonUtils.exportExcel(columns, dataList, '登录日志列表')"
|
>
|
||||||
>单页导出</el-button
|
导入
|
||||||
>
|
</el-button>
|
||||||
<el-button type="primary" @click="exportAllExcel">全部导出</el-button>
|
<el-button
|
||||||
</template>
|
type="warning"
|
||||||
<template v-slot="{ size, dynamicColumns }">
|
:icon="useRenderIcon(Download)"
|
||||||
<pure-table
|
@click="exportAllExcel"
|
||||||
border
|
>
|
||||||
ref="tableRef"
|
导出
|
||||||
align-whole="center"
|
</el-button>
|
||||||
showOverflowTooltip
|
</template>
|
||||||
table-layout="auto"
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
:loading="pageLoading"
|
<pure-table
|
||||||
:size="size"
|
border
|
||||||
adaptive
|
adaptive
|
||||||
:data="dataList"
|
align-whole="center"
|
||||||
:columns="dynamicColumns"
|
table-layout="auto"
|
||||||
:default-sort="defaultSort"
|
:loading="pageLoading"
|
||||||
:pagination="pagination"
|
:size="size"
|
||||||
:paginationSmall="size === 'small' ? true : false"
|
:data="dataList"
|
||||||
:header-cell-style="{
|
:columns="dynamicColumns"
|
||||||
background: 'var(--el-table-row-hover-bg-color)',
|
:pagination="pagination"
|
||||||
color: 'var(--el-text-color-primary)'
|
:paginationSmall="size === 'small' ? true : false"
|
||||||
}"
|
:header-cell-style="{
|
||||||
@page-size-change="getLoginLogList"
|
background: 'var(--el-table-row-hover-bg-color)',
|
||||||
@page-current-change="getLoginLogList"
|
color: 'var(--el-text-color-primary)'
|
||||||
@sort-change="getLoginLogList"
|
}"
|
||||||
@selection-change="
|
@page-size-change="getList"
|
||||||
rows => (multipleSelection = rows.map(item => item.logId))
|
@page-current-change="getList"
|
||||||
"
|
>
|
||||||
>
|
<template #operation="{ row }">
|
||||||
<template #operation="{ row }">
|
<el-button
|
||||||
<el-popconfirm
|
class="reset-margin"
|
||||||
:title="`是否确认删除编号为${row.logId}的这条日志`"
|
link
|
||||||
@confirm="handleDelete(row)"
|
type="primary"
|
||||||
>
|
:size="size"
|
||||||
<template #reference>
|
@click="openDialog('编辑', row)"
|
||||||
|
:icon="useRenderIcon(EditPen)"
|
||||||
|
>
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
<el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button
|
||||||
|
class="reset-margin"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon(Delete)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
<el-dropdown>
|
||||||
<el-button
|
<el-button
|
||||||
class="reset-margin"
|
class="ml-3 mt-[2px]"
|
||||||
link
|
link
|
||||||
type="danger"
|
type="primary"
|
||||||
:size="size"
|
:size="size"
|
||||||
:icon="useRenderIcon(Delete)"
|
:icon="useRenderIcon(More)"
|
||||||
>
|
/>
|
||||||
删除
|
<template #dropdown>
|
||||||
</el-button>
|
<el-dropdown-menu>
|
||||||
</template>
|
<el-dropdown-item>
|
||||||
</el-popconfirm>
|
<el-button
|
||||||
</template>
|
:class="buttonClass"
|
||||||
</pure-table>
|
link
|
||||||
</template>
|
type="primary"
|
||||||
</PureTableBar>
|
:size="size"
|
||||||
|
:icon="useRenderIcon(Password)"
|
||||||
|
@click="openResetPasswordDialog(row)"
|
||||||
|
>
|
||||||
|
重置密码
|
||||||
|
</el-button>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
</pure-table>
|
||||||
|
</template>
|
||||||
|
</PureTableBar>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user