纷享PWC代码学习

红雪
502 阅读1分钟

PWC课程介绍

image.png

image.png

PWC自定义组件

自定义组件介绍

image.png

image.png

image.png

image.png

image.png

代码:

<template>
    <div>
      <button @click="_onclick">点我+1</button>
      <div class="test">{{ num }}</div>
    </div>
</template>

<script>
    export default {
        data() {
          return {
            num: 0
          }
        },
        methods: {
          _onclick() {
            console.log('点击了按钮');
            this.num++;
          }
        }
    }
</script>

<style>
    .test {
      font-size: 24px;
      color: blue
    }
</style>

console控制台直接调试自定义组件:

FxUI.userDefine.openCustomComponent('component_FKRmE__c')

UI组件

image.png

image.png

复用的业务组件

image.png

image.png

image.png

image.png

image.png

代码:

<template>
    <div>
        <fx-select
            ref="el1"
            v-model="value"
            :options="options"
            @change="change"
        ></fx-select>
        <ObjectList :apiName="value" v-if="value" :key="value"></ObjectList>
    </div>
</template>

<script>
    export default {
        components: {
			ObjectList: FxUI.component.get('ObjectList')
		},
        data() {
            return {
                value: '',
                options: [{
                    value: 'AccountObj',
                    label: '客户',
                }, {
                    value: 'ContactObj',
                    label: '联系人',
                }]
            }
        },
        methods: {
            change() {
                console.log("选择了对象", arguments);
            }
        }
    }
</script>

<style lang="less" scoped></style>

对象详情配置自定义组件

image.png

image.png

image.png

image.png

image.png

image.png

自定义APL代码的命名空间：选择自定义控制器

image.png

即时调试自定义APL代码:

FxUI.userDefine.call_controller('get_data__c').then(res => console.log(res))

image.png

APL自定义控制器代码:

/**
 * @author 杨宇翔Barry
 * @codeName 获取列表数据
 * @description 这是一个接口，用来获取自定义列表数据
 * @createTime 2023-05-25
 */
return [[
    date: '2023-01-01',
    name: '张三',
    age: 22
], [
    date: '2023-01-22',
    name: '李四',
    age: 33
], [
    date: '2023-01-23',
    name: '王五',
    age: 44
]]

PWC代码:

<template>
    <fx-table
      :data="tableData"
      style="width: 100%">
      <fx-table-column
        prop="date"
        label="日期"
        width="180">
      </fx-table-column>
      <fx-table-column
        prop="name"
        label="姓名"
        width="180">
      </fx-table-column>
      <fx-table-column
        prop="address"
        label="地址">
      </fx-table-column>
    </fx-table>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金\n沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        created() {
            FxUI.userDefine.call_controller('get_data__c').then(res => {
                if (res.Result.StatusCode === 0) {
                    this.tableData = res.Value.functionResult;
                }
            })
        }
    }
</script>
<style lang="less" scoped>

</style>

UI按钮打开自定义组件

image.png

image.png

image.png

image.png

image.png

image.png

PWC代码:

<template>
    <div>
        <fx-input
             placeholder="请输入内容"
             v-model="input"
             width="600px">
        </fx-input>
        <fx-button @click="_onClick">按钮</fx-button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                input: ''
            }
        },
        methods: {
            _onClick() {
                alert("发生了点击");
                this.$context.handleBackfill({
                    masterData: {
                        name: this.input
                    }
                });
            }
        }
    }
</script>
<style lang="less" scoped></style>

UI按钮打开自定义组件:

image.png

APL代码:

/**
 * @author 杨宇翔Barry
 * @codeName 打开自定义组件
 * @description 打开自定义组件
 * @createTime 2023-05-25
 */
UIAction openDialogAction = OpenDialogAction.build{
  type = "ShowCenter"           //显示模式，目前支持 「ShowCenter 居中弹框」和「FullScreen 全屏显示」两种模式
  title = "数据回填"               //标题
  width = 800                   //宽度，仅在 ShowCenter 模式下有效
  maxHeight = 123               //最大高度，仅在 ShowCenter 模式下有效
      
  userData = ["key":"value"]    //返回的数据,这部分是用户的数据,数据结构是一个map
  component {                   //自定义组件
    apiName = "component_cR6TX__c"   //自定义组件的apiName
  }
}
    
