普元EOS-微前端的base基座介绍

news2024/9/25 21:10:09

1 前言

微前端开发的时候要使用base基座。

这个base基座到底是什么？

base基座能提供哪些功能？

本文将进行简单的介绍。

2 高开前端引用base基座

在高开页面引入base基座的语法如下：

<script>

import { BaseVue, AjaxUtil } from 'base/lib'

export default {
    data() {
        return {
            
        };
    },
    methods: {
        
    },
    
};  
</script>

3 base基座有哪些类库

3.1 基本BaseVue

引用语法：

import { BaseVue } from 'base/lib'

3.2 Ajax类库

引入语法

import { AjaxUtil } from 'base/lib'

使用语法：

const ajax1 = AjaxUtil.headers(AjaxUtil.buildHeaders()).ajax;
ajax1.get('/api2/devops/pcm/dict/dict-entrys',
    { params: { 'dictTypeId': 'DPS_PJM_PROJECT_TYPE' } })
    .then(resp1 => {
        console.log(resp1.data);

    })
    .catch(err => {
        this.resp1Info = 'Api请求' + '出现了异常，请联系管理员解决。';
    });
}

3.3 默认页面组件

在页面使用若干可视化组件，默认可视化组件无须配置，可直接使用。

本节列出所有标签的清单，至于说明和用例不会写很清楚，毕竟这些组件的使用例子不是一个表格能写清楚的，以后我会逐渐单独写一些文章来描述这些标签。

标签名	说明	用例
Dict
DownLoadFile	下载文件，注意只能是下载二进制的文件，并非下载任意Url资源，比如页面、css资源、js文件、图片等，是无法下载的
FloatingPane
IconColorPicker	颜色选择，这个控件感觉不完善，只能固定选择几个颜色。
NoData
PmDialog

3.4 components组件

这些组件需要应用才可以使用。

<template>
    <div class="main-div">
        <!-- 查询区域 -->
        <div class="div-ke1">
            <div class="search-bar">
                <Icon :value="value1" />
                <qrcode value="abcde"/>
            </div>
        </div>
    </div>
</template>

<script>
import {Icon,PmSearch } from 'base/components'
export default {
    name: 'index',
    components:{Icon, PmSearch },
    data() {

    }
}

可以看到需要导入才可以使用。

4 高开页面使用基座组件

基座提供了若干可视化组件

4.1 下拉选择字典

在高开页面使用下面的代码，即可通过下拉选择字典

<template>
    <div class="main-div">

        <div class="div-ke1">
           <Dict  v-model="sheng" dictTypeCode="gender" />
               
        </div>
    </div>
</template>

使用 Dict标签并不需要特别的设置。

本例子中 dictTypeCode设置为 gender，即性别，对应的是AFCenter中的性别字典。

最终的效果如下：

具体的参数设置如下。

属性	类型	说明
v-model	String	绑定的值
dictTypeCode	String	字典类型编号
multiple	Boolean（默认false）	是否多选
cascade	Boolean（默认false）	是否级联
parentCode	String	父字典项编号
separator	String(默认 ‘ ，’)	多选时分隔符