javascript VueJS模态

Posted 2021-05-03

<!-- Modal Component -->
        <b-modal ref="invoiceItemModal" size="lg" title="New Invoice Item"
                 :modal-class="'block block-themed block-transparent'"
                 :header-text-variant="'light'"
                 :header-class="'bg-primary-dark'"
                 :footer-class="'block-content block-content-full text-right bg-light'"
                 :ok-title="submit_label"
        @ok="handleOk"
        >
            <!--

            <div slot="modal-header">
                <h3 class="block-title">@{{ modal_title }}</h3>
            </div>

            -->

            <form @submit.stop.prevent="handleSubmit">

                <v-validation-alert :submitted="component_submitted"></v-validation-alert>

                <div class="form-row">

                    <div class="form-group col-md-6">
                        <v-text
                                v-model="item_data.item_name"
                                :field_name="'item_name'"
                                :label="'Item Name'"
                                :rules="'required'"
                        ></v-text>
                    </div>

                    <div class="form-group col-md-6">
                        <v-text
                                v-model="item_data.item_description"
                                :field_name="'item_description'"
                                :label="'Item Description'"
                                :rules="'required'"
                        ></v-text>
                    </div>
                </div>

                <div class="form-row">

                    <div class="form-group col-md-4">
                        <v-text
                                v-model="item_data.quantity"
                                :field_name="'quantity'"
                                :label="'Quantity'"
                                :rules="'required|decimal'"
                        ></v-text>
                    </div>

                    <div class="form-group col-md-4">
                        <v-money
                                v-model="item_data.price"
                                :field_name="'price'"
                                :label="'Price'"
                                :rules="'required'"
                        ></v-money>
                    </div>

                    <div class="form-group col-md-4">
                        <label for="amount">Amount</label>
                        <input :value="amount | toMyCurrency"
                               readonly="readonly" type="amount"
                               name="amount" ref="amount"
                               class="form-control"
                               id="amount" >
                    </div>

                </div>

            </form>

            <!--    

            <div slot="modal-footer">
                <button type="button" class="btn btn-sm btn-light">Cancel</button>
                <button type="submit" class="btn btn-sm btn-primary">@{{ submit_label }}</button>
            </div>

            -->


        </b-modal>

<script>

    export default {
        props: {
            
        },
        mounted () {

        },
        methods: {

            /*
            * Reset previous validation error each time open a new Modal form
            * */
            resetValidation() {
                this.$validator.reset();
            },

            showCreateForm() {

                this.current_action = 'create';

                // reset form to initial value

                this.item_data = this.getDefaultItemData();

                this.resetValidation();

                // set submit label and modal title
                this.submit_label = 'Create';
                this.modal_title = 'New Invoice Item';

                this.openModal();
            },

            showEditForm(index) {

                this.current_action = 'edit';

                this.current_index = index;

                // get item data from component invoice items array

                let copied_item_data = Object.assign({}, this.component_invoice_items[index]);

                this.item_data = copied_item_data;

                // reset validation

                this.resetValidation();

                // set submit label and modal title
                this.submit_label = 'Update';
                this.modal_title = 'Edit Invoice Item';

                this.openModal();
            },

            openModal() {
                this.$refs.invoiceItemModal.show();
            },

            closeModal() {
                this.$refs.invoiceItemModal.hide();
            },

            handleOk(event) {

                // prevent modal from closing
//                event.preventDefault();

                this.handleSubmit(event);
            },

            /*
            * Handle modal submission for New and Edit
            * */
            handleSubmit(e) {

                this.component_submitted = true;

                this.$validator.validate().then(valid => {
                    if (valid) {

                        if (this.current_action === 'create') {
                            this.store();
                        }
                        else if (this.current_action === 'edit') {
                            this.update();
                        }
                    }
                    else {
                        // scroll to top

                        window.scrollTo(0,0);
                    }
                });


            },

            /*
            * New row created by v-for must be re-init for tooltip to work
            * */

            reinitTooltip() {
                Vue.nextTick(function () {
                    $('[data-toggle="tooltip"]').tooltip();
                });
            },

            store() {

                this.component_invoice_items.push(this.item_data);

                this.reinitTooltip();

                this.closeModal();

                this.updateParent();
            },

            update() {

                Vue.set(this.component_invoice_items, this.current_index, this.item_data);

                this.closeModal();

                this.updateParent();

            },

            destroy() {

                let deleted_item = this.component_invoice_items[this.current_index];

                // remove item from component_invoice_items array

                this.$delete(this.component_invoice_items, this.current_index);

                // add the item into deleted_invoice_items array

                this.deleted_invoice_items.push(deleted_item);

                this.updateParent();

                this.updateParentDeletedItems();
            },

            /*
            * Update the parent component the value of latest component_invoice_items after Create / Update / Delete operation
            * */
            updateParent() {
                this.$emit('update:invoice_items', this.component_invoice_items);
            },

            /*
            * Update the parent component the value of latest deleted invoice items id
            * */
            updateParentDeletedItems() {

                this.$emit('update:deleted_invoice_item_ids', this.deleted_invoice_item_ids);
            }
        }
    }
</script>