console/src/pages/subPages/status.vue

<template>
<el-container direction="vertical">
    <el-header height="40px" style="border-bottom: 1px solid #eee">运营人员管理</el-header>
    <div style="margin:10px 0;">
        <el-button icon="el-icon-plus" v-show="if_add" style="margin-left:10px;" type="primary" @click="addVisible = true">新增</el-button>
        <el-input v-model="searchValue" placeholder="请输入" style="width:200px;margin-left:10px;" />
        <el-button style="margin-left:10px;" type="primary" @click="onSearch">搜索</el-button>
        <el-button style="margin-left:10px;" type="danger" @click="onReset">重置</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" prop="id" label="记录ID"></el-table-column>
        <el-table-column align="center" prop="username" label="管理员名称"></el-table-column>
        <el-table-column align="center" prop="create_timestamp" label="创建时间"></el-table-column>
        <el-table-column align="center" prop="last_login_ip" label="上次登录ip地址"></el-table-column>
        <el-table-column align="center" prop="last_login_time" label="上次登录日期"></el-table-column>
        <el-table-column align="center" prop="update_timestamp" label="最后修改日期"></el-table-column>
        <el-table-column align="center" prop="status_text" label="管理员状态"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-button size="mini" v-show="scope.row.is_del" type="danger" style="width:80px;margin-left:0;" @click="onDelUser(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-row style="margin-top:10px;" type="flex" justify="end">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNumber" @current-change="onPageChange"></el-pagination>
    </el-row>

    <el-dialog title="新增" :visible.sync="addVisible" width="50%" @closed="onCloseAddDialog">
        <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="管理员名称:" prop="name">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="pwd">
                <el-input v-model="addForm.pwd" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="rePwd">
                <el-input v-model="addForm.rePwd" type="password"></el-input>
            </el-form-item>
			<el-form-item label="权限:" prop="chkadm">
				<el-radio-group v-model="addForm.chkadm">
					<el-radio class="radio" :label="1">超级管理员</el-radio>
					<el-radio class="radio" :label="2">普通管理员</el-radio>
				</el-radio-group>			
			</el-form-item>			
        </el-form>
		<span>超级管理员具有增加管理员，删除其它管理员的权限。</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="onCloseAddDialog">取 消</el-button>
            <el-button type="primary" @click="onAddSubmit('addForm')">立即添加</el-button>
        </span>
    </el-dialog>
</el-container>
</template>

<script>
import {
    userList,
    userAdd,
    userDel
} from "@/api";
export default {
    data() {
        return {
            editPwdId: "",
            tableData: [],
            pageSize: 10,
            pageNumber: 1,
            total: 0,
            searchValue: "",

            addVisible: false,
            addForm: {
                name: "",
                pwd: "",
                rePwd: "",
				chkadm: 1
            },
            addRules: {
                name: [{
                    required: true,
                    message: "请输入管理员名称",
                    trigger: "blur",
                }, ],
                pwd: [{
                    required: true,
                    message: "请输入登录密码",
                    trigger: "blur",
                }, ],
                rePwd: [{
                    required: true,
                    validator: this.validateRePwd,
                    trigger: "blur",
                }, ],
            },
        };
    },
    mounted() {
        this.getUserList();
    },
    methods: {
        validateRePwd(rule, value, callback) {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.addForm.pwd) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        },

        onReset() {
            this.searchValue = "";
            this.pageNumber = 1;
            this.getUserList();
        },
        getUserList() {
            const _self = this;
            userList({
                pageSize: _self.pageSize,
                pageNumber: _self.pageNumber,
                searchText: _self.searchValue,
            }).then((res) => {
                console.log(res);
                if (res && res.msg == "ok") {
                    _self.total = res.data.total;
                    _self.tableData = [...res.data.rows];
					_self.if_add = res.data.if_add;
                }
            });
        },
        onPageChange(page) {
            if (page == this.pageNumber) {
                return;
            } else {
                this.pageNumber = page;
                setTimeout(() => {
                    this.getActionLogList();
                }, 0);
            }
        },
        onSearch() {
            this.pageNumber = 1;
            this.getUserList();
        },
        onCloseAddDialog() {
            this.addForm = {};
            this.addVisible = false;
            this.$refs.addForm.resetFields();
        },
        onAddSubmit(formName) {
            const _self = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    userAdd({
                        username: this.addForm.name,
                        password: this.addForm.pwd,
                        repassword: this.addForm.rePwd,
                        rule:this.addForm.chkadm
                    }).then((res) => {
                        console.log(res);
                        if (res && res.msg == "ok") {
                            this.$message({
                                message: "新增成功",
                                type: "success",
                                center: true,
                                duration: 1000,
                                onClose: () => {
                                    _self.onReset();
                                    _self.onCloseAddDialog();
                                },
                            });
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        onDelUser(index, row) {
            const _self = this;
            this.$confirm("确认删除该管理员？", "提示").then(() => {
                userDel({
                    id: row.id,
                }).then((res) => {
                    if (res && res.msg == "ok") {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                            center: true,
                            duration: 1000,
                            onClose: () => {
                                _self.onReset();
                            },
                        });
                    }
                });
            });
        },
        onEditUser(index, row) {
            this.editPwdId = row.id;
            this.editVisible = true;
        }
    },
};
</script>

<style scoped>
</style>