基础业务组件使用

业务组件使用

1.0 介绍

对接要求：

1. 接入小程序组件库：@flyriselink/pai-mp-ui;
2. 使用uview组件库：uview-ui": "^2.0.14;
3. 引入支付组件库：@flyriselink/pai-mp-widget": "^1.0.1。

2.0 业务组件

2.1 引入组件库

// package.json
"@flyriselink/pai-mp-widget": "^1.0.1"

2.2 初始化

存在两类组件：

1. pai-widget ：基础小组件，包含园区、消息、搜索；
2. pai-address：主要是企业切换、组织结构、人员邀请。

//pages.js中初始化
"easycom": {
        "autoscan": true,
        "custom": {
            "^pai-widget-(.*)": "@flyriselink/pai-mp-widget/widget/pai-widget-$1/pai-widget-$1.vue",
            "^pai-address-(.*)": "@flyriselink/pai-mp-widget/widget/pai-address-$1/pai-address-$1.vue"
        }
    }

2.3 vue.config.js

//根目录/vue.config.js
module.exports = {
    transpileDependencies: ['luch-request', '@flyriselink/pai-mp-ui', '@flyriselink/pai-mp-widget'],
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "~@/uni.scss";`
            }
        }
    }
}

2.4 引入界面

以组织结构为示例：

//分包的情况下：pages_view/view/address/tree
<template>
    <pai-address-tree></pai-address-tree>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad(e) {
            this.$nextTick(() => {
                this.$refs.tree.initData(e)
            })
        }
    }
</script>

3.0 address组件

3.1 选人：pai-address-tree

参数

路由

代码

//分包的情况下：pages_view/view/address/tree
<template>
    <pai-address-tree ref="tree" :router="router" :router2="router2" :router3="router3" :router4="router4"
        :isPick="true" :isPickDept="false" :isPickPost="false" :isMulti="true" @confirm="confirm">
  </pai-address-tree>
</template>

<script>
    export default {
        data() {
            return {
                router: "/pages_view/view/address/tree-multi", //多选界面
                router2: "/pages_view/view/address/index", //用户详情
                router3: "/pages_view/view/address/pick-post", //岗位选择
                router4: "/pages_view/view/address/candidate" //候选人
            }
        },
        onLoad(e) {
            this.$nextTick(() => {
                this.$refs.tree.initData(e)
            })
        },
        methods: {
            confirm(data) {
                console.log("--result:", data)
            }
        }

    }
</script>

//多选界面：pages_view/view/address/tree-multi
<template>
    <pai-address-treemulti ref="treeMulti"></pai-address-treemulti>
</template>

<script>
    export default {
        onLoad(e) {
            this.$nextTick(() => {
                this.$refs.treeMulti.initData(e)
            })
        }
    }
</script>

3.2 通讯录：pai-address-home

路由

代码

//分包的情况下：pages_view/view/address/home
<template>
    <pai-address-home ref="home" :router="router" :router2="router2" :router3="router3"
        :router4="router4" :router5="router5"></pai-address-home>
</template>

<script>
    export default {
        data() {
            return {
                router: "/pages_view/view/user/index", //用户信息
                router2: "/pages_view/view/address/entList", //切换企业
                router3: "/pages_view/view/address/tree", //组织机构
                router4: "/pages_view/view/address/invite", //邀请人员
                router5: "/pages_view/view/address/inviteReview" //人员审核
            }
        },
        onShow() {
            this.$nextTick(() => {
                this.$refs.home.initData()
            })
        }
    }
</script>

//分包的情况下：pages_view/view/user/index
<template>
    <pai-widget-user ref="user"></pai-widget-user>
</template>

<script>
    export default {
        onLoad(e) {
            this.$nextTick(() => {
                this.$refs.user.initData(e)
            })
        },
        onUnLoad() {
            this.$refs.user.unLoad()
        }
    }
</script>

3.3 企业切换：pai-address-entlist

参数

路由

代码

//分包的情况下：pages_view/view/address/entList
<template>
    <pai-address-entlist ref="entList" :isPick="true" :hideInvite="true" :router="router" :router2="router2"
        @confirm="confirm"></pai-address-entlist>
</template>

<script>
    export default {
        data() {
            return {
                result: {},
                router: "/pages_view/view/address/invite",
                router2: "/pages_view/view/work/index"
            }
        },
        onLoad(e) {
            this.result = e
        },
        onShow() {
            this.$nextTick(() => {
                this.$refs.entList.initData(this.result)ß
            })
        },
        methods: {
            confirm(item) {
                console.log("-->>>item:", item)
            }
        }
    }
</script>

//分包的情况下：pages_view/view/address/invite
<template>
    <pai-address-invite ref="invite"></pai-address-invite>
</template>

<script>
    export default {
        onLoad() {
            this.$nextTick(() => {
                this.$refs.invite.initData()
            })
        }
    }
</script>

4.0 widget组件

4.1 园区切换：pai-widget-park

参数

代码

//分包的情况下：pages_view/view/park/index
<template>
    <view>
        <pai-widget-park ref="pMpPark" :isPick="true" @confirm="confirm"></pai-widget-park>
    </view>
</template>

<script>
    export default {
        onPullDownRefresh() {
            this.$refs.pMpPark.onRefresh()
        },
        onReachBottom() {
            this.$refs.pMpPark.onLoadMore()
        },
        onLoad() {
            uni.$on("switch_park", (data) => { //园区切换成功
                this.onRefreshMain()
            })
        },
        onUnload() {
            uni.$off("switch_park", null)
        },
        methods: {
            onRefreshMain() {
                console.log("-->>> 切换成功")
                //切换园区回调成功后，刷新主界面
                uni.$emit("refresh_main", null)
            },
            confirm(item){
                console.log("--->>item:",item)
            }
        }
    }
</script>

<style>

</style>

4.2 登录：pai-widget-login

参数

代码

//分包的情况下：pages_view/view/login/index
<template>
    <pai-widget-login ref="login" :router="router" :router2="router2" :router3="router3"></pai-widget-login>
</template>
<script>
    // import Login from '@/pages_view/model/pai-mp-view/widget/login'
    export default {
        data() {
            return {
                router: "/pages_view/view/webview/index",//隐私协议
                router2: "/pages/main/index",//登录成功
                router3: "", //登录失败
            }
        },
        onLoad() {
            this.$nextTick(() => {
                this.$refs.login.initData()
            })
        }
    }
</script>

4.3 应用列表：pai-widget-micro

参数

代码

//分包的情况下：pages_view/view/micro/index
<template>
    <pai-widget-micro ref="microApp" :router="router"></pai-widget-micro>
</template>

<script>
    export default {
        data() {
            return {
                router: '/pages_view/view/webview/index'
            }
        },
        onLoad() {
            this.$nextTick(() => {
                this.$refs.microApp.initData()
            })
        }
    }
</script>

4.4 测试：pai-widget-testing

参数

代码

//分包的情况下：pages/index/index
<template>
    <view class="container">
        <image class="logo" src="/static/pi_mian_logo.png" />
        <pai-widget-testing></pai-widget-testing>
    </view>
</template>

<style>

    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .logo {
        height: 120rpx;
        width: 120rpx;
        margin-top: 32rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24rpx;
    }
</style>