页面.doUiAction

12003

在 JianghuJS 框架中，HTML 上的所有操作都通过调用 doUiAction 方法实现。doUiAction 提高了 JavaScript 代码的可读性，并通过方法名增加了可读性。通过 doUiAction("uiActionId", uiActionParamObj) 链式执行方法（function），可实现便捷的维护和修改。

doUiAction案例-CRUD

• 异步函数 doUiAction
• 使用 switch-case 结构进行流控制，根据表达式的值执行不同的分支
• 每个分支包含一组函数，完成页面的某一个功能，如 CRUD

<v-app>
    <v-row class="ma-0 pa-3">
        <v-btn class="elevation-0 mr-2" color="success" small @click="doUiAction('createItem')">Create(C)</v-btn>
        <v-btn class="elevation-0 mr-2" color="success" small @click="doUiAction('getTableData')">Read(R)</v-btn>
        <v-btn class="elevation-0 mr-2" color="success" small @click="doUiAction('updateItem')">Update(U)</v-btn>
        <v-btn class="elevation-0 mr-2" color="success" small @click="doUiAction('deleteItem')">Delete(D)</v-btn>
    </v-row>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: {
        },
        async created() {
        },
        async mounted() {
        },
        methods: {
            async doUiAction(uiActionId, uiActionData) {
                try {
                    switch (uiActionId) {
                        case 'getTableData':
                            await this.getTableData();
                            break;
                        case 'createItem':
                            await this.prepareCreateValidate();
                            await this.confirmCreateItemDialog();
                            await this.prepareDoCreateItem();
                            await this.doCreateItem();
                            await this.closeCreateDrawer();
                            await this.getTableData();
                            break;
                        case 'updateItem':
                            await this.prepareUpdateValidate();
                            await this.confirmUpdateItemDialog();
                            await this.prepareDoUpdateItem();
                            await this.doUpdateItem();
                            await this.closeUpdateDrawer();
                            await this.getTableData();
                            break;
                        case 'deleteItem':
                            await this.prepareDeleteFormData(uiActionData);
                            await this.confirmDeleteItemDialog();
                            await this.prepareDoDeleteItem();
                            await this.doDeleteItem();
                            await this.clearDeleteItem();
                            await this.getTableData();
                            break;
                        default:
                            console.error("[doUiAction] uiActionId not found", { uiActionId });
                            break;
                    }
                } catch (error) {
                    throw error;
                } finally {
                    window.jhMask && window.jhMask.hide();
                }
            },
            async getTableData() {
                console.log("====获取表格数据.getTableData");
            },
            // ---------- 新增数据 uiAction >>>>>>>>>> --------
            async prepareCreateFormData() {
                console.log("====新增数据.prepareCreateFormData");
            },
            async openCreateDrawer() {
                console.log("====新增数据.openCreateDrawer");
            },
            async prepareCreateValidate() {
                console.log("====新增数据.prepareCreateValidate");
            },
            async confirmCreateItemDialog() {
                console.log("====新增数据.confirmCreateItemDialog");
            },
            async prepareDoCreateItem() {
                console.log("====新增数据.prepareDoCreateItem");
            },
            async doCreateItem() {
                console.log("====新增数据.doCreateItem");
            },
            async closeCreateDrawer() {
                console.log("====新增数据.closeCreateDrawer");
            },
            // ---------- <<<<<<<<<<< 新增数据 uiAction ---------
            // ---------- 修改数据 uiAction >>>>>>>>>>>> --------
            async prepareUpdateFormData() {
                console.log("====修改数据.prepareUpdateFormData");
            },
            async openUpdateDrawer() {
                console.log("====修改数据.openUpdateDrawer");
            },
            async prepareUpdateValidate() {
                console.log("====修改数据.prepareUpdateValidate");
            },
            async confirmUpdateItemDialog() {
                console.log("====修改数据.confirmUpdateItemDialog");
            },
            async prepareDoUpdateItem() {
                console.log("====修改数据.prepareDoUpdateItem");
            },
            async doUpdateItem() {
                console.log("====修改数据.doUpdateItem");
            },
            async closeUpdateDrawer() {
                console.log("====修改数据.closeUpdateDrawer");
            },
            // ---------- <<<<<<<<<<< 修改数据 uiAction ---------
            // ---------- 删除数据 uiAction >>>>>>>>>>>> --------
            async prepareDeleteFormData() {
                console.log("====删除数据.prepareDeleteFormData");
            },
            async confirmDeleteItemDialog() {
                console.log("====删除数据.confirmDeleteItemDialog");
            },
            async prepareDoDeleteItem() {
                console.log("====删除数据.prepareDoDeleteItem");
            },
            async doDeleteItem() {
                console.log("====删除数据.doDeleteItem");
            },
            async clearDeleteItem() {
                console.log("====删除数据.clearDeleteItem");
            },
            // ---------- <<<<<<<<<<< 删除数据 uiAction ---------
        }
    })
</script>