auth-web/src/pages/data-auth-module/auth-object-manage/object-prop-manage/index.vue

<!--
 * @Author: Liugh
 * @Date: 2021-05-17 14:54:08
 * @LastEditTime: 2021-05-20 10:53:13
 * @LastEditors: Do not edit
 * @FilePath: \auth-web\src\pages\data-auth-module\auth-object-manage\object-prop-manage\index.vue
 * @Description: 
-->

<template>
    <main class="subject-property">
        <dg-row gutter="1rem">
            <dg-col :span="5">
                <tree ref="tree" title="客体属性类" type="OBJ" @submitNodeOperate="getNodeOperate" />
            </dg-col>
            <!-- 属性详情 -->
            <dg-col :span="6">
                <prop-detail
                    :parentNode="parentNode"
                    type="OBJ"
                    :key="key"
                    :operateType="operateType"
                    @savePropSuccess="refreshTree"
                ></prop-detail>
            </dg-col>
            <dg-col :span="13">
                <!-- TODO 根据点击属性类型判断显示什么表格 -->
                <component
                    :is="componentValue"
                    :parentNode="parentNode"
                    :operateType="operateType"
                    :key="key"
                ></component>
            </dg-col>
        </dg-row>
    </main>
</template>

<script>
import Tree from "../../auth-subject-manage/subject-prop-manage/prop-tree";
import propDetail from "../../auth-subject-manage/subject-prop-manage/prop-detail";
import functionList from "./function-list";
import serviceList from "./service-list";
import applicationList from "./application-list";
import dataSourceList from "./data-source-list";
export default {
    name: "subject-property", // 组件名称
    props: {
        // 接收父组件的数据
    },
    data() {
        // 组件内部参数
        return {
            // 参数名称及默认值
            componentType: {
                FUN: "function-list",
                SER: "service-list",
                APP: "application-list",
                DATA: "data-source-list"
            },
            componentValue: "application-list",
            parentNode: {},
            key: 0,
            // 操作类型，新增属性还是编辑
            operateType: ""
        };
    },
    computed: {}, // 计算属性
    watch: {}, // 侦听器（扩展的计算属性）
    components: { Tree, functionList, serviceList, applicationList, propDetail, dataSourceList }, // 注册局部组件
    methods: {
        /**
         * 获取树操作
         */
        getNodeOperate(data) {
            const { attrBelongType, operateType } = data;
            this.operateType = operateType;
            this.parentNode = data;
            this.componentValue = this.componentType[attrBelongType];
            this.key++;
        },
        /**
         * 刷新属性树
         */
        refreshTree() {
            this.$refs.tree.init();
        },
        /**
         * @description: 表单查询
         */
        handleSearch() {}
    },
    created() {} // 组件创建完成后
};
</script>
<style lang="scss" scoped>
@import "../../auth-subject-manage/index.scss";
</style>