| | |
| | | <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="getUserList" /> |
| | | <createUser @changeDialog=changeDialog /> |
| | | </el-dialog> |
| | | </div> |
| | | </div> |
| | |
| | | <main> |
| | | <div class="mainContent"> |
| | | <!-- 数据展示 --> |
| | | <el-table ref="multipleTable" |
| | | :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" |
| | | <el-table |
| | | border |
| | | stripe |
| | | ref="multipleTable" |
| | | :header-cell-style="{'background':'#F5F5F5','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> |
| | | <!-- 查看修改页面 --> |
| | | <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '权限设置' :'查看角色信息'" |
| | | v-if="dialogUpdate" :before-close="handleClose"> |
| | | v-if="dialogUpdate" :before-close="handleClose2"> |
| | | <updateUser :updateFlag="updateFlag" :userInfo=userInfo |
| | | :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" /> |
| | | </el-dialog> |
| | | <!-- tools --> |
| | | <div class="tools"> |
| | | <div class="funs"> |
| | | <div class="funsItem"> |
| | | <!-- <div class="funsItem"> |
| | | <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox> |
| | | </div> |
| | | <div class="funsItem"> |
| | |
| | | :value="item.value" :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="pagination"> |
| | | <el-pagination background :current-page="currentPage" layout="prev, pager, next" |
| | |
| | | import createUser from "./createUser" |
| | | export default { |
| | | components: { |
| | | updateUser,createUser |
| | | updateUser, createUser |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | }, |
| | | methods: { |
| | | // 批量删除 |
| | | mulDelete(idArr){ |
| | | console.log(idArr); |
| | | mulDelete(idArr) { |
| | | this.$axios({ |
| | | method:'delete', |
| | | url:'sccg/violations/batch_delete?ids='+idArr, |
| | | }).then(res=>{ |
| | | method: 'delete', |
| | | url: 'sccg/violations/batch_delete?ids=' + idArr, |
| | | }).then(res => { |
| | | this.getUserList(); |
| | | this.$message({ |
| | | message:res.message, |
| | | type:res.code === 200 ? 'success' : 'warning' |
| | | message: res.message, |
| | | type: res.code === 200 ? 'success' : 'warning' |
| | | }) |
| | | }) |
| | | }, |
| | |
| | | }, |
| | | // 删除单条数据 |
| | | handleDelete({ number }) { |
| | | console.log(number); |
| | | this.$confirm('确认删除?') |
| | | .then(_ => { |
| | | console.log(1); |
| | | this.$axios({ |
| | | method: 'delete', |
| | | url: `sccg/violations/delete?id=${number}`, |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | this.$message({ |
| | | type: res.code === 200 ? 'success' : 'warning', |
| | | message: res.message |
| | |
| | | this.getUserList(); |
| | | }) |
| | | }) |
| | | .catch(_ => { console.log(2) }); |
| | | .catch(_ => { }); |
| | | }, |
| | | // 获取用户列表 |
| | | getUserList() { |
| | |
| | | this.totalNum = res.data.total; |
| | | }) |
| | | }, |
| | | // search() { |
| | | // const that = this; |
| | | // const { currentPage, pageSize, context } = this; |
| | | // // 获取所有用户信息 |
| | | // 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) { |
| | |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | }, |
| | | changeDialog(val) { |
| | | this.dialogUpdate = val.dialogUpdate; |
| | | console.log(val); |
| | | changeDialog({ flag }) { |
| | | this.dialogCreate = flag; |
| | | this.dialogUpdate = flag; |
| | | this.getUserList(); |
| | | }, |
| | | handleClose2(done) { |
| | | if (this.updateFlag) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | this.dialogCreate = false; |
| | | this.dialogUpdate = false; |
| | | done(); |
| | | }) |
| | | .catch(_ => { }); |
| | | } else { |
| | | done(); |
| | | } |
| | | }, |
| | | handleClose(done) { |
| | | this.$confirm('确认关闭?') |
| | |
| | | <style lang="scss" scoped> |
| | | .userList { |
| | | text-align: left; |
| | | margin: 10px 20px; |
| | | color: #4b9bb7; |
| | | |
| | | padding: 10px 20px; |
| | | color: #4b9bb7; |
| | | border: 1px solid #ccc; |
| | | .headerTitle { |
| | | line-height: 40px; |
| | | } |
| | | |
| | | header { |
| | | background-color: #09152f; |
| | | border: 1pox solid #fff; |
| | | // background-color: #09152f; |
| | | |
| | | .headerContent { |
| | | padding: 0 40px; |
| | | padding: 0; |
| | | display: flex; |
| | | line-height: 100px; |
| | | justify-content: space-between; |
| | |
| | | .el-input { |
| | | flex: 2; |
| | | color: #1d3f57; |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | } |
| | | |
| | | } |
| | |
| | | |
| | | .el-button { |
| | | padding: 12px 25px; |
| | | border-radius: 20px; |
| | | //border-radius: 20px; |
| | | } |
| | | } |
| | | |
| | | .addBtn { |
| | | background-color: #eb5d01; |
| | | //background-color: #eb5d01; |
| | | border: none; |
| | | border-radius: 20px; |
| | | //border-radius: 20px; |
| | | padding: 12px 30px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | main { |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | border: 1pox solid #fff; |
| | | |
| | | .mainTitle { |
| | | line-height: 60px; |
| | |
| | | |
| | | &::v-deep .el-input__inner { |
| | | border: none; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | } |
| | | |
| | | &:hover { |
| | |
| | | |
| | | .el-pagination { |
| | | |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |
| | | background-color: #071f39; |
| | | color: #4b9bb7; |
| | | } |
| | | // &::v-deep li, |
| | | // &::v-deep .btn-prev, |
| | | // &::v-deep .btn-next { |
| | | // // background-color: #071f39; |
| | | // color: #4b9bb7; |
| | | // } |
| | | |
| | | &::v-deep .active { |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | // &::v-deep .active { |
| | | // background-color: #409eff; |
| | | // color: #fff; |
| | | // } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table { |
| | | color: #4b9bb7; |
| | | font-size: 10px; |
| | | // color: #4b9bb7; |
| | | // font-size: 10px; |
| | | |
| | | &::v-deep .cell { |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | .operation { |
| | | display: flex; |
| | | |
| | | color: var(--operation-color); |
| | | .line { |
| | | padding: 0 5px; |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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> |
| | | </style> |