Skip to content

Z
Z-Admin

张骞_ / Z-Admin

通知 2
Star 0
Fork 0
Z
Z-Admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
list.html 12.1 KB
Newer Older
张
第一版本提交  
张骞 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Element必要的依赖文件 -->
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <link rel="stylesheet" href="../../../plugins/element-ui/lib/theme-chalk/index.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../../plugins/vue/vue.js"></script>
    <script src="../../../plugins/axios/axios-0.18.0.js" type="text/javascript"></script>
    <!-- 引入组件库js -->
    <script src="../../../plugins/element-ui/lib/index.js"></script>
    <!-- 引入自定义js插件 -->
    <script src="../../../api/admin.js"></script>
    <script src="../../../js/request.js"></script>

<body>
    <!-- div关联Vue依赖 -->
    <div id="div">
        <!-- 表格按钮及搜索区域start -->
        <div style="margin-top: 10px;">
            <!-- 按钮部分 -->
            <el-button-group>
                <!-- 刷新 -->
                <el-button type="primary" icon="el-icon-refresh" size="medium" @click="reload()">刷新
                </el-button>
                <!-- 新增 -->
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" @click="addDislog('add')" v-if="add"> 新增
                </el-button>
                <!-- 删除 -->
                <el-button type="primary" icon="el-icon-delete" size="medium" @click="deleteHandle('批量', null)" v-if="del">删除
                </el-button>
            </el-button-group>
            <!-- 搜索部分 -->
            <div style="float: right;">
                <el-input v-model="input" placeholder="根据姓名查询" size="small" style="width: 150px;">
                </el-input>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery()">查询</el-button>
            </div>
        </div>
        <!-- 表格按钮及搜索区域end -->

        <!-- 表格部分start -->
        <el-row style="margin-top: 12px;">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" fixed size
                @selection-change="handleSelectionChange">
                <!--多选框-->
                <el-table-column type="selection" width="100"></el-table-column>
                <!-- 姓名 -->
                <el-table-column prop="name" label="姓名" width="200">
                </el-table-column>
                <!-- 登录名 -->
                <el-table-column prop="userName" label="登录名" width="220">
                </el-table-column>
                <!-- 所属部门 -->
                <el-table-column prop="dept.deptName" label="所属部门" width="220">
                </el-table-column>
                <!-- 状态 -->
                <el-table-column label="状态" width="180">
                    <template slot-scope="scope">{{ String(scope.row.state) === '0' ? '已禁用' : '启用' }}</template>
                </el-table-column>
                <!-- 最后编辑时间 -->
                <el-table-column prop="updated" label="最后编辑时间" width="220">
                </el-table-column>
                <!-- 编辑人 -->
张
V0.3版本，将删除修改为逻辑删除，优化了自动填充更新人字段方法，缓存方案更改为Spring Cache，增加Knife4j框架  
张骞 已提交
69 
                <el-table-column prop="operatorName" label="编辑人" show-overflow-tooltip>
张
第一版本提交  
张骞 已提交
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 
                </el-table-column>
                <!-- 操作按钮 -->
                <el-table-column label="操作" width="220" fixed="right">
                    <template slot-scope="scope">
                        <!-- 编辑按钮 -->
                        <el-button size="mini" type="warning" icon="el-icon-edit-outline"
                            style="background-color: #FFB800;" @click="addDislog(scope.row.adminId)" v-if="edit">编辑
                        </el-button>
                        <!-- 关联角色按钮 -->
                        <el-button size="mini" type="success" icon="el-icon-edit-outline"
                            style="background-color: #67c23ade;" @click="roleDislog(scope.row.adminId)" v-if="role">关联角色
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 表格部分end -->

        <!-- 数据总数部分start -->
        <el-row style="margin-top: 12px;float: left;">
            <el-tag type="success">&nbsp;<i class="el-icon-info"></i>&nbsp;共{{pages}}页,{{counts}}条数据</el-tag>
        </el-row>
        <!-- 数据总数部分end -->

        <!-- 分页器start -->
        <el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" style="float:right;margin-top: 10px;">
        </el-pagination>
        <!-- 分页器end -->
    </div>
