| | |
| | | :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> |
| | | <el-table-column type="selection" min-width="5"> |
| | | </el-table-column> |
| | | <el-table-column label="店铺编号" min-width="10"> |
| | | <template slot-scope="scope">{{ scope.row.id }}</template> |
| | | <el-table-column prop="storeNumber" label="店铺编号" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="nickName" label="店铺名称" min-width="10"> |
| | | <el-table-column prop="storeName" label="店铺名称" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="username" label="店铺联系人" min-width="10"> |
| | | <el-table-column prop="storeOwner" label="店铺联系人" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="mobile" label="店铺联系电话" min-width="10"> |
| | | <el-table-column prop="storePhone" label="店铺联系电话" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="note" label="店铺详细地址" min-width="10"> |
| | | <el-table-column prop="storeAddress" label="店铺详细地址" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="note" label="关联摄像机" min-width="10"> |
| | | <el-table-column prop="storeMoni" label="关联摄像机" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="operation" label="操作" min-width="15"> |
| | | <el-table-column prop="operation" label="操作" min-width="20"> |
| | | <template slot-scope="scope"> |
| | | <div class="operation"> |
| | | <el-link icon="el-icon-edit" :underline="false">编辑</el-link> |
| | | <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false">删除</el-link> |
| | | <el-link icon="el-icon-edit" :underline="false">推送信息</el-link> |
| | | <el-link icon="el-icon-edit" :underline="false">查看</el-link> |
| | | <el-link icon="el-icon-edit" :underline="false" @click="hadnleView(scope.row,0)">编辑</el-link> |
| | | <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link> |
| | | <el-link class="leftPx" icon="el-icon-edit" :underline="false">推送信息</el-link> |
| | | <el-link class="leftPx" icon="el-icon-edit" :underline="false" @click="hadnleView(scope.row,1)">查看</el-link> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- 查看修改页面 --> |
| | | <el-dialog :visible.sync="dialogUpdate" width="45%" v-if="dialogUpdate" |
| | | :title="updateFlag ? '修改用户部门信息' :'查看用户信息'"> |
| | | <updateUser :updateFlag="updateFlag" :userInfo=userInfo /> |
| | | :title="updateFlag ? '修改店铺信息' : '查看店铺信息'" :before-close="handleClose"> |
| | | <updateUser :updateFlag="updateFlag" :userInfo=userInfo @handleUpdateData="handleUpdateData" /> |
| | | </el-dialog> |
| | | <!-- 分页 --> |
| | | <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"> |
| | | :page-size="pageSize" @current-change="changeCurrentPage"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | tableData: [], |
| | | tableData: [ |
| | | { |
| | | id: 1, |
| | | storeNumber: '1002220212', |
| | | storeName: '店铺1', |
| | | storeOwner: '张三', |
| | | storePhone: '17844631885', |
| | | storeAddress: '甜心街12号', |
| | | storeMoni: '摄像头1' |
| | | }, |
| | | { |
| | | id: 2, |
| | | storeNumber: '1002220213', |
| | | storeName: '店铺2', |
| | | storeOwner: '张三', |
| | | storePhone: '17844631885', |
| | | storeAddress: '甜心街13号', |
| | | storeMoni: '摄像头1' |
| | | }, |
| | | { |
| | | id: 3, |
| | | storeNumber: '1002220214', |
| | | storeName: '店铺3', |
| | | storeOwner: '张三', |
| | | storePhone: '17844631885', |
| | | storeAddress: '甜心街14号', |
| | | storeMoni: '摄像头1' |
| | | }, |
| | | { |
| | | id: 4, |
| | | storeNumber: '1002220215', |
| | | storeName: '店铺4', |
| | | storeOwner: '张三', |
| | | storePhone: '17844631885', |
| | | storeAddress: '甜心街15号', |
| | | storeMoni: '摄像头1' |
| | | }, |
| | | { |
| | | id: 5, |
| | | storeNumber: '1002220216', |
| | | storeName: '店铺5', |
| | | storeOwner: '张三', |
| | | storePhone: '17844631885', |
| | | storeAddress: '甜心街16号', |
| | | storeMoni: '摄像头1' |
| | | }, |
| | | ], |
| | | search: "111", |
| | | dialogUpdate: false, |
| | | updateFlag: false, |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | this.getUserList(); |
| | | }, |
| | | methods: { |
| | | // 删除数据 |
| | | handleDelete(id){ |
| | | const {tableData} = this |
| | | let idx |
| | | for(let key in tableData){ |
| | | tableData[key].id === id ? idx = key :'' |
| | | } |
| | | this.tableData.splice(idx,1) |
| | | }, |
| | | // 打开弹窗 |
| | | hadnleView(data,index){ |
| | | index === 0 ? this.updateFlag = true : this.updateFlag = false |
| | | this.userInfo = data |
| | | this.dialogUpdate = true |
| | | }, |
| | | // 自定义关闭弹窗 |
| | | handleClose(done){ |
| | | if(this.updateFlag){ |
| | | this.$confirm('确认关闭?') |
| | | .then(_=>{ |
| | | done() |
| | | }) |
| | | }else{ |
| | | done() |
| | | } |
| | | }, |
| | | // 更新数据 |
| | | handleUpdateData(obj){ |
| | | const {tableData} = this |
| | | let index = -1 |
| | | for(let item in tableData){ |
| | | if(tableData[item].id===obj.id){ |
| | | index = item |
| | | } |
| | | } |
| | | this.tableData.splice(index,1,obj) |
| | | this.dialogUpdate = false |
| | | }, |
| | | // 当前页改变触发事件 |
| | | changeCurrentPage(page) { |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | }, |
| | | // 上一页点击事件 |
| | | handlePrev(page) { |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | }, |
| | | // 下一页点击事件 |
| | | handleNext(page) { |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | }, |
| | | // 修改角色 |
| | | handleChangeRole(obj) { |
| | | this.dialogUpdate = true |
| | | this.user = obj; |
| | | // console.log(obj) |
| | | }, |
| | | // 修改用户状态 |
| | | handleChangeStatus(obj) { |
| | | let { id, status } = obj; |
| | | status == true ? status = 1 : status = 0; |
| | | this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => { |
| | | console.log(res); |
| | | }) |
| | | }, |
| | | // 获取用户列表 |
| | | getUserList() { |
| | | const that = this; |
| | | const { currentPage, pageSize, search } = this; |
| | | // 获取所有用户信息、用户查询(暂时支持电话号码) |
| | | // this.$axios.get(`sccg/store/storeinfo/list?keyword=${search}&pageNum=${currentPage}&pageSize=${pageSize}`).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.pages * pageSize; |
| | | // that.tableData = res.data.records; |
| | | // this.renderFlag = true; |
| | | // } |
| | | // }) |
| | | }, |
| | | // 查看用户信息(不可修改) |
| | | handleFind(rowData) { |
| | | this.dialogUpdate = true; |
| | | this.updateFlag = false; |
| | | this.userInfo = rowData; |
| | | }, |
| | | // 修改用户部门信息 |
| | | handleUpdate(rowData) { |
| | | this.dialogUpdate = true; |
| | | this.updateFlag = true; |
| | | this.userInfo = rowData |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
| | |
| | | if (this.keyword != '') { |
| | | this.search = this.keyword; |
| | | } |
| | | this.getUserList(); |
| | | this.$emit('resetFresh', { flag: false }) |
| | | } |
| | | }, |
| | | immediate: true |
| | | } |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | |
| | | |
| | | .operation { |
| | | display: flex; |
| | | |
| | | .line { |
| | | padding: 0 5px; |
| | | } |
| | | |
| | | .el-button { |
| | | // background-color: #fff; |