return openDialogAction

PWC自定义插件

自定义插件介绍

image.png

image.png

image.png

image.png

image.png

image.png

// es6模块化的相关知识
export default {
    rendered() {
        alert('hello fxiaoke');
    }
}

image.png

对象详情遇上自定义插件

image.png

image.png

image.png

image.png

image.png

export default {
    // 子组件插件注册
    componentPlugns() {
        return {
            'form_component': { // 详情页布局中子组件的apiname
                entry(context, field) {
                    return field.api_name  === 'name' // 匹配想要注册插件的字段(利用其apiname)
                },
                render(context, field, val) { // context: 字段的上下文环境, field: 字段描述信息, value: 字段的值
                    console.log(field)
                    console.log(val)
                    return '<span style="font-size: 25px; color: red;">'+val+'</span>'; // 修改匹配到的子组件的的内容
                }
            }
        }
    }
}

对象表单遇上自定义插件

image.png

image.png

image.png

image.png

image.png

image.png

export default {
    entry(context, field) {
        return field.api_name === 'data_own_department';
    },
    render(context, field, value) {
        return '<div>hello world</div>';
    },
    getTitle() {
        return 'pwcform';
    },
    // 自定义从对象批量按钮(只支持添加按钮，不支持修改、删除按钮)
    getMdBatchButtons(context, detailObjectApiName) {
        return {
            add: [{
                label: '新增批量按钮',
                action: 'test_handle_4',
                callBack() {
                    alert(arguments, '新增批量按钮')
                }
            }]
        }
    }
}

对象列表遇上自定义插件(有案例)

image.png

image.png

image.png

// 插件入口文件
export default {
    entry: function(context, field) {
        console.log('当前字段信息:', field)
        return field.api_name === 'field_aNf7b__c'
    },
    render: function(context, field, value) {
        if(value < 50) {
            return `<span style="color: green;">${value}</span>` // 注意：这个不是单引号!
        }else if(value >= 50 && value < 60) {
            return `<span style="color: yellow;">${value}</span>`
        }else {
            return `<span style="color: red;">${value}</span>`
        }
    }
}

效果:

image.png

API介绍与使用技巧

内置API简介

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

API使用技巧

image.png

image.png

FxUI.objectUIAction.addObject(objectApiName, options) (有案例)

FxUI.objectUIAction.addObject('AccountObj', {
    recordType: 'default__c',
    showType: 'full',
    objectData: {
        email: '12345@qq.com'
    }
})

image.png

FxUI.userDefine.call_controller(apiName, parameters) (有案例)

image.png

/**
 * @author 杨宇翔Barry
 * @codeName test_yyx
 * @description test_yyx
 * @createTime 2023-05-26
 */
String rltStr = name + "的部门是: " + department
return ["result": rltStr]

image.png

image.png

FxUI.userDefine.call_controller('test__c', [{
    type: 'String',
    name: 'name',
    value: '杨宇翔'
}, {
    type: 'String',
    name: 'department',
    value: '技术'
}]).then(res => {
    console.log('PWC返回的结果是:', res)
})

FxUI.userDefine.openCustomComponent(apiName, compData, dialogOpts) (有案例)

image.png

<template>
    <div id="chart-box"></div>
</template>
<script>
    console.log('coming')
    export default {
        props: ['dataList'], //props: 用来接收数据
        mounted() {
            console.log('传入的data', this.dataList);
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            };
            FxUI.libs.require('echarts').then(echarts => {
                let myChart = echarts.init(document.getElementById('chart-box'))
                myChart.setOption(option)
            })
        }
    }
</script>


FxUI.userDefine.openCustomComponent('test5__c', {dataList: [1, 2, 3, 4]}, {
    width: '1200'
})

image.png

image.png

FxUI.appApi.getCrossAppUrl(hash, appId, upEa, opts)

image.png

PWC开发与调试

五分钟学会排查问题

avatar
文章
阅读
粉丝