| | |
| | | <!--部门数据--> |
| | | <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" /> |
| | | <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 @node-click="handleNodeClick" /> |
| | | <el-tree |
| | | :data="deptOptions" |
| | | :props="defaultProps" |
| | | :expand-on-click-node="false" |
| | | :filter-node-method="filterNode" |
| | | ref="tree" |
| | | default-expand-all |
| | | @node-click="handleNodeClick" |
| | | /> |
| | | </div> |
| | | </el-col> |
| | | <!--用户数据--> |
| | | <el-col :span="20" :xs="24"> |
| | | <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
| | | <el-form |
| | | :model="queryParams" |
| | | ref="queryForm" |
| | | :inline="true" |
| | | v-show="showSearch" |
| | | label-width="68px" |
| | | > |
| | | <el-form-item label="用户名称" prop="userName"> |
| | | <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable size="small" style="width: 240px" |
| | | @keyup.enter.native="handleQuery" /> |
| | | <el-input |
| | | v-model="queryParams.userName" |
| | | placeholder="请输入用户名称" |
| | | clearable |
| | | size="small" |
| | | style="width: 240px" |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="手机号码" prop="phonenumber"> |
| | | <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable size="small" style="width: 240px" |
| | | @keyup.enter.native="handleQuery" /> |
| | | <el-input |
| | | v-model="queryParams.phonenumber" |
| | | placeholder="请输入手机号码" |
| | | clearable |
| | | size="small" |
| | | style="width: 240px" |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="状态" prop="status"> |
| | | <el-select v-model="queryParams.status" placeholder="用户状态" clearable size="small" style="width: 240px"> |
| | | <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" |
| | | :value="dict.value" /> |
| | | <el-select |
| | | v-model="queryParams.status" |
| | | placeholder="用户状态" |
| | | clearable |
| | | size="small" |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="dict in dict.type.sys_normal_disable" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="创建时间"> |
| | | <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" |
| | | type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
| | | <el-date-picker |
| | | v-model="dateRange" |
| | | size="small" |
| | | style="width: 240px" |
| | | value-format="yyyy-MM-dd" |
| | | type="daterange" |
| | | range-separator="-" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
| | | <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-search" |
| | | size="mini" |
| | | @click="handleQuery" |
| | | >搜索</el-button |
| | | > |
| | | <el-button icon="el-icon-refresh" size="mini" @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:add']">新增</el-button> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="el-icon-plus" |
| | | size="mini" |
| | | @click="handleAdd" |
| | | v-hasPermi="['system:user:add']" |
| | | >新增</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" |
| | | v-hasPermi="['system:user:edit']">修改</el-button> |
| | | <el-button |
| | | type="success" |
| | | plain |
| | | icon="el-icon-edit" |
| | | size="mini" |
| | | :disabled="single" |
| | | @click="handleUpdate" |
| | | v-hasPermi="['system:user:edit']" |
| | | >修改</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" |
| | | v-hasPermi="['system:user:remove']">删除</el-button> |
| | | <el-button |
| | | type="danger" |
| | | plain |
| | | icon="el-icon-delete" |
| | | size="mini" |
| | | :disabled="multiple" |
| | | @click="handleDelete" |
| | | v-hasPermi="['system:user:remove']" |
| | | >删除</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" |
| | | v-hasPermi="['system:user:import']">导入</el-button> |
| | | <el-button |
| | | type="info" |
| | | plain |
| | | 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" plain icon="el-icon-download" size="mini" @click="handleExport" |
| | | v-hasPermi="['system:user:export']">导出</el-button> |
| | | <el-button |
| | | type="warning" |
| | | plain |
| | | icon="el-icon-download" |
| | | size="mini" |
| | | @click="handleExport" |
| | | v-hasPermi="['system:user:export']" |
| | | >导出</el-button |
| | | > |
| | | </el-col> |
| | | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> |
| | | <right-toolbar |
| | | :showSearch.sync="showSearch" |
| | | @queryTable="getList" |
| | | :columns="columns" |
| | | ></right-toolbar> |
| | | </el-row> |
| | | |
| | | <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> |
| | | <el-table |
| | | v-loading="loading" |
| | | :data="userList" |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | | <el-table-column type="selection" width="50" align="center" /> |
| | | <el-table-column label="用户编号" align="center" key="userId" prop="userId" 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.deptName" v-if="columns[3].visible" |
| | | :show-overflow-tooltip="true" /> |
| | | <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" |
| | | width="120" /> |
| | | <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible"> |
| | | <el-table-column |
| | | label="用户编号" |
| | | align="center" |
| | | key="userId" |
| | | prop="userId" |
| | | 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.deptName" |
| | | v-if="columns[3].visible" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <el-table-column |
| | | label="手机号码" |
| | | align="center" |
| | | key="phonenumber" |
| | | prop="phonenumber" |
| | | v-if="columns[4].visible" |
| | | width="120" |
| | | /> |
| | | <el-table-column |
| | | label="状态" |
| | | align="center" |
| | | key="status" |
| | | v-if="columns[5].visible" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" |
| | | @change="handleStatusChange(scope.row)"></el-switch> |
| | | <el-switch |
| | | v-model="scope.row.status" |
| | | active-value="0" |
| | | inactive-value="1" |
| | | @change="handleStatusChange(scope.row)" |
| | | ></el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160"> |
| | | <el-table-column |
| | | label="创建时间" |
| | | align="center" |
| | | prop="createTime" |
| | | v-if="columns[6].visible" |
| | | width="160" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.createTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="是否认证" align="center" prop="isAuthentication" v-if="columns[6].visible" width="160"> |
| | | <el-table-column |
| | | label="是否认证" |
| | | align="center" |
| | | prop="isAuthentication" |
| | | v-if="columns[6].visible" |
| | | width="160" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <span>{{ scope.row.isAuthentication ? '已认证' : '未认证' }}</span> |
| | | <span>{{ |
| | | scope.row.isAuthentication ? "已认证" : "未认证" |
| | | }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width"> |
| | | <el-table-column |
| | | label="操作" |
| | | align="center" |
| | | width="160" |
| | | class-name="small-padding fixed-width" |
| | | > |
| | | <template slot-scope="scope" v-if="scope.row.userId !== 1"> |
| | | <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" |
| | | v-hasPermi="['system:user:edit']">修改</el-button> |
| | | <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" |
| | | v-hasPermi="['system:user:remove']">删除</el-button> |
| | | <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" |
| | | v-hasPermi="['system:user:resetPwd', 'system:user:edit']"> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleUpdate(scope.row)" |
| | | v-hasPermi="['system:user:edit']" |
| | | >修改</el-button |
| | | > |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | @click="handleDelete(scope.row)" |
| | | v-hasPermi="['system:user:remove']" |
| | | >删除</el-button |
| | | > |
| | | <el-dropdown |
| | | size="mini" |
| | | @command="(command) => handleCommand(command, scope.row)" |
| | | v-hasPermi="['system:user:resetPwd', 'system:user:edit']" |
| | | > |
| | | <span class="el-dropdown-link"> |
| | | <i class="el-icon-d-arrow-right el-icon--right"></i>更多 |
| | | </span> |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item command="handleResetPwd" icon="el-icon-key" |
| | | v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item> |
| | | <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" |
| | | v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item> |
| | | <el-dropdown-item |
| | | command="handleResetPwd" |
| | | icon="el-icon-key" |
| | | v-hasPermi="['system:user:resetPwd']" |
| | | >重置密码</el-dropdown-item |
| | | > |
| | | <el-dropdown-item |
| | | command="handleAuthRole" |
| | | icon="el-icon-circle-check" |
| | | v-hasPermi="['system:user:edit']" |
| | | >分配角色</el-dropdown-item |
| | | > |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" |
| | | @pagination="getList" /> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | :page.sync="queryParams.pageNum" |
| | | :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="请输入用户昵称" maxlength="30" /> |
| | | <el-input |
| | | v-model="form.nickName" |
| | | placeholder="请输入用户昵称" |
| | | maxlength="30" |
| | | /> |
| | | </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" placeholder="请选择归属部门" /> |
| | | <treeselect |
| | | v-model="form.deptId" |
| | | :options="deptOptions" |
| | | :show-count="true" |
| | | placeholder="请选择归属部门" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="手机号码" prop="phonenumber"> |
| | | <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /> |
| | | <el-input |
| | | v-model="form.phonenumber" |
| | | 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-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.userId == undefined" label="用户名称" prop="userName"> |
| | | <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" /> |
| | | <el-form-item |
| | | v-if="form.userId == undefined" |
| | | label="用户名称" |
| | | prop="userName" |
| | | > |
| | | <el-input |
| | | v-model="form.userName" |
| | | placeholder="请输入用户名称" |
| | | maxlength="30" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password"> |
| | | <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password /> |
| | | <el-form-item |
| | | v-if="form.userId == undefined" |
| | | label="用户密码" |
| | | prop="password" |
| | | > |
| | | <el-input |
| | | v-model="form.password" |
| | | placeholder="请输入用户密码" |
| | | type="password" |
| | | maxlength="20" |
| | | show-password |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="用户性别"> |
| | | <el-select v-model="form.sex" placeholder="请选择"> |
| | | <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" |
| | | :value="dict.value"></el-option> |
| | | <el-option |
| | | v-for="dict in dict.type.sys_user_sex" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="状态"> |
| | | <el-radio-group v-model="form.status"> |
| | | <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label |
| | | }}</el-radio> |
| | | <el-radio |
| | | v-for="dict in dict.type.sys_normal_disable" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | >{{ dict.label }}</el-radio |
| | | > |
| | | </el-radio-group> |
| | | </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.postId" :label="item.postName" :value="item.postId" |
| | | :disabled="item.status == 1"></el-option> |
| | | <el-option |
| | | v-for="item in postOptions" |
| | | :key="item.postId" |
| | | :label="item.postName" |
| | | :value="item.postId" |
| | | :disabled="item.status == 1" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="角色" prop="roleIds"> |
| | | <el-select v-model="form.roleIds" multiple placeholder="请选择"> |
| | | <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" |
| | | :disabled="item.status == 1"></el-option> |
| | | <el-option |
| | | v-for="item in roleOptions" |
| | | :key="item.roleId" |
| | | :label="item.roleName" |
| | | :value="item.roleId" |
| | | :disabled="item.status == 1" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="公司名称" prop="company"> |
| | | <el-input v-model="form.company" placeholder="请输入公司名称" maxlength="30" /> |
| | | <el-input |
| | | v-model="form.company" |
| | | placeholder="请输入公司名称" |
| | | maxlength="30" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="地区" prop="region"> |
| | | <!-- <treeselect v-model="form.region" :options="deptOptions" :show-count="true" placeholder="请选择地区" /> --> |
| | | <el-cascader :options="cityOption" :props="{ checkStrictly: true }" v-model="form.region" |
| | | placeholder="请选择地区" clearable></el-cascader> |
| | | <el-cascader |
| | | :options="cityOption" |
| | | :props="{ checkStrictly: true }" |
| | | v-model="form.region" |
| | | placeholder="请选择地区" |
| | | clearable |
| | | ></el-cascader> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="等级" prop="level"> |
| | | <el-input v-model="form.level" placeholder="请输入等级" maxlength="50" /> |
| | | <el-input |
| | | v-model="form.level" |
| | | placeholder="请输入等级" |
| | | maxlength="50" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="是否认证" prop="isAuthentication"> |
| | | <el-select v-model="form.isAuthentication" placeholder="请选择"> |
| | | <el-option v-for="item in isAuthenticationList" :key="item.value" :label="item.label" :value="item.value" |
| | | :disabled="!isAdmin"></el-option> |
| | | <el-option |
| | | v-for="item in isAuthenticationList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | :disabled="!isAdmin" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="备注"> |
| | | <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input> |
| | | <el-input |
| | | v-model="form.remark" |
| | | type="textarea" |
| | | placeholder="请输入内容" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </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> |
| | | <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" /> 是否更新已经存在的用户数据 |
| | | <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-link |
| | | type="primary" |
| | | :underline="false" |
| | | style="font-size: 12px; vertical-align: baseline" |
| | | @click="importTemplate" |
| | | >下载模板</el-link |
| | | > |
| | | </div> |
| | | </el-upload> |
| | | <div slot="footer" class="dialog-footer"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user"; |
| | | import { |
| | | listUser, |
| | | getUser, |
| | | delUser, |
| | | addUser, |
| | | updateUser, |
| | | resetUserPwd, |
| | | changeUserStatus, |
| | | } from "@/api/system/user"; |
| | | import { getToken } from "@/utils/auth"; |
| | | import { treeselect } from "@/api/system/dept"; |
| | | import Treeselect from "@riophae/vue-treeselect"; |
| | | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
| | | import { cityList } from '../../../publicData' |
| | | import { cityList } from "../../../publicData"; |
| | | |
| | | export default { |
| | | // name: "User", |
| | | dicts: ['sys_normal_disable', 'sys_user_sex'], |
| | | dicts: ["sys_normal_disable", "sys_user_sex"], |
| | | components: { Treeselect }, |
| | | data() { |
| | | return { |
| | | isAdmin: localStorage.getItem('roleId') == 1 ? true : false, |
| | | isAdmin: localStorage.getItem("roleId") == 1 ? true : false, |
| | | // 遮罩层 |
| | | loading: true, |
| | | // 选中数组 |
| | |
| | | form: {}, |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "label" |
| | | label: "label", |
| | | }, |
| | | // 用户导入参数 |
| | | upload: { |
| | |
| | | // 设置上传的请求头部 |
| | | headers: { Authorization: "Bearer " + getToken() }, |
| | | // 上传的地址 |
| | | url: process.env.VUE_APP_BASE_API + "/system/user/importData" |
| | | url: process.env.VUE_APP_BASE_API + "/system/user/importData", |
| | | }, |
| | | // 查询参数 |
| | | queryParams: { |
| | |
| | | userName: undefined, |
| | | phonenumber: undefined, |
| | | status: undefined, |
| | | deptId: undefined |
| | | deptId: undefined, |
| | | }, |
| | | // 列信息 |
| | | columns: [ |
| | |
| | | { key: 3, label: `部门`, visible: true }, |
| | | { key: 4, label: `手机号码`, visible: true }, |
| | | { key: 5, label: `状态`, visible: true }, |
| | | { key: 6, label: `创建时间`, visible: true } |
| | | { key: 6, label: `创建时间`, visible: true }, |
| | | ], |
| | | // 表单校验 |
| | | rules: { |
| | | userName: [ |
| | | { required: true, message: "用户名称不能为空", trigger: "blur" }, |
| | | { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' } |
| | | { |
| | | min: 2, |
| | | max: 20, |
| | | message: "用户名称长度必须介于 2 和 20 之间", |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | nickName: [ |
| | | { required: true, message: "用户昵称不能为空", trigger: "blur" } |
| | | { required: true, message: "用户昵称不能为空", trigger: "blur" }, |
| | | ], |
| | | password: [ |
| | | { required: true, message: "用户密码不能为空", trigger: "blur" }, |
| | | { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' } |
| | | { |
| | | min: 5, |
| | | max: 20, |
| | | message: "用户密码长度必须介于 5 和 20 之间", |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | deptId: [ |
| | | { required: true, message: "归属部门不能为空", trigger: 'change' }, |
| | | { required: true, message: "归属部门不能为空", trigger: "change" }, |
| | | // { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' } |
| | | ], |
| | | roleIds: [ |
| | | { required: true, message: "角色不能为空", trigger: 'change' } |
| | | { required: true, message: "角色不能为空", trigger: "change" }, |
| | | ], |
| | | isAuthentication: [ |
| | | { required: true, message: "是否认证不能为空", trigger: 'change' } |
| | | { required: true, message: "是否认证不能为空", trigger: "change" }, |
| | | ], |
| | | email: [ |
| | | { |
| | | type: "email", |
| | | message: "'请输入正确的邮箱地址", |
| | | trigger: ["blur", "change"] |
| | | } |
| | | trigger: ["blur", "change"], |
| | | }, |
| | | ], |
| | | phonenumber: [ |
| | | { |
| | | pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, |
| | | message: "请输入正确的手机号码", |
| | | trigger: "blur" |
| | | } |
| | | ] |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | }, |
| | | cityOption: [], |
| | | isAuthenticationList: [{ |
| | | label: '未认证', |
| | | value: 0 |
| | | }, { |
| | | label: '已认证', |
| | | value: 1 |
| | | }] |
| | | isAuthenticationList: [ |
| | | { |
| | | label: "未认证", |
| | | value: 0, |
| | | }, |
| | | { |
| | | label: "已认证", |
| | | value: 1, |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | watch: { |
| | | // 根据名称筛选部门树 |
| | | deptName(val) { |
| | | this.$refs.tree.filter(val); |
| | | } |
| | | }, |
| | | }, |
| | | created() { |
| | | this.getList(); |
| | | this.getTreeselect(); |
| | | this.getConfigKey("sys.user.initPassword").then(response => { |
| | | this.getConfigKey("sys.user.initPassword").then((response) => { |
| | | this.initPassword = response.msg; |
| | | }); |
| | | }, |
| | | mounted() { |
| | | this.cityOption = this.tree(cityList) |
| | | |
| | | this.cityOption = this.tree(cityList); |
| | | }, |
| | | methods: { |
| | | tree(item) { |
| | | // console.log(item, item.length); |
| | | for (let i = 0; i < item.length; i++) { |
| | | // console.log(item[i]); |
| | | item[i].value = item[i].label |
| | | item[i].value = item[i].label; |
| | | // item[i]=JSON.parse(JSON.stringify(item[i])) |
| | | if (item[i].children && item[i].children.length > 0) { |
| | | this.tree(item[i].children) |
| | | |
| | | this.tree(item[i].children); |
| | | } |
| | | } |
| | | return item |
| | | return item; |
| | | }, |
| | | /** 查询用户列表 */ |
| | | getList() { |
| | | this.loading = true; |
| | | listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
| | | this.userList = response.rows; |
| | | this.total = response.total; |
| | | this.loading = false; |
| | | } |
| | | listUser(this.addDateRange(this.queryParams, this.dateRange)).then( |
| | | (response) => { |
| | | this.userList = response.rows; |
| | | this.total = response.total; |
| | | this.loading = false; |
| | | } |
| | | ); |
| | | }, |
| | | /** 查询部门下拉树结构 */ |
| | | getTreeselect() { |
| | | treeselect().then(response => { |
| | | treeselect().then((response) => { |
| | | this.deptOptions = response.data; |
| | | }); |
| | | }, |
| | |
| | | // 用户状态修改 |
| | | handleStatusChange(row) { |
| | | let text = row.status === "0" ? "启用" : "停用"; |
| | | this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () { |
| | | return changeUserStatus(row.userId, row.status); |
| | | }).then(() => { |
| | | this.$modal.msgSuccess(text + "成功"); |
| | | }).catch(function () { |
| | | row.status = row.status === "0" ? "1" : "0"; |
| | | }); |
| | | this.$modal |
| | | .confirm('确认要"' + text + '""' + row.userName + '"用户吗?') |
| | | .then(function () { |
| | | return changeUserStatus(row.userId, row.status); |
| | | }) |
| | | .then(() => { |
| | | this.$modal.msgSuccess(text + "成功"); |
| | | }) |
| | | .catch(function () { |
| | | row.status = row.status === "0" ? "1" : "0"; |
| | | }); |
| | | }, |
| | | // 取消按钮 |
| | | cancel() { |
| | |
| | | remark: undefined, |
| | | postIds: [], |
| | | roleIds: [], |
| | | isAuthentication: 0 |
| | | isAuthentication: 0, |
| | | }; |
| | | this.resetForm("form"); |
| | | }, |
| | |
| | | }, |
| | | // 多选框选中数据 |
| | | handleSelectionChange(selection) { |
| | | this.ids = selection.map(item => item.userId); |
| | | this.ids = selection.map((item) => item.userId); |
| | | this.single = selection.length != 1; |
| | | this.multiple = !selection.length; |
| | | }, |
| | |
| | | handleAdd() { |
| | | this.reset(); |
| | | this.getTreeselect(); |
| | | getUser().then(response => { |
| | | getUser().then((response) => { |
| | | this.postOptions = response.posts; |
| | | this.roleOptions = response.roles; |
| | | this.open = true; |
| | |
| | | this.reset(); |
| | | this.getTreeselect(); |
| | | const userId = row.userId || this.ids; |
| | | getUser(userId).then(response => { |
| | | getUser(userId).then((response) => { |
| | | this.form = response.data; |
| | | this.form = JSON.parse(JSON.stringify(this.form)) |
| | | this.form = JSON.parse(JSON.stringify(this.form)); |
| | | |
| | | if (this.form.region) { |
| | | this.form.region = this.form.region.split('_'); |
| | | this.form.region = this.form.region.split("_"); |
| | | } else { |
| | | this.form.region = [] |
| | | this.form.region = []; |
| | | } |
| | | // console.log(this.form.region); |
| | | // console.log(this.form); |
| | |
| | | cancelButtonText: "取消", |
| | | closeOnClickModal: false, |
| | | inputPattern: /^.{5,20}$/, |
| | | inputErrorMessage: "用户密码长度必须介于 5 和 20 之间" |
| | | }).then(({ value }) => { |
| | | resetUserPwd(row.userId, value).then(response => { |
| | | this.$modal.msgSuccess("修改成功,新密码是:" + value); |
| | | }); |
| | | }).catch(() => { }); |
| | | inputErrorMessage: "用户密码长度必须介于 5 和 20 之间", |
| | | }) |
| | | .then(({ value }) => { |
| | | resetUserPwd(row.userId, value).then((response) => { |
| | | this.$modal.msgSuccess("修改成功,新密码是:" + value); |
| | | }); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | /** 分配角色操作 */ |
| | | handleAuthRole: function (row) { |
| | |
| | | }, |
| | | /** 提交按钮 */ |
| | | submitForm: function () { |
| | | let data = this.form |
| | | data = JSON.parse(JSON.stringify(data)) |
| | | console.log(data) |
| | | data.region = this.form.region.join('_') |
| | | // delete data.region |
| | | this.$refs["form"].validate(valid => { |
| | | let data = this.form; |
| | | data = JSON.parse(JSON.stringify(data)); |
| | | if (data.region) { |
| | | data.region = this.form.region.join("_"); |
| | | } |
| | | |
| | | this.$refs["form"].validate((valid) => { |
| | | if (valid) { |
| | | if (this.form.userId != undefined) { |
| | | updateUser(data).then(response => { |
| | | updateUser(data).then((response) => { |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } else { |
| | | addUser(data).then(response => { |
| | | addUser(data).then((response) => { |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | |
| | | /** 删除按钮操作 */ |
| | | handleDelete(row) { |
| | | const userIds = row.userId || this.ids; |
| | | this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(function () { |
| | | return delUser(userIds); |
| | | }).then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => { }); |
| | | this.$modal |
| | | .confirm('是否确认删除用户编号为"' + userIds + '"的数据项?') |
| | | .then(function () { |
| | | return delUser(userIds); |
| | | }) |
| | | .then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | /** 导出按钮操作 */ |
| | | handleExport() { |
| | | this.download('system/user/export', { |
| | | ...this.queryParams |
| | | }, `user_${new Date().getTime()}.xlsx`) |
| | | this.download( |
| | | "system/user/export", |
| | | { |
| | | ...this.queryParams, |
| | | }, |
| | | `user_${new Date().getTime()}.xlsx` |
| | | ); |
| | | }, |
| | | /** 导入按钮操作 */ |
| | | handleImport() { |
| | |
| | | }, |
| | | /** 下载模板操作 */ |
| | | importTemplate() { |
| | | this.download('system/user/importTemplate', { |
| | | }, `user_template_${new Date().getTime()}.xlsx`) |
| | | this.download( |
| | | "system/user/importTemplate", |
| | | {}, |
| | | `user_template_${new Date().getTime()}.xlsx` |
| | | ); |
| | | }, |
| | | // 文件上传中处理 |
| | | handleFileUploadProgress(event, file, fileList) { |
| | |
| | | // 提交上传文件 |
| | | submitFileForm() { |
| | | this.$refs.upload.submit(); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | </script> |