WLT-Security-Review
/
web-admin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(user): 增加区域和企业选择功能

Browse Source 
- 新增省、市、区三级区域选择功能
- 增加企业下拉选择
- 优化用户表单，添加区域类型和用户类型选择
- 修复区域选择的校验逻辑
main
Tuzki 2 months ago
parent 14b6223ccb
commit a3b4b42d39
2 changed files with 479 additions and 254 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      src/api/system/user.js
  2. 725
      src/views/system/user/index.vue

8
src/api/system/user.js
Unescape View File

@ -143,3 +143,11 @@ export function importTemplate() {
responseType: 'blob'
})
}
//获得企业数据
export function getComList() {
return request({
url: '/review/enterprise-info/list',
method: 'get',
})
}

725
src/views/system/user/index.vue
Unescape View File

@ -1,240 +1,302 @@
<template>
<div class="app-container">
<doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
<doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
<doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
<!-- 搜索工作栏 -->
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
</div>
<div class="head-container">
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"/>
</div>
</el-col>
<!--用户数据-->
<el-col :span="20" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :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.native="handleQuery"/>
<div class="app-container">
<doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
<doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
<doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
<!-- 搜索工作栏 -->
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
style="margin-bottom: 20px" />
</div>
<div class="head-container">
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
:filter-node-method="filterNode" ref="tree" default-expand-all highlight-current
@node-click="handleNodeClick" />
</div>
</el-col>
<!--用户数据-->
<el-col :span="20" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :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.native="handleQuery" />
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px"
@keyup.enter.native="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 statusDictDatas" :key="parseInt(dict.value)" :label="dict.label"
:value="parseInt(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="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['system:user:create']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
v-hasPermi="['system:user:import']">导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
v-hasPermi="['system:user:export']">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch" v-hasPermi="['system:user:delete']">
批量删除
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleRowCheckboxChange">
<el-table-column type="selection" width="55" />
<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-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 v-slot="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 v-slot="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 v-slot="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:user:update']">修改</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 size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDelete" v-if="scope.row.id !== 1" size="mini" type="text"
icon="el-icon-delete" v-hasPermi="['system:user:delete']">删除</el-dropdown-item>
<el-dropdown-item command="handleResetPwd" size="mini" type="text" icon="el-icon-key"
v-hasPermi="['system:user:update-password']">重置密码</el-dropdown-item>
<el-dropdown-item command="handleRole" size="mini" type="text" icon="el-icon-circle-check"
v-hasPermi="['system:permission:assign-user-role']">分配角色</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList" />
</el-col>
</el-row>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="form.nickname" placeholder="请输入用户昵称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :clearable="false"
placeholder="请选择归属部门" :normalizer="normalizer" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px"
@keyup.enter.native="handleQuery"/>
<el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</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 statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="form.id === undefined" label="用户名称" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.id === undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="dict.label"
:value="parseInt(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="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
</el-col>
<el-col :span="12">
<el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择">
<el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="区域类型" prop="areaType">
<el-select v-model="form.areaType" placeholder="请选择区域类型" clearable style="width: 100%">
<el-option v-for="dict in areaTypeDictDatas" :key="parseInt(dict.value)" :label="dict.label"
:value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['system:user:create']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
v-hasPermi="['system:user:import']">导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
v-hasPermi="['system:user:export']">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['system:user:delete']"
>
批量删除
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleRowCheckboxChange">
<el-table-column type="selection" width="55"/>
<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-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 v-slot="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 v-slot="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 v-slot="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:user:update']">修改</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 size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDelete" v-if="scope.row.id !== 1" size="mini" type="text" icon="el-icon-delete"
v-hasPermi="['system:user:delete']">删除</el-dropdown-item>
<el-dropdown-item command="handleResetPwd" size="mini" type="text" icon="el-icon-key"
v-hasPermi="['system:user:update-password']">重置密码</el-dropdown-item>
<el-dropdown-item command="handleRole" size="mini" type="text" icon="el-icon-circle-check"
v-hasPermi="['system:permission:assign-user-role']">分配角色</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
</el-col>
</el-row>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickname">
<el-input v-model="form.nickname" placeholder="请输入用户昵称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :clearable="false"
placeholder="请选择归属部门" :normalizer="normalizer"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="form.id === undefined" label="用户名称" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.id === undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择">
<el-option
v-for="item in postOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</el-col>
<el-col :span="12">
<el-form-item label="用户类型" prop="userType">
<el-select v-model="form.userType" placeholder="请选择用户类型" clearable style="width: 100%">
<el-option v-for="dict in userTypeDictDatas" :key="parseInt(dict.value)" :label="dict.label"
:value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" v-if="form.userType == 0">
<el-form-item label="企业" prop="enterpriseId">
<el-select v-model="form.enterpriseId" placeholder="请选择企业">
<el-option v-for="item in compList" :key="item.id" :label="item.enterpriseName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="归属地区">
<el-col :span="7">
<el-form-item prop="proviceCode">
<el-select v-model="form.proviceCode" placeholder="请选择省" clearable @change="handleProvinceChange"
style="width: 100%">
<el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-if="form.areaType == 2 || form.areaType == 3" :span="1" style="text-align: center; line-height: 36px;">-</el-col>
<el-col v-if="form.areaType == 2 || form.areaType == 3" :span="7">
<el-form-item prop="cityCode">
<el-select v-model="form.cityCode" placeholder="请选择市" clearable @change="handleCityChange"
:disabled="!form.proviceCode" style="width: 100%">
<el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-if="form.areaType == 3" :span="1" style="text-align: center; line-height: 36px;">-</el-col>
<el-col v-if="form.areaType == 3" :span="7">
<el-form-item prop="countyCode">
<el-select v-model="form.countyCode" placeholder="请选择区县" clearable :disabled="!form.cityCode"
style="width: 100%">
<el-option v-for="item in countyOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
<!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate">下载模板</el-link>
</div>
</el-dialog>
<!-- 分配角色 -->
<el-dialog title="分配角色" :visible.sync="openRole" width="500px" append-to-body>
<el-form :model="form" label-width="80px">
<el-form-item label="用户名称">
<el-input v-model="form.username" :disabled="true" />
</el-form-item>
<el-form-item label="用户昵称">
<el-input v-model="form.nickname" :disabled="true" />
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitRole">确 定</el-button>
<el-button @click="cancelRole">取 消</el-button>
</div>
</el-dialog>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- 分配角色 -->
<el-dialog title="分配角色" :visible.sync="openRole" width="500px" append-to-body>
<el-form :model="form" label-width="80px">
<el-form-item label="用户名称">
<el-input v-model="form.username" :disabled="true" /> </el-form-item>
<el-form-item label="用户昵称">
<el-input v-model="form.nickname"
:disabled="true" />
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.roleIds"
multiple
placeholder="请选择">
<el-option v-for="item in roleOptions"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer"
class="dialog-footer">
<el-button type="primary"
@click="submitRole">确 定</el-button>
<el-button @click="cancelRole">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
@ -248,25 +310,32 @@ import {
listUser,
resetUserPwd,
updateUser,
delUserList
delUserList,
getComList
} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getAreaTree } from "@/api/system/area";
import {listSimpleDepts} from "@/api/system/dept";
import {listSimplePosts} from "@/api/system/post";
import { listSimpleDepts } from "@/api/system/dept";
import { listSimplePosts } from "@/api/system/post";
import {CommonStatusEnum} from "@/utils/constants";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import {assignUserRole, listUserRoles} from "@/api/system/permission";
import {listSimpleRoles} from "@/api/system/role";
import {getBaseHeader} from "@/utils/request";
import { CommonStatusEnum } from "@/utils/constants";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import { assignUserRole, listUserRoles } from "@/api/system/permission";
import { listSimpleRoles } from "@/api/system/role";
import { getBaseHeader } from "@/utils/request";
export default {
name: "SystemUser",
components: { Treeselect },
data() {
return {
provinceOptions: [], // 省份选项
cityOptions: [], // 城市选项
countyOptions: [], // 区县选项
areaData: [],
compList:[],
// 遮罩层
loading: true,
// 导出遮罩层
@ -289,6 +358,8 @@ export default {
initPassword: undefined,
// 性别状态字典
sexOptions: [],
// 地区树数据
treeList: [],
// 岗位选项
postOptions: [],
// 角色选项
@ -345,6 +416,15 @@ export default {
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" }
],
areaType: [
{ required: true, message: "请选择区域类型", trigger: "blur" }
],
userType: [
{ required: true, message: "请选择用户类型", trigger: "blur" }
],
enterpriseId: [
{ required: true, message: "请选择所属企业", trigger: "blur" }
],
email: [
{
type: "email",
@ -358,6 +438,35 @@ export default {
message: "请输入正确的手机号码",
trigger: "blur"
}
],
proviceCode: [
{ required: true, message: "请选择省份", trigger: "change" }
],
cityCode: [
{ required: true, message: "请选择城市", trigger: "change" },
{
validator: (rule, value, callback) => {
if (!this.form.proviceCode && value) {
callback(new Error('请先选择省份'));
} else {
callback();
}
},
trigger: "change"
}
],
countyCode: [
{ required: true, message: "请选择区县", trigger: "change" },
{
validator: (rule, value, callback) => {
if ((!this.form.proviceCode || !this.form.cityCode) && value) {
callback(new Error('请先选择省份和城市'));
} else {
callback();
}
},
trigger: "change"
}
]
},
// 是否显示弹出层（角色权限）
@ -368,6 +477,15 @@ export default {
// 数据字典
statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
sexDictDatas: getDictDatas(DICT_TYPE.SYSTEM_USER_SEX),
areaTypeDictDatas: [
{ value: '1', label: '省级' },
{ value: '2', label: '市级' },
{ value: '3', label: '县级' }
],
userTypeDictDatas: [
{ value: '0', label: '企业管理员' },
{ value: '1', label: '检查员' }
],
// 选中行
checkedIds: [],
};
@ -381,11 +499,73 @@ export default {
created() {
this.getList();
this.getTreeselect();
this.getTreeList();// 获得地区列表
// this.getConfigKey("sys.user.init-password").then(response => {
// this.initPassword = response.msg;
// });
this.getComList()
},
methods: {
//企业数据
getComList() {
getComList().then(response => {
this.compList = response.data;
});
},
getTreeList() {
getAreaTree().then(response => {
this.areaData = response.data; // 保存完整数据用于联动
// 初始化省份选项
this.provinceOptions = response.data;
})
},
// 省份选择变化时
handleProvinceChange(provinceId) {
// 清空市和区县的选择
this.form.cityCode = undefined;
this.form.countyCode = undefined;
this.cityOptions = [];
this.countyOptions = [];
if (provinceId) {
// 查找选中的省份数据
const province = this.areaData.find(item => item.id === provinceId);
if (province && province.children) {
this.cityOptions = province.children;
}
}
// 清除城市和区县的校验错误
this.$nextTick(() => {
this.$refs.form.clearValidate(['cityCode', 'countyCode']);
});
},
// 城市选择变化时
handleCityChange(cityId) {
// 清空区县的选择
this.form.countyCode = undefined;
this.countyOptions = [];
if (cityId && this.form.proviceCode) {
// 查找选中的省份数据
const province = this.areaData.find(item => item.id === this.form.proviceCode);
if (province && province.children) {
// 查找选中的城市数据
const city = province.children.find(item => item.id === cityId);
if (city && city.children) {
this.countyOptions = city.children;
}
}
}
// 清除区县的校验错误
this.$nextTick(() => {
this.$refs.form.clearValidate('countyCode');
});
},
// 更多操作
handleCommand(command, index, row) {
switch (command) {
@ -409,10 +589,10 @@ export default {
getList() {
this.loading = true;
listUser(this.queryParams).then(response => {
this.userList = response.data.list;
this.total = response.data.total;
this.loading = false;
}
this.userList = response.data.list;
this.total = response.data.total;
this.loading = false;
}
);
},
/** 查询部门下拉树结构 + 岗位下拉 */
@ -441,14 +621,14 @@ export default {
// 用户状态修改
handleStatusChange(row) {
let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
this.$modal.confirm('确认要"' + text + '""' + row.username + '"用户吗?').then(function() {
return changeUserStatus(row.id, row.status);
}).then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function() {
row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
: CommonStatusEnum.ENABLE;
});
this.$modal.confirm('确认要"' + text + '""' + row.username + '"用户吗?').then(function () {
return changeUserStatus(row.id, row.status);
}).then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function () {
row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
: CommonStatusEnum.ENABLE;
});
},
// 取消按钮
cancel() {
@ -474,8 +654,17 @@ export default {
status: "0",
remark: undefined,
postIds: [],
roleIds: []
roleIds: [],
// 地区相关字段
proviceCode: undefined,
cityCode: undefined,
countyCode: undefined,
areaType: undefined,
userType: undefined
};
// 重置地区选项
this.cityOptions = [];
this.countyOptions = [];
this.resetForm("form");
},
/** 搜索按钮操作 */
@ -507,6 +696,9 @@ export default {
this.form = response.data;
this.open = true;
this.title = "修改用户";
// 设置地区回显
this.setAreaEcho();
});
},
/** 重置密码按钮操作 */
@ -515,10 +707,10 @@ export default {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(({ value }) => {
resetUserPwd(row.id, value).then(response => {
this.$modal.msgSuccess("修改成功，新密码是：" + value);
});
}).catch(() => {});
resetUserPwd(row.id, value).then(response => {
this.$modal.msgSuccess("修改成功，新密码是：" + value);
});
}).catch(() => { });
},
/** 分配用户角色操作 */
handleRole(row) {
@ -543,7 +735,7 @@ export default {
})
},
/** 提交按钮 */
submitForm: function() {
submitForm: function () {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id !== undefined) {
@ -563,7 +755,7 @@ export default {
});
},
/** 提交按钮（角色权限） */
submitRole: function() {
submitRole: function () {
if (this.form.id !== undefined) {
assignUserRole({
userId: this.form.id,
@ -582,13 +774,13 @@ export default {
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.$modal.confirm('是否确认导出所有用户数据项?').then(() => {
// 处理查询参数
let params = {...this.queryParams};
let params = { ...this.queryParams };
params.pageNo = undefined;
params.pageSize = undefined;
this.exportLoading = true;
@ -659,13 +851,38 @@ export default {
await delUserList(this.checkedIds);
await this.getList();
this.$modal.msgSuccess("批量删除成功");
} catch {}
} catch { }
},
/** 选择行数据 */
handleRowCheckboxChange(records) {
// 过滤掉 id 为 1 的用户（系统管理员）
this.checkedIds = records.filter(item => item.id !== 1).map((item) => item.id);
},
// 设置地区回显
setAreaEcho() {
// 重置选项
this.cityOptions = [];
this.countyOptions = [];
if (this.form.proviceCode) {
// 设置城市选项
const province = this.areaData.find(item => item.id === this.form.proviceCode);
if (province && province.children) {
this.cityOptions = province.children;
}
}
if (this.form.cityCode && this.form.proviceCode) {
// 设置区县选项
const province = this.areaData.find(item => item.id === this.form.proviceCode);
if (province && province.children) {
const city = province.children.find(item => item.id === this.form.cityCode);
if (city && city.children) {
this.countyOptions = city.children;
}
}
}
},
}
};
</script>

Write Preview
Loading…
Cancel
Save