新增用户

src/pages/SystemSet/Users/index.vue

@@ -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>

src/pages/SystemSet/index/index.vue

@@ -11,6 +11,10 @@
     <label>任务<br/>设置</label>
 		<img src="../../../assets/img/System4.png" alt="">
 	</div> -->
+		<div @click="goToUsers">
+			<label>用户<br />管理</label>
+			<img src="../../../assets/img/System4.png" alt="">
+		</div>
 		<div @click="goToRestart">
 			<label>系统<br />重启</label>
 			<img src="../../../assets/img/System4.png" alt="">
@@ -44,6 +48,9 @@ isAdmin:false,
 			goToUser() {
 				this.$router.push("/SystemSet/User")
 			},
+			goToUsers () {
+				this.$router.push("/SystemSet/Users")
+			},
 			goToRestart() {
 				this.$confirm('是否需要重启系统?', '提示', {
 					confirmButtonText: '确定',

src/router/index.js

@@ -92,6 +92,11 @@ const SystemSet={
     		name: 'User',
     		component: () => import("@/pages/SystemSet/User/index"),
     	},
+      {
+    		path: '/SystemSet/Users',
+    		name: 'Users',
+    		component: () => import("@/pages/SystemSet/Users/index"),
+    	},
       // {
       // 	path: '/SystemSet/taskSetting',
       // 	name: 'taskSetting',