mashangyoujiu/Application/Agent/View/AgentJurUsers/index.html

<!--[1.5.22]-->
<style>
    .el-pagination {
        padding: 8px;
    }

    span[type='text'] {
        font-size: 12px;
        color: #aaa;
        cursor: pointer;
    }

    span[type='text']::selection {
        background-color: transparent;
    }

    span[type='text']:active {
        color: #999;
    }
</style>
<div class="goodsBox" id="app" v-cloak>
    <if condition="$authArr['userAdd'] eq true">
        <div style="margin-bottom:10px;">
            <el-button type="primary" @click="addUser" size="small">新增用户</el-button>
        </div>
    </if>
    <div style="border: 1px solid #e6e6e6;">
        <el-table border :data="usersList" style="width: 100%;border: none;">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="login_name" label="登录账号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="真实名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="role_name" label="用户角色" show-overflow-tooltip></el-table-column>
            <el-table-column prop="add_time" label="添加时间" show-overflow-tooltip></el-table-column>
            <el-table-column label="状态">

                    <template slot-scope="scope">
                        <el-switch
                        <if condition="$authArr['changeStatus'] neq true">disabled</if>
                                v-model="scope.row.status"
                                active-value="1"
                                inactive-value="2"
                                @change="changeStatus(scope.row.id)">
                        </el-switch>
                    </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="130" style="border-right: none;">
                <template slot-scope="scope">
                    <if condition="$authArr['userAdd'] eq true">
                        <el-button type="text" size="small" @click="usersEdit(scope.$index)">编辑</el-button>
                    </if>
                    <if condition="$authArr['usersDel'] eq true">
                        <span @click="deleteUsers(scope.$index)" type="text">删除</span>
                    </if>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="len">
        </el-pagination>
    </div>
</div>
<script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: function () {
                return {
                    usersList: [],
                    len: 0,
                    currentPage: 1,
                    currentLimit: 10,
                }
            },
            methods: {
                addUser: function(){
                    layer.open({
                        title: '添加用户',
                        area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
                        offset: 'rb',
                        type: 2,
                        shade: 0,
                        content: "{:U('userAdd')}",
                        end: function () {
                            MenuApp.refreshWindow();
                        }
                    });
                },
                //删除用户
                deleteUsers: function (index) {
                    var that = this;
                    this.$confirm('删除后用户可能产生变动,请谨慎操作！确定要删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        $.post("{:U('Agent/AgentJurUsers/usersDel')}", {
                            index: that.usersList[index].id
                        }, function (res) {
                            if (res.status == 1) {
                                that.$message({
                                    type: 'success',
                                    message: res.msg,
                                    duration: 1000
                                });
                                var usersList = JSON.parse(JSON.stringify(that.usersList));
                                usersList.splice(index, 1);
                                that.usersList = [];
                                that.usersList = usersList;
                                that.len--;
                            } else {
                                that.$message({
                                    type: 'warning',
                                    message: res.msg
                                });
                            }
                        })
                    }).catch(() => {
                    });
                },
                handleSizeChange(val) {
                    this.currentLimit = val;//切换每页数量
                    this.currentPage = 1;
                    this.getData();
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.getData();//切换页数
                },
                //获取列表
                getData: function () {
                    var that = this;
                    $.post("{:U('getUser')}", {
                        page: this.currentPage,
                        limit: this.currentLimit
                    }, function (res) {
                        if (res.status == 1) {
                            that.usersList = [];
                            that.usersList = res.data;
                            that.len = res.count;
                        } else {
                            that.$message({
                                message: res.msg,
                                type: 'warning',
                                duration: 1000
                            });
                        }
                    })
                },
                //修改状态
                changeStatus: function (index) {
                    var that = this;
                    $.post("{:U('changeStatus')}", {
                        id: index
                    }, function (res) {
                        if (res.status == 1) {
                            that.$message({
                                type: 'success',
                                message: res.msg,
                                duration: 1000
                            });
                        } else {
                            that.$message({
                                type: 'warning',
                                message: res.msg
                            });
                        }
                    })
                },
                usersEdit: function (index) {
                    var that = this;
                    if(that.usersList[index].id != ""){
                        var title = '编辑用户';
                    }else{
                        var title = '添加用户';
                    }
                    layer.open({
                        title: title,
                        type: 2,
                        area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
                        offset: 'rb',
                        shade: 0,
                        content: "{:U('userAdd')}?id=" + that.usersList[index].id,
                        end: function () {
                            MenuApp.refreshWindow();
                        }
                    });
                }
            },
            mounted: function () {

            },
            created: function () {
                this.getData();
            }
        });

</script>