sasp-admin 0.2.57

package/src/views/tenant/tenantUserManager.vue

@@ -0,0 +1,615 @@
+<template>
+    <el-container class="form-list" style="height: 100%;">
+        <el-header style="height: auto;">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" size="small" class="demo-form-inline" onSubmit="return false;">
+                    <el-form-item label="租户名称">
+                        <el-input v-model="crud.searchForm.tenantName"></el-input>
+                    </el-form-item>
+                    <el-form-item label="手机号码">
+                        <el-input v-model="crud.searchForm.tenantAccount"></el-input>
+                    </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>
+        <el-main style="padding:10px 0 0 0;height: 100%;">
+            <el-container style="height: 100%;">
+                <el-header style="height: auto;">
+                    <el-button type="primary" size="small" round icon="el-icon-circle-plus" @click="addTenant()">新增</el-button>
+                    <el-button type="danger" size="small" round icon="el-icon-delete" @click="removeTenant()">删除</el-button>
+                </el-header>
+                <el-main style="padding-top:10px;height: 100%;">
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef"
+                              :header-cell-style="headerCellStyle"
+                              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="tenantName" align="center" min-width="200"  ></el-table-column>
+                        <el-table-column label="手机号码" prop="tenantAccount" align="center" width="120" show-overflow-tooltip></el-table-column>
+                        <el-table-column label="租户类型" prop="tenantType" align="center" width="120" show-overflow-tooltip>
+                            <template slot-scope="scope">
+                                {{tenantTypeObj[scope.row.tenantType]}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="登录标识" prop="tenantLogincode" align="center" width="250" show-overflow-tooltip>
+                        </el-table-column>
+                        <el-table-column label="数据标识" prop="tenantDatacode" align="center" width="150"></el-table-column>
+                        <el-table-column label="操作" align="center" width="310">
+                            <template slot-scope="scope">
+                                <el-button size="mini" icon="el-icon-edit"
+                                           type="primary" @click="update(scope.row)" >修改</el-button>
+                                <el-button size="mini" icon="el-icon-view"
+                                           type="primary" @click="view(scope.row)">查看</el-button>
+                                <el-popconfirm
+                                        style="margin-left: 10px"
+                                        confirm-button-text='确定'
+                                        cancel-button-text='取消'
+                                        icon="el-icon-info"
+                                        icon-color="red"
+                                        title="确定重置当前租户密码？"
+                                        @confirm='resetPwd(scope.row.id)'>
+                                    <el-button slot="reference" size="small" type="danger">
+                                        重置密码
+                                    </el-button>
+                                </el-popconfirm>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+                <el-footer style="height: 40px">
+                    <el-pagination
+                            :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>
+            </el-container>
+        </el-main>
+
+
+        <el-dialog :close-on-click-modal=false :title="dialogTitle" top="10vh" :visible.sync="crud.dialogVisible"
+                   width="70%"
+                   height="70%"
+                   v-loading="loading"
+                   element-loading-text="正在初始化用户相关数据请稍后..."
+                   element-loading-spinner="el-icon-loading"
+                   element-loading-background="rgba(0, 0, 0, 0.4)"
+                   append-to-body>
+            <el-form :model="crud.formData" :ref="crud.addFormRef" label-width="110px" :disabled="operate == 'view'" >
+                <el-col :span="12">
+                    <el-form-item label="租户名称" prop="tenantName"
+                                  :class="operate == 'view'?'source-mark-class':''"
+                                  :rules="operate!='view'? plValidate('required'): null" >
+                        <el-input v-model="crud.formData.tenantName" maxlength="50" show-word-limit v-if="operate != 'view'"></el-input>
+                        <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                            {{crud.formData.tenantName}}
+                        </div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12" >
+                    <el-form-item label="手机号码" prop="tenantAccount"
+                                  :class="operate == 'view'?'source-mark-class':''"
+                                  :rules="operate!='view'? rules.tenantAccount : null" >
+                        <el-input v-model="crud.formData.tenantAccount" :disabled="operate != 'add'" v-if="operate != 'view'" show-word-limit ></el-input>
+                        <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                            {{crud.formData.tenantAccount}}
+                        </div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="租户类型" prop="tenantType"  style="width: 100%"  :class="operate == 'view'?'source-mark-class':''">
+                        <el-radio-group v-model="crud.formData.tenantType"
+                                        v-if="operate != 'view'"
+                                        style="width: 33.3%"
+                                        disabled v-for="(value,key) in tenantTypeObj" :key="key">
+                            <el-radio :label="key" >{{value}}</el-radio>
+                        </el-radio-group>
+                        <div v-if="operate == 'view'" class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                            {{tenantTypeObj[crud.formData.tenantType]}}
+                        </div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item  label="登录页" prop="tenantPage" :class="operate == 'view'?'source-mark-class':''">
+                        <el-select  v-model="crud.formData.tenantPage" placeholder="请选择"  style="width: 100%"   v-if="operate != 'view'">
+                            <el-option
+                                    v-for="item in tenantPageArr"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
+                        <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                            {{tenantPageObj[crud.formData.tenantPage]}}
+                        </div>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="12">
+                    <el-form-item  label="主题" prop="tenantTheme" :class="operate == 'view'?'source-mark-class':''">
+                        <el-select  v-model="crud.formData.tenantTheme" placeholder="请选择"  style="width: 100%" v-if="operate != 'view'">
+                            <el-option
+                                    v-for="item in tenantThemeArr"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
+                        <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                            {{tenantThemeObj[crud.formData.tenantTheme]}}
+                        </div>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="12">
+                    <el-form-item  label="关联角色" prop="tenantAuth"
+                                   :style="{'padding-right': operate != 'view' ? '120px' : '0'}"
+                                   :class="operate == 'view'?'source-mark-class':''">
+                        <el-select  v-if="operate != 'view'" v-model="crud.formData.tenantAuth" placeholder="请选择"  style="width: 100%" >
+                            <el-option
+                                    v-for="item in tenantAuthArr"
+                                    :key="item.id"
+                                    :label="item.roleName"
+                                    :value="item.id">
+                            </el-option>
+                        </el-select>
+                        <el-button type="warning" icon="el-icon-refresh" style="position: absolute;right: -120px"
+                                   @click="editTenantRole()" v-if="operate != 'view'">配置角色</el-button>
+                        <div v-if="operate == 'view'" class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                            {{tenantAuthObj[crud.formData.tenantAuth ||''] || '暂无'}}
+                        </div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item  label="登录标识" prop="tenantLogincode" :style="{'padding-right': operate != 'view' ? '120px' : '0'}"
+                                   :class="operate == 'view'?'source-mark-class':''"
+                                   :rules="operate!='view'? rules.tenantLogincode : null">
+                        <el-input v-model="crud.formData.tenantLogincode"  show-word-limit v-if="operate != 'view'" ></el-input>
+                        <el-button type="warning" icon="el-icon-refresh" style="position: absolute;right: -120px"
+                                   @click="getLoginCode()" v-if="operate != 'view'">自动生成</el-button>
+
+                        <div v-if="operate == 'view'" class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                            {{crud.formData.tenantLogincode}}
+                        </div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="数据标识" prop="tenantDataCodeSuffix"
+                                  :class="operate == 'view'?'source-mark-class':''"
+                                  :rules="operate=='add'? rules.tenantDatacodeSuffix : null">
+                        <!--已创建的表名不能修改-->
+                        <el-input v-model="crud.formData.tenantDataCodeSuffix" :disabled="operate != 'add'"
+                                  v-if="operate != 'view'"
+                                  placeholder="支持正整数、大写字母和下划线" maxlength="8">
+                            <template slot="prepend">TEN_</template>
+                        </el-input>
+                        <div v-if="operate == 'view'" class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                            {{'TEN_'+crud.formData.tenantDataCodeSuffix}}
+                        </div>
+                    </el-form-item>
+                </el-col>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button v-if="operate != 'view'" type="primary" @click="submitForm()" :disabled="loading" size="small"  icon="el-icon-success">确 定</el-button>
+                <el-button @click="crud.dialogVisible = false" size="small" :disabled="loading"  icon="el-icon-error">{{operate == 'view'? '关 闭':'取 消'}}</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog :close-on-click-modal=false  top="5vh"
+                   :close-on-press-escape="false"
+                   :modal-append-to-body="false"
+                   :visible.sync="tenantRoleDialogVisible"
+                   title="关联角色"
+                   width="95%"
+                   class="install-dialog-class"
+                   height="90%" @close="closeTenantRole"
+                   append-to-body>
+            <div class="pos-abs-full" style="top: 5px;left: 5px;right: 5px;bottom: 5px;">
+               <tenant-role-manager></tenant-role-manager>
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="closeTenantRole()" size="small" icon="el-icon-error">关 闭</el-button>
+            </div>
+        </el-dialog>
+    </el-container>
+
+
+</template>
+
+<script>
+    //租户管理
+    import TenantRoleManager from "./tenantRoleManager";
+    export default {
+        name: "tenantUserManager",
+        components: {TenantRoleManager},
+        data(){
+            //手机号码校验
+            let tenantAccountValidate =(rule,value,callback) => {
+                if(!value){
+                    callback();
+                }
+                //判断输入是否为手机号码
+                let flag = /^((\(\d{2,3}\))|(\d{3}\-))?1\d{10}$/.test(value);
+                if (!flag){
+                    return callback(new Error('请输入正确的手机号码！'));
+                }else {
+                    this.axios.post(this.api.SysTenant.find,{tenantAccount:value}).then(res =>{
+                        if((res.data ||[]).length == 0  || (this.operate == 'update' && this.oldTenantAccount == value)){
+                            callback();
+                        }else{
+                            return callback(new Error('该手机号码已经被注册！'));
+                        }
+                    });
+                }
+            };
+            //登录标识校验
+            let tenantLogincodeValidate = (rule,value,callback) => {
+                if(!value){
+                    callback();
+                }
+                this.axios.post(this.api.SysTenant.find,{tenantLogincode:value}).then(res =>{
+                    if((res.data ||[]).length == 0  || (this.operate == 'update' && this.oldTenantLoginCode == value)){
+                        callback();
+                    }else{
+                        return callback(new Error('该登录标识已经存在！'));
+                    }
+                });
+            };
+            //数据标识校验
+            let tenantDatacodeSuffixValidate = (rule,value,callback) =>{
+                if(!value){
+                    callback();
+                }
+                let flag = /^[0-9A-Z_]{1,}$/.test(value);
+                if (!flag){
+                    return callback(new Error('数据标识仅支持正整数、大写字母和下划线！'));
+                }else {
+                    this.axios.post(this.api.SysTenant.find,{tenantDatacode:'TEN_'+value}).then(res =>{
+                        if((res.data ||[]).length == 0){
+                            callback();
+                        }else{
+                            return callback(new Error('该数据标识已存在！'));
+                        }
+                    });
+                }
+            };
+
+            return{
+                crud: new this.CrudUtil({
+                    vue: this,
+                    entityName: "SysTenant",
+                    url: this.api.SysTenant.url,
+                    searchForm: {order:"UPDATE_TIME DESC,CREATE_TIME DESC"},
+                    noClearSearchColumns:["order"]
+                }),
+                tenantTypeObj:{
+                    "group":"团体",
+                    "person":"个人"
+                },
+                operate:'add', //操作类型
+
+                dialogTitle:'',
+                rules:{
+                    tenantAccount:[
+                        {required: true, message: '该输入项为必输项'},
+                        {validator:tenantAccountValidate,trigger:'blur'}
+                    ],
+                    tenantLogincode:[
+                        {required: true, message: '该输入项为必输项'},
+                        {validator:tenantLogincodeValidate,trigger:'change'}
+                    ],
+
+                    tenantDatacodeSuffix:[
+                        {required: true, message: '该输入项为必输项'},
+                        {validator:tenantDatacodeSuffixValidate,trigger:'blur'}
+                    ]
+
+                },
+                oldTenantAccount:'',//修改前手机号码
+                oldTenantLoginCode:'',//修改前 登录标识
+                tenantPageArr:[], //登录页
+                tenantPageObj:{}, //登录页
+                tenantThemeArr:[], //主题配置
+                tenantThemeObj:{},//主题
+                tenantAuthArr:[], //租户权限
+                tenantAuthObj:{}, //租户
+                paramFieldArr:["tenantName","tenantAccount","tenantType","tenantPage","tenantTheme","tenantAuth","tenantLogincode"],
+                loading:false,//加载
+
+                tenantRoleDialogVisible:false,
+            }
+        },
+
+        created(){
+            this.initTenant();
+        },
+        methods:{
+
+            /**
+             * 初始化租户相关信息
+             */
+            initTenant(){
+                //获取系统参数 中  登录页面 和主题配置
+                this.PARAM_GLOBAL.getByKeyAsync("tenantPage").then(res =>{
+                    let tenantPageArr = res && res.data ? res.data : [];
+                    this.tenantPageArr.push({
+                        label:"默认",value:"default"
+                    });
+                    this.tenantPageObj['default'] = "默认";
+                    tenantPageArr.forEach(item =>{
+                        this.tenantPageArr.push({
+                            label:item.label,value:item.value
+                        });
+                        this.tenantPageObj[item.value] = item.label;
+                    })
+                });
+                this.PARAM_GLOBAL.getByKeyAsync("tenantTheme").then(res =>{
+                    let tenantThemeArr = (res && res.data) ? res.data : [];
+                    this.tenantThemeArr.push({
+                        label:"默认",value:"default"
+                    });
+                    this.tenantThemeObj['default'] = "默认";
+                    tenantThemeArr.forEach(item =>{
+                        this.tenantThemeArr.push({
+                            label:item.label,value:item.value
+                        });
+                        this.tenantThemeObj[item.value] = item.label;
+                    })
+                });
+            },
+
+            addTenant(){
+                this.operate = "add";
+                this.dialogTitle = "添加租户信息";
+                //生成
+
+                //获取最新租户权限配置
+                this.initTenantAuth().then(res=>{
+                    this.tenantAuthObj = {};
+                    this.getDatacode(this.COMMON_FUNC.getUuidByParams(8).toUpperCase()).then(dataCode =>{
+                        this.tenantAuthArr = res && res.data ? res.data : [];
+                        this.tenantAuthArr.forEach(authObj =>{
+                            this.tenantAuthObj[authObj.id] = authObj;
+                        });
+                        this.crud.add();
+                        this.$set(this.crud.formData,'tenantType','group'); //默认团体用户
+                        this.$set(this.crud.formData,'tenantPage','default'); //默认登录页
+                        this.$set(this.crud.formData,'tenantTheme','default'); //默认主题
+                        this.getLoginCode();
+                        //生成数据标识
+                        this.$set(this.crud.formData,'tenantDataCodeSuffix',dataCode);
+                        this.$nextTick(() => {
+                            this.$refs[this.crud.addFormRef].clearValidate(); //刷新校验
+                        });
+                    });
+                });
+            },
+
+            /**
+             * 删除
+             */
+            removeTenant(){
+                let selection = this.$refs[this.crud.tableRef].selection || [];
+                if(selection.length == 0){
+                    this.$message({
+                        duration: 1500,
+                        type: 'info',
+                        message: '请至少选择一条需要删除的数据！'})
+                    return;
+                }
+                this.$confirm('是否确定删除选择的“' + selection.length + '”条数据?', '警告', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(()=> {
+                    let deleteIds = [];
+                    selection.forEach(item =>{
+                        deleteIds.push(item.id)
+                    });
+                    let loading = this.$loading({
+                        target: this.$refs[this.crud.tableRef].$el,
+                        lock: true,
+                        text: '正在删除,请稍后...',
+                        spinner: 'el-icon-loading',
+                        background: 'rgba(0, 0, 0, 0.6)'
+                    });
+                    this.axios.post(this.api.SysTenant.removeTenantUser,{deleteIds:deleteIds.join(",")}).then(res =>{
+                        if(res && res.data){
+                            loading && loading.close();
+                            if(res.data.requestStatus == '1'){
+                                this.$message({
+                                    type: 'success',
+                                    message: res.data.message || '删除成功！'
+                                });
+                                this.crud.search();
+                            }else {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.data.message || '删除失败！'
+                                });
+                            }
+
+                        }
+                    })
+
+                });
+            },
+
+            update(row){
+                this.oldTenantAccount = row.tenantAccount;
+                this.oldTenantLoginCode = row.tenantLogincode;
+                this.operate = "update";
+                this.dialogTitle = "修改租户信息";
+                let editObj = JSON.parse(JSON.stringify(row));
+                //数据标识
+                this.initTenantAuth().then(res=>{
+                    this.tenantAuthArr = res && res.data ? res.data : [];
+                    this.crud.update(editObj);
+                    let tenantDatacode = editObj.tenantDatacode;
+                    this.$set(this.crud.formData,'tenantDataCodeSuffix',tenantDatacode.split("TEN_")[1]);
+                    this.$nextTick(() => {
+                        this.$refs[this.crud.addFormRef].clearValidate(); //刷新校验
+                    });
+                });
+            },
+
+            /**
+             * 查看租户信息
+             */
+            view(row){
+                this.operate = "view";
+                this.dialogTitle = "查看租户信息";
+                let editObj = JSON.parse(JSON.stringify(row));
+                this.initTenantAuth().then(res=>{
+                    this.tenantAuthArr = res && res.data ? res.data : [];
+                    this.crud.update(editObj);
+                    let tenantDatacode = editObj.tenantDatacode;
+                    this.$set(this.crud.formData,'tenantDataCodeSuffix',tenantDatacode.split("TEN_")[1]);
+                });
+            },
+
+            /**
+             * 加载租户权限
+             */
+            initTenantAuth(){
+                return new Promise(resolve => {
+                    this.axios.post(this.api.SysTenantRole.find,{roleStatus:"1"}).then(res =>{
+                        resolve(res);
+                    })
+                });
+            },
+
+            /**
+             * 自动生成登录标识
+             */
+            getLoginCode(){
+                this.$set(this.crud.formData,'tenantLogincode',this.COMMON_FUNC.getUuidByParams(32));
+            },
+
+            /**
+             * 生成数据标识并判断是否重复
+             */
+            getDatacode(datacode){
+                return new Promise(resolve => {
+                    this.axios.post(this.api.SysTenant.find,{tenantDatacode:'TEN_'+datacode}).then(res =>{
+                        if((res.data ||[]).length == 0){
+                            resolve(datacode)
+                        }else {
+                            this.getDatacode(this.COMMON_FUNC.getUuidByParams(8).toUpperCase()); //递归判断
+                        }
+                    });
+                })
+            },
+
+            /**
+             * 保存租户信息
+             */
+            submitForm(){
+                this.$refs[this.crud.addFormRef].validate(validate => {
+                    if(!validate){
+                        return;
+                    }
+                    this.loading = true; //防止重复点击
+
+                    // let loadingInfo = this.$loading({
+                    //     target: this.$refs[this.crud.addFormRef].$el,
+                    //     lock: true,
+                    //     text: '请稍候...',
+                    //     spinner: 'el-icon-loading',
+                    //     background: 'rgba(0, 0, 0, 0.6)'
+                    // });
+
+                    let paramObj = {};
+                    let url = this.api.SysTenant.createTenantUser; //默认添加用户
+                    if(this.operate == 'update'){
+                        url = this.api.SysTenant.update;
+                        paramObj["id"] = this.crud.formData.id;
+                    }
+                    let tenantDatacode = "TEN_" + this.crud.formData.tenantDataCodeSuffix; //数据库标识
+                    paramObj["tenantDatacode"] = tenantDatacode;
+                    this.paramFieldArr.forEach(field =>{
+                        paramObj[field] = this.crud.formData[field];
+                    });
+                    //执行
+                    this.axios.post(url,paramObj).then(res =>{
+                        this.crud.search();
+                        // loadingInfo && loadingInfo.close();
+                        this.loading = false;
+                        this.crud.dialogVisible = false;
+                        if(this.operate == 'add'){ //创建租户
+                            this.$message.success("创建成功！");
+                        }else { //修改租户
+                            this.$message.success("修改成功！");
+                        }
+                    });
+                });
+            },
+
+            /**
+             * 配置租户角色
+             */
+            editTenantRole(){
+                this.tenantRoleDialogVisible = true;
+            },
+
+            /**
+             * 关闭租户权限
+             */
+            closeTenantRole(){
+                //刷新角色
+                this.initTenantAuth().then(res=>{
+                    this.tenantAuthArr = res && res.data ? res.data : [];
+                    this.tenantRoleDialogVisible = false;
+                });
+            },
+
+            headerCellStyle({row, column, rowIndex, columnIndex}){
+                if (rowIndex === 0) {
+                    return 'background-color:#F2F2F2;color:#000;font-size:15px;font-weight:600;'
+                } else {
+                    return ''
+                }
+            },
+
+            /**
+             * 租户密码重置
+             * @param tenantId
+             */
+            resetPwd(tenantId){
+                this.axios.post(this.api.SysTenant.resetTenantPwd,{"tenantId":tenantId}).then(res =>{
+                    let type = "error";
+                    if(res.data){
+                        type = res.data.requestStatus == '1'? 'success':'error';
+                        this.$message({
+                            type:type,
+                            message: res.data.message
+                        })
+                    }else {
+                        this.$message({
+                            type:type,
+                            message: '密码重置失败！'
+                        })
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .source-mark-class /deep/ label{
+        position: relative;
+        top: 0px;
+    }
+    .cloud-div{
+        border: 1px dashed #e6e6e6;padding: 0px 10px;box-sizing: border-box;
+    }
+</style>