Extend Operations

Extend custom operation buttons in the FcDesigner designer in multiple ways to enhance business logic and user experience. This guide shows how to implement these features.

Save Form

Implement save functionality by adding a save button in the designer. Clicking the save button triggers the save event, and you can write save logic in the event handler function:

<template>
    <fc-designer ref="designer" @save="handleSave" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                config: {
                    // Show save button
                    showSaveBtn: true
                },
            };
        },
        methods: {
            // Save event handler function
            handleSave() {
                // Handle form save logic
                console.log('Save button clicked');
                // For example, you can send form data to server
                // axios.post('/save', this.$refs.designer.getFormData());
            }
        }
    };
</script>

Configuration Extension

Extend operation buttons through the props.handle configuration. Each button has a label and a handle function to define the button's behavior:

<template>
    <fc-designer ref="designer" :handle="handle"></fc-designer>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                handle: [
                    {
                        // Custom operation button: Chinese/English toggle
                        label: 'Language Toggle',
                        handle: () => {
                            // Handle language toggle logic
                            console.log('Language toggle button clicked');
                            // For example, toggle interface language
                        },
                    },
                    {
                        // Custom operation button: Select form
                        label: 'Select Form',
                        handle: () => {
                            // Handle form selection logic
                            console.log('Select form button clicked');
                            // For example, open form selection dialog
                        },
                    },
                ],
            };
        }
    };
</script>

Slot Extension

Extend custom buttons through the handle slot. Using slots allows you to insert any custom component or button, providing greater flexibility:

<template>
    <fc-designer ref="designer">
        <template #handle>
            <el-button @click="customAction">Custom Button</el-button>
        </template>
    </fc-designer>
</template>
<script>
    export default {
        name: 'app',
        methods: {
            // Custom button click event handler function
            customAction() {
                console.log('Custom button clicked');
                // Execute custom operation
            }
        }
    };
</script>

Usage Scenario Examples

Form Data Saving

In enterprise applications, implement dynamic data saving in the form designer. For example, in an OA system, users can edit forms in the designer and save their settings. Using the showSaveBtn configuration, add a save button in the designer, and when users click it, the form data is automatically submitted to the server:

<template>
    <fc-designer ref="designer" @save="handleSave" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                config: {
                    showSaveBtn: true
                },
            };
        },
        methods: {
            handleSave() {
                const formData = this.$refs.designer.getFormData();
                console.log('Form data:', formData);
                // Submit data to server
                axios.post('/save', formData).then(response => {
                    console.log('Save successful:', response.data);
                }).catch(error => {
                    console.error('Save failed:', error);
                });
            }
        }
    };
</script>

Form Selection Dialog

In some applications, users may need to select predefined form templates in the designer. Implement a form selection dialog by extending custom buttons through slots:

<template>
    <fc-designer ref="designer">
        <template #handle>
            <el-button @click="openFormSelectDialog">Select Form</el-button>
        </template>
    </fc-designer>

    <!-- Form selection dialog -->
    <el-dialog title="Select Form" :visible.sync="dialogVisible">
        <el-select v-model="selectedForm" placeholder="Please select a form">
            <el-option
                v-for="form in formOptions"
                :key="form.value"
                :label="form.label"
                :value="form.value">
            </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="confirmSelection">Confirm</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                dialogVisible: false,
                selectedForm: '',
                formOptions: [
                    { label: 'Form Template A', value: 'formA' },
                    { label: 'Form Template B', value: 'formB' }
                ]
            };
        },
        methods: {
            openFormSelectDialog() {
                this.dialogVisible = true;
            },
            confirmSelection() {
                console.log('Selected form:', this.selectedForm);
                this.dialogVisible = false;
            }
        }
    };
</script>

These methods let you customize and extend the operation buttons of the FcDesigner designer according to business requirements, making it more suitable for actual usage scenarios.