Skip to content

Z
Z-Admin

张骞_ / Z-Admin

通知 2
Star 0
Fork 0
Z
Z-Admin

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
list.html 11.9 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 69 70 71 72 73 74 75 76 
<!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="../../../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/module.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-input v-model="input1" 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 
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="80"></el-table-column>
                <!-- 模块序号 -->
                <el-table-column prop="sort" label="模块序号" width="80">
                </el-table-column>
                <!-- 模块名 -->
                <el-table-column prop="name" label="模块名" width="180">
                </el-table-column>
                <!-- 模块类型 -->
                <el-table-column label="类型" width="100">
                    <template slot-scope="scope">{{ String(scope.row.ctype) === '0' ? '主菜单' : String(scope.row.ctype)
                        === '1' ? '二级菜单':'按钮'}}</template>
                </el-table-column>
                <!-- 上级模块 -->
                <el-table-column prop="module.name" label="上级模块" width="140">
                </el-table-column>
                <!-- 模块状态 -->
                <el-table-column label="状态" width="80">
                    <template slot-scope="scope">{{ String(scope.row.state) === '0' ? '停用':'启用'}}</template>
                </el-table-column>
                <!-- 模块静态页连接 -->
                <el-table-column prop="curl" label="链接" show-overflow-tooltip>
                </el-table-column>
                <!-- 模块请求地址 -->
                <el-table-column prop="req" label="请求地址" show-overflow-tooltip>
                </el-table-column>
                <!-- 模块图标 -->
                <el-table-column prop="icon" label="图标" width="200">
                </el-table-column>
                <!-- 最后编辑时间 -->
张
V0.3版本，将删除修改为逻辑删除，优化了自动填充更新人字段方法，缓存方案更改为Spring Cache，增加Knife4j框架  
张骞 已提交
77 
                <el-table-column prop="updatedName" label="最后编辑时间" show-overflow-tooltip>
张
第一版本提交  
张骞 已提交
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 
                </el-table-column>
                <!-- 编辑人 -->
                <el-table-column prop="operator" label="编辑人" show-overflow-tooltip>
                </el-table-column>
                <!-- 操作按钮 -->
                <el-table-column label="操作" width="100" 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.id)" v-if="edit">编辑
                        </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
                id: '',
                // 页面数据封装的数组
                tableData: [{
                    id: '1',
                    name: '测试',
                    ctype: '1',
                    module: { name: '测试上级' },
                    state: '1',
                    curl: '012',
                    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 === "update") {
                        this.edit = true;
                        // 为删除按钮改变状态
                    } else if(buttoms[j].icon === "del"){
                        this.del = true;
                    }
                }
            },
            //刷新页面的方法
            reload() {
                this.handleQuery();
            },
            //初始化方法，在钩子函数中被调用
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    //携带查询条件的方法
                    name: this.input ? this.input : undefined
                }
                //请求页面列表的方法
                await getModuleList(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/module/add.html', '新增模块', '40%', '450px');
                    //刷新修改页面(避免缓存数据导致修改回显失败)
                    parent.index.updateReload();
                } else {
                    //模块1：弹窗内引用的iframe地址
                    //模块2：弹窗名字
                    //模块3：弹窗宽度，根据页面内容定义
                    //模块4：弹窗高度
                    parent.index.dialog('pages/system/module/add.html?id=' + st, '编辑模块', '40%', '450px');
                    //刷新修改页面(避免缓存数据导致修改回显失败)
                    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(() => {
                    deleteModule(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.id)
                })
                this.checkList = checkArr
            },
            //根据条件查询的操作
            handleQuery() {
                //初始化页面为1
                this.page = 1;
                this.init();
            },
        }
    });
</script>

</html>