sasp-admin 0.2.57

package/src/views/user/empowerUser/empowerUserList.vue

@@ -0,0 +1,633 @@
+<template>
+    <el-container style="padding:1px 10px 8px 5px; box-sizing: border-box;height: 100%;">
+        <!--查询框 start-->
+        <el-header style="height: auto;padding: 0; box-sizing: border-box;">
+            <div class="search-form-parent" style="border: 1px solid #ddd;">
+                <el-form :inline="true" :model="crud.searchForm" size="small"
+                         @keyup.enter.native="crud.doSearch()" onSubmit="return false;"
+                         class="demo-form-inline">
+                    <el-form-item label="用户名称">
+                        <el-input v-model="crud.searchForm.userNamePinYin"
+                                  placeholder="中文、拼音全拼、简拼"></el-input>
+                    </el-form-item>
+                    <el-form-item label="用户账号">
+                        <el-input v-model="crud.searchForm.userAccountLike"></el-input>
+                    </el-form-item>
+                    <el-form-item label="用户状态">
+                        <el-select v-model="crud.searchForm.userStatus" size="small">
+                            <el-option v-for="item in statusOptions" :key="item.value"
+                                       :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search"
+                                   @click="crud.doSearch()">查询
+                        </el-button>
+                        <el-button icon="el-icon-close" @click="crud.resetSearch()">清空
+                        </el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-header>
+        <!--查询框 end-->
+
+        <!--列表数据 start-->
+        <el-main style="padding: 15px 0 10px 0; box-sizing: border-box;height: 100%;">
+            <el-container style="height: 100%">
+                <!--操作按钮 start-->
+                <el-header style="padding: 0;height: auto; box-sizing: border-box;">
+                    <el-button type="primary" size="small" icon="el-icon-check" @click="add()">新增</el-button>
+                    <el-button type="warning" size="small" icon="el-icon-s-cooperation" @click="settingLock('20')">设为锁定</el-button>
+                    <el-button type="success" size="small" icon="el-icon-paperclip" @click="settingLock('10')">解锁</el-button>
+                    <el-button type="info" size="small" icon="el-icon-s-promotion" @click="changeUserOrg()">转出</el-button>
+                    <el-button type="danger" size="small" icon="el-icon-delete" @click="remove()">删除</el-button>
+                </el-header>
+                <!--操作按钮 end-->
+
+                <!--数据 start-->
+                <el-main style="margin-top:15px;padding: 0;box-sizing: border-box;height: 100%;">
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef" stripe border height="100%"
+                              style="width: 100%;">
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+                        <el-table-column label="用户名称" prop="userName" align="center"></el-table-column>
+                        <el-table-column label="用户账号" prop="userAccount" align="center" width="200"></el-table-column>
+                        <el-table-column label="所属组织" prop="orgName" align="center"></el-table-column>
+                        <el-table-column label="关联角色权限" prop="roleName" align="center"
+                                         :show-overflow-tooltip="true" width="200"></el-table-column>
+                        <el-table-column label="当前状态" prop="userStatus" align="center" width="100">
+                            <template slot-scope="scope">
+                                <el-tag :type="userStatusColor[scope.row.userStatus]">{{userStatusObj[scope.row.userStatus]}}</el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" width="380">
+                            <template slot-scope="scope">
+                                <el-button size="small" icon="el-icon-edit" type="primary" @click="update(scope.row)">
+                                    修改
+                                </el-button>
+                                <el-button size="small" icon="el-icon-zoom-in" :type="scope.row.empowerId?'primary':'info'" @click="viewMenu(scope.row)"
+                                           :disabled="scope.row.empowerId?false:true">
+                                    查看可分配菜单
+                                </el-button>
+                                <!--<el-button size="small" icon="el-icon-edit-outline" type="primary">-->
+                                <!--修改密码-->
+                                <!--</el-button>-->
+                                <el-button size="small" icon="el-icon-setting" type="primary" @click="resetPwd(scope.row)">
+                                    重置密码
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+                <!--数据 end-->
+            </el-container>
+        </el-main>
+        <!--列表数据 end-->
+        <pl-lazy>
+        <!--分页 start-->
+        <el-footer style="padding:0;height: 30px;box-sizing: border-box;">
+            <el-pagination style="padding: 0;box-sizing: border-box;"
+                    :ref="crud.pageRef"
+                    :page-sizes="crud.pageSizes"
+                    :page-size="crud.pageSize"
+                    :current-page="crud.page"
+                    :total="crud.dataStore.total"
+                    @size-change="crud.sizeChange()"
+                    @current-change="crud.currentPage()"
+                    layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+        <!--分页 end-->
+
+        <!--添加修改弹框 start-->
+        <el-dialog :close-on-click-modal=false :title="addOrUpdateTitle" top="20vh" :visible.sync="addOrUpdateDialog">
+            <el-form :model="formData" ref="formDataRef" :rules="rules">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="用户名称" label-width="100px" prop="userName">
+                            <el-input v-model="formData.userName" size="small"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="用户账号" label-width="100px" prop="userAccount">
+                            <el-input v-model="formData.userAccount" size="small"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="用户类型" label-width="100px" prop="userType">
+                            <el-select v-model="formData.userType" style="width: 100%" disabled size="small">
+                                <el-option v-for="item in userTypeArr" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="用户状态" label-width="100px" prop="userStatus">
+                            <el-select v-model="formData.userStatus" style="width: 100%" size="small">
+                                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="所属组织" label-width="100px" prop="orgId">
+                            <tree-select v-model="formData.orgId" :options="treeData" placeholder="请选择" :required="true"/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="性别" label-width="100px" prop="userGender">
+                            <el-select v-model="formData.userGender" style="width: 100%" size="small">
+                                <el-option v-for="item in sexTypeArr" :key="item.value" :label="item.label" :value="item.value">
+
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="出生日期" label-width="100px" prop="userAge">
+                            <el-date-picker v-model="formData.userAge" type="date" placeholder="选择日期"
+                                            :editable="false" style="width: 100%" size="small">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="联系QQ" label-width="100px" prop="userQQ">
+                            <el-input v-model="formData.userQq" size="small"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="联系电话" label-width="100px" prop="userPhone">
+                            <el-input v-model="formData.userPhone" size="small"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="电子邮箱" label-width="100px" prop="userEmail">
+                            <el-input v-model="formData.userEmail" size="small"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm()" size="small" icon="el-icon-success">确 定</el-button>
+                <el-button @click="addOrUpdateDialog = false" size="small" icon="el-icon-error">取 消</el-button>
+            </div>
+        </el-dialog>
+        <!--添加修改弹框 start-->
+
+        <!--转出 start-->
+        <el-dialog :close-on-click-modal=false title="转出" top="40vh" :visible.sync="changeUserOrgDialog" width="30%">
+            <el-form ref="changeOrgRef">
+                <el-form-item label="转入组织" label-width="80px">
+                    <tree-select v-model="changeOrgId" :options="treeData" placeholder="请选择" :required="true"/>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="saveChangeOrg()" size="small" icon="el-icon-success">确 定</el-button>
+                <el-button @click="changeUserOrgDialog = false" size="small" icon="el-icon-error">取 消</el-button>
+            </div>
+        </el-dialog>
+        <!--转出 end-->
+
+        <el-dialog :close-on-click-modal=false title="查看菜单" top="5vh" height="90%" width="80%" :visible.sync="viewMenuDialog" class="userViewMenuClass">
+            <empower-user-view-menu-tree :role-id="roleId" :menu-model-obj="menuModelObj" :data-dictionary-obj="dataDictionaryObj"
+                                        :menu-opt-all="menuOptAll" :current-role-opt-all="currentRoleOptAll"
+                                        :refresh-boolean-proper="viewMenuDialog" user-type="empower">
+            </empower-user-view-menu-tree>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="viewMenuDialog = false" size="small" icon="el-icon-error">关闭</el-button>
+            </div>
+        </el-dialog>
+        </pl-lazy>
+    </el-container>
+</template>
+
+
+<script>
+    import EmpowerUserViewMenuTree from "./empowerUserListViewMenuTree";
+    export default {
+        name: "empower-user-list",
+        components: {EmpowerUserViewMenuTree},
+        props:{
+            orgDim:{type:String,default:""},//组织维度
+            treeData:{type:Array,default:[]},//组织树数据
+            menuOptAll:{type:Object,default:function () {return {};}},//当前登录用户拥有的所有操作权限
+            loginUser:{type:Object,default:function () {return {};}},
+            loginUserId:{type:String,default:""}//当前登录用户id
+        },
+        data(){
+            return{
+                crud: new this.CrudUtil({
+                    vue: this,
+                    entityName: "sysUser",
+                    url:this.api.sysUser.url,
+                    searchUrl: this.api.sysUser.findPageParam,
+                    searchForm: {empowerUser:"Y",userType:"empower",roleRemind:"Y",empowerOrgDim:this.orgDim,empowerOrgId:"",created:this.loginUserId},
+                    noClearSearchColumns: ["empowerUser","userType","roleRemind","empowerOrgDim","created","empowerOrgId"],
+                    initNoSearch: true
+                }),
+                statusOptions:[
+                    {value : '10',label : "正常"},
+                    {value : '20',label : "锁定"}
+                ], //用户状态下拉框
+                userStatusObj : {
+                    '10' : "正常",
+                    '20' : "锁定",
+                },
+                userStatusColor : {
+                    '10' : "success",
+                    '20' : "warning",
+                },
+                //新增修改弹窗标题
+                addOrUpdateTitle:"添加授权用户",
+                // formData:{userAccount:"",userName:"",userType:"empower",userStatus:""},//用户信息
+                addOrUpdateDialog:false,//新增修改弹窗是否显示
+                rules:{
+                    userAccount:this.plValidate('required'),
+                    userName:this.plValidate('required'),
+                    userType:this.plValidate('required'),
+                    userStatus:this.plValidate('required'),
+                    userQQ:this.plValidate('qq'),
+                    userPhone:this.plValidate('phone'),
+                    userEmail:this.plValidate('email'),
+                    orgId:this.plValidate('required')
+                },//验证
+                userTypeArr:[{"label":"授权用户","value":"empower"}],//用户类型
+                sexTypeArr:[
+                    {value : '男',label : "男"},
+                    {value : '女',label : "女"}
+                ],//性别
+                formData:{
+                    userAccount:"",userName:"",userType:"empower",userStatus:"10",orgId:null
+                },//表单数据初始化
+                currentOrgId:null,//当前选择的组织
+                changeOrgId:null,//转出的组织id
+
+
+                changeUserOrgDialog:false,//转出弹窗
+                selectIds:"",//表格内勾选的数据id
+
+                viewMenuDialog:false,//查看菜单弹窗
+
+                roleId:"",//角色权限id
+                menuModelObj:{},//菜单模块
+                dataDictionaryObj:{},//数据字典
+                currentRoleOptAll:{},// 当前角色设置的所有roleMenuOpt
+            }
+        },
+        created(){
+            this.getData();
+            // this.initMenuModelObj();
+            this.initDataDictionaryObj();
+        },
+        computed: {
+        },
+        watch:{
+            orgDim(){
+                this.crud.searchForm.empowerOrgDim = this.orgDim;
+                this.crud.search();
+            },
+        },
+        methods:{
+            /**
+             * 初始化数据
+             * @param
+             */
+            getData(){
+                let vm = this;
+                //用户类型
+                // vm.axios.post(vm.api.param.getSysParams).then(function (res) {
+                //     let sysParamObj = res.data;
+                //     let paramValString = sysParamObj["SysUserType"];
+                //     let result = JSON.parse(vm.platStringUtil.replaceAll(paramValString,"'","\""));
+                //     for(let [key,value] of Object.entries(result)){
+                //         vm.userTypeArr.push({"label":value,"value":key})
+                //     }
+                // });
+            },
+
+
+            /**
+             * 菜单模块数据
+             */
+            initMenuModelObj() {
+                let vm = this;
+                vm.axios.post(vm.api.menuModule.find).then((res) => {
+                    let data = res.data;
+                    for (let item of data) {
+                        vm.menuModelObj[item.id] = item.moduleName || "无";
+                    }
+                });
+            },
+
+            /**
+             * 数据字典
+             */
+            initDataDictionaryObj(){
+                let vm = this;
+                vm.axios.post(vm.api.dataType.find).then(res => {
+                    let data = res.data;
+                    data.forEach(item => {
+                        vm.dataDictionaryObj[item.id] = item.typeName;
+                    });
+                });
+            },
+
+
+
+            /**
+             * 根据组织查询用户
+             * @param orgId
+             */
+            changeSearchForm(orgId){
+                let vm = this;
+                vm.currentOrgId = orgId;
+                vm.crud.searchForm["empowerOrgId"] = orgId;
+                vm.crud.doSearch();
+            },
+
+            /**
+             * 新增
+             */
+            add(){
+                let vm = this;
+                vm.formData = {};
+                vm.formData = {userAccount:"",userName:"",userType:"empower",userStatus:"10",orgId:vm.currentOrgId};
+                vm.addOrUpdateDialog = true;
+                vm.addOrUpdateTitle = "添加授权用户";
+                vm.$nextTick(function () {
+                    vm.$refs.formDataRef.clearValidate(); // 再次添加清除原先的验证
+                });
+            },
+
+            /**
+             * 修改
+             */
+            update(data){
+                let vm = this;
+                vm.formData = {};
+                vm.formData = {
+                    id:data.id,orgId:data.orgId,userAccount:data.userAccount,
+                    userName:data.userName,userStatus:data.userStatus,
+                    userGender:data.userGender,userAge:data.userAge,
+                    userQq:data.userQq,userPhone:data.userPhone,
+                    userType:data.userType,userEmail:data.userEmail,
+                    updated:vm.loginUserId
+                }
+                vm.addOrUpdateDialog = true;
+                vm.addOrUpdateTitle = "修改授权用户";
+            },
+
+            /**
+             * 提交数据
+             */
+            submitForm(){
+                let vm = this;
+                vm.$refs.formDataRef.validate(function (valid) {
+                    if(valid){
+                        let userParentTree = "";
+                        if("sup" == vm.loginUser.userType){
+                            userParentTree = "-1";
+                        }else{
+                            userParentTree = vm.loginUser.parentUserTree + "," + vm.loginUserId;
+                        }
+                        vm.formData.parentUserTree = userParentTree;
+                        vm.formData.created = vm.loginUserId;
+                        vm.formData.updated = vm.loginUserId;
+                        vm.formData.orgDim = vm.orgDim;
+                        vm.axios.post(vm.api.sysUser.saveEmpowerUser,vm.formData).then(res => {
+                            if(res.data){
+                                let type = "error";
+                                if(res.data.operateSuccess){
+                                    type = "success";
+                                    vm.addOrUpdateDialog = false;
+                                    vm.crud.search();
+                                }
+                                vm.$message({
+                                    duration: 1000,
+                                    type: type,
+                                    message: res.data.operateMessage
+                                });
+                            }
+                        });
+                    }
+                });
+            },
+
+            /**
+             * 锁定、解锁
+             */
+            settingLock(userStatus){
+                let vm = this;
+                let selection = vm.$refs[vm.crud.setting.tableRef].selection || [];
+                if(selection.length === 0){
+                    vm.$message({
+                        message:"请选择要操作的用户！",
+                        duration:1500
+                    });
+                    return false;
+                }
+                let msg = "用户锁定时，该用户及其下级授权用户将被锁定，同时该用户及其下级授权用户创建的相关权限也将被锁定，无法使用，确认锁定吗？";
+                let message = "锁定";
+                if(userStatus == "10"){
+                    msg = "确定解锁吗？";
+                    message = "解锁";
+                }
+                vm.$confirm(msg, '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    dangerouslyUseHTMLString: true
+                }).then(function () {
+                    let arrIds = [];
+                    selection.forEach(function (data) {
+                        arrIds.push(data.id);
+                    });
+                    vm.crud.axios.post(vm.api.sysUser.settingLockedEmpowerUser,
+                        {"userIds": arrIds.join(","),"userStatus":userStatus}).then(function (res) {
+                        let type = "error";
+                        let tip = message + "失败";
+                        if(res.data.operateSuccess){
+                            type = "success";
+                            tip = message + "成功";
+                            vm.crud.search();
+                        }
+                        vm.$message({
+                            type: type,
+                            message: tip
+                        });
+                    });
+                });
+            },
+
+            /**
+             * 转出
+             */
+            changeUserOrg(){
+                let vm = this;
+                let selection = vm.$refs[vm.crud.setting.tableRef].selection ||[];
+                if(selection.length === 0){
+                    vm.$message({
+                        message:"请选择要操作的用户！",
+                        duration:1500
+                    });
+                    return false;
+                }
+                let arrIds = [];
+                selection.forEach(function (data) {
+                    arrIds.push(data.id);
+                });
+                vm.selectIds = arrIds.join(",");
+                vm.changeOrgId = null;
+                vm.changeUserOrgDialog = true;
+            },
+
+            /**
+             * 转出保存
+             */
+            saveChangeOrg(){
+                let vm = this;
+                if(!vm.changeOrgId){
+                    vm.$message({
+                        type: "warning",
+                        message: "转入组织不能为空！"
+                    });
+                    return;
+                }
+                if(vm.selectIds){
+                    vm.$confirm('确定要转出吗?', '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        dangerouslyUseHTMLString: true
+                    }).then(function () {
+                        vm.crud.axios.post(vm.api.sysOrgPosUser.batchUpdateOrgIdByUserId,
+                            {"userIds": vm.selectIds,"orgId":vm.changeOrgId}).then(function (res) {
+                            let type = "error";
+                            let msg = "转出失败";
+                            if(res.data.operateSuccess){
+                                type = "success";
+                                msg = "转出成功";
+                                vm.crud.search();
+                                vm.changeUserOrgDialog = false;
+                            }
+                            vm.$message({
+                                type: type,
+                                message: msg
+                            });
+                        });
+                    });
+                }
+            },
+
+            /**
+             * 删除
+             */
+            remove(){
+                let vm = this;
+                let selection = vm.$refs[vm.crud.setting.tableRef].selection ||[];
+                if(selection.length === 0){
+                    vm.$message({
+                        message:"请选择要删除的数据！",
+                        duration:1500
+                    });
+                    return false;
+                }
+                vm.$confirm('用户删除时，该用户及其下级授权用户相关权限也将被删除且无法恢复，确认删除吗?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    dangerouslyUseHTMLString: true
+                }).then(function () {
+                    let arrIds = [];
+                    selection.forEach(function (data) {
+                        arrIds.push(data.id);
+                    });
+                    vm.axios.post(vm.api.sysUser.deleteEmowerUser,{"userIds": arrIds.join(",")}).then(res => {
+                        let type = "error";
+                        let msg = "删除失败！";
+                        if(res.data.operateSuccess){
+                            type = "success";
+                            msg = "删除成功！";
+                        }
+                        vm.$message({
+                            type: type,
+                            message:msg
+                        });
+                        vm.crud.search();
+                    });
+                });
+
+
+            },
+
+
+            resetPwd(row){ // 重置密码
+                let [vm,userNameText] = [this,row.userName?row.userName:'用户'];
+                this.$confirm('确定要重置'+userNameText+'的密码?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    beforeClose:function (action, instance, done) {
+                        if(action == 'confirm'){
+                            vm.axios.post(vm.api.sysUser.resetPwd,{"id":row.id}).then(function (res) {
+                                done(); // 完成后提示并关闭窗口
+                                vm.$message({
+                                    type:'success',
+                                    duration:1500,
+                                    message:res.data.operateMessage
+                                });
+                            });
+                        }else{
+                            done();
+                        }
+                    }
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消'
+                    });
+                });
+            },
+
+
+            viewMenu(row){
+                let vm = this;
+                vm.roleId = row.empowerId;
+                // vm.roleId = "dd7ae966e0c24aacbadcf05ae39e239b";
+                vm.viewMenuDialog = true;
+                vm.getSettingAndInit(row.empowerId);
+            },
+
+            // 获取当前配置并初始化
+            getSettingAndInit(roleId){
+                let vm = this;
+                vm.currentRoleOptAll = {};
+                if(roleId){
+                    vm.axios.post(vm.api.roleMenuOpt.find,{"roleId":roleId}).then(function (res) {
+                        res.data.forEach(function (each) {
+                            vm.currentRoleOptAll[each.menuId] = {
+                                'id': each.id,
+                                'enableOperation': each.enableOperation,
+                                'operation': each.operation,
+                                'enableData': each.enableData,
+                                'dataPower': each.dataPower,
+                            };
+                        });
+                    });
+                }
+            },
+
+        }
+    }
+</script>
+
+<style rel="stylesheet/scss" scoped>
+    .userViewMenuClass /deep/ .el-dialog__body{
+        padding: 0;
+    }
+</style>