APP 门户扩展组件

APP 门户扩展组件

小组件扩展，是在七巧板官方默认组件外，扩展一些通用的组件。

config.properties 中 id 的定义：

1. 0 - 9999 以下是官方默认的
2. 10000 - 29999 是平台原生扩展的组件
3. 30000 - 59999 是第三方扩展的组件

扩展场景

初步设想的方案，是将小组件 id 扩展放到运营平台和工作台去维护，有一下几种情况：

1. 移动端、后台均为公有

   • 统一在运营平台修改更新即可

2. 移动端为私有，后台为公有

   • 可能会存在兼容问题，后台新增的扩展组件 id，移动端不能识别；
   • 第三方组件 id 定义区间需要在 30000 - 59999 之间，小于30000 会被平台的扩展组件覆盖；
   • 官方默认、平台 的组件 id 将在运营平台维护；
   • 第三方组件定义好后，到开放平台 > 开发者中心中维护第三方组件 id ；
   • 更新 Pai 工具时，会将 官方默认、平台、第三方 的组件数据更新到开发人员本地；
   • 然后使用 Pai 命令，将第三方 .XML 编译成 .out 文件；
   • 然后使用 Pai 命令，发布第三方 .out 文件到自定义套件中，上架套件后，即可在工作台看到发布的组件。

3. 移动端为公有，后台为私有

   • 可能会需要移动端适配多版本后台。OA 7.0 就这样的模式，过多的兼容，导致代码维护繁琐。

- 当公有版移动端要扩展组件时，需要注意组件 id 需要定义在 10000 - 29999 之间，防止覆盖其它版本定义的组件。

4. 移动端、后台均为私有

   • 统一在运营平台修改更新即可

扩展的小组件

ChartView

扩展图表组件，主要是提供用户自定义图表，更加灵活的开发工作台。

chartList -> list

<ChartView
    layoutHeight="120"
    layoutWidth="200"
    title="图表"
    chartHeight="120"
    chartType="line"
    chartList="${chartPieData}"/>

{
 "chartPieData":"[{\"name\": \"待跟进\",\"numValue\": \"16\",\"color\": \"#54EB7E\"},{\"name\": \"跟进中\",\"numValue\": \"50\",\"color\": \"#15A6FD\"},{\"name\": \"已签约\",\"numValue\": \"34\",\"color\": \"#FDCC17\"}]",
}

CarouselView

扩展轮播小组件，可实现更多组合效果

<CarouselView
    layoutHeight="160"
    layoutWidth="match_parent"
    autoScroll="5000"
    isInside="true"
    carouseHeight="160"
    imgList="${carouselData}"/>

{
"carouselData":"[\"https://image.huanghepiao.com/d/file/20201003/30c1c8847ac11fff3329aac30a9f7b99.jpg\",\"https://img1.qunarzz.com/travel/d6/1701/c3/ad1a5ce13c3e2bb5.jpg\",\"https://p9-xg.byteimg.com/img/tos-cn-p-0000/5d16c2cae5c047bdaa8ca8a01389e8e8~tplv-crop-center:422:236.jpg\",\"https://256vimg1.xpghost.cn/uploads/2018/1225/20181225030438610.jpg\",\"https://images.ladymetro.com/file/youjia/mingxing/2019-07-26/5158bd8b960f991542cfa9922af89ead.jpg\"]"
}

PiImageView

扩展原生图片，支持 Gif 动图、本地图片、网络图片，所有 .out 中的图片显示，均使用此组件，七巧板推荐的图片组件，将不再支持。

imageData

<PiImageView
    layoutGravity="v_center"
    layoutHeight="12"
    layoutWidth="12"
    layoutMarginRight="16"
    imgRadius="2"
    isLocal="true"
    imgSrc="${imgSwitch}"/>

{
"imgSwitch":"core_arrow_right_blue",
}

LottieView

扩展原生 Lottie 动图支持本地 Lottie、网络 Lottie 图片。

<LottieView
    layoutHeight="60"
    layoutWidth="60"
    layoutGravity="v_center"
    isLocal="false"
    lottieSrc="${lottieData1}"/>

{
 "lottieData": "https://gitee.com/WorkTool/WorkImage/raw/master/gif/34847-dgah-moped-animation.json"
}

TabView

导航列表

数据

var showBanner: Boolean? = true,
var paiTabStyle: PaiStyle? = null,
var paiStyle: PaiStyle? = null,
var approvalHeight: Int? = 0,
var tabList: MutableList<TabItemVo?>? = null,
var list1: MutableList<FloorItemVo?>? = null,
var list2: MutableList<FloorItemVo?>? = null,
var list3: MutableList<FloorItemVo?>? = null,
var list4: MutableList<FloorItemVo?>? = null

子项

FloorItemVo(
        var id: String? = "",
        var title: String? = "",
        var content: String? = "",
        var dateTime: String? = "",
        var tab: String? = "",
        var tag: String? = "",
        var icon: String? = "",
        var url: String? = "",
        var itemCode: String? = "",
        var appId: String? = "",
        var button: String? = "",
        var extend: String? = ""
)

样式

PaiStyle

 PaiStyle(
        var title: TextStyle? = null,
        var tabText: TextStyle? = null,
        var subText: TextStyle? = null,
        var tagText: TextStyle? = null,
        var button: ButtonStyle? = null,
        var image: ImageStyle? = null,
        var background: String? = "",
        var round: String? = "",
        var margin: String? = "",
        var padding: String? = "",
        var height: String? = "",
        var widget: String? = ""
) 

TextStyle

TextStyle(
    var color: String? = "",
    var selectColor: String? = "",
    var size: String? = "",
    var body: String? = "",
    var rows: String? = "",
    var deleteLine: String? = "")

ButtonStyle

ButtonStyle(
    var text: TextStyle? =null,
    var background: String? = "",
    var selectBackground: String? = "",
    var round: String? = "")

ImageStyle

ImageStyle(
        var height: String? = "",
        var widget: String? = "",
        var round: String? = "") 

凌云扩展本地资源

image

Lottie