123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 |
- <template>
- <div class="user-manage">
- <div class="part-box part-box-filter part-box-flex">
- <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
- <template v-if="checkPrivilege('condition', 'condition')">
- <el-form-item label="用户名:" label-width="75px">
- <el-input
- style="width: 142px;"
- v-model.trim="filter.loginName"
- placeholder="请输入内容"
- clearable
- ></el-input>
- </el-form-item>
- <el-form-item label="姓名:" label-width="75px">
- <el-input
- style="width: 142px;"
- v-model.trim="filter.realName"
- placeholder="请输入内容"
- clearable
- ></el-input>
- </el-form-item>
- <el-form-item label="角色:" label-width="55px">
- <el-select
- v-model="filter.roleId"
- style="width: 142px;"
- placeholder="请选择"
- filterable
- clearable
- >
- <el-option
- v-for="item in roles"
- :key="item.id"
- :value="item.id"
- :label="item.name"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="启用/禁用:" label-width="90px">
- <el-select
- v-model="filter.enable"
- style="width: 142px;"
- placeholder="请选择"
- clearable
- >
- <el-option
- v-for="(val, key) in ABLE_TYPE"
- :key="key"
- :value="key * 1"
- :label="val"
- ></el-option>
- </el-select>
- </el-form-item>
- </template>
- <el-form-item label-width="0px">
- <el-button
- v-if="checkPrivilege('button', 'select')"
- type="primary"
- icon="el-icon-search"
- @click="toPage(1)"
- >查询</el-button
- >
- </el-form-item>
- </el-form>
- <div class="part-box-action">
- <el-button
- v-if="checkPrivilege('button', 'add')"
- type="primary"
- icon="el-icon-circle-plus-outline"
- @click="toAdd"
- >新增用户</el-button
- >
- <el-button v-if="checkPrivilege('button', 'export')"
- ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
- >
- <upload-button
- v-if="checkPrivilege('button', 'export')"
- btn-icon="el-icon-upload"
- btn-content="批量导入"
- btn-type="primary"
- :upload-url="uploadUrl"
- :format="['xls', 'xlsx']"
- @upload-error="uplaodError"
- @upload-success="uploadSuccess"
- style="margin: 0;"
- >
- </upload-button>
- </div>
- </div>
- <div class="part-box">
- <el-table ref="TableList" :data="users" border stripe>
- <el-table-column
- type="index"
- label="序号"
- width="70"
- align="center"
- :index="indexMethod"
- ></el-table-column>
- <el-table-column prop="loginName" label="用户名"></el-table-column>
- <el-table-column
- prop="realName"
- label="姓名"
- width="120"
- ></el-table-column>
- <el-table-column prop="workNo" label="工号"></el-table-column>
- <el-table-column
- prop="mobileNumber"
- label="手机号"
- width="120"
- ></el-table-column>
- <el-table-column prop="orgName" label="所在机构"></el-table-column>
- <el-table-column prop="roles" label="角色">
- <template slot-scope="scope">
- {{ scope.row.roles | rolesFilter }}
- </template>
- </el-table-column>
- <el-table-column prop="enable" label="状态" width="100">
- <template slot-scope="scope">
- {{ scope.row.enable | enableFilter }}
- </template>
- </el-table-column>
- <el-table-column
- class-name="action-column"
- label="操作"
- align="center"
- width="120px"
- >
- <template slot-scope="scope">
- <el-button
- v-if="checkPrivilege('link', 'edit')"
- class="btn-table-icon"
- type="text"
- icon="icon icon-edit"
- @click="toEdit(scope.row)"
- title="编辑"
- ></el-button>
- <el-button
- v-if="checkPrivilege('link', 'enable')"
- class="btn-table-icon"
- type="text"
- :icon="
- scope.row.enable
- ? 'icon icon-circle-stop'
- : 'icon icon-circle-caret-right'
- "
- @click="toEnable(scope.row)"
- :title="scope.row.enable ? '禁用' : '启用'"
- ></el-button>
- <el-button
- v-if="checkPrivilege('link', 'reset')"
- class="btn-table-icon"
- type="text"
- icon="icon icon-circle-lock"
- @click="toResetPwd(scope.row)"
- title="重置密码"
- ></el-button>
- </template>
- </el-table-column>
- </el-table>
- <div class="part-page">
- <el-pagination
- background
- layout="total,prev, pager, next"
- :current-page="current"
- :total="total"
- :page-size="size"
- @current-change="toPage"
- >
- </el-pagination>
- </div>
- </div>
- <!-- ModifyUser -->
- <modify-user
- ref="ModifyUser"
- :instance="curUser"
- :roles="roles"
- @modified="getList"
- ></modify-user>
- </div>
- </template>
- <script>
- import ModifyUser from "../components/ModifyUser";
- import { ABLE_TYPE } from "@/constants/enumerate";
- import { userListPage, ableUser, resetPwd, userRoleListPage } from "../api";
- // import { logout } from "@/modules/login/api";
- import UploadButton from "../../../components/UploadButton";
- export default {
- name: "user-manage",
- components: { ModifyUser, UploadButton },
- data() {
- return {
- filter: {
- loginName: "",
- realName: "",
- roleId: "",
- enable: ""
- },
- current: 1,
- size: this.GLOBAL.pageSize,
- total: 0,
- visible: false,
- ABLE_TYPE,
- roles: [],
- users: [],
- curUser: {},
- // import
- uploadUrl: "/api/admin/sys/user/import",
- downloadUrl: "/temps/用户导入模板.xlsx",
- dfilename: "用户导入模板.xlsx"
- };
- },
- mounted() {
- this.getRoleList();
- this.getList();
- },
- methods: {
- async getRoleList() {
- if (
- !this.checkPrivilege("button", "add") &&
- !this.checkPrivilege("link", "edit")
- )
- return;
- const data = await userRoleListPage();
- this.roles = data || [];
- this.roles = this.roles.filter(item => item.type !== "ADMIN");
- },
- async getList() {
- if (!this.checkPrivilege("list", "list")) return;
- const datas = {
- ...this.filter,
- pageNumber: this.current,
- pageSize: this.size
- };
- if (datas.enable !== null && datas.enable !== "")
- datas.enable = !!datas.enable;
- const data = await userListPage(datas);
- this.users = data.records;
- this.total = data.total;
- },
- toPage(page) {
- this.current = page;
- this.getList();
- },
- toEnable(row) {
- // 自己不可以启用/禁用自己
- const userId = this.$ls.get("user", { id: "" }).id;
- if (row.id === userId) {
- this.$message.error("不可以启用/禁用自己!");
- return;
- }
- const action = row.enable ? "禁用" : "启用";
- this.$confirm(`确定要${action}用户【${row.realName}】吗?`, "提示", {
- cancelButtonClass: "el-button--danger is-plain",
- confirmButtonClass: "el-button--primary",
- type: "warning"
- })
- .then(async () => {
- const enable = !row.enable;
- await ableUser({
- id: row.id,
- enable
- });
- row.enable = enable;
- this.$message.success("操作成功!");
- })
- .catch(() => {});
- },
- toEdit(row) {
- this.curUser = row;
- this.$refs.ModifyUser.open();
- },
- toAdd() {
- this.curUser = {};
- this.$refs.ModifyUser.open();
- },
- async toResetPwd(row) {
- await resetPwd(row.id);
- this.$message.success("密码重置成功!");
- // 修改自己时,会强制重新登录
- // const userId = this.$ls.get("user", { id: "" }).id;
- // if (row.id !== userId) return;
- // this.toLogout();
- },
- // async toLogout() {
- // await logout();
- // this.$ls.clear();
- // this.$router.push({ name: "Login" });
- // this.$message.info("您的密码已经变更,请重新登录系统!");
- // },
- // import
- uplaodError(errorData) {
- this.$notify.error({ title: "错误提示", message: errorData.message });
- },
- uploadSuccess() {
- this.getList();
- }
- }
- };
- </script>
|