FE_CPONE/test/vuex/one-md-auto-verification/components/mdAutoVerificationMultirule.vue

<template>
  <v-layout>
    <v-flex xs12>
      <v-card class="mb-2" color="white" style="min-height:100px">
        <v-toolbar class="mb-1" color="blue lighten-3" dark height="50px">
          <v-toolbar-title>MULTI RULE : {{xautoverificationlists.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openFormMultirule()" icon>
            <v-icon>library_add</v-icon>
          </v-btn>
        </v-toolbar>
        <v-btn class="mt-1 mb-2" v-for="(vst,idx) in vmultirules" :key="vst.id" small color="error">{{vst.name}}
          <v-icon @click="deleteTest(vst)" right dark>clear</v-icon>
        </v-btn>

        <template>

          <v-dialog v-model="dialogdeletealerthasil" max-width="30%">
            <v-card>
              <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                Peringatan !
              </v-card-title>
              <v-card-text class="pt-2 pb-2">
                <v-layout row>
                  <v-flex xs12 d-flex>
                    <v-layout row>
                      <v-flex pb-1 xs12>
                        <v-layout row>
                          <v-flex pt-2 pr-2 xs12>
                            {{msgalerthasil}}
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-card-text>
              <v-divider></v-divider>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" flat @click="dialogdeletealerthasil = false">
                  Tutup
                </v-btn>
                <v-btn color="primary" flat @click="closeDeleteAlertTest()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>


        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogmultirule" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Multirule</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formmultirule" v-model="validhasil" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        MULTI RULE : {{xautoverificationlists.name}}
                      </v-flex>
                      <v-flex xs12>
                        <v-select item-text="M_ValueName" return-object :items="xvaluexs" v-model="xvaluex"
                              label="Hasil"></v-select>
                      </v-flex>
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" flat @click="updateDialogFormMultirule()">Tutup</v-btn>
                  <v-btn color="blue darken-1" flat @click="saveFormMultirule()">Simpan</v-btn>
                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-layout>
        </template>

      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped>
</style>

<script>
  module.exports = {
    data: () => ({
      color: "success",
      validhasil: false,
      search: "",
      dialogdeletealerthasil: false,
      xid: 0,
      msgalerthasil: ""
    }),
    mounted() {
      this.$store.dispatch("multirule/selectvaluex")
    },
    computed: {
      vmultirules() {
        return this.$store.state.multirule.multirules
      },
      dialogmultirule() {
        return this.$store.state.multirule.dialog_form_multirule
      },
      xselected_hasil: {
        get() {
          return this.$store.state.multirule.selected_hasil
        },
        set(val) {
          this.$store.commit("multirule/update_selected_hasil", val)
        }
      },
      xautoverificationlists() {
        return this.$store.state.autoverificationlist.selected_autoverificationlist
      },
      xhasils() {
        return this.$store.state.multirule.hasils
      },
      is_loading() {
        return this.$store.state.multirule.search_status == 1
      },
      xvaluexs() {
        return this.$store.state.multirule.valuexs
      },
      xvaluex: {
        get() {
          return this.$store.state.multirule.valuex
        },
        set(val) {
          this.$store.commit("multirule/update_valuex", val)
        }

      }
    },
    methods: {
      updateDialogFormMultirule() {
        this.$store.commit("multirule/update_dialog_form_multirule", false)
      },
      openFormMultirule() {
        this.$store.commit("multirule/update_selected_hasil", {})
        this.$refs.formmultirule.reset()
        this.$refs.formmultirule.resetValidation()
        this.$store.commit("multirule/update_dialog_form_multirule", true)
      },
      saveFormMultirule() {
        this.$store.dispatch("multirule/save", {
            Nat_MultiruleT_TestID: this.$store.state.autoverificationlist.selected_autoverificationlist.id,
            Nat_MultiruleM_ValueID: this.xvaluex.M_ValueID
          })
        
      },
      updateAlert_success(val) {
        this.$store.commit("multirule/update_alert_success", val)
      },
      thr_search: _.debounce(function () {
        this.$store.dispatch("multirule/search", {
          id: this.$store.state.multirule.selected_multirule.id
        })
      }, 2000),
      deleteTest(data) {
        this.xid = data.id
        console.log(this.xid)
        this.$store.commit("multirule/update_selected_hasil", data)
        this.msgalerthasil = "Yakin, mau hapus pemeriksaan " + this.xselected_hasil.name + "dari multirule " + this.xautoverificationlist
          .name + "  ?"
        this.dialogdeletealerthasil = true
      },
      closeDeleteAlertTest() {
        this.$store.dispatch("multirule/delete", {
          xid: this.xid,
          multiruleid: this.$store.state.multirule.selected_multirule.id,
          multirulename: this.$store.state.multirule.selected_multirule.name,
          hasilname: this.xselected_hasil.name
        })
        this.dialogdeletealerthasil = false
      }
    },
    watch: {
      search(val, old) {
        console.log(val)
        if (val !== "" && val !== old && val && val.length > 2) {
          this.$store.commit("multirule/update_search", val)
          this.thr_search()
        }
      }
    }
  }
</script>