Source/UBCS-WEB/src/views/modeling/LinkType.vue

@@ -2,21 +2,17 @@
    <el-container>
        <!-- 顶端按钮 -->
        <el-header class="businessHeader" style="height: 40px;">
            <el-button-group>
                <el-button type="primary" @click="linkTypeAdd" size="small">
                    <i class="el-icon-plus"></i>&nbsp;
                    新增
                </el-button>
                <el-button type="primary" @click="linkTypeEdit" size="small">
                    <i class="el-icon-edit"></i>&nbsp;
                    修改
                </el-button>
                <el-button type="primary" @click="selectFromTable" size="small">
                    <i class="el-icon-thumb"></i>&nbsp;
                    从已有中获取
                </el-button>
            </el-button-group>
        </el-header>
                <el-button-group>
                    <el-button type="primary" @click="linkTypeAdd" size="small">
                        <i class="el-icon-plus"></i>&nbsp;
                        新增
                    </el-button>
                    <el-button type="primary" @click="linkTypeEdit" size="small">
                        <i class="el-icon-edit"></i>&nbsp;
                        修改
                    </el-button>
                </el-button-group>
            </el-header>
        <!-- 侧边栏树 -->
        <el-container>
            <el-aside width="240px">
@@ -38,34 +34,34 @@
                    <basic-container>
                        <p style="margin-top: 10px;font-weight: 570;font-size: 19px">基本信息</p>
                        <el-descriptions class="margin-top" :column="2" size="medium" border>
                            <el-descriptions-item labelStyle="text-align:center;width:120px"
                                contentStyle="width:240px;text-align:center;word-break;break-all;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-finished"></i>
                                    <i :class="icons.id"></i>
                                    英文名称
                                </template>
                                {{ obj.id }}
                            </el-descriptions-item>
                            <el-descriptions-item labelStyle="text-align:center;width:120px"
                                contentStyle="width:240px;text-align:center;word-break;break-all;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-info"></i>
                                    <i :class="icons.name"></i>
                                    中文名称
                                </template>
                                {{ obj.name }}
                            </el-descriptions-item>
                            <el-descriptions-item labelStyle="text-align:center;width:120px"
                                contentStyle="width:240px;text-align:center;word-break;break-all;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-date"></i>
                                    <i :class="icons.tableName"></i>
                                    数据库表名
                                </template>
                                {{ obj.tableName }}
                            </el-descriptions-item>
                            <el-descriptions-item labelStyle="text-align:center;width:120px"
                                contentStyle="width:240px;text-align:center;word-break;break-all;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-folder-opened"></i>
                                    <i :class="icons.domain"></i>
                                    所属领域
                                </template>
                                <el-tag size="small">
@@ -74,71 +70,75 @@
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-descriptions class="margin-top" direction="vertical" :column="2" border>
                            <el-descriptions-item labelStyle="text-align:center;width:120px"
                                contentStyle="width:240px;text-align:center;word-break;break-all;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-sort-down"></i>
                                    <i :class="icons.from"></i>
                                    From端类型
                                </template>
                                <span v-for="item in obj.fromBtmTypes" style="margin-left:2px;">
                                    <el-tag size="small" effect="plain" style="width:130px;margin-top: 2px;">
                                    <el-tag size="small" effect="plain" style="margin-top: 2px;">
                                        {{ item.id + '（' + item.name + '）' }}
                                    </el-tag>
                                </span>
                            </el-descriptions-item>
                            <el-descriptions-item labelStyle="text-align:center;width:120px"
                                contentStyle="width:240px;text-align:center;word-break;break-all;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-sort-up"></i>
                                    <i :class="icons.to"></i>
                                    To段类型
                                </template>
                                <span v-for="item in obj.toBtmTypes" style="height:26px;width:140px;margin-left:2px">
                                    <el-tag size="small" effect="plain" style="width:130px;margin-top: 2px;">
                                <span v-for="item in obj.toBtmTypes" style="margin-left:2px">
                                    <el-tag size="small" effect="plain" style="margin-top: 2px;">
                                        {{ item.id + '（' + item.name + '）' }}
                                    </el-tag>
                                </span>
                            </el-descriptions-item>
                        </el-descriptions>

                        <el-descriptions class="margin-top" :column="2" size="medium" border>
                            <el-descriptions-item labelStyle="text-align:center;width:120px"
                                contentStyle="width:240px;text-align:center;word-break;break-all;">
                       <el-descriptions class="margin-top" :column="2" size="medium" border>
                        <!-- 
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-info"></i>
                                    <i :class="icons.main"></i>
                                    主类型
                                </template>
                                {{ obj.fromBtmTypeName }}
                            </el-descriptions-item>
                            <el-descriptions-item labelStyle="text-align:center;width:120px"
                                contentStyle="width:240px;text-align:center;word-break;break-all;">
                            <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
                                :contentStyle="descriptionOption.contentStyle">
                                <template slot="label">
                                    <i class="el-icon-info"></i>
                                    <i :class="icons.main"></i>
                                    主类型
                                </template>
                                {{ obj.toBtmTypeName }}
                            </el-descriptions-item>
                            -->
                            <el-descriptions-item span='2' labelStyle="text-align:center;width:120px">
                                <template slot="label">
                                    <i class="el-icon-chat-line-square"></i>
                                    <i :class="icons.desc"></i>
                                    描述
                                </template>
                                {{ obj.description }}
                            </el-descriptions-item>
                        </el-descriptions>
                        </el-descriptions> 
                    </basic-container>
                    <!-- 属性列表-->
                    <basic-container>
                        <p style="margin-top: 10px;font-weight: 570;font-size: 19px">属性列表</p>
                        <avue-crud class="attributeCrud" v-model="obj" :data="obj.attributes" :option="loadOption">
                            <template slot="attrDataType" slot-scope="{row}">
                                <el-tag>{{ row.attrDataType }}</el-tag>
                            <template slot="attrDataTypeText" slot-scope="{row}">
                                <el-tag>{{ row.attrDataTypeText }}</el-tag>
                            </template>
                        </avue-crud>
                    </basic-container>
                </el-main>
            </el-container>
        </el-container>

        <link-type-add ref="linkAdd" :linkType="addOption.linkType" :domainOption="domainOptions" :icons="icons"
            @refreshTable="initTreeOnLoad">
        </link-type-add>

    </el-container>
