Skip to content

phsl / admin

Go to a project
Commit 1434cdab by YunaiV
Options

REVIEW 用户管理（调整布局）

parent 854bf851
Showing with 214 additions and 223 deletions
src/views/system/tenantPackage/TenantPackageForm.vue
......@@ -91,7 +91,7 @@ const formRules = reactive({
const formRef = ref() // 表单 Ref
const menuOptions = ref<any[]>([]) // 树形结构数据
const menuExpand = ref(false) // 展开/折叠
const treeRef = ref<ElTree>() // 树组件 Ref
const treeRef = ref<InstanceType<typeof ElTree>>() // 树组件 Ref
const treeNodeAll = ref(false) // 全选/全不选
/** 打开弹窗 */
......
src/views/system/user/index.vue
<template>
<div class="app-container">
<content-wrap>
<!-- 搜索工作栏 -->
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<UserDeptTree @node-click="handleDeptNodeClick" />
</el-col>
<!--用户数据-->
<el-col :span="20" :xs="24">
<el-form
:model="queryParams"
ref="queryFormRef"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="username">
<el-input
v-model="queryParams.username"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input
v-model="queryParams.mobile"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value as number"
:label="dict.label"
:value="dict.value as number"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
style="width: 240px"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"
><Icon icon="ep:search" />搜索</el-button
>
<el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb-8px">
<el-col :span="1.5">
<el-button
type="primary"
plain
size="small"
@click="handleAdd"
v-hasPermi="['system:user:create']"
><Icon icon="ep:plus" />新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
size="small"
@click="handleImport"
v-hasPermi="['system:user:import']"
><Icon icon="ep:upload" />导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
size="small"
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:user:export']"
><Icon icon="ep:download" />导出</el-button
>
</el-col>
</el-row>
<el-table v-loading="loading" :data="userList">
<el-table-column
label="用户编号"
align="center"
key="id"
prop="id"
v-if="columns[0].visible"
/>
<el-table-column
label="用户名称"
align="center"
key="username"
prop="username"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
<!-- 搜索工作栏 -->
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<content-wrap class="h-1/1">
<UserDeptTree @node-click="handleDeptNodeClick" />
</content-wrap>
</el-col>
<!--用户数据-->
<el-col :span="20" :xs="24">
<content-wrap>
<el-form
:model="queryParams"
ref="queryFormRef"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="username">
<el-input
v-model="queryParams.username"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
<el-table-column
label="用户昵称"
align="center"
key="nickname"
prop="nickname"
v-if="columns[2].visible"
:show-overflow-tooltip="true"
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input
v-model="queryParams.mobile"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
<el-table-column
label="部门"
align="center"
key="deptName"
prop="dept.name"
v-if="columns[3].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码"
align="center"
key="mobile"
prop="mobile"
v-if="columns[4].visible"
width="120"
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
style="width: 240px"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-table-column label="状态" key="status" v-if="columns[5].visible" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="0"
:inactive-value="1"
@change="handleStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
v-if="columns[6].visible"
width="160"
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
<el-button type="primary" plain @click="handleAdd" v-hasPermi="['system:user:create']">
<Icon icon="ep:plus" /> 新增
</el-button>
<el-button
type="info"
size="small"
@click="handleImport"
v-hasPermi="['system:user:import']"
>
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
<Icon icon="ep:upload" /> 导入
</el-button>
<el-button
type="warning"
size="small"
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:user:export']"
>
<template #default="scope">
<div class="flex justify-center items-center">
<el-button
type="primary"
link
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:update']"
><Icon icon="ep:edit" />修改</el-button
>
<el-dropdown
@command="(command) => handleCommand(command, scope.$index, scope.row)"
v-hasPermi="[
'system:user:delete',
'system:user:update-password',
'system:permission:assign-user-role'
]"
>
<el-button type="primary" link><Icon icon="ep:d-arrow-right" />更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<!-- div包住避免控制台报错：Runtime directive used on component with non-element root node -->
<div v-if="scope.row.id !== 1" v-hasPermi="['system:user:delete']">
<el-dropdown-item command="handleDelete" type="text"
><Icon icon="ep:delete" />删除</el-dropdown-item
>
</div>
<div v-hasPermi="['system:user:update-password']">
<el-dropdown-item command="handleResetPwd" type="text"
><Icon icon="ep:key" />重置密码</el-dropdown-item
></div
>
<div v-hasPermi="['system:permission:assign-user-role']">
<el-dropdown-item command="handleRole" type="text"
><Icon icon="ep:circle-check" />分配角色</el-dropdown-item
></div
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
<Icon icon="ep:download" />导出
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<content-wrap>
<el-table v-loading="loading" :data="userList">
<el-table-column
label="用户编号"
align="center"
key="id"
prop="id"
v-if="columns[0].visible"
/>
</el-col>
</el-row>
</content-wrap>
<!-- 添加或修改用户对话框 -->
<UserForm ref="userFormRef" @success="getList" />
<!-- 用户导入对话框 -->
<UserImportForm ref="userImportFormRef" @success="getList" />
<!-- 分配角色 -->
<UserAssignRoleForm ref="userAssignRoleFormRef" @success="getList" />
</div>
<el-table-column
label="用户名称"
align="center"
key="username"
prop="username"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="用户昵称"
align="center"
key="nickname"
prop="nickname"
v-if="columns[2].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="部门"
align="center"
key="deptName"
prop="dept.name"
v-if="columns[3].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码"
align="center"
key="mobile"
prop="mobile"
v-if="columns[4].visible"
width="120"
/>
<el-table-column label="状态" key="status" v-if="columns[5].visible" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="0"
:inactive-value="1"
@change="handleStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
v-if="columns[6].visible"
width="160"
>
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
<template #default="scope">
<div class="flex justify-center items-center">
<el-button
type="primary"
link
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:update']"
><Icon icon="ep:edit" />修改</el-button
>
<el-dropdown
@command="(command) => handleCommand(command, scope.$index, scope.row)"
v-hasPermi="[
'system:user:delete',
'system:user:update-password',
'system:permission:assign-user-role'
]"
>
<el-button type="primary" link><Icon icon="ep:d-arrow-right" />更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<!-- div包住避免控制台报错：Runtime directive used on component with non-element root node -->
<div v-if="scope.row.id !== 1" v-hasPermi="['system:user:delete']">
<el-dropdown-item command="handleDelete" type="text"
><Icon icon="ep:delete" />删除</el-dropdown-item
>
</div>
<div v-hasPermi="['system:user:update-password']">
<el-dropdown-item command="handleResetPwd" type="text"
><Icon icon="ep:key" />重置密码</el-dropdown-item
></div
>
<div v-hasPermi="['system:permission:assign-user-role']">
<el-dropdown-item command="handleRole" type="text"
><Icon icon="ep:circle-check" />分配角色</el-dropdown-item
></div
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
</el-col>
</el-row>
<!-- 添加或修改用户对话框 -->
<UserForm ref="userFormRef" @success="getList" />
<!-- 用户导入对话框 -->
<UserImportForm ref="userImportFormRef" @success="getList" />
<!-- 分配角色 -->
<UserAssignRoleForm ref="userAssignRoleFormRef" @success="getList" />
</template>
<script setup lang="ts" name="User">
......@@ -280,7 +269,8 @@ const columns = ref([
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true }
])
/* 查询列表 */
/** 查询列表 */
const getList = () => {
loading.value = true
getUserPageApi(queryParams).then((response) => {
......@@ -289,6 +279,7 @@ const getList = () => {
loading.value = false
})
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment