ibms/src/views/data_admin/buildUser/index.vue

<template>
    <div style='display: flex; flex-direction: column;flex-grow: 1; flex-shrink: 1;'>
        <table-page-template>
            <div slot='form' class='condition'>
                <p>
                    <el-input
                        v-model.trim='searchValue'
                        class='margin-right'
                        style='width: 300px; margin-right: 10px;'
                        placeholder='姓名、联系电话、登录名、备注'
                        @change='searchChange'
                    ></el-input>
                </p>
                
                <!-- <el-button @click='refresh' style="margin-left: 10px;">&nbsp;&nbsp;&nbsp;刷新&nbsp;&nbsp;&nbsp;</el-button> -->
                        
                <!-- <el-button type='danger' @click='someDel'>批量删除</el-button> -->
            </div>
              
                <div slot='table' style="border: 1px solid #dfe6ec">
                    <p style="overflow: hidden;">
                        <el-button style="margin: 10px;float: right;"  @click='addUser'>添加</el-button>         
                    </p> 
                    <el-table
                height="600"
                
                :data='tableData'
                border
                tooltip-effect='dark'
                style='width: 100%;'
                v-loading='loading'
                @selection-change='handleSelectionChange'
            >
                <!-- <el-table-column type='selection' width='55' align='center'></el-table-column> -->
                <el-table-column prop='UserName' label='姓名' width='100' header-align='center' align='center'></el-table-column>
                <el-table-column prop='Phone' label='联系电话/登录名' width='120' header-align='center' align='center'></el-table-column>
                <el-table-column prop='Note' label='备注' header-align='center'></el-table-column>
                <el-table-column label='操作' width='150' header-align='center' class="btn">
                    <template slot-scope='scope'>
                        <el-button type='primary' plain size='mini' @click='editUser(scope.row)'>编辑</el-button>
                        <el-button type='danger' plain size='mini' @click='del(scope.row)'>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
                </div>
            
            <base-pagination :currentPages='pageNum' :total='total' @pageChanged='pageChanged' slot='pagination'></base-pagination>
        </table-page-template>
        <saga-edit ref='edit' @refresh='refresh'></saga-edit>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import {
    getUser, //获取扫楼用户
    delUser //删除用户
} from '@/api/scan/request'
//component
import SagaEdit from './Edit'
export default {
    name: 'floor-user',
    data() {
        return {
            searchValue: '',
            loading: false,
            tableData: [],
            checkedArr: [],
            pageNum: 1,
            pageSize: 10,
            total: 0
        }
    },
    components: {
        SagaEdit
    },
    computed: {
        ...mapGetters('layout', ['projectId', 'userId'])
    },
    methods: {
        pageChanged(page, size) {
            this.pageNum = page
            this.pageSize = size
            this.getUserList()
        },
        refresh() {
            this.getUserList()
        },
        searchChange() {
            this.pageNum = 1
            this.getUserList()
        },
        addUser() {
            this.$refs['edit'].show()
        },
        editUser(row) {
            this.$refs['edit'].show(row)
        },
        del(row) {
            var UserList = [row.UserId]
            this.delUser(UserList)
        },
        handleSelectionChange(arr) {
            this.checkedArr = arr.map(ele => ele.UserId)
        },
        someDel() {
            if (this.checkedArr.length < 1) {
                this.$message({
                    message: '请至少选择一条用户',
                    type: 'warning'
                })
            } else {
                this.delUser(this.checkedArr)
            }
        },
        delUser(UserList) {
            this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let param = {
                        ProjId: this.projectId,
                        UserId: this.userId,
                        UserList: UserList
                    }
                    delUser(param).then(result => {
                        if (result.data.Result == 'success') {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.refresh()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
        },

        getUserList() {
            this.loading = true
            let param = {
                filter: this.searchValue,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ProjId: this.projectId,
                UserId: this.userId
            }
            getUser(param).then(result => {
                this.loading = false
                this.tableData = result.data.UserList
                this.total = result.data.Count
            })
        },
        init() {
            this.getUserList()
        }
    },
    created() {
        this.init()
    },
    watch: {
        projectId() {
            this.searchValue = ''
            this.getUserList();
        }
    }
}
</script>

<style scoped lang='less'>
.condition {
    margin: 10px;
}
</style>