|
|
@@ -0,0 +1,505 @@
|
|
|
+<template>
|
|
|
+ <div class="logBox">
|
|
|
+ <div class="border_left_top border"></div>
|
|
|
+ <div class="border_top border"></div>
|
|
|
+ <div class="border_right_top border"></div>
|
|
|
+ <div class="border_left border"></div>
|
|
|
+ <div class="border_right border"></div>
|
|
|
+ <div class="border_left_bottom border"></div>
|
|
|
+ <div class="border_bottom border"></div>
|
|
|
+ <div class="border_right_bottom border"></div>
|
|
|
+ <el-button-group id="topButton2">
|
|
|
+ <el-button type="primary" class="active">用户管理</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <el-button type="primary" class="addUser" v-if="isAdmin" @click="addUser">新增用户</el-button>
|
|
|
+ <!-- <div class="downlodTable" @click="downlodTable">导出</div> -->
|
|
|
+ <el-table :data="userTableData" ref='userTableData' id="userTableData" style="width: 100%;color: #2DAFF5;max-height: 100%;overflow-y: auto;background-color: none;">
|
|
|
+ <el-table-column prop="username" align="center" label="用户名">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="password" align="center" label="密码" v-if="isAdmin">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="mianJd" align="center" label="主界面">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <label v-if="row.role=='administrator'">修改</label>
|
|
|
+ <label v-else>查看</label>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="username" align="center" label="AMR管理">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <label v-if="row.role=='administrator'">修改</label>
|
|
|
+ <label v-else >查看</label>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="username" align="center" label="输送机管理">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <label v-if="row.role=='administrator'">修改</label>
|
|
|
+ <label v-else>查看</label>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="username" align="center" label="系统管理">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <label v-if="row.role=='administrator'">修改</label>
|
|
|
+ <label v-else>查看</label>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-if="isAdmin"
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="handleClick(scope.row)" v-if="scope.row.role!='administrator'" type="text" size="small">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-dialog title="编辑用户" :visible.sync="dialogVisible" width="600px" id="addUserDialog">
|
|
|
+ <el-form :model="form" ref="form" :rules="rules">
|
|
|
+ <el-form-item label="用户名:" prop="userName" label-width="90px">
|
|
|
+ <el-input type="text" v-model="form.addUserName" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码:" prop="userPwd" label-width="90px">
|
|
|
+ <el-input v-model="form.addUserPwd" type="password" auto-complete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="角色类型:" prop="userRole" label-width="90px" style="margin-bottom: 20px;">
|
|
|
+ <template>
|
|
|
+ <el-select v-model="form.addUserRoleValue" placeholder="请选择类型">
|
|
|
+ <el-option v-for="(item,index) in addUserRole" :label="item.label" :value="item.value" @click="" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态:" prop="userState" label-width="90px" style="margin-bottom: 0;">
|
|
|
+ <template>
|
|
|
+ <el-select v-model="form.addUserStateValue" placeholder="请选择状态">
|
|
|
+ <el-option v-for="(item,index) in addUserState" :label="item.label" :value="item.value" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="btnOK" id="sureBtn">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="btnNO" id="sureBtn">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ Homeadduser,
|
|
|
+ GetUsers,
|
|
|
+ homedeleteuser
|
|
|
+ } from '@/api/request.js'
|
|
|
+ import FileSaver from "file-saver";
|
|
|
+ import XLSX from "xlsx";
|
|
|
+ export default {
|
|
|
+ name: "User",
|
|
|
+ data() {
|
|
|
+ var userNameRule = (rule, value, callback) => {
|
|
|
+ if (this.form.addUserName === '') {
|
|
|
+ callback(new Error('用户名不能为空'));
|
|
|
+ } else {
|
|
|
+ this.userTableData.forEach((item, index, arr) => {
|
|
|
+ if (this.form.addUserName == item.username) {
|
|
|
+ callback(new Error('用户名已存在'));
|
|
|
+ }
|
|
|
+ })
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var userPwdRule = (rule, value, callback) => {
|
|
|
+ if (this.form.addUserPwd === '') {
|
|
|
+ callback(new Error('密码不能为空'));
|
|
|
+ } else if (this.form.addUserPwd.length < 6) {
|
|
|
+ callback(new Error('密码不能小于6位'));
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ addUserName: '',
|
|
|
+ addUserPwd: '',
|
|
|
+ addUserRoleValue: '',
|
|
|
+ addUserStateValue: ''
|
|
|
+ },
|
|
|
+ radio: 1,
|
|
|
+ dialogVisible: false,
|
|
|
+ rules: {
|
|
|
+ userName: [{
|
|
|
+ required: true,
|
|
|
+ validator: userNameRule,
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }],
|
|
|
+ userPwd: [{
|
|
|
+ required: true,
|
|
|
+ validator: userPwdRule,
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }],
|
|
|
+ userRole: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择类型',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ userState: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择状态',
|
|
|
+ trigger: 'blur'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ isAdmin:false,
|
|
|
+ userTableData: [{
|
|
|
+ "username": "165asas",
|
|
|
+ "password": "123456",
|
|
|
+ "role": "user",
|
|
|
+ "state": "unlock"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "username": "sa223sas",
|
|
|
+ "password": "123456",
|
|
|
+ "role": "user",
|
|
|
+ "state": "unlock"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "username": "admin4",
|
|
|
+ "password": "123456",
|
|
|
+ "role": "admin",
|
|
|
+ "state": "unlock"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ addUserRole: [{
|
|
|
+ value: 'admin',
|
|
|
+ label: 'admin',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'user',
|
|
|
+ label: 'user',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ addUserState: [{
|
|
|
+ value: 'lock',
|
|
|
+ label: 'lock',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'unlock',
|
|
|
+ label: 'unlock',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.GetUser()
|
|
|
+ let user = JSON.parse(sessionStorage.getItem("userData")).userName;
|
|
|
+ if(user=="admin"){
|
|
|
+ this.isAdmin=true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ GetUser() {
|
|
|
+ GetUsers().then(res => {
|
|
|
+ console.log(res.UsersManagement);
|
|
|
+ this.userTableData = res.UsersManagement
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick(row){
|
|
|
+ let data = {
|
|
|
+ "username":row.username
|
|
|
+ }
|
|
|
+ this.$confirm('是否删除当前用户?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ homedeleteuser(data).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '导出成功!'
|
|
|
+ });
|
|
|
+ this.GetUser();
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ btnOK() {
|
|
|
+ let userForm = {
|
|
|
+ username: this.form.addUserName,
|
|
|
+ password: this.form.addUserPwd,
|
|
|
+ role: this.form.addUserRoleValue,
|
|
|
+ state: this.form.addUserStateValue
|
|
|
+ }
|
|
|
+ Homeadduser(userForm).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '创建成功'
|
|
|
+ });
|
|
|
+ this.GetUser()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ btnNO() {
|
|
|
+ this.dialogVisible = !this.dialogVisible
|
|
|
+ },
|
|
|
+ goTo() {
|
|
|
+ this.$router.push("/Alarm/RealTime");
|
|
|
+ },
|
|
|
+ downlodTable() {
|
|
|
+ this.$confirm('是否需要导出xlsx文档, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.downFile();
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '导出成功!'
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消导出'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downFile() {
|
|
|
+ var wb = XLSX.utils.table_to_book(document.querySelector("#userTableData"));
|
|
|
+ var wbout = XLSX.write(wb, {
|
|
|
+ bookType: "xlsx",
|
|
|
+ bookSST: true,
|
|
|
+ type: "array"
|
|
|
+ });
|
|
|
+ try {
|
|
|
+ FileSaver.saveAs(
|
|
|
+ new Blob([wbout], {
|
|
|
+ type: "application/octet-stream"
|
|
|
+ }),
|
|
|
+ "user.xlsx"
|
|
|
+ );
|
|
|
+ } catch (e) {
|
|
|
+ if (typeof console !== "undefined") console.log(e, wbout);
|
|
|
+ }
|
|
|
+ return wbout;
|
|
|
+ },
|
|
|
+ addUser() {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .downlodTable {
|
|
|
+ width: 50px;
|
|
|
+ height: 30px;
|
|
|
+ box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
|
|
|
+ border: 1px solid rgba(1, 148, 228, 0.34) !important;
|
|
|
+ background: none !important;
|
|
|
+ float: right;
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ right: 125px;
|
|
|
+ color: #ddd;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ padding: 4.0625rem 1.5rem 4.0625rem 2.5rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ // background: url(../../assets/img/border.png) no-repeat center center;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ .border {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border_left_top {
|
|
|
+ width: 11.625rem;
|
|
|
+ height: 5.875rem;
|
|
|
+ background: url(../../../assets/img/border_left_top.png);
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border_top {
|
|
|
+ width: calc(100% - 11.625rem - 4.9375rem);
|
|
|
+ height: 1.5rem;
|
|
|
+ background: url(../../../assets/img/border_top.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ left: 11.625rem;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border_right_top {
|
|
|
+ width: 4.9375rem;
|
|
|
+ height: 5.875rem;
|
|
|
+ background: url(../../../assets/img/border_right_top.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ right: 0.0625rem;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border_left {
|
|
|
+ width: 1.375rem;
|
|
|
+ height: calc(100% - 5.875rem - 7.625rem);
|
|
|
+ background: url(../../../assets/img/border_left.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 5.875rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border_right {
|
|
|
+ width: 0.1875rem;
|
|
|
+ height: calc(100% - 5.875rem - 7.6875rem);
|
|
|
+ background: url(../../../assets/img/border_right.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ right: 0;
|
|
|
+ top: 5.875rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border_left_bottom {
|
|
|
+ width: 11.625rem;
|
|
|
+ height: 7.625rem;
|
|
|
+ background: url(../../../assets/img/border_left_bottom.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border_bottom {
|
|
|
+ width: calc(100% - 11.625rem - 4.9375rem);
|
|
|
+ height: 0.1875rem;
|
|
|
+ background: url(../../../assets/img/border_bottom.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ left: 11.625rem;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border_right_bottom {
|
|
|
+ width: 4.9375rem;
|
|
|
+ height: 7.6875rem;
|
|
|
+ background: url(../../../assets/img/border_right_bottom.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #topButton2 {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ left: 8px;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ button:first-child {
|
|
|
+ border: none;
|
|
|
+ background: url(../../../assets/img/check1.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 12px 80px 12px 40px;
|
|
|
+ position: absolute;
|
|
|
+ font-weight: bold;
|
|
|
+ font-style: italic;
|
|
|
+ color: #76899D;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table::before {
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addUser {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ right: 25px;
|
|
|
+ top: 30px;
|
|
|
+ background: url(../../../assets/img/btn_add.png) no-repeat center center;
|
|
|
+ background-size: 100%;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
+ width: 5rem;
|
|
|
+ padding: 0;
|
|
|
+ height: 2rem;
|
|
|
+ line-height: 2rem;
|
|
|
+ font-size: 0.775rem;
|
|
|
+ color: #2DAFF5;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #addUserDialog .el-dialog {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #addUserDialog .el-dialog .el-dialog__header {
|
|
|
+ padding: 55px 60px 10px;
|
|
|
+ color: #2DAFF5;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ #addUserDialog .el-dialog .el-dialog__header .el-dialog__title {
|
|
|
+ color: #2DAFF5;
|
|
|
+ }
|
|
|
+
|
|
|
+ #addUserDialog .el-dialog .el-dialog__header .el-dialog__headerbtn {
|
|
|
+ position: absolute;
|
|
|
+ top: 5rem;
|
|
|
+ right: 11rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ #addUserDialog .el-dialog .el-dialog__body {
|
|
|
+ background: url(../../../assets/img/dialogBack.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 110px 70px 110px 50px;
|
|
|
+ color: #2DAFF5;
|
|
|
+ height: 37rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ #addUserDialog .el-dialog .el-dialog__body .el-form-item__label {
|
|
|
+ color: #2DAFF5;
|
|
|
+ }
|
|
|
+
|
|
|
+ #addUserDialog .el-dialog .el-dialog__body input {
|
|
|
+ color: #ddd;
|
|
|
+ height: 32px !important;
|
|
|
+ line-height: 32px !important;
|
|
|
+ -webkit-box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
|
|
|
+ box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
|
|
|
+ border: 1px solid rgba(1, 148, 228, 0.34) !important;
|
|
|
+ background: none !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ #addUserDialog .el-dialog .el-dialog__footer {
|
|
|
+ padding: 10px 50px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logBox .el-table th {
|
|
|
+ background: #103366 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logBox .el-table th>.cell {
|
|
|
+ color: #0194E4 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ #sureBtn {
|
|
|
+ background: url(../../../assets/img/btn_add.png) no-repeat center center;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+</style>
|