</template>
@@ -155,10 +155,26 @@
    name: "LinkType",
    data() {
        return {
            treeData: [
                { id: "1", name: "2", label: "label" },
                { id: "a", name: "b", label: "c" }
            ],
            addOption: {
                linkType: {},
            },
            domain: null,
            domainOptions: [],
            icons: {
                id: 'el-icon-finished',
                name: 'el-icon-tickets',
                tableName: 'el-icon-date',
                domain: 'el-icon-folder-opened',
                from: 'el-icon-sort-down',
                to: 'el-icon-sort-up',
                main: 'el-icon-warning-outline',
                desc: 'el-icon-chat-line-square'
            },
            treeData: [],
            descriptionOption: {
                labelStyle: 'text-align:center;width:120px',
                contentStyle: 'width:240px;text-align:center;word-break;break-all;'
            },
            loadOption: {
                border: true,
                height: 360,
@@ -180,7 +196,7 @@
                    },
                    {
                        label: '类型',
                        prop: 'attrDataType',
                        prop: 'attrDataTypeText',
                        align: 'center',
                        slot: true
                    },
@@ -196,27 +212,14 @@
                    }
                ]
            },
            obj: {
                id: 'linkType',
                name: '链接类型',
                tableName: 'PLLT_OMD_LINKTYPE',
                domain: 'ubcs-omd',
                domainText: '对象建模',
                fromBtmTypes: [
                    { id: 'btm', name: '业务类型' },
                    { id: 'btm2', name: '业务类型2' }
                ],
                toBtmTypes: [{ id: 'btm', name: '业务类型' }, { id: 'btm2', name: '业务类型2' }],
                fromBtmTypeName: '',
                toBtmTypeName: '',
            },
            obj: {},
            treeOption: {
                defaultExpandAll: true,
                title: '链接类型树',
                addBtn: false,
                props: {
                    labelText: '',
                    label: 'name',
                    label: 'label',
                    value: 'oid',
                    children: 'childList',
                }
@@ -225,31 +228,42 @@
    },
    created() {
        this.initTreeOnLoad();
        // this.initDomainOption();
        this.initDomainOption();
    },

    methods: {
        // 树点击
        nodeClick(data) {
            console.log(data);
            getDetail(data.oid).then(res => {
                this.obj = res.data.data;
            })
        },
        // 添加按钮点击事件
        linkTypeAdd() {

            this.$refs.linkAdd.showSubmitDialog = true;
        },
        // 编辑按钮点击事件
        linkTypeEdit() {

            this.addOption.linkType = this.obj;
            this.$refs.linkAdd.linkType = this.addOption.linkType;
            this.$refs.linkAdd.showSubmitDialog = true;
        },
        // 从已有中获取按钮点击事件
        selectFromTable() {

        },
        // 加载服务树
        initTreeOnLoad() {
            initTree().then(res => {
                this.treeData = res.data.data;
            });
        }
        },
        // 加载服务下拉框
        initDomainOption() {
            getDomain().then(res => {
                this.domainOptions = res.data.data;
            })
        },

    }
}