|
|
@@ -1,278 +1,294 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="batch_button">
|
|
|
- <el-button class="export" @click="exportData">导出数据</el-button>
|
|
|
- <el-button class="activate" @click="batchActivate">批量激活</el-button>
|
|
|
- <el-button class="delete" @click="batchDelete">批量删除</el-button>
|
|
|
- </div>
|
|
|
- <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
|
|
|
- :cell-style="{ textAlign: 'center' }" height="405" style="width: 100%" @selection-change="handleSelectionChange">
|
|
|
- <el-table-column type="selection" width="50">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="username" label="用户名">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="phone_num" label="手机号">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="email" label="邮箱">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="role" label="角色">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="permission" label="权限">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="working_address" label="单位">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="register_time" label="注册时间">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="status" label="状态">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag :color="scope.row.status == true ? '#06f77e' : '#757776'"></el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="operation" label="操作">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button size="mini" type="text" style="color: #2ea8e6" @click="userDetail(scope.row)">查看</el-button>
|
|
|
- <el-button size="mini" type="text" style="color: #2ea8e6"
|
|
|
- @click="userInfoEdit(scope.row)">编辑</el-button>
|
|
|
- <el-button size="mini" type="text" style="color: #2ea8e6" @click="deleteUser(scope.row)">删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <div class="bottom">
|
|
|
- <page class="page" :paginationData="paginationData"></page>
|
|
|
- </div>
|
|
|
- <!--弹窗-->
|
|
|
- <user-detail ref="userDetail"></user-detail>
|
|
|
- <userInfoEdit ref="userInfoEdit"></userInfoEdit>
|
|
|
+ <div>
|
|
|
+ <div class="batch_button">
|
|
|
+ <el-button class="export" @click="exportData">导出数据</el-button>
|
|
|
+ <el-button class="activate" @click="batchActivate">批量激活</el-button>
|
|
|
+ <el-button class="delete" @click="batchDelete">批量删除</el-button>
|
|
|
</div>
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="tableData"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ :header-cell-style="{ textAlign: 'center' }"
|
|
|
+ :cell-style="{ textAlign: 'center' }"
|
|
|
+ height="405"
|
|
|
+ style="width: 100%"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="50"> </el-table-column>
|
|
|
+ <el-table-column prop="username" label="用户名"> </el-table-column>
|
|
|
+ <el-table-column prop="phone" label="手机号"> </el-table-column>
|
|
|
+ <el-table-column prop="email" label="邮箱"> </el-table-column>
|
|
|
+ <el-table-column prop="role" label="角色"> </el-table-column>
|
|
|
+ <el-table-column prop="permission" label="权限"> </el-table-column>
|
|
|
+ <el-table-column prop="working_address" label="单位"> </el-table-column>
|
|
|
+ <el-table-column prop="register_time" label="注册时间"> </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag
|
|
|
+ :color="scope.row.status == true ? '#06f77e' : '#757776'"
|
|
|
+ ></el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="operation" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ style="color: #2ea8e6"
|
|
|
+ @click="userDetail(scope.row)"
|
|
|
+ >查看</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ style="color: #2ea8e6"
|
|
|
+ @click="userInfoEdit(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ style="color: #2ea8e6"
|
|
|
+ @click="deleteUser(scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="bottom">
|
|
|
+ <page class="page" :paginationData="paginationData"></page>
|
|
|
+ </div>
|
|
|
+ <!--弹窗-->
|
|
|
+ <user-detail ref="userDetail"></user-detail>
|
|
|
+ <userInfoEdit ref="userInfoEdit"></userInfoEdit>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import page from '@/components/pagination/index';
|
|
|
-import { getUserList, deleteSingleUser, updateUserDetail } from '@/api/user/user';
|
|
|
-import UserDetail from '../messageDialog/userInfoDetail';
|
|
|
-import userInfoEdit from '../messageDialog/userInfoEdit';
|
|
|
+import page from "@/components/pagination/index";
|
|
|
+import {
|
|
|
+ getUserList,
|
|
|
+ deleteSingleUser,
|
|
|
+ updateUserDetail,
|
|
|
+} from "@/api/user/user";
|
|
|
+import UserDetail from "../messageDialog/userInfoDetail";
|
|
|
+import userInfoEdit from "../messageDialog/userInfoEdit";
|
|
|
export default {
|
|
|
- components: { page, UserDetail, userInfoEdit },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tableData: [],
|
|
|
- multipleSelection: [],
|
|
|
- currentPageSize: 10,
|
|
|
- currentPage: 1,
|
|
|
- paginationData: {
|
|
|
- pageSize: 10,
|
|
|
- pagerCount: 5,
|
|
|
- currentPage: 1,
|
|
|
- pageSizes: [5, 10, 20, 30],
|
|
|
- total: 30,
|
|
|
- currentChange: (val) => {
|
|
|
- this.getTableData(val);
|
|
|
- },
|
|
|
- handleSizeChange: (val) => {
|
|
|
- this.handleSizeChange(val);
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initData();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initData() {
|
|
|
- this.getTableData(1);
|
|
|
- },
|
|
|
- handleSelectionChange(val) {
|
|
|
- this.multipleSelection = val;
|
|
|
- },
|
|
|
- handleClick() {
|
|
|
- //
|
|
|
- },
|
|
|
- getTableData(page) {
|
|
|
- this.tableData = [];
|
|
|
- getUserList(
|
|
|
- 0,
|
|
|
- page,
|
|
|
- this.currentPageSize
|
|
|
- ).then((res) => {
|
|
|
- if (res.data.code === 0 && res.data.data.length > 0) {
|
|
|
- this.paginationData.total = res.data.total;
|
|
|
- this.tableData = res.data.data.map((e) => {
|
|
|
- return {
|
|
|
- username: e.name,
|
|
|
- phone: e.phone,
|
|
|
- email: e.email,
|
|
|
- role: e.role,
|
|
|
- permission: e.permission,
|
|
|
- working_address: e.company,
|
|
|
- register_time: e.register_time,
|
|
|
- status: e.on_job_status
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ components: { page, UserDetail, userInfoEdit },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ multipleSelection: [],
|
|
|
+ currentPageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ paginationData: {
|
|
|
+ pageSize: 10,
|
|
|
+ pagerCount: 5,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSizes: [5, 10, 20, 30],
|
|
|
+ total: 30,
|
|
|
+ currentChange: (val) => {
|
|
|
+ this.getTableData(val);
|
|
|
},
|
|
|
- handleSizeChange(val) {
|
|
|
- this.currentPageSize = val;
|
|
|
- this.getTableData(this.currentPage);
|
|
|
- },
|
|
|
- userDetail() {
|
|
|
- this.$refs.userDetail.dialogVisible = true;
|
|
|
- },
|
|
|
- userInfoEdit() {
|
|
|
- this.$refs.userInfoEdit.dialogVisible = true;
|
|
|
- },
|
|
|
- deleteUser(data) {
|
|
|
- let options = {
|
|
|
- id: data.id,
|
|
|
- username: data.username,
|
|
|
- password: data.password
|
|
|
- };
|
|
|
- deleteSingleUser(options).then((res) => {
|
|
|
- if (res.data.code === 0) {
|
|
|
- this.$message.success('删除成功');
|
|
|
- this.getTableData(1);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- userDetail(data) {
|
|
|
-
|
|
|
+ handleSizeChange: (val) => {
|
|
|
+ this.handleSizeChange(val);
|
|
|
},
|
|
|
- userInfoEdit(data) {
|
|
|
- let options = {
|
|
|
- id: data.id,
|
|
|
-
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData() {
|
|
|
+ this.getTableData(1);
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+ handleClick() {
|
|
|
+ //
|
|
|
+ },
|
|
|
+ getTableData(page) {
|
|
|
+ this.tableData = [];
|
|
|
+ getUserList(0, page, this.currentPageSize).then((res) => {
|
|
|
+ if (res.data.code === 0 && res.data.data.length > 0) {
|
|
|
+ this.paginationData.total = res.data.total;
|
|
|
+ this.tableData = res.data.data.map((e) => {
|
|
|
+ return {
|
|
|
+ username: e.name,
|
|
|
+ phone: e.phone == "undefined" || !e.phone ? "--" : e.phone,
|
|
|
+ email: e.email == "undefined" || !e.email ? "--" : e.email,
|
|
|
+ role: e.role == "undefined" || !e.role ? "--" : e.role,
|
|
|
+ permission:
|
|
|
+ e.permission == "undefined" || !e.permission
|
|
|
+ ? e.permission
|
|
|
+ : "--",
|
|
|
+ working_address:
|
|
|
+ e.company == "undefined" || !e.company ? "--" : e.company,
|
|
|
+ register_time: this.$dayjs(e.register_time).format(
|
|
|
+ "YYYY-MM-DD HH:mm:ss"
|
|
|
+ ),
|
|
|
+ status:
|
|
|
+ e.on_job_status == "undefined" || !e.on_job_status
|
|
|
+ ? "--"
|
|
|
+ : e.on_job_status,
|
|
|
};
|
|
|
- updateUserDetail(options).then((res) => {
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- batchActivate() {
|
|
|
-
|
|
|
- },
|
|
|
- batchDelete() {
|
|
|
-
|
|
|
- },
|
|
|
- exportData() {
|
|
|
-
|
|
|
+ });
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.currentPageSize = val;
|
|
|
+ this.getTableData(this.currentPage);
|
|
|
+ },
|
|
|
+ userDetail() {
|
|
|
+ this.$refs.userDetail.dialogVisible = true;
|
|
|
+ },
|
|
|
+ userInfoEdit() {
|
|
|
+ this.$refs.userInfoEdit.dialogVisible = true;
|
|
|
+ },
|
|
|
+ deleteUser(data) {
|
|
|
+ let options = {
|
|
|
+ id: data.id,
|
|
|
+ username: data.username,
|
|
|
+ password: data.password,
|
|
|
+ };
|
|
|
+ deleteSingleUser(options).then((res) => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.getTableData(1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ userDetail(data) {},
|
|
|
+ userInfoEdit(data) {
|
|
|
+ let options = {
|
|
|
+ id: data.id,
|
|
|
+ };
|
|
|
+ updateUserDetail(options).then((res) => {});
|
|
|
+ },
|
|
|
+ batchActivate() {},
|
|
|
+ batchDelete() {},
|
|
|
+ exportData() {},
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.el-tag {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- border-radius: 100px;
|
|
|
- padding: 0;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 100px;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
.el-table {
|
|
|
- position: relative;
|
|
|
- top: 50px;
|
|
|
- left: 0;
|
|
|
- border: 1px solid #f0f2f2;
|
|
|
- font-size: 0.95rem;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #b2b2b2;
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
+ position: relative;
|
|
|
+ top: 50px;
|
|
|
+ left: 0;
|
|
|
+ border: 1px solid #f0f2f2;
|
|
|
+ font-size: 0.95rem;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #b2b2b2;
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
|
|
|
- /deep/th {
|
|
|
- background: #f7fbff;
|
|
|
- }
|
|
|
+ /deep/th {
|
|
|
+ background: #f7fbff;
|
|
|
+ }
|
|
|
|
|
|
- /deep/.el-checkbox {
|
|
|
- color: #b2b2b2;
|
|
|
+ /deep/.el-checkbox {
|
|
|
+ color: #b2b2b2;
|
|
|
|
|
|
- .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
- color: #2ea8e6;
|
|
|
- }
|
|
|
+ .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #2ea8e6;
|
|
|
+ }
|
|
|
|
|
|
- .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
|
|
- width: 70%;
|
|
|
- height: 70%;
|
|
|
- background: #2ea8e6;
|
|
|
- border-radius: 0;
|
|
|
- transform: rotate(0deg) scaleY(1);
|
|
|
- position: static;
|
|
|
- // border: 1px solid #8DD9FF;
|
|
|
- }
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
|
|
+ width: 70%;
|
|
|
+ height: 70%;
|
|
|
+ background: #2ea8e6;
|
|
|
+ border-radius: 0;
|
|
|
+ transform: rotate(0deg) scaleY(1);
|
|
|
+ position: static;
|
|
|
+ // border: 1px solid #8DD9FF;
|
|
|
+ }
|
|
|
|
|
|
- .el-checkbox__inner {
|
|
|
- border: 1px solid #8dd9ff;
|
|
|
- background: rgba(0, 170, 255, 0);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: static;
|
|
|
+ .el-checkbox__inner {
|
|
|
+ border: 1px solid #8dd9ff;
|
|
|
+ background: rgba(0, 170, 255, 0);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: static;
|
|
|
|
|
|
- &::after {
|
|
|
- transition: 0ms;
|
|
|
- }
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ transition: 0ms;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .el-checkbox__label {
|
|
|
- padding-left: 0;
|
|
|
- font-size: 15px;
|
|
|
- position: absolute;
|
|
|
- top: 1px;
|
|
|
- left: 25px;
|
|
|
- }
|
|
|
+ .el-checkbox__label {
|
|
|
+ padding-left: 0;
|
|
|
+ font-size: 15px;
|
|
|
+ position: absolute;
|
|
|
+ top: 1px;
|
|
|
+ left: 25px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.batch_button {
|
|
|
- position: relative;
|
|
|
- top: 50px;
|
|
|
- float: left;
|
|
|
- left: 280px;
|
|
|
-
|
|
|
- .export {
|
|
|
- padding: 3px;
|
|
|
- width: 80px;
|
|
|
- height: 30px;
|
|
|
- bottom: 15px;
|
|
|
- position: absolute;
|
|
|
- color: #fff;
|
|
|
- border-radius: 4px;
|
|
|
- right: 190px;
|
|
|
- background-color: #2ea8e6;
|
|
|
- }
|
|
|
+ position: relative;
|
|
|
+ top: 50px;
|
|
|
+ float: left;
|
|
|
+ left: 280px;
|
|
|
|
|
|
- .activate {
|
|
|
- padding: 3px;
|
|
|
- width: 80px;
|
|
|
- height: 30px;
|
|
|
- bottom: 15px;
|
|
|
- position: absolute;
|
|
|
- color: #fff;
|
|
|
- border-radius: 4px;
|
|
|
- right: 100px;
|
|
|
- background-color: #2ea8e6;
|
|
|
- }
|
|
|
+ .export {
|
|
|
+ padding: 3px;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ bottom: 15px;
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ right: 190px;
|
|
|
+ background-color: #2ea8e6;
|
|
|
+ }
|
|
|
|
|
|
- .delete {
|
|
|
- padding: 3px;
|
|
|
- width: 80px;
|
|
|
- height: 30px;
|
|
|
- bottom: 15px;
|
|
|
- position: absolute;
|
|
|
- color: #fff;
|
|
|
- border-radius: 4px;
|
|
|
- right: 10px;
|
|
|
- background-color: #b3b3b3;
|
|
|
- }
|
|
|
+ .activate {
|
|
|
+ padding: 3px;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ bottom: 15px;
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ right: 100px;
|
|
|
+ background-color: #2ea8e6;
|
|
|
+ }
|
|
|
|
|
|
+ .delete {
|
|
|
+ padding: 3px;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ bottom: 15px;
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ right: 10px;
|
|
|
+ background-color: #b3b3b3;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
- position: absolute;
|
|
|
- left: 20px;
|
|
|
- right: 16px;
|
|
|
- bottom: 20px;
|
|
|
- height: 50px;
|
|
|
- line-height: 20px;
|
|
|
- background-color: #ffffff;
|
|
|
- text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ right: 16px;
|
|
|
+ bottom: 20px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
Bella