Initial commit

app/components/datatable/EditLabel.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <p class="fsb-20 mb-5">Điều chỉnh tiêu đề</p>
+    <div v-for="(v, i) in arr" :key="i" :class="(i>0? 'mt-4' : null)">
+      <p class="fsb-14">Dòng thứ {{(i+1)}}<span class="has-text-danger"> *</span></p>
+    <div class="field has-addons mt-1">
+  <div class="control is-expanded">
+    <input class="input" type="text" v-model="v.label">
+  </div>
+  <div class="control">
+    <a class="button px-2 is-primary" @click="add()">
+      <span>
+      <SvgIcon v-bind="{name: 'add1.png', type: 'white', size: 17}"></SvgIcon></span>
+    </a>
+  </div>
+  <div class="control" @click="remove(i)" v-if="(i>0)">
+    <a class="button px-2 is-dark">
+      <span>
+        <SvgIcon v-bind="{name: 'bin.svg', type: 'white', size: 17}"></SvgIcon>
+      </span>
+    </a>
+  </div>
+</div>
+  <p class="help has-text-danger" v-if="v.error"> {{v.error}} </p>
+</div>
+  <div class="buttons mt-5">
+    <button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
+    <button class="button is-dark" @click="$emit('close')">Hủy bỏ</button>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['label'],
+  data() {
+    return {
+      arr: []
+    }
+  },
+  created() {
+    let arr1 = this.label.replace('<div>', '').replace('</div>', '').split("</p>")
+    arr1.map(v=>{
+      if(!this.$empty(v)) {
+        let label = v + '</p>'
+        label = this.$stripHtml(label)
+        this.arr.push({label: label})
+      }
+    })
+  },
+  methods: {
+    add() {
+      this.arr.push({label: undefined})
+    },
+    remove(i) {
+      this.$remove(this.arr, i)
+    },
+    checkError() {
+      let error = false
+      this.arr.map(v=>{
+        if(this.$empty(v.label)) {
+          v.error = 'Nội dung không được bỏ trống'
+          error = true
+        }
+      })
+      if(error) this.arr = this.$copy(this.arr)
+      return error
+    },
+    update() {
+      if(this.checkError()) return
+      let label = ''
+      if(this.arr.length>1) {
+        this.arr.map((v,i)=>{
+          label += `<p${i<this.arr.length-1? ' style="border-bottom: 1px solid white;"' : ''}>${v.label.trim()}</p>`
+        })
+        label = `<div>${label}</div>`
+      } else label = this.arr[0].label.trim()
+      this.$emit('modalevent', {name: 'label', data: label})
+      this.$emit('close')
+    }
+  }
+}
+</script>