<template> <div class="user-manager"> <InPageLeftNav /> <div class="table-area" :class="{ 'table-area-w': sidebar.opened, 'table-area-ws': !sidebar.opened, }" > <SearchBarTop @emitFun="emitFun" /> <!-- 列表 --> <base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list" :max-height="tableH" > <method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn" @clickBtn="handleClick" /> </base-table> <pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total" @pagination="getList" /> </div> </div> </template> <script> import { mapGetters } from "vuex"; import InPageLeftNav from "./components/InPageLeftNav"; import SearchBarTop from "./components/SearchBarTop"; import tableHeightMixin from "@/mixins/tableHeightMixin"; import { listUser } from "@/api/system/user"; const tableProps = [ { prop: "username", label: "用户名", minWidth: 120, showOverflowtooltip: true, }, { prop: "email", label: "邮箱", minWidth: 150, showOverflowtooltip: true, }, { prop: "mobile", label: "手机号", minWidth: 120, }, { prop: "deptName", label: "组织", minWidth: 120, }, { prop: "role", label: "角色名称", }, { prop: "workno", label: "工号", }, { prop: "status", label: "状态", }, { prop: "remark", label: "备注", showOverflowtooltip: true, }, ]; export default { name: "SystemPost", components: { InPageLeftNav, SearchBarTop }, mixins: [tableHeightMixin], computed: { ...mapGetters(["sidebar"]), }, data() { return { // 查询参数 queryParams: { pageNo: 1, pageSize: 20, name: null, status: null, planFinishTime: [], }, total: 0, tableProps, list: [{ username: "111" }], tableBtn: [ { type: "authorization", btnName: "授权", }, { type: "edit", btnName: "编辑", }, { type: "delete", btnName: "删除", }, ], }; }, created() { this.getList(); }, methods: { /** 查询用户列表 */ getList() { listUser(this.queryParams).then((response) => { this.list = response.data.list; this.total = response.data.total; }); }, emitFun(val) { if (val.btn === "onSearch") { this.queryParams.pageNo = 1; this.getList(); } else { } }, handleClick() {}, }, }; </script> <style lang="scss" scoped> .user-manager { display: flex; .table-area { display: inline-block; height: calc(100vh - 120px - 8px); background-color: #fff; margin-left: 8px; border-radius: 8px; padding: 8px; } .table-area-w { width: calc(100vw - 542px); } .table-area-ws { width: calc(100vw - 348px); } } </style>