|
@@ -0,0 +1,168 @@
|
|
|
+<template>
|
|
|
+ <div class="box">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>用户管理</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="addUser">添加用户</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <filterList ref="filterList" :operation="operation" :tableData="userList" :filed="filed" @bind="bindRole" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <dialogAndDrawer :width="'35%'" :title="title" :visibleSync="visibleSync" v-if="visibleSync" @close="visibleSync = false">
|
|
|
+ <template v-slot:windowMain>
|
|
|
+ <formData v-if="!bind" :filed="formfiled" :data="formdata" :rules="formrules" @save="formSave"></formData>
|
|
|
+ <transfer v-else :data="roleList" :values="values" @change="transferChage"></transfer>
|
|
|
+ </template>
|
|
|
+ </dialogAndDrawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import filterList from '@components/filterList/index.vue';
|
|
|
+import dialogAndDrawer from '@components/dialogAndDrawer.vue';
|
|
|
+import formData from '@components/formData/index.vue';
|
|
|
+import transfer from '@components/transfer.vue';
|
|
|
+import { mapState, mapActions } from 'vuex';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ filterList,
|
|
|
+ dialogAndDrawer,
|
|
|
+ formData,
|
|
|
+ transfer
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ operation: [
|
|
|
+ { name: 'bind', label: '绑定角色', icon: 'el-icon-user' },
|
|
|
+ { name: 'edit', label: '修改', icon: 'el-icon-edit' },
|
|
|
+ { name: 'delete', label: '删除', icon: 'el-icon-delete' }
|
|
|
+ ],
|
|
|
+ title: '',
|
|
|
+ visibleSync: false,
|
|
|
+ bind: false,
|
|
|
+ filed: [
|
|
|
+ { name: 'name', label: '姓名', filter: true },
|
|
|
+ { name: 'userName', label: '用户名', filter: true },
|
|
|
+ { name: 'phone', label: '电话', filter: true }
|
|
|
+ ],
|
|
|
+ formdata: {},
|
|
|
+ formfiled: [
|
|
|
+ { name: 'name', label: '姓名' },
|
|
|
+ { name: 'userName', label: '用户名' },
|
|
|
+ { name: 'password', label: '密码' },
|
|
|
+ { name: 'phone', label: '电话' }
|
|
|
+ ],
|
|
|
+ formrules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ userName: [
|
|
|
+ { required: true, message: '请输入用户名', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ userInfo: {},
|
|
|
+ values: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userList', 'Total', 'roleList', 'bindList'])
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ await this.filterQuery();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['userQuery', 'userCreate', 'userUpdate', 'userDelete', 'batchBind', 'queryBind', 'roleQuery', 'batchUnBind']),
|
|
|
+ // 添加
|
|
|
+ addUser () {
|
|
|
+ this.formdata = {};
|
|
|
+ this.title = '添加用户';
|
|
|
+ this.visibleSync = true;
|
|
|
+ this.bind = false;
|
|
|
+ },
|
|
|
+ // 修改
|
|
|
+ filtereEdit (e) {
|
|
|
+ this.formdata = e;
|
|
|
+ this.title = '修改用户';
|
|
|
+ this.visibleSync = true;
|
|
|
+ this.bind = false;
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ async filterDelete (e) {
|
|
|
+ const res = await this.userDelete({ id: e?._id });
|
|
|
+ this.$resChange(res, '删除成功');
|
|
|
+ this.filterQuery();
|
|
|
+ },
|
|
|
+ // 查询
|
|
|
+ async filterQuery ({ filter = {}, paging = { page: 0, size: 10 } } = {}) {
|
|
|
+ await this.userQuery({ filter, paging });
|
|
|
+ },
|
|
|
+ // 表单保存
|
|
|
+ async formSave (e) {
|
|
|
+ if (e.isRevise && e?.isRevise == false) {
|
|
|
+ this.$message.warning('未作修改');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$delete(e, 'isRevise');
|
|
|
+ let res, msg;
|
|
|
+ // 修改
|
|
|
+ if (e._id) {
|
|
|
+ res = await this.userUpdate(e);
|
|
|
+ msg = '用户修改成功';
|
|
|
+ } else {
|
|
|
+ res = await this.userCreate(e);
|
|
|
+ msg = '用户修改成功';
|
|
|
+ }
|
|
|
+ this.$resChange(res, msg);
|
|
|
+ this.filterQuery();
|
|
|
+ this.visibleSync = false;
|
|
|
+ },
|
|
|
+ // 点击绑定角色
|
|
|
+ async bindRole (e) {
|
|
|
+ this.userInfo = e;
|
|
|
+ this.title = '绑定角色';
|
|
|
+ this.visibleSync = true;
|
|
|
+ this.bind = true;
|
|
|
+ await this.roleQuery();
|
|
|
+ await this.queryBind({ userId: this.userInfo._id });
|
|
|
+ this.values = this.bindList.map(e => e.roleCode);
|
|
|
+ },
|
|
|
+ // 穿梭框改变
|
|
|
+ async transferChage (e) {
|
|
|
+ const userId = this.userInfo._id;
|
|
|
+ // 解绑
|
|
|
+ e.filter(i => {
|
|
|
+ this.values = this.values.filter(k => k !== i);
|
|
|
+ });
|
|
|
+ if (this.values.length > 0) {
|
|
|
+ const unbind = await this.batchUnBind({ userId, ids: this.values });
|
|
|
+ this.$resChange(unbind, '解绑成功');
|
|
|
+ }
|
|
|
+ // 绑定
|
|
|
+ this.values.filter(y => {
|
|
|
+ e = e.filter(z => z == y);
|
|
|
+ });
|
|
|
+ if (e.length > 0) {
|
|
|
+ const res = await this.batchBind({ userId, ids: e });
|
|
|
+ this.$resChange(res, '绑定成功');
|
|
|
+ }
|
|
|
+ await this.queryBind({ userId: this.userInfo._id });
|
|
|
+ this.values = this.bindList.map(e => e.roleCode);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .box-card {
|
|
|
+ height: 100%;
|
|
|
+ .el-card__body {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|