| | |
| | | <div class="headerContent"> |
| | | <div class="search"> |
| | | <span>筛选条件:</span> |
| | | <el-input placeholder="请输入内容" v-model="search"></el-input> |
| | | <el-input v-model="context" placeholder="请输入内容"></el-input> |
| | | <div class="findBtn"> |
| | | <el-button type="primary" @click="handlePhone">查询</el-button> |
| | | <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" width="45%"> |
| | | <el-button class="addBtn" type="primary" @click="dialogCreate = true">新增部门</el-button> |
| | | <el-dialog :visible.sync="dialogCreate" title="新增部门信息" width="45%" v-if="dialogCreate"> |
| | | <createUser :refresh="getUserList" /> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> |
| | | <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 prop="id" label="部门ID" min-width="5"> |
| | | <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> |
| | | </el-table-column> |
| | | <el-table-column prop="nickName" label="用户名称" min-width="10"> |
| | | <el-table-column prop="departName" label="部门名称" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="username" label="所属姓名" min-width="10"> |
| | | <el-table-column prop="departType" label="部门类型" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="mobile" label="联系方式" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="note" label="所属角色" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="departName" label="所属部门" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="jobTitle" label="所属职务" min-width="10"> |
| | | <el-table-column prop="departDes" label="部门描述" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="createTime" label="创建时间" min-width="10"> |
| | | </el-table-column> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- 查看修改页面 --> |
| | | <el-dialog :visible.sync="dialogUpdate" width="45%"> |
| | | <updateUser :updateFlag="updateFlag" :userInfo=userInfo /> |
| | | <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '修改部门信息' :'查看部门信息'" v-if="dialogUpdate"> |
| | | <updateUser :updateFlag="updateFlag" :userInfo="userInfo" :getUserList="getUserList" @changeDialog="changMyDialog" /> |
| | | </el-dialog> |
| | | <!-- 分页 --> |
| | | <div class="pagination"> |
| | |
| | | data() { |
| | | return { |
| | | tableData: [], |
| | | search: "", |
| | | dialogCreate: false, |
| | | dialogUpdate: false, |
| | | updateFlag: false, |
| | |
| | | totalNum: 200, |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | context:'' |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | let { id, status } = obj; |
| | | status == true ? status = 1 : status = 0; |
| | | console.log(id, status); |
| | | this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => { |
| | | this.$axios.post(`sccg/depart/status` ,{id:id,status:status}).then(res => { |
| | | console.log(res); |
| | | }) |
| | | }, |
| | |
| | | const that = this; |
| | | this.dialogCreate = false; |
| | | // 获取所有用户信息 |
| | | this.$axios.get('sccg/admin/list').then(res => { |
| | | this.$axios.get('sccg/depart/page').then(res => { |
| | | if (res.code === 200) { |
| | | res.data.records.forEach(item => { |
| | | item.createTime = helper(item.createTime); |
| | | item.status == 1 ? item.status = true : item.status = false; |
| | | }) |
| | | that.totalNum = res.data.records.length; |
| | | that.tableData = res.data.records.slice((that.currentPage - 1) * 10, that.currentPage * 10) |
| | | that.tableData = res.data.records.slice((that.currentPage - 1) * that.pageSize, that.currentPage * that.pageSize) |
| | | } |
| | | }) |
| | | }, |
| | | search() { |
| | | const that = this; |
| | | this.dialogCreate = false; |
| | | // 获取所有用户信息 |
| | | this.$axios.get('sccg/depart/page',{params:{currentPage:this.currentPage,pageSize:this.pageSize,departName:this.context}}).then(res => { |
| | | if (res.code === 200) { |
| | | res.data.records.forEach(item => { |
| | | item.createTime = helper(item.createTime); |
| | | item.status == 1 ? item.status = true : item.status = false; |
| | | }) |
| | | that.totalNum = res.data.records.length; |
| | | that.tableData = res.data.records.slice((that.currentPage-1)*10,that.currentPage*10) |
| | | } |
| | | }) |
| | | }, |
| | |
| | | this.userInfo = rowData |
| | | }, |
| | | // 当前页改变触发事件 |
| | | changeCurrentPage(page) { |
| | | changeCurrentPage(page){ |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | this.search(); |
| | | }, |
| | | // 上一页点击事件 |
| | | handlePrev(page) { |
| | | handlePrev(page){ |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | this.search(); |
| | | }, |
| | | // 下一页点击事件 |
| | | handleNext(page) { |
| | | handleNext(page){ |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | this.search(); |
| | | }, |
| | | // 用户查询(暂时支持电话号码) |
| | | handlePhone() { |
| | | const { search, getUserList } = this; |
| | | const that = this; |
| | | if (search == '') { |
| | | getUserList(); |
| | | return; |
| | | } |
| | | this.dialogCreate = false; |
| | | // 获取所有用户信息 |
| | | this.$axios.get(`sccg/admin/list?mobile=${search}`).then(res => { |
| | | if (res.code === 200) { |
| | | res.data.records.forEach(item => { |
| | | item.createTime = helper(item.createTime); |
| | | item.status == 1 ? item.status = true : item.status = false; |
| | | }) |
| | | that.totalNum = res.data.records.length; |
| | | that.tableData = res.data.records.slice((that.currentPage - 1) * 10, that.currentPage * 10) |
| | | } |
| | | }) |
| | | // 关闭dialog |
| | | changMyDialog(val){ |
| | | this.dialogUpdate = val.dialogFlag; |
| | | } |
| | | } |
| | | }, |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | |
| | | &::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> |