123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669 |
- <template>
- <div class="global-variable">
- <div class="condition">
- <el-form
- :inline="true"
- ref="ruleForm"
- :model="formInline"
- class="demo-form-inline"
- :rules="rules"
- >
- <el-form-item label="用户名称:" prop="userName">
- <el-input
- size="small"
- v-model="formInline.userName"
- placeholder="请输入用户名称"
- ></el-input>
- </el-form-item>
- <el-form-item label="角色名称:" prop="roleId">
- <el-select
- v-model="formInline.roleId"
- placeholder="请选择角色"
- size="small"
- >
- <el-option
- :label="item.roleDescription"
- v-for="item in roleList"
- :key="item.id"
- :value="item.id + ''"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="onSubmit" size="small"
- >查询</el-button
- >
- <el-button @click="reset('ruleForm')" size="small">重置</el-button>
- </el-form-item>
- </el-form>
- <div class="newly">
- <el-button
- v-hasPermi="['system:users:add']"
-
- @click="newnuedialog"
- size="small"
- >新增</el-button
- >
- </div>
- </div>
- <div class="list-page">
-
- <el-table
- v-loading="loading"
- class="center-align-table"
- :data="tableData"
- border
- :cell-style="rowStyle"
- >
- <el-table-column
- align="center"
- fixed
- prop="userId"
- label="员工ID"
- width="100"
- >
- </el-table-column>
- <el-table-column align="center" label="员工名称" prop="userName">
- </el-table-column>
- <el-table-column prop="loginName" align="center" label="登录账号">
- </el-table-column>
- <el-table-column align="center" prop="userPhone" label="手机号">
- </el-table-column>
- <el-table-column prop="roleName" align="center" label="角色">
- </el-table-column>
- <el-table-column prop="state" align="center" label="状态" width="100">
- <template slot-scope="scope">
- <span>
- {{
- scope.row.state == 0
- ? "停用"
- : scope.row.state == 1
- ? "启用"
- : "/"
- }}</span
- >
- </template>
- </el-table-column>
- <el-table-column
- prop="transition"
- align="center"
- fixed="right"
- label="操作"
- width="200"
- >
- <template slot-scope="scope">
- <el-button
- v-hasPermi="['system:users:edit']"
- @click="compile(scope.row)"
- type="text"
- size="small"
- >编辑</el-button
- >
- <el-button
- v-if="scope.row.state == 0 || scope.row.state == 2"
- @click="setState(1, scope.row.userId)"
- type="text"
- size="small"
- v-hasPermi="['system:users:editState']"
- >启用</el-button
- >
- <el-button
- v-else
- style="color: #666"
- @click="setState(2, scope.row.userId)"
- type="text"
- size="small"
- v-hasPermi="['system:users:editState']"
- >停用</el-button
- >
- <el-button
- style="color: #f90"
- @click="editPwd(scope.row)"
- type="text"
- size="small"
- v-hasPermi="['system:users:editPassword']"
- >修改密码</el-button
- >
- <el-button
- style="color: #f00"
- @click="deleted(scope.row)"
- type="text"
- size="small"
- v-hasPermi="['system:users:delete']"
- :disabled="scope.row.state == 1"
- >删除</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- <div class="pagination-container">
- <el-pagination
- @current-change="handleCurrentChange"
- :current-page.sync="formInline.pageNum"
- layout="total, prev, pager, next"
- :page-size="formInline.pageSize"
- :total="formInline.totalSize"
- >
- </el-pagination>
- </div>
- </div>
- <!-- 弹出层 -->
- <!-- 新增 /编辑-->
- <el-dialog
- :title="title"
- :visible.sync="nuedialog"
- width="500px"
- :before-close="handleClose"
- >
- <div v-loading="loadingView" class="views">
- <el-form
- :model="ruleForm"
- :rules="addUserRules"
- ref="addUserForm"
- label-width="100px"
- class="demo-ruleForm"
- >
- <el-form-item label="员工名称" prop="userName">
- <el-input
- v-model="ruleForm.userName"
- placeholder="请输入员工名称"
- ></el-input>
- </el-form-item>
- <el-form-item label="电话号码" prop="phone">
- <el-input
- v-model="ruleForm.phone"
- placeholder="请输入电话号码"
- ></el-input>
- </el-form-item>
- <el-form-item label="账号名称" prop="loginName">
- <el-input
- v-model="ruleForm.loginName"
- placeholder="请输入账号名称"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- <el-form-item label="密码" prop="pwd" v-if="title === '新增'">
- <el-input
- v-model="ruleForm.pwd"
- autocomplete="new-password"
- show-password
- placeholder="请输入密码"
- ></el-input>
- </el-form-item>
- <el-form-item label="角色名称:" prop="roleId">
- <el-select
- v-model="ruleForm.roleId"
- placeholder="请选择角色"
- style="width: 100%"
- >
- <el-option
- :label="item.roleDescription"
- v-for="item in roleList"
- :key="item.id"
- :value="item.id + ''"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="cancel('addUserForm')" size="small"
- >取 消</el-button
- >
- <el-button
- type="primary"
- @click="submitForm('addUserForm')"
- size="small"
- >确 定</el-button
- >
- </span>
- </div>
- </el-dialog>
- <!-- 风场详情 -->
- <el-dialog
- title="修改密码"
- :visible.sync="unusualdialog"
- width="500px"
- :before-close="handleClose"
- >
- <div v-loading="loadingView" class="views">
- <el-form
- :model="editUserPassword"
- ref="editUserPassword"
- label-width="100px"
- class="demo-ruleForm"
- >
- <el-form-item
- label="旧密码"
- prop="oldPWD"
- :rules="[{ required: true, message: '旧密码不能为空' }]"
- >
- <el-input
- v-model="editUserPassword.oldPWD"
- autocomplete="off"
- show-password
- ></el-input>
- </el-form-item>
- <el-form-item
- label="新密码"
- prop="newPWD"
- :rules="[{ required: true, message: '新密码不能为空' }]"
- >
- <el-input
- v-model="editUserPassword.newPWD"
- autocomplete="off"
- show-password
- ></el-input>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button
- @click="
- () => {
- this.$refs['editUserPassword'].resetFields();
- this.unusualdialog = false;
- this.loadingView = false;
- }
- "
- size="small"
- >取 消</el-button
- >
- <el-button
- type="primary"
- @click="editUserPwd('editUserPassword')"
- size="small"
- >确 定</el-button
- >
- </span>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import {
- getUserTableList,
- getRoleTableList,
- enableUser,
- disableUser,
- getUserInfoByUserId,
- addUser,
- editUser,
- deleteUserInfo,
- updatePWD,
- } from "@/api/system.js";
- export default {
- data() {
- const validateUserName = (rule, value, callback) => {
- const regex = /^[^\u4e00-\u9fa5\W]+$/;
- if (!value) {
- callback(new Error("账号名称不能为空"));
- } else if (!regex.test(value)) {
- callback(new Error("账号名称不能包含中文及特殊字符"));
- } else {
- callback();
- }
- };
- const validatePhone = (rule, value, callback) => {
- const phoneRegex = /^[1][3-9][0-9]{9}$/;
- if (!value) {
- return callback(new Error("手机号不能为空"));
- }
- if (!phoneRegex.test(value)) {
- return callback(new Error("请输入正确的手机号"));
- }
- callback();
- };
- return {
- loadingView: false,
- loading: false, //数据加载中
- rules: {
- roleId: { trigger: "change" },
- userName: { trigger: "blur" },
- },
- roleList: [],
- formInline: {
- userName: undefined,
- roleId: undefined,
- pageNum: 1,
- pageSize: 10,
- // sort: "desc",
- totalSize: 0,
- },
- tableData: [],
- // 新增编辑表单
- ruleForm: {
- phone: null,
- pwd: null,
- roleId: null,
- userName: null,
- loginName: null,
- },
- addUserRules: {
- phone: [
- { required: true, message: "请输入手机号", trigger: "blur" },
- { validator: validatePhone, trigger: "blur" },
- ],
- loginName: [
- { required: true, message: "请输入账号名称", trigger: "blur" },
- { validator: validateUserName, trigger: "blur" },
- ],
- pwd: { required: true, message: "请输入密码", trigger: "blur" },
- roleId: { required: true, message: "请选择角色", trigger: "change" },
- userName: [
- { required: true, message: "请输入员工姓名", trigger: "blur" },
- ],
- },
- //修改密码
- editUserPassword: {
- oldPWD: "",
- newPWD: "",
- userId: "",
- },
- nuedialog: false,
- unusualdialog: false,
- title: "",
- };
- },
- created() {
- this.getTableList();
- this.getRoleList();
- },
- methods: {
- handleClose(done) {
- this.$confirm("确认关闭?")
- .then((_) => {
- done();
- })
- .catch((_) => {});
- },
- //修改密码
- editUserPwd(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- this.loadingView = true;
- updatePWD({ ...this.editUserPassword })
- .then((res) => {
- this.$message({
- message: "密码修改成功",
- type: "success",
- });
- this.getTableList();
- this.unusualdialog = false;
- this.loadingView = false;
- })
- .catch(() => {
- this.loadingView = false;
- });
- } else {
- return false;
- }
- });
- },
- //分页数据切换
- handleCurrentChange(val) {
- this.formInline.pageNum = val;
- this.getTableList();
- },
- //修改状态
- setState(state, userId) {
- switch (state) {
- case 1:
- //启用接口
- enableUser({ userId })
- .then((res) => {
- this.$message({
- message: res.msg,
- type: "success",
- });
- this.getTableList();
- })
- .catch((error) => {});
- break;
- case 2:
- //禁用接口
- disableUser({ userId })
- .then((res) => {
- this.$message({
- message: res.msg,
- type: "success",
- });
- this.getTableList();
- })
- .catch((error) => {});
- break;
- default:
- return;
- }
- },
- async getTableList() {
- try {
- this.loading = true;
- const result = await getUserTableList({
- ...this.formInline,
- totalSize: undefined,
- });
- this.tableData = result.data.list;
- this.formInline.totalSize = result.data.totalSize;
- this.loading = false;
- } catch (error) {
- this.$message({
- type: "error",
- message: "请检查是否连接网络",
- });
- }
- },
- async getRoleList() {
- try {
- const result = await getRoleTableList({ pageNum: 1, pageSize: 100000 });
- this.roleList = result.data.list;
- } catch (error) {
- this.$message({
- type: "error",
- message: "请检查是否连接网络",
- });
- }
- },
- rowStyle() {
- return "text-align:center";
- },
- // 查询
- onSubmit() {
- this.getTableList();
- },
- // 重置
- reset(formName) {
- this.$refs[formName].resetFields();
- this.getTableList();
- },
- // 新增,编辑确定
- submitForm(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- this.loadingView = true;
- switch (this.title) {
- case "新增":
- addUser({ ...this.ruleForm, userId: undefined })
- .then((res) => {
- this.$message({
- type: "success",
- message: res.msg,
- });
- this.getTableList();
- this.nuedialog = false;
- this.loadingView = false;
- })
- .catch(() => {
- this.loadingView = false;
- });
- break;
- case "编辑":
- editUser({ ...this.ruleForm })
- .then((res) => {
- this.$message({
- type: "success",
- message: res.msg,
- });
- this.getTableList();
- this.nuedialog = false;
- this.loadingView = false;
- })
- .catch(() => {
- this.loadingView = false;
- });
- break;
- }
- // this.nuedialog = false;
- } else {
- return false;
- }
- });
- },
- //点击取消
- cancel(formName) {
- this.$refs[formName] && this.$refs[formName].resetFields();
- this.ruleForm = {
- phone: null,
- pwd: null,
- roleId: null,
- userName: null,
- userId: null,
- loginName: null,
- };
- this.nuedialog = false;
- this.loadingView = false;
- },
- //异常详情
- particulars(row) {
- this.unusualdialog = true;
- },
- // 编辑 回显数据
- async compile(row) {
- try {
- const result = await getUserInfoByUserId({ userId: row.userId });
- const userInfo = result.data;
- // 直接替换整个对象,以确保 Vue 的响应式系统能够检测到变化
- this.ruleForm = {
- phone: userInfo.userPhone,
- pwd: undefined, // 如果需要重置密码字段
- roleId: userInfo.roleId.toString(),
- userName: userInfo.userName,
- userId: userInfo.userId, // 如果需要用户ID
- loginName: userInfo.loginName,
- };
- this.nuedialog = true;
- this.title = "编辑";
- } catch (error) {
- this.$message.error("获取用户信息失败");
- }
- },
- // 删除
- deleted(row) {
- this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- })
- .then(() => {
- deleteUserInfo({ userId: row.userId })
- .then((res) => {
- this.$message({
- type: "success",
- message: "删除成功!",
- });
- this.getTableList();
- })
- .catch(() => {});
- })
- .catch(() => {
- this.$message({
- type: "info",
- message: "已取消删除",
- });
- });
- },
- editPwd(row) {
- this.editUserPassword.userId = row.userId;
- this.unusualdialog = true;
- },
- // 新增
- newnuedialog() {
- this.cancel("addUserForm");
- this.ruleForm = {
- loginName: "",
- pwd: "",
- userName: "",
- };
- this.nuedialog = true;
- this.title = "新增";
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .general {
- display: flex;
- flex-wrap: wrap;
- .condition {
- width: 50%;
- display: flex;
- p {
- width: 100px;
- text-align: right;
- line-height: 40px;
- }
- span {
- line-height: 40px;
- padding-left: 20px;
- }
- .el-select {
- width: 100%;
- margin-bottom: 20px;
- }
- .el-input {
- margin-bottom: 20px;
- }
- }
- }
- .attachment {
- display: flex;
- padding-top: 10px;
- p {
- margin-right: 20px;
- color: #409eff;
- }
- }
- .addition {
- display: flex;
- justify-content: flex-end;
- margin-bottom: 10px;
- }
- .demo-ruleForm {
- .el-form-item {
- margin-bottom: 25px;
- }
- }
- .condition {display: flex;
- justify-content: space-between;
- }
- </style>
|