| | |
| | | <template> |
| | | <div class="userList"> |
| | | <header> |
| | | <div class="headerContent"> |
| | | <div class="search"> |
| | | <span>筛选条件:</span> |
| | | <el-input placeholder="请输入内容" v-model="context"></el-input> |
| | | <div class="findBtn"> |
| | | <el-button type="primary" @click="search">查询</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="addUser"> |
| | | <el-button class="addBtn" type="primary" @click="dialogCreate = true">新建角色</el-button> |
| | | <el-dialog :visible.sync="dialogCreate" title="新增角色" width="45%" v-if="dialogCreate" |
| | | :before-close="handleClose"> |
| | | <createUser :refresh="context==='' ? getUserList : search" /> |
| | | </el-dialog> |
| | | </div> |
| | | </div> |
| | | </header> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <div class="type-nav"> |
| | | <div @click="changeTypeChecked(index)" v-for="(item,index) in typeList" :key="item.name" |
| | | :class="[item.checked ? 'is-active':'','type-item']">{{item.name}}</div> |
| | | </div> |
| | | <!-- 数据展示 --> |
| | | <el-table ref="multipleTable" |
| | | :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" |
| | | :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" |
| | | @selection-change="tableChange"> |
| | | <el-table-column type="selection" min-width="5"> |
| | | </el-table-column> |
| | | <!-- <el-table-column label="用户ID" min-width="5"> |
| | | <template slot-scope="scope">{{ scope.row.id }}</template> |
| | | </el-table-column> --> |
| | | <el-table-column prop="name" label="车牌号" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="sort" label="车主姓名" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="adminCount" label="默认角色" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="description" label="备注" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="status" label="启用" min-width="5"> |
| | | <template slot-scope="scope"> |
| | | <el-switch class="switchStyle" v-model="scope.row.status" active-text="开" inactive-text="关" |
| | | active-color="#3fef9a" inactive-color="#000212" @change="handleChangeStatus(scope.row)"> |
| | | </el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="operation" label="操作" min-width="15"> |
| | | <template slot-scope="scope"> |
| | | <div class="operation"> |
| | | <!-- <span @click="handleChangeRole(scope.row)">修改角色</span> --> |
| | | <span @click="handleFind(scope.row)">查看</span> |
| | | <span class="line">|</span> |
| | | <!-- <span>修改密码</span> --> |
| | | <!-- <span>删除</span> --> |
| | | <span @click="handleUpdate(scope.row)">权限设置</span> |
| | | <span class="line">|</span> |
| | | <span @click="handleStop(scope.row)">停用</span> |
| | | <span class="line">|</span> |
| | | <span @click="handleDelete([scope.row.id])">删除</span> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- 修改页面 --> |
| | | <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '权限设置' :'查看角色信息'" |
| | | v-if="dialogUpdate" :before-close="handleClose"> |
| | | <updateUser :updateFlag="updateFlag" :userInfo=userInfo |
| | | :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" /> |
| | | </el-dialog> |
| | | <!-- 查看页面 --> |
| | | <el-dialog :visible.sync="dialogView" width="45%" title="查看角色信息" |
| | | v-if="dialogView" :before-close="handleClose"> |
| | | <MyView :userInfo=userInfo @changeDialog="changeDialog" /> |
| | | </el-dialog> |
| | | <!-- tools --> |
| | | <div class="tools"> |
| | | <div class="funs"> |
| | | <div class="funsItem"> |
| | | <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox> |
| | | </div> |
| | | <div class="funsItem"> |
| | | <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox> |
| | | </div> |
| | | <div class="funsItem"> |
| | | <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" |
| | | :value="item.value" :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="pagination"> |
| | | <el-pagination background :current-page="currentPage" layout="prev, pager, next" |
| | | :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage" |
| | | @prev-click="handlePrev" @next-click="handleNext"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </main> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import createUser from "./createUser" |
| | | import updateUser from "./updateUser" |
| | | import helper from "@/utils/mydate.js" |
| | | import MyView from './viewRole' |
| | | export default { |
| | | components: { |
| | | createUser, updateUser,MyView |
| | | }, |
| | | data() { |
| | | return { |
| | | tableData: [], |
| | | context: "", |
| | | dialogCreate: false, |
| | | dialogUpdate: false, |
| | | dialogView:false, |
| | | updateFlag: false, |
| | | userInfo: '', |
| | | totalNum: null, |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | all: false, |
| | | unsame: false, |
| | | myIdx: 0, |
| | | preMyIdx: 0, |
| | | options: [ |
| | | { |
| | | value: 0, |
| | | label: '批量操作', |
| | | disabled: true, |
| | | }, |
| | | { |
| | | value: 1, |
| | | label: '批量启用', |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: '批量禁用', |
| | | }, |
| | | { |
| | | value: 3, |
| | | label: '批量删除', |
| | | } |
| | | ], |
| | | tempList: [], |
| | | typeList: [ |
| | | { |
| | | name: '违规', |
| | | value: 1, |
| | | checked: true |
| | | }, |
| | | { |
| | | name: '违建', |
| | | value: 2, |
| | | checked: false, |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | created() { |
| | | this.getUserList(); |
| | | }, |
| | | methods: { |
| | | async selectChange(list) { |
| | | console.log(this.tempList); |
| | | if (this.tempList.length !== 0) { |
| | | this.preMyIdx = list; |
| | | if (list === 3) { |
| | | await this.handleDelete(this.tempList); |
| | | } else if (list === 2) { |
| | | await this.mulUpdateStatus(this.tempList, 0); |
| | | } else { |
| | | await this.mulUpdateStatus(this.tempList, 1); |
| | | } |
| | | this.myIdx = 0; |
| | | } else { |
| | | this.myIdx = this.preMyIdx; |
| | | this.$message({ |
| | | type: 'warning', |
| | | message: '您还没选中任何数据', |
| | | }) |
| | | } |
| | | }, |
| | | mulUpdateStatus(idArr, flag) { |
| | | this.$confirm(flag === 1 ? "您确定要进行批量启用角色吗?" : '您确定要进行批量禁用角色吗?') |
| | | .then(_ => { |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/role/updateStatusBatch?ids=' + idArr + '&status=' + flag, |
| | | }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '更改用户状态成功', |
| | | }) |
| | | this.getUserList(); |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: res.message |
| | | }) |
| | | } |
| | | console.log(res); |
| | | }) |
| | | }) |
| | | .catch(err => { console.log(err) }) |
| | | }, |
| | | tableChange(list) { |
| | | this.tempList = []; |
| | | list.forEach(item => { |
| | | this.tempList.push(item.id); |
| | | }) |
| | | if (list.length === this.tableData.length) { |
| | | this.all = true; |
| | | } else { |
| | | this.all = false |
| | | } |
| | | }, |
| | | changeTime({ createTime }) { |
| | | return helper(createTime); |
| | | }, |
| | | selectAll() { |
| | | this.$refs.multipleTable.toggleAllSelection(); |
| | | }, |
| | | disSame(list) { |
| | | list.forEach(row => { |
| | | this.$refs.multipleTable.toggleRowSelection(row) |
| | | }) |
| | | }, |
| | | handleDelete(id) { |
| | | const that = this; |
| | | // let arr = []; |
| | | // arr.push(id); |
| | | this.$confirm('确认删除?') |
| | | .then(_ => { |
| | | that.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/role/delete?ids=' + id, |
| | | }) |
| | | .then(res => { |
| | | this.myIdx = 0; |
| | | this.preMyIdx = 0; |
| | | console.log(res); |
| | | this.$message({ |
| | | type: 'success', |
| | | message: res.message |
| | | }) |
| | | |
| | | this.getUserList(); |
| | | }) |
| | | }) |
| | | .catch(_ => { }); |
| | | }, |
| | | // 修改角色 |
| | | handleChangeRole(obj) { |
| | | this.dialogUpdate = true |
| | | this.user = obj; |
| | | // console.log(obj) |
| | | }, |
| | | // 修改用户状态 |
| | | handleChangeStatus(obj) { |
| | | let { id, status } = obj; |
| | | status == true ? status = 1 : status = 0; |
| | | console.log(id, status); |
| | | this.$axios.post(`/sccg/role/updateStatus/` + id + '?status=' + status).then(res => { |
| | | console.log(res); |
| | | }) |
| | | }, |
| | | handleStop(obj) { |
| | | // let { id, status } = obj; |
| | | // status == true ? status = 1 : status = 0; |
| | | // console.log(id, status); |
| | | // this.$axios.post(`/sccg/role/updateStatus/` + id + '?status=' + status).then(res => { |
| | | // this.getUserList(); |
| | | // }) |
| | | }, |
| | | // 获取用户列表 |
| | | getUserList() { |
| | | const that = this; |
| | | this.dialogCreate = false; |
| | | // 获取所有用户信息 |
| | | this.$axios.get('sccg/role/listAll').then(res => { |
| | | this.totalNum = res.data.length; |
| | | this.search(); |
| | | }) |
| | | }, |
| | | search() { |
| | | const that = this; |
| | | const { currentPage, pageSize, context } = this; |
| | | this.dialogCreate = false; |
| | | // 获取所有用户信息 |
| | | if (context == '') { |
| | | this.$axios.get('sccg/role/list?keyword=' + '&pageNum=' + currentPage + '&pageSize=' + pageSize).then(res => { |
| | | if (res.code === 200) { |
| | | console.log(res); |
| | | res.data.list.forEach(item => { |
| | | // item.createTime = helper(item.createTime); |
| | | item.status == 1 ? item.status = true : item.status = false; |
| | | }) |
| | | that.tableData = res.data.list; |
| | | this.totalNum = res.data.list.length; |
| | | } |
| | | }) |
| | | } else { |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/role/list?keyword=' + context + '&pageNum=' + currentPage + '&pageSize=' + pageSize, |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | res.data.list.forEach(item => { |
| | | item.status == 1 ? item.status = true : item.status = false; |
| | | }) |
| | | that.tableData = res.data.list |
| | | this.totalNum = res.data.list.length; |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if ((rowIndex + 1) % 2 == 0) { |
| | | return 'warning-row'; |
| | | } else { |
| | | return 'success-row'; |
| | | } |
| | | return ''; |
| | | }, |
| | | // 查看用户信息(不可修改) |
| | | handleFind(rowData) { |
| | | this.dialogView = true; |
| | | this.userInfo = rowData; |
| | | }, |
| | | // 修改用户部门信息 |
| | | handleUpdate(rowData) { |
| | | this.dialogUpdate = true; |
| | | this.updateFlag = true; |
| | | this.userInfo = rowData |
| | | }, |
| | | // 当前页改变触发事件 |
| | | changeCurrentPage(page) { |
| | | this.currentPage = page; |
| | | this.search(); |
| | | }, |
| | | // 上一页点击事件 |
| | | handlePrev(page) { |
| | | this.currentPage = page; |
| | | this.search(); |
| | | }, |
| | | // 下一页点击事件 |
| | | handleNext(page) { |
| | | this.currentPage = page; |
| | | this.search(); |
| | | }, |
| | | changeDialog({flag}) { |
| | | this.dialogUpdate = flag; |
| | | this.dialogCreate = flag; |
| | | this.dialogView = flag; |
| | | }, |
| | | handleClose(done) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | this.dialogUpdate = false; |
| | | this.dialogCreate = false; |
| | | done(); |
| | | }) |
| | | .catch(_ => { }); |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .userList { |
| | | text-align: left; |
| | | margin: 10px 20px; |
| | | color: #4b9bb7; |
| | | |
| | | header { |
| | | background-color: #09152f; |
| | | border: 1pox solid #fff; |
| | | |
| | | .headerContent { |
| | | padding: 0 40px; |
| | | display: flex; |
| | | line-height: 100px; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | .search { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | |
| | | span { |
| | | flex: 1; |
| | | } |
| | | |
| | | .el-input { |
| | | flex: 2; |
| | | color: #1d3f57; |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .findBtn { |
| | | line-height: 100px; |
| | | margin-left: 15px; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-top: -2px; |
| | | |
| | | .el-button { |
| | | padding: 12px 25px; |
| | | border-radius: 20px; |
| | | } |
| | | } |
| | | |
| | | .addBtn { |
| | | background-color: #eb5d01; |
| | | border: none; |
| | | border-radius: 20px; |
| | | padding: 12px 30px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | main { |
| | | background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | border: 1pox solid #fff; |
| | | .type-nav { |
| | | display: flex; |
| | | line-height: 40px; |
| | | margin-left: 30px; |
| | | padding-top: 10px; |
| | | margin-bottom: 10px; |
| | | |
| | | .type-item { |
| | | width: 80px; |
| | | text-align: center; |
| | | |
| | | &:hover { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | | .is-active { |
| | | background-color: #070f22; |
| | | border-radius: 4px; |
| | | color: #fff; |
| | | } |
| | | } |
| | | .mainTitle { |
| | | line-height: 60px; |
| | | } |
| | | |
| | | .tools { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | |
| | | .funs { |
| | | display: flex; |
| | | |
| | | .funsItem { |
| | | line-height: 28px; |
| | | display: flex; |
| | | align-items: center; |
| | | border: 1px solid #17324c; |
| | | border-radius: 4px; |
| | | font-size: 12px; |
| | | margin-left: 10px; |
| | | |
| | | .el-checkbox { |
| | | width: 80px; |
| | | padding: 0 10px; |
| | | } |
| | | |
| | | .el-select { |
| | | width: 120px; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | border: none; |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | &:hover { |
| | | border: 1px solid #4b9bb7; |
| | | } |
| | | |
| | | &:hover .el-checkbox { |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .pagination { |
| | | margin-top: 50px; |
| | | display: flex; |
| | | line-height: 50px; |
| | | justify-content: center; |
| | | |
| | | .el-pagination { |
| | | |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |
| | | background-color: #071f39; |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .active { |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table { |
| | | color: #4b9bb7; |
| | | font-size: 10px; |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | .operation { |
| | | display: flex; |
| | | |
| | | .line { |
| | | padding: 0 5px; |
| | | } |
| | | |
| | | span:hover { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table::v-deep .warning-row { |
| | | background: #06122c; |
| | | } |
| | | |
| | | .el-table::v-deep .success-row { |
| | | background: #071f39; |
| | | } |
| | | |
| | | &::v-deep .switchStyle .el-switch__label { |
| | | position: absolute; |
| | | display: none; |
| | | color: #fff; |
| | | } |
| | | |
| | | &::v-deep .el-switch__core { |
| | | background-color: rgba(166, 166, 166, 1); |
| | | } |
| | | |
| | | &::v-deep .switchStyle .el-switch__label--left { |
| | | z-index: 9; |
| | | left: 20px; |
| | | } |
| | | |
| | | &::v-deep .switchStyle .el-switch__label--right { |
| | | z-index: 9; |
| | | left: 4px; |
| | | } |
| | | |
| | | &::v-deep .switchStyle .el-switch__label.is-active { |
| | | display: block; |
| | | } |
| | | |
| | | &::v-deep .switchStyle.el-switch .el-switch__core, |
| | | &::v-deep .el-switch .el-switch__label { |
| | | width: 50px !important; |
| | | } |
| | | } |
| | | |
| | | &::v-deep .el-dialog__header, |
| | | &::v-deep .el-dialog__body { |
| | | background-color: #06122c; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__header { |
| | | display: flex; |
| | | align-items: center; |
| | | background-color: #fff; |
| | | padding: 20px; |
| | | line-height: 60px; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__title { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__close { |
| | | width: 20px; |
| | | height: 20px; |
| | | // color: #fff; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__body { |
| | | padding: 0; |
| | | } |
| | | } |
| | | </style> |
| | | <router-view></router-view> |
| | | </template> |