auth-web/src/pages/appfun-auth-manage/app-role-manage/role-manage.vue

<template>
    <el-form ref="sizeForm" :model="sizeForm" label-suffix=":" :rules="rules" label-width="120px">
        <el-form-item prop="name" label="角色名称">
            <el-input placeholder="请输入角色名称" v-model="sizeForm.name" clearable maxlength="20"></el-input>
        </el-form-item>

        <el-form-item prop="code" label="角色代码">
            <el-input placeholder="请输入角色代码" v-model="sizeForm.code" clearable maxlength="30"></el-input>
        </el-form-item>

        <el-form-item prop="roleCategory" label="关键状态">
            <dg-select placeholder="请选择关键状态" v-model="sizeForm.roleCategory">
                <el-option value="ALL" label="全局角色"></el-option>
                <el-option value="LOCAL" label="本地角色"></el-option>
            </dg-select>
        </el-form-item>

        <el-form-item v-if="sizeForm.roleCategory === 'LOCAL'" prop="roleLevel" label="角色层级">
            <dg-select
                placeholder="请选择角色层级"
                v-model="sizeForm.roleLevel"
                clearable
                filterable
                code="DM_ROLE_LEVEL"
            ></dg-select>
        </el-form-item>

        <el-form-item v-if="sizeForm.roleCategory === 'LOCAL'" prop="policeCategory" label="警种">
            <dg-select
                placeholder="请选择警种"
                v-model="sizeForm.policeCategory"
                clearable
                filterable
                code="T_MD_POLICE_TYPE"
            ></dg-select>
        </el-form-item>

        <el-form-item v-if="sizeForm.roleCategory === 'LOCAL'" prop="roleBusiness" label="业务域">
            <dg-tree-drop
                v-model="sizeForm.roleBusiness"
                placeholder="请选择业务域"
                :props="{
                    value: 'code',
                    label: 'name',
                    children: 'child'
                }"
                :data="tagTree"
                clearable
                filterable
                multiple
                visible-type="leaf"
                style="width: 100%"
                @change="handleTagTreeChange"
            ></dg-tree-drop>
        </el-form-item>

        <el-form-item prop="isNotLimitCount" label="是否限制配额">
            <dg-select
                placeholder="请选择是否限制配额"
                v-model="sizeForm.isNotLimitCount"
                code="DM_ISENABLED"
            ></dg-select>
        </el-form-item>

        <el-form-item v-if="sizeForm.roleCategory === 'LOCAL'" prop="detail" label="详细描述">
            <el-input type="textarea" :rows="2" v-model="sizeForm.detail"></el-input>
        </el-form-item>

        <div class="dg-layer-demo" v-footer>
            <dg-button @click="handleClose">取消</dg-button>
            <dg-button type="primary" @click="handlSave">保存</dg-button>
        </div>
    </el-form>
</template>

<script>
import * as roleinfoManageApi from "@/api/roleinfo-manage.js"
import * as regular from "@/utils/regular"
import { getBusinessTagTree } from "@/api/data-auth"
export default {
    name: "index",
    // 接收父页面传过来的属性
    props: {
        type: {
            type: String,
            default: "create"
        },
        createType: {
            type: String,
            default: "role"
        },
        formData: {
            type: Object,
            default: () => {}
        },
        appId: {
            type: String,
            default: ""
        }
    },
    // 页面数据绑定
    data() {
        const checkCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("请输入角色代码"))
            }
            if (value && !regular.checkNumLetter(value)) {
                return callback(new Error("角色代码只能由数字、字母、_组成"))
            }
            callback()
        }
        return {
            sizeForm: {
                appId: "", // 应用id
                name: "", // 角色名称
                code: "", // 角色代码
                roleCategory: "", // 关键状态
                roleLevel: "", // 角色层级
                policeCategory: "", // 警种
                roleBusiness: [], // 业务域
                isNotLimitCount: "0", // 是否限额
                detail: "" // 详细描述
            },
            url: "",
            rules: {
                name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
                code: [
                    { required: true, message: "请输入角色代码", trigger: "blur" },
                    { validator: checkCode, trigger: "blur" }
                ],
                roleCategory: [{ required: true, message: "请选择关键状态", trigger: "change" }]
            },
            tagTree: []
        }
    },
    created() {
        this.init()
    },
    // 方法
    methods: {
        handleClose() {
            this.$emit("success")
        },
        handlSave() {
            this.sizeForm.name = this.sizeForm.name.trim()
            let sizeForm = { ...this.sizeForm }
            sizeForm.roleBusiness = String(sizeForm.roleBusiness || "") // 业务域格式
            let api = ""
            if (this.type === "create") {
                api = this.createType === "role" ? "addRole" : "roleApply"
            }
            if (this.type === "update") {
                api = this.createType === "role" ? "editRole" : "roleApply"
            }
            if (this.createType === "apply") {
                sizeForm = {
                    roleSaveVo: sizeForm,
                    operate: this.formData && this.formData.id ? "20" : "10"
                }
            }

            this.$refs.sizeForm.validate(valid => {
                if (!valid) {
                    return
                }

                roleinfoManageApi[api](sizeForm)
                    .then(res => {
                        this.$message.success("保存成功")
                        this.$emit("success", true)
                    })
                    .catch(error => {
                        this.$message.error(error)
                    })
            })
        },
        // 改变标签域
        handleTagTreeChange(codes, nodes) {
            let tags = []
            for (let i = 0; i < nodes.length; i++) {
                const item = nodes[i]
                if (!item.parent) {
                    tags.push(item.code)
                }
            }
            this.sizeForm.roleBusiness = tags.join(",")
        },
        // 获取标签树
        getTagTree() {
            return new Promise(resolve => {
                getBusinessTagTree().then(res => {
                    const tree = res.data.content.map(item => {
                        let disabled = true
                        if (item.parent && item.child) {
                            disabled = false
                        }
                        return {
                            ...item,
                            disabled
                        }
                    })
                    resolve(tree)
                })
            })
        },
        async init() {
            this.getTagTree()
            // 关联应用id
            this.$set(this.sizeForm, "appId", this.appId)
            if (this.type == "create") {
                // 业务域默认
                // that.changeUrl("01");
            } else {
                this.sizeForm = this.formData
                // const { policeCategory } = that.sizeForm;
                // const { roleBusiness } = that.sizeForm;
                // if (roleBusiness) {
                //     that.changeUrl(policeCategory);
                //     that.$set(that.sizeForm, "roleBusiness", roleBusiness.split(","));
                // } else {
                //     if (policeCategory) {
                //         that.changeUrl(policeCategory);
                //     } else {
                //         that.changeUrl("01");
                //     }
                // }
            }
        }
    }
}
</script>

<style scoped></style>