医美小程序实战教程-员工信息编辑

Posted 2021-12-07 低代码布道师

我们上一节完成了员工信息添加，本节我们实现一下员工信息修改。员工修改的思路是先获取员工信息的主键，然后根据主键加载员工的信息并且填充到修改页面。

创建低代码方法

进入低码控制台，选择更多，点击低代码编辑器

创建一个tableOperation方法

输入如下代码

import funcs from './funcs';
/*
* 可通过 $page.handler.xxx 访问这里定义的方法
* 注意：该方法仅在所属的页面有效
* 如果需要 async-await，请修改成 export default async function() {}
*/

export default async function({event, data}) {
    const { type } = data.target;
    let _id,
        ret,
        prefix = '';

    const textMap = {
        del: '删除',
        onduty: '在岗',
        rest: '休假',
    };
    switch(type) {
        case 'page':
            const { pageIndex, pageSize } = event.detail.query;
            funcs().renderEmployeeList.bind(this)({
                pageIndex,
                pageSize
            });
            $page.dataset.state.tableData.pageIndex = pageIndex;
            $page.dataset.state.tableData.pageSize = pageSize;
        break;
        case 'edit':
             ({ _id } = data.target);
             app.navigateTo({
                 pageId: 'employee_create',
                 params: {
                     _id
                 }
             });
        break;
        case 'del':
        case 'onduty':
        case 'rest':
            ({ _id } = data.target);
            if(type == 'del') {
                ret = await funcs().delEmployee.bind(this)(_id);
            }
            if(type == 'onduty') {
                prefix = '设置';
                ret = await funcs().updateEmployee.bind(this)({_id, status: 0});
            }
            if(type == 'rest') {
                prefix = '设置';
                ret = await funcs().updateEmployee.bind(this)({_id, status: 1});
            }
            
            if(ret.code != 0) {
                app.showToast({
                    title: `${prefix}${textMap[type]}失败:${ret.message}`
                });
                return;
            }
            app.showToast({
                title:  `${prefix}${textMap[type]}成功`
            });
            $page.dataset.state.tableData.isLoading = true;
            // 删除回到第一页
            $page.dataset.state.tableData.pageIndex = 1;
            await funcs().renderEmployeeList.bind(this)({
                pageIndex: $page.dataset.state.tableData.pageIndex,
                pageSize: $page.dataset.state.tableData.pageSize
            });
            $page.dataset.state.tableData.isLoading = false;
        break;
    }
}

重点是这段代码

case 'edit':
             ({ _id } = data.target);
             app.navigateTo({
                 pageId: 'employee_create',
                 params: {
                     _id
                 }
             });

先获取从页面传入的主键，然后完成页面的跳转并将主键传递过去

事件绑定

低码创建后就需要给按钮绑定事件，选中编辑按钮，切换到事件页签

选中我们创建的低代码方法，传入参数需要传入ID

以表达式进行传值，表达式为

{_id:$scope.id22.recordSlot.record._id,type:'edit'}

id22是表格组件的标识，我们可以选中表格组件查看

然后点击发布按钮查看效果