</body>
<script>
    // Vue核心对象
    new Vue({
        el: "#div",
        // 数据集合
        data() {
            return {
                //根据名称查询的绑定输入框
                input: '',
                counts: 0,
                // 打开时默认的当前页码
                page: 1,
                // 打开时默认的每页数据长度
                pageSize: 10,
                id: '',
                status: '',
                // 页面数据封装的数组
                tableData: [{
                    adminId: '1',
                    name: '测试',
                    userName: 'test',
                    dept: { deptName: '测试部门' },
                    state: 1,
                    updated: '2022-04-12',
                    operator: '测试'
                }, {
                    adminId: '2',
                    name: '测试2',
                    userName: 'test2',
                    dept: { deptName: '测试部门2' },
                    state: 1,
                    updated: '2022-04-12',
                    operator: '测试'
                }],
                //总页数
                pages: '',
                //选中的页面数据集合
                checkList: []
            }
        },
        // 侦听器
        computed: {},
        // 钩子函数：页面初始化时被调用
        created() {
            // 校验按钮的方法
            this.buttomList()
            // 加载页面数据的方法
            this.init()
            this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        mounted: function () {
            // 公开子页面初始化方法，便于父页面调用
            window.init = this.init
            // 公开子页面刷新方法，便于父页面调用
            window.reload = this.reload
        },
        methods: {
            //校验按钮的方法
            buttomList() {
                //获取父页面按钮集合
                let buttoms = parent.index.buttomList;
                console.log(this.buttoms)
                //循环集合，为按钮状态命中
                for (let j = 0, len = buttoms.length; j < len; j++) {
                    //为新增按钮改变状态:这里使用icon作为按钮权限标识
                    if (buttoms[j].icon === "add") {
                        this.add = true;
                        // 为修改按钮改变状态
                    } else if (buttoms[j].icon === "updata") {
                        this.edit = true;
                        // 为删除按钮改变状态
                    } else if(buttoms[j].icon === "del"){
                        this.del = true;
                        // 为角色按钮改变状态
                    }else if(buttoms[j].icon === "role"){
                        this.role = true;
                    }
                }
            },
            //刷新页面的方法
            reload() {
                this.handleQuery();
            },
            //初始化方法，在钩子函数中被调用
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    //携带查询条件的方法
                    name: this.input ? this.input : undefined
                }
                //请求页面列表的方法
                await getAdminList(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records || []
                        this.counts = res.data.total
                        this.pages = res.data.pages
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            //分页查询的方法
            handleQuery() {
                this.page = 1;
                this.init();
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            //打开新增修改弹窗的方法
            addDislog(st) {
                if (st === "add") {
                    //参数1：弹窗内引用的iframe地址
                    //参数2：弹窗名字
                    //参数3：弹窗宽度，根据页面内容定义
                    //参数4：弹窗高度
                    parent.index.dialog('pages/system/admin/add.html', '新增管理员用户', '40%', '400px');
                    //刷新修改页面(避免缓存数据导致修改回显失败)
                    parent.index.updateReload();
                } else {
                    //参数1：弹窗内引用的iframe地址
                    //参数2：弹窗名字
                    //参数3：弹窗宽度，根据页面内容定义
                    //参数4：弹窗高度
                    parent.index.dialog('pages/system/admin/add.html?id=' + st, '编辑管理员用户', '40%', '400px');
                    //刷新修改页面(避免缓存数据导致修改回显失败)
                    parent.index.updateReload();
                }
            },
            // 打开关联角色弹窗的方法,传入参数为用户id
            roleDislog(st) {
                parent.index.dialog('pages/system/admin/role.html?id=' + st, '关联角色', '40%', '200px');
                //刷新修改页面(避免缓存数据导致修改回显失败)
                parent.index.updateReload();
            },
            // 删除的方法
            deleteHandle(type, id) {
                if (type === '批量' && id === null) {
                    if (this.checkList.length === 0) {
                        return parent.index.$message.error('请选择删除对象')
                    }
                }
                //调用父类的弹窗信息
                parent.index.$confirm('确认删除该用户, 此操作不可恢复！是否继续?', '确定删除', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    deleteAdmin(type === '批量' ? this.checkList.join(',') : id).then(res => {
                        if (res.code === 1) {
                            this.$message.success('删除成功！')
                            this.handleQuery()
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
            // 勾选全部操作
            handleSelectionChange(val) {
                let checkArr = []
                val.forEach((n) => {
                    checkArr.push(n.adminId)
                })
                this.checkList = checkArr
            },
            //根据条件查询的操作
            handleQuery() {
                //初始化页面为1
                this.page = 1;
                this.init();
            },
        }
    });
</script>

</html>