unity/resources/js/user/pages/contract-template-obligation-denpendencies/FormModal.vue

<template>
  <div>
    <b-modal :id="'contract-template-obligation-dependency-form-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
      <template v-slot:modal-title>
        <h4 class="modal-title">Contract Template Obligation Dependency Create</h4>
      </template>
      <contract-template-obligation-form-table
        :selected_contract_template_obligation="[this_contract_template_obligation]"
        :no_convert="true"
      >
      </contract-template-obligation-form-table>
        <!-- ///////////////////////////////////////////////////// -->
        <select-option-auto-complete-input
          :input_name="'depend_contract_template_obligation_id'"
          :form="form"
          :placeholder="''"
          :label="'Depend on Contract Template Obligation*'"
          :endpoint="'contract-template-obligation/list'"
          :params="{
            'not_id': [this_contract_template_obligation.hash_id]
          }"
          :search_field="'name'"
          :limit="1"
          :return_key="'hash_id'"
        ></select-option-auto-complete-input>
        <!-- ///////////////////////////////////////////////////// -->
        <template v-slot:modal-footer>
          <form  @submit.prevent="onSubmit">
            <v-btn
            :loading="loading"
            :disabled="loading"
            type="submit"
            color="primary"
            class="white--text"
            @click="loader = 'loading'"
            >
              Submit
            </v-btn>
          </form>     
        </template>
    </b-modal>
  </div>
</template>
<script type="text/javascript">
  import SelectOptionAutoCompleteInput from '../../components/inputs/SelectOptionAutoCompleteInput';
  import ContractTemplateObligationFormTable from '../contract-template-obligations/FormTable';

  export default {
    props: {
      this_contract_template_obligation: Object,
    },
    components: {
      SelectOptionAutoCompleteInput,
      ContractTemplateObligationFormTable
    },
    data() {
        let vm = this;
        return {
          form: new Form({
            contract_template_obligation_id: [],
            depend_contract_template_obligation_id: []
          }),
          loader: null,
          loading: false
        }
    },
    methods: {
      getExistDataList() {
        let vm = this;
      },
      resetData() {
        let vm = this;
        vm.form.contract_template_obligation_id = [];
        vm.form.depend_contract_template_obligation_id = [];
        vm.loader = null;
        vm.loading = false;
      },
      onSubmit() {
        let vm = this;
        vm.form.contract_template_obligation_id = [vm.this_contract_template_obligation.hash_id];
        const l = vm.loader
        vm[l] = !vm[l];
        let method = 'post';
        let url = 'contract-template-obligation-dependency/store';
        General.onComplete(url, vm.form, method, true)
        .then(data => {
          vm[l] = false
          vm.loader = null;
          vm.$bvModal.hide('contract-template-obligation-dependency-form-modal');
          vm.$emit('refresh');
          General.toastedMessage('create', 'Contract Template Obligation Dependency', data.data.hash_id);
        })
        .catch(function (error) {
          vm[l] = false
          vm.loader = null;
        });
      },
    }
  }
</script>