cssd-back/resources/js/vue/views/TestResult/AddEdit.vue

<template>
  <v-form ref="form">
    <v-container grid-list-xs>
      <material-card
        color="black"
        title="Submit Test Result">
        <v-layout align-center justify-center wrap class="px-5 my-3">
          <v-flex xs12 sm4 md4>
            <v-autocomplete
              :search-input.sync="searchInput"
              :items="testTypeNames"
              v-model="filter.name"
              label="Choose Test Type"
              color="black"
              class="pa-2"
            ></v-autocomplete>
          </v-flex>
          <v-flex xs12 sm3 md3>
            <v-text-field
              name="testcode"
              v-model="filter.unique_code"
              label="Or Enter Test Unique Code"
              color="black"
              class="pa-2"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center">
            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="selectTestType" style="padding:10px 60px;">
              <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
              <span class="black--text">GO</span>
            </v-btn>
          </v-flex>
        </v-layout>
        <v-layout row wrap class="px-5 my-3">
          <v-divider></v-divider>
        </v-layout>
        <v-layout align-center justify-center wrap class="px-5 my-3">
          <v-flex xs12 sm4 md3>
            <v-text-field
              name="autoclave"
              v-model="form.autoclave_id"
              label="ID AutoClave"
              color="black"
              class="pa-2"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 sm4 md3>
            <v-select
              :items="result"
              v-model="form.result"
              label="Resualt"
              color="black"
              class="pa-2"
            ></v-select>
          </v-flex>
          <v-flex v-for="(item, key) in form.data" :key="key">
            <v-text-field
              v-if="item.type == 'Text'"
              v-model="item[item.name]"
              :label="item.name"
              color="black"
              class="pa-2"
            ></v-text-field>
            <v-select
              v-if="item.type == 'Select'"
              :items="item.options"
              v-model="item[item.name]"
              :label="item.name"
              color="black"
              class="pa-2"
              item-text="title"
            ></v-select>
            <template v-if="item.type == 'CheckBox'">
              <p>{{ item.name }}</p>
              <v-container  fluid v-for="(optionValue, keyOption) in item.options" :key="keyOption">
                <v-checkbox :label="option.title" v-model="form.data[key][item.name]" :value="optionValue"></v-checkbox>
              </v-container>
            </template>
            <!-- <template v-if="item.type == 'Form'">

            </template> -->
          </v-flex>
        </v-layout>
        <v-layout row wrap class="px-5 my-3">
          <v-divider></v-divider>
        </v-layout>
        <v-layout align-center justify-center wrap class="px-5 mt-2">
          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
            <span class="white--text">SAVE</span>
          </v-btn>
          <router-link :to="{name: 'Dashboard'}">
            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
              <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
              <span class="black--text">Back</span>
            </v-btn>
          </router-link>
        </v-layout>
     </material-card>
    </v-container>
  </v-form>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
  data: () => ({
    result: [
      'Accept',
      'Reject',
    ],
    testTypeNames: [],
    searchInput: '',
    form: {
      autoclave_id: '',
      result: '',
      data: [

      ]
    },
    filter: {
      name:'',
      unique_code:''
    }
  }),
  created() {
    this.load();
  },
  methods:{
    async load() {
      const result = await ApiService.get(urls.listTestTypeName);
      this.testTypeNames = result.data.data;
    },
    async selectTestType() {
      const result = await ApiService.post(urls.getInputs, this.filter);
      if (result && result.status == 200) {
        this.form.data = result.data.data;
      }
    }
  }
}
</script>