|
|
@@ -1,231 +1,220 @@
|
|
|
<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
|
puhui999