page.doUiAction

12003

In the JianghuJS framework, all operations on HTML are implemented by calling the doUiAction method. doUiAction enhances the readability of JavaScript code and improves clarity through method names. By executing methods (functions) in a chain with doUiAction("uiActionId", uiActionParamObj), convenient maintenance and modification can be achieved.

doUiAction Example - CRUD

• Asynchronous function doUiAction
• Using switch-case structure for flow control, executing different branches based on the value of the expression
• Each branch contains a set of functions that accomplish a specific functionality of the page, such as 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("====Fetching table data.getTableData");
            },
            //