changes

components/parameter/Apps.vue

@@ -0,0 +1,97 @@
+<template>
+<div>
+    <Caption v-bind="{title: 'Tham số'}"></Caption>
+      <div class="field is-horizontal mt-5">
+  <div class="field-body">
+    <div class="field is-narrow">
+      <label class="label">Mã <span class="has-text-danger"> * </span> </label>
+      <p class="control">
+        <input class="input" type="text" placeholder="" v-model="record.code">
+      </p>
+    </div>
+    <div class="field">
+      <label class="label">Tên <span class="has-text-danger"> * </span> </label>
+      <p class="control">
+        <input class="input" type="text" placeholder="" v-model="record.name">
+      </p>
+    </div>
+       <div class="field is-narrow">
+      <label class="label">Thứ tự <span class="has-text-danger"> * </span> </label>
+      <p class="control">
+        <input class="input" type="text" placeholder="" v-model="record.index">
+      </p>
+      <p class="help is-danger" v-if="errors.index">{{ errors.index }}</p>
+    </div>
+    </div>
+  </div>
+        <div class="field is-horizontal mt-5">
+  <div class="field-body">
+    <div class="field">
+      <label class="label">Logo<span class="has-text-danger"> * </span> </label>
+      <p class="control is-expanded">
+        <input class="input" type="text" placeholder="" v-model="record.logo">
+      </p>
+    </div>
+    <div class="field">
+      <label class="label">Link<span class="has-text-danger"> * </span> </label>
+      <p class="control is-expanded">
+        <input class="input" type="text" placeholder="" v-model="record.link">
+      </p>
+    </div>
+
+  <div class="field pl-5">
+    <label class="label">Trạng thái<span class="has-text-danger"> * </span> </label>
+      <span class="mr-4" v-for="(v,i) in option">
+        <a class="icon-text" @click="radio=v">
+          <SvgIcon v-bind="{name: `radio-${radio.code===v.code? '' : 'un'}checked.svg`, type: 'gray', size: 22}"></SvgIcon>
+          <span :class="v.code===1? 'has-text-primary' : 'has-text-danger'">{{ v.name }}</span>
+        </a>
+      </span>
+  </div>
+    </div>
+  </div>
+  </div>
+    <div class="field mt-5">
+    <label class="label">Mô tả<span class="has-text-danger"> * </span> </label>
+    <div class="control">
+       <input class="input" type="text" placeholder="" v-model="record.detail">
+    </div>
+  <div class="mt-5 pt-2">
+    <button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
+    <a class="button is-dark has-text-white ml-5" @click="update(true)" v-if="record.id">Tạo mới</a>
+  </div>
+</div>
+</template>
+<script>
+export default {
+  props: ['api', 'pagename', 'row'],
+  data () {
+    return {
+      record: this.$copy(this.row || {}),
+      errors: {},
+      option: [{code: 0, name: 'Not Active'}, {code: 1, name: 'Active'}],
+      radio: null
+    }
+  },
+  created() {
+    if(!this.row) return
+    this.radio = this.row.active? this.option[1] : this.option[0]
+  },
+  computed: {
+    pagedata: {
+      get: function() {return this.$store.state[this.pagename]},
+      set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
+    }
+  },
+  methods :{
+    async update(isNew) {
+      let data = this.$resetNull(this.record)
+      if(isNew) delete data.id
+      data.active = this.radio.code
+      if(data.id) await this.$updaterow(this.api, data, undefined, this.pagename)
+      else await this.$insertrow(this.api, data, undefined, this.pagename)
+      this.$emit('close')
+    }
+  }
+}
+</script>