mashangyoujiu/Public/js/role/edit-role.js

Vue.component('edit-role', {
    template: `<div v-cloak v-loading="loading"
                     element-loading-text="权限获取中"
                     element-loading-spinner="el-icon-loading">
                    <div>
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                            <el-form-item label="角色名称" prop="role_name">
                                <el-input v-model="ruleForm.role_name" style="width:200px"></el-input>
                            </el-form-item>
                            <el-form-item label="是否启用">
                                <el-switch v-model="ruleForm.status"
                                           active-value="1"
                                           inactive-value="2"></el-switch>
                            </el-form-item>
                            <el-form-item label="权限列表">
                                <component-permission v-if="userType!=3" ref="component-permission"
                                                      :data="permissionData"
                                                      :checked-keys="permissionCheckedKeys">
                                </component-permission>
                                <el-tabs tab-position="left" v-else>
                                    <el-tab-pane label="商户权限">
                                        <component-permission ref="component-permission" :data="permissionData"
                                            :checked-keys="permissionCheckedKeys" @check-change="permissionCheckChange">
                                        </component-permission>
                                    </el-tab-pane>
                                    <el-tab-pane label="门店权限" v-if="storePermissionVisible">
                                        <component-permission ref="component-permission-store" :data="storePermissionData"
                                            :checked-keys="storePermissionCheckedKeys">
                                        </component-permission>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="footer-button-box">
                        <el-button @click="closePage" :disabled="saveLoading">取消</el-button>
                        <el-button type="primary" :loading="saveLoading" @click="onSubmit('ruleForm')">保存</el-button>
                    </div>
                </div>`,
    props: {
        'userType': {
            type: Number,
            default: 1,
        },//1合伙人 2代理商 3商户 4门店
    },
    data() {
        return {
            permissionData: [],
            permissionCheckedKeys: [],
            storePermissionData: [],
            storePermissionCheckedKeys: [],
            jurList: [],
            ruleForm: {
                id: '',
                role_name: '',
                status: '1',
            },
            rules: {
                role_name: [{message: '请输入角色名', required: true, trigger: 'blur'}],
            },
            loading: true,
            saveLoading: false,
            storePermissionVisible: false,   //门店权限是否可见
            requestUrl: {
                rolesAddAjax: {
                    1: '/index.php/Admin/AdminRoles/rolesAddAjax',
                    2: '/index.php/Agent/AgentRoles/rolesAddAjax',
                    3: '/index.php/Retail/MerchantRoles/rolesAddAjax',
                    4: '/index.php/Retail/StoreRoles/rolesAddAjax',
                },
                getAllJurList: {
                    1: '/index.php/Admin/AdminRoles/getAllJurList',
                    2: '/index.php/Agent/AgentRoles/getAllJurList',
                    3: '/index.php/Retail/MerchantRoles/getAllJurList',
                    4: '/index.php/Retail/StoreRoles/getAllJurList',
                },
            },
            fatherIds: [],//父级ID列表
        }
    },
    methods: {
        closePage() {
            MenuApp.backPreview();
        },
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('确保存该角色吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        this.saveLoading = true;
                        const checkedPermission = [...this.$refs['component-permission'].getCheckedPomission(), ...(this.$refs['component-permission-store'] ? this.$refs['component-permission-store'].getCheckedPomission() : [])]
                        const checkIds = this.getArrDifference(checkedPermission, this.fatherIds);

                        this.sendRequest(this.requestUrl.rolesAddAjax[this.userType], {
                            data: {
                                group_id: this.ruleForm.id,
                                role_name: this.ruleForm.role_name,
                                status: this.ruleForm.status,
                                checkIds: checkIds.join(','),
                            },
                            success: (res) => {
                                this.saveLoading = false;
                                if (res.status == 1) {
                                    this.$message({
                                        message: res.message,
                                        type: 'success',
                                        duration: 1000,
                                        onClose: () => {
                                            this.closePage();
                                        }
                                    });
                                } else {
                                    this.$message.error(res.message);
                                }
                            }
                        })
                    }).catch(() => {
                    })

                }
            })
        },
        getArrDifference(arr1, arr2) {
            return arr1.filter(function (v) {
                return arr2.indexOf(v) == -1;
            });
        },
        getPermission(roleType) {
            this.sendRequest(this.requestUrl.getAllJurList[this.userType], {
                data: {
                    group_id: this.ruleForm.id,
                    role_type: roleType,
                },
                success: (res) => {
                    this.loading = false;
                    if (res.status == 1) {
                        const data = res.data;
                        if (roleType == 4) {
                            this.storePermissionData = data.list || [];
                            this.storePermissionCheckedKeys = data.checkIds || []
                        } else {
                            this.permissionData = data.list || [];
                            this.permissionCheckedKeys = data.checkIds || []
                            if (this.userType == 3) this.getPermission(4)
                            if (this.userType == 3 && this.permissionCheckedKeys.includes(170)) this.storePermissionVisible = true
                        }
                        if (this.ruleForm.id && roleType == this.userType) {
                            this.ruleForm.role_name = data.roleInfo.role_name
                            this.ruleForm.status = data.roleInfo.status
                        }
                        this.saveFatherIds(data.list)
                    } else {
                        this.$message.error(res.message);
                    }
                }
            })
        },
        saveFatherIds(list) {
            list.forEach((item) => {
                if (item.children) {
                    this.fatherIds.push(item.id)
                    this.saveFatherIds(item.children)
                }
            })
        },
        /**
         * @description 权限被点击事件（当前页面主要为了监听商户权限中的门店后台是否被选中）
         * @param {Number} nodeId 节点ID（门店后台的ID为170）164和165是它的父级，多级监听的原因请看子组件注释。
         * @param {Boolean} isChecked 是否被选中
         */
        permissionCheckChange(nodeId, isChecked) {
            if (['164', '165', '170'].includes(nodeId)) this.storePermissionVisible = isChecked
        }
    },
    mounted() {
        this.ruleForm.id = MenuApp.getQueryVariable('id');
        this.getPermission(this.userType);
    },
    created() {
    }
});